Corporate
Visual Identity
The canonical reference for the brand: the khai mark and its system, the colour palette, the type families, and the rules that hold them together. One source; everything visual answers to this page.
The mark
One mark, read three ways. kh over ai; the silent h recedes behind the k, and a single brick dot crowns it so the leg reads as the i: Kai, KH·AI, the hidden h.
Primary lockup
The default. Use it wherever there is room for the full stack on a light, calm ground (headers, decks, stationery, the home of any surface). Brick is the rare red; let it be the only saturated thing in view.
Anatomy. The top row is k with the silent h set behind it in the light ghost tone; the brick dot sits exactly where the i’s tittle would, so the row reads “ki.” The rule splits it; ai sits below. k, the rule and ai together already trace an h.
The reductions. Crop the lockup to its top row and you have the monogram (kh plus the dot), the brand’s compact face and the form inside the app icon. Crop further to the silent h and dot and you have the atom, for the smallest monochrome marks.
The dot is the only moving part of the system; recolour it to shift the accent, never the letters.
The set: the full lockup
Five authorised colourways of the same lockup. The letters never change; only the dot moves, and the ground decides which to reach for.
Primary · brick
The default, on light calm grounds.
Sea dot
Structural / product / infrastructure surfaces.
Amber dot
Warm emphasis; safest accent on dark grounds.
Ink dot
Quiet, single-tone, mono contexts.
Reverse
On ink, imagery, any dark ground. Dot stays brick (or amber).
The set: the kh monogram
The lockup head, cropped to kh plus the dot. The brand’s compact face; outlined paths, so it renders anywhere without the font.
Primary · brick
The lockup head, cropped.
Sea dot
Structural surfaces.
Amber dot
Warm emphasis.
Ink dot
Mono / single-tone.
Reverse
Dark grounds.
The set: the app-icon tile
The monogram set in a rounded tile, the most-used touchpoint: browser tabs, home-screen icon, social avatar. Ships as SVG with the raster favicons below (§07).
Paper · brick
Default app icon / favicon.
Paper · sea
Product / infra apps.
Paper · amber
Warm variant.
Ink · reverse
Dark mode / contrast.
Clear space & minimum size
The mark needs quiet around it and a floor below which it stops being legible.
Clear space
Keep clear space equal to the height of the k on every side. Nothing (type, edges, other marks) enters that field.
Minimum size
Full lockup no smaller than 28 px / 8 mm tall. Below that, switch to the monogram (in the icon tile) or the bare h+dot atom, down to 16 px.
Colour: ground & voice
One palette, three lenses. Warm paper is the ground, ink is the voice, and the accents appear one at a time. No hex beyond this set.
Colour: the accents
Colour: rules & tokens
Usage rules
- → Red is rare. Brick appears once per surface: an accent, never a field.
- → White is the ground. Paper is warm by default; reach for ice only when a surface should feel like morning.
- → Blue holds structure. Sea carries headers, infrastructure, the substrate beneath the content.
- → Never tricolour. The colours appear; the flag never does. No stripes, no motif.
Tokens
:root {
/* surfaces */
--paper:#f3ede2; --paper-warm:#fbf7ee;
--paper-deep:#ede5d4; --ice:#e2e7e8;
/* ink */
--ink:#16130f; --ink-soft:#5b5246; --ink-mute:#8a8275;
/* rules */
--rule:#c9bea7; --rule-soft:#e6dfd0;
/* accents */
--brick:#8d3a2c; --sea:#3a4a52; --fjord:#4d6b76;
--amber:#c98e36; --tide:#8a8d86; --marsh:#6e7a4c;
}
Typography: the families
Three families, three jobs. A literary display face, a workhorse text serif, and a mono for the machine voice (labels, metadata, code).
Typography: the scale
Writing: voice & punctuation
The copy carries the same restraint as the type: editorial, calm, exact. First person for the practice (I, not we); confident, never supplicant; say less and let the paper breathe.
- Punctuate with
- ✓ Commas, semicolons, colons and parentheses; they carry every aside and pause.
- ✓ Hyphen with spaces for numeric ranges (400 - 500, 2006 - '12).
- ✓ Full stops over flourishes; two short sentences beat one long one.
- Never
- ✕ The em dash. It is not in the voice; reach for a comma, colon or parentheses.
- ✕ The en dash. Never as a sentence break, never in numeric ranges; use the spaced hyphen instead.
- ✕ Square brackets [] or braces {} in prose; they belong to code and variables.
- ✕ Supplicant phrasing ("I help you..."); state plainly what is done.
Icon & favicon
Where the lockup can’t breathe (tabs, app glances, avatars), the brand reduces to the monogram, set in a soft-cornered paper tile.
The icon tile
The kh monogram (bold ink k, ghost h, brick dot) on warm paper, in a rounded tile. This is the brand’s most-used touchpoint: browser tabs, home-screen icon, social avatar. Ships as SVG with raster fallbacks (ico · 180 · 192 · 512).
64
32
16
Holds down to 16 px
<!-- scalable, crisp at any size --> <link rel="icon" href="favicon.svg" type="image/svg+xml"> <!-- fallbacks --> <link rel="icon" href="favicon.ico" sizes="any"> <link rel="apple-touch-icon" href="apple-touch-icon.png">
Applications & misuse
The shortlist that keeps every surface on-brand. When in doubt, do less and let the paper breathe.
- Do
- ✓ Let the dot carry the accent; keep letters ink (or paper, reversed).
- ✓ Use the reverse on dark grounds; swap the dot to amber for warmth or contrast.
- ✓ Give the mark clear space; place it on calm, single-tone grounds.
- ✓ Reduce to the monogram tile (or the bare atom) below 28 px.
- ✓ Keep brick rare; one accent moment per surface.
- Don’t
- ✕ Don’t recolour the letters or use hues outside the palette.
- ✕ Don’t restore the top i’s stem on the lockup; the dot stands alone.
- ✕ Don’t set brick on a dark ground (low contrast); use amber or the reverse.
- ✕ Don’t render the flag; no stripes, no tricolour motif.
- ✕ Don’t crowd, stretch, rotate, or add effects to the mark.
In one breath
Warm paper, near-black ink, hairline rules;
and a single brick dot that does all the talking.
Editorial, calm, exact.
The system never shouts; it simply holds.