DESIGN TOKENS.
Todos os valores do sistema em um lugar. Tokens são a única fonte de verdade — cor, tipo, espaço, layout. Nenhum valor hardcoded fora daqui.
Localização: src/styles/tokens.css — importado via globals.css como primeiro arquivo. Todos os tokens são custom properties CSS (var(--nome)).
Único token customizável. Sobrescreva apenas --gold para mudar o acento do sistema inteiro. Todos os outros tokens são fixos e não devem ser alterados.
:root {
/* ── Pretos ─────────────────────────────────── */
--black-absolute: #000000;
--black-rich: #0a0a0a;
--black-surface: #111111;
--black-elevated: #161616;
--black-card: #1c1c1c;
--border: #222222;
--border-subtle: #1a1a1a;
/* ── Gold — único token customizável ────────── */
--gold: #c8a44e;
--gold-light: #e0c06a;
--gold-bright: #f0d878;
--gold-dim: rgba(200,164,78,0.12);
--gold-dimmer: rgba(200,164,78,0.06);
--gold-glow: rgba(200,164,78,0.25);
/* ── Texto ───────────────────────────────────── */
--white: #f0ece4;
--white-pure: #ffffff;
--gray-100: #e0dcd4;
--gray-200: #b0b0b0;
--gray-300: #8a8a8a;
--gray-400: #666666;
--gray-500: #444444;
/* ── Status ──────────────────────────────────── */
--status-success: #4ec86a;
--status-warning: #e8a838;
--status-error: #c83232;
--status-info: #4e8cc8;
/* ── Tipografia ──────────────────────────────── */
--font-display: 'Bebas Neue', 'Anton', sans-serif;
--font-display-alt: 'Oswald', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--text-hero: 72px;
--text-display-lg: 48px;
--text-display-md: 36px;
--text-display-sm: 24px;
--text-body-lg: 18px;
--text-body: 16px;
--text-body-sm: 14px;
--text-label: 14px;
/* ── Espaçamento ─────────────────────────────── */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
/* ── Layout ──────────────────────────────────── */
--nav-height: 56px;
--sidebar-width: 256px;
--content-max: 860px;
--radius: 0px;
--transition: 200ms ease;
}{
"color": {
"black": {
"absolute": "#000000",
"rich": "#0a0a0a",
"surface": "#111111",
"elevated": "#161616",
"card": "#1c1c1c"
},
"border": "#222222",
"borderSubtle":"#1a1a1a",
"gold": "#c8a44e",
"goldLight": "#e0c06a",
"goldBright": "#f0d878",
"white": "#f0ece4",
"gray": {
"100": "#e0dcd4",
"200": "#b0b0b0",
"300": "#8a8a8a",
"400": "#666666",
"500": "#444444"
},
"status": {
"success": "#4ec86a",
"warning": "#e8a838",
"error": "#c83232",
"info": "#4e8cc8"
}
},
"font": {
"display": "Bebas Neue",
"displayAlt": "Oswald",
"body": "DM Sans",
"mono": "JetBrains Mono"
},
"size": {
"hero": "72px",
"displayLg": "48px",
"displayMd": "36px",
"displaySm": "24px",
"bodyLg": "18px",
"body": "16px",
"bodySm": "14px",
"label": "14px"
},
"space": {
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"2xl": "48px",
"3xl": "64px",
"4xl": "96px"
}
}/* Em qualquer CSS depois do import do sistema */
:root {
--gold: #ff5500; /* laranja, por exemplo */
}
/* Todas as variantes (--gold-light, --gold-dim, etc.)
precisam ser sobrescritas manualmente neste portal.
No futuro framework npm elas serão derivadas via color-mix(). */Use sempre var(--token). Nunca escreva um valor de cor, tamanho ou fonte diretamente no código — use o token correspondente. Isso garante consistência e facilita ajustes futuros.
Não crie tokens novos sem necessidade. Se o valor que você precisa já existe na escala (ex: 16px = --space-md), use o token existente. Tokens extras fragmentam o sistema.