Colors

26 paletas × 11 stops — Tailwind v4 estendido com 4 paletas customizadas (mauve, mist, olive, taupe) sintetizadas para suportar os temas KDS.

A KDS herda as paletas do Tailwind v4 e estende com quatro paletas customizadas (mauve, mist, olive, taupe) — necessárias para suportar os temas Amber Minimal, Amethyst Haze e Claude com primitivos consistentes em vez de OKLCH literal.

São 26 paletas × 11 stops = 286 cores. Cada stop é intencionalmente espaçado em claridade (perceptualmente uniforme no espaço OKLCH), garantindo que slate-200 e blue-200 se comportam de forma similar quando usados como surface, mesmo sendo hues completamente diferentes.

Como ler a escala

Os stops vão de 50 (mais claro) a 950 (mais escuro). Não existe regra rígida de uso — mas há padrões fortes:

Faixa	Uso típico
50, 100	Backgrounds, hover de itens, surfaces sutis
200, 300	Borders, separadores, surfaces secundárias
400, 500	Texto secundário, ícones, placeholders
600, 700	Texto principal, primary actions, ícones de UI ativa
800, 900, 950	Headings, dark mode surfaces

Esses stops também são stable: Tailwind v4 não muda OKLCH quando você atualiza versão minor. Se quiser mudar o tom de algum, edite o primitivo na KDS — a mudança cascateia.

Como consumir

Três formas, todas equivalentes:

// 1. CSS variable
<div style={{ background: "var(--color-blue-600)" }} />

// 2. Utilitário Tailwind (gerado automaticamente)
<div className="bg-blue-600" />

// 3. JS via design tokens (no consumo programático)
import tokens from "@kalvner/kds/tokens";
const blue600 = tokens.color.blue[600];

Se você está dentro de um componente que respeita o tema, a quase totalidade dos casos é consumir um token semântico (bg-primary, text-foreground) em vez de um primitivo.

HEX é aproximação. Os valores HEX nas tabelas abaixo são a conversão sRGB-clamped do OKLCH. Para stops saturados em fuchsia, lime, etc., o OKLCH descreve cores fora do gamut sRGB — o HEX é o ponto mais próximo dentro do gamut, não o valor exato. A fonte da verdade é sempre OKLCH.

Neutros

Nove paletas neutras cobrem o espectro de "cinza puro" (neutral) até variações com viés de temperatura (slate frio, stone quente, mauve violeta-rosado). Use-as para chrome, surfaces, texto e backgrounds. Cinco delas são padrão Tailwind, quatro são customizações KDS (mauve, mist, olive, taupe) sintetizadas para permitir mapeamento fiel dos temas tweakcn-importados.

Slate

Neutro frio com leve viés azulado. Ideal para chrome de UI sério, dashboards corporativos e produtos onde a credibilidade pesa mais que a personalidade.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-slate-50	bg-slate-50	oklch(98.4% 0.003 247.858)	#F8FAFC
100	--color-slate-100	bg-slate-100	oklch(96.8% 0.007 247.896)	#F1F5F9
200	--color-slate-200	bg-slate-200	oklch(92.9% 0.013 255.508)	#E2E8F0
300	--color-slate-300	bg-slate-300	oklch(86.9% 0.022 252.894)	#CAD5E2
400	--color-slate-400	bg-slate-400	oklch(70.4% 0.04 256.788)	#90A1B9
500	--color-slate-500	bg-slate-500	oklch(55.4% 0.046 257.417)	#62748E
600	--color-slate-600	bg-slate-600	oklch(44.6% 0.043 257.281)	#45556C
700	--color-slate-700	bg-slate-700	oklch(37.2% 0.044 257.287)	#314158
800	--color-slate-800	bg-slate-800	oklch(27.9% 0.041 260.031)	#1D293D
900	--color-slate-900	bg-slate-900	oklch(20.8% 0.042 265.755)	#0F172B
950	--color-slate-950	bg-slate-950	oklch(12.9% 0.042 264.695)	#020618

Gray

Neutro próximo ao perfeito, com micro-temperatura cinza-azul. O default seguro quando nenhum dos outros neutros se justifica.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-gray-50	bg-gray-50	oklch(98.5% 0.002 247.839)	#F9FAFB
100	--color-gray-100	bg-gray-100	oklch(96.7% 0.003 264.542)	#F3F4F6
200	--color-gray-200	bg-gray-200	oklch(92.8% 0.006 264.531)	#E5E7EB
300	--color-gray-300	bg-gray-300	oklch(87.2% 0.01 258.338)	#D1D5DC
400	--color-gray-400	bg-gray-400	oklch(70.7% 0.022 261.325)	#99A1AF
500	--color-gray-500	bg-gray-500	oklch(55.1% 0.027 264.364)	#6A7282
600	--color-gray-600	bg-gray-600	oklch(44.6% 0.03 256.802)	#4A5565
700	--color-gray-700	bg-gray-700	oklch(37.3% 0.034 259.733)	#364153
800	--color-gray-800	bg-gray-800	oklch(27.8% 0.033 256.848)	#1E2939
900	--color-gray-900	bg-gray-900	oklch(21% 0.034 264.665)	#101828
950	--color-gray-950	bg-gray-950	oklch(13% 0.028 261.692)	#030712

Zinc

Neutro levemente roxo, mais técnico. Bom em superfícies de produto onde queremos um cinza com caráter sem cair em uma cor declarada.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-zinc-50	bg-zinc-50	oklch(98.5% 0 0)	#FAFAFA
100	--color-zinc-100	bg-zinc-100	oklch(96.7% 0.001 286.375)	#F4F4F5
200	--color-zinc-200	bg-zinc-200	oklch(92% 0.004 286.32)	#E4E4E7
300	--color-zinc-300	bg-zinc-300	oklch(87.1% 0.006 286.286)	#D4D4D8
400	--color-zinc-400	bg-zinc-400	oklch(70.5% 0.015 286.067)	#9F9FA9
500	--color-zinc-500	bg-zinc-500	oklch(55.2% 0.016 285.938)	#71717B
600	--color-zinc-600	bg-zinc-600	oklch(44.2% 0.017 285.786)	#52525C
700	--color-zinc-700	bg-zinc-700	oklch(37% 0.013 285.805)	#3F3F46
800	--color-zinc-800	bg-zinc-800	oklch(27.4% 0.006 286.033)	#27272A
900	--color-zinc-900	bg-zinc-900	oklch(21% 0.006 285.885)	#18181B
950	--color-zinc-950	bg-zinc-950	oklch(14.1% 0.005 285.823)	#09090B

Neutral

Cinzas puros — chroma zero. É o neutro do shadcn baseColor, e o ponto de partida quando tema e marca ainda não foram definidos.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-neutral-50	bg-neutral-50	oklch(98.5% 0 0)	#FAFAFA
100	--color-neutral-100	bg-neutral-100	oklch(97% 0 0)	#F5F5F5
200	--color-neutral-200	bg-neutral-200	oklch(92.2% 0 0)	#E5E5E5
300	--color-neutral-300	bg-neutral-300	oklch(87% 0 0)	#D4D4D4
400	--color-neutral-400	bg-neutral-400	oklch(70.8% 0 0)	#A1A1A1
500	--color-neutral-500	bg-neutral-500	oklch(55.6% 0 0)	#737373
600	--color-neutral-600	bg-neutral-600	oklch(43.9% 0 0)	#525252
700	--color-neutral-700	bg-neutral-700	oklch(37.1% 0 0)	#404040
800	--color-neutral-800	bg-neutral-800	oklch(26.9% 0 0)	#262626
900	--color-neutral-900	bg-neutral-900	oklch(20.5% 0 0)	#171717
950	--color-neutral-950	bg-neutral-950	oklch(14.5% 0 0)	#0A0A0A

Stone

Neutro quente terra. Mistura bem com paletas amber/orange e tons editoriais. Aparece como base do tema Claude.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-stone-50	bg-stone-50	oklch(98.5% 0.001 106.423)	#FAFAF9
100	--color-stone-100	bg-stone-100	oklch(97% 0.001 106.424)	#F5F5F4
200	--color-stone-200	bg-stone-200	oklch(92.3% 0.003 48.717)	#E7E5E4
300	--color-stone-300	bg-stone-300	oklch(86.9% 0.005 56.366)	#D6D3D1
400	--color-stone-400	bg-stone-400	oklch(70.9% 0.01 56.259)	#A6A09B
500	--color-stone-500	bg-stone-500	oklch(55.3% 0.013 58.071)	#79716B
600	--color-stone-600	bg-stone-600	oklch(44.4% 0.011 73.639)	#57534D
700	--color-stone-700	bg-stone-700	oklch(37.4% 0.01 67.558)	#44403B
800	--color-stone-800	bg-stone-800	oklch(26.8% 0.007 34.298)	#292524
900	--color-stone-900	bg-stone-900	oklch(21.6% 0.006 56.043)	#1C1917
950	--color-stone-950	bg-stone-950	oklch(14.7% 0.004 49.25)	#0C0A09

Mauve

