agency-skills-suite/agency-shared-references/references/layout_systems.md
AgentePotente 3ac65557a0 Pulizia README e references: Publishing Gates rivisto, rimossi header/footer framework
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)
2026-03-11 01:24:00 +01:00

1.3 KiB

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