Paleta de Cores Oficial

Abyss Blue

#06101F

HSL: 216° 68% 7%

RGB: 6, 16, 31

Profundidade & Autoridade

Contraste com branco: 17.2:1 (WCAG AAA)

Electric Cyan

#00D4FF

HSL: 190° 100% 50%

RGB: 0, 212, 255

Inovação & Energia

Contraste com Abyss: 8.1:1 (WCAG AAA)

Metallic Gold

#C7A763

HSL: 41° 46% 58%

RGB: 199, 167, 99

Excelência & Premium

Contraste com Abyss: 5.2:1 (WCAG AA)

Badges (3 Variantes)

Ativo Premium Twin Digital Alta Prioridade Destaque

Cards com Efeito Glow

Contratos Analisados

1,247

+12% vs. mês passado

Insights Gerados

342

+8% esta semana

Usuários Ativos

5,892

+24% este mês

Botões Premium

Tipografia & Cores

Heading 1 - Display

Heading 2 - Título

Heading 3 - Subtítulo

Parágrafo regular com{' '} destaque em Electric Cyan e{' '} destaque em Metallic Gold.

Texto secundário com menor ênfase e opacidade reduzida.

Backgrounds com Gradiente

Gradient CAIO

Abyss Blue → Electric Cyan → Metallic Gold

Perfeito para headers e seções destacadas

Gradient Subtle

Versão mais suave para overlays

Ideal para backgrounds com conteúdo

Como Usar no Seu Projeto

Classes Tailwind:

<div class="bg-abyss-blue text-electric-cyan">...</div>
<button class="bg-metallic-gold text-abyss-blue">...</button>
<span class="text-electric-cyan font-bold">Destaque</span>

Componentes CAIO (React/Base44):

import { ButtonPremium, CardGlow, BadgeCaio } from '@/components/caio'

<ButtonPremium>Acessar Dashboard</ButtonPremium>
<CardGlow title="KPI">Conteúdo</CardGlow>
<BadgeCaio variant="cyan">Ativo</BadgeCaio>