Brand

Nome

• Nel testo corrente, nel dominio e nella denominazione della società il punto è un punto normale: Kol.ski, kol.ski, Kol.ski sp. z o.o. Sempre con la K maiuscola, mai tutto in maiuscolo.
• Nel wordmark e nei nostri titoli il punto diventa un punto elenco tra le due sillabe: Kol•ski (U+2022). In un documento ci atteniamo a una sola delle due forme.
• No: Kolski, Kol-ski, Kol ski, KOL.SKI, kol.ski a inizio frase.
• Dove ci si aspetta un logo, il nome è sostituito dal wordmark; non lo componiamo in un altro carattere al posto del wordmark.

Wordmark

Il wordmark è il nome composto nel carattere Google Sans Flex nella variante più pesante, con il punto disegnato come un cerchio tra “Kol” e “ski”. Lo forniamo come tracciati, quindi per usarlo non serve alcun font. Sempre in un solo colore: bianco su sfondo scuro, nero su sfondo chiaro.

• 

  Bianco, per sfondi scuri: wordmark-white.svg

• 

  Nero, per sfondi chiari: wordmark-black.svg

• Area di rispetto: almeno metà dell’altezza del wordmark su ogni lato, senza testo né altri segni.
• Dimensione minima: 16 px di altezza su schermo, 5 mm in stampa.
• Non deformiamo, non ruotiamo, non contorniamo, non ombreggiamo e non ricoloriamo il wordmark; non lo riempiamo con il gradiente. Sulle fotografie lo posiamo su una zona calma o su una sovrapposizione scura.
• Non usiamo la combinazione del cerchio con il wordmark: il wordmark contiene già il punto.

Cerchio del brand

Il punto del wordmark da solo: un cerchio riempito con i quattro colori del brand come quattro campi morbidi che fluttuano su un gradiente lineare. È il segno per tutto ciò che è quadrato o rotondo: favicon, immagini del profilo, icone delle app. Il cerchio statico è il fotogramma zero dell’animazione, quindi ogni versione mostra la stessa immagine.

• 

  Gradiente, versione principale: circle-gradient.svg

• 

  Gradiente su sfondo chiaro: circle-gradient.svg

• 

  Animato, loop di 36 s: circle-gradient-animated.svg

• 

  Bianco, dove il colore non funziona: circle-white.svg

• 

  Nero, dove il colore non funziona: circle-black.svg

• Immagini del profilo: avatar-gradient-fill.png per le piattaforme che ritagliano l’immagine in un cerchio; avatar-gradient-on-black.png o -on-white.png, dove il cerchio occupa il 60% del quadrato, per le piattaforme che mostrano un quadrato.
• L’SVG animato funziona come img e in HTML; si ferma quando il visitatore preferisce il movimento ridotto.
• Nel cerchio non inseriamo testo, lettere né altri segni; non cambiamo i colori né il loro ordine.

Colori

I quattro colori del brand vivono nel gradiente, nel cerchio e nello sfondo del sito. Il testo è sempre nero, bianco o grigio su sfondo nero o bianco: i colori del brand non portano mai testo, e il wordmark non è mai colorato.

• Corallo

  #ee7752 · rgb(238 119 82)

  Primo punto del gradiente, angolo in alto a sinistra

• Rosa

  #e73c7e · rgb(231 60 126)

  Secondo punto

• Blu

  #23a6d5 · rgb(35 166 213)

  Terzo punto

• Turchese

  #23d5ab · rgb(35 213 171)

  Ultimo punto, angolo in basso a destra

• Gradiente del brand

  linear-gradient(135deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)

  Sfondi e cerchio; sul sito con opacità del 45% dietro il contenuto

Il sito è scuro per impostazione predefinita e ha un tema chiaro; entrambi usano gli stessi colori neutri.

• Nero

  #000000 · rgb(0 0 0)

  Sfondo del tema scuro; enfasi nel chiaro

• Bianco

  #ffffff · rgb(255 255 255)

  Sfondo del tema chiaro; enfasi nello scuro

• Testo su scuro

  #e0e0e0 · rgb(224 224 224)

  Testo principale, tema scuro

• Testo su chiaro

  #262626 · rgb(38 38 38)

  Testo principale, tema chiaro; bordi nello scuro

• Secondario su scuro

  #cccccc · rgb(204 204 204)

  Didascalie e testo secondario, tema scuro

• Secondario su chiaro

  #404040 · rgb(64 64 64)

  Didascalie e testo secondario, tema chiaro

• Superficie su scuro

  #101010 · rgb(16 16 16)

  Card e pannelli, tema scuro

• Superficie su chiaro

  #f5f5f5 · rgb(245 245 245)

  Card e pannelli, tema chiaro

• Verde di stato

  #00cc66 · rgb(0 204 102)

  Stato e punteggi in tempo reale nello scuro; #007000 nel chiaro

• Il gradiente va dall’angolo in alto a sinistra a quello in basso a destra attraverso i quattro colori a intervalli uguali: linear-gradient(135deg, #ee7752, #e73c7e, #23a6d5, #23d5ab).
• Valori in sRGB. Per la stampa convertiamo con il profilo della tipografia; non esistono equivalenti fissi CMYK né Pantone.
• Contrasto: le coppie testo–sfondo qui sopra soddisfano WCAG 2.2 AA; non usiamo i colori del brand per testo né per icone che veicolano un significato.

Tipografia

• Lato per tutto: 400 nel testo, 700 in evidenziazioni, etichette e pulsanti, 900 nei titoli. Set Latin e Latin Extended; il carattere è gratuito con licenza SIL Open Font License, disponibile su Google Fonts.
• I titoli sono composti stretti: peso 900, spaziatura tra le lettere −0,035 em, interlinea 1,05–1,1. Sopratitoli ed etichette: peso 700, maiuscolo, spaziatura 0,14 em.
• Codice, identificatori e nomi di file: carattere monospaziato di sistema.
• Icone: Material Symbols, a contorno, piene dove l’icona è attiva.
• Google Sans Flex compare solo nel wordmark, come tracciati. Non lo usiamo per il testo.

Sfondi e movimento

• Il sito mostra i quattro colori come campi morbidi che fluttuano lentamente dietro il contenuto, con opacità del 45% su nero o bianco; un ciclo di un campo dura da 19 a 31 secondi.
• Il movimento è sempre lento e di sfondo, mai sul testo, e si ferma per i visitatori che preferiscono il movimento ridotto.
• Grafiche per i social: sfondo nero, quattro campi di colore negli angoli, wordmark bianco, titolo in Lato 900.

File da scaricare

Uso del brand

Il nome Kol.ski, il wordmark e il cerchio del brand appartengono a Kol.ski sp. z o.o. Puoi usarli in forma invariata per indicarci: come partner, cliente, speaker o fornitore, sulla stampa, nelle pagine degli eventi e nelle presentazioni. Non modificarli, non usarli come parte del tuo nome o prodotto e non suggerire che avalliamo qualcosa che non abbiamo verificato. In caso di dubbi scrivi a hi@kol.ski; rispondiamo rapidamente.