# Marka

Nazwa, znak słowny, koło marki, kolory i krój pisma Kol.ski sp. z o.o. wraz z plikami do pobrania. Dla partnerów, organizatorów wydarzeń, prasy i każdego, kto o nas pisze.

## 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.

| Wariant | Plik | Tło |
| --- | --- | --- |
| Biały, na ciemne tła | [wordmark-white.svg](https://kol.ski/brand/wordmark-white.svg) | dark |
| Czarny, na jasne tła | [wordmark-black.svg](https://kol.ski/brand/wordmark-black.svg) | light |

- 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.

| Wariant | Plik | Tło |
| --- | --- | --- |
| Gradient, wersja podstawowa | [circle-gradient.svg](https://kol.ski/brand/circle-gradient.svg) | dark |
| Gradient na jasnym tle | [circle-gradient.svg](https://kol.ski/brand/circle-gradient.svg) | light |
| Animowane, pętla 36 s | [circle-gradient-animated.svg](https://kol.ski/brand/circle-gradient-animated.svg) | dark |
| Białe, gdy kolor nie przejdzie | [circle-white.svg](https://kol.ski/brand/circle-white.svg) | dark |
| Czarne, gdy kolor nie przejdzie | [circle-black.svg](https://kol.ski/brand/circle-black.svg) | light |

- 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.

| Nazwa | Wartość | Zastosowanie |
| --- | --- | --- |
| Koralowy | #ee7752 | Pierwszy punkt gradientu, lewy górny róg |
| Różowy | #e73c7e | Drugi punkt |
| Niebieski | #23a6d5 | Trzeci punkt |
| Turkusowy | #23d5ab | 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.

| Nazwa | Wartość | Zastosowanie |
| --- | --- | --- |
| Czerń | #000000 | Tło motywu ciemnego; wyróżnienie w jasnym |
| Biel | #ffffff | Tło motywu jasnego; wyróżnienie w ciemnym |
| Tekst na ciemnym | #e0e0e0 | Tekst zasadniczy, motyw ciemny |
| Tekst na jasnym | #262626 | Tekst zasadniczy, motyw jasny; obramowania w ciemnym |
| Drugorzędny na ciemnym | #cccccc | Podpisy i tekst drugorzędny, motyw ciemny |
| Drugorzędny na jasnym | #404040 | Podpisy i tekst drugorzędny, motyw jasny |
| Powierzchnia na ciemnym | #101010 | Karty i panele, motyw ciemny |
| Powierzchnia na jasnym | #f5f5f5 | Karty i panele, motyw jasny |
| Zieleń statusu | #00cc66 | 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](https://fonts.google.com/specimen/Lato).
- 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

| Plik | Format | Zastosowanie |
| --- | --- | --- |
| [kolski-brand.zip](https://kol.ski/brand/kolski-brand.zip) | ZIP | Wszystko poniżej oraz `colors.json` i README |
| [wordmark-white.svg](https://kol.ski/brand/wordmark-white.svg), [wordmark-black.svg](https://kol.ski/brand/wordmark-black.svg) | SVG | Znak słowny, dowolna wielkość, ekran i druk |
| [wordmark-white.png](https://kol.ski/brand/wordmark-white.png), [wordmark-black.png](https://kol.ski/brand/wordmark-black.png) | PNG, 2400 px, przezroczyste | Znak słowny do dokumentów i prezentacji |
| [wordmark-black.pdf](https://kol.ski/brand/wordmark-black.pdf) | PDF, wektor, 200 mm | Znak słowny do druku |
| [circle-gradient.svg](https://kol.ski/brand/circle-gradient.svg), [circle-gradient.png](https://kol.ski/brand/circle-gradient.png) | SVG, PNG 1024 px, przezroczyste | Koło marki |
| [circle-gradient-animated.svg](https://kol.ski/brand/circle-gradient-animated.svg) | SVG z animacją CSS | Koło marki, pętla 36 s |
| [circle-black.svg](https://kol.ski/brand/circle-black.svg), [circle-black.png](https://kol.ski/brand/circle-black.png), [circle-white.svg](https://kol.ski/brand/circle-white.svg), [circle-white.png](https://kol.ski/brand/circle-white.png) | SVG, PNG 1024 px | Koło marki w jednym kolorze |
| [avatar-gradient-fill.png](https://kol.ski/brand/avatar-gradient-fill.png) | PNG 1024 px | Zdjęcie profilowe dla platform przycinających do koła |
| [avatar-gradient-on-black.png](https://kol.ski/brand/avatar-gradient-on-black.png), [avatar-gradient-on-white.png](https://kol.ski/brand/avatar-gradient-on-white.png) | PNG 1024 px | Kwadratowe zdjęcie profilowe, koło 60% |
| [avatar-white-on-black.png](https://kol.ski/brand/avatar-white-on-black.png), [avatar-black-on-white.png](https://kol.ski/brand/avatar-black-on-white.png) | PNG 1024 px | Kwadratowe zdjęcie profilowe w jednym kolorze |
| [colors.json](https://kol.ski/brand/colors.json) | JSON | Paleta dla programistów |
| [favicon.svg](https://kol.ski/favicon.svg), [apple-touch-icon.png](https://kol.ski/apple-touch-icon.png) | SVG, PNG 180 px | Ikony używane na tej stronie |

## 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](mailto:hi@kol.ski); odpowiadamy szybko.

[Strona główna](https://kol.ski/pl)