Foundations

Color

Brand

Buttons, links and accents, each with a Dark and a Light version.

--color-primary#3a5ae9

--color-secondary#e9c938

--color-tertiary#14b8a5

--color-accent#ff6b6b

--color-primary-dark#1635c1

--color-secondary-dark#88720f

--color-tertiary-dark#0c7367

--color-accent-dark#eb0000

--color-primary-light#7f94f1

--color-secondary-light#f1dc7d

--color-tertiary-light#30e9d3

--color-accent-light#ffb8b8

Text

Headings and body copy, for light and dark surfaces.

--color-heading-dark#121317

--color-body-dark#61636b

--color-heading-light#f9fafa

--color-body-light#afb0b6

Background

Section backgrounds.

--color-background-light#f1f1f4

--color-background-lighter#f6f7f8

--color-background-dark#121317

--color-background-darker#0b0c0e

Surface

Cards and containers on a background.

--color-surface-light#e8e9ed

--color-surface-lighter#fcfcfd

--color-surface-dark#24262d

--color-surface-darker#1b1c22

Border

Strokes and dividers.

--color-border-light#d2d3db

--color-border-lighter#dddee4

--color-border-dark#2d2f39

--color-border-darker#22242b

Status

Success, warning, error and info, with soft Light fills.

--color-success#177439

--color-warning#aa491b

--color-error#af1a21

--color-info#2147cd

--color-success-light#d7fbe4

--color-warning-light#fdf1c3

--color-error-light#fedede

--color-info-light#d6e7fc

Neutral

Fixed neutrals that ignore the theme.

--color-neutral-white#ffffff

--color-neutral-lightgray#f0f0f0

--color-neutral-black#000000

--color-neutral-darkgray#1d1d1d

Effects

Transparent fills for overlays and glass.

--color-transparentrgba(0, 0, 0, 0)

--color-overlayrgb(0 0 0 / 40%)

--color-backdroprgb(0 0 0 / 65%)

--color-glassrgb(255 255 255 / 8%)