Design System

Fundamentos visuais, componentes e padrões de interface usados em todas as telas do HaisFaturamento. Use esta referência antes de criar qualquer tela nova.

Fundamentos

Cores

Todos os valores vêm de tokens semânticos definidos em styles.css. Nunca use cores fixas em componentes.

Marca

Cor institucional. Ações primárias, links, foco e estados ativos.

--primary

—

Botão primário, link, ícone ativo

--primary-foreground

—

Texto sobre primary

--primary-hover

—

Hover de ações primárias

--primary-muted

—

Fundo suave de destaque

--accent

—

Hover de itens e opções

--accent-foreground

—

Texto sobre accent

--ring

—

Anel de foco

Superfícies

Camadas de elevação, do fundo da página até overlays (modais e popovers).

--background

—

Fundo da aplicação

--surface-subtle

—

Blocos secundários

--surface-sunken

—

Áreas rebaixadas

--card

—

Cards e seções

--surface-raised

—

Elementos elevados

--popover

—

Dropdowns, modais

--secondary

—

Botão secundário

--muted

—

Fundos neutros, skeleton

Texto e bordas

Hierarquia de texto por cor e separadores.

--foreground

—

Texto principal

--muted-foreground

—

Texto de apoio

--text-subtle

—

Metadados, placeholders

--text-inverse

—

Texto sobre fundo escuro

--border

—

Bordas padrão

--border-strong

—

Bordas de ênfase

--input

—

Borda de campos

Feedback

Estados de sistema: base, -muted (fundo) e -strong (texto sobre -muted). Sempre com texto, nunca só cor.

--success

—

Conforme, concluído

--success-muted

—

Fundo de badge de sucesso

--success-strong

—

Texto de badge de sucesso

--warning

—

Pendência, atenção

--warning-muted

—

Fundo de badge de atenção

--warning-strong

—

Texto de badge de atenção

--destructive

—

Divergência, erro, exclusão

--destructive-muted

—

Fundo de badge de erro

--destructive-strong

—

Texto de badge de erro

--info

—

Informação, processando

--info-muted

—

Fundo de badge informativo

--info-strong

—

Texto de badge informativo

Categorias

Paleta para gráficos e categorias (-fg para texto). Não usar como status.

--cat-1

—

Série 1 · texto: --cat-1-fg

--cat-2

—

Série 2 · texto: --cat-2-fg

--cat-3

—

Série 3 · texto: --cat-3-fg

--cat-4

—

Série 4 · texto: --cat-4-fg

--cat-5

—

Série 5 · texto: --cat-5-fg

--cat-6

—

Série 6 · texto: --cat-6-fg

Sidebar

Tokens exclusivos do menu lateral.

--sidebar

—

Fundo do menu

--sidebar-foreground

—

Texto dos itens

--sidebar-muted

—

Rótulos de grupo, ícones

--sidebar-accent

—

Item ativo / hover

--sidebar-accent-foreground

—

Texto do item ativo

--sidebar-border

—

Divisores do menu

Marca HaisTech (fixas)

Cores institucionais fixas, iguais nos dois temas. Uso restrito a marca e telas de autenticação.

--color-hais-navy

#2e3e91

Marca · navy

--color-hais-ocean

#0f5894

Marca · ocean

--color-hais-sky

#5ea9ff

Marca · sky

--color-hais-sage

#93c08f

Marca · sage

--color-hais-leaf

#7cca80

Marca · leaf

--color-brand-surface-from

#0d182e

Gradiente da autenticação (início)

--color-brand-surface-to

#033d77

Gradiente da autenticação (fim)

Escala neutra

Base para superfícies, bordas e texto. Não use cinzas fora desta escala.

—

100

—

200

—

300

—

400

—

500

—

600

—

700

—

800

—

900

—