Solid ground for the work

Personality: the Craftsman, with a touch of the Guardian

Voice: plain, exact, accountable

1. Say what happens. Name the object, the action, the result. “Deal #42 moved to Won.”, not “Success!”
2. Short and plain. One idea per sentence. Everyday words over technical ones.
3. Show before doing. Anything that changes data, especially by an agent, is described first, then done.
4. Own it. When we fail, say so, say what’s safe, say what to do next.
5. No hype. Proof over adjectives. If we can’t show it, we don’t say it.

Messaging

Primary: cobalt tile with a white K. On cobalt-900 or photos: white tile with a cobalt K. The wordmark is Inter Tight 700, tracking −1%, drawn as outlines; it never needs the font installed.

Construction

• Tile: 32 × 32, corner radius 6 (about 19%).
• Strokes: 3.5 wide, cut flush at the cap line and the baseline.
• Stem x 10.5 · arm (10.5, 17) → (19.5, 8) · leg (14, 14) → (21.5, 24).
• Dot: 3 × 3 at (23, 8). Dropped below 24 px.
• Lockup: tile = 1.5 × cap height, gap = 0.35 × tile.

Clear space and size

Keep a quarter of the tile height free on every side. Nothing else goes inside that space.

16 px · no dot

24 px · with dot

32 px

64 px · app icon

96 px · lockup min

Colour versions

Don’t

✕

Stretch or rotate

✕

Round it into a circle

✕

Add glow, shadow, gradients

✕Kobalt

Type the name in a live font

The specimen tile (“27”, “Ko”) is an illustration of the idea for the brand book and marketing. It never replaces the mark.

How much of each (app screen)

Neutrals first. Cobalt on actions, links, selection and focus. Semantic and agent colors only where a state exists, always with an icon or a word.

Two neutral families, never mixed on one surface

Scales

Cobalt

• 50#f1f4feink text 15.9:1
• 100#e8edfcink text 14.9:1
• 200#c9d5faink text 11.9:1
• 300#8fa8ffink text 7.6:1
• 400#6486f0ink text 5.2:1
• 500#3a63e0white text 5.2:1
• 600#1f47c9white text 7.5:1
• 700#1a3aa6white text 9.5:1
• 800#122a76white text 13.0:1
• 900#0b1a4awhite text 16.7:1
• 950#051037white text 18.5:1

Iron

• 50#f5f7faink text 16.2:1
• 100#eceff4ink text 15.1:1
• 200#dde2ebink text 13.4:1
• 300#afb7c8ink text 8.7:1
• 400#848da5ink text 5.3:1
• 500#646e88white text 5.1:1
• 600#566079white text 6.3:1
• 700#3f485dwhite text 9.1:1
• 800#2a3142white text 13.0:1
• 850#1f2533white text 15.3:1
• 900#161b26white text 17.2:1
• 950#0e121bwhite text 18.7:1

Porcelain

• 50#f7f5f0ink text 16.0:1
• 100#efebe3ink text 14.7:1
• 200#e2dcd0ink text 12.8:1
• 300#b6b0a2ink text 8.1:1
• 400#8c8576ink text 4.8:1
• 500#6a6457white text 5.9:1
• 600#575146white text 7.9:1
• 700#423f3bwhite text 10.5:1
• 800#2e2e30white text 13.6:1
• 900#1b1e25white text 16.7:1
• 950#12161fwhite text 18.1:1

Green

• 50#f4f8f6ink text 16.3:1
• 100#e3f4ecink text 15.3:1
• 200#a0dec2ink text 11.4:1
• 300#4fc79aink text 8.3:1
• 400#41b38aink text 6.7:1
• 500#339f7aink text 5.3:1
• 600#248c6aink large 4.2:1
• 700#13795bwhite text 5.4:1
• 800#00573fwhite text 8.6:1
• 900#003725white text 13.3:1
• 950#002819white text 15.9:1

Aureolin

• 50#f9f6f1ink text 16.2:1
• 100#fbf0d9ink text 15.4:1
• 200#f2d397ink text 12.1:1
• 300#e8b54aink text 9.2:1
• 400#d09d3aink text 7.1:1
• 500#b88629ink text 5.4:1
• 600#a17017white large 4.3:1
• 700#8a5a00white text 5.9:1
• 800#653f00white text 9.3:1
• 900#422500white text 14.0:1
• 950#311900white text 16.5:1

Kiln

• 50#faf6f5ink text 16.2:1
• 100#fbe7e5ink text 14.7:1
• 200#ffbab1ink text 10.7:1
• 300#ff8a7eink text 7.6:1
• 400#ea6f63ink text 5.8:1
• 500#d55448ink large 4.3:1
• 600#c0362cwhite text 5.5:1
• 700#a82e25white text 6.8:1
• 800#7d1b15white text 10.3:1
• 900#550806white text 14.8:1
• 950#420101white text 17.0:1