Neutro com viés violeta-rosado bem sutil. Sintetizado para o tema Amethyst Haze — adiciona sofisticação sem sair do território neutro.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-mauve-50	bg-mauve-50	oklch(98.5% 0 0)	#FAFAFA
100	--color-mauve-100	bg-mauve-100	oklch(96% 0.003 325.6)	#F3F1F3
200	--color-mauve-200	bg-mauve-200	oklch(92.2% 0.005 325.62)	#E7E4E7
300	--color-mauve-300	bg-mauve-300	oklch(86.5% 0.012 325.68)	#D7D0D7
400	--color-mauve-400	bg-mauve-400	oklch(71.1% 0.019 323.02)	#A89EA9
500	--color-mauve-500	bg-mauve-500	oklch(54.2% 0.034 322.5)	#79697B
600	--color-mauve-600	bg-mauve-600	oklch(43.5% 0.029 321.78)	#594C5B
700	--color-mauve-700	bg-mauve-700	oklch(36.4% 0.029 323.89)	#463947
800	--color-mauve-800	bg-mauve-800	oklch(26.3% 0.024 320.12)	#2A212C
900	--color-mauve-900	bg-mauve-900	oklch(21.2% 0.019 322.12)	#1D161E
950	--color-mauve-950	bg-mauve-950	oklch(14.5% 0.008 326)	#0C090C

Olive

Neutro verde-amarelado, terroso. Complementa amber e stone em layouts editoriais e em interfaces com pegada orgânica.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-olive-50	bg-olive-50	oklch(98.8% 0.003 106.5)	#FBFBF9
100	--color-olive-100	bg-olive-100	oklch(96.6% 0.005 106.5)	#F4F4F0
200	--color-olive-200	bg-olive-200	oklch(93% 0.007 106.5)	#E8E8E3
300	--color-olive-300	bg-olive-300	oklch(88% 0.011 106.6)	#D8D8D0
400	--color-olive-400	bg-olive-400	oklch(73.7% 0.021 106.9)	#ABAB9C
500	--color-olive-500	bg-olive-500	oklch(58% 0.031 107.3)	#7C7C67
600	--color-olive-600	bg-olive-600	oklch(46.6% 0.025 107.3)	#5B5B4B
700	--color-olive-700	bg-olive-700	oklch(39.4% 0.023 107.4)	#474739
800	--color-olive-800	bg-olive-800	oklch(28.6% 0.016 107.4)	#2B2B22
900	--color-olive-900	bg-olive-900	oklch(22.8% 0.013 107.4)	#1D1D16
950	--color-olive-950	bg-olive-950	oklch(15.3% 0.006 107.1)	#0C0C09

Mist

Neutro com micro-viés ciano. Útil quando o produto pede um cinza mais frio que slate sem tombar para o azul.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-mist-50	bg-mist-50	oklch(98.7% 0.002 197.1)	#F9FBFB
100	--color-mist-100	bg-mist-100	oklch(96.3% 0.002 197.1)	#F1F3F3
200	--color-mist-200	bg-mist-200	oklch(92.5% 0.005 214.3)	#E3E7E8
300	--color-mist-300	bg-mist-300	oklch(87.2% 0.007 219.6)	#D0D6D8
400	--color-mist-400	bg-mist-400	oklch(72.3% 0.014 214.4)	#9CA8AB
500	--color-mist-500	bg-mist-500	oklch(56% 0.021 213.5)	#67787C
600	--color-mist-600	bg-mist-600	oklch(45% 0.017 213.2)	#4B585B
700	--color-mist-700	bg-mist-700	oklch(37.8% 0.015 216)	#394447
800	--color-mist-800	bg-mist-800	oklch(27.5% 0.011 216.9)	#22292B
900	--color-mist-900	bg-mist-900	oklch(21.8% 0.008 223.9)	#161B1D
950	--color-mist-950	bg-mist-950	oklch(14.8% 0.004 228.8)	#090B0C

Taupe

Neutro morno entre stone e mauve — terroso mas com nuance rosada. Sintetizado para o tema Claude.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-taupe-50	bg-taupe-50	oklch(98.6% 0.002 67.8)	#FBFAF9
100	--color-taupe-100	bg-taupe-100	oklch(96% 0.002 17.2)	#F3F1F1
200	--color-taupe-200	bg-taupe-200	oklch(92.2% 0.005 34.3)	#E8E4E3
300	--color-taupe-300	bg-taupe-300	oklch(86.8% 0.007 39.5)	#D8D2D0
400	--color-taupe-400	bg-taupe-400	oklch(71.4% 0.014 41.2)	#ABA09C
500	--color-taupe-500	bg-taupe-500	oklch(54.7% 0.021 43.1)	#7C6D67
600	--color-taupe-600	bg-taupe-600	oklch(43.8% 0.017 39.3)	#5B4F4B
700	--color-taupe-700	bg-taupe-700	oklch(36.7% 0.016 35.7)	#473C39
800	--color-taupe-800	bg-taupe-800	oklch(26.8% 0.011 36.5)	#2B2422
900	--color-taupe-900	bg-taupe-900	oklch(21.4% 0.009 43.1)	#1D1816
950	--color-taupe-950	bg-taupe-950	oklch(14.7% 0.004 49.3)	#0C0A09

