Brand Design System — v1.0

THE [NODEGRID]
BRAND DESIGN SYSTEM.

Guias, tokens, componentes e padrões para construir produtos NodeGrid com consistência, intenção e craft.

Explorar Guidelines Ver Fundações
scroll
80+
Design Tokens
4
Pilares
3
Camadas Token
v1.0
Versão Actual
Estrutura

Quatro pilares.
Um sistema coerente.

O Brand Design System da NodeGrid organiza-se em quatro dimensões complementares — da estratégia ao detalhe técnico.

01 — GUIDELINES
Brand Guidelines
Estratégia de marca, identidade visual, voz e posicionamento. A base que dá sentido a tudo o resto.
Manifesto & WHY
Arquétipos & Personalidade
Identidade Visual
Tom de Voz
Explorar Guidelines
02 — FOUNDATIONS
Design Foundations
Sistema de tokens em 3 camadas: primitivos, semânticos e de componente. Cor, tipografia, espaçamento e motion.
Paleta de Cor (Green + Gold)
Tipografia (3 famílias)
Espacamento & Grid
Motion & Elevação
Explorar Foundations
03 — COMPONENTS
UI Components
Biblioteca de componentes reutilizáveis construídos sobre os tokens. Botões, cards, inputs, badges e mais.
Buttons & CTAs
Cards & Surfaces
Forms & Inputs
Navigation
Explorar Components
04 — PATTERNS
Design Patterns
Padrões visuais recorrentes: dot grids, circuit traces, HUD frames e texturas que definem o carácter visual NodeGrid.
Dot Grid & Noise
Circuit Traces
HUD Frames
Section Dividers
Explorar Patterns
Design Tokens

Arquitectura em 3 camadas.

Primitivos → Semânticos → Componente. Uma hierarquia que torna o sistema escalável, mantível e consistente.

Paleta de Cor 14 primitivos
--bg-base → #070e07
--accent-primary → #72b872
--cta-bg → #f0d474
Tipografia 3 famílias
5xl NodeGrid
2xl Space Grotesk
base Inter Regular para body text e UI
sm Inter para captions e labels
xs JETBRAINS MONO
Motion 7 easings
fast 100ms
base 180ms
slow 300ms
spring
bounce

↑ clica para animar

Navegação

Explorar o sistema.

Cada secção do brandbook é um artefacto de referência independente. Encontra exactamente o que precisas.

Guidelines
Manifesto
WHY / HOW / WHAT — o propósito que guia todas as decisões de marca.
Guidelines
Arquétipos
Creator 60% + Rebel 40% — a personalidade que distingue a NodeGrid.
Guidelines
Tom de Voz
StoryBrand BrandScript — como a NodeGrid comunica com clareza e intenção.
Foundations
Paleta de Cor
Green scale, Gold CTA, Neutral e Feedback — com valores hex e token names.
Foundations
Tipografia
Space Grotesk, Inter e JetBrains Mono — escala, pesos e uso correcto.
Foundations
Design Tokens
80+ tokens em 3 camadas. Referência completa com nomes, valores e propósito.
Guidelines
Logo & Variantes
Logótipo SVG, variante white, uso correcto, espaçamento e fundos permitidos.
Components
Biblioteca de Componentes
Buttons, cards, inputs, badges — prontos a usar com tokens correctos.
Patterns
Padrões Visuais
Dot grid, circuit traces e HUD frames — texturas que definem o carácter NodeGrid.
Manifesto
"Construímos software como ofício.
Cada linha de código é uma decisão
que respeita quem a vai usar."
CRAFT
Software construído com intenção. Cada detalhe importa.
ARQUITECTURA
Estrutura que aguenta o crescimento. Design que dura.
PARCERIA
Trabalhamos dentro do teu negócio, não só para ele.
FAQ

Perguntas frequentes.

O que é o NodeGrid Brand Design System?
É a referência oficial para todos os artefactos visuais e de comunicação da NodeGrid. Inclui tokens de design, guias de uso do logótipo, tipografia, cor, componentes e padrões — tudo documentado para garantir consistência em qualquer produto ou canal.
Como devo usar os design tokens?
Usa sempre tokens semânticos (ex: --accent-primary) em vez de primitivos (ex: --green-300). Os tokens semânticos expressam intenção — o que significa, não apenas que cor é. Isto torna o sistema mais fácil de manter e de evoluir.
Posso usar o logótipo NodeGrid em materiais de marketing?
Sim — dentro das regras definidas nas Brand Guidelines. O logótipo original (sage green) deve ser usado em fundos escuros. A variante white está disponível para contextos de contraste elevado. Nunca alteres as proporções, cores ou isolamento mínimo. Consulta a secção Logo & Variantes para guias detalhados.
Qual é a fonte principal da NodeGrid?
O sistema usa três famílias com funções distintas: Space Grotesk para headings e display, Inter para body text e UI, e JetBrains Mono para código, labels técnicos e elementos de identidade.
Onde está o ficheiro tokens.css?
Em nodegrid-brand/css/tokens.css. Inclui todas as 3 camadas de tokens, aliases de retrocompatibilidade e tokens de componente. Importa este ficheiro antes de qualquer outro CSS do projecto.