Layout

Spacing scale, grid systems, and responsive breakpoints consumed by channel templates and `@ontopix/nuxt-layer-ui`.

Production

Layout is the structural data of the design system. Base unit is 4px; grids are 12-column with per-context gutters and margins; breakpoints follow a mobile-first scale. Narrative guidance (prose, examples, implementation walkthroughs) lives as doc pages rendered from this data, not inside metadata.

Spacing System

The spacing system is based on a 4px base unit, matching the Tailwind CSS default spacing scale. Spacing tokens are organized by context (component, element, section) with semantic names (xs through 2xl).

For the full spacing scale, see Spacing.

Grid System

The grid uses a 12-column layout with 24px gutters and centered containers.

For complete grid system, see Grid.

Breakpoints

NameMin WidthTailwind Prefix
sm640pxsm:
md768pxmd:
lg1024pxlg:
xl1280pxxl:
2xl1536px2xl:

Related Sections

  • Spacing — Spacing scale (base unit, tokens, contexts)
  • Grid — Grid structures per context: web, docs, print, dashboard, presentation
  • Channels — Which grid each channel template uses

Type Scale

Type scale reference

Grid System

Grid structures for web, docs, print, dashboard, and presentation contexts.