Spacing & Grid

Our layout strategy is built on a mathematical 8pt grid, ensuring consistency from high-density dashboards to expansive landing pages.

8pt Base Grid

All spatial relationships follow an 8-point incrementally base. This ensures mathematical vertical and horizontal rhythm.

Logical Insets

We use logical properties (padding-inline-start/end) to support LTR/RTL layout without custom overrides.

Gutter Hierarchy

Fixed gutter ratios for high-density dashboards (16px) versus marketing canvases (24px+).

The 8pt Explorer

Experience the mathematical rhythm of the GateFlow space.

Spacing Tokens

Atomic4px
Core8px
Gap16px
Section24px
Loose32px
Hero48px

Built on
Certainty.

GAP: 32PX
GAP: 32PX
Live Spacing GeometrySCALED 1:1 TO SYSTEM TOKENS

Institutional Gutter Policy

We strictly enforce a 16px gutter policy for all operational dashboards. For high-conversion marketing pages, we expand to a 48px (Hero) fluid gutter. This ensures that the densest parts of GateFlow, like Audit Logs and Residents Lists, remain calm and readable without excessive "whitespace" fatigue.

Dashboard: 16px
Marketing: 48px