Standard 01 · UDSP v1.1

Unit Design System

The visual contract for every Unit module. Tokens for color, typography, spacing, and elevation — sourced once and reused everywhere. No raw hex outside :root.

Authority

Binding markdown

The binding source is 01-STANDARDS/UNIT-DESIGN-SYSTEM.md (UDSP v1.1). This page is the practical-layer companion.

Coverage

What UDSP defines

Color

Semantic + primitive tokens

  • Primitive palette: purple, blue, teal, neutral, error
  • Semantic mapping: primary, success, info, error
  • Surface, border, ink scales
  • Tinted surfaces (info / success / primary)
Typography

Display / title / body / meta scale

  • Display sizes for hero numerals
  • Title / body / meta hierarchy
  • Tabular numerics for amounts
  • Letter-spacing per scale tier
Spacing

Closed s-scale

  • s4 through s32 (no arbitrary px)
  • Used uniformly across padding, margin, gaps
  • Inline pixel constants forbidden
Elevation

Shadow tokens

  • Card / pop / focus-ring / CTA shadows
  • Anchor-based, neutral hue (no colored shadows)
  • One gradient (UDSP §2.4) — primary only
Rules

How tokens are applied

✓
Import from design-system/tokens in TSX. Reference var(--color-*) in CSS.
✓
Each token has exactly one role. Reusing --color-info as a generic blue is a violation.
✓
Error states use the closed inline-tag set (UDSP §2.9). Body text never red.
✓
Cancel is neutral (UDSP §9.1). No red Cancel buttons.
Forbidden: raw hex values outside the :root token block, Tailwind color classes, arbitrary px constants, custom shadows. If a token is missing, propose adding it — do not bypass.
Compliance

How this gets checked