Skip to content
Ordermatic Docs

Ordermatic Design System

The coded source of truth for Ordermatic’s UI. Tokens, components, and brand rules live in @repo/ui and render here as live examples.

What’s here

Section titled “What’s here”
  • Foundations — Color (every token, generated from source) and Motion.
  • Components — Button, Card, Status badge. Each page has live examples, props, states, and a11y notes.

Brand rules (enforced everywhere)

Section titled “Brand rules (enforced everywhere)”
  • Surfaces are dark (#0D111A / #1D2228) or paper (#F0F0ED). No gradients except photo protection.
  • Orange #FD5C01 is ~2% of any layout — primary CTAs and one accent only.
  • Sentence case for UI. ALL-CAPS 0.10em eyebrows only. No Title Case, no emoji, no ”!”.
  • The patch radius (13% 13% 13% 0) is reserved for the patch metaphor, not generic cards.
  • No backdrop-blur / glassmorphism / neumorphism / inner shadows. Status red #9B1D1D / green #1F5F33 are system-only, never brand expression.
  • Motion: orange darkens on hover/press — no scale, no bounce. Easing cubic-bezier(0.2,0,0,1), 120–360ms.

Substitutions (from the handoff)

Section titled “Substitutions (from the handoff)”

Stack Sans → Inter · wordmark → Oswald PNG · icons → Heroicons (the handoff spec said Lucide; we kept Heroicons — see DECISIONS.md in packages/ui) · app kit best-effort.

Status

Section titled “Status”

Vertical slice — tokens + Button, Card, Status badge — is complete (states, a11y, tests). The rest of @repo/ui and the app screens migrate onto --om-* in waves; see packages/ui/TOKEN-MAPPING.md.