Il sistema
di Consulenza Confusa

Principi

Sobri nella grafica,
irriverenti nei testi.

Il sito è scuro, arioso, con vetro smerigliato e un unico verde a fare da accento. La satira sta nelle parole, non nell'interfaccia: così il contenuto può essere sfacciato senza sembrare sciatto.

Logo

Consuelo e la firma.

Tre elementi: il marchio (il gatto Consuelo), il logotipo (consulenza confusa, due righe) e il lockup che li unisce. Ogni variante è vettoriale e scaricabile in SVG o PNG a 512, 1024 e 2048px.

Area di rispetto e misure minime

Attorno al logo lascia sempre uno spazio libero pari a metà dell'altezza della testa di Consuelo (indicato con x). Nessun elemento, testo o bordo può entrarci.

Come si comporta sui fondi

Cosa non fare mai

Colori

Navy, vetro,
e un verde soltanto.

Palette a base navy con un unico verde d'accento. Gli azzurri servono per il testo secondario; i toni "vetro" creano le superfici. Regola d'oro: il verde è una spezia — CTA, numeri, dettagli attivi — mai grandi campiture.

Palette brand

Clicca una tessera per copiare l'HEX.

Colori del logo

Vivono solo dentro il marchio. Non usarli nell'interfaccia.

Toni "vetro"

Proporzione 60 · 30 · 10

Il verde su testo va sempre verificato per contrasto: usalo su fondo scuro, mai su azzurri chiari.

Tipografia

Due famiglie.
Non una di più.

Garet per tutto, dai titoli al corpo, con pesi dal 350 al 900. Sedgwick Ave è il tocco scritto a mano, in verde, riservato a una o due parole per dare calore.

Scala tipografica

Pesi di Garet

Layout & spazi

Molto respiro,
poche cose.

Contenuto centrato in un contenitore massimo, con ampio respiro verticale. Le griglie collassano a una colonna su mobile.

Superfici & glass

L'elemento firma.

Bianco a bassa opacità, bordo sottile, sfocatura dello sfondo. Usala per raggruppare contenuti sopra il navy.

.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
             0 20px 50px rgba(0,0,0,.22);
}

Lo sfondo della pagina ha tre aloni sfocati fissi (.bg-glow) che danno profondità. Non aggiungere altri gradienti: bastano quelli. La sfocatura del vetro funziona solo se sotto c'è qualcosa.

Bottoni

Uno verde.
Gli altri no.

Due varianti: verde per l'azione principale (una sola per schermata), ghost per le secondarie. Sempre a pillola, con leggero sollevamento in hover.

<button class="btn btn-green">Iniziamo</button>
<button class="btn btn-ghost">Scopri di più</button>
<button class="btn btn-green btn-sm">Piccolo</button>

/* Il testo del bottone verde è verde scurissimo
   (#00301F), non nero: mantiene il tono. */

Componenti

I mattoni.

Tutti vivono sopra il navy e usano le superfici di vetro.

Card servizio

Numeri / statistiche

FAQ (accordion)

Tag e pillole

Pannello CTA finale

Form & campi

Chiedi poco.
Chiedi bene.

<div class="field">
  <label>Email</label>
  <input type="email" name="email" required />
</div>

/* Bordo verde in focus + alone rgba(51,179,138,.14).
   Mantieni sempre l'attributo name su ogni campo. */

Movimento

Discreto,
o niente.

Animazioni brevi e coerenti. Curva cubic-bezier(.22,.61,.36,1), durate tra 200 e 500ms. Tutto si disattiva con prefers-reduced-motion.

Tone of voice & Consuelo

L'ironia è il mezzo,
non il fine.

Scriviamo come parla un consulente che ha smesso di fingere. Diretti, precisi, mai cinici. Chi legge deve pensare "anche a me succede" — non "mi stanno prendendo in giro".

Consuelo

Il gatto è la mascotte, non un timbro. Esiste in due forme: il marchio 2D (dentro il logo) e il personaggio 3D (fuori dal logo). Non mescolarle.

✓ Il 3D si usa per

Meme, illustrazioni, reazioni, sticker, animazioni, hero di pagina, avatar informali.

✕ Il 3D non si usa per

Firmare documenti, sostituire il lockup, contesti istituzionali, favicon, contratti.

Non deformarlo, non dargli espressioni aggressive, non fargli dire cose che il brand non direbbe. Consuelo osserva e commenta: non attacca.

Accessibilità

Leggibile per tutti.

Rapporti di contrasto verificati sul fondo navy #001E3A. Il verde è ottimo su scuro, pessimo su chiaro.

Token

Copia e incolla.

Le variabili del sistema, pronte per CSS o per il tuo design tool.

:root{
  /* colore */
  --navy:#001E3A;
  --navy-2:#04264A;
  --navy-deep:#00152A;
  --green:#33B38A;
  --green-2:#2AA47D;
  --green-ink:#00301F;
  --blue:#8CA9CE;
  --blue-soft:#C6D4E6;
  --white:#FFFFFF;

  /* logo */
  --logo-blue:#78A2C8;
  --logo-green:#47B7A2;
  --logo-navy:#001C38;

  /* superfici */
  --glass:rgba(255,255,255,.06);
  --glass-strong:rgba(255,255,255,.10);
  --glass-border:rgba(255,255,255,.16);
  --blur:30px;

  /* forma */
  --radius:22px;
  --pill:100px;
  --max:1180px;

  /* tipografia */
  --ff:'Garet',system-ui,sans-serif;
  --ff-hand:'Sedgwick Ave',cursive;

  /* movimento */
  --ease:cubic-bezier(.22,.61,.36,1);
}

{
  "color": {
    "navy":       { "value": "#001E3A" },
    "navy2":      { "value": "#04264A" },
    "navyDeep":   { "value": "#00152A" },
    "green":      { "value": "#33B38A" },
    "green2":     { "value": "#2AA47D" },
    "greenInk":   { "value": "#00301F" },
    "blue":       { "value": "#8CA9CE" },
    "blueSoft":   { "value": "#C6D4E6" },
    "white":      { "value": "#FFFFFF" },
    "logoBlue":   { "value": "#78A2C8" },
    "logoGreen":  { "value": "#47B7A2" },
    "logoNavy":   { "value": "#001C38" }
  },
  "surface": {
    "glass":       { "value": "rgba(255,255,255,0.06)" },
    "glassStrong": { "value": "rgba(255,255,255,0.10)" },
    "glassBorder": { "value": "rgba(255,255,255,0.16)" },
    "blur":        { "value": "30px" }
  },
  "radius": { "base": { "value": "22px" }, "pill": { "value": "100px" } },
  "layout": { "maxWidth": { "value": "1180px" }, "sectionY": { "value": "70px" }, "gridGap": { "value": "20px" } },
  "font": {
    "family":  { "sans": { "value": "Garet" }, "hand": { "value": "Sedgwick Ave" } },
    "weight":  { "book": 350, "regular": 400, "medium": 500, "bold": 700, "heavy": 800, "black": 900 }
  },
  "motion": { "ease": { "value": "cubic-bezier(0.22,0.61,0.36,1)" }, "fast": { "value": "200ms" }, "base": { "value": "250ms" }, "slow": { "value": "500ms" } }
}

Riassunto

Do & Don't.