NASApunk Design System — one source of truth for my visual language
Can I have a single source of truth for my whole visual language — the colors, the Gorton typeface, the teal accent, and the φ/LiftKit spacing — so every project stays consistent instead of each one drifting off on its own?
Consolidating scattered style decisions into one set of named tokens means a change happens once and propagates everywhere. The system absorbed the golden-ratio output from GOLDEN·GRID and the type/spacing that Parallax needed into a single place. It also settled design debates by making the canonical document the authority — when the typeface question came up, the closed doc won, and that was that.
The token set and the spec exist (DESIGN_SYSTEM.md plus tokens.css and tokens.js). Parked at the step of wiring every site to actually read from it — the same consolidation that GOLDEN·GRID and Parallax are both waiting on.
What it is
A design system for my NASApunk visual world: the brand's colors, typography (Gorton
Perfected), the single teal accent, and the structural rules (golden-ratio scale, the "optical
box" for padding and radius) — all written down as design tokens, the named values a
system reads from. It lives as a spec (DESIGN_SYSTEM.md) plus machine-readable token files
(tokens.css, tokens.js).
Why it exists
I'm a designer; my slowest, most expensive step is taste iteration — re-deciding sizes, colors, and spacing on every project. A token system replaces a lot of that with a decision made once. It also stops drift: without it, Escalation Protocol, Starquixote, and this hub would each slowly evolve their own slightly-different look.
What it pulls together
It's the convergence point for work I'd already done separately:
- the golden-ratio output of GOLDEN·GRID,
- the type and spacing Parallax needed,
- the Escalation Protocol visual identity, and the Starquixote brand.
One language, defined once, reused across all of them.
How I work with it
The division of labor is the point: I design the mockup and the navigation map; the tokens turn intent into consistent code. It's the difference between "make it look nice" and "make it look like the system."
Where it stands
The tokens and the spec are written. The remaining work is plumbing — making each site read from this single source so the visual language is genuinely identical everywhere.