# Layout Systems

_Framework: agency_v3_1 | Estratto: 2026-03-09_
_Usato da: agency-design-system, agency-creative-director_

## Sommario

Grid, spacing, density per coerenza e ritmo verticale.

---

## Grid (Web)

**Desktop:** 12 colonne (o 2/3/4 macro colonne)
**Tablet:** 8 colonne
**Mobile:** 4 colonne (stack verticale)

**Regola pratica:**
- Usa una "content column" leggibile (non full-width testo)

---

## Container Widths

**Linee guida:**
- Max content width: 1100-1200px
- Reading width per paragrafi: 60-80 caratteri

---

## Spacing System

**Scala modulare preferita:** 4/8/16/24/32/48/64

**Sezioni:**
- Padding top/bottom minimo: 64-96px desktop, 40-64px mobile
- Separare sezioni con whitespace, non linee ovunque

---

## Density Modes

| Mode | Descrizione | Uso |
|------|-----------|-----|
| Airy | Più spazio, premium feel | Brand luxury, high-end |
| Balanced | Equilibrio | Maggior parte dei casi |
| Dense | Compatto | Pagine data-heavy |

**Regola:** Scegli 1 density mode dominante e mantienilo.

---

## Vertical Rhythm

- Headline → supporting → content → CTA: sempre con spacing prevedibile
- Evitare "salti" casuali

---

## Responsive Heuristics

- Non "ridurre" tutto: spesso serve "stackare" e cambiare ordine
- CTA sempre tappabile e visibile
- Immagini: evitare crop che elimina il soggetto

---

_Reference generato da framework-translator_