DS by Berit

Foundations

Documentation / foundations / tokens

Colors

Colours come in two layers. Semantic values give each colour a job, such as body text, page background or error, and they are the ones to use. Raw values are the palette they point to, listed below for reference. Four gradients cover the primary button.

Which colour do I use?

Orange
Two oranges. Orange 500 is for fills, icons, borders and the active marker, and for accent text on dark surfaces. Orange 700 is for accent text on light surfaces and for the hover state of the primary button, with white text. It is never used on a dark background.
Charcoal
Three charcoals. Charcoal 950 is ink: headings, primary text, the primary button and the dark-mode canvas. Charcoal 800 is a surface raised above the dark canvas. Charcoal 700 is for body copy, hints and metadata.
Status
Yellow, blue, green and red are only for info, success, warning and error, and for the focus ring. Do not use them as decoration.
Components
Components use semantic colours only. If the colour you need has no semantic name, add one instead of using a raw value.

Use these

Semantic (roles)

Colours named by what they are for. Components use only these, so a colour can change in one place without touching any component.

Content

5 values

Text and icons.

color.content.primarycolor.charcoal.950#1f2321Headings, primary labels, and important values.
color.content.secondarycolor.charcoal.700#4d5550Body copy and supporting labels.
color.content.mutedcolor.charcoal.700#4d5550Hints, metadata and the least important text. It has the same colour as secondary, so tell them apart with size and weight.
color.content.inversecolor.paper.0#ffffffContent that sits on an inverse or accent surface.
color.content.muted-darkcolor.sage.300#c5cec7The muted role, rebalanced for a dark canvas.

Surfaces

6 values

Page backgrounds and grouping surfaces, in light and dark versions.

color.surface.canvascolor.paper.0#ffffffThe documentation page background.
color.surface.subtlecolor.sage.50#f3f6f0Quiet grouping surface.
color.surface.raisedcolor.sage.100#e8eee5Surface lifted above the canvas, such as a selected row.
color.surface.canvas-darkcolor.charcoal.950#1f2321The page background when an interface is shown in dark mode.
color.surface.raised-darkcolor.charcoal.800#303733The raised role, rebalanced for a dark canvas.
color.surface.inversecolor.charcoal.950#1f2321Navigation and emphasis surface.

Actions

4 values

Buttons, links and active markers.

color.action.primarycolor.charcoal.950#1f2321Primary button background and other main actions.
color.action.accentcolor.orange.500#f28b30Accent fills, icons, borders and the active marker. Not for text on a light surface.
color.action.accent-darkcolor.orange.700#b85b16Accent text and labels on a light surface, and the hover background of the primary button with white text. Never use it on a dark background.
color.action.accent-on-darkcolor.orange.500#f28b30Accent for text, fills and borders on a dark canvas.

Borders

3 values

Lines around components and controls.

color.border.defaultcolor.border.200#dce3dcDefault component boundary.
color.border.subtlecolor.sage.200#c7d1c8Boundary on a light surface that needs more definition than the default, such as a preview panel.
color.border.strongcolor.border.300#7d8b80Boundary of an interactive control, such as an input or a secondary button.

Focus

1 values

The keyboard focus ring.

color.focus.ringcolor.yellow.500#f2b705Visible keyboard focus indicator. Yellow alone is faint on a light surface, so it is paired with a 2px charcoal line (color.surface.inverse) beside it.

Status

16 values

Info, success, warning and error. Each has a surface (subtle), a colour for borders and icons (default), a colour for text on light surfaces (strong) and one for dark surfaces (on-dark). Always pair colour with an icon and text.

color.status.info.subtlecolor.blue.100#e6f0fbThe info surface.
color.status.info.defaultcolor.blue.500#3b82c4The info colour for borders, icons and fills.
color.status.info.strongcolor.blue.700#1f5a99The info colour as text or an icon on a light surface.
color.status.info.on-darkcolor.blue.300#8fbbe8The info colour on a dark surface.
color.status.success.subtlecolor.green.100#e4f3e8The success surface.
color.status.success.defaultcolor.green.500#3f9d5aThe success colour for borders, icons and fills.
color.status.success.strongcolor.green.700#1f6b3aThe success colour as text or an icon on a light surface.
color.status.success.on-darkcolor.green.300#86cc9bThe success colour on a dark surface.
color.status.warning.subtlecolor.yellow.100#fdf4ccThe warning surface.
color.status.warning.defaultcolor.yellow.500#f2b705The warning colour for borders, icons and fills.
color.status.warning.strongcolor.yellow.700#85590aThe warning colour as text or an icon on a light surface.
color.status.warning.on-darkcolor.yellow.300#f8dd74The warning colour on a dark surface.
color.status.error.subtlecolor.red.100#fbe7e4The error surface.
color.status.error.defaultcolor.red.500#d6453aThe error colour for borders, icons and fills.
color.status.error.strongcolor.red.700#a12a21The error colour as text or an icon on a light surface.
color.status.error.on-darkcolor.red.300#ee9a92The error colour on a dark surface.

