Enforce design-system invariants for frontend UI

Design system provides the mechanical implementation invariants for frontend design - token architecture, typography hierarchy, loading order, font-pop-in prevention, chrome stability, motion timing, and color semantics - while aesthetic direction itself lives in a separate design-thinking skill. Token architecture maps every color to a small set of primitives (foreground text hierarchy, background surface elevation, border separation hierarchy, brand identity and accent, and semantic destructive, warning, success, and info) used in code as CSS variables or theme objects, never hardcoded hex. Typography assigns weight and letter-spacing by role - heavier and tighter for headlines, comfortable weight for body, medium weight for labels and UI, and monospace with tabular-nums reserved for real aligned data such as IDs and timestamps rather than sprinkled on decorative microtext for a "technical" look. Loading order prioritizes only the above-the-fold set - hero text, hero image or video, brand mark: self-hosted WOFF2 fonts preloaded for first-viewport weights, fetchpriority="high" plus preload on the LCP image, loading="lazy" decoding="async" and reserved aspect-ratio space below the fold, and a minimal render-blocking head with critical CSS inlined. Font pop-in (FOUT) is treated as an absolute rule for any text the user watches load: font-display: swap is banned for titles, wordmarks, and hero copy because it visibly paints a fallback then reflows; instead the design gates visibility behind document.fonts.ready with a safety timeout (about 2.5s) so a font failure can never leave text permanently hidden. Persistent chrome - headers, nav, toolbars, status regions - must hold a constant height regardless of the text inside it, via a fixed container height plus white-space: nowrap; overflow: hidden; text-overflow: ellipsis so transient status copy truncates instead of wrapping and shoving adjacent controls. Motion defaults to about 150ms for micro-interactions and 200-250ms for larger transitions with ease-out, honoring prefers-reduced-motion on public or multi-user projects, with a separate choreography reference for anything beyond a single micro-interaction. Scroll-driven narrative content should prefer a pinned-graphic scrollytelling pattern, one IntersectionObserver with rootMargin: '-48% 0px -48% 0px', over click-interactive widgets, but stays fully interactive for dashboards, tools, and forms the user operates rather than reads. Nested rounded corners should keep the child radius less than or equal to the parent's, ideally concentric (child_radius = parent_radius - gap). Color should come from the product's own domain rather than be applied on top, use APCA for perceptual contrast decisions while keeping WCAG 2 (4.5:1 / 3:1) as the compliance floor that layout-audit.js gates on, and interactive states (:hover, :active, :focus) must gain contrast rather than lose it.

Use it together with the separate design-thinking skill (aesthetic direction) whenever implementing UI - components, pages, or design systems - so that every color, type, and motion choice traces back to these mechanical rules. It explicitly hands off spatial composition - grid systems, the 8-point spacing scale, visual-weight balance, alignment, and the render-then-critique loop - to the sibling design-spatial skill rather than covering it here; load that one when composing pages, dashboards, or components. Scroll-driven narrative graphics are for narration where the author controls the order, not for anything the user operates - dashboards, tools, and forms should stay fully click-interactive.

Governs concrete implementation choices rather than producing a deliverable of its own: font-loading markup (<link rel="preload" as="font" type="font/woff2" crossorigin>), a fonts-pending/fonts-ready class toggle driven by document.fonts.ready and document.fonts.load(...), image and video attributes (fetchpriority, loading, decoding, preload, aspect-ratio), a documented table of "ugly intermediate state" symptoms and fixes - stacked annotation labels, empty WebGL canvas frames, layout-jumping lazy images, video posters that pop, 3D models appearing mid-screen, worse-than-nothing Suspense fallbacks - and CSS rules for chrome stability and nested radii. A worked example: an AR product-research page toggles fonts-pending to fonts-ready (titles fade in on fonts.ready, 2.5s fallback), preloads the four above-the-fold WOFF2 weights, and self-hosts the brand face to avoid a Google Fonts round-trip.

Cross-references two sibling skills in the same toolkit rather than duplicating their content: design-spatial for grid systems, spacing scale, balance, alignment, and the render-and-critique loop, and a separate references/motion-choreography.md reference for anything beyond a single micro-interaction, covering duration tables, navigation-type-specific styling, and compositor-only animation properties. Contrast decisions reference APCA (apcacontrast.com) for perceptual judgment and WCAG 2 as the compliance floor enforced by design-spatial's layout-audit.js gate.

Anyone implementing a frontend design system or UI components who wants a fixed set of mechanical invariants - tokens, type roles, loading priority, anti-FOUT rules, chrome stability, motion timing, and color semantics - to apply consistently, leaving the aesthetic direction itself to a separate design-thinking process.