The pieces, and what each one is for.

The mark

A gateway: an opening you pass through, with the base left open. The aperture is the brand green — the one thing worth keeping from the current site.

Semantic colour what components read

• --color-backgroundThe page itself
• --color-surfaceA panel sitting on the page
• --color-surface-raisedA panel on top of that
• --color-textBody and headline ink
• --color-text-mutedSupporting prose
• --color-text-faintMetadata, timestamps
• --color-primaryThe brand act: links, marks, calls to action
• --color-accentScarce. The one thing that matters most on screen
• --color-borderQuiet division
• --color-ruleStructural division

Named colour raw values, never read by a component

• --color__signal-greenExtracted from the live site. 24 occurrences.
• --color__gateway-blueExtracted from the live site. 7 occurrences.
• --color__clinical-greenJournal — the deep publication green
• --color__petrolAtlas — the ground of the interior
• --color__terracottaPractice — the warm human accent
• --color__neon-limeVibrant only. Never on a light ground.

When the client wants a different primary, we add one named token and re-point one semantic token. No component changes.

Type

• --font-display DisplayHeal your mouth.
• --font-body BodyYour mouth is full of bacteria. Some protect you.
• --font-data Data$399 · 8 episodes · 42 min

Imagery one family, nine appearances

Seven ink-on-paper plates generated as a single family off one locked seed. There is no light set and no dark set — the ground is dissolved with a blend mode and the ink tinted toward the active --color-primary, so the same files read as native in every direction and every mode.