agency-skills-suite/agency-shared-references/references/layout_systems.md
AgentePotente b289d87033 Conversione references in skill condivisa agency-shared-references
- Creata nuova skill agency-shared-references con 24 references centralizzate
- Spostate tutte le references da cartelle sparse (references/, agency-web-developer/, agency-archivist/) in un'unica posizione
- Aggiornati tutti i symlink delle 14 skills per puntare a ../agency-shared-references/references
- Aggiornati tutti i riferimenti nei SKILL.md (percorsi coerenti)
- README.md aggiornato con nuova struttura e istruzioni generiche
- INSTALL.sh semplificato con istruzioni platform-agnostic
- Eliminata cartella references/ dal root (ora centralizzata)
- Struttura più pulita e mantenibile, facile da installare su qualsiasi piattaforma
2026-03-11 00:11:03 +01:00

1.4 KiB

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