# ShiftOps Design System > The design system behind shiftops.ai — a workforce-orchestration platform for event labor. Chrome is monochrome ink; color is earned from photography and editorial gradients; violet is reserved exclusively for AI surfaces; ok/warn/danger appear only for real operational states. Light and dark themes ship from one token file via [data-theme] on . ## Pages - [Home](https://design.shiftops.ai/): The system thesis and its four rules — ink is the accent, violet means AI, color comes from the world, status is sacred. - [Foundations](https://design.shiftops.ai/foundations): Color tokens for both themes (with hex values), type scale (Geist Sans/Mono), radius scale 4–28px, 1280px container and spacing rhythm, shadows, motion (fade-up, pulse-dot, marquee, aurora drift), grain texture. - [Components](https://design.shiftops.ai/components): Live specimens with copyable HTML — buttons, pills and capability chips, cards, FAQ accordion, MockFrame product-mock chrome, status pills, lifecycle scrubber, photo-cutout card, mega panel. - [Brand](https://design.shiftops.ai/brand): The wordmark is the sole identity ("Shift" 600 + "Ops" 400 in --fg-muted, −0.02em tracking; clearspace = height of the "S", minimum 14px), do/don't rules, six editorial gradient recipes with CSS, photo art direction, grain overlay usage. The three-bar tile is favicon/app icon only — not a logo. - [Voice](https://design.shiftops.ai/voice): Writing principles (confident, concrete, short; numbers over adjectives), banned words, before/after rewrites, product terminology glossary. - [Getting started](https://design.shiftops.ai/getting-started): How to link tokens.css, the CSS variable contract, dark theme wiring, starter HTML. ## Tokens - [tokens.css](https://design.shiftops.ai/tokens.css): All design tokens as CSS custom properties — light and dark themes, radius, shadows, motion, plus core keyframes and utility classes. - [tokens.json](https://design.shiftops.ai/tokens.json): The same token values as JSON for programmatic use. - [llms-full.txt](https://design.shiftops.ai/llms-full.txt): The entire system in one plain-text file — thesis and four rules, all 23 color tokens with light + dark values, type scale, radius/shadow/motion, component inventory, brand (wordmark spec, favicon note, gradients), and voice. ## Notes - Every page has a "Copy for LLM" cluster: a per-page Markdown digest (hand-written, hidden-textarea copy), plus links to tokens.css, tokens.json, llms-full.txt, and this index. - Every token ships a dark value; dark theme is [data-theme="dark"] on (or nested on a wrapper to force one region). Nothing is redesigned for dark. - Primary actions are near-black ink (--accent), never a hue. The violet --ai token appears only where an AI agent perceives, decides, or acts.