Color

Werklist is mostly neutral, with blue kept for actions and selection and a few colors that report status. Pick a color by the job it does, and its token gives you the right value in light and in dark.

Surfaces

Surfaces stack from the page up, and the change of fill is what tells one layer from the next. Content surfaces carry no border and no shadow. Only menus, popovers and dialogs float, and they take the raised shadow.

Put a panel or a card on the page, then a band or a nested box inside the panel. Controls such as a segmented control take the control fill. A scrim darkens the page behind a dialog.

Light

--surface-2#f6f6f8

--surface-control#ebebf0

--surface-strong#f1f1f4

--surface-1#ffffff

--bg#f5f5f7

Dark

--surface-2#1e2233

--surface-control#323443

--surface-strong#262834

--surface-1#191c2c

--bg#000214

Scrim behind a dialog: light rgba(15, 18, 35, 0.44), dark rgba(0, 2, 20, 0.66); --overlay

Text and icons

Set body text and headings in --text. Labels a person scans, such as column headers and field names, take --text-label. Timestamps, hints and other supporting lines take --text-muted, the quietest ink that still reads on the control fill.

Blue text and links take --brand-ink. Underline a link inside running text, because its blue is too close to the body text to be found by color alone.

UseLightDark

Body text--text on --surface-1

Offer sent

19.38 to 1

Offer sent

16.88 to 1

Labels--text-label on --surface-1

Country

9.94 to 1

Country

12.70 to 1

Supporting text--text-muted on --surface-1

Updated today

4.74 to 1

Updated today

8.80 to 1

Supporting text on a control fill--text-muted on --surface-control

Updated today

4.50 to 1

Updated today

6.92 to 1

Blue text and links--brand-ink on --surface-1

View offer

8.19 to 1

View offer

6.20 to 1

Link against body text--brand-ink against --text

Read the terms first

2.36 to 1

Read the terms first

2.72 to 1

Brand blue

Blue marks what a person can act on and what they have selected. Give it to the one primary action in a view and keep the rest neutral.

Fill a primary button, or any shape that carries white text, with --brand-true. It is the same blue in both themes, so white text on it reads the same. Use --brand-blue for marks with no text on them, such as a progress bar or an unread dot. A selected row or navigation item takes the --nav-fill-active wash under ordinary text.

UseLightDark

White text on the button fill--on-brand on --brand-true

Publish

5.44 to 1

Publish

5.44 to 1

Marks without text--brand-blue on --surface-1

5.44 to 1

4.59 to 1

Text on a selected row--text on --nav-fill-active over --surface-1

Candidates

16.81 to 1

Candidates

12.99 to 1

Blue text on a selected row--brand-ink on --nav-fill-active over --surface-1

Candidates

7.10 to 1

Candidates

4.77 to 1

Status

Green says done or approved, amber says something needs attention, and red says it failed or cannot be undone. A status always comes with a word or an icon, so a person who cannot tell red from green reads the same thing.

A status chip is a 15 percent tint of its color with the matching ink on top: --success-ink on a --success tint. Information that is neither good nor bad takes the blue tint with --brand-ink, and a neutral chip takes --surface-control with --text. The word on a chip needs at least 3.5 to 1 on its tint.

Chart series and the statuses of a board have colors of their own, set out on the Charts and Board grid pages.

StatusLight, on a panelLight, on a control fillDark, on a panelDark, on a control fill

Success--success-ink on a 15% --success tint

Approved

5.40 to 1

Approved

4.61 to 1

Approved

7.48 to 1

Approved

5.48 to 1

Warning--warning-ink on a 15% --warning tint

Needs review

5.17 to 1

Needs review

4.42 to 1

Needs review

6.74 to 1

Needs review

4.91 to 1

Error--error-ink on a 15% --error tint

Failed

5.32 to 1

Failed

4.53 to 1

Failed

5.90 to 1

Failed

4.36 to 1

Information--brand-ink on a 15% --brand-blue tint

Scheduled

6.60 to 1

Scheduled

5.63 to 1

Scheduled

5.12 to 1

Scheduled

3.79 to 1

Neutral--text on --surface-control

Draft

16.31 to 1

Draft

16.31 to 1

Draft

12.29 to 1

Draft

12.29 to 1

Count on red--badge-alert-ink on --badge-alert

5.11 to 1

Light and dark

Panels and text have their own dark values. Panels step up from a near black navy page, and blue text turns lighter so it keeps its contrast. The button fill does not change.

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 white in both themes.

