Gonzato Group · Design system

Design template & styleguide

La fonte unica dei token e dei componenti per ogni nuovo documento Gonzato. Copia il blocco <style> di questo file (o build-assets/doc-style.css per i doc del pacchetto) e riusa i componenti qui sotto. Sfondo bianco, serif Georgia per i titoli, sans Helvetica Neue per il testo, accenti brass/sage/charcoal.

Uso base per nuovi doc Font Georgia · Helvetica Neue Non STR4TUM / str4t0s

Palette

--g-ink
#26251F · testo/titoli
--g-ink-2
#55534A · body
--g-muted
#8A877C · label/meta
--g-line
#D6D1C6 · hairline
--g-charcoal
#33322D · box scuri
--g-sage
#878B76 · ok/positivo
--g-brass
#A8895B · kicker/accenti
--g-panel
#FBFAF7 · superfici

Tipografia

Kicker — sans, brass, uppercase, trattino
Anteprima · Metodo di transizione
H1 display — Georgia serif 400

Far evolvere l'IT senza romperlo

H3 — Georgia serif 19px

Un sottotitolo di sezione

Body — Helvetica Neue, --ink-2

Testo corrente con enfasi ink, corsivo ink e codice inline. Interlinea 1.6, misura max ~64ch.

Pannelli (tone: warn / ok / info)

Attenzione

Pannello warn (brass): trade-off, avvertenze, punti delicati.

Fatto bene

Pannello ok (sage): esiti positivi, garanzie, cosa protegge.

Pannello info (charcoal hairline): contesto neutro, nota di metodo.

Tabella

DocumentoLanePrioritàStato
it-governance-charterHoITALTA☑ generato
asset-inventoryITMMEDIA☐ da fare
change-registerSABASSA☐ da fare

Phase band

P1Discovery / Mappingsettimane 1-4 · read-only

Card grid (kit)

Continuità operativa

  • nessun fermo
  • si cambia dopo aver capito
  • la produzione non se ne accorge

Know-how preservato

  • documentato prima del cambio
  • non appeso a una persona

Clima interno

  • si valorizza, non si espelle
  • ognuno dove rende

Lista con bullet brass

Box scuro di chiusura

Esito

Un IT di Gruppo governabile, sicuro e misurabile — pronto per lo split e la crescita internazionale.

Gotcha noto: nei box scuri (charcoal) la regola globale em{color:var(--g-ink)} rende il corsivo invisibile. Aggiungi sempre .dark-box em{color:#fff} (o l'equivalente .say em,.cheat em{color:#fff}) su ogni contenitore scuro.

Come usare