Space in Overprint follows an 8-point rhythm with more space between groups than within them (D-B10). The scale is 4 px steps, so components can be precise, and layouts use the even steps, so pages line up.
The space scale#
| Token | Value | Pixels | Size |
|---|---|---|---|
--mk-space-0 | 0 | 0 | |
--mk-space-1 | 0.25rem | 4 | |
--mk-space-2 | 0.5rem | 8 | |
--mk-space-3 | 0.75rem | 12 | |
--mk-space-4 | 1rem | 16 | |
--mk-space-5 | 1.25rem | 20 | |
--mk-space-6 | 1.5rem | 24 | |
--mk-space-7 | 1.75rem | 28 | |
--mk-space-8 | 2rem | 32 | |
--mk-space-9 | 2.25rem | 36 | |
--mk-space-10 | 2.5rem | 40 | |
--mk-space-11 | 2.75rem | 44 | |
--mk-space-12 | 3rem | 48 | |
--mk-space-13 | 3.25rem | 52 | |
--mk-space-14 | 3.5rem | 56 | |
--mk-space-15 | 3.75rem | 60 | |
--mk-space-16 | 4rem | 64 | |
--mk-space-20 | 5rem | 80 | |
--mk-space-24 | 6rem | 96 | |
--mk-space-32 | 8rem | 128 | |
--mk-space-40 | 10rem | 160 |
Tailwind's --spacing matches the scale, so p-4 and var(--mk-space-4) are the same 16 px.
Rhythm#
| Token | From phone to desktop | Use |
|---|---|---|
--mk-section-sm | 24 to 32 px | tight sections, bands |
--mk-section-md | 48 to 64 px | most sections |
--mk-section-lg | 64 to 96 px | heroes, big breaks |
--mk-gap-group | 32 to 48 px | between groups in a section |
--mk-gap-stack | 12 to 16 px | inside a group |
Widths and breakpoints#
| Width | Value | Use |
|---|---|---|
--mk-width-prose | 70 characters | long reading |
--mk-width-content | 72 rem | most pages |
--mk-width-wide | 90 rem | galleries, wide tables |
Breakpoints sit at 48, 64, 90 and 120 rem (768, 1024, 1440 and 1920 px). Components respond to their container rather than the window wherever they can (container queries at 30, 48, 64 and 80 rem), so a card works in a sidebar and in a full-width grid alike.
The poster grid#
Twelve columns from 64 rem, eight from 48 rem and four on phones, with a margin of 16 to 64 px and a gutter of 16 to 32 px. The named layouts are broadside (full width), spread (two halves), split (seven and five), lead (eight and four), columns-3, columns-4 and proof (small multiples). Saturated areas never touch: a paper gutter of at least 16 px sits between them.
| Token | Value in this look | Varies by | Description |
|---|---|---|---|
--mk-margin | clamp(1rem, -0.1143rem + 4.571vw, 4rem) | nothing | The page margin, 16 to 64 px. |