Breakpoints
Screen tokens define breakpoints tied to the device screen sizes at which a component's behavior or rendering may change.
Media
MediaThe breakpoints are based on a mobile-first(min-width) design, so we recommend using them.
| Token | Value | Description |
|---|---|---|
| sm | 640px | Large smartphones, small tablets |
| md | 768px | Tablets |
| lg | 1024px | Small screens (e.g. MacBook 15″) |
| xl | 1280px | Larger laptops |
| 2xl | 1536px | Larger desktops |