Brand Design System / Patterns

Design Patterns

Texturas, grids e frames que definem o carácter técnico da NodeGrid. Todos implementados em CSS puro usando os design tokens do sistema.

01

Background Patterns

Padrões de fundo que adicionam profundidade e carácter técnico sem distrair o conteúdo. Usados em heroes, headers e secções de destaque.

Dot Grid — 24px / rgba(green,.35)
Dot Grid Standard
Hero & Section Headers
background-image: radial-gradient(circle, rgba(114,184,114,.35) 1px, transparent 1px); background-size: 24px 24px;
Dot Grid Fine — 12px / rgba(green,.2)
Dot Grid Fine
Cards & Panels de Detalhe
background-image: radial-gradient(circle, rgba(114,184,114,.2) 1px, transparent 1px); background-size: 12px 12px;
Line Grid — 40px / rgba(green,.06)
Line Grid
Fondos de Aplicação Subtis
background-image: linear-gradient(rgba(114,184,114,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(114,184,114,.06) 1px, transparent 1px); background-size: 40px 40px;
Circuit Traces — Grid + Dot offset
Circuit Traces
Tech Sections & Footers
background-image: linear-gradient(rgba(114,184,114,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(114,184,114,.04) 1px, transparent 1px), radial-gradient(circle, rgba(114,184,114,.25) 1.5px, transparent 1.5px); background-size: 40px 40px, 40px 40px, 40px 40px; background-position: 0 0, 0 0, 20px 20px;
Radial Glow — Centro suave
Radial Glow
Destaques & Callouts
background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(114,184,114,.12) 0%, transparent 70%), var(--bg-base);
Top Glow — Topo da secção
Top Glow — Secções Hero
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(114,184,114,.1) 0%, transparent 70%), var(--bg-base);
02

HUD Frames

Frames de interface técnica com cantos angulares — inspirados em HUDs de sistemas de monitorização. Usados em cards de destaque, dashboards e elementos de métricas.

HUD Frame — Cantos angulares com scan line
Sistema / Status
Design Tokens
80+ tokens activos
/* HUD Frame — ver patterns.html para implementação completa com ::before/::after */

O HUD frame usa 4 pseudo-elementos e 2 divs para os cantos angulares. A scan line é um elemento CSS animado que não requer JS. Usa --accent-primary nos cantos e --border-interactive nos lados para hierarquia visual.

03

Section Dividers

Separadores entre secções de página. Três variantes com diferentes níveis de ênfase visual. O glow divider marca transições importantes.

Divider Variants
Subtle — border-subtle
Gradient Center — accent-dim
Gradient Left — accent-dim
Glow Divider — accent-primary + shadow
/* Gradient center */ background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
/* Glow */ background: linear-gradient(90deg, transparent, var(--accent-primary), transparent); box-shadow: 0 0 8px rgba(114,184,114,.3);
04

Regras de Uso

Cada padrão tem contexto de uso adequado. Misturar padrões no mesmo ecrã destrói a hierarquia visual. Segue a tabela de referência.

Padrão Onde usar Onde não usar
Dot Grid (24px) Heroes, page headers, landing sections Cards, modals, conteúdo denso
Dot Grid Fine (12px) Sidebars, painéis secundários, backgrounds de detalhe Junto com outros padrões de fundo
Line Grid Fundos de aplicação subtis, dashboard bg Secções com muito texto — reduz legibilidade
Circuit Traces Footers técnicos, secções de dados, banners Conteúdo editorial ou marketing copy
Radial Glow Callouts, features de destaque, CTAs Fundo geral — perde impacto com uso excessivo
Top Glow Secções hero, início de página, above the fold Below the fold — usar apenas uma vez por página
HUD Frame Métricas de destaque, cards de status, dashboards Conteúdo textual longo, listas, tabelas
Glow Divider Transição entre hero e conteúdo, separações major Divisores dentro de secções — usar subtle ou center
Regra de ouro

Nunca mais do que um padrão de fundo por secção. Padrões são subtexto visual — devem sentir-se como a superfície, não como o conteúdo. Se o padrão compete com o texto, está demasiado forte (reduz opacity) ou no lugar errado.