[ project preview ]
Brand · Web
Foglia & Vino
Brand identity completa e sito e-commerce per una cantina artigianale toscana.
WAZHUBI
Component Library — copia, incolla, spedisci.
Library · v1.0 · 2026✦ 01 — Palette
Colori
Cinque colori core. Ogni superficie cliccabile usa una shade derivata per gli stati hover/active. Clicca uno swatch per copiarne l'HEX.
Core palette
Shade derivate — default / hover / active
Green
Default
#A6C93A
Hover
#92B133
Active
#7E992C
Lilac
Default
#CDB3F6
Hover
#B9A1DD
Active
#A48FC5
Peach
Default
#FFC79B
Hover
#E6B38C
Active
#CC9F7C
Black
Default
#111111
Hover
#2B2B2B
Active
#000000
Semantici + Focus ring
Error
#E2483D
Success
#2FA968
Ring 55%
#CDB3F6
Codice — usa i token colore
css
/* I colori vivono come CSS custom properties globali */
.mio-blocco {
background: var(--green); /* #A6C93A — primario */
color: var(--black); /* #111111 */
border: var(--bw) solid var(--black);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
}
/* palette: --green --lilac --peach --ivory --black
stati: --green-hover / --green-active (idem lilac/peach/black)
semantici: --error --success · focus: --ring */✦ 02 — Type
Tipografia
Satoshi per i display in MAIUSCOLO, Inter per il body, JetBrains Mono per dettagli tecnici. Scala modulare con line-height e letter-spacing definiti.
Make it spicy
Bold brands win
Sistemi che scalano
Strategia & design
Mescoliamo strategia, design, codice e automazione in un unico sistema connesso.
Costruiamo brand identity, siti web e automazioni AI per PMI italiane che vogliono distinguersi. Più smart, più veloci, più spicy.
Testo secondario, didascalie estese e note a margine restano leggibili anche a dimensioni ridotte.
Label · Meta · Codice
Aa
Display
Satoshi
Aa
Body
Inter
Aa
Mono
JetBrains Mono
✦ 03 — Foundations
Spacing & Radius
Scala di spacing su base 4/8px, angoli morbidi generosi, ombre solide offset e movimenti tattili. Passa il mouse sulla card "Motion" per vedere l'easing.
Spacing
s-1 · 4px
s-2 · 8px
s-3 · 12px
s-4 · 16px
s-5 · 24px
s-6 · 32px
s-7 · 48px
s-8 · 64px
Border radius
r-sm · 8px
r-md · 16px
r-lg · 24px
r-xl · 32px
r-pill · 999px
Ombre
sm 3pxmd 5pxlg 8px
Motion
✦ 04 — Actions
Bottoni
Quattro varianti, cinque stati ciascuna. Hover solleva di -2px e fa crescere l'ombra; active schiaccia di +1px.
VarianteDefaultHoverActiveFocusDisabled
Primary
Secondary
Dark
Ghost
Codice — copia & incolla
html
<!-- 4 varianti · aggiungi disabled per lo stato disabilitato -->
<button class="btn btn--primary">Avvia</button>
<button class="btn btn--secondary">Scopri</button>
<button class="btn btn--dark">Contatti</button>
<button class="btn btn--ghost">Annulla</button>
<!-- con icona a destra -->
<button class="btn btn--primary">
Make it spicy
<svg class="arr" viewBox="0 0 24 24" fill="none">
<path d="M6 18 18 6M8 6h10v10" stroke="currentColor"
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>✦ 05 — Inputs
Form
Colori di stato coerenti: bordo nero a riposo, verde + ring lilla in focus, rosso in errore, verde con check in success, grigio desaturato in disabled.
Text · stati
Inserisci un indirizzo email valido.
Indirizzo verificato.
Textarea & select
Checkbox · radio · toggle
Codice — copia & incolla
html
<!-- campo di testo -->
<div class="field">
<label>Nome</label>
<input class="inp" type="text" placeholder="Mario Rossi" />
</div>
<!-- stati: aggiungi .is-error o .is-success all'input -->
<input class="inp is-error" type="email" value="hello@wazhubi" />
<!-- select -->
<select class="inp">
<option>Brand Identity</option>
<option>Sito Web</option>
</select>
<!-- checkbox -->
<label class="check">
<input type="checkbox" />
<span class="box">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M5 12.5 10 17.5 19 7" stroke="#111" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<span>Accetto la privacy policy</span>
</label>
<!-- toggle -->
<label class="toggle">
<input type="checkbox" />
<span class="track"><span class="knob"></span></span>
<span>Notifiche email</span>
</label>✦ 06 — Surfaces
Card & Frame
Frame arrotondati con bordo nero spesso e ombra solida. Hover li solleva in diagonale — la firma "sticker" del brand.
[ project preview ]
AI Workflow
Ditta Rossi
Automazioni intelligenti che fanno risparmiare 30 ore a settimana al team.
[ project preview ]
E-commerce
Bottega 22
Negozio online veloce e responsive, costruito per convertire i visitatori.
Codice — copia & incolla
html
<!-- card sticker: bordo nero, ombra, lift in hover -->
<article class="uicard">
<h4>Titolo della card</h4>
<p>Una breve descrizione del contenuto.</p>
</article>
<!-- superficie base senza hover -->
<div class="frame" style="padding: 32px">
Contenuto dentro un frame.
</div>✦ 07 — Indicators
Badge & Tag
Pill, tag e indicatori di stato per etichettare categorie, filtri e condizioni di sistema.
Badge / pill
PrimarySecondaryWarmDarkGhost
Tag
StrategiaDesignCodiceAICrescita
Stato di sistema
OnlineIn codaErrore
Codice — copia & incolla
html
<!-- badge / pill -->
<span class="badge badge--green"><span class="dot-i"></span>Primary</span>
<span class="badge badge--lilac"><span class="dot-i"></span>Secondary</span>
<span class="badge badge--dark"><span class="dot-i"></span>Dark</span>
<!-- tag -->
<span class="tag">Strategia</span>
<!-- stato di sistema -->
<span class="status status--ok"><span class="led"></span>Online</span>
<span class="status status--warn"><span class="led"></span>In coda</span>
<span class="status status--err"><span class="led"></span>Errore</span>