Base

Colour

The colours the brand is made of, what each is for, and which pairs to use.

Roles

Mostly white and ink, paper for quiet sections, periwinkle for links only, one charcoal button per view.

Page
White
Quiet
Paper
Text
Ink
Accent
Periwinkle
Button
Charcoal

Palette

The colours the brand is made of, and what each one is for.

White#ffffffThe page ground.
Paper#fdfdfaQuiet sections. A whisper off white.
Ink#2b2b2bText, and the charcoal of the one dark button and the pricing section.
Mist#d3d1d4The footer, the tile behind the symbol and quiet brand surfaces. The one cool neutral: never a control.
Periwinkle#5a61d4Links, arrows and [ + ] toggles. The only accent: never a large fill, never a button.
Periwinkle light#8f96eeThe same accent on charcoal.
Olive#6a6b52The team section only: headline, ruled list, crew labels.
Fog#aebac4The gradient that darkens the hero photo.

Pairings

The only text-on-background combinations to use, with their contrast. 4.5 or more passes WCAG AA for body text.

Ink on White14.2:1 · AA for body text
Periwinkle on White5.1:1 · AA for body text
Ink on Paper13.9:1 · AA for body text
Periwinkle on Paper5.0:1 · AA for body text
Paper on Ink13.9:1 · AA for body text
Periwinkle light on Ink5.2:1 · AA for body text
Ink on Mist9.3:1 · AA for body text
Paper on Olive5.4:1 · AA for body text

Greys

The brand's grey scale, with Paper as its lightest step. These are the other steps and what each does in brand material. The Base's own screens use plain greys, listed in Design system › Theming.

Grey 100#f9f9f5Hover and quiet surfaces: muted, secondary, banners.
Grey 150#f2f2edThe one selected tone: the sidebar item, tabs track and list selections.
Grey 200#eeeee8Hairlines and card edges.
Grey 300#d4d4cdThe website's hairlines, and form field edges.
Grey 600#54544dSecondary text.
Grey 400#a2a299Dark mode: secondary text.
Grey 700#41413bDark mode: form field edges.
Grey 800#1e1e1aDark mode: hairlines.
Grey 825#1e1e1aDark mode: the selected tone.
Grey 850#1b1b17Dark mode: hover and quiet surfaces.
Grey 900#12120fDark mode: paper, the sidebar, cards and popovers.
Grey 950#0b0b08Dark mode: the ground.

The token names, with the surfaces and states of the app and each value in light and dark, are in Design system › Theming.