Lesson 1Selecting version-1 components: buttons, inputs, selects, checkboxes, radios, togglesDecide which components belong in a stable version 1 set, focusing on buttons, inputs, selects, checkboxes, radios, and toggles. Learn criteria for readiness, scope control, and rollout planning across teams.
Defining v1 success criteriaPrioritizing high-impact primitivesButtons and their core variantsForm inputs, selects, and choicesRollout and deprecation strategyLesson 2Variant strategy: sizes, intents, density, themes, composition patternsDefine a coherent variant strategy across the system, covering sizes, intents, density, and themes. Learn how to avoid variant explosion, compose variants, and document usage rules for consistent implementation.
Mapping variants to user needsSize scales and touch targetsIntent variants and color tokensDensity modes for different contextsTheme-aware component stylingLesson 3Navigation components: top bars, sidebars, tabs, breadcrumbs, paginationDesign navigation components such as top bars, sidebars, tabs, breadcrumbs, and pagination. Learn information architecture alignment, responsive behaviour, and patterns for indicating location and progress.
Top bars and global navigationSidebars and nested hierarchiesTabs for mode and view switchingBreadcrumbs for orientationPagination and infinite scrollingLesson 4Data display: tables, lists, avatars, badges, tooltipsExplore data display components and how to structure tables, lists, avatars, badges, and tooltips. Learn patterns for density, responsiveness, content hierarchy, and how to keep visuals consistent across products.
Designing accessible data tablesList patterns for varying densitiesAvatar usage, grouping, and fallbacksBadge semantics, colors, and countsTooltip triggers, timing, and contentLesson 5Component taxonomy: atoms, molecules, organisms and cross-product categoriesEstablish a component taxonomy using atoms, molecules, organisms, and cross-product categories. Learn how naming, grouping, and hierarchy improve discoverability, governance, and contribution workflows.
Atoms, molecules, and organismsCategorizing by user tasksCross-product and platform groupingsNaming rules and classificationGovernance for new component typesLesson 6Surfaces: cards, modals, dialogs, sheets, toastsDefine surface components like cards, modals, dialogs, sheets, and toasts. Learn elevation, layering, motion, and how to manage blocking versus non-blocking experiences while preserving context and focus.
Card structure and content hierarchyModal and dialog usage rulesSheets, drawers, and slideoversToast and inline notification patternsZ-index, elevation, and scrim rulesLesson 7Accessibility for components: ARIA roles, keyboard interactions, focus managementLearn how to make components accessible with ARIA roles, keyboard support, and robust focus management. Understand semantics, labelling, focus traps, and patterns for error messaging and assistive technology support.
Choosing correct semantic elementsApplying ARIA roles and attributesDesigning full keyboard interactionManaging focus order and focus trapsAnnouncing errors and status changesLesson 8State and interaction patterns: hover, focus, active, disabled, loading, errorDefine consistent state and interaction patterns, including hover, focus, active, disabled, loading, and error. Learn visual affordances, motion guidelines, and how to document behaviour across input methods.
State model for core componentsHover and pressed visual feedbackFocus styles for all input methodsDisabled, read-only, and loadingError, warning, and success states
