The canonical front-end companion to ASB.
Token-first. Accessibility-native. GPU-compositor-aware.
Every visual decision traceable to a core commitment.
This file IS the specification AND the demonstration.
These five commitments translate ASB's systems architecture into the visual domain. They are the ground from which every CSS category, design pathway, and visual gate grows. Change one and the design system shifts. Accept all five and the front-end architecture is fully determined.
Every visual attribute originates from a CSS custom property. No hardcoded values. No magic numbers. The token system is the single source of truth for color, spacing, typography, elevation, motion, and breakpoints. The design system is self-contained; it ships as CSS, not as a Figma URL. SRC: ASB §I — Sovereign Artifact, applied to visual domain
Every visual system works without JavaScript. Layout, typography, color, spacing, animation — all CSS-native. JS enhances (dark mode toggle, scroll spy, mouse tracking) but never replaces the CSS core. If JS fails, the page is complete: styled, readable, navigable, and beautiful. The CSS is the real UI. SRC: ASB §I — Core-First, applied to presentation layer
Accessibility is not a checklist applied after the design. It is built into the tokens: contrast ratios are guaranteed by the color system, focus indicators are part of the reset, reduced-motion is the first animation query, and the DOM structure is semantic before it is styled. WCAG 2.1 AA is the floor, not the ceiling. SRC: ASB §I — Offline-Primary, extended: accessibility must work without JS, network, or assistive tech assumptions
The user controls their experience: system preference detection for dark/light, respect for prefers-reduced-motion, prefers-contrast, forced-colors, and viewport/zoom preferences. The design adapts to the user — the user does not adapt to the design. No animation that cannot be disabled. No color scheme that overrides system preference without explicit user choice. SRC: ASB §I — User Sovereignty, applied to visual preferences
The browser's hardware compositor is treated as a parallel GPU pipeline. will-change, transform, opacity, and backdrop-filter are promoted to compositor layers for independent frame rates. UI overlays (modals, toasts, tooltips, navigation) render at 120fps on the compositor while content renders at its natural rate. CSS effects are shaders for free. SRC: ASB §I — Browser-as-OS; Pathway ⑨ — CSS Compositor Pipeline
ASB and this Design Systems Blueprint form a matched pair. They are architecturally isomorphic — same structure, same tier system, same gate philosophy — applied to different domains:
| Dimension | ASB | Design Systems Blueprint |
|---|---|---|
| Domain | Systems architecture, computation, state, persistence, cross-process | Visual architecture, CSS, layout, typography, animation, interaction |
| Layer 0 | 46-category software foundation | 24-category CSS foundation |
| Layers 1–3 | 19 derived pathways (computation, state, AI, mesh) | 6 derived pathways (visual systems, adaptive systems, design-to-code) |
| Layer 4 | Sovereign Mesh Kernel Protocol | Design System Ecosystem & Handoff |
| Green Gates | 5 gates: foundation, core systems, cross-process, reality bridge, sovereign integrity | 5 gates: token compliance, accessibility, compositor budget, theme parity, visual regression |
| Economic Model | 3-lane: free files, one-time licenses, infrastructure subscriptions | Open-source design system, premium component libraries, design tooling |
Where ASB answers "How does the software work?" this blueprint answers "How does the software look, feel, and respond?" Together they form the complete architectural specification for sovereign software. SRC: ASB v2.0 §0; §III Categories 00–23
The 6 design pathways of Layers 1–3 are the necessary visual consequence of holding all five design commitments simultaneously. Each pathway is the only answer to the question posed by the commitments together.
The Derivation Chain (Visual Domain):
The DCA ecosystem uses a unified token architecture. Every BBS property that adopts this spec uses the same :root block. The tokens are organized into seven domains: surface ladder, border hierarchy, text hierarchy, accent + semantic colors, spacing scale, radii, and motion language. The system is dark-first with complete light-theme parity.
| Domain | Tokens | Purpose |
|---|---|---|
| Surface Ladder | --bg → --bg-elevated → --card → --card-alt | Four-tier elevation from deepest background to brightest card surface |
| Border Hierarchy | --border · --border-soft · --border-bright | Three-tier border for spatial depth cues at zero rendering cost |
| Text Hierarchy | --fg · --fg-dim · --muted | Three-tier text from primary body copy to subdued metadata |
| Accent + Semantic | --accent · --purple · --green · --orange · --red · --yellow · --gold | One primary accent + six semantic colors, each with a -dim variant |
| Spacing Scale | --space-1 (4px) through --space-24 (96px) | Consistent spatial rhythm across all components |
| Radii | --radius-sm · --radius-md · --radius-lg · --radius-xl · --radius-pill | Consistent corner rounding across all surfaces |
| Motion Language | --transition-fast (0.15s) · --transition-base (0.25s) · --transition-slow (0.5s) · --transition-spring (0.6s) | Apple/Linear physics curves. Tokenized. Consistent. Never hardcoded. |
Specification documents and component libraries throughout the DCA ecosystem were built with an earlier token vocabulary. To preserve those rules while converging on canonical tokens, every legacy token name is defined as an alias that maps to its canonical equivalent.
| Legacy Token | Canonical Token | Usage |
|---|---|---|
--text | --fg | Primary text color |
--text-muted | --fg-dim | Secondary body text |
--text-dim | --muted | Tertiary metadata text |
--surface | --card | Primary card/panel surface |
--surface2 | --card-alt | Alternate card surface |
--border-accent | --border-bright | Highlighted border state |
--accent2 | --accent | Secondary accent variant (converged) |
--shadow | --shadow-card | Default card shadow |
--radius | --radius-lg | Default component radius |
New components must reference canonical tokens directly. The aliases exist for backward compatibility. Over time, as specifications are modernized and component libraries are rebuilt, alias usage will decline toward zero.
The layer below the 24 categories. How the design system itself is governed, versioned, and evolved. The stylesheet is the written record of a visual architecture designed in full before implementation begins.
The CSS file is the compiled expression of a design system architected in full before any component is built — all tokens, all states, all breakpoints, all interaction modes. The 24 categories are the specification of that system, not the system itself. The design system exists in the relationship between tokens, components, patterns, and principles. SRC: ASB v2.0 §I — Meta-Architecture; applied to design domain
The CSS architect is the decision authority before any stylesheet is drafted and the resolution authority when visual specifications encounter unexpected complexity. LLM collaborators are execution partners — specifications → implementation → validation → refinement. AI amplifies implementation speed; it does not replace visual judgment.
Design tokens are the atomic unit of change. Every visual change is a token change. Token changes are versioned, documented, and traceable to a design commitment. A color shift is not a "visual tweak" — it is a token mutation that propagates through every component that references it.
Governance rules:
This design system operates under the principle that CSS capabilities continuously expand and user expectations continuously rise. Container queries, view transitions, scroll-driven animations, and cascade layers are not future work — they are current platform capabilities waiting for architectural integration. The design system is a living standard. SRC: ASB v2.0 §I — Adaptive Architecture
The benchmark is not a finish line. It is a snapshot of a living visual standard. As CSS evolves, the 24 categories evolve to capture new capabilities. The architect's role is to keep the design system current as the platform advances, while maintaining backward compatibility with the existing token structure.
"You are implementing a CSS architecture from this Design Systems Blueprint. Every visual decision must comply with the 24-category foundation. The five design commitments are non-negotiable visual constraints. Apply Deterministic CSS Core: every interactive visual state must have a CSS-only implementation. JavaScript enhances — it does not replace. Reference canonical tokens directly in new components. Pass all applicable Design Green Gates before declaring phase complete. The stylesheet must be a sovereign artifact: zero external dependencies, token-first, WCAG 2.1 AA, GPU-compositor-aware, dark/light parity verified."
SRC: ASB v2.0 §XII — Handoff Protocol; Design Systems Blueprint §I
The non-negotiable visual baseline. Every ASB-compliant front-end inherits these 24 categories. Tiered by scope: CORE = always present. STANDARD = present, exemption requires rationale. PREMIUM = flagship visual parity. OPTIONAL = when demanded.
| Range | Domains | Status |
|---|---|---|
| 00 | Ambient Atmosphere — CSS-only orbs, noise overlays, orbital gradients | PREMIUM |
| 01–04 | Design Tokens, CSS Reset, Accessibility Utilities, Layout System | CORE |
| 05–07 | Animation Keyframes, Typography Scale, Button System | CORE |
| 08–10 | Badge Hierarchy, Sticky Navigation, Floating Rail Nav | STANDARD |
| 11 | Hero System — dot grid, audience router, IDE preview, parallax | PREMIUM |
| 12–21 | About, Case Studies, Services, Philosophy, Employers, Product Spotlight, FAQ, Research, CTA Band, Footer | STANDARD |
| 22–24 | Utility Shell, Print Styles, Security & Polish | CORE |
CSS-only atmospheric effects. No canvas. No WebGL. No JavaScript. Pure CSS orbs, gradients, and noise overlays that create depth and visual interest without performance cost. PREMIUM ASB Cat 00
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 00.1 | Orbital Gradients | Radial gradients positioned off-viewport creating soft glow pools. radial-gradient(ellipse X% Y% at X% Y%, color, transparent). At least 2 overlapping orbs. Pure CSS — no canvas, no WebGL, no JS. | PREMIUM |
| 00.2 | SVG Noise Overlay | <svg><filter><feTurbulence type="fractalNoise"> applied as background-image with mix-blend-mode: overlay and low opacity (0.015–0.04). Creates film-grain texture at zero runtime cost. | PREMIUM |
| 00.3 | CSS-Only Animation | Orb position animation via @keyframes with large durations (20–40s), subtle movement only. No JS timers. Reduced-motion: orbs become static. No position animation. | PREMIUM |
| 00.4 | Mobile Degradation | Reduce orb count on mobile (1 orb vs 2–3 on desktop). Noise overlay preserved — it costs nothing across viewport sizes. Reduced-motion: all orbital movement disabled. Static gradients only. | STANDARD |
| 00.5 | Z-Index Containment | All atmospheric elements at z-index: 0 with pointer-events: none. Must not interfere with content interaction. Must sit behind all content layers. | CORE |
CSS custom properties as the single source of visual truth. Every color, spacing unit, radius, shadow, font, and easing curve originates from a token. No hardcoded values anywhere in the stylesheet. CORE ASB Cat 01
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 01.1 | Custom Property Namespace | All tokens defined in :root. Naming: --category-property-variant. Examples: --bg, --card, --fg, --accent, --radius, --shadow. No vendor prefix in token names. | CORE |
| 01.2 | Color Tokens | Semantic color tokens: --bg, --bg-elevated, --card, --card-alt, --border (×3: default, soft, bright), --fg (×3: primary, dim, muted), --accent (×2: base + dim/glow), --green, --purple, --orange, --red, --yellow. The three-level border hierarchy (--border, --border-soft, --border-bright) enables spatial depth cues at zero cost. Minimum: 20 color tokens. | CORE |
| 01.3 | Dark-First, Light-Parity | Tokens defined for dark theme in :root. Light overrides in [data-theme="light"]. Every token must have a light variant. No "dark-only" or "light-only" tokens. | CORE |
| 01.4 | Fluid Typography | Font-size tokens use clamp() for fluid scaling. Heading tokens: clamp(min, vw, max). Body token: fixed rem base. Monospace token: system mono stack. | CORE |
| 01.5 | Spacing & Elevation Scale | Consistent spacing scale via tokens: --space-1 through --space-24 (4px–96px). Radius tokens: --radius-sm (6px), --radius-md (10px), --radius-lg (16px), --radius-xl (20px), --radius-pill (999px). Shadow tokens: multi-layered diffused shadows — --shadow-card (resting), --shadow-float (elevated), --shadow-hover (lifted + accent glow). Each shadow token is a compound value: 3–4 stacked box-shadow layers creating realistic depth. Not single-drop-shadow approximations. | CORE |
| 01.6 | Easing Curves — Apple/Linear Physics | Animation easing tokens using Apple/Linear custom physics curves. --transition-fast: 0.15s cubic-bezier(0.32, 0.72, 0, 1). --transition-base: 0.25s same curve. --transition-slow: 0.5s same curve. --transition-spring: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15) for bouncy reveals. Tokenized and consistent — never hardcoded. | CORE |
| 01.7 | Font Stack Tokens | --font-sans: system-ui stack with font-feature-settings: 'kern' 1, 'liga' 1 for kerning and ligature optimization. --font-mono: ui-monospace stack. Body: letter-spacing: -0.01em for tightened rendering. No external font dependencies. System fonts only for zero-dependency sovereignty. | CORE |
| 01.8 | FOUC Prevention Token | Flash of Unstyled Content prevention pattern: html { visibility: hidden; } at stylesheet start, then html[data-theme], html.ready { visibility: visible; } after theme tokens are applied. The .ready class is added via blocking script in <head> after theme resolution. ASB Cat 37.6 | CORE |
Cross-browser normalization. Zeroes margins/padding, sets box-sizing, establishes scroll behavior, text rendering, selection styling, scrollbar styling, and global focus-visible. CORE ASB Cat 02
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 02.1 | Box-Sizing Reset | *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}. Universal. Non-negotiable. Prevents the single most common CSS bug across all browsers. | CORE |
| 02.2 | Scroll Behavior | html{scroll-behavior:smooth}. Disabled in prefers-reduced-motion. Smooth scrolling is a progressive enhancement — not a requirement. | CORE |
| 02.3 | Text Size Adjust | -webkit-text-size-adjust:100%; text-size-adjust:100%. Prevents iOS Safari from inflating text on orientation change. Both prefixed and standard. | CORE |
| 02.4 | Overflow-X Hidden | body{overflow-x:hidden}. Prevents horizontal scrollbar from atmospheric elements. Tested: does not interfere with sticky positioning or viewport units. Pairs with html, body { max-width: 100vw; position: relative; box-sizing: border-box; } for complete horizontal overflow containment. | CORE |
| 02.4a | Scroll Padding for Fixed Headers | html { scroll-padding-top: NAV_HEIGHT + BUFFER; }. Set to sticky navigation height plus breathing room (~80px typical). Prevents anchor-targeted sections from being obscured by the fixed/sticky header. CSS-only — no JS scroll offset required for in-page navigation. | CORE |
| 02.5 | Font Smoothing | -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale. Standard antialiasing for all text. Non-negotiable for visual quality. | CORE |
| 02.6 | Text Rendering | text-rendering:optimizeLegibility. Enables kerning and ligatures. Small performance cost, large readability gain. Acceptable trade-off. | CORE |
| 02.7 | Selection Styling | ::selection{background:var(--accent-dim);color:var(--fg)}. High-contrast selection. Token-based — adapts to theme automatically. | CORE |
| 02.8 | Scrollbar Styling | Webkit scrollbar: 8px width, track matches --bg, thumb matches --border-bright. Firefox: scrollbar-width:thin; scrollbar-color: var(--border) transparent. Both browsers covered. | CORE |
| 02.9 | Global Focus-Visible | :focus-visible{outline:2px solid var(--accent);outline-offset:2px}. Visible, high-contrast focus ring. Must pass WCAG 2.4.7 (Focus Visible). | CORE |
Screen-reader-only content, skip links, focus management, forced-colors support, ARIA landmark enforcement, and reduced-motion handling. Accessibility is not a layer — it is woven into every category. This category provides the utility classes that make it explicit. CORE ASB Cat 03
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 03.1 | Screen-Reader-Only | .sr-only: clip-rect, 1px dimensions, hidden overflow, absolute position. Content visible to screen readers, invisible visually. Must not break layout flow. | CORE |
| 03.2 | Skip Link | Skip-to-main-content link. Positioned off-screen (top:-40px), slides in on focus. Must be first focusable element. Must have href="#main-content". | CORE |
| 03.3 | Focus-Visible Global | Already covered in Category 02.9. Re-referenced here for accessibility audit completeness. All interactive elements must show visible focus indicator. | CORE |
| 03.4 | Forced Colors | All UI visible in Windows High Contrast Mode. Test: forced-colors:active. Borders, icons, text must remain visible. No color-only information conveyance. | CORE |
| 03.5 | ARIA Landmarks | Semantic HTML elements with appropriate ARIA roles: <header role="banner">, <main role="main">, <footer>, <nav>. All sections labeled via aria-labelledby. | CORE |
| 03.6 | Live Regions | Dynamic content containers use aria-live="polite" or aria-live="assertive". Toast container: aria-live="polite" aria-atomic="true". Offline indicator: role="status". | CORE |
| 03.7 | Reduced Motion | @media (prefers-reduced-motion:reduce) disables ALL animations, transitions, and scroll-behavior. Animation duration forced to 0.01ms. Iteration count forced to 1. Must be in every stylesheet. | CORE |
| 03.8 | Modal Accessibility — Full Specification | Modal containers: role="dialog", aria-modal="true", aria-labelledby referencing modal title. Focus trap: on open, focus moves to first focusable element. Tab cycles through all focusable elements within modal. Shift+Tab reverses. When Tab is pressed on the last focusable element, focus wraps to the first. Escape closes modal. Click on backdrop closes modal. Focus restoration: on close, focus returns to trigger element. Body scroll lock: document.body.style.overflow = 'hidden' while open. Animation: spring/scale entrance (0.3s), fade exit (0.2s). Respects reduced-motion (instant). | CORE |
Container constraints, section spacing, responsive grid, and flexbox utilities. The layout system ensures consistent horizontal rhythm across all sections without dictating internal component layout. CORE ASB Cat 04
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 04.1 | Content Container | .content{max-width:1040px;margin:0 auto;padding:0 28px 80px}. Fixed max-width. Auto margins for centering. Responsive padding that narrows on mobile. | CORE |
| 04.2 | Section Spacing | .sect{margin-top:56px}. Consistent vertical rhythm between major sections. Section header with bottom border separator. | CORE |
| 04.3 | Responsive Grid | Auto-fit grids: grid-template-columns:repeat(auto-fit,minmax(260px,1fr)). Cards flow naturally. No media queries needed for column count. Orphan prevention. | CORE |
| 04.4 | Flexbox Utilities | Common flex patterns: display:flex;flex-wrap:wrap;gap:Xpx for badge lists, tag groups, action rows, meta strips. No dedicated grid framework — native CSS Grid and Flexbox only. | CORE |
| 04.5 | Mobile Breakpoints | Single major breakpoint at 700px. Content padding narrows to 18px. Grids collapse to single column. Font sizes reduce. Navigation adapts. No multi-breakpoint complexity. | CORE |
| 04.6 | Scroll Offset for Fixed Navigation | html { scroll-padding-top: NAV_HEIGHT + BUFFER; } applied to <html>. Ensures anchor-linked sections scroll to a position below the sticky navigation bar rather than being partially obscured by it. Buffer (~16px) provides visual breathing room. This is a CSS-only solution. | CORE |
Reusable animation keyframes for UI micro-interactions. CSS-only. No JavaScript animation libraries. Every animation respects reduced-motion and uses compositor-friendly properties (transform, opacity) exclusively. CORE ASB Cat 05
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 05.1 | fadeInUp | Entrance animation: translateY(20px) + opacity(0) → translateY(0) + opacity(1). Used for cards, sections, content blocks. Spring curve on reveal. | CORE |
| 05.2 | shimmer | Loading skeleton animation: horizontal gradient sweep across surface. background-position shift via keyframes. GPU-composited. No JS. | CORE |
| 05.3 | gradientFlow | Animated gradient text: background-size:200% + background-position shift. Applied to headings, accent text. Pure CSS. | STANDARD |
| 05.4 | pulseGlow | Attention pulse: box-shadow opacity oscillation. Used for status indicators, new badges, live dots. will-change:box-shadow for compositor promotion. | STANDARD |
| 05.5 | spin | Loading spinner: 360° rotation via transform:rotate(). Infinite, linear. will-change:transform. Compositor-only — never touches layout or paint. | CORE |
| 05.6 | toastSlideIn + toastProgress | Toast notification: slide in from right + progress bar countdown animation. Slide uses transform:translateX. Progress uses width animation (acceptable — toast is temporary). | STANDARD |
| 05.7 | Scroll Reveal — Basic | IntersectionObserver + CSS class toggle. Elements gain .visible class when entering viewport. CSS transition on transform:translateY(24px) + opacity. JS only adds class — animation is pure CSS. STANDARD tier. | STANDARD |
| 05.7b | Scroll Reveal — Silicon Valley Blur-In (Premium) | Enhanced entrance animation: translateY(40px) scale(0.985) + filter:blur(2px) → fully visible. Uses cubic-bezier(0.16, 1, 0.3, 1) spring curve over 0.8s. will-change: opacity, transform, filter for compositor promotion. The blur clears and the element scales into place simultaneously — creating a "focus-pull" effect. PREMIUM tier. | PREMIUM |
| 05.8 | Stagger Delay | Two implementation tiers: STANDARD: Child elements receive incremental transition-delay via nth-child in CSS. Cascade entrance effect. Pure CSS. PREMIUM: Elements carry data-delay attributes (slot identifiers). CSS maps each slot to a staggered transition-delay. JS assigns attributes based on DOM position. Decouples delay logic from document order. | STANDARD / PREMIUM |
Fluid, responsive type system using clamp(). Headings, body, monospace, and utility text sizes. Line-height tightening for headings. Letter-spacing for legibility. Text-wrap for balanced rendering. CORE ASB Cat 06
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 06.1 | Fluid Headings | All headings use clamp(min, vw, max). Example: font-size:clamp(28px,5vw,40px) for h1. Scales smoothly between mobile and desktop without breakpoints. | CORE |
| 06.2 | Line-Height Tightening | Headings: line-height:1.15. Body: line-height:1.7. Smaller text gets tighter line-height. Larger text gets proportionally tighter. | CORE |
| 06.3 | Letter-Spacing | Headings: letter-spacing:-0.02em (tight, modern). Labels: letter-spacing:0.08em (expanded, legible uppercase). Body: default. Negative tracking only on large display text. | CORE |
| 06.4 | Text-Wrap | Headings: text-wrap:balance. Body: text-wrap:pretty. Prevents orphans and ragged lines. Progressive enhancement — degrades to normal wrap on older browsers. | STANDARD |
| 06.5 | Monospace Stack | Code blocks, flow diagrams, pre elements use --font-mono token. ui-monospace, 'SFMono-Regular', 'SF Mono', 'Consolas', monospace. System fonts only. | CORE |
| 06.6 | Gradient Text | Headings with background:linear-gradient(...); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text. Fallback: solid color when background-clip unsupported. | STANDARD |
| 06.7 | Body Font Size | font-size:15px base. Never below 14px. Line-height 1.7 for readability. Antialiased. OptimizeLegibility. System font stack. | CORE |
Tactile button physics with rim-highlight glow, hover lift, active press, and disabled state. Variants for primary, accent, and ghost. Sizes for standard and compact contexts. CORE ASB Cat 07
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 07.1 | Variant System | Primary: filled accent background + light text. Accent: filled purple background + light text. Green: filled green background + light text (for purchase/conversion CTAs). Ghost: transparent, border on hover. Minimum 4 variants. Each filled variant uses the Apple/Vercel top-rim highlight: inset 0 1px 0 rgba(255,255,255,0.2) for tactile dimensionality. | CORE |
| 07.2 | Size Variants | Small (compact CTAs, inline actions). Standard (default). Large (hero CTAs, primary conversion). Padding and font-size scale proportionally. | CORE |
| 07.3 | Hover Physics | Hover: transform:translateY(-1px). Subtle lift. Rim glow via inset box-shadow or border-color transition. Apple/Vercel-style top-rim highlight on filled buttons. | PREMIUM |
| 07.4 | Active Press | Active: transform:scale(0.96). Tactile press-down feedback. 40ms transition for snappy response. Must feel immediate. | CORE |
| 07.5 | Disabled State | Reduced opacity (0.5–0.6). cursor:not-allowed. No hover effects. No transform. No pointer events on disabled buttons within forms. | CORE |
| 07.6 | Touch Target | Minimum 44×44px touch target (WCAG 2.5.5). Padding ensures target size even on compact buttons. touch-action:manipulation for no double-tap zoom delay. | CORE |
| 07.7 | User Select | user-select:none on all buttons. Prevents text selection during rapid clicking. Standard for interactive controls. | CORE |
| 07.8 | Focus Ring | Inherits global :focus-visible from Category 02.9. Additional: subtle ring offset for button-specific context. Must pass contrast check against all button backgrounds. | CORE |
| 07.9 | Form Controls — Input & Textarea | Form elements share the interactive control foundation: • Base: padding: var(--space-3) var(--space-4), background: var(--card-alt), border: 1px solid var(--border), border-radius: var(--radius-sm), color: var(--fg), font: inherit • Focus: outline: none; border-color: var(--accent) • Placeholder: color: var(--muted) • Labels: font-size: 0.8125rem; font-weight: 600; color: var(--fg-dim) • Group: Flex-column container with gap: var(--space-2) between label and input • Submit button: Inherits all button system properties (07.1–07.8). Includes loading spinner state. • No-JS fallback: <noscript> block with direct email link when form JS is unavailable • Honeypot: Hidden field with position: absolute; opacity: 0; height: 0 | CORE |
Semantic badge system for status, tier, availability, and version communication. Color-coded with consistent padding, radius, and typography. STANDARD ASB Cat 08
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 08.1 | Semantic Variants | Shipped/Production (green). Pro/Premium (gold). OSS/Open Source (blue). Available (green dot + pulse). Coming Soon (muted, dashed border). Flagship (accent + glow). Minimum 6 semantic variants. | STANDARD |
| 08.2 | Pulse Dot | Live/available badge includes ::before pseudo-element dot with pulseGlow animation. 6px circle, accent color, infinite pulse. Reduces to static dot in reduced-motion. | STANDARD |
| 08.3 | Tier Badges | CORE (accent), STANDARD (fg-dim), PREMIUM (gold), OPTIONAL (muted). Used throughout architectural documentation and product specification. | STANDARD |
| 08.4 | Badge Layout | Inline-flex container. 2–8px padding. 3–4px border-radius. 10px font-size. 600 weight. Uppercase for labels. No text-transform for proper nouns. | CORE |
Sticky top navigation with backdrop-filter blur, scroll-state detection, and mobile hamburger menu with ARIA. CORE ASB Cat 09
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 09.1 | Sticky Position | position:sticky;top:0;z-index:900. Must stay at viewport top during scroll. Must not jump or flicker on scroll start. | CORE |
| 09.2 | Backdrop Blur | backdrop-filter:blur(12px) saturate(180%). Frosted glass effect. Content behind nav is softly blurred. GPU-composited — near-zero performance cost. -webkit-backdrop-filter for Safari. | CORE |
| 09.3 | Scroll State | JS adds .scrolled class when scroll position > 0. CSS: border-bottom appears, shadow deepens. Transition: 200ms. Pure visual enhancement — nav works without it. | STANDARD |
| 09.4 | Mobile Hamburger | Hamburger icon at mobile breakpoint. aria-expanded toggles. Menu slides in from right via transform:translateX. Body overflow locked when open. Backdrop overlay. | CORE |
| 09.5 | Logo + Links | Logo/wordmark left. Nav links center or right. Theme toggle right. Consistent spacing. Active page indicator. All links keyboard-accessible. | CORE |
Fixed-position right-side section-spy dot navigation. Active section dot glows. Label appears on hover. Hidden below tablet breakpoint. STANDARD ASB Cat 10
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 10.1 | Fixed Position | Fixed to right viewport edge. Vertically centered. z-index:800. Hidden on mobile (display:none below tablet). No interference with content. | STANDARD |
| 10.2 | Scroll Spy | IntersectionObserver monitors section visibility. Active dot updates via JS .active class. CSS: active dot has glow (box-shadow + accent background). | STANDARD |
| 10.3 | Hover Label | On dot hover, section label fades in adjacent to dot. opacity transition. Pure CSS :hover + sibling selector. No JS for hover state. | STANDARD |
| 10.4 | Smooth Scroll | Click triggers scrollIntoView({behavior:'smooth'}) with offset for sticky nav height. Respects reduced-motion (instant scroll). | STANDARD |
Dot grid background pattern, audience router cards, 3D perspective tilt, trust strip, IDE preview window with Chrome dots, parallax on mouse move. PREMIUM ASB Cat 11
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 11.1 | Dot Grid Background | CSS radial-gradient(circle,color 1px,transparent 1px) repeating pattern. Subtle. Non-distracting. Pure CSS — no SVG, no canvas. | PREMIUM |
| 11.2 | Audience Router Cards | 3–4 cards for different user segments. Each with icon, title, description, CTA. Horizontal layout on desktop, stack on mobile. | PREMIUM |
| 11.3 | 3D Perspective Tilt | Cards respond to mouse position with transform:perspective(800px) rotateX() rotateY(). JS calculates rotation from cursor offset. CSS transition for return to neutral. Reduced-motion: disabled. | PREMIUM |
| 11.4 | Trust Strip | Horizontal row of logos/certifications/guarantees. Subtle. Above the fold. Grayscale or muted until hover. Conveys credibility without words. | STANDARD |
| 11.5 | IDE Preview Window | Mock browser/IDE chrome: traffic light dots (red, yellow, green), title bar, code-like content area. Visual metaphor for developer tools. Dark theme with subtle border. | PREMIUM |
| 11.5a | Syntax Highlighting Classes | Five semantic classes for code display: .code-comment (italic, muted), .code-keyword (warm red/orange), .code-var (blue), .code-string (light blue), .code-prop (purple/pink). Each has dark-theme and [data-theme="light"] override. These colors are hardcoded hex values — not token-based — because syntax highlighting must remain visually stable independent of the design token system. | PREMIUM |
| 11.6 | Parallax on Mouse Move | Preview window shifts opposite to cursor direction. Subtle effect (5–10px max). transform:translate() updated via JS mousemove. Passive listener. Disabled on mobile (no hover). | PREMIUM |
Two-column grid: photo with accent ring treatment + text with badge stack. Responsive stacking. STANDARD ASB Cat 12
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 12.1 | Two-Column Grid | Photo column (left) + text column (right). grid-template-columns:auto 1fr or similar. Stacks to single column on mobile (photo top, text below). | STANDARD |
| 12.2 | Photo Treatment | Rounded image with accent border ring. On hover: ring expands or changes color. Subtle transition. border:2px solid var(--accent) with border-radius:50% or rounded. | STANDARD |
| 12.3 | Badge Stack | Skill/role badges below bio text. Semantic badge variants from Category 08. Flexbox wrap layout with consistent gap. | STANDARD |
Mouse-tracking glow effect via CSS custom properties, gradient borders via mask-composite, 3D tilt physics, badge hierarchy, and meta strip. PREMIUM ASB Cat 13
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 13.1 | Mouse-Tracking Glow | CSS custom properties (--mouse-x, --mouse-y) updated via JS mousemove. radial-gradient follows cursor position on card. Compositor-only: will-change:background. Pure visual enhancement — card works without it. | PREMIUM |
| 13.2 | Gradient Border — mask-composite Technique | Animated gradient border on flagship cards via ::before pseudo-element with mask-composite: exclude. The pseudo-element fills the card with a linear-gradient (multi-stop: accent → purple → green → accent) with background-size: 300% and animation: gradientFlow 4s ease infinite. The mask excludes the inner area, leaving only the border visible. -webkit-mask-composite: xor for Safari compatibility. Fallback: solid --border-bright on browsers without mask support. GPU-composited. | PREMIUM |
| 13.3 | Structural Separation | Card scroll container separate from hover detection area. Scroll behavior independent of mouse tracking. No jank when scrolling through card list. | PREMIUM |
| 13.4 | Meta Strip | Bottom section: date, tags, read time, category. Consistent typography (small, muted). Flexbox row with gap. Present on all cards for visual consistency. | STANDARD |
Auto-fit grid of service cards. Flagship card with sub-layout. Specs checklist. Process steps. Evidence badges. Orphan prevention at desktop. STANDARD ASB Cat 14
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 14.1 | Auto-Fit Grid | grid-template-columns:repeat(auto-fit,minmax(300px,1fr)). Cards fill available space. No media queries for column count. Natural wrapping. | STANDARD |
| 14.2 | Flagship Card | One card visually elevated: gradient background (dark: linear-gradient(135deg, var(--card), var(--purple-dim))), purple accent border, and an internal two-column grid — content (left, ~1.5fr) and spec checklist (right, ~1fr) separated by border-left: 1px solid var(--border-bright). Spec items use green checkmarks. On mobile, the internal grid collapses to a single column and the border separator shifts to a top border. Standard cards in the same grid remain single-column. Orphan prevention: at desktop widths where auto-fit would produce 3 columns, constrain to 2 columns to prevent single-card orphan rows. | STANDARD |
| 14.3 | Specs Checklist | Each service card includes feature checklist. Checkmark icons (CSS ::before or inline SVG). Included/not-included items visually distinct. | STANDARD |
| 14.4 | Process Steps | Numbered process flow within relevant cards. Step numbers + descriptions. Vertical list with connecting line or horizontal flow. Consistent with overall typography. | STANDARD |
| 14.5 | Orphan Prevention | 2-col grid at desktop where appropriate. grid-column:span 2 for cards that would otherwise be alone on final row. No single-card rows. | STANDARD |
Principle-driven proof points. Icon + title + definition + proof structure. 3D tilt on hover for tactile engagement. STANDARD ASB Cat 15
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 15.1 | Card Structure | Icon (top), title (bold), definition paragraph, proof point (muted, smaller). Consistent internal spacing. Each card is a self-contained argument. | STANDARD |
| 15.2 | 3D Tilt | Perspective transform on hover (same engine as Hero cards, Category 11.3). Subtle. Respects reduced-motion. Disabled on touch devices. | PREMIUM |
| 15.3 | Icon Treatment | Icon in accent color. May use gradient text if icon is text/emoji. Consistent sizing across cards. Sits above title with adequate whitespace. | STANDARD |
Two-column layout: qualification bullets + CTAs (résumé PDF, LinkedIn, contact). Professional, clean, conversion-oriented. STANDARD ASB Cat 16
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 16.1 | Two-Column Layout | Qualifications (left) + CTAs (right). Stacks on mobile. Consistent with overall layout system (Category 04). | STANDARD |
| 16.2 | Bullet Points | Clean, scannable bullet list. Custom bullet via ::before pseudo-element or list-style. Accent color. Adequate line-height for readability. | STANDARD |
| 16.3 | CTA Buttons | Résumé download, LinkedIn profile, contact button. Button variants from Category 07. Clear visual hierarchy: primary action prominent, secondary actions subtle. | STANDARD |
Flagship product highlight section. Metrics grid, trust strip, CTA buttons (visit + buy). STANDARD ASB Cat 17
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 17.1 | Highlights Grid | Key metrics/features in auto-fit grid. Numbers large and bold. Labels small and muted. 3–6 highlight items. | STANDARD |
| 17.2 | Trust Strip | Reused from Category 11.4 or simplified version. Testimonials, user counts, certifications. Consistent with hero trust strip. | STANDARD |
| 17.3 | CTA Buttons | Visit (primary) + Buy/Pricing (secondary or accent). Button system from Category 07. Clear conversion path without dark patterns. | STANDARD |
Keyboard-navigable accordion with roving focus, chevron rotation, category grouping, and fade-in animation on expand. STANDARD ASB Cat 18
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 18.1 | Category Grouping | FAQs organized by category with uppercase section titles. Visual separation between groups. Consistent with overall typography system. | STANDARD |
| 18.2 | Trigger Button | Each FAQ item has a <button> trigger with aria-expanded. Chevron icon rotates via CSS transform:rotate() on [aria-expanded="true"]. No JS for rotation — pure CSS attribute selector. | CORE |
| 18.3 | Close-All-Siblings | Opening one FAQ closes others in same group. JS manages aria-expanded toggling. CSS handles the visual transition. Accordion behavior, not toggle behavior. | STANDARD |
| 18.4 | Keyboard Navigation | Arrow keys move between items (roving focus). Home/End jump to first/last. Enter/Space toggle current. Full ARIA accordion pattern (WAI-ARIA 3.1). | STANDARD |
| 18.5 | Content Animation | Expanded content uses fadeInUp (Category 05.1). max-height or grid-template-rows transition for smooth expand. Reduced-motion: instant show/hide. | STANDARD |
| 18.6 | Focus-Within Highlight | FAQ item with focused child gets subtle highlight via :focus-within. Helps keyboard users track position. Subtle border or background shift. | STANDARD |
Container for academic papers, implementation guides, architectural essays, and trade publications. Two valid visual states that coexist: Placeholder (dashed border, muted treatment, tag pills, coming-soon badge) and Published (standard case card treatment with "Published" or "Shipped" badge). STANDARD ASB Cat 19
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 19.1 | Dashed Border | border:1px dashed var(--border). Communicates "placeholder" / "forthcoming" without words. Muted color. Distinct from solid-border active cards. | STANDARD |
| 19.2 | Tag Pills | Topic/category tags as small pill badges. Flexbox wrap. Muted color palette. Preview of content without revealing specifics. | STANDARD |
| 19.3 | Coming-Soon Badge | Badge from Category 08 (Coming Soon variant). Positioned prominently. Pulsing dot optional (reduced-motion: static). | STANDARD |
| 19.4 | Published State Transition | When research content is published, the dashed border is replaced with a solid border. The coming-soon badge is replaced with a "Published" or "Shipped" badge. Card treatment follows standard case card patterns from Category 13. The transition is visual only — the HTML structure is identical. Placeholder → published without architectural change. | STANDARD |
Three-path audience routing. Path cards with icons, descriptions, and CTAs. Segments users by intent without dark patterns. STANDARD ASB Cat 20
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 20.1 | Three-Path Layout | 3 cards in a row (desktop) or stack (mobile). Each represents a user segment: "I want to learn", "I want to build", "I want to hire". Equal visual weight. No pre-selected "recommended" dark pattern. | STANDARD |
| 20.2 | Path Cards | Icon + title + one-sentence description + CTA button. Consistent internal spacing. Hover: subtle lift (Category 07.3 physics). Clean, minimal, respectful. | STANDARD |
| 20.3 | Audience Awareness | Cards address user intent, not product features. Language: "I want to..." framing. Empowering, not manipulating. Consistent with User Sovereignty commitment. | STANDARD |
Three-column grid: logo/tagline, navigation columns, social links (8+ platforms). Bottom bar with copyright and attribution. Responsive stacking. STANDARD ASB Cat 21
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 21.1 | Three-Column Grid | Logo + tagline (col 1), nav links (col 2), social links (col 3). grid-template-columns with responsive collapse to single column on mobile. | STANDARD |
| 21.2 | Identity Lattice | Logo/wordmark + brief tagline. Consistent with masthead branding. Small, refined. Not competing with content above. | STANDARD |
| 21.3 | Social Graph | Links to 8+ platforms: GitHub, LinkedIn, Twitter/X, Discord, YouTube, etc. Icon + text or icon-only with aria-labels. Consistent spacing. | STANDARD |
| 21.4 | Bottom Bar | Copyright, attribution, build info. Top border separator. Small, muted typography. Centered or spanning full footer width. | STANDARD |
Offline indicator, back-to-top button, toast notification container, and system status components. CORE ASB Cat 22
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 22.1 | Offline Indicator | Fixed banner: "You are offline. Changes saved locally." role="status". Slides in from top. Yellow/amber color. Auto-hides when online restored. CSS transition on transform. | CORE |
| 22.2 | Back-to-Top | Fixed button, bottom-right. 44×44px minimum touch target. Circular. Appears after scrolling 300px. Smooth scroll to top. aria-label="Back to top". Z-index above content, below modals. | CORE |
| 22.3 | Toast Container | Fixed container, top-right or bottom-right. aria-live="polite" aria-atomic="true". Toasts: success (green), error (red), info (blue), warning (amber). Include icon, message, optional action. Auto-dismiss after 4s with progress bar animation. Slide-in from right via transform:translateX. | CORE |
| 22.4 | Loading Spinner | CSS-only spinner. spin keyframe (Category 05.5). Centered in container. Accent color. will-change:transform. Reduced-motion: static dot or reduced animation. | CORE |
| 22.5 | Console Branding | Styled console.info() output with %c formatting. Displays project identity, version, contact, and repository URL. Uses the project's accent color on dark background. This is a trust signal for developers who inspect the page. Include: project name, tagline, contact email, GitHub URL. Keep concise — 4–6 lines max. | STANDARD |
Résumé-quality print output. Force white background, black text, hide navigation/interactive elements, print link URLs, handle page breaks, gradient text fallback. STANDARD ASB Cat 23
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 23.1 | Force White/Black | body{background:#fff!important;color:#000!important}. Override all theme colors. Print is always light mode. Headings black. Links underlined. | STANDARD |
| 23.2 | Hide Interactive | Navigation, theme toggle, back-to-top, floating rail, hamburger menu — all display:none!important. Print is a document, not an application. | STANDARD |
| 23.3 | Print Link URLs | Links print their href after text: a[href]::after{content:" (" attr(href) ")"}. Exclude internal links, same-page anchors, and javascript: links. | STANDARD |
| 23.4 | Page Break Control | Cards, sections, callouts: break-inside:avoid. Headings: break-after:avoid. Prevent orphans and widows. Keep related content together. | STANDARD |
| 23.5 | Gradient Text Fallback | Gradient text loses gradient in print. Force solid color: -webkit-text-fill-color:currentColor!important. Text remains readable — just loses decorative effect. | STANDARD |
| 23.6 | Card Borders | Cards retain subtle border in print (border:1px solid #ccc). Backgrounds muted to light gray. Shadows removed. Structure preserved without ink waste. | STANDARD |
Safe-area insets for notched devices, honeypot fields for bot detection, and visual polish that communicates security and attention to detail. CORE ASB Cat 24
| # | Requirement | Specification | Tier |
|---|---|---|---|
| 24.1 | Safe Area Insets | env(safe-area-inset-*) applied to fixed elements (nav, floating rail, back-to-top, toast container) and body padding. Prevents content from being obscured by notches, dynamic island, or rounded corners. Requires <meta name="viewport" content="... viewport-fit=cover"> in <head> to enable. | STANDARD |
| 24.2 | Honeypot Fields | Hidden form field: position:absolute;opacity:0;height:0;width:0;tab-index:-1. Invisible to humans, detectable by bots. If filled, form submission rejected. Pure CSS/HTML — no JS required for hiding. | CORE |
| 24.3 | Security Badge | Visual indicator of encryption status, privacy guarantees, or audit results. Badge from Category 08. Trust signal placement from Category 11.4. | STANDARD |
| 24.4 | Content Security | No inline styles on production elements (all styles in stylesheet). No javascript: URLs. rel="noopener noreferrer" on external links. These are CSS-adjacent but affect the stylesheet's security posture. | CORE |
| 24.5 | Visual Polish | Consistent border-radius, smooth transitions (200–300ms), subtle hover states, professional spacing. No visual "jank" — elements don't shift on state change unless intended. This is the "last 5%" that distinguishes production-grade CSS. | PREMIUM |
For each project, every category must be classified: Applicable (must implement), Not Applicable (exempt with rationale), or Adapted (modified for domain). No category silently dropped. CORE = present. STANDARD = present, exemption requires rationale. PREMIUM = flagship visual parity. OPTIONAL = pull when demanded.
The 24-category CSS architecture maps directly to ASB's Categories 00–23 plus expanded security. Where ASB specifies what the UI must contain, this blueprint specifies how it must be styled. Both documents together provide complete coverage.
These pathways are the necessary visual consequence of holding all five design commitments simultaneously. Each maps to one or more of ASB's 19 pathways.
The core insight: CSS is not a styling language. It is a GPU-accelerated rendering engine with a declarative API. The 24 categories define the visual vocabulary. The 6 pathways define how that vocabulary composes into complete visual systems — from token to component to page to print. ASB Pathway ⑨
Two pathways from Token-First (①) × Deterministic CSS (②) × Accessibility-Native (③). ASB Layer 1
Every Visual Decision Originates From a Token. No Exceptions.
The design token file (:root block) is the single source of visual truth. Every color, spacing unit, radius, shadow, font stack, and easing curve is a named token. Components reference tokens — never raw values. A color change is a single-line token edit that propagates through the entire application. The token system enables dark/light parity, high-contrast mode, and brand theming from one file.
:root block. Semantic tokens. One change, universal propagation. Dark mode is a [data-theme] override, not a separate file.:root--fg-dim, not --gray-400)[data-theme="light"]var(--token) referencesThis pathway is the visual-domain equivalent of ASB's Pathway ① (Unified Computation Substrate). Where Pathway ① unifies all data operations in one WASM module, Token-First Architecture unifies all visual decisions in one token system. Both eliminate fragmentation at the architectural level. ASB PW-①
CSS Grid + Flexbox. No JavaScript for Layout. Ever.
Layout is a CSS concern — not a JavaScript concern. CSS Grid handles two-dimensional layouts. Flexbox handles one-dimensional flows. Container queries handle component-level responsiveness. Media queries handle page-level responsiveness. At no point does JavaScript calculate positions, measure elements, or set inline styles for layout purposes. The layout engine is deterministic: same HTML + same CSS = same layout on every device, every browser, every time.
getBoundingClientRect() only for animation coordination — never for layout decisionsThis pathway is the visual-domain equivalent of ASB's Pathway ② (Deterministic State Engine). Where Pathway ② ensures every application state is a formal state machine, Deterministic Layout Engine ensures every layout state is a formal CSS declaration. Both eliminate "unexpected states" by construction. ASB PW-②
Two pathways from GPU Compositor (⑤) × User-Controlled (④) × Accessibility-Native (③). ASB Layer 2
CSS Effects Are Shaders for Free. Two Independent Frame Rates. Zero JavaScript Cost.
The browser's hardware compositor is a parallel GPU pipeline — not a document renderer. CSS transform, opacity, and backdrop-filter are GPU-composited at virtually zero cost. The design system promotes UI overlays (navigation, modals, toasts, floating rail) to their own compositor layers via will-change:transform. These layers render at the display's native refresh rate (120fps) independent of the main content frame rate. CSS backdrop-filter:blur() is a GPU shader — it costs nothing compared to canvas or WebGL equivalents.
will-change:transform on fixed/sticky elements, modals, toasts, floating railtransform and opacity. Never width, height, top, left, or margin in animationsThis pathway IS ASB's Pathway ⑨ (CSS Compositor Pipeline), translated into the design systems domain. It is the direct visual implementation of Commitment ⑤ (GPU Compositor as Render Pipeline). Where ASB treats the compositor as a systems architecture concern, this pathway treats it as a design architecture concern — it's the same insight, applied to visual decisions. ASB PW-⑨
System Preference Detection. Persistent User Choice. Live Switching. FOUC Prevention.
The theme engine respects the user's system preference, remembers their explicit choice, and switches instantly without page reload. It prevents Flash of Unstyled Content (FOUC) during theme transitions. It listens for system preference changes and adapts live. Every visual token has a dark and light variant — no "theme-only" colors that break when the theme changes. The theme engine is not a feature; it is the architecture of color itself.
data-theme attribute on <html>. System preference detected, user choice persisted. FOUC prevented via blocking script in <head>. Live switching via matchMedia listener.window.matchMedia('(prefers-color-scheme: dark)') at load timelocalStorage stores explicit choice; outranks system preference<script> in <head> before first paint. CSS transition lock during theme swapmatchMedia.addEventListener('change') for real-time system preference response:root has a corresponding value in [data-theme="light"]<meta name="theme-color"> updated to match active theme for browser chromeThis pathway implements ASB's Category 37 (Theme Engine) and is the visual expression of Commitment ④ (User Sovereignty). Where ASB specifies the persistence and detection architecture, this pathway specifies the visual token architecture that makes theming possible without duplication. ASB Cat 37
Two pathways that connect design tools to production CSS and ensure visual quality across the handoff. ASB Layer 3
Contrast Ratios Guaranteed by Token Design. Focus Management in the Reset. Semantic HTML Before Styling.
Accessibility is not a testing phase. It is not an overlay widget. It is not a "fix at the end" concern. The design token system guarantees WCAG 2.1 AA contrast ratios by construction: every text-on-background token pair is verified at definition time. Focus indicators are in the CSS reset — not added per-component. Semantic HTML is the starting point — <button> not <div onclick>, <nav> not <div class="nav">. The design system is accessible before any component is built.
--fg/--bg pair meets WCAG AA (4.5:1 normal, 3:1 large):focus-visible rule. No component-by-component focus styling needed<button>, <nav>, <main>, <header>, <footer> are required. ARIA is supplementation, not replacementThis pathway spans ASB's Category 03 (Accessibility Utilities), Category 33 (Automated A11y Scanning), and Commitment ④ (User Sovereignty). It is the visual-domain implementation of the principle that accessibility is not a feature — it is the architecture. ASB Cat 03, 33
Clamp-Based Typography. Auto-Fit Grids. Container Queries. Single Breakpoint. Mobile-First CSS.
Responsive design is not a set of breakpoints. It is a continuum. Typography uses clamp() to scale smoothly between minimum and maximum sizes — no step changes at breakpoints. Layouts use auto-fit and auto-fill grids that reflow naturally — no column-count media queries. Container queries allow components to adapt to their container width, not the viewport width. The result: a single stylesheet that works on every device from 320px phones to 4K displays, with exactly one major breakpoint at 700px for structural changes (navigation collapse, padding reduction).
clamp(min, vw, max) for all headings. Smooth scaling across all viewport widthsrepeat(auto-fit, minmax(Npx, 1fr)). No media queries for column count@media (min-width) adds complexity for larger screensdvh, svh, lvh for full-screen sections that respect mobile browser chromeThis pathway is the visual-domain implementation of ASB's Pathway ⑪ (Runtime Self-Optimization). Where Pathway ⑪ probes hardware and selects capability tiers, Responsive Architecture probes viewport dimensions and selects visual configurations — both are adaptive systems that reconfigure without reload. ASB PW-⑪
At no point does CSS require JavaScript to produce a complete, styled, readable, navigable page. The CSS core runs at the browser's native rendering speed — before any script executes. JavaScript enhances: theme toggle persistence, scroll spy, mouse tracking, 3D tilt, form validation. But the page is complete without it. A user with JavaScript disabled sees a fully styled, fully accessible, fully navigable document.
This is not a technical constraint. It is a design principle: the visual experience is complete in CSS. Everything else is enhancement. ASB §VII — Core-First Architecture
Layout, typography, color, spacing, animation. Complete visual experience. No JS required.
Theme toggle persistence, scroll spy, mouse tracking, 3D tilt, form validation. Optional. Non-blocking.
Token export/import, visual regression testing, documentation generation, Figma sync. Design system ecosystem.
The design system is more than CSS. It includes the tooling, documentation, handoff protocols, and quality assurance that make the 24-category architecture usable by design and engineering teams. NEW
Tokens are the interchange format between design and code. They flow in both directions.
:root are the canonical token definition. They are the runtime values.Every component exists in both design tool and codebase. They stay in sync by construction.
Every CSS change is screenshot-tested against every component in every theme at every breakpoint.
The design system documents itself. Every token, component, and pattern is discoverable.
No stylesheet is production-ready until every applicable design gate is passed. These gates validate the CSS architecture against the five design commitments. They are self-administered with evidence — not claims.
:root token has a [data-theme="light"] counterpart. Token parity verified by automated scan--fg-dim not --gray-400!important except in print stylesheet and utility overrides (justified per instance):focus-visible present and visible on all interactive elements. Keyboard navigation complete — every interactive element reachable and operableprefers-reduced-motion: all animations disabled when active. Zero animation-only information conveyanceforced-colors:active: all UI visible. No color-only informationtransform and opacity exclusively. Zero width, height, top, left, or margin animations in production UIwill-change:transformbackdrop-filter used for glass effects — no JS blur, no canvas blurclamp() scaling on all headings. No step-changes at breakpointsEach phase is a dependency for the next. Tokens before components, components before patterns, patterns before pages, pages before ecosystem. ASB §VIII — Implementation Roadmap
| Phase | Core Deliverable | Categories | Gate |
|---|---|---|---|
| Phase 0: Token Foundation | :root token block. All color, spacing, radius, shadow, typography, easing tokens. Dark-first with light parity. Token documentation generated. | 01 | Gate 1 (partial) |
| Phase 1: CSS Reset & Base | Reset stylesheet. Box-sizing, scroll-behavior, font-smoothing, selection, scrollbar, focus-visible. Accessibility utilities (sr-only, skip-link, forced-colors, reduced-motion). | 02, 03 | Gate 1, Gate 2 (partial) |
| Phase 2: Layout & Typography | Container system. Section spacing. Auto-fit grid. Flexbox utilities. Fluid typography scale. Text-wrap. Gradient text. Monospace stack. | 04, 06 | Gate 4 (partial) |
| Phase 3: Core Components | Button system (all variants, sizes, states). Badge hierarchy. Animation keyframes. Theme engine with toggle. | 05, 07, 08 | Gate 2, Gate 3 (partial) |
| Phase 4: Navigation Systems | Sticky navigation with backdrop-blur. Mobile hamburger. Floating rail nav with scroll spy. Skip link integration. | 09, 10 | Gate 3, Gate 4 |
| Phase 5: Section Components | Hero system. About section. Case study cards. Services matrix. Philosophy cards. Employers section. Product spotlight. | 11–17 | Gate 2, Gate 4 |
| Phase 6: Interaction Systems | FAQ accordion (roving focus, keyboard nav). Conversion CTA band. Footer. Utility shell (toast, offline indicator, back-to-top). | 18, 20, 21, 22 | Gate 2, Gate 3 |
| Phase 7: Print & Security | Print stylesheet. Safe-area insets. Honeypot fields. Visual polish pass. Research placeholder. | 19, 23, 24 | Gate 4, Gate 5 |
| Phase 8: Ambient & Premium | Ambient atmosphere (CSS orbs, noise overlay). 3D tilt physics. Mouse-tracking glow. Premium visual polish. | 00 | Gate 3, Gate 5 |
| Phase 9: Ecosystem | Design token pipeline (Figma sync). Component documentation. Visual regression testing. Living style guide. Cross-browser validation. | Ecosystem (L4) | Gate 5 |
| Phase 10: Gold | Final accessibility audit. Performance budget verification. Theme parity sweep. Reduced-motion verification. Forced-colors verification. Print output validation. CSS file size budget check. | All | All Gates |
Every Design Systems category and pathway maps to one or more ASB categories, pathways, or commitments. This cross-reference ensures the two blueprints function as a matched set.
| Design Systems | Maps To (ASB) | Relationship |
|---|---|---|
| Category 00 — Ambient Atmosphere | Category 00 | Identical specification. Visual domain implementation. |
| Category 01 — Design Token System | Category 01 | Identical specification. Token architecture is shared across systems and design. |
| Category 02 — CSS Reset + Base | Category 02 | Identical specification. Reset is universal. |
| Category 03 — Accessibility Utilities | Category 03 | Identical specification. Accessibility is shared across domains. |
| Category 04 — Layout System | Category 04 | Identical specification. Layout is universal. |
| Category 05 — Animation Keyframes | Category 05 | Identical specification. Animation library is shared. |
| Category 06 — Typography Scale | Category 06 | Identical specification. Typography is universal. |
| Category 07 — Button System | Category 07 | Identical specification. Interaction primitives are shared. |
| Category 08 — Badge Hierarchy | Category 08 | Identical specification. Badges are shared. |
| Categories 09–24 | Categories 09–24 | Identical specifications. All UI categories are shared across both blueprints. |
| Pathway DS-1: Token-First Architecture | Pathway ① (Unified Computation Substrate) | Visual-domain equivalent. Both unify fragmented systems into single sources of truth. |
| Pathway DS-2: Deterministic Layout Engine | Pathway ② (Deterministic State Engine) | Visual-domain equivalent. Both eliminate "unexpected states" by construction. |
| Pathway DS-3: CSS Compositor Pipeline | Pathway ⑨ (CSS Compositor Pipeline) | Same pathway — systems view vs. design view. |
| Pathway DS-4: Theme Engine | Category 37 (Theme Engine) | Visual implementation of ASB's theme persistence architecture. |
| Pathway DS-5: Accessibility as Architecture | Category 03, Category 33, Commitment ④ | Visual-domain implementation of accessibility-native principle. |
| Pathway DS-6: Responsive Architecture | Pathway ⑪ (Runtime Self-Optimization) | Visual-domain equivalent. Both adapt to device capabilities without reload. |
| Design Green Gates 1–5 | ASB Green Gates 1–5 | Design-specific gates that complement the systems gates. Together they cover the full stack. |
| Design Implementation Roadmap | ASB Implementation Roadmap | Phase 3 of ASB's roadmap is "UI Layer — 46-category CSS architecture." This blueprint is the expansion of that phase. |
How design systems professionals use this blueprint with every project. The handoff from design to development is a structured protocol — not a "throw it over the wall" moment.
The design handoff extends ASB's Two-File Protocol with a third artifact: the design token file.
| File | Content | Owner | Format |
|---|---|---|---|
| File 1: ASB | Systems architecture benchmark. Reusable across all projects. | Systems Architect | HTML (self-documenting) |
| File 2: Design Systems Blueprint | CSS architecture benchmark. 24 categories, 6 pathways, 5 gates. Reusable across all projects. | Design Systems Architect | HTML (self-documenting) |
| File 3: Software Design Spec | Per-project domain container. North Star vision, data models, workflows, features, contracts. | Product Designer / Architect | Per-project format |
| File 4: Design Tokens | Per-project token file. Extends the 24-category token system with project-specific tokens. | Design Systems Designer | CSS Custom Properties + JSON |
"Build the visual experience described in the design spec using the token system defined in the design tokens file. Comply with all 24 categories of the Design Systems Blueprint. Hold the five design commitments as invariant visual axioms. Pass all applicable Design Green Gates before declaring the front-end complete."
1. Design Session: Designer produces the Software Design Specification following the blueprint template.
2. Token Definition: Design tokens extracted from Figma or defined in CSS. Token file committed to version control.
3. Handoff: Spec + Tokens + Blueprint → delivered to development / LLM production session.
4. Implementation: CSS built against the 24 categories, using the defined tokens, following the 6 pathways.
5. Audit: Design Green Gates applied. Visual regression tested. Accessibility scanned. Compositor budget verified.
6. Correction Loop: Failures → correction → re-audit → pass.
7. Resolution Authority: The design systems architect resolves visual conflicts. When a component implementation diverges from the token system, the token system wins — or the token system is updated with documented rationale.