A design system is not a style guide — it is a contract. It defines the smallest set of decisions that every surface inherits. If a token does not exist, you do not invent one; you add it to the system. If a component does not exist, you do not copy a similar one; you extract the pattern.
TOKENS: THE SOURCE OF TRUTH
Every visual decision flows from CSS custom properties defined on :root. There are no hardcoded hex values in components. If a color is needed, it becomes a token. If a spacing value is needed, it joins the scale.
Surface Tokens
The surface hierarchy is achromatic and ordered by lightness:
--zt-bg: #050505— the page background, darkest--zt-panel: #090909— cards and panels--zt-surface: #0b0b0b— inputs and nested surfaces
Each step is one perceptual notch lighter. The hierarchy is felt, not announced.
The Accent Token
One accent: --zt-accent: #75e069. It is identity (the active nav link), state (the status dot), and affordance (the hover ring). It is never decorative. If you find yourself using the accent to "make something look nice," stop — the accent is a signal, not a style.
"A token system with fallbacks is a token system with holes. If the token doesn't exist, define it — don't paper over it with var(--x, #fff)."THE SPACING SCALE
Spacing is not freeform. Five steps cover every gap:
--zt-space-xs: 8px— tight gaps inside components--zt-space-sm: 16px— default component padding--zt-space-md: 32px— section-internal gaps--zt-space-lg: 64px— section padding--zt-space-xl: 96px— major section breaks
If a gap does not fit one of these, the layout is wrong — not the scale.
TYPOGRAPHY TOKENS
Three font families, each with a role:
--zt-font-display— Impact / Haettenschweiler. Headlines only. Uppercase, tight letter-spacing.--zt-font-body— Arial / Helvetica. Body text, metadata, UI labels.--zt-font-mono— Courier New. Code blocks, timestamps, technical metadata.
COMPONENT CONTRACTS
Every component in the system has a fixed API: its class name, its required structure, and its tokens. The card component, for example, is always:
.zt-card → a flex column, --zt-space-md padding, 1px solid var(--zt-line) border, var(--zt-panel) background. Hover shifts the border to the accent and darkens the background. No other hover behavior is permitted.
Why Fixed Contracts?
If every card can hover differently, the system is not a system — it is a collection. Fixed contracts mean a designer can reason about a surface without reading its CSS. The card behaves like a card everywhere, because it is the same card everywhere.
CONCLUSION
A design system succeeds when it makes the next decision easy. Tokens answer "what color?" Components answer "what structure?" The scale answers "how far apart?" When those three questions have automatic answers, the designer's job shifts from deciding to composing — and that is where the real work begins.