Positivo
Lettere nere, punto giallo. Su carta, sabbia o bianco: è la versione principale.
stiip · brandbook
Dritti al punto.
Logo, colori, caratteri e regole per usare il marchio stiip e i marchi fratelli maba e alfaZero. Le regole segnate proposta sono ancora da confermare.
Il logo
Una parola e un punto.
Il logo è la parola stiip in minuscolo, disegnata apposta, con un segno giallo in alto a destra: il punto. Dice come lavoriamo: dritti al punto, fare il punto, un punto fermo. Ha una forma morbida, come un punto fatto a mano.
Negativo
Lettere bianche e punto giallo, con il fondo nero già nel file. Per testate, slide, fondi scuri.
Un colore
Tutto nero, punto compreso. Per la stampa a un colore, i timbri, le incisioni.
Icona
Quadrato nero con il logo al centro. Foto profilo dei social, favicon, icona di app.
I PNG hanno il fondo trasparente e sono larghi 2000 px (l'icona 1024 × 1024). Per la stampa usa sempre l'SVG.
Spazio di rispetto
Intorno al logo resta libero almeno lo spazio del punto, circa un ottavo della larghezza del logo. Niente testo, bordi o immagini in quest'area.
Misura minima proposta
80 px di larghezza sullo schermo, 20 mm in stampa. Sotto queste misure il punto diventa una macchia: usa l'icona quadrata.
Non ruotarlo.
Non deformarlo.
Niente ombre né contorni.
Non sul giallo: il punto sparisce.
E ancora: non cambiare il colore del punto, non usare il giallo vecchio, non togliere o spostare il punto, non scrivere «stiip» con un carattere al posto del logo. Su foto piene di dettagli metti il negativo su un riquadro nero.
L'ecosistema
Tre marchi, lo stesso punto.
Oltre a stiip ci sono due marchi fratelli, maba e alfaZero. Li stiamo uniformando: intanto qui ci sono i loghi attuali, preparati da Paola, in versione nera per i fondi chiari e bianca per i fondi scuri.
maba
Due tratti obliqui con il punto, la scritta MABA e la firma «DRIVEN BY stiip».
alfaZero
Una A con il punto. Due versioni: orizzontale, con la scritta a destra, e verticale, con la scritta sotto.
Orizzontale Verticale
Cosa hanno già in comune
- Il punto giallo
#FCD90D, con la stessa forma morbida, e il nero#0B0B0A. - Una versione nera per i fondi chiari e una bianca per i fondi scuri.
Cosa è ancora diverso
- I nomi usano caratteri diversi: stiip è disegnato a mano, MABA è maiuscolo e sottile, alfaZero è minuscolo con «Zero» in grassetto. Nessuno usa Fraunces o DM Sans.
- In stiip il punto sta in alto, sopra la p; in maba e alfaZero sta in basso, alla fine del simbolo, come un punto fermo.
- maba ha la firma «DRIVEN BY stiip», alfaZero no.
- alfaZero ha la versione verticale e quella orizzontale, maba solo l'orizzontale.
I colori
Carta, nero e poco giallo.
Carta e nero fanno quasi tutto. Il giallo è poco, come il punto nel logo: segna la cosa importante e basta. proposta Se il giallo copre più di un decimo della pagina, è troppo.
Giallo
RGB 252 217 13
Il punto, evidenziare, piccoli dettagli. Sopra il giallo si scrive sempre in nero.
Non usare più il giallo vecchio #EEE40C
Nero
RGB 11 11 10
Le lettere del logo, i testi, il fondo delle sezioni scure.
Carta
RGB 246 242 233
Il fondo delle pagine, al posto del bianco.
Sabbia
RGB 236 230 216
Riquadri, pillole e selettori su carta.
Bianco
RGB 255 255 255
Carte in rilievo su carta, testo su nero.
Notte
RGB 28 28 27
Riquadri sopra il fondo nero.
Grigio
RGB 110 105 95
Testo secondario su fondo chiaro.
Grigio chiaro
RGB 156 152 142
Testo secondario su fondo scuro.
Per la stampa mancano i valori CMYK e Pantone del giallo: vanno chiesti alla tipografia con una prova colore, non calcolati dal codice HEX.
Si legge?
Contrasti misurati. Il minimo per il testo normale è 4,5:1, per il testo da 24 px in su è 3:1.
| Esempio | Testo su fondo | Contrasto | Va bene? |
|---|---|---|---|
| Aa | Nero su giallo | 14,1:1 | Sì |
| Aa | Nero su carta | 17,6:1 | Sì |
| Aa | Grigio su carta | 4,88:1 | Sì |
| Aa | Grigio su sabbia | 4,38:1 | Solo da 24 px in su |
| Aa | Bianco su nero | 19,7:1 | Sì |
| Aa | Grigio chiaro su nero | 6,84:1 | Sì |
| Aa | Giallo su nero | 14,1:1 | Sì, anche nei titoli |
| Aa | Giallo su carta | 1,25:1 | Mai per il testo |
| Aa | Giallo su bianco | 1,39:1 | Mai per il testo |
I caratteri
Morbidi, come il suono.
Tre caratteri, tutti gratuiti su Google Fonts. La parola chiave del titolo va in corsivo: una o due parole, non di più.
Fraunces
Titoli e frasi d'effettoDritti al punto.
Peso 380, versione morbida (SOFT 100, WONK 0). Corsivo con WONK 1 per la parola chiave; su fondo nero può essere giallo.
DM Sans
Testi, etichette, bottoniAa Bb 123
Nessun logo nasce giusto al primo colpo. Il nostro, per esempio, ne ha passate un po'.
Testo a 18 px con interlinea 1,6. Sottotitoli in grigio.
JetBrains Mono
Solo codice e dati#FCD90D
Codici colore, comandi, numeri tecnici. Mai per i titoli: nella pagina del logo è la pronuncia «dura» di stiip, quella scartata.
| Stile | Carattere | Misura | Esempio |
|---|---|---|---|
| Titolo di sezione | Fraunces 380 | 38–83 px / 1,02 | Dritti al punto. |
| Titolo d'apertura | Fraunces 380 | 34–64 px / 1,02 | Abbiamo cambiato logo. |
| Frase | Fraunces 400 | 24–38 px / 1,2 | Sembra lo stesso, vero? |
| Sottotitolo | DM Sans 400 | 17–20 px / 1,6 | Un suono cambia a seconda di come lo pronunci. |
| Testo | DM Sans 400 | 18 px / 1,6 | Il testo corrente di pagine e documenti. |
| Etichetta | DM Sans 500 | 12,5 px · 0,16em | stiip · il nuovo logo |
| Codice | JetBrains Mono 500 | 15 px / 1,65 | rgb(252 217 13) |
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&family=JetBrains+Mono:wght@500;700&display=swap">
Le forme
Niente spigoli.
Morbide, come il suono che abbiamo scelto. Gli spigoli vivi sono la versione «dura» che abbiamo scartato.
Riquadri · 32 px
Angoli da 32 px per i riquadri color sabbia.
Carte · 40 px
Carte bianche con angoli da 40 px e l'unica ombra: calda, lontana, mai nera e netta.
PrimaDopo
Pillole
Bottoni e selettori sono sempre a pillola.
La voce
Come parliamo.
Forse non ci hai nemmeno fatto caso. Ed era proprio questo il punto.
- Frasi brevi, come si parla.
- Noi per stiip, tu per chi legge.
- Un po' di ironia, mai battute forzate.
- «stiip» minuscolo nei testi del marchio, come nel logo.
Da decidere
Cosa manca.
- I valori CMYK e Pantone del giallo per la stampa.
- Misura minima del logo e quantità di giallo: per ora sono proposte.
- Come scrivere la ragione sociale nei documenti ufficiali (fatture, contratti).
- Una riga su cosa fanno maba e alfaZero, e le regole comuni per i tre marchi: caratteri, posizione del punto, firma «DRIVEN BY stiip».