No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Color Tokens
Colors are designed to communicate actions, state and direction within the interface. We provide light and dark color modes. However, the shape of the colors object is same for each mode. This allows us to build components with a consistent API.
Light
Name
Swatches
theme.colors.brand.primary
Brand — Primary
#012E86
theme.colors.brand.secondary
Brand — Secondary
#0064D9
theme.colors.brand.accent
Brand — Accent
#DB7C00
theme.colors.brand.muted
Brand — Muted
#C6DAF7
theme.colors.ui.primary
UI — Primary
#262626
theme.colors.ui.secondary
UI — Secondary
#757575
theme.colors.ui.tertiary
UI — Tertiary
#F1F1F1
theme.colors.ui.quaternary
UI — Quaternary
#FFFFFF
theme.colors.ui.disabled
UI — Disabled
#DEDEDE
theme.colors.ui.error
UI — Error
#D0421B
theme.colors.ui.success
UI — Success
#138000
theme.colors.bg.primary
Background — 1
#FFFFFF
theme.colors.bg.secondary
Background — 2
#F1F1F1
theme.colors.text.primary
Text — Primary
#262626
theme.colors.text.secondary
Text — Secondary
#757575
theme.colors.text.disabled
Text — Disabled
#9C9C9C
theme.colors.text.inverse
Text — Inverse
#FFFFFF
theme.colors.text.error
Text — Error
#D0421B
theme.colors.text.success
Text — Success
#138000
Dark
Name
Swatches
theme.colors.brand.primary
Brand — Primary
#298DFF
theme.colors.brand.secondary
Brand — Secondary
#7CAEE8
theme.colors.brand.accent
Brand — Accent
#FDB447
theme.colors.brand.muted
Brand — Muted
#B7CBEA
theme.colors.ui.primary
UI — Primary
#FFFFFF
theme.colors.ui.secondary
UI — Secondary
#A1A1A1
theme.colors.ui.tertiary
UI — Tertiary
#3C3C3C
theme.colors.ui.quaternary
UI — Quaternary
#262626
theme.colors.ui.disabled
UI — Disabled
#242424
theme.colors.ui.error
UI — Error
#FF4D4D
theme.colors.ui.success
UI — Success
#1CBD00
theme.colors.bg.primary
Background — 1
#111111
theme.colors.bg.secondary
Background — 2
#262626
theme.colors.text.primary
Text — Primary
#FFFFFF
theme.colors.text.secondary
Text — Secondary
#A1A1A1
theme.colors.text.disabled
Text — Disabled
#525252
theme.colors.text.inverse
Text — Inverse
#262626
theme.colors.text.error
Text — Error
#FF4D4D
theme.colors.text.success
Text — Success
#1CBD00