Foundations

Color

The system is almost monochrome on purpose. Neutrals carry every surface, border and word; one configurable brand ramp carries every action. Colour is scarce here so that when it appears, it means something.

PrinciplesPermalink to this section

Four decisions that everything else follows from.

The canvas stays neutral
The background is white in light mode and near-black in dark mode. Tinted sections and gradients still compete with the content sitting on them.
One accent, used sparingly
The active brand colour marks the primary action, active navigation and focus ring. If a screen has five accented things on it, none of them is the important one.
Text avoids the extremes
Near-black in light mode and near-white in dark mode keep contrast well past AA without the glare of the two extremes.
Colour is never the only signal
Every status colour is paired with a word, an icon or a shape. Roughly one in twelve men has a colour-vision difference; a red border alone tells them nothing.

The rampsPermalink to this section

Three families. The neutral ramp does most of the work; the other two are deliberately small.

Neutral — 12 steps

neutral-0

#ffffff

neutral-50

#fbfaf8

neutral-100

#f6f3ef

neutral-150

#efeae4

neutral-200

#e3dcd4

neutral-300

#ccc3b9

neutral-400

#999188

neutral-500

#6b655e

neutral-600

#514c46

neutral-700

#3a3632

neutral-800

#292624

neutral-850

#211f1d

neutral-900

#1a1919

neutral-950

#11100f

Brand — 10 steps

brand-50

#fff8f3

brand-100

#feeee2

brand-200

#fbd6be

brand-300

#f4ad7d

brand-400

#ee7c39

brand-500

#e96516

brand-600

#c94e0c

brand-700

#9f3b08

brand-800

#7d300b

brand-900

#61250d

brand-950

#351407

Status — muted on purpose

green-50

#eef6f2

green-100

#dcece5

green-400

#6fbfa1

green-600

#357a63

green-700

#2b6350

green-950

#10241d

amber-50

#fbf3ee

amber-100

#f5e5da

amber-400

#d9a07a

amber-600

#a15c38

amber-700

#85492b

amber-950

#2a1a11

red-50

#fbf0f0

red-100

#f5dede

red-300

#e7a3a3

red-400

#dd8080

red-600

#b34747

red-700

#973939

red-950

#2b1414

Gradient tokensPermalink to this section

Seven theme-aware light treatments. A solid neutral field remains dominant while small, low-opacity blooms provide direction and depth. Every color stop follows the active brand and neutral ramps.

Brand

--brand-gradient

Solid neutral surface with one controlled brand bloom.

Bulb

--gradient-bulb

Centered source with a soft vertical falloff.

Gobo

--gradient-gobo

Shaped beams with restrained overlap.

Aurora

--gradient-aurora

Offset blooms with an atmospheric diagonal field.

Horizon

--gradient-horizon

Low light for section transitions.

Mesh

--gradient-mesh

Three-point depth using one hue family.

Prism

--gradient-prism

Refracted bands from the active brand ramp.

Paint, not contrast

Bulb, gobo, aurora, horizon, mesh, and prism are decorative paints. Keep the colored field localized and let the solid surface carry most of the composition. They do not guarantee text contrast. Use a surface or scrim beneath readable content. Only --brand-gradient has dedicated foreground, muted foreground, surface, and border companions.

feature.css

.feature-surface {
  background: var(--gradient-gobo);
}

.closing-section {
  background: var(--gradient-horizon);
}

ContrastPermalink to this section

The default Borneo light-mode pairings, measured against their real surfaces. Re-test these WCAG 2.2 values whenever a preset changes the palette.

Combination	Ratio	Passes	Use for
foreground on background	17.5:1	AAA	Body text and headings
muted-foreground on background	5.8:1	AA	Supporting copy at any size
faint-foreground on background	3.1:1	Non-text only	Placeholders and disabled labels
brand-primary on background	4.6:1	AA	Links and active navigation
brand-primary-foreground on brand-primary	4.6:1	AA	Primary button labels
danger on background	5.4:1	AA	Error messages
brand-primary-on-soft on brand-primary-soft	8.1:1	AAA	Active sidebar items
border-default on background	1.4:1	Decorative	Borders that are not the only boundary

Faint text has one job

--faint-foreground does not meet AA for body text. It exists for placeholders and disabled labels, where the information is also carried elsewhere. Never use it for content someone has to read.

Using colourPermalink to this section

The most common review comments about colour, as a pair of examples.

Build failedDeployed

Do — pair status colour with a word

The label carries the meaning; the colour makes it faster to find. Both survive greyscale.

Don't — use colour alone

Two coloured dots are indistinguishable to some readers, and meaningless to a screen reader.

Do — keep one primary action accented

Scarcity is what makes the accent legible as “this is the thing to do”.

Don't — spend the accent on decoration

Three accented buttons in a row means the eye has to read all three to find the important one.

Color

PrinciplesPermalink to this section

The rampsPermalink to this section

Gradient tokensPermalink to this section

ContrastPermalink to this section

Using colourPermalink to this section

TokensPermalink to this section

Semantic colourPermalink to this section

Primitive rampsPermalink to this section