16px
16px
16px
16px
16px
343px
375px
Small 375px
Small viewport
A constrained mobile frame showing how spacing and grid annotations collapse for narrow screens.
Spacing scale and layout rhythm used for padding, gaps, and section breaks between UI elements.
Layout grids define structure, hierarchy, and responsive alignment. These exported Figma frames show how the spacing system translates across small, tablet, and desktop contexts using measured columns, gutters, and outer margins.
Small viewport
A constrained mobile frame showing how spacing and grid annotations collapse for narrow screens.
Tablet viewport
A tablet-width layout demonstrating wider gutters, measured columns, and intermediate container behavior.
Large desktop viewport
A wide desktop frame that illustrates the full grid span, outer margins, and large-screen rhythm.
Container widths establish the maximum working area for content and help preserve readable line lengths, predictable margins, and consistent column behavior as the viewport expands.
Compact container for dense reading widths and focused content modules.
Balanced content width for forms, editorial layouts, and tablet-aligned flows.
Primary application container for medium-density dashboards and workspace views.
Expanded container for multi-column layouts with higher information density.
Use directional measurement guides to communicate horizontal and vertical spacing in redlines and implementation handoff.
Use horizontal measurements to communicate gaps, gutters, inset spacing, and distribution across the x-axis.
Use vertical measurements to define stack rhythm between headings, field groups, cards, and component sections.
These guides document the shared spacing scale used for redlines, layout decisions, and handoff. Each token maps a named step to a rem and pixel value so the same spacing language can be used in design files and implementation.
| Name | Size (16px base) | Pixels |
|---|---|---|
| 1 | 0.25rem | 4px |
| 2 | 0.5rem | 8px |
| 3 | 0.75rem | 12px |
| 4 | 1rem | 16px |
| 5 | 1.25rem | 20px |
| 6 | 1.5rem | 24px |
| 8 | 2rem | 32px |
| 10 | 2.5rem | 40px |
| 12 | 3rem | 48px |
| 16 | 4rem | 64px |
| 20 | 5rem | 80px |
| 24 | 6rem | 96px |
| 32 | 8rem | 128px |
| 40 | 10rem | 160px |
| 48 | 12rem | 192px |
| 56 | 14rem | 224px |
| 64 | 16rem | 256px |
Reference material from the source design that expands on grid construction and reusable style systems.
Reference material from the source design that expands on grid construction and reusable style systems.