Typography
scale ratio 1.297- Inter Variablecss: InterVariablebody400 500 60067%
- Recklessdisplay50033%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Reckless | 76px | 500 | 1 | -0.02em |
| title | Inter Variable | 22px | 600 | 1.091 | 0em |
| body | Inter Variable | 16px | 400 | 1.5 | 0em |
| body-sm | Inter Variable | 14px | 400 | 1.429 | 0em |
| label | Inter Variable | 15px | 400 | 1.6 | 0em |
Type scale
Aa12Aa14Aa15Aa16Aa17Aa20Aa22Aa24Aa44Aa76
- Body size
- 16px / 1.5
- Display size
- 76px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 14.74:1
- Muted on bg
- 6.51:1
- Accent on bg
- 16.75:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 11
- 12
- 14
- 16
- 20
- 24
- 32
- 40
- 52
- 80
- 88
Corner radii
3162026pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 88px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #151515
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 11px 16px
- height
- 47px
- fontFamily
- Inter Variable
- fontSize
- 16px
- fontWeight
- 600
- shadow
- rgba(0, 0, 0, 0.05) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.55) 0px 1px 4px 0px inset, rgba(0, 0, 0, 0.94) 0px -2px
card
- rounded
- 20px
- padding
- 32px
- backgroundColor
- #FFFFFF
input
- rounded
- 16px
- height
- 48px
- padding
- 12px 14px
- backgroundColor
- #F9F9F9
Layout & motion
- Container
- 1200px
- Grid columns
- 2
- Hero
- left-over-media+media-below
- Navigation
- top-static+transparent
- Page height
- 8,354px
- Easing
- cubic-bezier(0.455, 0.03, 0.515, 0.955)
- Durations
- 125ms 160ms 200ms 250ms
- Transitions
- 75
- Keyframes
- 5
- Stack
- hotwire, netlify, cloudfront
Page sections (9)
section labels are heuristic
01nav
03feature detail?Create with focus (or friends)
04features?Test your ideas faster
05feature detail?Take your work further
06features?Easy sharing
07cta?Discover a better way to design
08logos?
09footerNever miss an update
How Sketch compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 76px: larger than 78% of indexed sites (median 60px).
- Type scale
- 1.30×: steeper than 56% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 14.7:1: lower than 78% of indexed sites (median 17.6:1).
- Page length
- 8,354px: longer than 51% of indexed sites (median 8,217px).
- Corner radius
- Mostly 20px, shared by 4 of 274 indexed sites (1%).
- Inter Variable
- One of 2 indexed sites that load Inter Variable (1%).
- Reckless
- The only site in the index that loads Reckless.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Sketch use?
Sketch uses Inter Variable (loaded as "InterVariable") for body text. Reckless is used for headings.
What are Sketch's brand colors?
Sketch's website uses a light scheme: background #F5F5F5, surface #FFFFFF, text #212123, muted text #000000A3 and borders #0000001A.
How is Sketch's website laid out?
The most common corner radius is 20px, body text is 16px with 1.5 line height, and the page container is 1200px wide.
Similar to Sketch
Inter Variable / GT Alpina Condensed#FCF7ED
SavvyCalsavvycal.com
Inter#FFFFFF
Bitwardenbitwarden.com
Canva Sans 65f8d9fc23ecf321#6437FF
Cavalrycavalry.scenegroup.co
Neue Montreal / Altera Carve / Neue Gstaad Normal Normal#EDEDED
Pangram Pangrampangrampangram.com
SF Pro (system-ui)#F2F5F7
Thingsculturedcode.com