Accedi Consulenza Crea gratis

Colori e stile

Il design system del builder, spiegato in modo visivo

Palette, tipografia e token CSS che collegano Brand identity, canvas e sito pubblicato — senza dover indovinare hex o rifare gli stessi stili a ogni blocco.

Apri il builder Brand identity

Token chiari, stile coerente

Ramp di colore, classi tipografiche e componenti UI condivisi: il riferimento visivo per comporre nel builder con la stessa grammatica del sito pubblicato.

Palette di riferimento

Primary, neutrals e feedback

Scale complete con token CSS e hex: la base condivisa per CTA, testi, superfici e stati semantici del builder.

Esplora le palette

Tipografia

Gerarchie e classi utility

Heading, lead, caption e link con scale coerenti su desktop, tablet e mobile — sempre tramite classi condivise.

Vedi le classi

UI e token

Bottoni, badge e flusso brand

Componenti semantici mappati sui colori del progetto, collegati alle variabili --bv-* e --color-*.

Brand identity

01

Palette Martini

Ramp di riferimento per CTA, testi, superfici e stati del builder. Passa il cursore su ogni segmento per il token CSS.

Primary

Blu Martini per CTA, link e accenti interattivi. La scala va dal 800 (testo su fondo chiaro) al 25 (sfondi soft).

800Hover link600Stati attivi500CTA · link300Bordi soft100Badge25Hero · bande
Dettaglio token e hex
  • 800Hover link--color-primary-800#082c62
  • 600Stati attivi--color-primary-600#0f58c4
  • 500CTA · link--color-primary-500#136ef5
  • 300Bordi soft--color-primary-300#71a8f9
  • 100Badge--color-primary-100#b8d3fc
  • 25Hero · bande--color-primary-25#e7f0fe

Neutrals

Grigi e bianchi per testo, bordi e superfici. Secondary per copy e UI; Third per sfondi e card.

950Titoli700Body400Muted200Dividerthird-200SezioniwhiteCard
Dettaglio token e hex
  • 950Titoli--color-secondary-950#0a0a0a
  • 700Body--color-secondary-700#3c3c3c
  • 400Muted--color-secondary-400#818181
  • 200Divider--color-secondary-200#f0f0f0
  • third-200Sezioni--color-third-200#efeeec
  • whiteCard--color-third-100#ffffff

Feedback

Colori semantici per messaggi, alert e stati del builder (successo, errore, info).

Dettaglio token e hex
  • SuccessConferme--color-success-500#15803d
  • DangerErrori--color-danger-500#ce4c4c
  • AccentHighlight--purple#6248ff
  • Info bgNotice--color-info-bg#e7f0fe
  • Warning bgAttenzione--color-warning-bg#fff7ed
  • Error bgAlert--color-error-bg#ffd6dd
Colori

Color picker legato al brand

Selezioni una tinta dal pannello Brand o incolli un hex: il valore si salva come variabile CSS del blocco. Se aggiorni la palette, la modifica può propagarsi ovunque.

Apri il builder Brand identity
Tipografia

Gerarchie chiare su ogni breakpoint

Heading, lead e caption con scale coerenti su desktop, tablet e mobile. Font dal catalogo Google o dal tuo brand, sempre tramite classi condivise.

Vedi le classi
UI

Bottoni e badge già pronti

Primary, secondary, link e badge usano classi semantiche (primary-button, secondary-button) mappate sui colori del progetto.

Apri il builder Componenti
Token

Dal pannello Brand al sito live

Le variabili --bv-* nascono in Brand identity e alimentano canvas e pubblicazione. I token --color-* sono la base condivisa del tema stage.

  • Brand identity — palette, font, spaziature globali
  • Canvas — classi utility, inspector, componenti
  • Pubblicazione — stessi token sul sito online
Brand identity
Classi

Classi tipografiche live

Esempi delle utility usate nelle pagine stage e consigliate nei layout del builder: h1, p-large, a-large e altre.

Inizia gratis Design nel builder

h1 Titolo principale

h2 Titolo di sezione

p-large Lead e paragrafi introduttivi sotto gli heading.

p-small Eyebrow, label, meta e didascalie.

a-large Link e CTA testuali

Guide su design, colori e builder

Palette, tipografia, brand e ottimizzazione: articoli utili per curare lo stile del sito e sfruttare al meglio la piattaforma.

Guarda il nostro blog

Imposta il tuo brand e pubblica coerente

Usa questa pagina come riferimento visivo, poi passa a Brand identity per configurare palette, font e token del tuo progetto nel builder.

Scopri Brand identity Inizia gratis

Brand identity

Configura palette e tipografia nel builder

Da Colori e stile al pannello Brand: imposti token globali una volta sola e li ritrovi su canvas, componenti e sito pubblicato.

Brand identity Design nel builder