/design-system-roadmap

A guide to plan your own design system

GNU General Public License v3.0GPL-3.0

Design System Roadmap and Resources

This guide introduce a way to create your own design system. It's more a checklist of the differents chapters of your work with a lot of advices and resources to go further.

Roadmap overview

  • preliminary analysis
    • mood board
    • interface inventory
    • content inventory
    • brand values
    • user research
    • defining needs and scope
    • defining shared language
    • tools
  • design system introduction
    • about
    • rules and conventions
    • who is this documentation for ?
    • how to use this design system ?
    • limitations
    • FAQ
    • news and updates
    • contributors and teams
  • branding conventions
    • principles and approach
    • accessibility
    • voice and tone
    • products and variations
  • perceptual patterns
    • color
    • typography
    • grid
    • spacing
    • animation
  • functional patterns
    • headings
    • paragraphs
    • links
    • buttons
    • pictures & images
    • lists
    • tables
    • quotes
    • etc.
  • components
    • brand
    • navs
    • searchbars
    • etc.
  • templates
  • pages with real content