Design Principles
The 5 rules every component inherits — read readme.md for the full text
02Introduction
Why this design system exists, and the five rules every component obeys.
Why
One brand, two codebases: the Ghost theme (Handlebars + Tailwind) and the Next.js LMS (React). Without a shared system they drift apart within weeks — two blues, two card radii, two ideas of “small text.” This system is the single source both render: one set of tokens, one portable .ns-* class layer, checked in CI so drift is a build failure, not a design review finding.
The identity is a developer console, not a marketing site — Apex is Salesforce's own language, and the whole visual voice (mono indices, code-comment kickers, hairline borders, terminal-row lists) is built to feel like a precise tool. Calm, flat, reading-first.
The five principles
- The hairline is the structure, not the shadow. Cards, inputs and tags are built from a single 1px border; elevation is a border brightening to brand blue, never a floating lift.
- Monospace is a structural material. The mono face renders every index, duration, timestamp, status and kicker — that split is what makes a list read as data and a paragraph read as writing.
- One signal color. Brand blue is the only hue that means “interactive” — so a screen with one solid blue button has exactly one obvious next action.
- Sharp, specific geometry. 6px cards, 4px buttons, pills only for true pills. Nothing is rounded because rounding is the default.
- Motion is instant, not springy. 120–180ms plain ease-out; no bounce, no scale-pop, no hover-lift.