Espectro quente

Vermelhos, laranjas, âmbares, amarelos, limas e verdes. A amplitude vai do crítico (red, para destrutivo) até o orgânico (green, lime). Amber define o tema Amber Minimal e é uma das melhores cores para warning sem cair na clichê do amarelo puro.

Red

Vermelho clássico, alto contraste. Reservado para destruição, falhas críticas e estados de erro inequívocos.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-red-50	bg-red-50	oklch(97.1% 0.013 17.38)	#FEF2F2
100	--color-red-100	bg-red-100	oklch(93.6% 0.032 17.717)	#FFE2E2
200	--color-red-200	bg-red-200	oklch(88.5% 0.062 18.334)	#FFC9C9
300	--color-red-300	bg-red-300	oklch(80.8% 0.114 19.571)	#FFA2A2
400	--color-red-400	bg-red-400	oklch(70.4% 0.191 22.216)	#FF6467
500	--color-red-500	bg-red-500	oklch(63.7% 0.237 25.331)	#FB2C36
600	--color-red-600	bg-red-600	oklch(57.7% 0.245 27.325)	#E7000B
700	--color-red-700	bg-red-700	oklch(50.5% 0.213 27.518)	#C10007
800	--color-red-800	bg-red-800	oklch(44.4% 0.177 26.899)	#9F0712
900	--color-red-900	bg-red-900	oklch(39.6% 0.141 25.723)	#82181A
950	--color-red-950	bg-red-950	oklch(25.8% 0.092 26.042)	#460809

Orange

Quente e energético, mais aproximável que vermelho. Bom para CTAs entusiastas, alertas não-críticos e elementos de descoberta.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-orange-50	bg-orange-50	oklch(98% 0.016 73.684)	#FFF7ED
100	--color-orange-100	bg-orange-100	oklch(95.4% 0.038 75.164)	#FFEDD4
200	--color-orange-200	bg-orange-200	oklch(90.1% 0.076 70.697)	#FFD6A7
300	--color-orange-300	bg-orange-300	oklch(83.7% 0.128 66.29)	#FFB86A
400	--color-orange-400	bg-orange-400	oklch(75% 0.183 55.934)	#FF8904
500	--color-orange-500	bg-orange-500	oklch(70.5% 0.213 47.604)	#FF6900
600	--color-orange-600	bg-orange-600	oklch(64.6% 0.222 41.116)	#F54900
700	--color-orange-700	bg-orange-700	oklch(55.3% 0.195 38.402)	#CA3500
800	--color-orange-800	bg-orange-800	oklch(47% 0.157 37.304)	#9F2D00
900	--color-orange-900	bg-orange-900	oklch(40.8% 0.123 38.172)	#7E2A0C
950	--color-orange-950	bg-orange-950	oklch(26.6% 0.079 36.259)	#441306

Amber

Dourado luminoso. Define o tema Amber Minimal e funciona bem em warnings, badges premium e highlights afetuosos.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-amber-50	bg-amber-50	oklch(98.7% 0.022 95.277)	#FFFBEB
100	--color-amber-100	bg-amber-100	oklch(96.2% 0.059 95.617)	#FEF3C6
200	--color-amber-200	bg-amber-200	oklch(92.4% 0.12 95.746)	#FEE685
300	--color-amber-300	bg-amber-300	oklch(87.9% 0.169 91.605)	#FFD230
400	--color-amber-400	bg-amber-400	oklch(82.8% 0.189 84.429)	#FFB900
500	--color-amber-500	bg-amber-500	oklch(76.9% 0.188 70.08)	#FE9A00
600	--color-amber-600	bg-amber-600	oklch(66.6% 0.179 58.318)	#E17100
700	--color-amber-700	bg-amber-700	oklch(55.5% 0.163 48.998)	#BB4D00
800	--color-amber-800	bg-amber-800	oklch(47.3% 0.137 46.201)	#973C00
900	--color-amber-900	bg-amber-900	oklch(41.4% 0.112 45.904)	#7B3306
950	--color-amber-950	bg-amber-950	oklch(27.9% 0.077 45.635)	#461901

Yellow

