# Blueprint pattern — Unless design system

Surfaces

# Blueprint pattern
  [Construction](/en/design/surfaces/blueprint/)[Variants](/en/design/surfaces/blueprint/variants/)[Download](/en/design/surfaces/blueprint/download/)
## Three fill variants the blueprint ships

The same SVG geometry, with the logo-silhouette fill (the outer-ring annulus + the lower triangle peak) tinted differently for three use-contexts: the homepage hero, generic light surfaces, and dark surfaces.

- **Home** - greyscale + dimmed via `filter: brightness(0.15) saturate(0)`. Reads as a quiet dark watermark on the paper-cool homepage hero.
- **Light** - darkened blue via `filter: brightness(0.15)`. Adds a quiet brand-coloured texture on paper / light surfaces.
- **Dark** - default blue at reduced opacity. Reads as a subtle glow on dark / navy surfaces.
- The static SVG is uniformly #93B4F5 (peak-blue-lifted). Surfaces tint via CSS filters — desaturated for the homepage, default blue elsewhere.
- When slotted into `<AgentLoop>` the pattern spins clockwise at 16s/cycle. See [Experiments → Agent loop](/en/design/experiments/agent-loop/).
       [Blueprint pattern · Construction](/en/design/surfaces/blueprint/)     [Blueprint pattern · Download](/en/design/surfaces/blueprint/download/)