Color palette

The primitive color tier: named hues, each with an OKLCH tonal ramp (50–900). Every UI role, product icon and brand surface resolves to a named step here (e.g. blue-600) — never a free hex.

Source spec: specs/themes/palette.kmd · primitives.json

Hues & ramps

100

200

300

400

500

600

700

800

900

slate

#f4f5f7 AAA

#e8eaed AAA

#d5d8dd AAA

#bcc1c7 AAA

#9fa4ac AAA

#868c93 AA

#6f747b AA

#575b61 AA

#3f4247 AAA

#27292d AAA

blue

#eff6ff AAA

#dcebff AAA

#bfdbff AAA

#96c3ff AAA

#5fa5ff AAA

#398bef AA

#2172d1 AA

#1159aa AA

#054181 AAA

#002856 AAA

indigo

#f3f5ff AAA

#e4e9ff AAA

#ced5ff AAA

#b0bbff AAA

#8d99ff AAA

#7178ff AA

#5a56f5 AA

#4640c9 AAA

#322c99 AAA

#1e1868 AAA

violet

#f5f4ff AAA

#eae6ff AAA

#d9d1ff AAA

#c3b3ff AAA

#a98dff AAA

#9467ff AA

#8040f3 AA

#662cc7 AAA

#4b1b97 AAA

#300a67 AAA

magenta

#fff1f5 AAA

#ffe1e8 AAA

#ffc6d6 AAA

#ff9fbc AAA

#ff669d AAA

#ee3584 AA

#ce136d AA

#a60055 AAA

#7c003e AAA

#510026 AAA

red

#fff2f0 AAA

#ffe2de AAA

#ffc9c2 AAA

#ffa59a AAA

#ff7064 AAA

#f53b36 AA

#d51b1f AA

#ad020f AAA

#810008 AAA

#540003 AAA

orange

#fff2ee AAA

#ffe3d9 AAA

#ffcbb7 AAA

#ffa786 AAA

#ff743b AAA

#e75400 AA

#c14500 AA

#9a3500 AAA

#722500 AAA

#4a1500 AAA

amber

#fff3e7 AAA

#ffe5c8 AAA

#ffce96 AAA

#f8b054 AAA

#e08f00 AAA

#bf7a00 AA

#a06500 AA

#7e4f00 AA

#5d3900 AAA

#3c2300 AAA

green

#e8fcea AAA

#d1f5d6 AAA

#a8ebb4 AAA

#7ad98e AAA

#44c066 AAA

#0fa74b AA

#008b3b AA

#006e2d AA

#00511f AAA

#003311 AAA

teal

#e8faf7 AAA

#d2f2ed AAA

#aae6dd AAA

#7cd3c7 AAA

#49b9ac AAA

#1ca093 AA

#00867b AA

#006a61 AA

#004d47 AAA

#00312c AAA

cyan

#e8f9ff AAA

#d0f0fc AAA

#a8e3f8 AAA

#79ceea AAA

#44b3d4 AAA

#129abc AA

#00809e AA

#00657d AA

#004a5c AAA

#002f3b AAA

Steps are generated in OKLCH (perceptually uniform) and gamut-clipped to sRGB. Each cell shows its hex and the WCAG badge of its best-contrast text.

Usage by step band

Step band	Role
`50–100`	Subtle fills / tints — banner backgrounds, hovered-row tint, *-bg role variants.
`200–300`	Hairlines / disabled — borders, dividers, disabled controls, skeletons.
`400–500`	Secondary / hover — secondary accents, hover states, gradient light end.
`600`	Primary on light — accent, primary buttons, links, dominant icon fill. Floor: AA on white.
`700–800`	Pressed / deep — pressed states, gradient deep end, emphasis on tinted bg.
`900`	Ink / text — body text on light, max-emphasis headings, deepest gradient stop.

Product → hue (icon family)

Icon family rule: dominant fill <hue>-600; gradient <hue>-700 → -500 → -400; white symbol in negative space. Different hues, one lightness band — so they read as siblings.

Product	Hue	Dominant	Gradient (deep → light)
Koder Drive	`blue`	`blue-600`	`blue-700 → blue-500 → blue-400`
Koder Hub	`green`	`green-600`	`green-700 → green-500 → green-400`
Koder Mail	`red`	`red-600`	`red-700 → red-500 → orange-400`
Koder Cloud	`indigo`	`indigo-600`	`indigo-700 → indigo-500 → violet-400`
Koder Map	`teal`	`teal-600`	`teal-700 → teal-500 → green-400`
Koder Cal	`amber`	`amber-600`	`amber-700 → amber-500 → amber-400`
Koder Kruze	`violet`	`violet-600`	`violet-700 → violet-500 → magenta-400`