Sidebar + Content
Use a .col-4 sidebar with a .col-8 content area for blog and documentation pages.
Grid System
The twelve-column grid that quietly holds every POLARIS page together.
Grid System
Twelve-column foundation — the layout backbone of every Polaris page.
.col-12
.col-6
.col-6
.col-4
.col-4
.col-4
.col-3
.col-3
.col-3
.col-3
.col-8
.col-4
.col-3
.col-6
.col-3
Common Patterns
Three layouts that cover 90% of Polaris pages.
Card Grid
Equal .col-4 cards for ticket tiers, services and team profiles.
Hero + Split
Full-width hero with a 50/50 split below for image + statement blocks.
Spacing Scale
The vertical rhythm Polaris uses across every section heading.
| Token | Value | Use |
|---|---|---|
--space-1 | 4px | Inline gaps between icon and label. |
--space-2 | 8px | Tag padding and badge insets. |
--space-3 | 16px | Card inner padding. |
--space-4 | 24px | Section header bottom margin. |
--space-5 | 40px | Section padding top and bottom. |
--space-6 | 72px | Page hero padding on desktop. |