Skip to content
fluxr
Patterns & Textures16Brandbook

Patterns & Textures

Decorative grids, dividers, textures and visual patterns that make up the Fluxr Pro visual DNA.

Grid Patterns

01
Dot Grid
16px · lime dots · backgrounds
Line Grid
48px · lime lines · hero sections
Radial Glow
lime center glow · hero/CTA

Dividers & Separators

02
Gradient Divider
linear-gradient(90deg, transparent, var(--brand-primary)/40, var(--brand-primary)/40, transparent)
Solid Divider
#222f49 · default border between sections
Dashed Divider
1px dashed · secondary separation

Textures & Overlays

03
Scanlines
Subtle CRT overlay · dramatic overlays
Ambient Glow
Diffuse glow · transitions between sections

Tile Patterns

04
Cross Pattern
60×60 tile · white SVG · opacity 0.05 via ::before · Voice Agents landing
background-image: url("data:image/svg+xml,..."); /* 60×60 SVG tile */
opacity: 0.05; /* aplicado no ::before */
Diagonal Hatch
45° · 8px · white 6% · high-density textural sections
repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0px 1px, transparent 1px 8px)
Subtle Checkerboard
conic-gradient · 20px · lime 5% · panels and hero
conic-gradient(lime/5 90deg, transparent 0 180deg, lime/5 0 270deg, transparent 0)
background-size: 20px 20px
Radar / Ripples
multi-layer radial · 80px · lime · highlight sections
radial-gradient(circle, lime/12 1px, transparent 1px),
radial-gradient(circle, transparent 29%, lime/5 30%, transparent 31%), …
background-size: 80px 80px
SVG Noise
feTurbulence fractalNoise · monochrome · opacity 0.04
<feTurbulence type="fractalNoise" baseFrequency="0.65"
numOctaves="3" stitchTiles="stitch"/>
<feColorMatrix type="saturate" values="0"/>