The component layer. Each component reads from the semantic and component tokens — change a token, every consumer updates.
Four variants: primary for the page's main action; secondary for the alternative; ghost for low-stakes / inline actions; destructive for irreversible operations. All buttons share the same min-height (44px) for touch targets.
| Property | Token |
|---|---|
| Background — primary | --btn-primary-bg → --surface-brand-action |
| Background — primary hover | --btn-primary-bg-hover → --c-steady-blue |
| Ink — primary | --btn-primary-ink → --ink-inverse |
| Border — secondary | --btn-secondary-border → --border-strong |
| Radius | --btn-radius → --radius-sm (2px) |
| Padding | --btn-padding-y · --btn-padding-x |
| Type | --btn-font → Inconsolata 700, uppercase, +0.18em tracking |
| Min-height | 44px (accessibility floor) |
| Focus ring | --state-focus-ring · 2px · 2px offset |
| Transition | --motion-state (200ms standard easing) |
Inputs read from --input-* component tokens. Required fields signal with the warning ink (Honest Ochre) on the label asterisk. Helper and error text both use 13px Lora; error text is italic and warning-colored.
| Property | Token |
|---|---|
| Background | --input-bg → --surface-default |
| Border (default / hover / focus) | --input-border · --input-border-hover · --input-border-focus |
| Ink | --input-ink → --ink-default |
| Placeholder | --input-ink-placeholder → --ink-subtle |
| Padding | 12px 14px (44px effective height) |
| Type | --type-body · 15px Lora 400 |
| Error border | --ink-warning (Honest Ochre) |
| Label type | --type-label · 12px League Spartan 500, +0.06em tracking |
| Helper / error type | 13px Lora · error is italic |
A neutral container. Default reads as a passive panel. Selectable is interactive (use when the whole card links somewhere). Selected is the chosen-state of a selectable.
A 6-week engagement to clarify positioning, audience, and message before identity work begins.
Logo, type, color, and the rules for how they live together — built from the strategy outward.
From sitemap to launch, with a focus on the editorial shape of the brand on the web.
| Property | Token |
|---|---|
| Background | --card-bg → --surface-default |
| Border | --card-border → --border-subtle |
| Hover background | --card-bg-hover → --surface-muted |
| Selected border | --c-intentional-blue |
| Selected background | --c-intentional-blue-10 (10% tint) |
| Padding | --card-padding → 32px |
| Radius | --card-radius → --radius-none (the brand favors sharp edges) |
Tags categorize. Badges count. Status pills signal state.
| Property | Token |
|---|---|
| Tag bg / ink | --tag-bg · --tag-ink (slate-light + Clean Slate) |
| Tag radius | --tag-radius → 2px |
| Tag type | --tag-font · 10px League Spartan 500, +0.1em tracking, uppercase |
| Status variants | --status-{success|warning|info|critical}-{surface,ink} |
| Badge bg | --c-honest-ochre (default; signals "attention") |
The annotation pattern from the type page, generalized. Eyebrow tag stacked over italic body, left-bordered with the variant color.
Background usage rules. Use full-bleed as presentation slide backgrounds. The –1 variant suits white or gold text; the –2 variant works best when overlaying dark text.
Use Lora roman for body. Reserve italic for actual quotes, paraphrasing, special callouts, and annotations.
Don't use Inconsolata for eyebrows or labels. It's reserved for attributions and CTAs only.
Honest Ochre body text on Calm Blue or Radiant Gold backgrounds fails contrast at every size. Don't pair these.
| Property | Token |
|---|---|
| Background | --status-{variant}-surface |
| Border-left (3px) | --status-{variant}-ink |
| Body type | Lora italic 14px / 1.55 |
| Tag type | League Spartan 500 · 10px · +0.18em |
| Padding | 18px 22px |
| Max-width | 720px (prose container) |
For confirmations and focused tasks. Backdrop is Grounded Black at 60%. Modal sits on white surface with deliberate elevation. Always include a clear primary action and a way to cancel.
This will remove "Pivotal Ventures · Brand Refresh" and all attached files. This action cannot be undone.
| Property | Token |
|---|---|
| Backdrop | --modal-backdrop → rgba(31,30,30,0.6) |
| Background | --modal-bg → --surface-default |
| Padding | --modal-padding → 32px |
| Radius | --modal-radius → 4px |
| Shadow | --elevation-modal |
| Entrance motion | --motion-overlay-in · 320ms entrance easing · fade + 8px translate-up |
Brief context on hover or focus. Always supplemental — never the only place a piece of information lives.
| Property | Token |
|---|---|
| Background | --tooltip-bg → --c-grounded-black |
| Ink | --tooltip-ink → --c-clear-white |
| Padding | 6px 10px |
| Type | League Spartan 500 · 11px |
| Radius | --tooltip-radius → 2px |
| Trigger | hover OR keyboard focus (always reachable) |
| Delay | 200ms in · 0ms out |
Transient feedback for system events. Stacks bottom-right. Auto-dismiss after 5s for info/success; persist for warning/critical until acknowledged.
| Property | Token |
|---|---|
| Surface | --surface-default |
| Border-left | --ink-brand (info default), --status-{variant}-ink for variants |
| Shadow | --elevation-overlay |
| Title type | League Spartan 700 · 14px |
| Body type | Lora 400 · 13px |
| Auto-dismiss | 5s for info / success · persist for warning / critical |
| Entrance motion | standard easing, 200ms, slide-up + fade |
Top-level site navigation. Active link uses Radiant Gold. Hover lifts a subtle Clear White overlay (12% alpha).
| Property | Token |
|---|---|
| Background | --nav-bg → --c-grounded-black |
| Ink | --nav-ink → --c-clear-white |
| Active ink | --nav-ink-active → --c-radiant-gold |
| Hover overlay | rgba(249,248,242,0.12) |
| Type | League Spartan 500 · 11px · +0.12em · uppercase |
Section switcher. Active tab signals with a 2px underline in --ink-default. Inactive tabs sit in --ink-muted; hover lifts to default ink.
Pair every primary button with a clear secondary or cancel path. Never show three primaries in the same scope.
Don't use destructive styling for "Cancel" or "Close". Reserve Honest Ochre for actions that genuinely can't be undone.
Always show the focus ring on keyboard focus. If you're styling a custom element, replicate the 2px Intentional Blue ring with 2px offset.
Don't outline:none without a replacement focus indicator. This breaks accessibility for keyboard-only users.
Pair color with an icon, label, or position. A red border alone is not enough — add an error message, an icon, or both.
Don't rely on color alone to convey state. ~8% of users have color vision differences.
Components below exist in the brand expression but haven't been formalized as DS components. Add when first needed: