This is the capstone of the entire CSS Mastery Path. You will build a complete mini design system — the deliverable real product teams build on — combining everything from all four levels into one professional, documented, accessible whole.
What you are building
A self-contained design system: a token layer (colours, type scale, spacing scale, radii), a set of core components (buttons, cards, forms, alerts, navigation), a responsive layout grid, a working dark mode, a documentation page and accessibility notes. It is the proof that you can think and build like a CSS architect.
Build a complete, documented, accessible mini design system that combines every skill from the CSS Mastery Path — tokens, scales, components, layout, dark mode and docs.
- A token layer: primitive + semantic colour tokens, a type scale and a spacing scale
- Core components built only on tokens: buttons (variants + states), cards, form inputs, alerts
- A responsive layout grid and a navigation component
- A working light/dark theme via a [data-theme] override
- BEM-style naming and flat, low specificity throughout
- Visible :focus-visible on every interactive element
- prefers-reduced-motion respected; accessible contrast in both themes
- A documentation page showing tokens, components and do/don't usage
- Define primitive and semantic tokens, plus type and spacing scales
- Add a [data-theme="dark"] override of the semantic tokens
- Build buttons with --primary/--ghost modifiers and disabled/active states
- Build cards, form inputs (with focus rings) and alert variants
- Create a responsive layout grid and a nav component
- Add a global prefers-reduced-motion guard and shared focus style
- Verify contrast in both themes against the accessibility checklist
- Write a documentation page: token table, component examples, do/don't
- Add a third theme to prove the token system scales
- Add a live theme switcher that persists the choice
- Add container-query-responsive components
You combined tokens, scales, components, layout, theming, accessibility, architecture and documentation into a complete design system — the work of a senior CSS engineer.
Build on tokens, keep specificity flat, bake in accessibility from the start, theme by overriding semantic tokens, and document as you go. A small, consistent, documented system beats a large, ad-hoc one every time.
- The capstone combines all four levels into one design system.
- Build on tokens, keep specificity flat, bake in accessibility.
- Theme by overriding semantic tokens; document as you go.
- You have reached a professional, senior level of CSS.