Paleta de cores

A camada primitiva de cor: hues nomeados, cada um com uma ramp tonal OKLCH (50–900). Todo papel de UI, ícone de produto e superfície de marca resolve pra um step nomeado aqui (ex.: blue-600) — nunca um hex solto.

Spec fonte: 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

Os steps são gerados em OKLCH (perceptualmente uniforme) e clipados pro gamut sRGB. Cada célula mostra o hex e o selo WCAG do texto de melhor contraste.

Uso por faixa de step

Faixa	Papel
`50–100`	Preenchimentos sutis / tints — fundos de banner, tint de linha em hover, variantes *-bg.
`200–300`	Hairlines / desabilitado — bordas, divisores, controles desabilitados, skeletons.
`400–500`	Secundário / hover — acentos secundários, estados de hover, ponta clara do gradiente.
`600`	Primário sobre claro — accent, botões primários, links, fill dominante de ícone. Piso: AA no branco.
`700–800`	Pressionado / fundo — estados pressionados, ponta funda do gradiente, ênfase sobre bg tintado.
`900`	Tinta / texto — corpo de texto sobre claro, títulos de ênfase máxima, stop mais fundo do gradiente.

Produto → hue (família de ícone)

Regra de família de ícone: fill dominante <hue>-600; gradiente <hue>-700 → -500 → -400; símbolo branco em espaço-negativo. Hues diferentes, mesma faixa de luminosidade — então lêem como irmãos.

Produto	Hue	Dominante	Gradiente (fundo → claro)
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`