Stratum Design System
What we actually have, rendered from the real tokens and components — not a mockup. See also Design Principles for the decisions behind these choices, and Storybook ↗ for every variant in isolation.
↓ Download DESIGN.mdFormatted in the spirit of getdesign.md ↗ — meant to be dropped into a neighbouring repo or handed to an AI assistant doing UI work there.
Color Palette
Neutral surfaces, one indigo accent, and a dark gray chrome. Defined once in contracts/design-system/dist/stratum.css, which both the app and Storybook load.
Brand & Accent
Primary
--primary
Buttons, links, focus ring
Secondary
--secondary
Secondary actions
Chrome
--chrome
Sidebar. Near-black in dark mode only.
Accent
--accent
Hover surfaces
Surface
Background
--background
Card
--card
Muted
--muted
Border
--border
Text
Foreground
--foreground
Muted foreground
--muted-foreground
Semantic
Success
--success
Warning
--warning
Destructive
--destructive
Typography Scale
Inter for UI text, IBM Plex Mono for code/identifiers — both via next/font.
text-4xlThe quick brown fox
text-3xlThe quick brown fox
text-2xlCard title
text-lgPrimary body text — Inter, default weight.
text-baseSecondary body text, captions, helper text.
text-smFine print, badge labels, timestamps.
font-mono text-basesrc/data/apps.ts
Spacing Scale
Tailwind's default 4px-based scale — no custom overrides.
4px
8px
12px
16px
24px
32px
48px
64px
Signature Components
Live components, not screenshots — what you see is what ships. Source in src/components/ui.
Buttons
Badges
DefaultSecondaryOutlineDestructiveSuccess (Live)Warning (Foundation)Ghost (Placeholder)
Card
Issues
Discrepancy Reports, Waivers, Deviations.
Foundation
Forms & Inputs
Tabs
Engineering-owned lane.
Table
| App | Status |
|---|---|
| Issues | Live |
| Access & Permissions | Foundation |
| Product Data | Placeholder |
Avatar
JK