Breakpoints
Back to docsBreakpoints are documented as tokens, but media queries should still use literal values. Keep the token name in comments so the contract stays readable.
Breakpoint scale
| Preview | Token | Range | Value | Computed |
|---|---|---|---|---|
480px | --sp-bp-xs | Large phones / small tablets | 30rem | — |
640px | --sp-bp-sm | Tablets | 40rem | — |
832px | --sp-bp-md | Wide tablets / small laptops | 52rem | — |
1200px | --sp-bp-lg | Desktop | 75rem | — |
1440px | --sp-bp-xl | Large desktop | 90rem | — |
Recommended usage
Spectra is mobile-first. Start from the base layout, then widen at the point where the composition genuinely needs more room.
/* --sp-bp-md */
@media (min-width: 52rem) {
.docs-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}