Action gradients

4 values

The gradient each state of the primary button uses.

gradient.action.primarygradient.inkPrimary action background on a light surface.
gradient.action.primary-hovergradient.accentPrimary action background on hover on a light surface.
gradient.action.primary-darkgradient.whitePrimary action background on a dark surface.
gradient.action.primary-hover-darkgradient.sunPrimary action background on hover on a dark surface.

For reference

Primitives (raw values)

The actual colour values, listed for reference. Components never use these directly. They exist so that each colour is defined once, and the roles above point to them.

Main colors

12 values

Raw values are the actual colours. Components do not use them directly; they use the semantic roles at the top of the page. These are the orange accent, the charcoal ink and the neutral greys, greens and whites.

  • color.orange.500

    #f28b30

    Accent. Use for fills, active markers, icons and borders, and for accent text on dark surfaces. Not for text on a light surface.

  • color.orange.700

    #b85b16

    Accent at text contrast (4.6:1 on white). Use for accent text and labels on light surfaces, and as the hover background of the primary button with white text. Never use it on a dark background.

  • color.charcoal.950

    #1f2321

    Ink. Use for headings, primary text, the primary button, dark navigation and the dark-mode canvas.

  • color.charcoal.800

    #303733

    Raised dark. Use for surfaces that sit above the dark canvas, and as the top of the primary button gradient.

  • color.charcoal.700

    #4d5550

    Quiet text. Use for body copy, labels, hints and metadata on light surfaces.

  • color.sage.50

    #f3f6f0

    Soft surface tint.

  • color.sage.100

    #e8eee5

    Subtle highlighted surface.

  • color.sage.200

    #c7d1c8

    Boundary that needs more definition than the default border.

  • color.sage.300

    #c5cec7

    Metadata that stays readable on a dark surface.

  • color.paper.0

    #ffffff

    Default canvas.

  • color.border.200

    #dce3dc

    Default border.

  • color.border.300

    #7d8b80

    Strong borders and interactive control boundaries.

Status colors

16 values

Yellow, blue, green and red in four steps each: a pale surface (100), a soft tone for dark surfaces (300), a mid tone for borders and icons (500) and a dark tone for text (700). Yellow 500 is also the focus ring.

  • color.yellow.100

    #fdf4cc

    Pale yellow, the warning surface.

  • color.yellow.300

    #f8dd74

    Soft yellow, warning content on a dark surface.

  • color.yellow.500

    #f2b705

    Yellow companion to the orange accent, and the focus ring.

  • color.yellow.700

    #85590a

    Yellow dark enough for warning text on a light surface.

  • color.blue.100

    #e6f0fb

    Pale blue, the info surface.

  • color.blue.300

    #8fbbe8

    Soft blue, info content on a dark surface.

  • color.blue.500

    #3b82c4

    Info colour for borders and icons.

  • color.blue.700

    #1f5a99

    Info text on a light surface.

  • color.green.100

    #e4f3e8

    Pale green, the success surface.

  • color.green.300

    #86cc9b

    Soft green, success content on a dark surface.

  • color.green.500

    #3f9d5a

    Success colour for borders and icons.

  • color.green.700

    #1f6b3a

    Success text on a light surface.

  • color.red.100

    #fbe7e4

    Pale red, the error surface.

  • color.red.300

    #ee9a92

    Soft red, error content on a dark surface.

  • color.red.500

    #d6453a

    Error colour for borders and icons.

  • color.red.700

    #a12a21

    Error text and borders on a light surface.

Gradients

4 values

Four gradients, all running from top to bottom: ink and white for the primary button, and two orange ones for its hover state on light and dark surfaces.

  • gradient.ink

    Top to bottom gradient

    Charcoal 800 to 950. Primary action on a light surface.

  • gradient.accent

    Top to bottom gradient

    Flat orange 700. Primary action on hover on a light surface, with white text. It is a gradient with two equal stops so it works wherever a gradient is used.

  • gradient.sun

    Top to bottom gradient

    Orange 500 to yellow 500. Primary action on hover on a dark surface.

  • gradient.white

    Top to bottom gradient

    White to sage 100. Primary action on a dark surface.