Typography
scale ratio 1.361- Geistdisplay + body400 500 600100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Geist | 48px | 600 | 1.1 | -0.05em |
| body | Geist | 14px | 400 | 1.429 | 0em |
| body-sm | Geist | 12px | 500 | 1.333 | 0.05em |
| label | Geist | 14px | 500 | 1.429 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa30Aa48
- Body size
- 14px / 1.429
- Display size
- 48px
- Display tracking
- -0.05em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 4.73:1
- Accent on bg
- 21.00:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 14
- 16
- 20
- 24
Corner radii
610182224pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Get Started
- backgroundColor
- #000000
- textColor
- #FAFAFA
- rounded
- 9999px
- padding
- 0px 12px
- height
- 35px
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 500
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
button-secondary
View Full Report
- backgroundColor
- #171717
- textColor
- #FAFAFA
- rounded
- 9999px
- padding
- 0px 12px
- height
- 32px
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 500
card
- rounded
- 24px
- padding
- 20px
- backgroundColor
- #FFFFFF
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 -0.000
input
- rounded
- 0px
- height
- 32px
- padding
- 4px 6px
Layout & motion
- Container
- 1352px
- Grid columns
- 4
- Hero
- centered
- Navigation
- top-sticky
- Page height
- 1,893px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 100ms 150ms 200ms
- Transitions
- 90
- Keyframes
- 0
- Stack
- next.js, tailwind, shadcn/ui, vercel
Page sections (3)
01nav
02nav
03footerThe Foundation for your Design System
How Ui compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.36×: steeper than 74% of indexed sites (median 1.28×).
- Container
- 1352px: wider than 88% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 1,893px: shorter than 90% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Geist
- One of 11 indexed sites that load Geist (4%).
- 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 Ui use?
Ui uses Geist for headings and body text.
What are Ui's brand colors?
Ui's website uses a light scheme: background #FFFFFF, surface #F5F5F5, text #000000, muted text #737373 and borders #E5E5E5.
How is 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 1352px wide.
