Brand guidelines · 2026Contact
Brand guidelines · 2026Contact
Each color has a role, and the role — not the value — is what you reach for. Print values are nearest matches; verify against physical chips before production.
Reserved for the ask in the interface: the primary CTA, the clickable green card, the dot. Illustration ranges the whole scale.
Structure and weight: dark surfaces, type, the secondary button. Ink carries most of the page so the signal has something to fire against.
The secondary voice: dimmed display lines, captions, the quiet half of a headline. Warmth inside the dark, never the lead.
The light ground: warm, papery, and calm. Where the brand breathes — hero bars, cards, and any surface that needs air.
Every value in the system, exposed — hex and RGB, base marked. Steps are assignments, not choices: the component bindings live where they're used, starting with 07 · Buttons.
The base is reserved for the ask — the CTA, the clickable card, the dot. Hover and pressed sit below it, focus outlines above. Illustration ranges the whole scale; the deep end also anchors charts and product depth.
The light side of the system — and the scale illustration leans on most. Canvas grounds pages and surfaces at 100, the middle steps carry layering and disabled states, Clay speaks at 600, and the deep end returns to the stage.
The utility scale: text, hairlines, and structure. The light end carries the type ramp on dark surfaces, 800 draws borders and chips — and Ink itself is the page background.
Measured across a page, not a component. Ink and canvas split the stage almost evenly, clay hums underneath, and green stays the smallest share on purpose — scarcity is what makes the signal legible.
Every layout is built from three canonical surfaces. Content doesn't restyle per surface — the label takes the surface ink, the accent stays green, the vocabulary holds.
Body copy runs gray/300; the headline holds warm/100.
Ink type on the warm ground; body copy runs gray/800.
A green surface is itself an ask — ink type, whole area clickable.
Approved surface-on-surface combinations. A card sits one clear step from its ground — and white lives on warm/100 as an object color.
Functional, small, never interactive. System colors classify and differentiate — mono tags, avatars, data-viz series, sparse ambient accents. They never appear as buttons, links, or large fills; green signals and acts.
WCAG contrast, computed. Body text needs 4.5:1; large display holds at 3:1. If a pair isn't on this list, it doesn't ship.
The web and Figma share one vocabulary. Components reference semantic tokens; primitives live here and in the DS Foundations.
| signal green | --green · green/500 | #5DE27E · the signal — CTA, arrows, dots |
| ink | --black | #181818 · stage, type, dark surfaces |
| clay | --brown · warm/600 | #897972 · dim display, secondary voice |
| canvas | warm/50 · warm/100 | #F5F0EC / #EAE3DD · light ground & warm surfaces |
| interaction steps | --green-400 / -600 / -700 | focus #84E99C · hover #3CCB66 · pressed #31AD53 — bound in 07 · Buttons |
| full ramps & modes | Figma · DS Foundations | complete scales, light/dark modes, and product tokens live in the design system |
03 · 13