3ac65557a0
README.md: - Publishing Gates: sezione riscritta più chiara con workflow manuale dettagliato - Note finali: aggiornate per coerenza (publish manuale, 5 workflow) - Versione: v2.1 — No Publisher, Manual Publish Gate-Based References (19 file): - Rimosso '_Framework: agency_v3_1 | Estratto: 2026-03-09_' dall'header - Rimosso '_Reference generato da framework-translator_' dal footer - Mantenuto solo '_Usato da:_' dove presente Files modificati: 20 (1 README + 19 references)
66 lines
1.3 KiB
Markdown
66 lines
1.3 KiB
Markdown
# Layout Systems
|
|
|
|
_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
|
|
|
|
---
|
|
|