Layout &
Structure
The invisible framework behind every composition. Structure creates freedom — constraint is the canvas.
The 12-Column Grid
12 columns because it divides evenly by 2, 3, 4, and 6 — allowing flexible compositions without guesswork. Use it for web layouts, presentation slides, and print collateral.
Two Column
6 cols + 6 cols — Equal split
Three Column
4 cols + 4 cols + 4 cols — Feature grids
Sidebar + Content
3 cols + 9 cols — Sidebar compositions
Asymmetric
5 cols + 7 cols — Editorial layouts
Border
Borders are always thin. This constraint keeps compositions clean and lets content — not chrome — command attention.
No thick borders. Anything above 1px breaks the Glass Box visual language. Borders define structure — they should never compete with content.
The Glass Box Effect
Glassmorphism is functional, not decorative. Use it for elements that float over content — navigation bars, overlay panels, and layered compositions that need to preserve context.
Standard Glass Treatment
Blur preserves context while creating clear hierarchy. The content behind remains visible but recedes.
When to Use
Navigation bars, floating panels, layered compositions where background context adds value
When NOT to Use
Static content containers (use flat with thin border), decorative background elements
Flat by Default
We don't use drop shadows for separation. Content sits flat on the void, defined by hairline borders and contrast. Shadows are reserved for elevated moments — overlays and focus states that demand attention.
Why no shadows by default? Drop shadows create fuzzy edges that compete with content. Separation comes from contrast and thin borders, not simulated light.
Negative Space
Empty space is never wasted. It's the field that makes content feel deliberate — a signal of confidence, precision, and restraint.
More empty than full
60–70% of any composition should be negative space. If a layout feels "full," it's overfull. Remove elements before adding.
Space as signal
A lone element in a large field reads as important. Don't dilute it with neighbors. The void directs the eye as powerfully as the object itself.
Resist the urge to fill
When a layout feels "empty," that's often correct. Unease with space is a creative instinct to override — not follow.
Margins as frame
Margins aren't wasted real estate — they frame content like a mat around artwork. Remove the mat and the piece feels small and crowded.
The frame matters as much as the content. Product.ai compositions give content room to breathe — the space around a headline is as designed as the headline itself.
Composition
Structural patterns for brand layouts — presentations, hero sections, print, and social. These are starting points, not formulas. Each one commits to a single focal anchor.
One anchor per composition. Decide where the eye should land first, then build outward from that point. A layout with two focal points has none.
Layout Templates
Common patterns for consistent structure across brand touchpoints — web, presentations, and print.
Single Column
Max 700px (text) or 1400px (full). Center-aligned, 64px vertical padding.
Two Column (Sidebar)
Sidebar 280px fixed, content fluid, 24px gap.
Three Column Grid
Equal thirds, 24px gaps. Feature grids, card layouts.
Full Bleed Hero
Edge-to-edge background, content at 1400px, 96px vertical padding.
Do's and Don'ts
The grid is non-negotiable. Follow these rules to maintain spatial consistency across all brand materials.
✓ Do
Align everything to 4px grid
Use semantic spacing (8, 16, 24, 32, 48, 64, 96)
Keep text under 700px wide
Use thin borders only (0.5–1px)
Reserve shadows for elevated overlays only
Apply glassmorphism to sticky nav
✗ Don't
Use random spacing (13px, 27px, 41px)
Let text run full-width on wide screens
Use thick borders (2px+) on content containers
Add drop shadows to cards or panels
Use blur for decorative purposes
Ignore the 12-column grid