Kitchen sink

Every colour is a CSS custom property. Call it by the token name, for example --cd-ember. In the block editor the same colours appear as named presets.

The six

Six colours, six jobs. Rule 1: never use one for another’s job.

• --cd-navy#020F3FAuthority. Headers, heroes, the serious voice.
• --cd-blue#308EC3The logo blue. Feature headlines and links only, never body copy.
• --cd-ember#FF6B4AGiving. One ember element per screen, rule 2.
• --cd-green#0C4F3FWellbeing.
• --cd-mint#A0D8C4Evidence. The statistics band.
• --cd-lilac#C3B3EALearning.

Text on the six

Pair a ground with its partner and contrast is handled for you.

• --cd-on-navy#F4F5F6
• --cd-on-blue#04173A
• --cd-on-ember#25060A
• --cd-on-green#F0EDE6
• --cd-on-mint#062A20
• --cd-on-lilac#020F3F

The Extra 6

A second, subordinate palette. Its only job is to tell the six program themes apart, because the core six already have six jobs and rule 1 will not lend one out. Five sit at a single perceptual lightness and chroma so no card shouts louder than its neighbour; gold is the exception, because yellow has no dark form.

• --cd-teal#005765Education.
• --cd-moss#2C592FWellbeing.
• --cd-plum#673B63Art.
• --cd-maroon#74383BCultural.
• --cd-brown#6F4017Community.
• --cd-gold#D9B24FChildren’s. Takes navy ink, as blue, mint and lilac do.

Text on the Extra 6

Near-white on five, navy on gold. Every pair clears 7:1.

• --cd-on-teal#F4F5F6
• --cd-on-moss#F4F5F6
• --cd-on-plum#F4F5F6
• --cd-on-maroon#F4F5F6
• --cd-on-brown#F4F5F6
• --cd-on-gold#020F3F

Extra 6 soft tints

For the pill sitting on each theme card. Navy ink on all six.

• --cd-teal-soft#BFE8F2
• --cd-moss-soft#CEE8CE
• --cd-plum-soft#F2D5EE
• --cd-maroon-soft#FCD5D5
• --cd-brown-soft#F7D9C3
• --cd-gold-soft#ECDFBE

Ink on light

Four weights of text colour for light grounds.

• --cd-ink#020F3FHeadings.
• --cd-ink-body#2A3242Body copy.
• --cd-ink-muted#4A5364Secondary copy.
• --cd-ink-meta#5C6578Metadata, captions, credits.

Text on dark

Body and metadata on the two dark grounds.

• --cd-navy-body#B9C3D9
• --cd-navy-meta#8E9AB4
• --cd-green-body#B6CFC6
• --cd-green-meta#99C0B3

Ghost tints

Quiet grounds. Rule 3: never two soft tints touching.

• --cd-navy-ghost#F2F3F7
• --cd-blue-ghost#EDF3FA
• --cd-green-ghost#F0F4F2
• --cd-mint-ghost#F1F7F5
• --cd-lilac-ghost#F5F3FA
• --cd-grey-ghost#F4F5F6
• --cd-white#FFFFFF
• --cd-chalk#F0EDE6

Soft tints

Stronger than a ghost. Pills, panels, accents.

• --cd-navy-soft#D6DAE6
• --cd-blue-soft#CBE1F1
• --cd-green-soft#CFE0D9
• --cd-mint-soft#D5EBE2
• --cd-lilac-soft#E1D9F2
• --cd-grey-soft#E1E4E8

The band background. Set it on cd/section with the Ground select, or in markup as {"ground":"chalk"}. Rule 7: never repeat the ground of the section directly above.

• ground="navy"Authority. Never carries a shadow, rule 5.
• ground="green"Wellbeing. Never carries a shadow, rule 5.
• ground="blue"Feature. Never carries a shadow, rule 5.
• ground="mint"Evidence. Never carries a shadow, rule 5.
• ground="lilac"Learning. Never carries a shadow, rule 5.
• ground="chalk"Programs. May carry a shadow.
• ground="white"Default. May carry a shadow.
• ground="grey-ghost"Quiet. May carry a shadow.
• ground="navy-ghost"Quiet. May carry a shadow.
• ground="blue-ghost"Quiet. May carry a shadow.
• ground="lilac-ghost"Pull quotes. May carry a shadow.
• ground="mint-soft"Giving band. May carry a shadow.

One token per ground family, used for every divider on the site: listing rows, numbered list items, the facts strip, the footer legal line. A rule is a divider, not a border, so it should be the quietest thing that still reads as a line.

On the eight light grounds

--cd-rule-light. Navy at 18% rather than a fixed grey. It composites against whatever is behind it, so it holds 1.47:1 to 1.48:1 on every ground below and picks up each ground’s own hue. The opaque grey it replaced managed 1.35:1 on white but fell to 1.15:1 on chalk, going faintest exactly where the ground was strongest.

• white#FFFFFF
• chalk#F0EDE6
• grey-ghost#F4F5F6
• navy-ghost#F2F3F7
• blue-ghost#EDF3FA
• green-ghost#F0F4F2
• mint-ghost#F1F7F5
• lilac-ghost#F5F3FA

On the dark grounds

--cd-rule-dark. The same idea inverted: white at 14%.

• navyrgba(255,255,255,0.14)

Block cd/pill, attributes text and tone. Cards emit their own pill automatically from the category, so you rarely place one by hand.

Filled tones

For a pill sitting on a coloured band.

Soft tints

For a pill sitting on a light ground. All six take navy ink and clear AAA, 13.2:1 to 14.7:1, so there is no per-tone text colour to remember.

One cut corner per object, rule 4. Always a single length so the arc is a quarter circle, never a percentage. Never more than 40% of the object’s shorter side. Components set --cd-cut; the direction comes from .cd-cut-tr, .cd-cut-br or .cd-cut-panel.

In the block editor the same three appear as style variations: Cut corner: top right, bottom right, small object and panel.

Block cd/statement. The organisation speaking, and not a quotation: nothing here is attributed to anyone, and it renders a <p> rather than a <blockquote> so the markup does not claim a source either. For words a real person actually said use cd/testimony below, which requires a name and a role and renders nothing without them.

Panel

variant="panel". Green box, display caps, fills the band. For a sentence that has to carry.

Serif

variant="serif". Instrument Serif italic at the body measure, no box. For a sentence that should read differently from the paragraphs around it without shouting.

A quieter statement, marked out by the face rather than by a box around it.

Blocks cd/numbered-list and cd/numbered-item. Numbering is a CSS counter, so it cannot drift from the markup.

Pieces that are CSS classes rather than blocks. They appear inside the blocks above, and are listed here so you have a name for each.