Styleguide
Every base component in both modes. Colour means permission: green is what is open, ochre is what is blocked, and nothing else in the interface is allowed to be coloured at all.
Colour
Two colours: dark olive green and cream. In light they are accent and ground; in dark they swap, cream becoming the ink and the olive rising in luminance to stay legible. Ochre is the one exception, so a held-back move is told apart from a permitted one by hue and not only by luminance.
--paperPage ground — cream in light, near-black in dark--surfaceCards. The #FFFDD0 swatch, at full strength--surface-raisedA card on a card--inkPrimary text. Cream on dark, olive-black on cream--ink-softSecondary text--ink-faintCaptions, metadata, control edges--ruleHairline dividers--accent#556B2F. Brand, primary action, and permitted--accent-inkWhat sits on top of a filled accent--accent-bgAccent tint--blockedNot yet — a judgment, not an error--blocked-bgBlocked tintType
Instrument Serif for page headlines and the escalation brief only. Geist Sans for body. Geist Mono for anything a CRM would hold.
The not-yet list
Four positioning routes
What opens up if this lands
Don't reference the funding round yet — the champion wasn't in the room for it.
Secondary copy and helper text.
Captions and dense metadata.
ACME-4471 · Stage 3 · $148,000 · hiring signal · 4d ago
Rule
One hairline. 1px, --rule. No shadows anywhere; the landing hero is the only place a gradient appears, and only as background.
plain
labelled
Button
Primary is the brand olive with cream on it, the same value in both themes. Secondary is a hairline that lifts to the accent. Pill-shaped at every size.
primary
secondary
Logo
The wordmark is masked, not drawn: it paints in currentColor, so it takes the ink of whatever it sits in rather than carrying a colour of its own.
md
sm
in an eyebrow
Pill
Every pill states its meaning in words as well as hue, so nothing is carried by colour alone.
Card
Surface, 1px hairline, 8px radius — or 16px with radius=panel. Depth is a border, never a shadow.
Default
Hairline on surface, 24px padding.
Interactive
Border lifts to the accent on hover.
SuggestField
Every bar in the product carries built-in options and still takes anything typed. What the rep types that is not on the list comes back as an explicit 'Use' row, so adding their own is a choice rather than a side effect of clicking away.
Click the bar. Type to filter, or write your own.
Field
Control edges use --ink-faint, not --rule: a boundary you must find has to clear 3:1. Errors darken the border rather than colouring it.
Anything a CRM would hold is mono.
No account matches that name.
Spinner
The one permitted loop — it reports live state. Slows under reduced motion rather than freezing.
StepHeader
Page-level masthead for a layer of the spine. Display face, mono step marker, hairline close.
04Win
Deal plan
The next move, what not to do yet, and what opens up if this lands.
In context
The signature composition: a not-yet carries ochre and always carries its reason.
Live signals
- MERIDIAN-2211New VP Eng — 6d ago
- ACME-4471Pricing page, 4 visits — 2d ago
- HELIOS-0093Competitor renewal Q3 — 9d ago
- VANTAGE-7752Series C closed — 11d ago
Don’t send the ROI deck
Not yetFinance hasn’t been introduced. Sending it now hands your champion a document they can’t defend in a room they weren’t in.
Changes when — champion confirms finance is in the next call.
Colour
Two colours: dark olive green and cream. In light they are accent and ground; in dark they swap, cream becoming the ink and the olive rising in luminance to stay legible. Ochre is the one exception, so a held-back move is told apart from a permitted one by hue and not only by luminance.
--paperPage ground — cream in light, near-black in dark--surfaceCards. The #FFFDD0 swatch, at full strength--surface-raisedA card on a card--inkPrimary text. Cream on dark, olive-black on cream--ink-softSecondary text--ink-faintCaptions, metadata, control edges--ruleHairline dividers--accent#556B2F. Brand, primary action, and permitted--accent-inkWhat sits on top of a filled accent--accent-bgAccent tint--blockedNot yet — a judgment, not an error--blocked-bgBlocked tintType
Instrument Serif for page headlines and the escalation brief only. Geist Sans for body. Geist Mono for anything a CRM would hold.
The not-yet list
Four positioning routes
What opens up if this lands
Don't reference the funding round yet — the champion wasn't in the room for it.
Secondary copy and helper text.
Captions and dense metadata.
ACME-4471 · Stage 3 · $148,000 · hiring signal · 4d ago
Rule
One hairline. 1px, --rule. No shadows anywhere; the landing hero is the only place a gradient appears, and only as background.
plain
labelled
Button
Primary is the brand olive with cream on it, the same value in both themes. Secondary is a hairline that lifts to the accent. Pill-shaped at every size.
primary
secondary
Logo
The wordmark is masked, not drawn: it paints in currentColor, so it takes the ink of whatever it sits in rather than carrying a colour of its own.
md
sm
in an eyebrow
Pill
Every pill states its meaning in words as well as hue, so nothing is carried by colour alone.
Card
Surface, 1px hairline, 8px radius — or 16px with radius=panel. Depth is a border, never a shadow.
Default
Hairline on surface, 24px padding.
Interactive
Border lifts to the accent on hover.
SuggestField
Every bar in the product carries built-in options and still takes anything typed. What the rep types that is not on the list comes back as an explicit 'Use' row, so adding their own is a choice rather than a side effect of clicking away.
Click the bar. Type to filter, or write your own.
Field
Control edges use --ink-faint, not --rule: a boundary you must find has to clear 3:1. Errors darken the border rather than colouring it.
Anything a CRM would hold is mono.
No account matches that name.
Spinner
The one permitted loop — it reports live state. Slows under reduced motion rather than freezing.
StepHeader
Page-level masthead for a layer of the spine. Display face, mono step marker, hairline close.
04Win
Deal plan
The next move, what not to do yet, and what opens up if this lands.
In context
The signature composition: a not-yet carries ochre and always carries its reason.
Live signals
- MERIDIAN-2211New VP Eng — 6d ago
- ACME-4471Pricing page, 4 visits — 2d ago
- HELIOS-0093Competitor renewal Q3 — 9d ago
- VANTAGE-7752Series C closed — 11d ago
Don’t send the ROI deck
Not yetFinance hasn’t been introduced. Sending it now hands your champion a document they can’t defend in a room they weren’t in.
Changes when — champion confirms finance is in the next call.