Handbook
Design System GuideCheat Sheet
Design System GuideCheat Sheet
10. Accessibility Foundations
12. Layout System12.1 Spacing12.2 Base unit12.3 Breakpoints12.4 Grid
15. Typography16. Motion and Interaction
12. Layout System

12.4 Grid

Layout System · Section 12.4

Define:

  • column count
  • gutter
  • outer margin
  • maximum content width

Example:

Mobile:  4 columns
Tablet:  8 columns
Desktop: 12 columns

12.3 Breakpoints

Layout System · Section 12.3

13. Color System

Define functional colors, dark mode, and accessible contrast.