Design Tokens
Design tokens are visual atoms that represent style values ranging from colors, size, spacing, and radius to be used across platforms to create consistency and cohesion.
On this page
Grid & Layout
Grid
| Breakpoint | Min-Width | Max-Width | Margin | Gutter | Columns |
|---|---|---|---|---|---|
| Min | 0 | 319 | Size/16 | Size/12 | 12 |
| X-Small | 320 | 567 | Size/16 | Size/12 | 12 |
| Small | 568 | 799 | Size/16 | Size/16 | 12 |
| Medium | 800 | 1023 | Size/24 | Size/16 | 12 |
| Large | 1024 | 1279 | Size/32 | Size/24 | 12 |
| X-Large | 1280 | 1439 | Size/40 | Size/24 | 12 |
| Max | 1440+ | - | Size/40 | Size/32 | 12 |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.