How SpaceZero stays mobile-first: fluid by default, with responsive prefixes allowed and used sparingly only where a single layout cannot work.
SpaceZero is mobile-first: every component is designed for the smallest screen first.
sm:, md:, lg:, xl:, 2xl: are allowed in all files. They are used sparingly — only where a single fluid layout genuinely cannot work (e.g. a modal's max width, the profile page's two-column grid, the footer's row layout).
// Profile page: single column on mobile, two columns from md up
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
// Footer: stacked on mobile, row from md up
<div className="flex flex-col md:flex-row items-center gap-3 md:justify-between">
Most layouts need no breakpoints at all:
// Fluid: full width, constrained, centered
<div className="w-full max-w-lg mx-auto px-5">
All interactive elements meet the 44×44px minimum using the py-3 scaling token:
// Button
py-3
// Input
py-3
// Select trigger
py-3
One title size, no fluid clamp():
<HeroTitle>Any Title</HeroTitle> // text-5xl font-hero font-semibold
ModalDialog is fluid with one breakpoint for the desktop cap:
w-full max-w-full rounded-5 border border-border bg-layer p-5 md:max-w-lg
md and up): constrained to 512px