Frontend Roadmap/Capstone Projects
Project Blueprint Document
Status: Coming SoonPhase: blueprint readyarchitectEst: 60 hours

Enterprise Design System

Multi-Brand Accessible Token & Component Library

Build status noteCore requirements mapped. Figma token compiler integration and Rollup build setup scheduled.
Architecture Focus:
Style Dictionary compiler configurationCSS Custom Properties injectionRadix Primitives encapsulationStorybook automation workflow
Tech Stack:
ReactTypeScriptStorybookRollupTailwind CSSPlaywrightStyle Dictionary

Blueprint Information Only

This project's code implementation will come later in the curriculum. However, the complete architecture blueprint, functional specifications, core modules, milestones, and interview design explanations are fully active and available below to aid in your frontend system design study.

1. Problem Statement

Organizations struggle to keep visual styles and design tokens sync'd across separate mobile, web, and internal tooling apps, leading to fragmented brand experiences and layout defects.

2. Business Context & Friction

Consistent multi-brand UI interfaces accelerate product delivery velocity by 40% and eliminate cross-team visual style QA loops.

Target Users:Enterprise UI Engineers, Design System Leads, Frontend Architects

3. Learning Objectives

  • Establish unified JSON-based design tokens structures
  • Compile multi-format files (CSS, Sass, JS, JSON) from single token source
  • Build high-accessibility keyboard-interactive components
  • Configure bundle-splitter output supporting package treeshaking

4. Functional Requirements

Multi-Brand Themes Support

must-have

System must dynamically parse and map styling variables from dark, light, and compact densities for multiple brands using token compilers.

Accessible Modal Dialog Component

must-have

Implement a dialog overlay following WCAG 2.2 AA standards, managing keyboard focus trapping, Esc close hooks, and ARIA attributes.

Storybook Interactive Documentation

should-have

Export live playground controls containing auto-generated knobs, styling variables toggles, and accessibility checklist panels.

Visual Regression Testing Integration

should-have

Automate screenshot comparisons in Playwright across all component variants on theme and brand switches.

5. Non-Functional Specifications

Performance

  • •Component core package bundle size must remain under 15KB gzipped.
  • •Zero layout shifts (CLS = 0) during dynamic runtime theme swapping.

Scalability

  • •Design token structure must support up to 50 distinct sub-brands without code modifications.
  • •ESM bundle module exports must support deep tree-shaking patterns.

Accessibility (A11y)

  • •Must pass 100% automated axe-core accessibility audits.
  • •Renders must sustain full keyboard-only navigation cycles with clear visible focus rings.

Security

  • •Zero HTML input injections; escape all user inputs inside custom display components.
  • •Third-party libraries must undergo strict lockfile integrity checks.

Reliability & Fault Tolerance

  • •Dynamic theme loaders must fallback to default light values if requested token files fail.
  • •Unit test coverage must exceed 95% on core components.

Observability & Telemetry

  • •Renders log accessibility violations to telemetry endpoint in development.
  • •Expose package build logs and bundle size analysis reports on every commit.

6. Core Modules Breakdown

Token Compiler Module

Style Dictionary compiler pipeline converting design JSON arrays to style sheet targets.

Responsibilities:
  • •Parse design JSON structures
  • •Generate CSS variables, Tailwind classes, and JS constants
  • •Handle responsive media query mappings

Accessible Component Library

Core UI components written with strict keyboard hooks and ARIA assertions.

Responsibilities:
  • •Structure semantic HTML structures
  • •Enforce focus trap boundaries on overlays
  • •Provide accessible description labels bindings

Theme Context Provider

Client-side React context delivering tokens and injecting class modifiers.

Responsibilities:
  • •Expose active brand state
  • •Inject brand CSS properties into root DOM nodes
  • •Handle local theme preferences storage

7. Key User Flows

Developer imports component and changes theme

  1. Developer imports Button from components package.
  2. Wraps layout inside ThemeProvider with brand='brand-a'.
  3. Theme selector callback updates context, rewriting CSS custom properties dynamically.

