Cores e brand

A identidade do produto tem uma única fonte. Estados e containers são derivados dela com color-mix() em OKLCH, e o dark mode usa a sua própria mistura.

Brand

Alterar --brand em src/styles/tokens.css re-tematiza o sistema inteiro.

--brand / --primary

--primary-hover

--primary-active

--primary-container

--primary-border

--ring

--primary-foreground e --primary-container-foreground continuam sobrescrevíveis explicitamente. Nenhuma derivação automática garante contraste adequado para qualquer cor de marca possível.

Cores semânticas

Cada estado tem um par sólido e um par tonal (container). Componentes nunca criam a própria cor de status.

primary

sólido

container

destructive

sólido

container

success

sólido

container

warning

sólido

container

info

sólido

container

Superfícies

A hierarquia começa aqui. Separar áreas por tonalidade evita empilhar cards e sombras.

--background

--surface

--surface-container

--surface-container-high

--card

--popover

--muted

--sidebar

Séries de gráfico

chart-1 acompanha a brand; as demais mantêm distinção de matiz e clareiam no dark mode.

--chart-1

--chart-2

--chart-3

--chart-4

--chart-5

Texto

Três níveis cobrem quase toda a interface.

Texto padrão — text-foreground

Texto secundário — text-muted-foreground

Texto de destaque — text-primary