Design Foundations
Sistema de tokens em 3 camadas, paleta de cor, tipografia, espaçamento e motion. A linguagem visual que torna o sistema coerente e mantível.
Paleta de Cor
A paleta da NodeGrid nasce do logótipo: forest green escuro como fundo, sage green como accent primário, gold para CTA de alta conversão. Nunca usa primitivos directamente — usa sempre tokens semânticos.
Tokens semânticos de background e texto mais usados:
Tipografia
Três famílias com funções distintas e não permutáveis. Cada uma tem um papel definido no sistema — misturá-las arbitrariamente quebra a hierarquia visual.
Todos os headings (h1–h3), display text, hero headlines, card titles. Usa sempre letter-spacing: -0.02em a -0.03em para efeito editorial. Google Fonts: pesos 400, 500, 600, 700.
Body text, parágrafos, descrições de cards, UI labels, nav links. Tamanho base: 14px (--text-base). Line-height: 1.6 para prosa, 1.25 para UI.
Section tags, badges, code snippets, token names, labels técnicos, metadata, valores numéricos em dashboards. Sempre em uppercase para identificadores, lowercase para código.
Escala tipográfica:
--text-5xl
clamp 40-72px
Hero
--text-3xl
clamp 22-36px
Section Title
--text-xl
20px
Card Title
--text-base
14px
Body text para UI e prosa
--text-sm
13px
Texto secundário, captions, notas de rodapé
--text-xs
11px
LABELS TÉCNICOS · BADGES · TAGS
Espaçamento
Escala de 4px com tokens nomeados por unidades (--s1 = 4px, --s2 = 8px, etc.). Usa sempre tokens — nunca valores hardcoded. Isto garante consistência e facilita ajustes globais.
Motion & Easing
Motion discreto e com propósito. As durações base (100–300ms) cobrem 90% dos casos de UI. Spring e bounce são reservados para momentos de delight específicos. Clica em cada linha para pré-visualizar.
Referência Completa de Tokens
Todos os tokens disponíveis em nodegrid-brand/css/tokens.css.
Usa sempre tokens de Tier 2 (semânticos) nos componentes. Tier 1 (primitivos) são apenas para criar tokens semânticos.
| Token | Valor | Tier | Uso | |
|---|---|---|---|---|
| --bg-base | → green-900 | T2 | Fundo principal da app | |
| --bg-surface | → green-800 | T2 | Cards, panels | |
| --bg-surface-raised | → green-850 | T2 | Inputs, dropdowns | |
| --bg-overlay | → green-700 | T2 | Overlays, tooltips | |
| --accent-primary | → green-300 | T2 | Cor accent principal | |
| --accent-dim | → green-500 | T2 | Accent dimmed, bordas | |
| --cta-bg | → gold-400 | T2 | Fundo CTA primário | |
| --cta-bg-hover | → gold-300 | T2 | Hover do CTA | |
| --text-primary | → neutral-100 | T2 | Texto principal | |
| --text-muted | → neutral-400 | T2 | Texto secundário | |
| --text-disabled | → neutral-600 | T2 | Texto desactivado | |
| --border-subtle | → neutral-800 | T2 | Bordas subtis | |
| --border-default | → neutral-750 | T2 | Bordas default | |
| --border-interactive | → green-500 | T2 | Bordas em foco/hover | |
| --status-error | → red-400 | T2 | Estado de erro | |
| --status-warning | → amber-400 | T2 | Estado de aviso | |
| --status-success | → emerald-400 | T2 | Estado de sucesso | |
| --btn-primary-bg | → cta-bg | T3 | Botão primário fundo | |
| --card-bg | → bg-surface | T3 | Card background | |
| --input-bg | → bg-surface-raised | T3 | Input background | |
| --badge-bg | rgba(114,184,114,.08) | T3 | Badge/tag background |