# Layout

Breakpoints, layout metrics, motion and stacking. Layout tokens change by breakpoint.

| Name | CSS var | Tailwind | Light | Dark | Modes | Description |
| --- | --- | --- | --- | --- | --- | --- |
| --breakpoint-2xl | `--breakpoint-2xl` |  | `1536px` | `1536px` |  | Raw value. Use a semantic token instead. |
| --breakpoint-lg | `--breakpoint-lg` |  | `1024px` | `1024px` |  | Raw value. Use a semantic token instead. |
| --breakpoint-md | `--breakpoint-md` |  | `768px` | `768px` |  | Raw value. Use a semantic token instead. |
| --breakpoint-sm | `--breakpoint-sm` |  | `640px` | `640px` |  | Raw value. Use a semantic token instead. |
| --breakpoint-xl | `--breakpoint-xl` |  | `1280px` | `1280px` |  | Raw value. Use a semantic token instead. |
| --duration-0 | `--duration-0` |  | `0ms` | `0ms` |  | 0ms. Primitive — alias via a semantic motion token. |
| --duration-100 | `--duration-100` |  | `100ms` | `100ms` |  | Raw value. Use a semantic token instead. |
| --duration-200 | `--duration-200` |  | `200ms` | `200ms` |  | Raw value. Use a semantic token instead. |
| --duration-300 | `--duration-300` |  | `300ms` | `300ms` |  | Raw value. Use a semantic token instead. |
| --duration-500 | `--duration-500` |  | `500ms` | `500ms` |  | 500ms. Primitive — alias via a semantic motion token. |
| --layout-tab-bar | `--layout-tab-bar` |  | `72px` | `72px` | Mobile: 72px; Tablet: 0px; Desktop: 0px; Wide: 0px | Mobile bottom tab bar height (72). Hidden on Tablet and up. |
| --motion-duration-fast | `--motion-duration-fast` |  | `100ms` | `100ms` |  | Hover, press and other immediate feedback. |
| --motion-duration-instant | `--motion-duration-instant` |  | `0ms` | `0ms` |  | No animation. Use for reduced-motion fallbacks. |
| --motion-duration-normal | `--motion-duration-normal` |  | `200ms` | `200ms` |  | Default for dropdowns, tooltips and small transitions. |
| --motion-duration-slow | `--motion-duration-slow` |  | `300ms` | `300ms` |  | Dialogs, drawers and larger surfaces entering. |
| --motion-easing-entrance | `--motion-easing-entrance` |  | `cubic-bezier(0, 0, 0, 1)` | `cubic-bezier(0, 0, 0, 1)` |  | Elements entering: fast start, gentle settle. |
| --motion-easing-exit | `--motion-easing-exit` |  | `cubic-bezier(0.3, 0, 1, 1)` | `cubic-bezier(0.3, 0, 1, 1)` |  | Elements leaving: accelerate away. |
| --motion-easing-standard | `--motion-easing-standard` |  | `cubic-bezier(0.2, 0, 0, 1)` | `cubic-bezier(0.2, 0, 0, 1)` |  | Default easing for most transitions. |
| --z-index-dropdown | `--z-index-dropdown` |  | `1000` | `1000` |  | Stacking order for dropdown layers. Higher wins; leave gaps of 100 for insertions. |
| --z-index-modal | `--z-index-modal` |  | `1300` | `1300` |  | Stacking order for modal layers. Higher wins; leave gaps of 100 for insertions. |
| --z-index-overlay | `--z-index-overlay` |  | `1200` | `1200` |  | Stacking order for overlay layers. Higher wins; leave gaps of 100 for insertions. |
| --z-index-sticky | `--z-index-sticky` |  | `1100` | `1100` |  | Stacking order for sticky layers. Higher wins; leave gaps of 100 for insertions. |
| --z-index-toast | `--z-index-toast` |  | `1400` | `1400` |  | Stacking order for toast layers. Higher wins; leave gaps of 100 for insertions. |