Pular para o conteúdo

Styleguide

Design System

Cada valor desta página é lido de site/css/tokens.css na hora do build — é o mesmo arquivo que o navegador carrega. Se um token mudar e a página não mudar junto, é bug do gerador, não defasagem de documentação.

Os pares de contraste são recalculados a cada build e o mínimo AA é verificado no CI por scripts/contraste.mjs.

Cor

Uma escala neutra por tema mais três semânticas. O tema claro é o :root; o escuro redefine só o que muda.

Token	Claro	Escuro	Contraste sobre `--bg`
`--bg`	`#f2f4f8`	`#040710`	—
`--surface`	`#ffffff`	`#0f172a`	1.10:1 · 1.13:1
`--surface-2`	`#e9ecf2`	`#16203a`	1.07:1 · 1.25:1
`--edge`	`#d3d9e3`	`#24314f`	1.29:1 · 1.56:1
`--text-1`	`#0f172a`	`#f8fafc`	16.21:1 · 19.24:1
`--text-2`	`#475569`	`#a4b1c6`	6.88:1 · 9.28:1
`--text-3`	`#5f6d82`	`#7d8da6`	4.77:1 · 5.98:1
`--brand`	`#be123c`	`#f43f5e`	5.71:1 · 5.48:1
`--accent`	`#4f46e5`	`#818cf8`	5.71:1 · 6.75:1
`--on-brand`	`#ffffff`	`#070d19`	1.10:1 · 1.04:1
`--info`	`#0369a1`	`#38bdf8`	5.39:1 · 9.40:1
`--ok`	`#047857`	`#34d399`	4.98:1 · 10.47:1
`--warn`	`#b45309`	`#fbbf24`	4.56:1 · 12.06:1
`--err`	`#dc2626`	`#f87171`	4.39:1 · 7.28:1

Tipografia

JetBrains Mono para display, títulos, rótulos e código; IBM Plex Sans para leitura corrida. Oito tokens, cada um com tamanho, peso, entrelinha e tracking próprios.

Família	Pilha
`--font-mono`	'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
`--font-sans`	'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif

--text-display clamp(30px, 1.5rem + 3.2vw, 52px) · peso 600 · entrelinha 1.08 · tracking -0.03em

Ícones de tecnologia num único SVG

--text-h1 clamp(25px, 1.35rem + 2.1vw, 38px) · peso 600 · entrelinha 1.15 · tracking -0.022em

Ícones de tecnologia num único SVG

--text-h2 clamp(21px, 1.15rem + 1.1vw, 28px) · peso 600 · entrelinha 1.22 · tracking -0.016em

Ícones de tecnologia num único SVG

--text-h3 20px · peso 600 · entrelinha 1.3 · tracking -0.01em

Ícones de tecnologia num único SVG

--text-body 16px · peso 400 · entrelinha 1.65 · tracking 0

Ícones de tecnologia num único SVG

--text-small 14px · peso 400 · entrelinha 1.55 · tracking 0

Ícones de tecnologia num único SVG

--text-label 12px · peso 600 · entrelinha 1.3 · tracking 0.08em

Ícones de tecnologia num único SVG

--text-code 12px · peso 400 · entrelinha 1.6 · tracking 0

Ícones de tecnologia num único SVG

Espaço e grade

Base de 4px, grade de 12 colunas, largura máxima de conteúdo.

--space-1 4px

--space-2 8px

--space-3 12px

--space-4 16px

--space-5 24px

--space-6 32px

--space-7 48px

--space-8 64px

--space-9 96px

Token	Valor
`--grid-cols`	12
`--grid-gutter`	24px
`--content-max`	1240px

A grade de 12 colunas, com o gutter do token:

Superfície e elevação

Régua de 1px como padrão. Sombra só onde há sobreposição real — popover, drawer, modal, toast. Card e seção estática não recebem sombra decorativa.

Token	Valor
`--rule`	1px solid var(--edge)
`--radius-sm`	8px
`--radius`	12px
`--radius-lg`	18px
`--radius-pill`	999px
`--shadow-overlay`	0 12px 32px -8px rgb(15 23 42 / 24%)
`--shadow-toast`	0 8px 24px -6px rgb(15 23 42 / 20%)
`--focus-ring`	2px solid var(--accent)
`--focus-offset`	2px

--bg

--surface + --rule

--surface-2

--shadow-overlay

Motion

Quatro pares duração/easing, um por classe de interação.

--dur-fast 120ms · --ease-fast

--dur-base 180ms · --ease-base

--dur-slow 280ms · --ease-slow

--dur-lazy 420ms · --ease-lazy

Token	Duração	Onde se aplica
`--dur-fast`	120ms	hover, foco, chips
`--dur-base`	180ms	tabs, toast, tooltip
`--dur-slow`	280ms	drawer, modal
`--dur-lazy`	420ms	entrada de grade, preview

Sob prefers-reduced-motion: reduce os quatro tokens vão a 0.01ms de uma vez, no próprio tokens.css — nenhum componente precisa lembrar da media query.

Componentes

Hover e foco não se capturam numa página estática, então cada um aparece duas vezes: o componente real, que responde ao seu mouse e ao seu teclado, e um gêmeo com o estado forçado por classe, para o estado ser visível sem interação.

Botão

padrão

hover

foco

ativo

desabilitado

carregando

Botão de marca

padrão

hover

foco

ativo

desabilitado

carregando

Botão fantasma

padrão

hover

foco

desabilitado

Chip

padrão

hover

foco

selecionado

removível

Tabs

Campo e select

padrão

foco

desabilitado

select

busca

Toggle

dois estados

Bloco de código com cópia

[![Minhas skills](https://skill-icons-gcruz.vercel.app/icons?i=ts,react,nodejs)](https://gcruz.dev.br)

Tooltip

no hover e no foco

Toast

sucessoSnippet copiado

erroNão foi possível copiar

Modal e drawer

A mesma peça com ancoragem diferente: cena escura, painel, foco preso, Esc para fechar e foco devolvido a quem abriu. O drawer é o menu mobile — reduza a janela abaixo de 820px para vê-lo.

modal