K18 brand guide: fonts, colors & website design
Fonts & primary colors
Helvetica Neue
Aa Beauty, skin & color.
Font source not supplied; fallback shownArial
Aa Beauty, skin & color.
Font source not supplied; fallback shownInter
Aa Beauty, skin & color.
Font source not supplied; fallback shown#FFFFFFsurface
#000000ink
#655DC6accent
01 / TYPOGRAPHY
| Role | Font | Size | Weight | Line height | Tracking | Case |
|---|---|---|---|---|---|---|
| h1 | Helvetica Neue | 32px | 700 | 35.2px | normal | none |
| h2 | HelveticaNeue-Bold | 55px | 400 | 55px | normal | none |
| h3 | Arial | 21.06px | 400 | 31.59px | normal | none |
| body | Arial | 14.4px | 400 | 21.6px | normal | none |
| nav link | Arial | 13px | 500 | normal | normal | uppercase |
| price | Arial | 16px | 500 | normal | normal | none |
Values describe the sampled elements in the supplied capture profile.
02 / COLOR PALETTE
Key interface colors from the captured pages.
#FFFFFFBackground
#000000Alternate background / Text / Button fill
#C1C1C1Secondary text
#655DC6Accent
03 / IMAGERY
- Style: 3D renders of bottles with DNA strands, UGC vertical videos, before/after hair macros.
- Lighting: Iridescent, cool, glossy.
- People: UGC creators and salon pros in video tiles.
Sources & limitations
Independent analysis of supplied website captures. Measurements describe sampled elements, not universal brand rules. Font specimens report whether the supplied original URL loads; unavailable fonts show a labeled fallback.
- Pages overflow to ~4000px wide in a headless browser (body is flex and main has no width limit), which pushed the product hero and headings off-canvas. Re-measured 2026-10-28 with a width-containment fix; desktop product screenshot recaptured. The home page has no h2 tag, so h2 is taken from the 2nd-largest text size (marked fallback).
- All 3 mobile screenshots recaptured 2026-10-29 with the width-containment fix (the old mobile captures were rendering about 2x too wide).
- No secondary button style found: every CTA is a filled black button.
- typography.h2 measured via a fallback selector (no semantic tag/class on the site): fallback:size-rank 2.
- product-desktop: price/"Loading" wait timed out (widget text may persist).
- product-mobile: price/"Loading" wait timed out (widget text may persist).