Design System
The design language for System2. Cool dusk-blue at its core, with a rosy hint of warmth on Ted. Quiet, editorial, legible at scale.
The rules that govern every design decision.
Color, type, and motion report state. If a flourish doesn't earn its space, cut it.
Serious by default, briefly warm at moments that matter. Dusk is a thinking partner's palette.
Grotesk headlines, mono metadata, generous negative space. Reads like a well-set document.
Fast by default (200ms). Longer only when the motion is the message.
Chat, tables, and live activity are compact and legible. Landing surfaces breathe.
The orb at whatever size is the logomark. His moods and gaze are the entire brand expression.
The logomark. A dusk-blue sphere with a rosy rim underneath. Five stacked radial gradients.
Never give Ted a face beyond two dots. No mouth, no eyebrows, no cartoon expressions. He is an agent, not a mascot. Gaze + state is the entire emotional range. No wordmark pairing. Ted stands alone.
Primary accent. Cool dusk-blue for CTAs, active states, focus rings, and brand moments. Chroma never exceeds 0.075 so Dusk reads as grounded, not saturated.
| Token | Light | Dark | Preview | Usage |
|---|---|---|---|---|
| dusk | #5E72A8 | #8696C4 | Primary brand, CTAs, links | |
| dusk-soft | #EEF1F7 | #1C2138 | Tinted backgrounds, active nav | |
| dusk-hover | #4C5F94 | #7788B8 | Primary button hover | |
| dusk-deep | #354469 | #1F2A47 | Gradient bottom, pressed | |
| dusk-lift | #8696C4 | #A4B1D6 | Gradient top |
The carrier for 90% of the UI. Cool off-whites in light mode, near-blacks in dark.
| Token | Light | Dark | Preview | Usage |
|---|---|---|---|---|
| canvas | #FAFAFB | #0B0C0F | Page background | |
| surface | #FFFFFF | #14161C | Cards, modals, panels | |
| surface-raised | #F3F4F7 | #1C1F28 | Elevated surfaces, inputs |
Three tiers of text color for hierarchy.
| Token | Light | Dark | Preview | Usage |
|---|---|---|---|---|
| ink | #181A22 | #ECEDF0 | Primary text, headings | |
| ink-secondary | #676A76 | #9EA2AE | Descriptions, captions | |
| ink-tertiary | #9598A3 | #6A6D78 | Placeholders, hints |
Status colors are deliberately quiet. Never use raw CSS red or green.
| Token | Light | Dark | Preview | Usage |
|---|---|---|---|---|
| success | #2D7A4F | #4ADE80 | Completed, healthy | |
| caution | #B8860B | #FACC15 | Warnings, approval needed | |
| danger | #B8372A | #F87171 | Failed, destructive | |
| info | #3B5BA7 | #7E9CDD | System note, neutral |
9 hues for badges, status pills, category tags. Each has a bg + ink pair.
Six-color categorical set for charts on Dusk surfaces.
Four families. Grotesk for headlines, Inter for UI, Serif for Ted, Mono for data.
The minimum set. Buttons, inputs, badges, chips, cards.
Ted is building a workflow to auto-generate and send invoices through QuickBooks.
Everything rests on a 4px grid. Minimum body text: 13px.