Color palette
background
#FFFFFF
background
on-background
#000000
on-background
on-surface-variant
#533AFD
on-surface-variant
on-primary
#FFFFFF
on-primary
secondary
#7F7DFC
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
sohne-var
Heading scale
48px32px26px
Body scale
16px14px
Weights
300400
Components
button-primary
backgroundColor: #533afd
textColor: #ffffff
typography: {typography.label-sm}
rounded: {rounded.sm}
padding: 12px
height: 40px
button-secondary
backgroundColor: transparent
typography: {typography.label-sm}
rounded: {rounded.sm}
padding: 12px
height: 40px
card
backgroundColor: {colors.surface}
rounded: 0px
input
typography: {typography.body-md}
rounded: 0px
Buttons
Background: #533afd
Text color: #ffffff
Corner radius: 4px
Height: 40px
Padding: 11.5px 20px 12.5px 20px
Font: 14px, weight 400
Sampled from: <a> labelled Contact sales
Cards
Corner radius: 0px
Padding: 0px 0px 0px 0px
Inputs
Border: 0px none rgb(6, 27, 49)
Corner radius: 0px
Padding: 0px 15px 0px 15px
Font size: 16px
Layout tokens
Spacing scale
8px1px2px4px6px10px
Border radii
4px5px6px8px16px
Guidelines
Do
- Do use
#533afd for primary actions and CTAs - Do stick to 4 font weights: 300, 400, 500, 700
- Do use
sohne-var as the primary typeface
Don't
- Don't introduce colors outside the palette above
- Don't mix fonts beyond sohne-var and SourceCodePro
- Don't use border-radius values outside: 0px 0px 6px 6px, 4px, 5px, 6px, 6px 6px 0px 0px, 8px, 16px, 100%