Keyboard user interacts with Modal Dialog

  1. User tab key triggers modal open button.
  2. Focus shifts instantly inside modal body container.
  3. Subsequent Tab key loops focus exclusively inside modal elements. Escape closes modal.

8. Architectural Blueprint

frontend Architecture

  • •Monorepo codebase with separate packages for tokens and react components.
  • •Encapsulated styles using CSS variables and Tailwind utilities.

state Management

  • •Lightweight React Context providing brand configuration and density parameters.

data Fetching

  • •Pre-generated token JSON files fetched statically at build-time or dynamically on brand change.

caching

  • •Tokens metadata cached on CDN layers with aggressive immutable cache headers.

routing

  • •Not applicable for component library; Storybook handles internal story paths routing.

deployment

  • •NPM registry publish pipelines for individual packages with semantic release tags.

9. Component Execution Plan

ComponentResponsibilityNotes
ThemeProviderInjects brand variables and controls active layout styling variables.Leverages React Context API and documentElement styling overrides.
ModalDialogRenders accessible screen overlays managing focus boundaries.Wraps custom markup around Radix Dialog Primitives.
ButtonBasic interactive component supporting multiple variant sizes and states.Uses classnames compiler to bind CSS variables.

10. API Specifications

GET/api/v1/tokens/:brandId
Get Brand Tokens

Fetches dynamic JSON design tokens array if runtime styling modifications are enabled.

Response Payload
{
  "colors": {
    "primary": "#0284c7",
    "secondary": "#0f172a"
  }
}

11. Logical Data Schemas

DesignTokenSchema

Logical schema storing individual token values mapped by visual category and sub-brand.

id: stringname: stringvalue: stringcategory: stringbrand: string

12. Curriculum Milestones

Phase 1: Foundation

Tokens Architecture

  • •Define JSON layout schemas for design tokens.
  • •Configure Style Dictionary build output pipelines for CSS/JS formats.
Phase 2: Core Features

Accessibility Components

  • •Build accessible Modal, Button, and Input components.
  • •Integrate Radix Primitives and test keyboard focus layouts.
Phase 3: Advanced Features

Theme Swap Engine

  • •Implement dynamic brand ThemeProvider.
  • •Add compact and comfortable styling density profiles.
Phase 4: Production Hardening

Storybook and Testing

  • •Configure Storybook documentations and controls.
  • •Implement automated visual regression tests in Playwright.
Phase 5: Documentation and Interview Explanation

Release Governance

  • •Add changeset scripts for monorepo package releases.
  • •Complete interview preparation answers explaining tradeoffs.

13. Technical Execution Roadmap

1

Design tokens declaration

Construct core variables for colors, spacings, and typography within JSON files.

2

Compile token variables

Run Style Dictionary builders to distribute CSS and TypeScript configuration modules.

3

Build accessible overlays

Compose keyboard-focused modal components mapping correct roles attributes.

4

Integrate Storybook layout

Draft component stories illustrating variant combinations.

14. Systems Interview Deep Dive

Elevator Pitch

“I designed a multi-brand, highly accessible enterprise design system that compiles design tokens into multi-format stylesheets, providing WCAG 2.2 AA compliant components with zero-layout shift themes toggles.”

Architecture Summary

Tokens are maintained as single-source JSON modules, parsed by Style Dictionary into CSS custom variables. Components are compiled into clean ESModules using Rollup, importing Radix Primitives to manage complex accessibility requirements.

Architectural Tradeoffs

  • ▲Radix Primitives increases bundle sizes slightly but guarantees WCAG compliance.
  • ▲CSS variables are modified at runtime instead of CSS-in-JS, boosting rendering speeds but requiring CSS fallback mechanisms.

Possible Follow-up Questions

  • ?How do you resolve focus trapping within nested modal structures?
  • ?Explain how you handle component library versioning inside monorepos.

15. Future Enhancements

  • Add automated Figma tokens sync webhook triggers.
  • Incorporate layout utility helper components package.

Related Curriculum Tracks:

Web Platform Foundationperformance engineering
First ProjectAll CapstonesNext: E-commerce Product Listing Platform