Breakpoints
The responsive breakpoint scale shared across web and Figma.
Breakpoint tokens define the min-width thresholds for responsive layouts — a
single, canonical scale that every web app and Figma read. The values align with
Tailwind's defaults, extended with an xs step below for finer small-screen
control and 2xl / 3xl above for large and ultra-wide displays.
The @reva/ui responsive utilities (xs:–3xl:) and the responsive props on
Stack / Flex / Grid resolve against these thresholds. (React Native has no
media queries, so the mobile app doesn't consume the viewport breakpoints.)
For how to use them — mobile-first utilities, responsive props, and container queries — see Responsive design.
| Token | Value | Pixels | Description |
|---|---|---|---|
| xs | 30rem | 480px | Extra small screens (480px) — large phones in landscape; the small-side granularity step |
| sm | 48rem | 768px | Small screens (768px) — tablets in portrait (Tailwind md) |
| md | 64rem | 1024px | Medium screens (1024px) — tablets in landscape, small laptops (Tailwind lg) |
| lg | 80rem | 1280px | Large screens (1280px) — laptops and desktops (Tailwind xl) |
| xl | 96rem | 1536px | Extra large screens (1536px) — large desktops (Tailwind 2xl) |
| 2xl | 120rem | 1920px | 2x large screens (1920px) — Full HD; the typical large-desktop target |
| 3xl | 160rem | 2560px | 3x large screens (2560px) — ultra-wide; reserve for the widest layouts |