01 — Base Unit

Everything is 8.

The Alveon spatial system is built on an 8px base unit. Every dimension, margin, padding, and gap is a multiple of 8. This creates consistent visual rhythm across all touchpoints, from a shoe label to a pitch deck.

8
1 unit
16
2 units
24
3 units
4
32
4 units
6
48
6 units
8
64
8 units
12
96
12 units
16
128
16 units
WHY 8
8 divides cleanly into most screen resolutions. It scales predictably at 0.5x, 1x, 1.5x, 2x, and 3x. It produces comfortable reading rhythms and aligns with common type sizes. And it is the standard unit of Material Design, iOS, and most modern design systems.
02 — Spacing Scale

Named tokens. Not magic numbers.

Every spacing value has a name, a number, and a job. Use tokens, not raw pixel values. This keeps the system maintainable as it scales.

space-1
4px
Inline gaps, icon padding
space-2
8px
Tight element spacing
space-3
16px
Paragraph gaps, small margins
space-4
24px
Card padding, grid gutter
space-5
32px
Section sub-spacing
space-6
48px
Content margins, section padding
space-7
64px
Large component gaps
space-8
96px
Section spacing
space-9
128px
Page section breaks
space-10
160px
Hero sections, dramatic pauses
03 — Column Grid

12 columns. 24px gutter. Flexible margins.

The grid adapts to screen width. Columns collapse, margins compress, but the 24px gutter stays constant across all breakpoints above mobile.

MARGIN
1
2
3
4
5
6
7
8
9
10
11
12
MARGIN
DESKTOP / 12 columns / 24px gutter / 48px margin 1200px+
Breakpoint Token Width Columns Gutter Margin Content Max
Mobile $bp-sm < 600px 4 16px 24px fluid
Tablet $bp-md 600 – 959px 8 24px 32px fluid
Desktop $bp-lg 960 – 1439px 12 24px 48px 1100px
Wide $bp-xl 1440px+ 12 24px auto 1100px
NOTE
Content maximum is 1100px. On screens wider than 1440px, the grid centers with auto margins. Content never stretches beyond 1100px. This preserves optimal line lengths (60-75 characters) and keeps the layout focused.
04 — Layout Zones

Common column configurations.

Standard layouts snap to the 12-column grid. These are the configurations used across all Alveon touchpoints.

FULL WIDTH / 12 COLS
Content 12/12
NARROW CONTENT / 8 COLS CENTERED
2
Content 8/12
2
SPLIT / 6 + 6
Left 6/12
Right 6/12
ASYMMETRIC / 4 + 8
Sidebar 4/12
Content 8/12
CARDS / 4 + 4 + 4
Card 4/12
Card 4/12
Card 4/12
05 — Vertical Rhythm

Breathing room is not optional.

Alveon uses generous vertical spacing. Content breathes. Sections are separated by dramatic pauses. The white space is as much a part of the design as the content.

WITHIN COMPONENTS
Tight
space-2 to space-4 (8-24px). Label to headline, headline to body, icon to text. Elements that belong together stay close.
BETWEEN COMPONENTS
Comfortable
space-5 to space-7 (32-64px). Card to card, block to block, group to group. Enough room to scan, not enough to lose context.
BETWEEN SECTIONS
Dramatic
space-8 to space-10 (96-160px). Page section to section. The pause that says: this is a new thought. Generous is always better than cramped.
LINE HEIGHT SCALE
Headlines
1.05
Tight. Stacked. Architectural.
Subheads
1.2
Balanced. Clear. Scannable.
Body
1.65
Comfortable reading. Room to breathe.
Mono / Labels
1.4
Data-friendly. Compact but legible.
06 — Format Rules

Common formats. Fixed margins.

Print and presentation formats use consistent margin rules derived from the 8px base unit. Margins scale with format size but maintain proportional consistency.

24mm
20mm
A4 Document / 210 × 297mm
Margins: 24mm top / 20mm sides / 20mm bottom
48px
64px
Pitch Deck / 16:9 (1920 × 1080)
Margins: 48px top-bottom / 64px sides
6mm
8mm
Business Card / 85 × 55mm
Margins: 6mm top-bottom / 8mm sides
07 — Layout Principles

Six rules for every composition.

01
Align to the grid. Always.
Every element sits on the column grid. No eyeballing, no half-columns, no arbitrary offsets. If it does not snap to the grid, it does not ship.
02
White space is content.
Negative space communicates hierarchy, confidence, and precision. When in doubt, add more space, not more content. Cramped layouts are never Alveon.
03
Left-aligned. Always.
Text is left-aligned by default. Centered text is allowed only for hero statements and cover pages. Right-aligned text is used only for opposing columns in contrast tables. Never justify.
04
One focal point per view.
Every layout has one dominant element: a headline, a number, or an image. Everything else supports it. If two elements compete for attention, the layout is wrong.
05
Label, content, metadata.
The standard Alveon information stack: orange label on top, content in the middle, metadata at the bottom. This pattern repeats at every scale, from a card to a full page.
06
The system scales.
A shoe label and a trade show booth use the same grid proportions, spacing tokens, and information hierarchy. If a layout works at 55mm, it should work at 5 meters.
08 — Quick Reference

Copy-paste ready.

Complete token table for development handoff.

Token Value CSS Variable Usage
space-14px--space-1Inline gaps
space-28px--space-2Tight spacing
space-316px--space-3Paragraphs, small margins
space-424px--space-4Card padding, gutters
space-532px--space-5Sub-section spacing
space-648px--space-6Content margins, sections
space-764px--space-7Large component gaps
space-896px--space-8Section spacing
space-9128px--space-9Page section breaks
space-10160px--space-10Hero sections
gutter24px--gutterColumn gap (16px mobile)
margin-sm24px--margin-smMobile margin
margin-md32px--margin-mdTablet margin
margin-lg48px--margin-lgDesktop margin
content-max1100px--content-maxMaximum content width
radius-sm4px--radius-smSmall elements, buttons
radius-md8px--radius-mdCards, inputs
radius-lg12px--radius-lgContainers, modals
ALVEON Grid & Layout v1.0
February 2026 · Confidential