ShiftOps Design System · v1.0
The interface is ink.
The world brings the color.
ShiftOps is a command center for event labor — schedules, gates, zones, payroll. Its design language keeps the chrome monochrome so the operation can speak: photographs carry the atmosphere, editorial gradients carry the stories, violet appears only when an agent is working, and green means someone actually showed up.
The rules
Four rules, no exceptions.
Everything else in this system is a consequence of these.
Ink is the accent
Primary actions are near-black, not a hue. When the chrome never shouts, a single filled button is loud enough — and every use of real color has to be earned.
Violet means AI
The --ai token appears in exactly one
situation: an agent is perceiving, deciding, or acting. Nothing else
may borrow it. If a surface is violet, software did something.
Color comes from the world
Palette lives in photography of real labor and in grainy editorial gradients — never in the UI itself. The interface frames the event; it doesn't compete with it.
Status is sacred
--ok, --warn,
and --danger report real operational
states: a filled zone, a silent worker, a short gate. They are never
decoration, so they are always believed.
The system, in five movements.
Every specimen on these pages renders live from tokens.css — flip the theme toggle anywhere and watch the whole system follow.
Foundations
Color tokens in both themes, the Geist type scale, radius from 4 to 28px, the 1280px container, shadows, motion, and grain.
02Components
Buttons, pills, cards, status, the MockFrame, the lifecycle scrubber, cutouts and mega panels — live, with copyable HTML.
03Brand
The wordmark — the sole identity — clearspace, the six editorial gradients, photography direction, and the favicon tile.
04Voice
Confident, concrete, short. Numbers over adjectives, the banned list, and the words ShiftOps means precisely.
05Start
Link one CSS file, honor the variable contract, flip
[data-theme] for dark. Tokens as JSON too.
Two files, whole system
tokens.css · tokens.json — click to copy the link tag, or download the JSON.