Layout
The frame every block sits in: four mobile-first breakpoints, a centred content container, a constant gutter and a two-step section rhythm. Every value comes from the production site and points at an existing step on the 4px grid.
The responsive type rule: every text role uses its Small variant
below tablet and its Large variant from tablet up — in Tailwind,
type-h2-sm tablet:type-h2-lg. Blocks never pick their own breakpoint for
type.
Breakpoints
| CSS variable | Value | Tailwind | What changes |
|---|---|---|---|
| — base | 0 | no prefix | Mobile: Small type roles, section-sm padding |
--breakpoint-tablet | 768px | tablet: | Type roles switch Small → Large |
--breakpoint-laptop | 1024px | laptop: | Section rhythm steps up to section-lg |
--breakpoint-desktop | 1360px | desktop: | Content container reaches its max width |
--breakpoint-desktop-xl | 1920px | desktop-xl: | Page frame reaches its max width |
CSS can't read a variable inside
@media, so plain-CSS consumers write the px
value (@media (min-width: 768px)). The --breakpoint-* variables
in styles.css are there for reference and matchMedia().
Container, gutter & section rhythm
Token reference
| CSS variable | Value | Tailwind | Resolves to |
|---|---|---|---|
--container-content | 1360px | max-w-content | The centred content column |
--container-page | 1920px | max-w-page | Outer frame of full-bleed sections |
--space-gutter | 20px | px-gutter | --space-5 |
--space-section-sm | 32px | py-section-sm pt-section-sm pb-section-sm | --space-8 |
--space-section-lg | 80px | py-section-lg pt-section-lg pb-section-lg | --space-20 |
--hero-height | 85svh | h-hero | Hero block height; floor with min-h-112 tablet:min-h-128 |
The block frame
Every full-width block starts from the same shell:
mx-auto w-full max-w-content
px-gutter py-section-sm laptop:py-section-lg. The gutter sits inside the container,
so the text column is at most 1320px and never touches the viewport edge. See
Blocks.