Design system
Os tokens, as superfícies, a escala e o movimento deste site. Nada aqui é transcrito: cada amostra lê o token de verdade ou chama o mesmo módulo que a página chama.
Tokens
Declarados em oklch. Trocar o tema no canto da barra repinta tudo abaixo — a amostra é o token, não uma cópia dele.
--backgroundfundo da página--foregroundtexto--cardcartão opaco--muted-foregroundtexto secundário--primaryação principal--accentacento--successsucesso--warningatenção--destructivedestrutivo--borderdivisa--glow-1brilho violeta--glow-2brilho cianoTrês planos
O site tinha um só: quase todo card era bg-card com uma opacidade escolhida no lugar. Nomear os três papéis é o que dá estrutura antes do texto.
surfacevidro de repouso — todo card do site
surface-raiseda mesma peça vindo à frente
surface-sunkenrecuado — chip, rótulo, meta
Elevação
Em superfície escura a profundidade vem de luz no topo, não de sombra preta — que sobre um fundo quase preto é invisível. Por isso elev-* traz um realce interno no tema escuro e some com ele no claro.
elev-1repouso
elev-2hover, popover
elev-3sobreposição
Escala
Dois degraus abaixo do xs, com nome. Eram cinco valores avulsos para o mesmo papel de rótulo miúdo.
nano0.625rem · contador, teclamicro0.6875rem · tag, rótulo miúdoxsmeta do cartãosmcorpo secundáriobasecorpo2xlnúmero de destaquetitlefluido · título de seçãodisplay-smfluido · título de páginadisplayfluido · aberturaTrês perfis
Uma primitiva só, aplicada igual em tudo, faz o olho parar de registrar em três segundos. Cada bloco abaixo entrou com o perfil que ele nomeia.
heroabertura
28px · 700ms
sectiontítulo de seção
16px · 500ms
itemcard em lista
12px · 420ms
A curva é uma só — --ease-out-expo — e tudo aqui para de se mexer quando o sistema pede movimento reduzido, inclusive o que é animado por JavaScript.
Foco
Um contrato só, em outline: o anel de sombra apagaria a elevação do elemento justamente quando ele está em evidência. Navegue com Tab para ver.
Arte procedural
O artigo sem imagem ganha uma capa derivada do próprio slug — determinística, e sempre dentro da faixa ciano→violeta da marca. A mesma função desenha o cartão que vai para as redes.
arquitetura-hexagonalcloud-run-vs-fargatejava-21-virtual-threadslideranca-tecnicaPrimitivos
Os componentes que o site monta. Todos consomem os tokens acima — trocar o tema repinta cada um, sem que nenhum saiba qual tema está ativo.
Button
Badge
Campos
Os primitivos do painel — Kbd, StatusPill, Table — não aparecem aqui: eles leem tokens declarados só dentro do shell do painel, e fora dele renderizariam sem fundo e sem cor. São o mesmo sistema, em outro escopo.
Contraste medido
Números calculados agora, com as mesmas funções que os testes usam. Se um par cair abaixo do mínimo, ele cai aqui também — a página não sabe mentir.
--term-dim6.83:1--term-fg12.45:1--term-strong16.42:1Mínimo WCAG AA para texto normal: 4.5:1