Brand

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.

• 

  White, on dark backgrounds: wordmark-white.svg

• 

  Black, on light backgrounds: wordmark-black.svg

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

• 

  Gradient, preferred: circle-gradient.svg

• 

  Gradient on a light background: circle-gradient.svg

• 

  Animated, 36-second loop: circle-gradient-animated.svg

• 

  White, where colour will not work: circle-white.svg

• 

  Black, where colour will not work: circle-black.svg

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

• Coral

  #ee7752 · rgb(238 119 82)

  First stop of the gradient, top left

• Pink

  #e73c7e · rgb(231 60 126)

  Second stop

• Blue

  #23a6d5 · rgb(35 166 213)

  Third stop

• Teal

  #23d5ab · rgb(35 213 171)

  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.

• Black

  #000000 · rgb(0 0 0)

  Background of the dark theme; emphasis on light

• White

  #ffffff · rgb(255 255 255)

  Background of the light theme; emphasis on dark

• Text on dark

  #e0e0e0 · rgb(224 224 224)

  Body text, dark theme

• Text on light

  #262626 · rgb(38 38 38)

  Body text, light theme; borders on dark

• Secondary on dark

  #cccccc · rgb(204 204 204)

  Captions and secondary text, dark theme

• Secondary on light

  #404040 · rgb(64 64 64)

  Captions and secondary text, light theme

• Surface on dark

  #101010 · rgb(16 16 16)

  Cards and panels, dark theme

• Surface on light

  #f5f5f5 · rgb(245 245 245)

  Cards and panels, light theme

• Status green

  #00cc66 · rgb(0 204 102)

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

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; we answer quickly.