Design System

Uma fundação, duas peles

Validação visual do design system único do ThiagooPRO — a união dos dois sistemas legados. Tudo abaixo é o mesmo componente nas duas peles: só os tokens mudam. Use o interruptor e observe a página inteira trocar de pele.

Site KADOSH

Pele ativa: Site — dourado envelhecido · link direto: /design-system?pele=kadosh

Revisão →

ConceitoCOMUM

As regras que não mudam

O que define a casa nas duas peles — herdado e unificado dos dois sistemas legados.

Dois dourados, de propósito

O site usa o dourado envelhecido #e9c176 — autoridade calma, editorial, de quem vende consultoria executiva. O KADOSH usa o ouro vivo #f5cb31 — energia de sistema em uso diário. Mesmo nome de token, valores diferentes.

Letra sobre ouro é sempre escura

Cada pele define seu on-gold. Nunca branco, nunca a cor de texto padrão — contraste AA garantido. Regra que virou estrutura depois do bug de 23/08/2026.

No-Line Rule

Profundidade vem de camada tonal e sombra, nunca de borda. A única linha permitida é a hairline a ~8% — e cada degrau de superfície sobe ~8 pontos de luminosidade.

Suave no site, afiado no KADOSH

O raio dos cantos é token: a pele site arredonda com generosidade editorial; a pele KADOSH afia (Sharp over Soft, 2–12px). Troque a pele e repare nos cantos desta página.

TokensCOMUM

Cores

Cada amostra lê a variável CSS do token ativo — troque a pele e as cores mudam sozinhas, sem tocar em nenhum componente.

background

base da página

deep

camada mais recuada · login

surface

seções alternadas

card

cartões e campos

card-hover

hover · popover

foreground

texto principal

muted

texto secundário

gold

marca · dourado da pele

gold-dark

fim do gradiente

gold-soft

realce claro

on-gold

letra sobre ouro

green

apoio · seleção

danger

erro / destrutivo

danger-strong

ênfase de erro

positive

delta positivo

hairline

a única linha permitida

Séries de gráfico (dashboards e relatórios)

chart-1

chart-2

chart-3

chart-4

chart-5

Pares de contraste aprovados (pele site, WCAG)

foreground sobre background	12,5:1	AAA
gold sobre background	9,2:1	AAA
gold-dark sobre background	6,4:1	AA
on-gold sobre gold	6,1:1	AA
muted sobre background	4,5:1	AA

ProfundidadeCOMUM

Camadas tonais

Cinco camadas, do fundo ao topo. A separação vem do tom — repare que não existe nenhuma borda entre elas.

deep

background

surface

card

card-hover

TipografiaCOMUM

Serif nos títulos, sans no corpo — e só 3 pesos

Noto Serif no site, Fraunces no KADOSH; Inter no corpo das duas. Regra dura do sistema inteiro: apenas 400, 600 e 700 — font-light, extrabold e black são proibidos. Ouro é ênfase, nunca cor de corpo corrido.

display — 56px · 700 · -0.02em

Governança e estratégia

h1 — 48px · 700

Título de página

h2 / headline — 32px · 700

Título de seção

h3 / title — 24px · 600

Subtítulo

lead — 18px · 400

Texto de destaque logo abaixo de um título, um degrau acima do corpo.

body — 16px · 400

Parágrafo padrão em Inter. Secundário usa o token muted — nunca opacity sobre o texto principal.

.kicker — etiqueta de seção

Serviços e produtos

.gold-text — gradiente dourado

R$ 8.900

.rule-gold

.tabular — números alinhados

1.024,00
987,10

AçõesCOMUM

Botões

União dos dois legados: o glow do site + o bisel metálico interno e a elevação de 1px no hover do KADOSH. Estados: repouso, hover (levanta), active (assenta), disabled. Letra sobre ouro sempre escura.

.btn-gold — padrão

.btn-gold — compacto

.btn-ghost — padrão

.btn-ghost — compacto

disabled

EtiquetasCOMUM

Badges

Escala herdada do site legado, cores de sinal herdadas do KADOSH. Fundos a 15% da cor, texto na cor cheia.

Padrão (ouro)SucessoAtençãoErroNeutro

FormulárioCOMUM

Campos e formulário unificado

O padrão do dono, herdado do site legado: fundo elevado, sem caixa em volta — só o filete inferior dourado. Melhoria herdada do KADOSH: o fundo clareia junto com o foco. Estados de validação completos. Um formulário só para as duas peles.

