# Spacing & Layout Guidelines

## Base Units

- **5mm** — rounded corners, frame elements (primary unit)
- **0.75pt** — stroke thickness

---

## Grid Systems

### DIN A4 Portrait (210mm × 297mm)

| | Value |
|---|---|
| Margins | Top/Bottom: 25mm · Left/Right: 20mm |
| Live area | 170mm × 247mm |
| 1-column | 170mm |
| 2-columns | 80mm + 10mm gutter + 80mm |
| 3-columns | 50mm + 10mm gutters + 50mm |
| Baseline grid | 5mm |

### DIN A4 Landscape (297mm × 210mm)

| | Value |
|---|---|
| Margins | Top/Bottom: 20mm · Left/Right: 25mm |
| Live area | 247mm × 170mm |
| Flag logo | Bottom-right, 2.8cm wide |

### PowerPoint / Keynote (1920×1080px)

| | Without flag | With flag |
|---|---|---|
| Margins | 80px T/B · 100px L/R | 80px T · 160px B · 100px L · 254px R |
| Live area | 1720 × 920px | 1566 × 840px |
| Grid | 12-col (≈143px + 20px gutter) | |
| Flag logo | — | Bottom-right, 154×154px |

### Social Media (1080×1080px)

| | Value |
|---|---|
| Margins | 80px all sides |
| Live area | 920 × 920px |
| Flag logo | Bottom-right, 216px wide |
| Safe text area | 160px margins (avoids platform UI overlays) |

---

## Spacing Scale

| mm | px (≈96dpi) | 8px grid |
|----|------------|---------|
| 5mm | 19px | 16–24px |
| 10mm | 38px | 40px |
| 15mm | 57px | 56px |
| 20mm | 76px | 80px |
| 25mm | 95px | 96px |
| 30mm | 113px | 112px |

**Usage**: Margins: 20–25mm (A4) · Element spacing: 10–15mm · Section spacing: 20–25mm

---

## Frame Elements & Rounded Corners

**Rounded rectangle frames** (callouts, image frames, section dividers):
- Corner radius: **5mm** (always)
- Stroke: **0.75pt**
- Padding inside frame: 10mm · Frame-to-element clearance: 15mm minimum

**Images**: Apply 5mm rounded corners to all imagery (signature Ringier style).
- Exception: Full-bleed images (edges touch format) — no rounding needed

---

## Layout Principles

### Alignment

- **Left-aligned** (default): Natural reading flow, professional and clean, works for all text lengths
- **Centered**: Headlines, titles, formal documents — use sparingly; best for short text blocks and title slides
- **Right-aligned**: Rare — dates, page numbers, special emphasis only
- **Justified**: Avoid — creates uneven word spacing (rivers); only use in formal reports with proper hyphenation

All elements should align to the grid (left edges, right edges, or centered on grid lines).

### Whitespace

Whitespace is essential for readability and elegance — never fill every inch of a page.

- **Calm designs** (reports, investor presentations): 40–60% whitespace
- **Expressive designs** (marketing, social): 20–40% whitespace

More spacing signals greater importance or separation:
- **5–10mm**: Related elements (caption near image, sub-bullets)
- **10–20mm**: Distinct elements (headline to body, image to text block)
- **20–30mm**: Major sections (chapter breaks, topic changes)

### Visual Balance

- **Symmetrical balance** (equal visual weight both sides): Formal, stable — use for annual reports, certificates, formal invitations
- **Asymmetrical balance** (unequal weight balanced by size, color, or position): Modern, dynamic — use for marketing materials, presentations

---

## Page Numbering

- **Placement**: Bottom-center or bottom-outer corner
- **Font**: Ringier Book, 10–11pt
- **Color**: Gray (`#8a96a2`) or black
- **Format**: Page X of Y, or page number alone

---

## Format-Specific Layouts

### Report Cover

**Calm**: White bg · Standard logo top-left or centered · Title centered, Bauer Bodoni 60–80pt stacked · Subtitle Ringier Book 20pt · ~60% whitespace

**Expressive**: Colored bg · Flag logo bottom-right · White text title top-left, Bauer Bodoni 80–115pt · Connected rings as background element · ~30–40% whitespace

### Presentation Slides

**Title slide**: Standard logo (centered, white bg) OR flag logo (bottom-right, coloured bg) · Stacked title Bauer Bodoni 50–80pt · Subtitle Ringier Book 25pt

**Content slide**: Logo bottom-right — flag logo on coloured backgrounds, standard logo on white backgrounds · Headline Bauer Bodoni 40–50pt top · Body 22–18pt left-aligned · Images with rounded corners aligned to grid

**Data slide**: Logo bottom-right — flag logo on coloured backgrounds, standard logo on white backgrounds · Chart title Bauer Bodoni 36pt · Chart occupies 60–70% of slide · Source notes bottom 14pt gray

---

## Standard Margins (Digital)

| Format | Top | Bottom | Left | Right |
|--------|-----|--------|------|-------|
| 1920×1080px (no flag) | 80px | 80px | 100px | 100px |
| 1920×1080px (with flag) | 80px | 160px | 100px | 254px |
| 1080×1080px social | 80px | 80px | 80px | 80px |

---

## Do's and Don'ts

### ✅ Do

- Use a consistent spacing scale (5mm, 10mm, 15mm, 20mm, 25mm, 30mm increments)
- Align all elements to the grid (left, right, or centered on grid lines)
- Apply 5mm rounded corners to images and frames
- Maintain protected areas around logos
- Use ample whitespace (40–60% in calm designs, 20–40% in expressive)
- Balance visual weight across the layout
- Create clear hierarchy through spacing (larger gaps = greater separation)
- Left-align body text by default

### ❌ Don't

- Use arbitrary spacing values — stick to the defined scale
- Center-align all text across a layout (becomes monotonous and static)
- Crowd elements together with insufficient breathing room
- Place elements outside the grid arbitrarily
- Apply sharp corners to images (5mm rounded is the Ringier standard)
- Violate logo protected areas
- Fill every inch of space — visual clutter undermines the brand's clean aesthetic
- Use more than 3 font sizes on a single page

---

*For typography sizing within layouts, see `typography.md`*
