01Foundations

Colour.

The core holds no colour. Each theme sets every role: the grounds, the ink, the text on each ground, the hairlines and one accent. Components only ever ask for a role.

02By theme

One contract, a look per initiative.

The names are the same in every theme; the values are not. The build checks each theme has every name and that every text role clears its contrast on its ground.

Ground and text, dark

--ink#000614

--panel#040B1C

--linergba(226,238,255,.08)

--line2rgba(226,238,255,.16)

--paper#EEF3FA

--muted#98A6BC

--muted2#8494AC

Palette

--purple#B833FF

--purple-deep#7C05F2

--blue#1AD3F0

--green#A9F20C

--pink#F005AD

--gold#FFBB00

--indigo#5271FF

--amber#FCC01A

--orange#F78A20

--icecyan#60F1F4

--mint#B2F8AC

--quiet#A8B6CC

The accent

--housevar(--green)

--house-2var(--orange)

Grounds

--ground-paper#F1F5FA

--ground-mist#DEE3EB

--ground-grey#CAD2DC

--ground-grey-deep#ACB5C1

--ground-ink#000614

--ground-panel#040B1C

--ground-forest#1B330B

Text on the light grounds

--ink-body#2C394A

--ink-label#364355

--lead-start#6D7C8F

Hairlines

--rule-lightcolor-mix(in srgb, var(--ink) 16%, transparent)

--rule-darkrgba(226,238,255,.12)

Colour.

One contract, a look per initiative.

Ground and text, dark

Palette

The accent

Grounds

Text on the light grounds

Hairlines

Brand values, as supplied

Ground and text, dark

The accent

Grounds

Text on the light grounds, chosen on grey-deep so they pass on all four

Hairlines