Foundation · Creator Design System

Patterns

16 textures, pure CSS, zero requests. Each paints on a ::before layer, so the element keeps its own background, border and content. Compose size · ink · fade.

pattern-grid

pattern-blueprint

pattern-dots

pattern-halftone

pattern-golden

pattern-scanline

pattern-timecode

pattern-filmstrip

pattern-hatch

pattern-crosshatch

pattern-waveform

pattern-rays

pattern-arcs

pattern-glow

pattern-mesh

pattern-noise

pattern-iso

pattern-plus

pattern-stripes

pattern-checker

pattern-topo

pattern-circuit

pattern-eq

pattern-sprocket

pattern-matrix

pattern-spotlight

pattern-ruler

pattern-corners

Size changes the line, not just the scale

xs · hairline

sm

lg · 1.5px

xl · 2px

scanline-fine

scanline

scanline-coarse

+ dashed

Platform accents

S Instagram ring · live ring — both are borders, never fills, so the avatar inside stays untouched.

.ring-ig · .ring-live

Compose: size, ink, fade.

A pattern should never end on a hard edge.

.pattern .pattern-grid .pattern-lg .fade-corners — also --sm/xs/xl · -signal/-craft · .fade-b/.fade-t/.fade-center