# Color

Choose every color by its role through a token that holds a light and a dark value.

* Kind: foundation
* Page: https://design.werklist.com/foundations/color
* Version: 2.1.2

## When to use it

* Surfaces: --bg for the page behind panels, --surface-1 for a panel, card or document page, --surface-2 for a band on a panel, --surface-strong for a box nested in a panel, --surface-control for a control fill, --overlay for the scrim behind a dialog.
* Ink: --text for body and headings, --text-label for scanned labels, --text-muted for supporting lines, --brand-ink for blue text and links.
* Brand: --brand-true for any fill that carries white text (with --on-brand), --brand-blue for marks without text, --nav-fill-active for a selected row or navigation item.
* Status chip: a 15 percent tint of --success, --warning, --error or --brand-blue with --success-ink, --warning-ink, --error-ink or --brand-ink on it.
* Count on red: --badge-alert with --badge-alert-ink. Neutral chip: --surface-control with --text.

## When not to use it

* White text on --brand-blue: 3.67 to 1 in dark.
* A status fill used as ink on its own tint: 2.70 to 1 for warning on a control fill in light. The -ink token reads in both themes.
* gray-400 as text: 2.75 to 1 on white in light.
* Color as the only carrier of a meaning.
* A hex value written in code: it keeps one value when the theme changes.

## Rules

* Text meets 4.5 to 1 against what is behind it in both themes, headings included.
* The one exception is the word on a status chip: 3.5 to 1 on its tint, so the ink can keep the hue of its chip.
* Icons, marks and the focus ring meet 3 to 1.
* A content surface has no border and no shadow. Layers are told apart by fill.
* Underline a link inside running text: --brand-ink against --text is 2.36 to 1 in light and 2.72 to 1 in dark.
* Status is never shown by color alone: a word or an icon carries it too.
* Panels and text have their own dark values. Panels step up from a near black navy page, blue text turns lighter, and the button fill stays the same.
* WerkOS opens in light, and a person switches to dark on the desktop rail or in My profile.
* Sign in screens and everything a prospect sees, such as offers, decks and report pages, stay light in both themes.
* A document page stays white and a video call stays dark in both themes.
* Chart series and the statuses of a board have colors of their own, set out on the Charts and Board grid pages.

## Anatomy

* Page: light #f5f5f7, dark #000214 (--bg)
* Panel: light #ffffff, dark #191c2c (--surface-1)
* Band: light #f6f6f8, dark #1e2233 (--surface-2)
* Nested box: light #f1f1f4, dark #262834 (--surface-strong)
* Control fill: light #ebebf0, dark #323443 (--surface-control)
* Scrim: light rgba(15, 18, 35, 0.44), dark rgba(0, 2, 20, 0.66) (--overlay)
* Body ink: light #0d0d12, dark #ffffff (--text)
* Label ink: light rgba(13, 13, 20, 0.78), dark rgba(255, 255, 255, 0.86) (--text-label)
* Muted ink: light rgba(13, 13, 20, 0.58), dark rgba(255, 255, 255, 0.7) (--text-muted)
* Button fill: #1863dc in both themes (--brand-true)
* Blue ink: light #0e4aa8, dark #5b9dff (--brand-ink)
* Marks: light #1863dc, dark #3b82f6 (--brand-blue)
* Selected row wash: light rgba(24, 99, 220, 0.1), dark rgba(91, 157, 255, 0.16) (--nav-fill-active)
* Success fill and ink: fill light #18874f, dark #2ee6a0; ink light #136b3f, dark #2ee6a0 (--success, --success-ink)
* Warning fill and ink: fill light #b87503, dark #f0b54a; ink light #8a5602, dark #f0b54a (--warning, --warning-ink)
* Error fill and ink: fill light #c0233f, dark #ff5a6a; ink light #b01e39, dark #ff8391 (--error, --error-ink)
* Count on red: fill #d61f35 in both themes; ink #ffffff in both themes (--badge-alert, --badge-alert-ink)

## Tokens

* --bg
* --surface-1
* --surface-2
* --surface-strong
* --surface-control
* --overlay
* --text
* --text-label
* --text-muted
* --brand-true
* --brand-blue
* --brand-ink
* --on-brand
* --nav-fill-active
* --success
* --success-ink
* --warning
* --warning-ink
* --error
* --error-ink
* --badge-alert
* --badge-alert-ink