PATTERN LIBRARY
NOISE · FRAMES · HAZARD · CIRCUIT · TEXTURES // 2026
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.
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.
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 Bar
pattern-warning-bar
Barra full-width com bg lime e faixa de perigo. Alert strip de atenção máxima.
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.
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.
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.