Aithusa SquadBrand ShowcaseV2.0 Dark Cockpit Edition

PATTERN LIBRARY

NOISE · FRAMES · HAZARD · CIRCUIT · TEXTURES // 2026

Design System / Patterns & FX6 Systems2026
DESIGN PATTERNS6 SYSTEMS2026
01
GRID PATTERNS
BACKGROUND TEXTURES

Dot Grid

pattern-dot-grid

Fundo padrão. Densidade média para backgrounds e áreas amplas.

Dot Grid Dense

pattern-dot-grid-dense

Densidade maior. Use em áreas pequenas e elementos de destaque.

Dot Grid Sparse

pattern-dot-grid-sparse

Espaçamento largo. Backgrounding leve para dashboards e painéis.

Crosshair Grid

pattern-crosshair

Malha grid com cruzamento standard. Frequência técnica para interfaces.

Crosshair Tight

pattern-crosshair-tight

Malha tight grid. Densidade maior para textures técnicas e HUD.

Wireframe Persp.

pattern-wireframe-persp

Malha wireframe com perspectiva. Cria profundidade 3D falsa.

Plus Grid

pattern-plus-grid

Sinal plus sign repetindo. Minimal technical grid para áreas sidebar.

02
HUD FRAMES
CONTAINMENT ELEMENTS

Frame Preview

Frame Bracket

frame-bracket

Top-left e bottom-right corner brackets. Framing para content panels.

Frame Preview

Frame Bracket Full

frame-bracket-full

All four corner brackets. Framing completo para content areas.

Frame Preview

Frame Tech

frame-tech

Clipped polygon border. 10px corner size. 3px panel frame com line divider.

Frame Preview

Frame Tech Small

frame-tech-sm

Variant menor. Clip panel para elementos e badges pequenos.

Frame Preview

Frame Tech Large

frame-tech-lg

Recorte dramático para hero panels e grandes feature areas.

Frame Preview

Frame Notch TR

frame-notch-tr

Notch no canto superior direito. Assimétrico para machine slot.

Frame Preview

Frame Notch BL

frame-notch-bl

Notch no canto inferior esquerdo. Mirror do TR notch.

Frame Preview

Frame Notch Both

frame-notch-both

TR e BL notches. Simetria diagonal para framing técnico balanceado.

03
HAZARD / WARNING
ALERT PATTERNS

Hazard Stripes

pattern-hazard

Stripes diagonais bold em lime e black. Alta visibilidade para alertas críticos.

Hazard Thin

pattern-hazard-thin

Stripes diagonais finas. Para indicadores menores e bordas de alerta.

Hazard Subtle

pattern-hazard-subtle

Textura diagonal de baixa opacidade. Warning seguro para backgrounds.

WARNING // SYSTEM ACTIVE

Warning Bar

pattern-warning-bar

Barra full-width com bg lime e faixa de perigo. Alert strip de atenção máxima.

04
CIRCUIT TRACES
PCB DECORATORS

Circuit Trace Horizontal

pattern-circuit-h

SVG horizontal trace com solder points. Repete em 25px height como frame divider decorativo.

Circuit Board

pattern-circuit-board

Grid PCB com vertical e horizontal traces e junction nodes. Textura full-surface de circuito.

05
TEXTURES
SURFACE TREATMENTS

Scanlines

pattern-scanlines

Linhas horizontais tênues. CRT monitor overlay para interfaces dark retro.

Scanlines Heavy

pattern-scanlines-heavy

Scanlines mais densas. Efeito CRT forte para overlays dramáticos.

Noise Texture

pattern-noise

SVG fractalNoise mascarado a 8% opacity. Adiciona profundidade e grit.

Data Rain

pattern-data-rain

Colunas de dados verticais com sweep gradient. Matrix-inspired overlay.

Industrial Surface

pattern-industrial

Multi-stop gradient com highlight e shadows. Brushed metal para top panels.

06
DIVIDERS & SEPARATORS
SECTION DIVIDERS

Tech Divider

divider-tech

Linha com diamond corner. Clean section separator com estética técnica.

Arrow Divider

divider-arrow

Triângulo apontando direita. Separator direcional indicando fluxo.

Dashed Divider

divider-dashed

Dash-dot pattern repetindo. Leve para temas de UI secundários.

Double Divider

divider-double

Duas linhas paralelas. Framing forte para hero sections e header anchors.