Designing a HUD-Inspired Design System

The guiding principle

"NASA does layout; HUD does flavor."

The site should feel like mission control — clean, grid-disciplined, highly readable — with just enough sci-fi chrome to give it personality. Glowing borders, corner ticks, telemetry labels. But never at the expense of clarity.

Color palette

Two accent colors carry the entire identity:

• Cyan (#00e5ff) — primary highlight for links, active states, and UI chrome
• Magenta (#ff2d78) — secondary highlight for CTAs and status badges

Everything else is near-black backgrounds, off-white text, and neutral borders. The rule: 1-2 accent moments per viewport. Never flood the page with glow.

Component primitives

We built five primitives in S02:

1. Button — primary / secondary / ghost variants, renders as <Link> when given an href
2. Badge — default / status / platform variants for telemetry-style labels
3. Card — base card with optional HUD chrome (corner ticks + telemetry label)
4. Divider — simple <hr> with consistent spacing
5. SectionHeader — title + optional kicker + description

Overlays

Two CSS-only overlays add texture without weight:

• Grain — fractal noise at 3.5% opacity
• Grid — cyan lines at 4% opacity, 60px cells

Both respect prefers-reduced-motion and use pointer-events: none.

What's next

With the design system in place, S03 will add the MDX content pipeline so apps and blog posts can be authored as .mdx files and rendered through these primitives.