Color palette
background
#FAFAFA
background
on-background
#171717
on-background
on-surface-variant
#4D4D4D
on-surface-variant
outline-variant
#FFFFFF66
outline-variant
on-primary
#FFFFFF
on-primary
secondary
#0072F5
secondary
on-secondary
#000000
on-secondary
Typography
The quick brown fox
Body sample at 14px. The quick brown fox jumps over the lazy dog. 0123456789
Primary font
GeistSans
Heading scale
64px56px24px
Body scale
16px14px
Weights
400450
Components
button-primary
backgroundColor: #171717
textColor: #ffffff
typography: {typography.label-sm}
rounded: {rounded.md}
height: 32px
button-secondary
backgroundColor: transparent
typography: {typography.label-sm}
rounded: 0px
height: 32px
Buttons
Background: #171717
Text color: #ffffff
Corner radius: 6px
Height: 32px
Padding: 0px 6px 0px 6px
Font: 14px, weight 500
Sampled from: <a> labelled Sign Up
Layout tokens
Spacing scale
2px2.5px4px5px6px8px
Border radii
4px6px8px20px9999px
Guidelines
Do
- Do use
#171717 for primary actions and CTAs - Do stick to 4 font weights: 400, 450, 500, 600
- Do use
GeistSans as the primary typeface
Don't
- Don't introduce colors outside the palette above
- Don't mix fonts beyond GeistSans and Geist Mono
- Don't use border-radius values outside: 4px, 6px, 7px 7px 0px, 8px, 20px, 9999px (pill)