Shared assets
Background elements
Decorative layers for hero and section backgrounds: patterns (Grid, Grid check, Grid dot, Tech grid), decorative shapes, overlays and masks. Place inside a relative container; layers ignore pointer events. Figma: Background elements.
import
{ BackgroundPattern, BackgroundPatternDecorative, BackgroundOverlay } from "@pepulux/ui"Pattern types — mask on
Grid
Grid check
Grid dot
Tech grid
Size and mask shapes
size sm (48px cells) or md (72px). mask: radial, ellipse, top, bottom, left, right, arch — or false for none.
radial
ellipse
top
bottom
arch
false
Decorative shapes
Overlay — over imagery
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type (BackgroundPattern) | "grid" | "grid-check" | "grid-dot" | "tech-grid" | "grid" | Figma Type |
| size | "sm" | "md" | "md" | Figma Size — 48px or 72px cells |
| mask | boolean | "radial" | "ellipse" | "top" | "bottom" | "left" | "right" | "arch" | true | Figma Background mask — fade toward the edges |
| color | string | var(--n-300) | Stroke colour |
| type (Decorative) | "circles" | "squares" | "dots" | "circles" | Figma Background pattern decorative |
| direction (Overlay) | "top" | "bottom" | "left" | "right" | "radial" | "bottom" | Direction the gradient fades toward |
| tone / intensity | "dark" | "light" | "brand" / number | "dark" / 0.6 | Overlay colour and strength (0–1) |