§ 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.