Orc Design System

How it works

The design system is the single source of truth for Orc's visual identity: a 16-color semantic swamp palette, type and motion rules, day/night theming, and a small set of standards-based Web Components. Everything ships as plain CSS, a stable JSON token schema, and custom elements registered via defineOrcElements(), so any framework, or none, can consume the same identity without copying hex values around. Consumers read semantic --orc-* roles rather than raw colors, so the palette can evolve in one place.

Specifics

• 16-color semantic palette with fixed meanings for green, yellow, red, orange, purple, and cyan
• Ten Web Components including orc-button, orc-dialog, orc-tabs, and orc-theme-toggle
• Automatic system-preference theming with a preflight script that avoids first-paint flash
• Stable { day, night } JSON token schema for non-CSS consumers
• consumer:proof builds a real Vite consumer against the packaged output before release