Primary action
One visible request-access action can use Ink when it is the main path forward.
SurfacesTokens
Brand primitives and review signals stay separate.
Use Ink, Ivory, Nickel, Rule, Paper, Muted, and Subtle for the visual system. Use Proof Cyan only for small proof and focus signals.
Brand JSONPublic-page JSONCSS variables
01
Use
Start from the roles the public page needs.
Proof media
Generated-screen examples stay on white or soft neutral surfaces so the work remains easy to inspect.
Review signal
Proof Cyan is reserved for focus, selection, and meaningful review emphasis.
02
Brand Tokens
Simple Slab primitives support identity, surfaces, rules, and captions.
| Token | Value | Use |
|---|---|---|
--sp-color-ink | #0B0D0E | Primary text and identity |
--sp-color-ivory | #F7F6F2 | Warm page canvas |
--sp-color-nickel | #8B9096 | Lower slab and secondary neutral |
--sp-color-rule | #DAD7CF | Rules and dividers |
--sp-color-paper | #FFFFFF | Raised surface |
--sp-color-proof | #00A7C8 | Small proof or focus signal only |
--sp-font-sans | Geist, Inter, Arial | Interface and reference text |
--sp-radius-8 | 8px | Maximum standard radius |
03
Page Tokens
Proof color appears only when it carries meaning.
| Token | Value | Use |
|---|---|---|
Action | --sp-ui-action | Primary commands |
Focus | --sp-ui-focus-ring | Keyboard focus |
Proof accent | --sp-ui-focus-accent | Small proof or active signal |
Surface | --sp-ui-surface | Raised public-page surface |
Border | --sp-ui-border | Rules and dividers |
Muted text | --sp-ui-fg-secondary | Supporting copy |
Visible sourceNeeds reviewProof signal