Estado de erro (.field-error) — com .shake no envio rejeitado

E-mail inválido.

Estado de sucesso (.field-success)

Desabilitado

Interruptor (.switch)

Receber resumo semanal

SuperfíciesCOMUM

Cards

.card para o bloco padrão (hover tonal), .card-filete quando o item pede destaque com a linha dourada lateral, .card-interactive quando o card inteiro é clicável (eleva 2px).

.card

Fundo elevado, sombra e hover tonal — a base de qualquer bloco de conteúdo.

.card-filete + .card-interactive

Filete dourado de destaque e elevação no hover — passe o mouse: o card levanta e clareia um degrau tonal.

Mentoria Executiva

Sessões individuais para discutir as decisões da sua mesa: carteira, equipe, metas, conselho e carreira.

R$ 890

RetratoCOMUM

Avatar

Círculo com anel dourado fantasma. Variantes: foto, iniciais (gradiente dourado + letra escura) e ponto de status (online, ausente, offline). Grupo sobrepõe com anel da cor do fundo.

Foto — 40 / 64 / 96px

Iniciais

Status — online / ausente / offline

Grupo sobreposto

TOJDAB

FormaCOMUM

Raio e ritmo vertical

O raio é token por pele: suave no site, afiado no KADOSH (Sharp over Soft) — troque a pele e veja os quadrados mudarem de canto. O ritmo vertical das seções vem dos tokens de espaçamento.

--radius-sm

--radius-md

--radius-lg

--radius-xl

--radius-2xl

--space-section-sm/md/lg — 4 / 7 / 9rem

--space-block — 3,5rem entre blocos

AtmosferaKADOSH

Vidro, aura, grão e hachura

Os efeitos de atmosfera do KADOSH, agora tokenizados — funcionam nas duas peles, mas nasceram para dar vida ao sistema: vidro fosco para painéis flutuantes, aura dourada para telas de foco, grão editorial e hachura para áreas vazias.

.glass

Painel de vidro fosco flutuando sobre a aura — blur 20px + saturação.

.grad-gold-soft

Véu dourado descendo do topo do painel.

.hatch

Hachura dourada para áreas vazias e placeholders.

.dot-sep — separador pontilhado · fundo desta caixa: .aura-gold + .grain

MovimentoCOMUM

Cadência de autoridade

"Como virar uma página pesada": movimento transmite peso e deliberação. Tokens de duração e easing valem para tudo; bounce e nervosismo são proibidos.

Durações

`--duration-subtle`	150ms	micro: hover, opacity, foco
`--duration-standard`	300ms	componente: card, filete de campo
`--duration-expressive`	500ms	entradas/saídas, layout
`--duration-dramatic`	800ms	hero, reveals — teto absoluto

Easings — e o stagger de 80ms entre itens de lista

--easing-defaultpadrão

--easing-decelerateentrada de elementos

--easing-acceleratesaída de elementos

.pulse-ring — um elemento vivo

.cursor-blink — digitação

Bem-vindo▍

.rot-slow — ornamento (120s)

Proibições — o que nunca entra

✕ Bounce / elastic — compromete a gravidade da marca
✕ Loop infinito em UI (exceto loading e fundo)
✕ Deslocamento de entrada maior que 24px
✕ Animação acima de 800ms em interação
✕ ease-in para entradas (parece pesado)
✕ Spring nervoso de app de consumo

DocumentosCOMUM

Prose — render de markdown

Estilo pronto para texto longo renderizado de markdown: PRDs dentro do sistema, políticas e artigos no site. Herdado do KADOSH, tokenizado para as duas peles.

Um documento de exemplo

Parágrafo padrão com negrito, um link dourado e código inline.

Subtítulo em ouro

Marcadores com losango dourado
Segundo item da lista

Citação com filete dourado à esquerda.

Indicador	Meta
Carteira	R$ 120M

SinaisKADOSH

Erro e delta positivo

Vocabulário de sinal herdado do KADOSH, disponível na fundação: danger para erro e destrutivo, positive com parcimônia para deltas. No site aparecem raramente (erro de formulário).

Erro de formulário

✕ Não foi possível salvar. Tente novamente.

Ênfase destrutiva

Delta positivo (com parcimônia)

+12,4%carteira no trimestre