Cores

Papéis de cor em claro e escuro. Cor aparece por significado, nunca como decoração.

Cada amostra mostra o tema claro e o escuro lado a lado. Use pelo papel: bg-muted, text-muted-foreground, border-border…

Base

Fundo da página

--background{primitive.color.white}

Fundo da página

--foreground{primitive.color.neutral.205}

Texto padrão

--canvas{primitive.color.canvas.light}

Fundo de área de trabalho (canvas, deck, demo)

--card{primitive.color.white}

--card-foreground{primitive.color.neutral.205}

--popover{primitive.color.white}

--popover-foreground{primitive.color.neutral.205}

Ações e neutros

--primary{primitive.color.neutral.205}

Ação principal — quase-preto, não azul

--primary-foreground{primitive.color.white}

--secondary{primitive.color.gray.100}

--secondary-foreground{primitive.color.neutral.205}

--muted{primitive.color.gray.100}

Fundo neutro claro: chips, controles, áreas vazias

--muted-subtle{primitive.color.gray.50}

Um degrau mais claro que muted: fundo de imagem ausente ou carregando (thumbnail de card), áreas grandes onde muted pesa

--muted-foreground{primitive.color.gray.500}

Texto secundário (token mais usado)

--accent{primitive.color.gray.200}

Hover sobre superfícies neutras (um degrau acima de muted)

--accent-foreground{primitive.color.neutral.205}

Status

--destructive{primitive.color.red.500}

--destructive-subtleoklch(0.577 0.245 27.325 / 10%)

--destructive-borderoklch(0.577 0.245 27.325 / 30%)

--success{primitive.color.green.600}

Texto/ícone de sucesso. Resense: 'Boa triangulação', fonte atitudinal

--success-subtle{primitive.color.green.50}

--success-border{primitive.color.green.200}

--info{primitive.color.blue.600}

Resense: 'Triangulação moderada', fonte comportamental, versão selecionada

--info-subtle{primitive.color.blue.50}

--info-border{primitive.color.blue.200}

--warning{primitive.color.amber.600}

Resense: 'Baixa triangulação', fonte contextual

--warning-subtle{primitive.color.amber.50}

--warning-border{primitive.color.amber.200}

IA

Assinatura de IA. Padrão: entardecer (âmbar → roxo); troque com data-ai (ver modes.ai). Só para estados de geração/IA (borda girando, pulso ao concluir, shimmer).

--ai-from{primitive.color.amber.500}

--ai-to{primitive.color.purple.500}

data-ai="entardecer"

Âmbar → roxo. É o padrão; o atributo só é preciso para voltar a ele dentro de um trecho em outro modo.

data-ai="inverno"

Roxo → azul. Uso: <html data-ai="inverno">.

Bordas e foco

--border{primitive.color.gray.200}

--input{primitive.color.gray.200}

--ring{primitive.color.neutral.205}

Vidro

Vidro do chat do coisas.space (PromptBar). Transparência + blur.

--glass-bglinear-gradient(10deg, rgba(255,255,255,0.405) 6.7%, rgba(255,255,255,0.72) 97.09%)

Superfície de vidro (PromptBar flutuante e lateral)

--glass-border#e9e9e9

--glass-inputrgba(245,245,245,0.69)

Campo de texto dentro do vidro

--floatoklch(1 0 0 / 80%)

Gráficos

Escala monocromática azul — igual nos dois temas.

--chart-1{primitive.color.blue.300}

--chart-2{primitive.color.blue.500}

--chart-3{primitive.color.blue.600}

--chart-4{primitive.color.blue.700}

--chart-5{primitive.color.blue.800}