top of page

[Designer Note] Components of Design System

  • Writer: Emily Lee
    Emily Lee
  • May 26, 2023
  • 1 min read

Design Tokens, roles, and the values

Typography

Spacing System

  1. Select base number 4 or 8 px.

  2. Create a spacing scale.

  3. Less or more contrast with the spacing.

  4. Smaller spacing scale for smaller devices while designing responsive design.

  5. Name the styles

Example

  1. Naming by size

  2. Naming by category+direction+size

Color System

Grid System and Layout How Components work together

 
 
 

Commentaires


Let's get in touch!

  • Instagram
  • Facebook
  • LinkedIn

© 2022 by Jia-Jen Lee. Created with ❤.

bottom of page