Cores
Prontoapp/globals.css aplica. Use sempre o token pelo nome — nunca o valor.Marca
Uso decorativo: grandes áreas, gráficos e peças de imagem. Proibido como fundo de texto pequeno ou de controle interativo. Para interface, use o grupo seguinte.
Vermelho da marca
--brand-red
#E64242
Vermelho institucional da Phorte
Verde da marca
--brand-green
#13B241
Verde institucional
Interface
Carregam texto. Todos passam em WCAG 2.2 AA com o respectivo foreground.
Ação primária
--primary
#D42B2B
Ação principal
Ação primária, escura
--primary-dark
#A81E1E
Hover e superfícies fortes
Ação secundária
--secondary
#0B8434
Ação secundária e confirmação
Ação secundária, escura
--secondary-dark
#0D6B2E
Hover da ação secundária
Feedback
Estados semânticos. Nunca comunique estado apenas por cor — acompanhe sempre de ícone ou texto.
Sucesso
--success
#2E844A
Confirmação e sucesso
Atenção
--warning
#DD7A01
Aviso e atenção
Informação
--info
#1D345E
Informação neutra — nem sucesso, nem atenção, nem erro. Badge, Progress e Alert `info`
Erro
--destructive
#BA0517
Erro e ação destrutiva
Feedback tênue
O par de um aviso: o fundo tênue e o texto forte da mesma família. É o que o Alert usa — o token cheio sobre si mesmo a 10% reprovaria.
Sucesso, fundo
--success-subtle
#EEF5F1
Fundo do aviso de sucesso
Use sobre: recebe o texto --success-strong
Sucesso, texto
--success-strong
#276F3E
Texto e ícone do aviso de sucesso
Use sobre: --success-subtle
Atenção, fundo
--warning-subtle
#FCF4EB
Fundo do aviso de atenção
Use sobre: recebe o texto --warning-strong
Atenção, texto
--warning-strong
#945201
Texto e ícone do aviso de atenção
Use sobre: --warning-subtle
Informação, fundo
--info-subtle
#EDF0F5
Fundo do aviso de informação
Use sobre: recebe o texto --info-strong
Informação, texto
--info-strong
#142544
Texto e ícone do aviso de informação
Use sobre: --info-subtle
Erro, fundo
--destructive-subtle
#F9EBEC
Fundo do aviso de erro
Use sobre: recebe o texto --destructive-strong
Erro, texto
--destructive-strong
#BA0517
Texto e ícone do aviso de erro — o mesmo valor do --destructive
Use sobre: --destructive-subtle
Primária, fundo tênue
--primary-subtle
#FBEAEA
Caixa de ícone em vermelho (IconBox primary) — E64
Use sobre: recebe o ícone --primary (4,32:1) ou o texto --primary-dark (6,29:1)
Secundária, fundo tênue
--secondary-subtle
#EAF4EE
Caixa de ícone em verde (IconBox secondary) — E64
Use sobre: recebe o ícone --secondary (4,28:1) ou o texto --secondary-dark (5,91:1)
Superfícies
Fundos. A amostra usa --muted-foreground (#595959), o texto secundário — o caso mais apertado de cada superfície.
Fundo da página
--background
#FAFAFA
Fundo geral da página
Superfície
--card
#FFFFFF
Superfície elevada
Superfície tênue
--muted
#F4F6F9
Superfície neutra
Vermelho do rodapé
--footer-red
#7D1B1B
Rodapé institucional
Texto
A cor do texto, pelo fundo onde ele está. Um nome por papel (E58): ink e muted-foreground; foreground e ink-light ficaram como apelidos obsoletos.
Texto principal
--foreground
#1A1A1A
Título e corpo (text-ink)
Use sobre: fundo da página, superfície, superfície tênue
Texto de apoio
--muted-foreground
#595959
Legenda, dica, data (text-muted-foreground)
Use sobre: fundo da página, superfície, superfície tênue
Texto sobre escuro
--ink-inverse
#FAFAFA
Texto em fundo escuro ou vermelho (text-ink-inverse)
Use sobre: ação primária, vermelho do rodapé, bg-ink
Texto de apoio sobre escuro
--ink-inverse-muted
#C7C7C7
Texto secundário em fundo escuro (text-ink-inverse-muted)
Use sobre: bg-ink e o vermelho do rodapé — nunca sobre a ação primária
Bordas e foco
--border é divisória decorativa e não delimita controle; campo, checkbox, radio e trilha usam --border-interactive.
Borda decorativa
--border
#E5E5E5
Divisórias e separadores
Borda de controle
--border-interactive
#8C8C8C
Limite de campo, checkbox, radio e trilho
Borda de foco
--border-focus
#6B6B6B
Campo com foco, em 2px. Vermelho ou verde substituem quando há regra de validação.
Anel de foco
--ring
#7D1B1B
Anel de foco de teclado. É o vermelho do rodapé (--footer-red), sem cor própria