UI/UX Atlas

Design Systems

The shared language between design and engineering — tokens, components, theming, and governance.

  1. Design Tokens & the W3C DTCG Format

    Master the W3C Design Token Community Group format — the shared, platform-agnostic contract that keeps design and engineering aligned at scale.

  2. Token Naming Conventions & Tier Architecture

    Poorly named tokens fracture design systems at scale — learn the three-tier primitive→semantic→component model and the naming conventions that keep tokens maintainable across platforms.

  3. Theming & Dark Mode Implementation

    Master the architecture behind first-class theming: semantic token tiers, luminance-aware dark surfaces, and system-preference integration that scales across every platform.

  4. Component Architecture & API Design (headless, slots)

    Master the structural decisions that determine whether a component library scales across teams and products — from headless patterns to slot-based composition.

  5. Documentation That Drives Adoption

    Turning your design system documentation from a static artifact into a living engine that engineers and designers actually use, trust, and contribute to.

  6. Governance & Contribution Models

    Scaling a design system beyond its founding team requires explicit governance — who decides, who can contribute, and how changes are safely reviewed and shipped.

  7. Versioning & Deprecation Strategies

    Ship breaking changes without breaking trust — a practitioner's guide to semver, deprecation cycles, and migration tooling for production design systems.

  8. Reference Design Systems (Material 3, HIG, Carbon, Polaris, Fluent 2, Primer)

    Six industry-defining design systems — how they differ architecturally, what each does exceptionally well, and how to adapt their patterns to your own system.

  9. Token Tooling Ecosystem (Style Dictionary, Storybook)

    Master the pipelines, formats, and living-documentation tools that transform raw design tokens into a single source of truth across every platform.

  10. Multi-Platform Token Output

    Shipping design tokens once and consuming them correctly across web, iOS, Android, and beyond — without divergence, duplication, or platform-specific hacks.

  11. Accessibility as a System-Level Concern

    Embedding accessibility into every layer of a design system — tokens, components, documentation, and governance — so it scales automatically instead of being patched on ad hoc.

  12. Design System Metrics & ROI

    Proving a design system's value requires outcome-tied metrics, not component counts — learn which signals actually move leadership and how to build a credible measurement practice.

  13. AI & Design Systems (Figma MCP, Carbon for AI)

    Explore how AI tooling — from Figma's Model Context Protocol to IBM's Carbon for AI — is reshaping design systems in 2026: new components, new workflows, new governance challenges.