Marka

Nazwa

• W tekście ciągłym, w domenie i w nazwie spółki kropka jest zwykłą kropką: Kol.ski, kol.ski, Kol.ski sp. z o.o. Zawsze wielkie K, nigdy wersaliki.
• W znaku słownym i w naszych nagłówkach kropka staje się punktorem między sylabami: Kol•ski (U+2022). W jednym dokumencie trzymamy się jednej z dwóch form.
• Nie: Kolski, Kol-ski, Kol ski, KOL.SKI, kol.ski na początku zdania.
• Tam, gdzie oczekiwane jest logo, nazwę zastępuje znak słowny; nie składamy jej w innym kroju zamiast znaku.

Znak słowny

Znak słowny to nazwa złożona krojem Google Sans Flex w najcięższej odmianie, z kropką narysowaną jako koło między „Kol” a „ski”. Dostarczamy go jako krzywe, więc do użycia nie trzeba żadnego fontu. Zawsze w jednym kolorze: biały na ciemnym tle, czarny na jasnym.

• 

  Biały, na ciemne tła: wordmark-white.svg

• 

  Czarny, na jasne tła: wordmark-black.svg

• Pole ochronne: co najmniej połowa wysokości znaku z każdej strony, bez tekstu i innych znaków.
• Minimalna wielkość: 16 px wysokości na ekranie, 5 mm w druku.
• Nie rozciągamy, nie obracamy, nie obrysowujemy, nie cieniujemy i nie przebarwiamy znaku; nie wypełniamy go gradientem. Na zdjęciach kładziemy go na spokojnym fragmencie albo na ciemnej nakładce.
• Nie używamy złożenia koła ze znakiem słownym: znak słowny ma już w sobie kropkę.

Koło marki

Kropka ze znaku słownego sama: koło wypełnione czterema kolorami marki jako cztery miękkie pola dryfujące po gradiencie liniowym. To znak do wszystkiego, co kwadratowe lub okrągłe: favicon, zdjęcia profilowe, ikony aplikacji. Statyczne koło to zerowa klatka animacji, więc każda wersja pokazuje ten sam obraz.

• 

  Gradient, wersja podstawowa: circle-gradient.svg

• 

  Gradient na jasnym tle: circle-gradient.svg

• 

  Animowane, pętla 36 s: circle-gradient-animated.svg

• 

  Białe, gdy kolor nie przejdzie: circle-white.svg

• 

  Czarne, gdy kolor nie przejdzie: circle-black.svg

• Zdjęcia profilowe: avatar-gradient-fill.png dla platform, które przycinają zdjęcie do koła; avatar-gradient-on-black.png lub -on-white.png, gdzie koło zajmuje 60% kwadratu, dla platform pokazujących kwadrat.
• Animowany SVG działa jako img i w HTML; zatrzymuje się, gdy odwiedzający woli ograniczony ruch.
• W kole nie umieszczamy tekstu, liter ani innych znaków; nie zmieniamy kolorów ani ich kolejności.

Kolory

Cztery kolory marki żyją w gradiencie, w kole i w tle strony. Tekst jest zawsze czarny, biały lub szary na czarnym albo białym tle: kolory marki nigdy nie niosą tekstu, a znak słowny nigdy nie jest kolorowy.

• Koralowy

  #ee7752 · rgb(238 119 82)

  Pierwszy punkt gradientu, lewy górny róg

• Różowy

  #e73c7e · rgb(231 60 126)

  Drugi punkt

• Niebieski

  #23a6d5 · rgb(35 166 213)

  Trzeci punkt

• Turkusowy

  #23d5ab · rgb(35 213 171)

  Ostatni punkt, prawy dolny róg

• Gradient marki

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

  Tła i koło; na stronie z kryciem 45% za treścią

Strona jest domyślnie ciemna i ma motyw jasny; oba używają tych samych neutralnych barw.

• Czerń

  #000000 · rgb(0 0 0)

  Tło motywu ciemnego; wyróżnienie w jasnym

• Biel

  #ffffff · rgb(255 255 255)

  Tło motywu jasnego; wyróżnienie w ciemnym

• Tekst na ciemnym

  #e0e0e0 · rgb(224 224 224)

  Tekst zasadniczy, motyw ciemny

• Tekst na jasnym

  #262626 · rgb(38 38 38)

  Tekst zasadniczy, motyw jasny; obramowania w ciemnym

• Drugorzędny na ciemnym

  #cccccc · rgb(204 204 204)

  Podpisy i tekst drugorzędny, motyw ciemny

• Drugorzędny na jasnym

  #404040 · rgb(64 64 64)

  Podpisy i tekst drugorzędny, motyw jasny

• Powierzchnia na ciemnym

  #101010 · rgb(16 16 16)

  Karty i panele, motyw ciemny

• Powierzchnia na jasnym

  #f5f5f5 · rgb(245 245 245)

  Karty i panele, motyw jasny

• Zieleń statusu

  #00cc66 · rgb(0 204 102)

  Status i wyniki na żywo w ciemnym; #007000 w jasnym

• Gradient biegnie od lewego górnego do prawego dolnego rogu przez cztery kolory w równych odstępach: linear-gradient(135deg, #ee7752, #e73c7e, #23a6d5, #23d5ab).
• Wartości w sRGB. Do druku konwertujemy profilem drukarni; nie ma stałych odpowiedników CMYK ani Pantone.
• Kontrast: pary tekst–tło powyżej spełniają WCAG 2.2 AA; kolorów marki nie używamy do tekstu ani ikon niosących znaczenie.

Typografia

• Lato do wszystkiego: 400 w tekście, 700 w wyróżnieniach, etykietach i przyciskach, 900 w nagłówkach. Zestawy Latin i Latin Extended; krój jest bezpłatny na licencji SIL Open Font License, dostępny w Google Fonts.
• Nagłówki składamy ciasno: grubość 900, światło międzyliterowe −0,035 em, interlinia 1,05–1,1. Nadtytuły i etykiety: grubość 700, wersaliki, światło 0,14 em.
• Kod, identyfikatory i nazwy plików: systemowy krój o stałej szerokości.
• Ikony: Material Symbols, kontur, wypełnione tam, gdzie ikona jest aktywna.
• Google Sans Flex występuje tylko w znaku słownym, jako krzywe. Nie używamy go do tekstu.

Tła i ruch

• Strona pokazuje cztery kolory jako miękkie pola dryfujące powoli za treścią, z kryciem 45% na czerni lub bieli; jeden cykl pola trwa od 19 do 31 sekund.
• Ruch jest zawsze powolny i tłowy, nigdy na tekście, i zatrzymuje się dla odwiedzających, którzy wolą ograniczony ruch.
• Grafiki społecznościowe: czarne tło, cztery pola koloru w rogach, biały znak słowny, tytuł w Lato 900.

Pliki do pobrania

Korzystanie z marki

Nazwa Kol.ski, znak słowny i koło marki należą do Kol.ski sp. z o.o. Możesz ich używać w niezmienionej postaci, aby wskazać nas: jako partnera, klienta, prelegenta lub dostawcę, w prasie, na stronach wydarzeń i w prezentacjach. Nie zmieniaj ich, nie używaj jako części własnej nazwy lub produktu i nie sugeruj, że firmujemy coś, czego nie sprawdziliśmy. W razie wątpliwości napisz na hi@kol.ski; odpowiadamy szybko.