Typography
scale ratio 1.245- Cinetypebody300 400 70037%
- IBM Plex Sansother400 500 60018%
- PP Formulaother600 80014%
- PP Formula SemiExtendeddisplay70014%
- PP Editorial Newother20010%
- Latoother400 600 7003%
- Cinetype Monomono4002%
- IBM Plex Monoother4001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | PP Formula SemiExtended | 74px | 700 | 1.2 | -0.025em |
| headline | PP Formula | 28px | 800 | 1.3 | -0.025em |
| title | PP Formula | 20px | 600 | 1.3 | -0.025em |
| body | Cinetype | 16px | 300 | 1.5 | 0em |
| body-sm | IBM Plex Sans | 12px | 400 | 1.25 | 0em |
| label | Cinetype | 14px | 400 | 1 | 0em |
| mono | IBM Plex Mono | 11px | 400 | 1.5 | 0em |
Type scale
Aa10Aa11Aa12Aa13Aa14Aa16Aa18Aa20Aa24Aa28Aa40Aa60Aa74
- Body size
- 16px / 1.5
- Display size
- 74px
- Display tracking
- -0.025em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.95:1
- Muted on bg
- 13.99:1
- Dark mode
- none
Declared accent tokens
- --appUI-primaryColor#F5C0C0painted
- --appUI-intent-primary#F5C0C0painted
- --magicColors-primaryColor#F5C0C0painted
Space, shape & depth
Spacing scale
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 10
- 12
- 14
- 15
- 16
- 20
- 30
Corner radii
234612pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
BI
- backgroundColor
- #FFFCFCB3
- textColor
- #31263B
- rounded
- 9999px
- padding
- 6px 12px
- height
- 42px
- fontFamily
- Cinetype
- fontSize
- 24px
- fontWeight
- 300
- border
- 1px solid #DBD7DA
- shadow
- color(srgb 0.00392157 0.00392157 0.105882 / 0.06) 0px 2px 4px 0px
button-secondary
- textColor
- #31263B
- rounded
- 0px
- padding
- 0px 20px
- height
- 50px
- fontFamily
- Cinetype
- fontSize
- 14px
- fontWeight
- 400
- border
- 1px solid #DBD7DA
card
- rounded
- 6px
- padding
- 0px
- backgroundColor
- #FFFFFF
- shadow
- rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, 0.03) 0px 103px 103px 0px, rgba(49, 38, 59, 0.05) 0px 26px 57px
Layout & motion
- Container
- 1240px
- Grid columns
- 16
- Hero
- centered+media-below
- Navigation
- none-detected
- Page height
- 10,662px
- Easing
- ease
- Durations
- 100ms 150ms 200ms 250ms
- Transitions
- 362
- Keyframes
- 3
- Stack
- next.js, radix-ui, sanity, netlify, cloudflare
How Hex compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 74px: larger than 77% of indexed sites (median 60px).
- Type scale
- 1.25×: flatter than 65% of indexed sites (median 1.28×).
- Container
- 1240px: narrower than 50% of indexed sites (median 1242px).
- Text contrast
- 17.9:1: higher than 55% of indexed sites (median 17.6:1).
- Page length
- 10,662px: longer than 72% of indexed sites (median 8,217px).
- Corner radius
- Mostly 2px, shared by 10 of 274 indexed sites (4%).
- Cinetype
- The only site in the index that loads Cinetype.
- IBM Plex Sans
- The only site in the index that loads IBM Plex Sans.
- 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 Hex use?
Hex uses Cinetype for body text. IBM Plex Sans is used for other. PP Formula is used for other.
What are Hex's brand colors?
Hex's website uses a light scheme: background #FFFCFC, surface #FDFDFD66, text #14141C, muted text #31263B and borders #DBD7DA.
How is Hex's website laid out?
The most common corner radius is 2px, body text is 16px with 1.5 line height, and the page container is 1240px wide.
Similar to Hex
Cursor Gothic / SF Pro (system-ui) / Berkeley Mono#F2F1ED
Cursorcursor.com
Source Sans Pro / IBM Plex Mono#FFFFFF
Hugging Facehuggingface.co
Neue Montreal / Bethany Elingston / IBM Plex Mono#FFFFFF
Eight Sleepeightsleep.com
Arial / Manrope / IBM Plex Mono#EEEAE3
Phosphor Iconsphosphoricons.com
Aften Screen / Benton Sans#FFFFFF
14islands14islands.com