# Brand

The name, the wordmark, the brand circle, the colours and the typeface of Kol.ski sp. z o.o., with files to download. For partners, event organisers, the press and anyone who refers to us.

## Name

- In running text, in the domain and in the company name the dot is a full stop: Kol.ski, kol.ski, Kol.ski sp. z o.o. Always a capital K, never all caps.
- In the wordmark and in our own headings the dot becomes a bullet set between the two syllables: Kol•ski (U+2022). Pick one of the two forms in a document and keep it.
- Not: Kolski, Kol-ski, Kol ski, KOL.SKI, kol.ski at the start of a sentence.
- The wordmark replaces the name wherever a logo is expected; do not set the name in another typeface as a substitute for it.

## Wordmark

The wordmark is the name in Google Sans Flex at its heaviest weight, with the dot drawn as a circle between “Kol” and “ski”. It is delivered as outlines, so no font is needed to use it. One colour only: white on dark backgrounds, black on light ones.

| Variant | File | Background |
| --- | --- | --- |
| White, on dark backgrounds | [wordmark-white.svg](https://kol.ski/brand/wordmark-white.svg) | dark |
| Black, on light backgrounds | [wordmark-black.svg](https://kol.ski/brand/wordmark-black.svg) | light |

- Clear space: at least half the height of the wordmark on every side, free of text and other marks.
- Minimum size: 16 px high on screen, 5 mm in print.
- Do not stretch, rotate, outline, shadow or recolour it, and do not fill it with the gradient. On photographs use a plain, calm area or a dark overlay.
- We do not use a combined lockup of the circle and the wordmark: the wordmark already carries the dot.

## Brand circle

The dot of the wordmark on its own: a circle filled with the four brand colours as four soft fields drifting over a linear gradient. It is the mark for everything square or round: the favicon, profile pictures, app icons. The static circle is frame zero of the animation, so every version shows the same picture.

| Variant | File | Background |
| --- | --- | --- |
| Gradient, preferred | [circle-gradient.svg](https://kol.ski/brand/circle-gradient.svg) | dark |
| Gradient on a light background | [circle-gradient.svg](https://kol.ski/brand/circle-gradient.svg) | light |
| Animated, 36-second loop | [circle-gradient-animated.svg](https://kol.ski/brand/circle-gradient-animated.svg) | dark |
| White, where colour will not work | [circle-white.svg](https://kol.ski/brand/circle-white.svg) | dark |
| Black, where colour will not work | [circle-black.svg](https://kol.ski/brand/circle-black.svg) | light |

- Profile pictures: `avatar-gradient-fill.png` for platforms that crop the picture to a circle; `avatar-gradient-on-black.png` or `-on-white.png`, where the circle takes 60% of the square, for platforms that show a square.
- The animated SVG works as an `img` and in HTML; it stops when the visitor prefers reduced motion.
- Do not put text, letters or other marks inside the circle, and do not change the colours or their order.

## Colours

Four brand colours live in the gradient, in the circle and in the background of the website. Text is always black, white or grey on a black or white background: the brand colours never carry text, and the wordmark is never coloured.

| Name | Value | Use |
| --- | --- | --- |
| Coral | #ee7752 | First stop of the gradient, top left |
| Pink | #e73c7e | Second stop |
| Blue | #23a6d5 | Third stop |
| Teal | #23d5ab | Last stop, bottom right |
| Brand gradient | linear-gradient(135deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) | Backgrounds and the circle; on the website at 45% opacity behind the content |

The website is dark by default and has a light theme; both use the same neutrals.

| Name | Value | Use |
| --- | --- | --- |
| Black | #000000 | Background of the dark theme; emphasis on light |
| White | #ffffff | Background of the light theme; emphasis on dark |
| Text on dark | #e0e0e0 | Body text, dark theme |
| Text on light | #262626 | Body text, light theme; borders on dark |
| Secondary on dark | #cccccc | Captions and secondary text, dark theme |
| Secondary on light | #404040 | Captions and secondary text, light theme |
| Surface on dark | #101010 | Cards and panels, dark theme |
| Surface on light | #f5f5f5 | Cards and panels, light theme |
| Status green | #00cc66 | Live status and scores on dark; #007000 on light |

- The gradient runs from the top left to the bottom right through the four colours at equal distances: `linear-gradient(135deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)`.
- Values are sRGB. For print, convert with the printer's profile; there are no fixed CMYK or Pantone equivalents.
- Contrast: text and background pairs above meet WCAG 2.2 AA; the brand colours are not used for text or icons that carry meaning.

## Typography

- Lato for everything: 400 for text, 700 for emphasis, labels and buttons, 900 for headings. Latin and Latin Extended subsets; the font is free under the SIL Open Font License and available from [Google Fonts](https://fonts.google.com/specimen/Lato).
- Headings are set tight: weight 900, letter-spacing −0.035 em, line-height 1.05–1.1. Eyebrows and labels: weight 700, uppercase, letter-spacing 0.14 em.
- Code, identifiers and file names: the system monospace font.
- Icons: Material Symbols, outlined, filled where the icon is active.
- Google Sans Flex appears only in the wordmark, as outlines. Do not use it for text.

## Backgrounds and motion

- The website shows the four colours as soft fields drifting slowly behind the content, at 45% opacity over black or white; one cycle takes between 19 and 31 seconds per field.
- Motion is always slow and ambient, never on text, and it stops for visitors who prefer reduced motion.
- Social images: black background, the four colour fields in the corners, the white wordmark, the title in Lato 900.

## Downloads

| File | Format | Use |
| --- | --- | --- |
| [kolski-brand.zip](https://kol.ski/brand/kolski-brand.zip) | ZIP | Everything below plus `colors.json` and a README |
| [wordmark-white.svg](https://kol.ski/brand/wordmark-white.svg), [wordmark-black.svg](https://kol.ski/brand/wordmark-black.svg) | SVG | Wordmark, any size, screen and print |
| [wordmark-white.png](https://kol.ski/brand/wordmark-white.png), [wordmark-black.png](https://kol.ski/brand/wordmark-black.png) | PNG, 2400 px, transparent | Wordmark for documents and slides |
| [wordmark-black.pdf](https://kol.ski/brand/wordmark-black.pdf) | PDF, vector, 200 mm | Wordmark for print |
| [circle-gradient.svg](https://kol.ski/brand/circle-gradient.svg), [circle-gradient.png](https://kol.ski/brand/circle-gradient.png) | SVG, PNG 1024 px, transparent | Brand circle |
| [circle-gradient-animated.svg](https://kol.ski/brand/circle-gradient-animated.svg) | SVG with CSS animation | Brand circle, 36-second loop |
| [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 | Brand circle in one colour |
| [avatar-gradient-fill.png](https://kol.ski/brand/avatar-gradient-fill.png) | PNG 1024 px | Profile picture for platforms that crop to a circle |
| [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 | Square profile picture, circle at 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 | Square profile picture in one colour |
| [colors.json](https://kol.ski/brand/colors.json) | JSON | The palette for developers |
| [favicon.svg](https://kol.ski/favicon.svg), [apple-touch-icon.png](https://kol.ski/apple-touch-icon.png) | SVG, PNG 180 px | Icons as used on this website |

## Using the brand

The name Kol.ski, the wordmark and the brand circle belong to Kol.ski sp. z o.o. You may use them as they are to refer to us: as a partner, a client, a speaker or a supplier, in the press, on event pages and in presentations. Do not alter them, do not use them as part of your own name or product, and do not suggest that we endorse something we have not reviewed. If you are unsure, write to [hi@kol.ski](mailto:hi@kol.ski); we answer quickly.

[Home](https://kol.ski/)