Frontend contract container for UI, routing, layout, components, accessibility, and design-system rules.

Sections

• Frontend: UI, routing, layout, components, accessibility
• Design system: tokens, typography, spacing, motion, icons

Rules

1. [locked] The auth surface is a single route /login whose create-account (signup) mode IS the register surface — there is no separate /register route. It must implement form states (idle / submitting / success / invalid / auth-error / oauth-pending), redirect when already authenticated, real Google/GitHub OAuth initiation (no inert buttons), and a working forgot-password reset (the link triggers a real flow or is removed — never inert). No mock or disabled auth lanes.
2. [locked] @tabler/icons-react is the ONLY icon source. No other library, no ad-hoc inline <svg> icons, no icon fonts.
3. Icon sizes 16 / 20 / 24 px only; default 20 (sm=16, md=20, lg=24). No other size.
4. Icon stroke 1.75, uniform.
5. Icons use currentColor only — they inherit token-driven text color so day/night is automatic. Hardcoding an icon color (hex/rgb/named) is forbidden.
6. [locked] NARROW, page-scoped exception to icon-library (Jon, id=40): @tabler/icons-react remains the singular icon source everywhere. The existing auth/login page — apps/web/public/login.html (plus an auth welcome page if created) — MAY keep its existing inline multi-path <svg> icon set, AND the Google/GitHub brand marks (no Tabler equivalent). Scoped to those auth pages ONLY — no new ad-hoc inline <svg> icons anywhere else in the repo.

Enforced by

governance/rules/depcruise.cjs (dependency-cruiser) + governance/rules/*.yml (ast-grep) — derived from these rules

• Composition rule (dependency-cruiser) — enforces Page→Section→Component→Primitive leveling and forbids data/routing imports in leaf primitives.
• Component rules (ast-grep, pending) — buttons/forms/tables/overlays must use the shared primitives, not ad-hoc markup.
• Icon import rule — flags any icon import whose module is not @tabler/icons-react (subject to the brand-logo exception once locked).
• Icon size rule — flags a size value that isn't 16 | 20 | 24.
• Icon color rule — flags a color/fill on an icon set to anything but currentColor.
• Token rule (pending) — flags hardcoded hex/rgb/px where a token exists.

Open items

• App shell / layout: the required layout every page mounts in — define and lock.
• Navigation & rails: structure of the left rail / nav — define and lock.
• Page states: required loading / empty / error scaffold — define and lock.
• Responsive breakpoints — define and lock.
• Buttons, forms & inputs, data tables, overlays — define the primitive contracts as pages need them.
• Composition leveling — finalize the dependency-cruiser ruleset.
• Accessibility basics — define the a11y floor (labels, focus, contrast).
• Color tokens (day/night): extract the canonical palette from the first migrated page's landing-tokens.css and lock the token set.
• Typography: font families (Geist / Geist Mono / Instrument Serif observed) + size scale — confirm and lock.
• Spacing & radius scale — confirm and lock.
• Elevation/shadow scale — confirm and lock.
• Motion/transition tokens — confirm and lock.