Design System

roadmap.sh: https://roadmap.sh/design-system

Suggested path through the Design System nodes. Each node links to its lesson when written.

Nodes

Fundamentals

• need-of-a-design-system
• design-system-vs-component-library
• design-system-examples
• keywords-terminology

Approach

• making-a-design-system
• making-it-from-scratch
• making-it-from-existing-design
• existing-design-analysis
• identify-existing-design-process
• performing-a-visual-audit

Design language

• creating-the-design-language
• design-language
• design-principles
• color
• functional-colors
• dark-mode
• monochrome-version
• grid
• grid-relation
• breakpoints

Design tokens

• defining-design-tokens
• file-formats
• design-editor

Components

• creating-core-components
• component
• component-catalog
• component-library
• avatar
• badge
• banner
• button
• card
• carousel
• dropdown
• forms
• input-text
• input-checkbox
• input-radio
• input-switch
• icon
• list
• loading-indicator
• modal

Patterns

• pattern
• placement-guidance

Content & guidelines

• guidelines
• microcopy-guidelines
• naming
• code-style
• commit-guidelines
• contribution-guidelines

Documentation

• documentation
• faqs

Quality

• accessibility
• accessibility-testing
• performance
• a-b-tests-experiments
• component-analytics
• logging

Governance & rollout

• governance
• milestones
• pilot
• communication-channel
• community-meetings
• open-hours

Resources

See resources.md.

Project ideas

• Build a token pipeline that converts a single JSON source into CSS variables, iOS, and Android themes with Style Dictionary.
• Build a documented component library (Button, Input, Modal, Card) in Storybook with accessibility checks and usage guidelines.
• Audit an existing product’s UI, extract a color/spacing/typography scale, and propose a migration plan to the new design system.