Design System Notes (v0)

1) Design principles

1. Scan first, inspect second.
2. Dense data is OK if hierarchy is brutal and consistent.
3. Motion as feedback only.
4. Defaults should feel “engineered”, not “decorated”.

2) Typography

• Headlines: serif (editorial, intentional)
• Data + labels: monospace (instrument panel)
• Body: neutral sans (readability)

3) Layout

• Left rail nav + top status strip (“pulse”)
• Primary canvas has:
• list/table on left
• inspector panel on right (resizable)
• Avoid deep modal stacks; prefer side panels.

4) Component inventory (must exist)

• AppShell (nav, top pulse, content)
• MetricTile (sparkline optional)
• DataTable (virtualized optional; sortable/filterable)
• TimelineScrubber
• InspectorPanel
• PolicyDiff (before/after)
• ApprovalCard (context-rich)
• EmptyState (opinionated)
• Toast (minimal)

5) Token philosophy

Use CSS variables for: - surfaces (bg layers) - borders - text levels - “signal” accents (one accent, used sparingly)