Amarelo puro, alto valor. Use com cuidado: contraste sobre branco é traiçoeiro — prefira stops 600+ para texto.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-yellow-50	bg-yellow-50	oklch(98.7% 0.026 102.212)	#FEFCE8
100	--color-yellow-100	bg-yellow-100	oklch(97.3% 0.071 103.193)	#FEF9C2
200	--color-yellow-200	bg-yellow-200	oklch(94.5% 0.129 101.54)	#FFF085
300	--color-yellow-300	bg-yellow-300	oklch(90.5% 0.182 98.111)	#FFDF20
400	--color-yellow-400	bg-yellow-400	oklch(85.2% 0.199 91.936)	#FDC700
500	--color-yellow-500	bg-yellow-500	oklch(79.5% 0.184 86.047)	#F0B100
600	--color-yellow-600	bg-yellow-600	oklch(68.1% 0.162 75.834)	#D08700
700	--color-yellow-700	bg-yellow-700	oklch(55.4% 0.135 66.442)	#A65F00
800	--color-yellow-800	bg-yellow-800	oklch(47.6% 0.114 61.907)	#894B00
900	--color-yellow-900	bg-yellow-900	oklch(42.1% 0.095 57.708)	#733E0A
950	--color-yellow-950	bg-yellow-950	oklch(28.6% 0.066 53.813)	#432004

Lime

Verde-limão ácido, jovem. Funciona em marcas tech-forward, fitness e produtos com atitude. Difícil de combinar com paletas conservadoras.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-lime-50	bg-lime-50	oklch(98.6% 0.031 120.757)	#F7FEE7
100	--color-lime-100	bg-lime-100	oklch(96.7% 0.067 122.328)	#ECFCCA
200	--color-lime-200	bg-lime-200	oklch(93.8% 0.127 124.321)	#D8F999
300	--color-lime-300	bg-lime-300	oklch(89.7% 0.196 126.665)	#BBF451
400	--color-lime-400	bg-lime-400	oklch(84.1% 0.238 128.85)	#9AE600
500	--color-lime-500	bg-lime-500	oklch(76.8% 0.233 130.85)	#7CCF00
600	--color-lime-600	bg-lime-600	oklch(64.8% 0.2 131.684)	#5EA500
700	--color-lime-700	bg-lime-700	oklch(53.2% 0.157 131.589)	#497D00
800	--color-lime-800	bg-lime-800	oklch(45.3% 0.124 130.933)	#3C6300
900	--color-lime-900	bg-lime-900	oklch(40.5% 0.101 131.063)	#35530E
950	--color-lime-950	bg-lime-950	oklch(27.4% 0.072 132.109)	#192E03

Green

Verde clássico de crescimento. Em UI, sinaliza progresso e aprovação genérica — em charts, prefira `emerald` no token de status para evitar ruído.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-green-50	bg-green-50	oklch(98.2% 0.018 155.826)	#F0FDF4
100	--color-green-100	bg-green-100	oklch(96.2% 0.044 156.743)	#DCFCE7
200	--color-green-200	bg-green-200	oklch(92.5% 0.084 155.995)	#B9F8CF
300	--color-green-300	bg-green-300	oklch(87.1% 0.15 154.449)	#7BF1A8
400	--color-green-400	bg-green-400	oklch(79.2% 0.209 151.711)	#05DF72
500	--color-green-500	bg-green-500	oklch(72.3% 0.219 149.579)	#00C950
600	--color-green-600	bg-green-600	oklch(62.7% 0.194 149.214)	#00A63E
700	--color-green-700	bg-green-700	oklch(52.7% 0.154 150.069)	#008236
800	--color-green-800	bg-green-800	oklch(44.8% 0.119 151.328)	#016630
900	--color-green-900	bg-green-900	oklch(39.3% 0.095 152.535)	#0D542B
950	--color-green-950	bg-green-950	oklch(26.6% 0.065 152.934)	#032E15

Espectro frio

Verdes-azulados (emerald, teal), ciano, azuis e a transição para violeta (indigo, violet, purple). É a faixa mais "produto digital" da paleta — onde caem os defaults para links, primary actions e charts categóricos. Emerald é o token de sucesso em charts; sky é o token de info.

Emerald

Verde mais frio e sofisticado. É o token de sucesso em charts da KDS. Combina bem com slate e gray.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-emerald-50	bg-emerald-50	oklch(97.9% 0.021 166.113)	#ECFDF5
100	--color-emerald-100	bg-emerald-100	oklch(95% 0.052 163.051)	#D0FAE5
200	--color-emerald-200	bg-emerald-200	oklch(90.5% 0.093 164.15)	#A4F4CF
300	--color-emerald-300	bg-emerald-300	oklch(84.5% 0.143 164.978)	#5EE9B5
400	--color-emerald-400	bg-emerald-400	oklch(76.5% 0.177 163.223)	#00D492
500	--color-emerald-500	bg-emerald-500	oklch(69.6% 0.17 162.48)	#00BC7D
600	--color-emerald-600	bg-emerald-600	oklch(59.6% 0.145 163.225)	#009966
700	--color-emerald-700	bg-emerald-700	oklch(50.8% 0.118 165.612)	#007A55
800	--color-emerald-800	bg-emerald-800	oklch(43.2% 0.095 166.913)	#006045
900	--color-emerald-900	bg-emerald-900	oklch(37.8% 0.077 168.94)	#004F3B
950	--color-emerald-950	bg-emerald-950	oklch(26.2% 0.051 172.552)	#002C22

