Design tokens
Color
Text
Token | Value | Example | Contrast |
---|---|---|---|
$color-text-base | #242526 | Aa | 15.4:1 |
$color-text-primary | #0262B9 | Aa | 6.1:1 |
$color-text-primary-alt | #0075C9 | Aa | 4.8:1 White backgrounds only |
$color-text-secondary | #38C6F4 | Aa | 10.6:1 |
$color-text-secondary-dark | #0C9ED9 | Aa | 3:1 20px+ text only |
$color-text-success | #007E44 | Aa | 5.2:1 |
$color-text-warning | #A15C00 | Aa | 5.2:1 |
$color-text-danger | #D62015 | Aa | 5.2:1 |
$color-text-info | #0262B9 | Aa | 6.1:1 |
$color-text-muted-light | #65686C | Aa | 5.6:1 |
$color-text-muted | #53565A | Aa | 7.4:1 |
$color-text-white | #FFFFFF | Aa | 21:1 |
Icon
Token | Value | Example | Contrast |
---|---|---|---|
$color-icon-base | #3F4145 | 10.2:1 | |
$color-icon-primary | #0075C9 | 4.8:1 | |
$color-icon-secondary | #38C6F4 | 10.6:1 | |
$color-icon-secondary-dark | #0C9ED9 | 3:1 | |
$color-icon-success | #009054 | 4.1:1 | |
$color-icon-warning | #B96B00 | 4.1:1 | |
$color-icon-danger | #EE3026 | 4.1:1 | |
$color-icon-info | #0080DC | 4.1:1 | |
$color-icon-muted-light | #8E9399 | 3.1:1 | |
$color-icon-muted | #65686C | 5.6:1 | |
$color-icon-muted-dark | #53565A | 7.4:1 | |
$color-icon-white | #FFFFFF | 21:1 |
Background
Token | Value | Example | Contrast |
---|---|---|---|
$color-background-base | #FFFFFF | 15.4:1 | |
$color-background-base-dark | #F4F5F6 | 14.1:1 | |
$color-background-base-darker | #EDF0F2 | 13.4:1 | |
$color-background-base-darkest | #DADEE2 | 11.4:1 | |
$color-background-primary-light | #E0F3FF | 13.5:1 | |
$color-background-primary | #0075C9 | 4.8:1 | |
$color-background-secondary-light | #EAF7FB | 14:1 | |
$color-background-secondary | #38C6F4 | 7.7:1 | |
$color-background-secondary-dark | #0C9ED9 | 5.1:1 | |
$color-background-success-lighter | #F1FEF8 | 14.8:1 | |
$color-background-success-light | #DBFAEE | 13.8:1 | |
$color-background-success | #007E44 | 5.2:1 | |
$color-background-warning-lighter | #FFF8ED | 14.6:1 | |
$color-background-warning-light | #FAECD9 | 13.2:1 | |
$color-background-warning | #A15C00 | 5.2:1 | |
$color-background-danger-lighter | #FFF5F5 | 14.4:1 | |
$color-background-danger-light | #FFE8E5 | 13.1:1 | |
$color-background-danger | #D62015 | 5.2:1 | |
$color-background-info-lighter | #F5F9FC | 14.4:1 | |
$color-background-info-light | #E0F3FF | 13.5:1 | |
$color-background-info | #0075C9 | 4.8:1 | |
$color-background-muted-lighter | #F8F9F9 | 14.6:1 | |
$color-background-muted-light | #EDF0F2 | 13.4:1 | |
$color-background-muted | #53565A | 7.4:1 | |
$color-background-black | #000000 | 21:1 | |
$color-background-white | #FFFFFF | 15.4:1 |
Border
Token | Value | Example | Contrast |
---|---|---|---|
$color-border-base-light | #EDF0F2 | — | |
$color-border-base | #DADEE2 | — | |
$color-border-base-dark | #D0D4D9 | — | |
$color-border-primary | #0075C9 | — | |
$color-border-secondary | #38C6F4 | — | |
$color-border-secondary-dark | #0C9ED9 | — | |
$color-border-success-light | #95E9C9 | — | |
$color-border-success | #009054 | — | |
$color-border-warning-light | #FFCC89 | — | |
$color-border-warning | #B96B00 | — | |
$color-border-danger-light | #FFC2BD | — | |
$color-border-danger | #EE3026 | — | |
$color-border-info-light | #AEDEFF | — | |
$color-border-info | #0080DC | — | |
$color-border-muted-light | #D0D4D9 | — | |
$color-border-muted | #65686C | — | |
$color-border-black | #000000 | — | |
$color-border-white | #FFFFFF | — |
Color System
Token | Value | Example |
---|---|---|
$color-grey-100 | #242526 | |
$color-grey-90 | #313336 | |
$color-grey-80 | #3F4145 | |
$color-grey-70 | #53565A | |
$color-grey-60 | #65686C | |
$color-grey-50 | #8E9399 | |
$color-grey-40 | #ACB0B5 | |
$color-grey-30 | #D0D4D9 | |
$color-grey-25 | #DADEE2 | |
$color-grey-20 | #EDF0F2 | |
$color-grey-15 | #F4F5F6 | |
$color-grey-10 | #F8F9F9 | |
$color-red-100 | #600D08 | |
$color-red-90 | #80130C | |
$color-red-80 | #A21810 | |
$color-red-70 | #D62015 | |
$color-red-60 | #EE3026 | |
$color-red-50 | #FF645C | |
$color-red-40 | #FF9086 | |
$color-red-30 | #FFC2BD | |
$color-red-20 | #FFE8E5 | |
$color-red-10 | #FFF5F5 | |
$color-pink-100 | #451726 | |
$color-pink-90 | #661430 | |
$color-pink-80 | #8C0E38 | |
$color-pink-70 | #B30C44 | |
$color-pink-60 | #DB1A5B | |
$color-pink-50 | #F74F87 | |
$color-pink-40 | #FA8EB2 | |
$color-pink-30 | #FCC7D9 | |
$color-pink-20 | #FCE8EF | |
$color-pink-10 | #FCF5F7 | |
$color-purple-100 | #371C52 | |
$color-purple-90 | #4D2378 | |
$color-purple-80 | #642B9E | |
$color-purple-70 | #7E40BD | |
$color-purple-60 | #9557D4 | |
$color-purple-50 | #B277ED | |
$color-purple-40 | #CDA3F7 | |
$color-purple-30 | #E2CDF7 | |
$color-purple-20 | #F2EBFA | |
$color-purple-10 | #FAF7FC | |
$color-indigo-100 | #1E1E57 | |
$color-indigo-90 | #29298C | |
$color-indigo-80 | #3434AC | |
$color-indigo-70 | #4646DA | |
$color-indigo-60 | #5959E0 | |
$color-indigo-50 | #8484FA | |
$color-indigo-40 | #A8A8FF | |
$color-indigo-30 | #CFCFFF | |
$color-indigo-20 | #EDEDFF | |
$color-indigo-10 | #F7F7FF | |
$color-navy-100 | #083176 | |
$color-navy-90 | #08379B | |
$color-navy-80 | #0047BB | |
$color-navy-70 | #0A60F0 | |
$color-navy-60 | #2072F8 | |
$color-navy-50 | #6099F1 | |
$color-navy-40 | #88B6F9 | |
$color-navy-30 | #C0D7FA | |
$color-navy-20 | #E6F0FF | |
$color-navy-10 | #F5F8FC | |
$color-blue-100 | #002D54 | |
$color-blue-90 | #004078 | |
$color-blue-80 | #00529A | |
$color-blue-75 | #0262B9 | |
$color-blue-70 | #0075C9 | |
$color-blue-60 | #0080dC | |
$color-blue-50 | #38ABFF | |
$color-blue-40 | #70C3FF | |
$color-blue-30 | #AEDEFF | |
$color-blue-20 | #E0F3FF | |
$color-blue-10 | #F5F9FC | |
$color-cyan-100 | #002E4D | |
$color-cyan-90 | #004368 | |
$color-cyan-80 | #00557E | |
$color-cyan-70 | #0073A5 | |
$color-cyan-60 | #0986B6 | |
$color-cyan-50 | #0C9ED9 | |
$color-cyan-40 | #38C6F4 | |
$color-cyan-30 | #A3E5FA | |
$color-cyan-20 | #DDF5FD | |
$color-cyan-15 | #EAF7FB | |
$color-cyan-10 | #F1FBFE | |
$color-teal-100 | #093134 | |
$color-teal-90 | #07454B | |
$color-teal-80 | #08575E | |
$color-teal-70 | #027786 | |
$color-teal-60 | #038B98 | |
$color-teal-50 | #0DC7D8 | |
$color-teal-40 | #4ED8E4 | |
$color-teal-30 | #9DE9F0 | |
$color-teal-20 | #DCF7FA | |
$color-teal-10 | #F2FCFD | |
$color-green-100 | #03381E | |
$color-green-90 | #044D28 | |
$color-green-80 | #056234 | |
$color-green-70 | #007E44 | |
$color-green-60 | #009054 | |
$color-green-50 | #26D98F | |
$color-green-40 | #76EAB8 | |
$color-green-30 | #95E9C9 | |
$color-green-20 | #DBFAEE | |
$color-green-10 | #F1FEF8 | |
$color-yellow-100 | #4E2E00 | |
$color-yellow-90 | #663B00 | |
$color-yellow-80 | #864D00 | |
$color-yellow-70 | #A15C00 | |
$color-yellow-60 | #B96B00 | |
$color-yellow-50 | #E58500 | |
$color-yellow-40 | #FF9E18 | |
$color-yellow-30 | #FFCC89 | |
$color-yellow-20 | #FAECD9 | |
$color-yellow-10 | #FFF8ED | |
$color-orange-100 | #5B2600 | |
$color-orange-90 | #723204 | |
$color-orange-80 | #974308 | |
$color-orange-70 | #B35009 | |
$color-orange-60 | #C96010 | |
$color-orange-50 | #E77528 | |
$color-orange-40 | #F79950 | |
$color-orange-30 | #FACAA8 | |
$color-orange-20 | #FDE7D8 | |
$color-orange-10 | #FEF6F0 | |
$color-black | #000000 | |
$color-white | #FFFFFF |
Font
Font family
Token | Value | Example |
---|---|---|
$font-family-base | 'Inter', Arial, Helvetica, Verdana, sans-serif | Aa |
$font-family-mono | Menlo, Consolas, 'Liberation Mono', Courier, monospace | Aa |
Font weight
Token | Value | Example |
---|---|---|
$font-weight-light | 300 | Aa |
$font-weight-normal | 400 | Aa |
$font-weight-semi-bold | 600 | Aa |
$font-weight-bold | 700 | Aa |
$font-weight-extra-bold | 800 | Aa |
Font size - text
Token | Value | Example |
---|---|---|
$font-size-base | 0.875rem 14px | Aa |
$font-size-2xs | 0.6875rem 11px | Aa |
$font-size-xs | 0.75rem 12px | Aa |
$font-size-sm | 0.8125rem 13px | Aa |
$font-size-md | 0.875rem 14px | Aa |
$font-size-lg | 1rem 16px | Aa |
$font-size-xl | 1.125rem 18px | Aa |
Font size - headings
Token | Value | Example |
---|---|---|
$font-size-h6 | 0.875rem 14px | Aa |
$font-size-h5 | 1rem 16px | Aa |
$font-size-h4 | 1.125rem 18px | Aa |
$font-size-h3 | 1.5rem 24px | Aa |
$font-size-h2 | 2rem 32px | Aa |
$font-size-h1 | 3rem 48px | Aa |
Font size - system
Token | Value | Example |
---|---|---|
$font-size-1 | 0.6875rem 11px | Aa |
$font-size-2 | 0.75rem 12px | Aa |
$font-size-3 | 0.8125rem 13px | Aa |
$font-size-4 | 0.875rem 14px | Aa |
$font-size-5 | 1rem 16px | Aa |
$font-size-6 | 1.125rem 18px | Aa |
$font-size-7 | 1.25rem 20px | Aa |
$font-size-8 | 1.375rem 22px | Aa |
$font-size-9 | 1.5rem 24px | Aa |
$font-size-10 | 1.75rem 28px | Aa |
$font-size-11 | 2rem 32px | Aa |
$font-size-12 | 2.25rem 36px | Aa |
$font-size-13 | 2.5rem 40px | Aa |
$font-size-14 | 3rem 48px | Aa |
$font-size-15 | 3.5rem 56px | Aa |
$font-size-16 | 4rem 64px | Aa |
$font-size-17 | 4.5rem 72px | Aa |
$font-size-18 | 5rem 80px | Aa |
$font-size-19 | 6rem 96px | Aa |
$font-size-20 | 7.5rem 120px | Aa |
Border radius
Token | Value | Example |
---|---|---|
$border-radius-base | 4px 0.25rem | |
$border-radius-sharp | 0 | |
$border-radius-circle | 50% |
Opacity
Token | Value | Example |
---|---|---|
$opacity-0 | 0 | |
$opacity-30 | 0.3 | |
$opacity-50 | 0.5 | |
$opacity-70 | 0.7 | |
$opacity-100 | 1 |
Z-index
Token | Value |
---|---|
$z-index-0 | 0 |
$z-index-10 | 10 |
$z-index-20 | 20 |
$z-index-30 | 30 |
$z-index-40 | 40 |
$z-index-50 | 50 |
$z-index-60 | 60 |
$z-index-70 | 70 |
$z-index-80 | 80 |
$z-index-90 | 90 |