Cerulean

• 50#f4f7f9ink text 16.2:1
• 100#e2f2f9ink text 15.2:1
• 200#a3d9f3ink text 11.4:1
• 300#5bc0ebink text 8.4:1
• 400#49abd6ink text 6.7:1
• 500#3796c1ink text 5.2:1
• 600#2482adwhite large 4.3:1
• 700#0b6e99white text 5.7:1
• 800#004e71white text 9.0:1
• 900#00314awhite text 13.7:1
• 950#002339white text 16.2:1

Violet

• 50#f7f6faink text 16.2:1
• 100#f0e9faink text 14.7:1
• 200#d4c0f7ink text 10.5:1
• 300#b996f2ink text 7.2:1
• 400#a37ae2ink text 5.3:1
• 500#8e5dd1white text 4.5:1
• 600#7a3fc0white text 6.4:1
• 700#6a33adwhite text 7.8:1
• 800#4f2284white text 11.1:1
• 900#35115dwhite text 15.1:1
• 950#29094awhite text 17.0:1

Clay

• 50#fff3ebink text 16.0:1
• 100#fae4dbink text 14.3:1
• 200#e7c8b9ink text 11.1:1
• 300#d4ac99ink text 8.4:1
• 400#c1917aink text 6.3:1
• 500#ae765bink text 4.6:1
• 600#9a5b3cwhite text 5.3:1
• 700#7b462bwhite text 7.6:1
• 800#5e311bwhite text 10.9:1
• 900#421e0cwhite text 14.8:1
• 950#341505white text 16.7:1

Semantic tokens

Product code uses these names, never raw hex. The app uses Iron; marketing pages add the class ko-porcelain, which swaps the neutral tokens in the light theme.

Contrast

• All text is 4.5:1 or more, in light and dark; control borders and focus rings are 3:1 or more. scripts/build_brand.py checks every pair below and fails the build if one drops.
• Dark theme: cobalt lifts to cobalt-300 and primary buttons switch to dark text on light blue.
• Warning fills (aureolin) always take dark text. Warning as text uses the darker #8A5A00.
• Data viz order: cobalt, cerulean, cobalt green, aureolin, cobalt violet, kiln red, iron.

App scale · base 14

Marketing scale · base 17

• Sentence case everywhere. No all-caps body or headlines. Eyebrows and type chips are the only uppercase.
• Numbers in tables and money use tabular figures (font-variant-numeric: tabular-nums). No other font features for now.
• The name is always Latin “Kobalt”, also in Cyrillic text.

Type chips and tones

A type chip is a small tile with a two-letter symbol, like an element: made from the type’s name, editable. Each type picks one of eight tones. Tones identify types; they never mean status.

Icons from Lucide 1.61.0, ISC licence (licence text). Inlined as an SVG sprite on this page; the product bundles its own copy.

Hover or focus a tile to see its timing. Enter cubic-bezier(0.2, 0, 0, 1); exit cubic-bezier(0.3, 0, 1, 1), about 20% shorter.

Checklist for a new page or screen

• One clear purpose; the headline says what it is or does in plain words.
• Neutrals dominate; cobalt only on actions, links, selection; semantic colors only on state.
• All text 4.5:1 or more (3:1 for large text and control borders), in light and dark.
• Inter, Inter Tight and JetBrains Mono only; type tokens, not ad-hoc sizes.
• Radii, spacing and shadows from tokens; borders before shadows.
• Icons from Lucide, one size and stroke.
• Every change shows its actor; agents use the agent badge.
• Destructive or agent actions show a plan or consequence first.
• Copy passes the words-we-avoid list; no claims about other products.
• Works at 360 px wide with a 16 px gutter; keyboard focus visible; reduced motion respected.

CSStokens.cssCustom properties, light and dark JSONtokens.jsonThe same values for other tools CSSkobalt.cssComponents and font faces kobalt-mark.svgThe mark, 24 px and up kobalt-mark-small.svgWithout the dot, below 24 px kobalt-mark-white.svgWhite tile, for cobalt and photos kobalt-mark-mono.svgSingle color, iron-900 kobalt-mark-mono-white.svgSingle color, white kobalt-lockup.svgMark and wordmark, light grounds kobalt-lockup-dark.svgWhite wordmark, dark grounds kobalt-lockup-white.svgAll white, cobalt-900 grounds OFLFont licenceInter, Inter Tight, JetBrains Mono

Use it

<!-- In <head>: tokens first, then components -->
<link rel="stylesheet" href="/brand/tokens.css">
<link rel="stylesheet" href="/brand/kobalt.css">

<!-- App: Iron surfaces. Marketing: add ko-porcelain. -->
<body class="ko">
<button class="ko-btn ko-btn--primary">Add deal</button>

/* In your own CSS, use the semantic tokens */
.panel { background: var(--ko-surface); border: 1px solid var(--ko-line); }