Typography
scale ratio 1.308- Host Groteskcss: hostGroteskdisplay300 400 50054%
- Aleocss: aleoother30026%
- Intercss: interbody400 50016%
- Menlomono400 5003%
- Azeret Monocss: azeretMonoother400 5001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Aleo | 60px | 300 | 1.1 | -0.02em |
| title | Host Grotesk | 22px | 500 | 1.273 | 0em |
| body | Host Grotesk | 16px | 400 | 1.55 | 0em |
| body-sm | Inter | 13px | 400 | 0em | |
| mono | Menlo | 12px | 400 | 0em |
Type scale
Aa11Aa12Aa13Aa16Aa18Aa22Aa32Aa48Aa60Aa80
- Body size
- 16px / 1.55
- Display size
- 60px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 15.49:1
- Muted on bg
- 4.35:1
- Accent on bg
- 15.49:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 3
- 3.5
- 4
- 5.5
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 40
Corner radii
234pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 24px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #1C1C1C
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 0px 16px
- height
- 32px
- fontFamily
- Azeret Mono
- fontSize
- 12px
- fontWeight
- 500
button-secondary
AI Chat
- textColor
- #09090BEB
- rounded
- 6px
- padding
- 0px 8px
- height
- 24px
- fontFamily
- Inter
- fontSize
- 13px
- fontWeight
- 500
- border
- 1px solid #09090B0F
- shadow
- rgba(0, 0, 0, 0.04) 0px 0px 1px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px
card
- rounded
- 4px
- padding
- 0px
- border
- 1px solid #1C1C1C33
Layout & motion
- Container
- 1360px
- Grid columns
- 7
- Hero
- centered-over-media
- Navigation
- top-sticky
- Page height
- 12,691px
- Easing
- ease
- Durations
- 140ms 180ms 200ms 300ms
- Transitions
- 197
- Keyframes
- 4
- Stack
- next.js, shadcn/ui, cloudflare
Page sections (10)
section labels are heuristic
01nav
02hero
03logos
04features?A custom CRM gives your org an edge, comes with
06content?
07features?Make your GTM team happy with
08feature detail?Dev teams power company-wide
09logos
10features?What does Twenty cost?
How Twenty compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.31×: steeper than 58% of indexed sites (median 1.28×).
- Container
- 1360px: wider than 89% of indexed sites (median 1242px).
- Text contrast
- 15.5:1: lower than 70% of indexed sites (median 17.6:1).
- Page length
- 12,691px: longer than 86% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Host Grotesk
- The only site in the index that loads Host Grotesk.
- Aleo
- The only site in the index that loads Aleo.
- 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 Twenty use?
Twenty uses Host Grotesk (loaded as "hostGrotesk") for headings. Aleo (loaded as "aleo") is used for other. Inter (loaded as "inter") is used for body text.
What are Twenty's brand colors?
Twenty's website uses a light scheme: background #F4F4F4, surface #FFFFFF, text #1C1C1C, muted text #1C1C1C99 and borders #FFFFFF66.
How is Twenty's website laid out?
The most common corner radius is 4px, body text is 16px with 1.55 line height, and the page container is 1360px wide.
