Saltar al contenido
fluxr
Patterns & Textures16Brandbook

Patterns & Textures

Grids decorativos, dividers, texturas y patrones visuales que componen el ADN visual de Fluxr Pro.

Grid Patterns

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

Dividers & Separadores

02
Gradient Divider
linear-gradient(90deg, transparent, var(--brand-primary)/40, var(--brand-primary)/40, transparent)
Solid Divider
#222f49 · border estándar entre sections
Dashed Divider
1px dashed · separación secundaria

Texturas & Overlays

03
Scanlines
Overlay CRT sutil · overlays dramáticos
Ambient Glow
Glow difuso · transiciones entre sections

Patrones de Tile

04
Cross Pattern
tile 60×60 · SVG blanco · opacity 0.05 vía ::before · landing Agentes de Voz
background-image: url("data:image/svg+xml,..."); /* 60×60 SVG tile */
opacity: 0.05; /* aplicado no ::before */
Hachura Diagonal
45° · 8px · blanco 6% · secciones con densidad textural
repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0px 1px, transparent 1px 8px)
Tablero Sutil
conic-gradient · 20px · lime 5% · paneles y hero
conic-gradient(lime/5 90deg, transparent 0 180deg, lime/5 0 270deg, transparent 0)
background-size: 20px 20px
Radar / Ondas
radial multicapa · 80px · lime · secciones destacadas
radial-gradient(circle, lime/12 1px, transparent 1px),
radial-gradient(circle, transparent 29%, lime/5 30%, transparent 31%), …
background-size: 80px 80px
Ruido SVG
feTurbulence fractalNoise · monocromático · opacity 0.04
<feTurbulence type="fractalNoise" baseFrequency="0.65"
numOctaves="3" stitchTiles="stitch"/>
<feColorMatrix type="saturate" values="0"/>