A document page stays white and a video call stays dark, whichever theme a person chose.

Light#ffffff

Dark#191c2c

Panel--surface-1

Light#1863dc

Dark#1863dc

Button fill--brand-true

Light#0e4aa8

Dark#5b9dff

Blue text--brand-ink

Light#1863dc

Dark#3b82f6

Marks--brand-blue

Default theme: Light
Always light: Sign in and every page outside the app

Permitted and not permitted

Permitted

Put white text on --brand-true.
It reads 5.44 to 1 in both themes.
Set chip text in the -ink token that matches its tint.
In light, warning ink on its tint reads 4.42 to 1 on a control fill.
Use --text-muted or --text-label for quiet text.
Take every color from a token.

Not permitted

Put white text on --brand-blue.
In dark it reads 3.67 to 1.
Take chip text from the status fill, such as --warning.
In light, warning on its own tint reads 2.70 to 1 on a control fill. The -ink token reads in both themes.
Use gray-400 for text.
In light it reads 2.75 to 1 on white.
Write a hex value in code.
It keeps one value when the theme changes.

NextTypography

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

JSON

{
  "title": "Color",
  "path": "/foundations/color",
  "url": "https://design.werklist.com/foundations/color",
  "text": "https://design.werklist.com/agent/foundations/color",
  "summary": "Which color token to use for surfaces, text, brand blue and status, with its contrast in the light and the dark theme.",
  "version": "2.1.2",
  "kind": "foundation",
  "name": "Color",
  "purpose": "Choose every color by its role through a token that holds a light and a dark value.",
  "use": [
    "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."
  ],
  "avoid": [
    "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."
  ],
  "anatomy": [
    {
      "part": "Page",
      "token": "--bg",
      "measure": "light #f5f5f7, dark #000214"
    },
    {
      "part": "Panel",
      "token": "--surface-1",
      "measure": "light #ffffff, dark #191c2c"
    },
    {
      "part": "Band",
      "token": "--surface-2",
      "measure": "light #f6f6f8, dark #1e2233"
    },
    {
      "part": "Nested box",
      "token": "--surface-strong",
      "measure": "light #f1f1f4, dark #262834"
    },
    {
      "part": "Control fill",
      "token": "--surface-control",
      "measure": "light #ebebf0, dark #323443"
    },
    {
      "part": "Scrim",
      "token": "--overlay",
      "measure": "light rgba(15, 18, 35, 0.44), dark rgba(0, 2, 20, 0.66)"
    },
    {
      "part": "Body ink",
      "token": "--text",
      "measure": "light #0d0d12, dark #ffffff"
    },
    {
      "part": "Label ink",
      "token": "--text-label",
      "measure": "light rgba(13, 13, 20, 0.78), dark rgba(255, 255, 255, 0.86)"
    },
    {
      "part": "Muted ink",
      "token": "--text-muted",
      "measure": "light rgba(13, 13, 20, 0.58), dark rgba(255, 255, 255, 0.7)"
    },
    {
      "part": "Button fill",
      "token": "--brand-true",
      "measure": "#1863dc in both themes"
    },
    {
      "part": "Blue ink",
      "token": "--brand-ink",
      "measure": "light #0e4aa8, dark #5b9dff"
    },
    {
      "part": "Marks",
      "token": "--brand-blue",
      "measure": "light #1863dc, dark #3b82f6"
    },
    {
      "part": "Selected row wash",
      "token": "--nav-fill-active",
      "measure": "light rgba(24, 99, 220, 0.1), dark rgba(91, 157, 255, 0.16)"
    },
    {
      "part": "Success fill and ink",
      "token": "--success, --success-ink",
      "measure": "fill light #18874f, dark #2ee6a0; ink light #136b3f, dark #2ee6a0"
    },
    {
      "part": "Warning fill and ink",
      "token": "--warning, --warning-ink",
      "measure": "fill light #b87503, dark #f0b54a; ink light #8a5602, dark #f0b54a"
    },
    {
      "part": "Error fill and ink",
      "token": "--error, --error-ink",
      "measure": "fill light #c0233f, dark #ff5a6a; ink light #b01e39, dark #ff8391"
    },
    {
      "part": "Count on red",
      "token": "--badge-alert, --badge-alert-ink",
      "measure": "fill #d61f35 in both themes; ink #ffffff in both themes"
    }
  ],
  "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"
  ],
  "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."
  ]
}

Raw file: https://design.werklist.com/agent/foundations/color