Layout
Spacing, grid, and responsive breakpoint specifications for consistent layouts across all Ontopix products.
Production
The Ontopix layout system ensures visual consistency and responsive adaptation across all platforms. Based on a 4px base unit with 12-column grids and semantic spacing tokens.
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
| Name | Min Width | Tailwind Prefix |
|---|---|---|
| sm | 640px | sm: |
| md | 768px | md: |
| lg | 1024px | lg: |
| xl | 1280px | xl: |
| 2xl | 1536px | 2xl: |