Color palette
background
#08090A
background
on-background
#F7F8F8
on-background
on-surface-variant
#8A8F98
on-surface-variant
outline
#FFFFFF14
outline
on-primary
#1A1A1A
on-primary
secondary
#F79CE0
secondary
on-secondary
#1A1A1A
on-secondary
Typography
The quick brown fox
Body sample at 14px. The quick brown fox jumps over the lazy dog. 0123456789
Primary font
Inter
Heading scale
64px48px24px
Body scale
16px14px
Weights
510400
Components
button-primary
backgroundColor: #e5e5e6
textColor: #08090a
typography: {typography.label-sm}
rounded: {rounded.full}
height: 32px
button-secondary
backgroundColor: transparent
typography: {typography.label-sm}
rounded: 0px
height: 29px
card
backgroundColor: {colors.surface}
rounded: {rounded.xl}
padding: 12px
input
typography: {typography.body-md}
rounded: 0px
Buttons
Background: #e5e5e6
Text color: #08090a
Corner radius: 9999px
Height: 32px
Padding: 0px 12px 0px 12px
Font: 13px, weight 510
Sampled from: <a> labelled Sign up
Cards
Background: #0f1011
Corner radius: 9px
Shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px
Padding: 12px 16px 16px 16px
Inputs
Border: 0px none rgba(0, 0, 0, 0)
Corner radius: 0px
Padding: 0px 32px 0px 63.8px
Font size: 14px
Layout tokens
Spacing scale
8px2px3px4px6px7px
Border radii
4px6px8px9px12px9999px
Guidelines
Do
- Do use
#e5e5e6 for primary actions and CTAs - Do use
Inter as the primary typeface
Don't
- Don't introduce colors outside the palette above
- Don't mix fonts beyond Inter and Berkeley Mono
- Don't use border-radius values outside: 4px, 6px, 8px, 9px, 12px, 12px 12px 0px 0px, 50%, 9999px (pill)