Teal

Equilíbrio entre verde e azul, ideal para marcas calmas e produtos de saúde, finanças ou bem-estar.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-teal-50	bg-teal-50	oklch(98.4% 0.014 180.72)	#F0FDFA
100	--color-teal-100	bg-teal-100	oklch(95.3% 0.051 180.801)	#CBFBF1
200	--color-teal-200	bg-teal-200	oklch(91% 0.096 180.426)	#96F7E4
300	--color-teal-300	bg-teal-300	oklch(85.5% 0.138 181.071)	#46ECD5
400	--color-teal-400	bg-teal-400	oklch(77.7% 0.152 181.912)	#00D5BE
500	--color-teal-500	bg-teal-500	oklch(70.4% 0.14 182.503)	#00BBA7
600	--color-teal-600	bg-teal-600	oklch(60% 0.118 184.704)	#009689
700	--color-teal-700	bg-teal-700	oklch(51.1% 0.096 186.391)	#00786F
800	--color-teal-800	bg-teal-800	oklch(43.7% 0.078 188.216)	#005F5A
900	--color-teal-900	bg-teal-900	oklch(38.6% 0.063 188.416)	#0B4F4A
950	--color-teal-950	bg-teal-950	oklch(27.7% 0.046 192.524)	#022F2E

Cyan

Azul-claro vibrante, quase elétrico. Funciona em interfaces que precisam de um toque tech sem ir para o azul corporativo.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-cyan-50	bg-cyan-50	oklch(98.4% 0.019 200.873)	#ECFEFF
100	--color-cyan-100	bg-cyan-100	oklch(95.6% 0.045 203.388)	#CEFAFE
200	--color-cyan-200	bg-cyan-200	oklch(91.7% 0.08 205.041)	#A2F4FD
300	--color-cyan-300	bg-cyan-300	oklch(86.5% 0.127 207.078)	#53EAFD
400	--color-cyan-400	bg-cyan-400	oklch(78.9% 0.154 211.53)	#00D3F2
500	--color-cyan-500	bg-cyan-500	oklch(71.5% 0.143 215.221)	#00B8DB
600	--color-cyan-600	bg-cyan-600	oklch(60.9% 0.126 221.723)	#0092B8
700	--color-cyan-700	bg-cyan-700	oklch(52% 0.105 223.128)	#007595
800	--color-cyan-800	bg-cyan-800	oklch(45% 0.085 224.283)	#005F78
900	--color-cyan-900	bg-cyan-900	oklch(39.8% 0.07 227.392)	#104E64
950	--color-cyan-950	bg-cyan-950	oklch(30.2% 0.056 229.695)	#053345

Sky

Azul céu, leve e arejado. Token de info em charts. Mais acolhedor que blue, sem perder o caráter técnico.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-sky-50	bg-sky-50	oklch(97.7% 0.013 236.62)	#F0F9FF
100	--color-sky-100	bg-sky-100	oklch(95.1% 0.026 236.824)	#DFF2FE
200	--color-sky-200	bg-sky-200	oklch(90.1% 0.058 230.902)	#B8E6FE
300	--color-sky-300	bg-sky-300	oklch(82.8% 0.111 230.318)	#74D4FF
400	--color-sky-400	bg-sky-400	oklch(74.6% 0.16 232.661)	#00BCFF
500	--color-sky-500	bg-sky-500	oklch(68.5% 0.169 237.323)	#00A6F4
600	--color-sky-600	bg-sky-600	oklch(58.8% 0.158 241.966)	#0084D1
700	--color-sky-700	bg-sky-700	oklch(50% 0.134 242.749)	#0069A8
800	--color-sky-800	bg-sky-800	oklch(44.3% 0.11 240.79)	#00598A
900	--color-sky-900	bg-sky-900	oklch(39.1% 0.09 240.876)	#024A70
950	--color-sky-950	bg-sky-950	oklch(29.3% 0.066 243.157)	#052F4A

Blue

