PLACEHOLDER — Todo sistema começa errado do mesmo jeito: alguém desenha um botão bonito, alguém traduz em código, e o valor #a855f7 aparece em dezessete arquivos diferentes. O problema nunca foi o botão. Foi não existir um nome para aquela cor antes de ela ser usada.
PLACEHOLDER — O vocabulário vem primeiro
PLACEHOLDER — Um token é um contrato entre design e código. Ele diz o que a cor significa, não que cor ela é. Quando o significado está nomeado, trocar o valor vira uma linha; quando só o valor existe, trocar vira uma arqueologia.
import { violet, ink } from "./primitives"; export const semantic = { surface: { base: ink[900], raised: ink[850] }, border: { subtle: ink[700], strong: ink[600] }, // o primitivo nunca vaza para o componente: accent: { default: violet[500], bright: violet[400] }, text: { primary: ink[100], secondary: ink[300] },} as const; export type SemanticToken = keyof typeof semantic;PLACEHOLDER — A camada semântica existe para que o componente nunca pergunte “qual violeta?”. Ele pergunta “qual é o accent?” e a resposta pode mudar sem que uma linha do componente mude. Veja a escala completa.
PLACEHOLDER — Primitivo vs. semântico
| Camada | Exemplo | Quem usa |
|---|---|---|
| Primitivo | violet.500 | só a camada semântica |
| Semântico | accent.default | componentes |
| Componente | button.bg | casos excepcionais |
PLACEHOLDER — A escala que não trai
PLACEHOLDER — Grade de 4px, sem exceção. Toda vez que alguém abre exceção, a exceção vira padrão em três sprints. É mais barato arredondar o design do que sustentar duas gramáticas de espaçamento.
- PLACEHOLDER — espaçamento sempre múltiplo de 4
- PLACEHOLDER — raio vem de quatro opções nomeadas, não de números soltos
- PLACEHOLDER — tipografia fluida com
clamp(), nunca breakpoint por breakpoint - PLACEHOLDER — motion com uma curva só, duas durações
PLACEHOLDER — Um sistema não é um conjunto de componentes. É o conjunto de decisões que você não precisa tomar de novo.
PLACEHOLDER — Migrando sem parar o produto
PLACEHOLDER — A migração que funciona é a chata: um arquivo por vez, sempre com o valor antigo ao lado do novo até o último call site sumir.
background: #13111b;border: 1px solid #1f1c2b;padding: 22px;background: var(--bg-surface);border: 1px solid var(--border-subtle);padding: var(--space-6);