Design Token
Screens
Customizing screen sizes and breakpoints for your design system.
Default
| Token | Value | REM | Description |
|---|---|---|---|
screen-4xs | 360 | 22.5rem | iPhone 6, 7, 8, X, 11, 12 / Galaxy S8 / HTC One… |
screen-3xs | 480 | 30rem | Blackberry Passport / Amazon Kindle Fire HD 7… |
screen-2xs | 600 | 37.5rem | LG G Pad 8.3 / Amazon Kindle Fire … |
screen-xs | 768 | 48rem | Microsoft Surface / iPad Pro 9.7 / iPad Mini … |
screen-sm | 834 | 52.125rem | iPad Air 10.5 / iPad Pro 11 … |
screen-md | 1024 | 64rem | iPad Pro 12.9 / Microsoft Surface Pro 3 … |
screen-lg | 1280 | 80rem | Google Chromebook Pixel / Samsung Chromebook … |
screen-xl | 1440 | 90rem | Macbook Air 2020 M1 / MacBook Pro 15 … |
screen-2xl | 1600 | 100rem | Dell Inspiron 14 series … |
screen-3xl | 1920 | 120rem | Dell UltraSharp U2412M / Dell S2340M / Apple iMac 21.5-inch … |
screen-4xl | 2560 | 160rem | Dell UltraSharp U2711 / Apple iMac 27-inch … |
The screen in the variable is a reserved section. In addition to being used as a property value token screen-*, it also serves as a responsive breakpoint @*.
Basic usage
Apply a screen size
Apply default screen variables using any syntax, such as width and max-width.
<div class="w:screen-sm max-w:screen-lg">…</div>Apply a responsive breakpoint
Conditionally apply styles using default screen variables as responsive breakpoints.
<div class="font:24 font:32@sm font:48@md">…</div>The responsive breakpoints can be flexibly used with operators, see the responsive design documentation.