Azul clássico de produto digital. Default para links, primary actions e charts categóricos. O tom mais seguro e versátil.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-blue-50	bg-blue-50	oklch(97% 0.014 254.604)	#EFF6FF
100	--color-blue-100	bg-blue-100	oklch(93.2% 0.032 255.585)	#DBEAFE
200	--color-blue-200	bg-blue-200	oklch(88.2% 0.059 254.128)	#BEDBFF
300	--color-blue-300	bg-blue-300	oklch(80.9% 0.105 251.813)	#8EC5FF
400	--color-blue-400	bg-blue-400	oklch(70.7% 0.165 254.624)	#51A2FF
500	--color-blue-500	bg-blue-500	oklch(62.3% 0.214 259.815)	#2B7FFF
600	--color-blue-600	bg-blue-600	oklch(54.6% 0.245 262.881)	#155DFC
700	--color-blue-700	bg-blue-700	oklch(48.8% 0.243 264.376)	#1447E6
800	--color-blue-800	bg-blue-800	oklch(42.4% 0.199 265.638)	#193CB8
900	--color-blue-900	bg-blue-900	oklch(37.9% 0.146 265.522)	#1C398E
950	--color-blue-950	bg-blue-950	oklch(28.2% 0.091 267.935)	#162456

Indigo

Azul profundo com puxada violeta. Mais editorial e premium que blue. Funciona em produtos noturnos e marcas técnicas.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-indigo-50	bg-indigo-50	oklch(96.2% 0.018 272.314)	#EEF2FF
100	--color-indigo-100	bg-indigo-100	oklch(93% 0.034 272.788)	#E0E7FF
200	--color-indigo-200	bg-indigo-200	oklch(87% 0.065 274.039)	#C6D2FF
300	--color-indigo-300	bg-indigo-300	oklch(78.5% 0.115 274.713)	#A3B3FF
400	--color-indigo-400	bg-indigo-400	oklch(67.3% 0.182 276.935)	#7C86FF
500	--color-indigo-500	bg-indigo-500	oklch(58.5% 0.233 277.117)	#615FFF
600	--color-indigo-600	bg-indigo-600	oklch(51.1% 0.262 276.966)	#4F39F6
700	--color-indigo-700	bg-indigo-700	oklch(45.7% 0.24 277.023)	#432DD7
800	--color-indigo-800	bg-indigo-800	oklch(39.8% 0.195 277.366)	#372AAC
900	--color-indigo-900	bg-indigo-900	oklch(35.9% 0.144 278.697)	#312C85
950	--color-indigo-950	bg-indigo-950	oklch(25.7% 0.09 281.288)	#1E1A4D

Violet

Roxo equilibrado. Token categórico em charts. Funciona como acento sem dominar a paleta.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-violet-50	bg-violet-50	oklch(96.9% 0.016 293.756)	#F5F3FF
100	--color-violet-100	bg-violet-100	oklch(94.3% 0.029 294.588)	#EDE9FE
200	--color-violet-200	bg-violet-200	oklch(89.4% 0.057 293.283)	#DDD6FF
300	--color-violet-300	bg-violet-300	oklch(81.1% 0.111 293.571)	#C4B4FF
400	--color-violet-400	bg-violet-400	oklch(70.2% 0.183 293.541)	#A684FF
500	--color-violet-500	bg-violet-500	oklch(60.6% 0.25 292.717)	#8E51FF
600	--color-violet-600	bg-violet-600	oklch(54.1% 0.281 293.009)	#7F22FE
700	--color-violet-700	bg-violet-700	oklch(49.1% 0.27 292.581)	#7008E7
800	--color-violet-800	bg-violet-800	oklch(43.2% 0.232 292.759)	#5D0EC0
900	--color-violet-900	bg-violet-900	oklch(38% 0.189 293.745)	#4D179A
950	--color-violet-950	bg-violet-950	oklch(28.3% 0.141 291.089)	#2F0D68

Purple

Roxo mais saturado que violet — quase magenta no stop 500. Use para elementos de criatividade, beta features e diferenciação.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-purple-50	bg-purple-50	oklch(97.7% 0.014 308.299)	#FAF5FF
100	--color-purple-100	bg-purple-100	oklch(94.6% 0.033 307.174)	#F3E8FF
200	--color-purple-200	bg-purple-200	oklch(90.2% 0.063 306.703)	#E9D4FF
300	--color-purple-300	bg-purple-300	oklch(82.7% 0.119 306.383)	#DAB2FF
400	--color-purple-400	bg-purple-400	oklch(71.4% 0.203 305.504)	#C27AFF
500	--color-purple-500	bg-purple-500	oklch(62.7% 0.265 303.9)	#AD46FF
600	--color-purple-600	bg-purple-600	oklch(55.8% 0.288 302.321)	#9810FA
700	--color-purple-700	bg-purple-700	oklch(49.6% 0.265 301.924)	#8200DB
800	--color-purple-800	bg-purple-800	oklch(43.8% 0.218 303.724)	#6E11B0
900	--color-purple-900	bg-purple-900	oklch(38.1% 0.176 304.987)	#59168B
950	--color-purple-950	bg-purple-950	oklch(29.1% 0.149 302.717)	#3C0366

Acentos

Magentas, rosas e rosa-vermelhos para casos onde o produto pede mais personalidade. Rose define o lado quente do esquema Divergent (Red-Blue) e combina particularmente bem com stone e taupe.

