Typography
scale ratio 1.410- SF Pro (system-ui)css: -apple-systembody400 500 70046%
- Adobe Text Procss: adobeTextProdisplay40025%
- Untitled Sanscss: untitledSansother400 50022%
- Söhne Monocss: soehneMonomono4008%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Adobe Text Pro | 78px | 400 | 0.9 | -0.05em |
| title | SF Pro (system-ui) | 24px | 700 | 1.25 | -0.006em |
| body | SF Pro (system-ui) | 14px | 400 | 1.429 | 0em |
| body-sm | Söhne Mono | 13.3px | 400 | 1.654 | -0.015em |
| label | SF Pro (system-ui) | 14px | 500 | 1.429 | 0em |
Type scale
Aa13.5Aa14Aa16Aa18Aa20Aa24Aa78
- Body size
- 14px / 1.429
- Display size
- 78px
- Display tracking
- -0.05em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 16.39:1
- Muted on bg
- 5.92:1
- Accent on bg
- 5.99:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 8
- 10
- 12
- 16
- 24
- 32
- 64
Corner radii
4812pill
Shadows (4)
- Borders
- none
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #1C2024
- textColor
- #FCFCFD
- rounded
- 8px
- padding
- 0px 24px
- height
- 48px
- fontFamily
- Untitled Sans
- fontSize
- 18px
- fontWeight
- 500
button-secondary
Next invoice
- backgroundColor
- #3E63DD
- textColor
- #FFFFFF
- rounded
- 4px
- padding
- 0px 12px
- height
- 24px
- fontFamily
- SF Pro (system-ui)
- fontSize
- 14px
- fontWeight
- 500
card
- rounded
- 12px
- padding
- 32px
- shadow
- oklab(0.834355 -0.000572754 -0.0182446 / 0.294118) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 8px 40px 0px, rgba(0,
Layout & motion
- Container
- n/a
- Grid columns
- n/a
- Hero
- left-over-media
- Navigation
- none-detected
- Page height
- 900px
- Easing
- cubic-bezier(0.45, 0.05, 0.55, 0.95)
- Durations
- 140ms 180ms
- Transitions
- 10
- Keyframes
- 0
- Stack
- next.js, tailwind, radix-ui, google-tag-manager, cloudflare
Page sections (1)
01footerInvoice
How Radix UI compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 78px: larger than 79% of indexed sites (median 60px).
- Type scale
- 1.41×: steeper than 81% of indexed sites (median 1.28×).
- Text contrast
- 16.4:1: lower than 64% of indexed sites (median 17.6:1).
- Page length
- 900px: shorter than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Adobe Text Pro
- The only site in the index that loads Adobe Text Pro.
- Untitled Sans
- The only site in the index that loads Untitled Sans.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Radix UI use?
Radix UI uses SF Pro (system-ui) (loaded as "-apple-system") for body text. Adobe Text Pro (loaded as "adobeTextPro") is used for headings. Untitled Sans (loaded as "untitledSans") is used for other.
What are Radix UI's brand colors?
Radix UI's website uses a light scheme: background #FFFFFF, surface #FFFFFFCC, text #1C2024, muted text #0007149F and borders #C3C9D54B.
How is Radix UI's website laid out?
The most common corner radius is fully rounded (pill), body text is 14px with 1.429 line height, and the page container is nullpx wide.
