Colors

Primitive color scales plus the semantic tokens (backgrounds, text, icons) built on top of them.

Primary Scale

--color-primary-lighter#c6dff3
--color-primary-light#83b1d6
--color-primary#4a81ad
--color-primary-dark#2a5e87
--color-primary-darker#143754

Secondary

--color-secondary#bc4f06

Brand Colors

--color-brand-1#548054
--color-brand-2#484167
--color-brand-3#072237
--color-brand-4#f8f7f2
--color-brand-5#0563c1
--color-brand-6#3f834b

UI Colors

--color-accent#10b981
--color-warning#f59e08
--color-error#ef4444

Greys + White + Black

--grey-0#f8f7f2
--grey-1#e0e0e0
--grey-2#888888
--grey-3#777777
--grey-4#666666
--grey-5#555555
--grey-6#444444
--grey-7#333333
--grey-8#222222
--grey-9#111111
--white#ffffff
--black#000000

Semantic — Backgrounds & Borders

--color-background-pagewhite
--color-background-page-contentgrey-0 / bone
--color-background-is-style-eyebrowgrey-0 / bone
--color-border-is-style-eyebrowgrey-1

Semantic — Text Colors

--color-text-body-primary Body primary — Aa Bb Cc 123
--color-text-body-secondary Body secondary — Aa Bb Cc 123
--color-text-body-invert Body invert — Aa Bb Cc 123
--color-text-active-invert Active invert — Aa Bb Cc 123
--color-text-heading-primary Heading primary — Aa Bb Cc 123
--color-text-heading Heading — Aa Bb Cc 123
--color-text-subtle Subtle — Aa Bb Cc 123
--color-text-link Link — Aa Bb Cc 123
--color-text-link-inline Link inline — Aa Bb Cc 123
--color-text-summary Summary — Aa Bb Cc 123
--color-text-blockquote Blockquote — Aa Bb Cc 123

Semantic — Icon Colors

--icon-primaryorange
--icon-secondarydark blue
--icon-disabledgrey-3