Pular para o conteúdo
Retents Retents Brand

Cores

A Retents suporta dark mode e light mode como temas de primeira classe. A paleta dark é construída sobre preto com camadas de transparência. A paleta light usa os mesmos tokens de marca com fundos claros e textos escuros. Consulte Temas para regras de implementação por modo.

Cor de marca

O laranja Retents é a cor primária. Usado em CTAs, links, destaques e elementos interativos.

brand.50

#fff4ee

brand.100

#ffe6d5

brand.200

#ffc9a8

brand.300

#ffa270

hover em texto de link

brand.400

#ff6f2e

links e ícones

PADRÃO

brand.500

#e7580f

CTA primário, botão principal

brand.600

#c94208

hover do CTA

brand.700

#a23109

brand.800

#82280f

brand.900

#6a2310

Paleta base

A paleta de fundos é construída em preto puro com variações de elevação.

background.DEFAULT

#000000

Fundo principal de todas as páginas

background.surface

#0A0A0A

Cards, painéis, áreas de conteúdo

background.elevated

#111111

Inputs, menus, tooltips

Bordas

Todas as bordas usam branco com opacidade — nunca cinza sólido.

border.subtle

rgba(255,255,255,0.08)

Separadores, divisores sutis

border.DEFAULT

rgba(255,255,255,0.15)

Bordas de cards e inputs padrão

border.strong

rgba(255,255,255,0.25)

Hover e foco

Texto

Texto primário

text.primary

#FFFFFF — Títulos, CTAs

Texto secundário

text.secondary

rgba(255,255,255,0.70) — Corpo

Texto muted

text.muted

rgba(255,255,255,0.45) — Labels

Texto disabled

text.disabled

rgba(255,255,255,0.25)

Cores de status

success

#22c55e

Confirmações, sucesso

warning

#f59e0b

Alertas, avisos

error

#ef4444

Erros, estados críticos

Regras de uso

  • Dark mode: use brand.500 (#e7580f) em CTAs, links e destaques
  • Light mode: use brand.600 (#c94208) em CTAs — o .500 não atinge contraste WCAG AA sobre fundo branco
  • Nunca use cores de status como cor primária de CTAs
  • Sempre mantenha contraste mínimo WCAG AA (4.5:1) para texto em qualquer modo
  • O laranja Retents é a única cor de destaque autorizada — não substitua por outra cor sem aprovação de marca
  • Bordas dark usam rgba(255,255,255,X) — bordas light usam rgba(0,0,0,X). Nunca use cinza sólido em bordas

Veja as regras completas de light mode em Temas.