Resources

Methodology

The principles behind the URBS Design System, distilled. Each one is the answer to a real trade-off encountered while shipping. The full reasoning lives in METHODOLOGY.md on GitHub.

  1. 01

    Three-layer tokens

    Primitive (raw hex) → Semantic (meaning aliases) → Component (role-based). Components consume semantic / component tokens only, never primitives. One swap of a paint changes one token line, not N components.

  2. 02

    Kiosk-truth

    The shipped totem is the source of truth. The DS website renders previews inside `[data-preview-stage]` containers that reset CSS variables back to the kiosk’s primitive values, even when the docs theme shifts colours for AA. What you see in the preview is exactly what ships.

  3. 03

    AA exceptions, documented

    Brand green #2ECE78 measures 2.05:1 on light backgrounds, below WCAG AA (4.5:1). Used only for non-text affordances (CTA fills, success glyphs) where contrast carries via fill colour + stroke + label. The exception is explicit, not silent.

  4. 04

    Two surfaces, one system

    Light (most screens) and dark (ScreenSaver / ExitRemoveCard / split-panel right side) are first-class citizens. Every component renders 1:1 on both. The dark-overlay pattern (rgba navy 98%) is solid, not mix-blend, so framer-motion stacking contexts don’t break it.

  5. 05

    Sync over duplicate

    Tokens are declared once in the DS’s `tokens.css` and copied into the app via `npm run sync-tokens`. The app’s `@theme inline` block references the same vars. No drift, no two-source-of-truth.