Design System

About

A design language for unforgiving operations.

Built for operator-facing software in industries where the work is physical, consequential, and unforgiving — the kind of work where a misread display ends a shift and a missed status costs money. The software that supports this work should feel the same: confident, quiet, and honest.

This system is built on three ideas. Editorial minimalism — the page defers to the content; headlines compress to the edge of legibility; body copy breathes; green is the only accent, used surgically. Shadow-as-border — every border in the system is a 0 0 0 1px box-shadow, never a CSS border, so rounded corners stay clean and the same primitive scales from inputs to cards to modals. Crisp, not soft — no gradients on surfaces, no glass blur on chrome, no glow on accents. Softness lies to operators about system state. This system always tells the truth.

The work is physical, consequential, and unforgiving. The software that supports it should feel the same.

Principles, in order

  1. Truth before decoration. Every visual cue maps to a system state. Color carries meaning, not mood.
  2. One accent. A single green is the only decorative color. Everything else carries semantic weight.
  3. Hierarchy from size, not weight. Three weights only — 400 reading, 500 interactive, 600 announcing.
  4. Mono for operator voice. Every uppercase string is Geist Mono. Geist Sans is never uppercase.
  5. Numbers are tabular. Operators compare top-to-bottom; tabular figures prevent the jitter.
  6. No motion past 200ms. Soft systems lie about state. Crisp systems answer fast.
  7. Mobile is first-class. Field operators use phones in the field. Reports submit from phones.
  8. Theme follows time. Light by day, dark by night. User can override.

Status

This is v1.0 — production-tested across multiple operator-facing applications, now opened for review and feedback. Issues, suggestions, and gaps are welcome.

Author

Darus Ishak.

System design built incrementally during 2025-2026. Type by Geist (Vercel). Icons by Lucide. Charts by Recharts.