Entrega · Tokens
Tokens
Fonte única da verdade. Tudo que aparece nas outras páginas — cor, espaço, radius, elevação, motion, tipografia — é gerado a partir daqui. Se algo divergir, Tokens ganha.
Pacote completo
Um mesmo conjunto, três formatos. Copie e cole no seu projeto.
:root {
/* ============================================================
* COR — escalas primárias (fonte da verdade)
* ============================================================ */
/* Pink 50 → 950 (500 = brand) */
--pink-50:#FFF7FA; --pink-100:#FFE8F1; --pink-200:#FED9E7; --pink-300:#FED0E1;
--pink-400:#FECBDF; --pink-500:#FEC5DD; --pink-600:#FAA9CB; --pink-700:#F58BB8;
--pink-800:#C4658C; --pink-900:#82405B; --pink-950:#4A1F30;
/* Ink 50 → 950 (900 = fundo do produto) */
--ink-50:#F5F5F7; --ink-100:#E9E9EC; --ink-200:#D4D5D9; --ink-300:#A8A8B2;
--ink-400:#7A7B84; --ink-500:#6D6E77; --ink-600:#55565C; --ink-700:#3F4046;
--ink-800:#33343A; --ink-850:#2A2B30; --ink-900:#202125; --ink-950:#16171A;
/* Aliases da marca */
--rosa: var(--pink-500); /* assinatura visual — CTAs, foco, destaques */
--rosa-detalhe: var(--pink-700); /* rosa mais denso para detalhes / borda ativa */
--rosa-link: var(--pink-500); /* pink-500 sobre ink-900 = 12.3:1 (AAA) */
--neutra: var(--ink-900); /* fundo padrão do produto (dark-first) */
/* Superfícies · dark-first */
--background: var(--ink-900);
--surface: var(--ink-850);
--surface-2: var(--ink-800);
--surface-3: var(--ink-700);
--border: #3A3B41;
--border-strong: var(--ink-600);
/* Texto — intensidades */
--text: var(--ink-50); /* AAA · 14.7:1 sobre ink-900 */
--text-2: var(--ink-300); /* AA · 6.4:1 */
--text-3: var(--ink-500); /* AA UI grande · 3.3:1 — nunca para corpo */
/* Semânticas — calibradas sobre ink-900 */
--success: #4ADE80;
--destructive: #F14343;
--warning: #FACC15;
--info: #60A5FA;
/* Categóricas para gráfico */
--cat-1: var(--pink-500);
--cat-2: var(--pink-700);
--cat-3: #C084FC;
--cat-4: #60A5FA;
--cat-5: #4ADE80;
/* ============================================================
* ESPAÇAMENTO — base 4px (16 paradas · 2 → 128)
* ============================================================ */
--sp-0-5:2px; --sp-1:4px; --sp-1-5:6px; --sp-2:8px;
--sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
--sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
--sp-20:80px; --sp-24:96px; --sp-32:128px;
/* ============================================================
* BORDA — radius, largura
* ============================================================ */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;
--radius-circle: 9999px;
--bw-hairline:0.5px; --bw-1:1px; --bw-2:2px; --bw-4:4px;
/* ============================================================
* TIPOGRAFIA — line-height & tracking
* ============================================================ */
--lh-tight:1.05; --lh-snug:1.25; --lh-normal:1.4; --lh-relaxed:1.6; --lh-loose:1.75;
--tr-tight:-0.015em; --tr-normal:0; --tr-wide:0.2em;
/* ============================================================
* ELEVAÇÃO — E1 → E5 + glow rosa + blur
* ============================================================ */
--e1: 0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02);
--e2: 0 4px 12px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.03);
--e3: 0 12px 32px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.04);
--e4: 0 24px 56px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);
--e5: 0 40px 96px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
--glow-rosa: 0 0 0 6px rgba(254,197,221,.18), 0 8px 40px rgba(254,197,221,.45);
--blur-sm: 8px;
--blur-md: 18px;
--blur-lg: 32px;
/* Opacidade */
--op-0:0; --op-10:.10; --op-20:.20; --op-30:.30; --op-40:.40;
--op-50:.50; --op-60:.60; --op-70:.70; --op-80:.80; --op-90:.90; --op-100:1;
/* ============================================================
* MOTION — easings & durações
* ============================================================ */
--ease-standard: cubic-bezier(.2,.8,.2,1);
--ease-in: cubic-bezier(.4,0,1,1);
--ease-out: cubic-bezier(0,0,.2,1);
--dur-micro: 140ms; /* hover, focus */
--dur-base: 240ms; /* transições padrão */
--dur-reveal: 520ms; /* entrada de conteúdo */
}Container widths & breakpoints
Larguras máximas oficiais e a tabela de breakpoints usada em todo o produto.
| Token | Largura | Uso |
|---|---|---|
| max-w-prose | 672px | Formulários, docs, leitura |
| max-w-app | 1280px | Layout de app padrão |
| max-w-wide | 1536px | Dashboards e tabelas densas |
| Nome | min-width | Uso |
|---|---|---|
| mobile | 0 | Base mobile-first |
| sm | 640px | Tablet retrato |
| md | 768px | Tablet paisagem |
| lg | 1024px | Desktop |
| xl | 1280px | Desktop wide |
| 2xl | 1536px | Monitor gigante |
Logos — SVGs oficiais
Sempre usar o SVG original. Nunca redesenhar, nunca aplicar filtros. Rosa é o padrão sobre fundo escuro; branco quando o rosa não convive com a cor de fundo; preto apenas em fundo claro (exceção).
Carregamento de fontes
Anton (display), Antonio (heading), Outfit (sans), JetBrains Mono (mono). Carregar via <link>, nunca @import de URL no CSS.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Antonio:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" />Regra de ouro
Zero exceção
Nunca hex hardcoded no código do app.
/* ✅ */
.button { background: var(--rosa); color: var(--neutra); }
/* ❌ */
.button { background: #FEC5DD; color: #202125; }