K02 · Foundations

Color, Tokens & Stage Presets

Neutrals carry the interface. Magenta is reserved for the next step, so it's the one thing people notice in a category full of blue and purple. Change is shown in its own muted green and red, always with a sign and an arrow.

Token architecture

1 · Primitive --magenta-600: #C8189B
--magenta-400: #FF4FCB
--neutral-950: #111114
--neutral-50: #FAFAF8 Raw values. Never used directly in components.
2 · Semantic · brand layer --action → magenta-600
--on-action → white
--canvas → neutral-50
--ink → neutral-950 Rebrand by overriding these 8: canvas, surface, ink, line, action, on-action, action-hover, action-tint.
3 · Component --btn-primary-bg → action
--delta-pos-fg → pos
--frame-shadow → shadow-frame
--tile-radius → r-lg Scoped per component. Stage presets override here. 
<html data-theme="after-hours" data-stage="launch" data-density="compact">

Semantic palette

Daylight / After Hours
TOKENDAYLIGHTAFTER HOURSUSE
--canvas #FAFAF8 #0E0E11 Page background
--surface #FFFFFF #16161B Cards, product frames
--surface-2 #F2F2EE #1E1E25 Wells, toolbars
--ink #111114 #EDEDF0 Primary text, headlines
--ink-2 #474752 #B9B9C3 Body secondary
--ink-3 #63636E #9494A0 Meta, captions
--line #E3E3DE #26262E 1px hairlines
--action #C8189B #FF4FCB CTAs only
--on-action #FFFFFF #111114 Text on action
--pos #1E6B43 #62CE94 Positive delta, success
--pos-bg #E3F1E8 #16301F Delta badge fill
--neg #A8342B #F2857B Negative delta, error
--neg-bg #F7E4E1 #3A1C19 Error fill
--warn #8A5A00 #E8B25A Warnings
--info #2A5BA8 #7FA8E8 Info, links in app

Contrast, computed

Ratios are calculated from the hex values below (WCAG 2.x relative luminance). Body text targets AAA 7:1, UI text AA 4.5:1.

Daylight
Aa ink / canvas · Body text on canvas 18.04:1 AAA
Aa ink-2 / canvas · Secondary on canvas 8.77:1 AAA
Aa ink-3 / canvas · Meta on canvas 5.68:1 AA
Aa ink-3 / surface-2 · Meta on surface-2 5.28:1 AA
Aa on-action / action · Text on CTA 5.17:1 AA
Aa action / canvas · Magenta as text 4.95:1 AA
Aa pos / pos-bg · Positive delta badge 5.56:1 AA
Aa neg / neg-bg · Negative delta badge 5.37:1 AA
After Hours
Aa ink / canvas · Body text on canvas 16.50:1 AAA
Aa ink-2 / canvas · Secondary on canvas 9.90:1 AAA
Aa ink-3 / canvas · Meta on canvas 6.43:1 AA
Aa ink-3 / surface-2 · Meta on surface-2 5.52:1 AA
Aa on-action / action · Text on CTA 6.49:1 AA
Aa action / canvas · Magenta as text 6.64:1 AA
Aa pos / pos-bg · Positive delta badge 7.30:1 AAA
Aa neg / neg-bg · Negative delta badge 6.19:1 AA

Delta & status

Never color alone: every delta carries a sign and arrow, every status an icon and label. Neither ever uses the action color.

▲ +38% activation · 90 days ▼ −4.2% churn · Q2 ■ ±0% · 30 days
Success · Import complete
Warning · 80% of seats used
Error · Payment failed
Info · Sync runs hourly

Data-viz palette

Six categorical hues chosen to stay distinguishable under deuteranopia and protanopia; pair with direct labels or patterns past three series.

--c1
Slate blue
--c2
Amber
--c3
Teal
--c4
Violet
--c5
Brick
--c6
Olive
Sequential · lowhigh
Diverging · −0+

Stage presets · same section, three stages

ROADNOTE STUDIO Coming this fall. Be first in. Move up the list by inviting your team. Join the waitlist Proof: founder note, backers, waitlist count
Pre-launch
motion: bold, cinematic · saturation: high · radius 8/12/16 · density: airy · CTA: waitlist only
ROADNOTE Build what users want. For product teams of 3 to 300. Free plan forever. Start free Proof: live UI, customer quotes, ship log
Launch
motion: playful · saturation: standard · radius 10/16/24 · density: comfortable · CTA: start free + tour
ROADNOTE ENTERPRISE Feedback at the scale of 1,000+ seats. SSO, SCIM, EU data residency, audit log. Start freeBook a demo Proof: security status, case studies, SLA
Scale
motion: restrained · saturation: calm · radius 8/12/16 · density: denser · CTA: start free + book a demo