[Designer Note] Components of Design System

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