Skip to content
academia.sh
tr
Log in

Course Intermediate

Design Systems

By the end of this course

Start course

01

Establishing the System

How a design system differs from a component library, justifying the need for one through a cost calculation, the visual audit, two starting strategies, and writing the design language.

  1. 01 What Is a Design System How a design system differs from a component library, how decisions split into value, component, pattern, and rule layers, and how to compute the share of those decisions a library actually answers.
  2. 02 Justifying the Need for a System Comparing the systematic and systemless paths in hours, computing the break-even screen count, sensitivity to each input, how team count multiplies deviation, and the usage threshold for a decision to enter the system.
  3. 03 Visual Audit Machine extraction of a value inventory from existing interfaces' style source, threshold-based clustering of near-duplicates, how the linking rule changes the count, and a per-product deviation map.
  4. 04 Building from Scratch and from Existing Comparing the from-scratch and from-existing strategies on the same inventory for migration cost and scale quality, building the hybrid path with an exception log, and freeze-based phased migration.
  5. 05 Design Language Testing design principles with a distinctiveness check, deriving idle principles and unsupported decisions from a principle-decision matrix, reading principle conflicts, and checking a tone-of-voice contract.

02

Tokens and the Foundation Layer

The primitive, semantic, and component layers of design tokens; color, typography, spacing, and size tokens; systematizing breakpoint and grid decisions; and theme derivation.

  1. 01 Design Tokens Splitting tokens into primitive, semantic, and component layers, setting rules for cross-layer references, and resolving the token graph for cycles, undefined references, layer violations, and orphaned tokens.
  2. 02 Color Tokens Writing color roles as a contract, declaring legal foreground–ground pairs, testing state derivatives with the separation threshold, and auditing the contract automatically in every theme.
  3. 03 Typography Tokens Defining text levels as composite tokens, fitting the line box onto the spacing grid, the trade-off between grid choice and multiplier drift, and auditing levels with the distinction threshold.
  4. 04 Spacing and Size Tokens Converting the spacing scale to relative units, preserving the text-to-space ratio when the root size changes, testing component heights against target-size thresholds, and deriving nested corner radii.
  5. 05 Breakpoints and Grid Turning breakpoints into tokens that carry a layout configuration, auditing column arithmetic at every breakpoint, detecting an orphaned breakpoint, and deriving bounds from content criteria.
  6. 06 Theme Management Deriving themes from a source table with a single rule, the contracts mirroring preserves and misses, keeping the correction as an exception list, testing the brand theme with a single family, and measuring role–theme coverage.

03

Catalog and Governance

Component catalog scope and maturity levels, the shared naming layer between design and code, documentation coverage, versioning and breaking-change management, the contribution process, governance models, adoption measurement, and toolchain synchronization.

  1. 01 Component Catalog The scope criterion that decides whether a component earns a place in the catalog, the exit conditions for maturity levels, and the audit that ties catalog health to usage share.
  2. 02 Naming Conventions The derivation rule between design names and code names, the grammar check on names, detecting synonymous-name clashes, and reporting the gap between variant axes and props.
  3. 03 Documentation The required sections of component documentation, the information a counter-example carries, computing documentation coverage at the section and component level, and comparing the prop table against the interface.
  4. 04 Versioning and Release What counts as breaking in a component interface, deriving the version number from comparing two snapshots, generating the migration guide, and measuring migration cost by call site.
  5. 05 Contribution Process Defining the flow from proposal to release as a state machine, tying acceptance gates to approvals, detecting invalid transitions, and finding the bottleneck by measuring stage durations.
  6. 06 Governance Model Modeling centralized, federated, and hybrid governance over demand and capacity, queue time turning into local copies, the tipping point that shifts with scale, and separating decisions that must stay centralized.
  7. 07 Adoption Measurement Computing coverage percentage by team through a repository scan, its difference from traffic-weighted coverage, classifying the deviation list into local copies and catalog candidates, and the limits of heuristic matching.
  8. 08 Toolchain The single-direction source of truth between the design tool and code, normalizing the token export, eliminating false diffs, and classifying the remaining real deviation to arrive at a sync rate.

Start typing to search.

↑↓ ↵ Esc navigate · open · close