§ DESIGN · SD REGISTER
Design System
"Spacedrive × Raycast × Renaissance." One chrome dialect app-wide: full structural commitment, zero theatrics. Rendered live from the shipped tokens, utilities, and primitives below, so this page can never drift from the implementation.
docs/DESIGN-SYSTEM.md§ 01 · TYPOGRAPHY
Space Grotesk, and one serif
Space Grotesk is the app-wide sans. EB Garamond survives in exactly one place: the logotype. JetBrains Mono is for micro-labels only, never as a UI font. The --font-serif token is a dead alias pointing at Space Grotesk; never add a new font-serif class.
Burning late.
400 · 500 · 600 · 700
Hyperpolymath
components/ui/Logotype
Monday · July 13, 2026
⌃1 · dates · kbd · eyebrows
§ 02 · TOKENS
Tokens
globals.css is the source of truth. Values below are read live off <html>. Toggle the theme switch above to see both ladders resolve. No new hex literals in components.
Surfaces
Ink
Accent (JARVIS cyan) · the only hue
Functional inks · dots and 15% chips only, never chrome
§ 03 · CHROME GRAMMAR
Radius ladder
Deliberate, not a free choice. 14px is the one step above 12px, and it is what makes widget cards read as the app's primary object.
§ 04 · SIDEBAR
Sidebar row grammar
230px, solid --sd-sidebar. Rows take NO hover fill: hover moves ink-dull → ink and nothing else, and ACTIVE is a background tint only (no left bar, no cyan tint). Nouns get dimensional icons at 18px; verbs get quiet lucide at 16px.
§ 05 · STAT STRIP
Icon-left stat strip
Sits directly on the canvas: no card chrome, no hero plate. The label is Space Grotesk 11px semibold uppercase, NOT mono. Functional hues appear only as the 5px caption dot.
Open tasks
12
2 overdue
Habits today
3/ 5
On pace
Captures
27
8 this week
§ 06 · WIDGET CARD v2
The canonical content object
Rendered from the real WidgetCard and entity-card primitives. 14px radius, --sd-box fill, hairline border, 20px body, and chips in a hairline-separated h-10 footer strip rather than floating mid-card. Hover moves the border and nothing else.
§ 07 · CHIPS + PILLS
One chip grammar
The verbatim chip is text-tiny (0.65rem), 4px radius, hairline border. A tone tints it: text in the hue, border at 30%, background at 15%. Only cyan and coral are sanctioned. StatusPill is canonical inside cards; the CSS .sd-status-pill is its standalone equivalent for surfaces that are not entity cards.
§ 08 · BUTTONS
Button recipes
.sd-btn-primary is "lit from above": accent fill, ambient glow, white top bevel, dark bottom bevel. .sd-btn-ghost is translucent chrome.
§ 09 · MOTION LAW
Motion timings
The zero-jank law: animate opacity, transform, and filter only. Never width, never height outside a measured collapse. Everything interruptible, useReducedMotion() guarded, no transitions on first paint, no hover scale anywhere.
| Moment | Timing | Easing |
|---|---|---|
| Entrances | opacity 0→1, y 4→0, 160ms | [0.25, 1, 0.5, 1] |
| Collapses (height 0↔auto) | 200-320ms | cubic-bezier(0.32, 0.72, 0, 1) |
| Micro (color / bg / border) | 120-150ms | ease-out |
| Tab switch (color only) | 80ms | ease-out |
| Sidebar (width, active pill) | 250-300ms | [0.25, 1, 0.5, 1] |
| Press | transform 100ms | ease-out |
| Success / confirm overshoot | ~4% spring | spring |
§ 10 · ICONS
Dimensional icons
Nouns get dimensional icons; verbs get lucide. Gradient-layered, cool-indigo bodies with useId-scoped defs. Accent is never a body fill. They must hold legibility at 18px (the sidebar floor).
§ 11 · BANNED
What never ships
If a change needs one of these to work, the change is wrong. Amend docs/DESIGN-SYSTEM.md first, never silently.
- Gradient washes
- Noise on content
- Orbs > 40px
- Serif beyond the logotype
- Glow rings
- Card glassmorphism
- Accent-filled rows
- Hover scales
- Hover fill on nav rows
- Italic serif empty states
- More than one accent hue
- width-animated progress
§ 12 · SFX
The space-console core pack
Eight tiny, pitch-coherent cues synthesized at runtime (lib/ui/sfx.ts) — every cue < 180ms, quiet, never stacking, silent until a gesture unlocks the AudioContext. Two mute keys: hp:sfx-muted is the master (kills chimes too); ui:sfx is this pack's own toggle.
§ 13 · DATA SERIES
Cyan-primary series + a required legend
Charts are the one sanctioned exception to the single-hue rule, and only as data encoding. Cyan (--sd-accent) is always the primary series; --ink-amber and --ink-coral encode the second and third. A mono legend is REQUIRED whenever more than one series is plotted.
- Protein
- Carbs
- Fat
§ 14 · JARVIS CONSOLE
Mono voice, receipts, functional pills
JARVIS speaks a mono instrument voice. Every action lands as a solid --sd-box receipt plate (hairline border, no blur/bevel/glow) led by a flat intent pill. Cyan marks actions; functional red marks destructive deletes and errors; passive finds stay neutral — the one place the functional inks carry semantic weight, always through the chip grammar.
§ 15 · SCAN-GAP ESCAPE
Inline-style token routing
Tailwind's Oxide scan can miss an arbitrary utility used in only one file (bg-[var(--sd-sidebar)], font-logotype were never emitted). When a token lookup is genuinely one-off: reuse an already-emitted utility, add a real class in globals.css, or route the token through an inline style — as the samples on this very page do. Always verify the class emitted before claiming done.
§ 16 · CRAFT V2
Canvas chrome, pills, chips, glass pops, day tiles
The Craft.do architecture: one flat, calm canvas carries all the chrome, and elevation lives exclusively in content. Chrome sits flat (.craft-canvas-chrome); the sheet, cards, and pops carry every shadow. Each recipe resolves both themes through the token ladder, so toggle the theme switch above and nothing breaks.
The content sheet
Cards and sheets carry the elevation the chrome gave up.
Interactive card
Every clickable craft-card takes the hover lift.