AIOX SQUADPATTERN LIBRARYV1.0 // DARK COCKPIT EDITION

Pattern Library

Grids · Frames · Hazard · Circuit · Textures

Design Patterns6 Sections2026
01Grid PatternsBackground Textures

Dot Grid

.pattern-dot-grid

16px spaced lime dots on dark surface. Default density for backgrounds and empty states.

Dot Grid Dense

.pattern-dot-grid--dense

8px spaced dots, tighter weave. Use for small panels or thumbnail backgrounds where detail matters.

Dot Grid Sparse

.pattern-dot-grid--sparse

32px spacing with larger dots. Subtle backdrop for hero sections and large content areas.

Crosshair Grid

.pattern-crosshair-grid

80px grid lines with centered crosshair dots. Technical blueprint feel for header and footer sections.

Crosshair Grid Tight

.pattern-crosshair-grid--tight

40px tight grid variant. Higher density crosshair pattern for smaller panels and technical overlays.

Wireframe Perspective

.pattern-wireframe-perspective

60px wireframe grid with radial glow center. Creates depth illusion for 3D-feel backgrounds.

Symbol Grid

.pattern-symbol-grid

32px SVG X-marks repeating tile. Adds branded texture with subtle lime cross symbols.

Plus Grid

.pattern-plus-grid

32px SVG plus-sign repeating tile. Minimal technical grid using additive cross markers.

02HUD FramesContainment Elements
Frame Preview

Frame Bracket

.frame-bracket

Top-left and bottom-right corner brackets in lime. Minimal HUD framing for content panels.

Frame Preview

Frame Bracket Full

.frame-bracket--full

All four corner brackets via ::before/::after plus .frame-bracket__inner pseudo-elements. Full containment frame.

Frame Preview

Frame Tech

.frame-tech

Clipped polygon border with 12px corner cuts. Sci-fi panel frame with lime 1px stroke.

Frame Preview

Frame Tech Small

.frame-tech--sm

8px corner cuts variant. Tighter clip-path for smaller UI elements like badges and tags.

Frame Preview

Frame Tech Large

.frame-tech--lg

20px corner cuts variant. Dramatic angled frame for hero panels and large feature cards.

Frame Preview

Frame Notch TR

.frame-notch-tr

Top-right 16px notch clip-path. Asymmetric cut suggesting a data port or interface slot.

Frame Preview

Frame Notch BL

.frame-notch-bl

Bottom-left 16px notch clip-path. Mirror of TR notch for opposing panel layouts.

Frame Preview

Frame Notch Both

.frame-notch-both

Top-right and bottom-left 16px notches. Diagonal symmetry for balanced technical framing.

03Hazard / WarningAlert Patterns

Hazard Stripes

.pattern-hazard

Bold 10px repeating diagonal stripes in lime and black. High-visibility warning pattern for critical UI zones.

Hazard Thin

.pattern-hazard--thin

5px thin stripe variant. Tighter diagonal bands for smaller warning indicators and border accents.

Hazard Subtle

.pattern-hazard--subtle

15% opacity translucent stripes on black. Background-safe warning texture that does not overpower content.

WARNING // SYSTEM ACTIVE

Warning Bar

.bar-warning

Solid lime bar with black text and diagonal stripe accent on right edge. Attention-grabbing alert banner.

04Circuit TracesPCB Decoratives

Circuit Trace Horizontal

.pattern-circuit-h

SVG horizontal circuit path with solder points. Repeats on x-axis at 20px height. Use as a decorative trace divider.

Circuit Board

.pattern-circuit-board

80px tiling SVG with vertical and horizontal PCB traces plus junction nodes. Full-surface circuit texture.

05TexturesSurface Treatments

Scanlines

.pattern-scanlines

2px repeating horizontal scanlines at 15% opacity. CRT monitor overlay for retro-tech atmosphere.

Scanlines Heavy

.pattern-scanlines--heavy

1px tight scanlines at 25% opacity. Heavier CRT effect for dramatic overlays and image treatments.

Noise Texture

.pattern-noise

SVG fractal noise via ::after pseudo-element at 4% opacity with overlay blend. Adds analog grain to any surface.

Data Rain

.pattern-data-rain

Vertical 40px column lines with top-bottom neon gradient wash. Matrix-inspired data stream background.

Industrial Surface

.pattern-industrial

Multi-stop dark gradient with inset highlight and shadow. Brushed metal feel for tool panels and sidebars.

06Dividers & SeparatorsSection Breaks

Tech Divider

.divider-tech

Centered gradient line fading from transparent to lime from both edges. Clean section separator with tech glow.

Arrow Divider

.divider-arrow

Left-extending line with right-facing arrow triangle. Directional separator indicating flow or progression.

Dashed Divider

.divider-dashed

Repeating 8px lime dashes at 50% opacity. Lightweight separator for secondary content breaks.

Double Divider

.divider-double

Two parallel gradient lines 5px apart, fading from transparent to lime. Emphatic section break for major transitions.