Brand
guidelines.
Un linguaggio essenziale, tecnico e riconoscibile. Il marchio, i caratteri e gli elementi che danno forma all'esperienza digitale Faccini.
Il marchio.
Applicazione su fondo chiaro
Applicazione su fondo scuro
Blu #0389B9 e grigio #9A9999 provengono dagli SVG forniti. Il logotipo mantiene il disegno originale; Space Grotesk e IBM Plex Sans appartengono alla proposta per il sito.
Carattere e gerarchia.
Space Grotesk
Medium 500 / Semibold 600
Titoli e numeri in evidenza
IBM Plex Sans
Regular 400 / Medium 500 / Semibold 600
Lettura e interfaccia
| Stile | Dimensione | Peso | Interlinea |
|---|---|---|---|
Titolo paginaLa forma degli spazi.type-page-title | 36 / 60 / 72 | 600 | 112% |
Titolo sezioneIl nostro saper fare.type-section-title | 30 / 36 / 48 | 500 | 120% |
Titolo schedaFiniture e dettaglifont-display | 24 / 32 | 500 | 130% |
Testo principaleCompetenza tecnica, cura artigianale.type-body | 18 / 20 | 400 | 170% |
InformazioniMilano / Residenziale / 2024type-caption | 14 | 400 | 150% |
EtichettaLA NOSTRA VISIONEtype-eyebrow | 12 | 600 | 150% |
Evidenziazioni nei paragrafi
Il nostro team conta più di 100 operatori, con competenze specializzate e un aggiornamento continuo su tecniche e materiali.
Grassetto 600 e blu del tema: una sola evidenziazione per i dati chiave, senza interrompere la lettura.
Una palette, due temi.
Colori del marchio
#0389B9#9A9999#FFFFFF#18181BColori funzionali
#026B91#015575#63CEF2Il blu del marchio resta invariato nel logo. Le varianti digitali servono a mantenere leggibili link, pulsanti e stati.
LIGHT / WHITE
Dare forma allo spazio.
Testi principali #3F3F46. Informazioni secondarie #52525B.
Accento testuale #026B91DARK / GRAPHITE
Dare forma allo spazio.
Testi principali #D4D4D8. Informazioni secondarie #A1A1AA.
Accento testuale #63CEF2Elementi d'interfaccia.
Pulsanti / Azioni
Altezza minima 44 px. Focus visibile; il testo nomina l'azione.
Input / Stati
Categorie / Selezione
Disclosure / Dettagli
Specifiche del componente
Separatore sottile, area cliccabile ampia e contenuto con interlinea 1.7. L'apertura funziona anche da tastiera.
Uso del contrasto
Testi normali almeno 4,5:1. Il grigio del marchio è un colore grafico, non il colore dei paragrafi su bianco.
Iconografia / Lucide / 20 px / Stroke 1.5
Spazio per il contenuto.
Griglia / 12 colonne
Contenitore 1280 px. Margini 24 px su mobile, 40 px su desktop. Spaziature su multipli di 4 e 8.
Ritmo / Scala degli spazi
Hero fotografica
Media a tutto schermo, contenuto in basso a sinistra, contrasto scuro localizzato. Stessa composizione per il futuro video o slideshow.
Intestazioni interne
Indice, titolo ad alto contrasto e introduzione breve. Nessun effetto sfocato sui testi e navigazione su fondo stabile.
Accessibilità
Un H1 per pagina, gerarchie H2/H3, testi da 16 px, etichette da 12 px. Verifica in entrambi i temi e a larghezze mobili.