These atomic elements form the basic building blocks of any design system. Each foundation is considered from multiple perspectives: visual design, accessibility, cross-platform compatibility, and practical implementation.
Color
Establishes brand identity, provides hierarchy, and supports contrast across light and dark themes. You'll learn how to define semantic and functional color tokens, evaluate contrast accessibility using WCAG and APCA, and implement color theming across platforms.
Explore Color →Typography
Typography communicates tone, hierarchy, and clarity. Explore how to define typographic scales, apply system font stacks, manage line height and letter spacing, and ensure readable text across screen sizes and user preferences.
Explore Typography →Spacing & Sizing
A consistent rhythm of space supports layout clarity and legibility. Learn how to define a modular spacing scale, use sizing tokens for components, and build layouts that respect accessibility requirements like minimum touch targets.
Explore Spacing & Sizing →Layout
The structure that guides responsive design and visual organization. Understand how to create grid systems, define breakpoints, and structure containers and flows that adapt across screen sizes while preserving usability.
Explore Layout →Icons
Icons offer fast recognition and visual language support. Learn about icon sizing, stroke styles, accessibility alternatives like ARIA labels, and how to systematize icons for consistency in size, alignment, and usage.
Explore Icons →Elevation & Shadows
Visual layering helps users distinguish between surfaces and understand interactions. This section covers shadow tokens, elevation ramps, and how to provide depth cues that are both accessible and performant across platforms.
Explore Elevation & Shadows →Radius & Shape
Shape tokens define the visual personality of your interface. Explore how to create consistent border-radius scales, apply shapes meaningfully to interactive components, and align visual identity across a system.
Explore Radius & Shape →Motion & Duration
Motion provides continuity and feedback. You'll learn to define motion tokens (duration, easing), support prefers-reduced-motion, and create accessible animations that reinforce user interaction rather than distract.
Explore Motion & Duration →Grid Systems
Grid systems help organize layouts with predictable flow and alignment. This section introduces column structures, gutter sizing, spacing alignment, and how to adapt grids responsively while maintaining accessibility.
Explore Grid Systems →Borders & Strokes
Borders frame and delineate components. Learn how to apply tokenized border styles and widths, ensure contrast and visibility, and support semantic distinctions (e.g. input focus or warning states).
Explore Borders & Strokes →