white-space-as-luxury

name	white-space-as-luxury
description	Use when laying out hero, section transitions, and premium content. White space is the most expensive visual real estate.

White Space as Luxury

Generous white space signals expensive. Tight layouts signal budget/template. The square inches NOT used define quality.

White-space allocation by hierarchy

Element	Padding above	Padding below
Hero	5-10 vh	5-10 vh
Major section	4-8 vh	4-8 vh
Sub-section	2-4 vh	2-4 vh
Paragraph	0	1.5em
Footer	8-10 vh	4 vh

Reserve 30-50% of screen as 'breathing room' on premium surfaces.

Container width discipline

Width caps for readability:

• Long-form body: 600-720px (45-65 characters per line)
• Article columns: 720-900px
• Hero text block: 800-1000px
• Full-width sections: 1200-1400px max
• Marketing landing pages: 1200px max

Don't let text flow to viewport edge — set max-width.

Mobile white-space

Mobile reduces vertical white-space by 30-50% (real estate constraint) but maintains horizontal padding (16-24px). Don't let mobile become claustrophobic.

Where this fits in the X3 empire

Used as a baseline scaling rule across CardPrepAI's responsive design.