Typography
scale ratio 1.189- SF Pro (system-ui)css: -apple-systemdisplay + body400 60097%
- Menlocss: ui-monospacemono4003%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | SF Pro (system-ui) | 32px | 600 | 1.75 | 0em |
| body | SF Pro (system-ui) | 16px | 400 | 1.75 | 0em |
| body-sm | SF Pro (system-ui) | 14px | 400 | 1.75 | 0em |
| mono | Menlo | 14px | 400 | 1.75 | 0em |
Type scale
Aa10.5Aa14Aa16Aa19Aa20Aa24Aa32
- Body size
- 16px / 1.75
- Display size
- 32px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.74:1
- Muted on bg
- 7.02:1
- Accent on bg
- 6.05:1
- Dark mode
- follows system
Declared accent tokens
- --sl-color-accent#0963B5painted
- --sl-color-bg-accent#0963B5painted
- --sl-color-accent-low#044886not on page
- --sl-color-accent-high#54A1F9not on page
Space, shape & depth
Spacing scale (base 4px)
- 3
- 4
- 4.5
- 6.5
- 8
- 12
- 15
- 16
- 20
- 24
- 32
- 40
- 64
- 128
Corner radii
489pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 64px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #0963B5
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 15px 20px
- height
- 56px
- fontFamily
- SF Pro (system-ui)
- fontSize
- 16px
- fontWeight
- 400
- border
- 1px solid #0963B5
button-secondary
Search
- textColor
- #23262F
- rounded
- 8px
- padding
- 1px 8px
- height
- 40px
- fontFamily
- SF Pro (system-ui)
- fontSize
- 14px
- fontWeight
- 400
- border
- 1px solid #D5D7DD
card
- rounded
- 8px
- padding
- 40px
- backgroundColor
- #FFFFFF
- border
- 1px solid #D5D7DD
Layout & motion
- Container
- 1080px
- Grid columns
- 2
- Hero
- unknown
- Navigation
- top-fixed+blur+transparent
- Page height
- 3,453px
- Easing
- ease
- Durations
- 150ms 200ms 1000ms
- Transitions
- 133
- Keyframes
- 1
- Stack
- astro, netlify
Page sections (5)
01nav
02heroSupported by
03logos
04logosWebsite powered by
05footer
How Tauri compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 32px: smaller than 85% of indexed sites (median 60px).
- Type scale
- 1.19×: flatter than 85% of indexed sites (median 1.28×).
- Container
- 1080px: narrower than 78% of indexed sites (median 1242px).
- Text contrast
- 17.7:1: higher than 52% of indexed sites (median 17.6:1).
- Page length
- 3,453px: shorter than 84% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- 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 Tauri use?
Tauri uses SF Pro (system-ui) (loaded as "-apple-system") for headings and body text.
What are Tauri's brand colors?
Tauri's website uses a light scheme: background #FFFFFF, text #17181C, muted text #555962 and borders #D5D7DD.
How is Tauri's website laid out?
The most common corner radius is 8px, body text is 16px with 1.75 line height, and the page container is 1080px wide.
