Cores
A paleta da Cortex Intelligence: cortex (marca), verde tech (positivo) e uma família neutra de cinzas, além de cores de apoio e tokens semânticos que se adaptam ao tema claro/escuro.
Cortex — Primary
Escala de marca (violeta Concierge). Ações primárias, foco e ênfase.
cortex-50#faf4fd
cortex-100#f5e8fa
cortex-200#eac9f7
cortex-300#deaaf4
cortex-400#b865db
cortex-500#a74bcb
cortex-600#9631bb
cortex-700#8418ab
cortex-800#6c128d
cortex-900#540b6e
cortex-950#480e5d
Dark Violet — Chrome
Chrome escuro — navegação, sidebar e superfícies profundas.
dark-violet-50#fcf4fd
dark-violet-100#ebe3ed
dark-violet-200#e5d6e9
dark-violet-300#d5bddc
dark-violet-400#b18fbd
dark-violet-500#9f7cac
dark-violet-600#7f5b8c
dark-violet-700#734e80
dark-violet-800#603c6e
dark-violet-900#542f61
dark-violet-950#24142f
Wave Blue — Support
Cor de apoio para dados e destaques informativos.
wave-blue-50#e7fbff
wave-blue-100#ddf3ff
wave-blue-200#b7e4fd
wave-blue-300#86d5ff
wave-blue-400#50b4ee
wave-blue-500#0d9ae7
wave-blue-600#0076cf
wave-blue-700#0065ca
wave-blue-800#0f44a6
wave-blue-900#163697
wave-blue-950#051965
Tech Green — Positive
Sucesso, estados positivos e o acento da marca.
tech-green-50#e9fcf8
tech-green-100#dff4f0
tech-green-200#b7e8dd
tech-green-300#8ce5cd
tech-green-400#3ccbac
tech-green-500#009f7f
tech-green-600#13876f
tech-green-700#166e5d
tech-green-800#115448
tech-green-900#1b4c42
tech-green-950#002e25
Magenta
Acento vibrante para categorização e gráficos.
magenta-50#ffeffc
magenta-100#ffe3f1
magenta-200#ffcae5
magenta-300#ffa6d0
magenta-400#fb61aa
magenta-500#e6438b
magenta-600#c60f66
magenta-700#aa1558
magenta-800#8b0e47
magenta-900#7d0f40
magenta-950#4e0022
Negative Red
Erros, ações destrutivas e alertas críticos.
negative-red-50#fff0f4
negative-red-100#ffe3e8
negative-red-200#ffccd6
negative-red-300#ffabba
negative-red-400#fb617b
negative-red-500#ed4359
negative-red-600#d61031
negative-red-700#b11126
negative-red-800#90101c
negative-red-900#7d0f17
negative-red-950#500003
Warning Orange
Avisos e estados de atenção.
warning-orange-50#fff5e2
warning-orange-100#ffeed9
warning-orange-200#ffd198
warning-orange-300#ffa83d
warning-orange-400#f48a2e
warning-orange-500#eb7030
warning-orange-600#b7511c
warning-orange-700#974219
warning-orange-800#833d1e
warning-orange-900#673018
warning-orange-950#451100
Accessory Purple
Acento adicional para gráficos e ilustrações (fill padrão dos cx-icon).
accessory-purple-50#faf2ff
accessory-purple-100#eae2ff
accessory-purple-200#e1d3ff
accessory-purple-300#c4adfe
accessory-purple-400#b194fd
accessory-purple-500#a07cff
accessory-purple-600#7a52e1
accessory-purple-700#633ec3
accessory-purple-800#522fac
accessory-purple-900#442b8c
accessory-purple-950#290068
Light Gray — Neutral
Texto, bordas, superfícies e fundos neutros. --color-black/--color-branco não são declarados (colidiriam com o preto/branco padrão do Tailwind).
light-gray-50#f2f2f2
light-gray-100#eeebf1
light-gray-200#d5d3d9
light-gray-300#c8c5cc
light-gray-400#b0adb6
light-gray-500#8e8993
light-gray-600#7a7581
light-gray-700#615d67
light-gray-800#56525c
light-gray-900#444049
light-gray-950#2d292e
Tokens semânticos
Resolvem via var() e trocam de valor com o tema — use o ThemeToggle no topo da página para ver.
background#ffffffFundo padrão da página.
foreground--foregroundCor de texto padrão sobre o fundo.
card#ffffffFundo de cards e superfícies elevadas.
card-foreground--card-foregroundTexto sobre cards.
popover#ffffffFundo de popovers e menus flutuantes.
popover-foreground--popover-foregroundTexto sobre popovers.
primary#8418abCor de marca — ações primárias, botões e foco.
primary-foreground#ffffffTexto sobre a cor primária — branco no light (fill escuro, cortex-700); zinc-950 no dark (fill claro, cortex-400).
secondary--secondaryFundo de ações e superfícies secundárias.
secondary-foreground--secondary-foregroundTexto sobre a cor secundária.
muted--mutedFundo de elementos neutros/atenuados.
muted-foreground--muted-foregroundTexto atenuado (legendas, hints).
foreground-secondary#56525cTexto secundário — mais escuro que --muted-foreground (zinc-500), preserva o tom usado hoje pelo passo cru light-gray-800.
accent#8418abCor de destaque — alias da primária neste tema.
accent-foreground#ffffffTexto sobre a cor de destaque — alias de primary-foreground.
destructive#d61031Ações destrutivas e erros.
destructive-foreground#ffffffTexto sobre a cor destrutiva — branco no light (fill escuro, negative-red-600); zinc-950 no dark (fill claro, negative-red-400).
destructive-surface#ffe3e8Fundo suave para chips e badges destrutivos/de erro.
destructive-surface-foreground#b11126Texto sobre o fundo suave destrutivo — passo 700 (não 500), o único que atinge WCAG AA (>= 4.5:1) sobre essa superfície.
info-surface#ddf3ffFundo suave para chips informativos — completa o conjunto: era o único status sem par de superfície, e por isso o pill `info` do webapp-brand era o único montado com dois passos crus.
info-surface-foreground#0065caTexto sobre o fundo suave informativo — passo 700, a mesma escolha dos outros pares (4,94:1 no claro, 6,83:1 no escuro).
primary-surface#f5e8faFundo suave (tint de marca) para chips e cards ativos — mesmo padrão dos status surfaces, cor cortex.
primary-surface-foreground#8418abTexto sobre o tint de marca — passo 700 no light (6,60:1) e 300 no dark (7,46:1).
border--borderBordas padrão de inputs e cards.
border-subtle#eeebf1Borda suave para cards e divisores no estilo Concierge — mais clara que a borda padrão.
input--inputBorda de campos de formulário.
ring--ringAnel de foco em elementos interativos.
success#166e5dEstados de sucesso e confirmação.
success-foreground#ffffffTexto sobre a cor de sucesso — branco no light (o fill é tech-green-700, 6,14:1) e zinc-950 no dark (o fill é tech-green-400). Branco só falhava contra o antigo fill 500, 3,35:1.
success-surface#dff4f0Fundo suave para chips e badges de sucesso.
success-surface-foreground#166e5dTexto sobre o fundo suave de sucesso — passo 700 (não 500), o único que atinge WCAG AA (>= 4.5:1) sobre essa superfície.
warning#974219Estados de aviso e atenção.
warning-foreground#ffffffTexto sobre a cor de aviso — branco no light (o fill é warning-orange-700, 6,75:1) e zinc-950 no dark (o fill é warning-orange-300). Branco só falhava contra o antigo fill 500, 3,05:1.
warning-surface#fff5e2Fundo suave para chips e badges de aviso.
warning-surface-foreground#974219Texto sobre o fundo suave de aviso — passo 700 (não 500), o único que atinge WCAG AA (>= 4.5:1) sobre essa superfície.
info#0065caEstados informativos e destaques de dados.
info-foreground#ffffffTexto sobre a cor informativa — branco no light (fill escuro, wave-blue-700); zinc-950 no dark (fill claro, wave-blue-500).
sidebar#24142fFundo da navegação lateral.
sidebar-foreground--sidebar-foregroundTexto sobre a sidebar.
sidebar-primary#8418abCor primária dentro da sidebar — alias de primary.
sidebar-accent#542f61Fundo de itens ativos/hover na sidebar.
sidebar-border#7f5b8cBordas dentro da sidebar.
sidebar-ring#b18fbdAnel de foco dentro da sidebar.
chart-series-1#8418abSérie 1 de gráficos — alinhada à cor primária.
chart-series-2#009f7fSérie 2 de gráficos — tech green.
chart-series-3#0065caSérie 3 de gráficos — wave blue.
chart-series-4#eb7030Série 4 de gráficos — warning orange.
chart-series-5#c60f66Série 5 de gráficos — magenta.
chart-series-6#7a52e1Série 6 de gráficos — accessory purple.
chart-series-7#d61031Série 7 de gráficos — negative red.
chart-series-8#163697Série 8 de gráficos — wave blue escuro.
Gradientes
Overlay escuro--dark-overlay-gradient
Brand escuro--dark-gradient
Brand--light-gradient
Glass Light--glass-gradient
List / Action--action-gradient
Chat Input--input-gradient
Background--background-gradient
Hero--hero-gradient