The logo
IKON, with the O in pink
Poppins Bold, outlined. The letters take one ink. The O is always brand pink with one small hole up and to the right. That O is Blink at rest.
Spaced by eye
The gaps are not equal. Each pair of letters encloses the same area of white, so I–K opens up and K–O closes in. Without this, the open K and the round O leave a visible gap in the middle of the word.
- Tracking 0.15 em, then kerning I–K +41, K–O −52, O–N +10. Units are 1/1000 em.
- The hole sits at 48° above horizontal, centred in the ring, radius one tenth of the O's.
- Always use the files. Never set "IKON" in Poppins and colour the O by hand.
Clear space and size
Half the cap height, all round
Nothing enters the clear space: no text, no edge, no other mark. A tight container is the commonest way it gets broken.
- Minimum size 16 px tall on screen, about 64 px wide.
- Below 24 px the hole gets hard to see. That is fine. Never enlarge the hole to compensate.
Versions
Four files, named for the background
Choose by the background. Use the full-colour logo wherever the pink O can be seen. Use one colour only where it cannot.
The O alone
When the word will not fit
Favicons, app icons and avatars use the O by itself. It is the same O, with the same single hole.
App icon, dark tile
App icon, light tile
Favicon: the O on transparent
The O alone in white, on a dark ground
- Tile 18% padding around the O, 22% corner radius, on near-black or near-white.
- Masters
app-icon-1024.png has square corners, because platform tools mask it to their own shape.
Colour
Monochrome, with one pink
The interface is black, grey and white. Pink is the accent and is used rarely. Strong colour belongs to what people build with IKON, such as their apps and images.
#141414
Black
Logo letters on light. Dark grounds, covers, the hero band.
#6e6e74
Gray
Captions, metadata, quiet labels. Never the logo, never a fill.
#ececec
Light gray
Blink's livery on light. Hover, selected and dividers.
#fafafa
White
Logo letters on dark. Light grounds and cards.
#db176e
Pink
The O. Buttons, focus, the active state, live work.
#c8135f
Deep pink
The pink band: one large block of colour per page or deck.
How much of each
Most of any page is background. Pink is a few small marks, plus at most one or two pink bands.
| Ground | Text | Logo | Blink livery | Pink used for |
|---|
| Light | Black headings, gray captions | On light | Light gray | Pink fills. Small pink text uses #b3105a |
| Dark | White headings, light gray body | On dark | #211f1c | Pink fills. Small pink text uses #ff5ba0 |
| Deep pink | White only | Monochrome white | Pink | None. The band itself is the pink. |
- Count the marks. Four or five pink marks per screen or slide at most. A pink band uses up most of that.
- Pink fills are always #db176e, on both grounds. White text on it passes AA. Hover is
#ce0266.
- Not brand colours. Teal means success and yellow means live or reward. Neither is ever a call to action.
Blink as surface
The O, blown up and cropped
On pages and slides, Blink appears as a livery: one flat silhouette, far larger than the frame, one step off the ground's tone. It is part of the background.
Light mode#f8f8f8 ground · #ececec livery
Dark mode#151412 ground · #211f1c livery
Pink band#c8135f ground · #db176e livery
- One tone. No second colour, no gradient, no shadow, no face, no limbs.
- Cropped. One or two per page, each cut well off by an edge. Never whole and centred.
- Away from text. Keep it clear of body text. Vary the silhouette between slides.
- In the product Blink is alive: it may blink, look and move, but it starts and ends as the still O.
Don'ts
Keep the mark as drawn
No pink letters. Only the O is pink.
No other colour for the O.
No stretching or squashing.
No shadows, glows or outlines.
No pink O on a pink ground.
Never add "AI". The name is IKON.
Type
Tight headlines, wide small labels
Build it livePoppins Bold · hero titles · −0.03 em
Your appsPoppins Light · page titles · −0.04 em
Everything people read: body text, labels, buttons and forms.Inter · body · 14 to 15 px
Deployed · 2 min agoJetBrains Mono · ids, code, micro-labels
Files
Use the masters
The files ship alongside this book. The lettering is outlined, so they need no font. Each SVG's viewBox is tight to the ink, so it sizes by its height.
ikon-wordmark-on-light.svg, ikon-wordmark-on-dark.svgikon-wordmark-mono-black.svg, ikon-wordmark-mono-white.svgikon-o-on-light.svg, the pink O aloneikon-o-mono-black.svg, ikon-o-mono-white.svgikon-app-icon-dark.svg, ikon-app-icon-light.svgapp-icon-1024.png, the square icon masterfavicon-*.png, the O alone at favicon sizeslivery/<shape>-light|dark|pink.svg, Blink as surface in five shapes