Fuchsia

Magenta vibrante, quase neon. Cor de descoberta e novidade. Difícil de combinar com paletas conservadoras.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-fuchsia-50	bg-fuchsia-50	oklch(97.7% 0.017 320.058)	#FDF4FF
100	--color-fuchsia-100	bg-fuchsia-100	oklch(95.2% 0.037 318.852)	#FAE8FF
200	--color-fuchsia-200	bg-fuchsia-200	oklch(90.3% 0.076 319.62)	#F6CFFF
300	--color-fuchsia-300	bg-fuchsia-300	oklch(83.3% 0.145 321.434)	#F4A8FF
400	--color-fuchsia-400	bg-fuchsia-400	oklch(74% 0.238 322.16)	#ED6AFF
500	--color-fuchsia-500	bg-fuchsia-500	oklch(66.7% 0.295 322.15)	#E12AFB
600	--color-fuchsia-600	bg-fuchsia-600	oklch(59.1% 0.293 322.896)	#C800DE
700	--color-fuchsia-700	bg-fuchsia-700	oklch(51.8% 0.253 323.949)	#A800B7
800	--color-fuchsia-800	bg-fuchsia-800	oklch(45.2% 0.211 324.591)	#8A0194
900	--color-fuchsia-900	bg-fuchsia-900	oklch(40.1% 0.17 325.612)	#721378
950	--color-fuchsia-950	bg-fuchsia-950	oklch(29.3% 0.136 325.661)	#4B004F

Pink

Rosa quente, social. Funciona em interfaces que querem carinho e proximidade — comunidade, dating, bem-estar feminino.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-pink-50	bg-pink-50	oklch(97.1% 0.014 343.198)	#FDF2F8
100	--color-pink-100	bg-pink-100	oklch(94.8% 0.028 342.258)	#FCE7F3
200	--color-pink-200	bg-pink-200	oklch(89.9% 0.061 343.231)	#FCCEE8
300	--color-pink-300	bg-pink-300	oklch(82.3% 0.12 346.018)	#FDA5D5
400	--color-pink-400	bg-pink-400	oklch(71.8% 0.202 349.761)	#FB64B6
500	--color-pink-500	bg-pink-500	oklch(65.6% 0.241 354.308)	#F6339A
600	--color-pink-600	bg-pink-600	oklch(59.2% 0.249 0.584)	#E60076
700	--color-pink-700	bg-pink-700	oklch(52.5% 0.223 3.958)	#C6005C
800	--color-pink-800	bg-pink-800	oklch(45.9% 0.187 3.815)	#A3004C
900	--color-pink-900	bg-pink-900	oklch(40.8% 0.153 2.432)	#861043
950	--color-pink-950	bg-pink-950	oklch(28.4% 0.109 3.907)	#510424

Rose

Rosa-vermelho, elegante. O lado quente do esquema Divergent. Combina bem com stone e taupe.

Passo	CSS Token	Classe Tailwind	OKLCH	HEX
50	--color-rose-50	bg-rose-50	oklch(96.9% 0.015 12.422)	#FFF1F2
100	--color-rose-100	bg-rose-100	oklch(94.1% 0.03 12.58)	#FFE4E6
200	--color-rose-200	bg-rose-200	oklch(89.2% 0.058 10.001)	#FFCCD3
300	--color-rose-300	bg-rose-300	oklch(81% 0.117 11.638)	#FFA1AD
400	--color-rose-400	bg-rose-400	oklch(71.2% 0.194 13.428)	#FF637E
500	--color-rose-500	bg-rose-500	oklch(64.5% 0.246 16.439)	#FF2056
600	--color-rose-600	bg-rose-600	oklch(58.6% 0.253 17.585)	#EC003F
700	--color-rose-700	bg-rose-700	oklch(51.4% 0.222 16.935)	#C70036
800	--color-rose-800	bg-rose-800	oklch(45.5% 0.188 13.697)	#A50036
900	--color-rose-900	bg-rose-900	oklch(41% 0.159 10.272)	#8B0836
950	--color-rose-950	bg-rose-950	oklch(27.1% 0.105 12.094)	#4D0218

Boas práticas

Não use stops 50-200 para texto sobre branco — contraste insuficiente. Use-os como surfaces.
Stops 400 são tricky: bons como divisor visual entre primário e secundário, mas perigosos para texto crítico (ratio varia muito entre paletas).
Dark mode espelha, não inverte: 950 é o background, 50 é o foreground. Não troque os tons do meio na lógica — escolha primitivos diferentes.
Quatro paletas customizadas (mauve, mist, olive, taupe) são específicas da KDS. Se você está exportando o sistema para fora, documente que essas não são padrão Tailwind.