O sistema, escrito para pessoas e para a IA que constrói com ele.
Este é o design system do próprio site, no formato DESIGN.md: o documento que captura cor, tipografia, espaçamento, componentes e o raciocínio, para uma pessoa nova e para a IA que constrói, manterem consistência. Não é vitrine, é o arquivo, renderizado. Troque o tema no topo e a página inteira re-tematiza a partir dos tokens.
26 tokens de cor10 tokens de motion23 componentes6 estados por componentecontraste AA verificadoversão alpha
##Visão geral
Editorial e técnico. Nada aleatório.
Um canvas de papel quase branco ritmado por zonas full-bleed grafite e preto. A voltagem vem de um azul elétrico usado com restrição, contra tinta preta e uma voz técnica monoespaçada. A tipografia é uma família só, Inter, em duas vozes: um display fino e um corpo humanista.
01Canvas de papel (canvas) com tinta quase preta, ritmado por zonas grafite e preto full-bleed. O claro para escuro é a cadência.
02Um acento azul (primary), escasso por regra. Marca a ação principal e o estado ao vivo, nada além.
03Uma família, Inter: display fino em 200 com tracking negativo, corpo humanista em 400. Mono para eyebrows e números.
04Nada decorativo flutua. Cada card, regra e animação senta sobre conteúdo real e justifica o próprio lugar.
##Cores
Um acento, escasso por regra.
Não existe um segundo acento. O azul primary marca a ação principal e o estado ativo, nada além disso. As superfícies carregam o ritmo claro para escuro; o texto corre em três pesos de tinta. O tema escuro espelha cada token e é uma troca na raiz, não uma segunda versão de cada tela.
Marca e acento
primary#2B49FF
primary-active#1E38D8
primary-soft#EDEFFF
Superfície
canvas#FAFAFA
surface-soft#F4F4F6
surface-graphite#111116
surface-black#060608
Texto e semântica
ink#0A0A0A
body#6E6E70
success#12B76A
danger#E5484D
##Arquitetura de token e movimento
Nada pula a fila.
O token vive em três camadas. A interface e a IA consomem o semântico, nunca o primitivo. É isso que faz o tema escuro ser uma troca na camada semântica, e não uma segunda versão de cada tela, e faz uma marca nova herdar o sistema trocando só a base.
Primitivo
blue-600
#2B49FF
O valor cru, sem opinião de uso.
Semântico
primary
O papel que o valor cumpre. Aponta para blue-600. É a camada que a interface consome.
Componente
button-primary-bg
O token amarrado a um lugar. Aponta para primary.
Movimento como token
Duração
fast120ms · press, hover
base220ms · reveal, estado
slow420ms · superfície
Easing e mola
standardcubic-bezier(.32,.72,0,1)
moladamping .82 · response .4
reveal≤16px · interrompível
##Tipografia
Uma família, duas vozes.
Inter na interface inteira: um display fino em peso 200 com tracking negativo, e um corpo humanista em 400. Uma face monoespaçada carrega eyebrows, números e legendas, a voz de especificação.
Craft como prova
display-xl · Inter 200 · 60/1.05 · -1.8
Título de seção
display-md · Inter 200 · 34/1.1 · -0.8
Título de componente
title-lg · Inter 600 · 22/1.2
O texto que carrega a leitura, num humanista 400 com entrelinha aberta para o conforto em passagens longas.
body-md · Inter 400 · 15/1.6
Seção · Eyebrow · Rótulo
eyebrow · SF Mono · 11 · +2.2 · caixa alta
Tracking é específico do tamanho. Display grande vai negativo, corpo em zero, eyebrow mono positivo. Nunca um valor único para tudo.
Peso carrega mais hierarquia do que tamanho. O display é fino de propósito; deixá-lo em negrito quebra a voz.
A entrelinha aperta conforme o tamanho cresce. ~1.05 no display, ~1.6 no corpo.
##Layout
Base 4px, nunca número mágico.
A escala de espaçamento parte de 4px. O ritmo de seção e a goteira são fluidos (clamp), então respiram no desktop e apertam no mobile. O espaço em branco é estrutural, não sobra.
xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 40px
xxl · 64px
Grid e contêiner
Conteúdo centralizado, máximo entre 1180 e 1680px. Corpo de texto limita em ~62ch. Uma coluna por padrão; múltiplas só onde a relação é real.
Goteira e seção
Goteira clamp(20px, 4.5vw, 64px), seção clamp(64px, 10vh, 120px). A densidade reduz nas telas menores, não encolhe por igual.
##Elevação e profundidade
Profundidade discreta. Zero ornamento.
Bordas de fio mais sombras longas, suaves e de baixa opacidade. O peso do material codifica hierarquia: superfície maior, blur mais forte e sombra mais profunda. Nunca empilhe uma superfície translúcida sobre outra. Profundidade decorativa não existe, por regra.
Fio1px hairline
Cardshadow -22px / .28
Elevadoshadow -40px / .5
##Formas
Raio hierárquico.
O raio de borda cresce com o tamanho do elemento: apertado nos controles, generoso nos painéis, pílula na navegação. Chrome de produto real sobre ilustração abstrata; quando uma imagem não justifica o lugar, vira índice de texto.
sm · 10px
md · 14px
lg · 18px
xl · 24px
pill · 999px
##Componentes
Ao vivo, com o token ao lado.
Cada componente aparece renderizado, com a especificação em mono logo abaixo, referenciando o token. É o mesmo componente que roda no site, re-tematizado com o resto da página.
text-link · ênfase em {colors.primary} · sublinhado fino
Ana SouzaR$ 1.240,00
BoletoR$ 320,00
table-row · valor tabular, alinhado à direita
--acc: #2B49FF; --radius: 14px;
code-window · chrome real · fundo surface-black
##Estados
Cada estado, especificado.
Componente sem estado documentado empurra a decisão para quem implementa, e é onde a IA e o júnior mais erram. Todo componente interativo carrega a matriz; toda superfície de dado carrega os estados de tela. Ao vivo.
Não foi possível carregar.Verifique a conexão e tente de novo.Tentar de novo
##Faça e não faça
As regras que dizem quando.
Os tokens dizem o que as coisas são. Estas regras dizem quando usar cada uma, em português claro, ao lado dos tokens. É a camada que um colega novo, ou uma IA montando uma tela, erra sem ser avisado. Cada regra elimina uma decisão errada; ao lado, a prova do que quebra sem ela.
Regra · Hierarquia
Só existe um botão primário por tela.
Sem ela: a IA cria dois botões cheios disputando a atenção, os dois "certos" pelas cores do sistema, e ninguém sabe qual é a ação principal.
Sem a regra
SalvarPublicar
Com a regra
SalvarPublicar
Regra · Ação destrutiva
Excluir nunca usa a cor primária.
Sem ela: "Excluir conta" ganha o mesmo peso visual de "Salvar", e o erro irreversível fica a um toque de distância.
Sem a regra
Excluir conta
Com a regra
CancelarExcluir conta
Regra · Interrupção
Modal só bloqueia o fluxo. Aviso comum é toast.
Sem ela: qualquer aviso rotineiro vira uma janela no meio da tela e interrompe quem estava no meio de uma tarefa.
Aviso em modal
Salvo com sucessotoque para continuar
Aviso em toast
Salvo com sucesso
O conjunto completo
Faça
Um botão primário por tela. O preenchimento azul marca a única ação principal; o resto é secundário ou ghost.
Ação destrutiva anda com um Cancelar neutro, e usa o estilo danger. Excluir nunca parece Salvar.
Use toast para confirmação rotineira. Reserve o modal para a decisão que bloqueia o fluxo.
Valor monetário é tabular e alinhado à direita. As colunas precisam alinhar para o olho comparar.
Reduza informação nas telas pequenas. Nem tudo precisa viajar para o mobile.
Espace em tokens. Se um valor não está na escala de 4px ou num token nomeado, não entra.
Alterne as bandas: papel, grafite, preto. O claro para escuro é a cadência; use a zona escura como palco do produto ao vivo.
Eyebrows e números em mono, caixa alta. É a voz de especificação que sinaliza sistema em uso.
Não faça
Não coloque dois botões azuis numa tela. Dois primários é nenhum primário.
Não pinte de azul uma ação destrutiva. Mesmo peso de Salvar é uma armadilha que o token evita.
Não transforme aviso rotineiro em modal. Um toast informa sem parar a tarefa.
Não use um segundo acento. O azul único é a voltagem da marca; um arco-íris de estados dilui.
Não flutue vidro decorativo ou card órfão. Se não está sobre conteúdo real, não pertence.
Não use travessão na copy de interface. Reescreva com dois-pontos, vírgula ou ponto.
Não repita o mesmo modo de superfície em duas bandas seguidas. O ritmo alterna; duas zonas iguais matam a cadência.
Não encha a tela de movimento. Reveal ≤16px com easing de mola; nada de slide duro ou parallax gratuito.
##Acessibilidade
Número, não intenção.
O sistema documenta o contraste por par de token e não deixa texto significativo abaixo de AA (WCAG 4.5:1). A régua abaixo é o próprio sistema, medido.
ink sobre canvas
19.1:1AAA
primary sobre canvas
5.7:1AA
body sobre canvas
4.9:1AA
faint sobre canvas
4.5:1AA
branco sobre primary
6.0:1AA
faint-decorative sobre canvas
2.6:1só ornamental
A regra de craft que sai daqui
A hierarquia do texto secundário vem do registro (mono, caixa alta, tracking), não de contraste abaixo de AA. O eyebrow lê como secundário porque muda de voz, não porque some. O valor antigo (#9B9B9E, 2.6:1) reprovava; corrigido, e aquele tom virou só ornamento.
Foco, alvo e movimento
Foco visível obrigatório: anel de focus-ring, nunca só cor, via :focus-visible. Alvo de toque ≥44px no mobile. Reduced-motion troca slide e mola por cross-fade; reduced-transparency deixa os materiais sólidos.
##Comportamento responsivo
Reduzir, não encolher por igual.
A informação se adapta por breakpoint. No mobile e tablet, o meta lateral some, o grafo de conhecimento vira texto (ruído quando espremido), e a nav ganha uma borda de rolagem fosca para o conteúdo ler por baixo. Alvos de toque ficam sempre ≥44px.
≥ 1200pxGrid de desktop completo. O herói divide em copy e agente ao vivo.
820–1199pxTablet. Os itens da pílula de nav colapsam num único controle Menu.
≤ 767pxMobile. Tudo empilha em uma coluna, o display reduz de tamanho.
≤ 560pxCompacto. Logo e CTA viram círculos de 46px, o texto do CTA cai para o ícone.
##Guia de iteração e lacunas
Vivo, e honesto sobre o que falta.
Como isto evolui
Token antes de valor. Todo componente novo documenta a regra de comportamento, não só a aparência. Movimento é desenhado junto com os pixels. Quando um valor é questionado, ele é defensável a partir deste documento.
Lacunas conhecidas
A escala de tipo aqui é fixa; em produção é fluida (clamp) e reduz por breakpoint.
Tokens de texto por opacidade vêm em hex chapado por portabilidade; o site usa alfa sobre o canvas.
Tokens de visualização de dados ainda não formalizados.