Spacing & Layout
Spacing creates breathing room around your content. Proper, consistent spacing throughout the site makes pages feel professional and easier to read.
Quick Reference - Section Spacing
| Size | Desktop Height | When to Use |
|---|---|---|
| XS | ~40px | Minimal space, tight layouts |
| S | ~60px | Small gap between related content |
| M | ~90px | Standard section spacing |
| L | ~135px | Default, comfortable breathing room |
| XL | ~200px | Extra space for visual emphasis |
| 2XL | ~300px | Maximum space, dramatic separation |
Quick Reference - Container Widths
| Size | Width | When to Use |
|---|---|---|
| XS | 850px | Narrow content like blog posts |
| S | 1100px | Forms, focused content |
| M | 1250px | Standard page content |
| L | 1350px | Wider layouts |
| XL | 1400px | Full-featured sections |
| Max | 1630px | Edge-to-edge hero areas |
Section Spacing Explained
Section spacing controls the vertical gap above and below content areas. Think of it as the "breathing room" between different parts of your page.
XS (Extra Small)
What it looks like: Very tight spacing, content sections are close together.
When to use it: When you want content to feel connected, or for dense information layouts.
Example: Multiple related paragraphs, tightly grouped card elements.
S (Small)
What it looks like: Modest spacing that still keeps sections close.
When to use it: Between closely related content blocks, or when you have many sections on one page.
Example: Sub-sections within a larger content area.
M (Medium)
What it looks like: Balanced spacing that gives content room to breathe.
When to use it: Good all-purpose choice when you want sections to feel distinct but connected.
Example: Standard content sections, feature blocks.
L (Large) - Default
What it looks like: Generous spacing that clearly separates sections.
When to use it: Default choice for most sections. Creates a professional, uncluttered feel.
Example: Main page sections, testimonials, pricing areas.
XL (Extra Large)
What it looks like: Substantial spacing that creates visual emphasis.
When to use it: When you want a section to stand out or need extra visual weight.
Example: Before/after major content shifts, call-to-action sections.
2XL (Double Extra Large)
What it looks like: Maximum spacing for dramatic effect.
When to use it: Sparingly, for high-impact moments or luxury brand aesthetics.
Example: Hero sections, major announcements, premium product showcases.
Container Width Options
Container width controls how wide your content spreads across the page.
XS Container (850px)
What it looks like: Narrow column centered on page, lots of margin on sides.
When to use it: Long-form reading content, blog posts, articles.
Why: Shorter lines are easier to read. Research shows 50-75 characters per line is optimal.
S Container (1100px)
What it looks like: Modest width with comfortable margins.
When to use it: Contact forms, focused content, single-column layouts.
Example: Newsletter signup, contact page forms.
M Container (1250px)
What it looks like: Standard content width, balanced and professional.
When to use it: Default for most page sections, two-column layouts, standard grids.
Example: Services sections, team grids, feature lists.
L Container (1350px)
What it looks like: Wider layout that uses more screen space.
When to use it: When you need more room for complex layouts or multiple columns.
Example: Three-column feature grids, comparison tables.
XL Container (1400px)
What it looks like: Near full-width for content-rich sections.
When to use it: Large card grids, portfolio galleries, content-heavy areas.
Example: Case study grids, product catalogs.
Max Container (1630px)
What it looks like: Maximum width, nearly edge-to-edge.
When to use it: Hero sections, full-width image galleries, immersive experiences.
Example: Homepage hero, full-bleed image sections.
Padding (Inner Spacing)
Padding adds space inside a container, around the content.
| Size | Effect |
|---|---|
| None | Content touches edges |
| XS | Minimal inner padding |
| S | Light inner spacing |
| M | Comfortable padding |
| L | Generous inner space |
| XL | Extra room inside |
Responsive Behavior
Spacing automatically adjusts on smaller screens:
- Desktop (1280px+): Full spacing as defined
- Tablet (768-1279px): Spacing reduces by approximately 25%
- Mobile (below 768px): Spacing reduces by approximately 50%
This ensures your content looks great on all devices without manual adjustments.
Tips for Good Spacing
- Be consistent - Use the same spacing size for similar sections throughout your site
- Group related content - Use smaller spacing between related items
- Create visual breaks - Use larger spacing to separate distinct content areas
- Don't overcrowd - When in doubt, add more space
- Consider mobile - Preview on smaller screens to ensure spacing works everywhere