11Patterns
Thirteen abstract, hairline-only background canvases, plus the platform’s own shapes — pure CSS gradients from patterns/patterns.css, for hero bands and collection thumbnails. Put ns-pattern ns-pattern--<name> on a container; add ns-pattern--on-light on light surfaces. Click a name to copy it.
On dark bands — the default ink
ns-pattern--grid
01
ns-pattern--dots
02
ns-pattern--diagonal
03
ns-pattern--hex
04
ns-pattern--concentric
05
ns-pattern--chevron-grid
06
ns-pattern--blueprint
07
ns-pattern--topographic
08
ns-pattern--dashed-path
09
ns-pattern--circuit
10
ns-pattern--stagger
11
ns-pattern--arc
12
ns-pattern--mesh
13
On light surfaces
ns-pattern--grid
01 · + ns-pattern--on-light
ns-pattern--dots
02 · + ns-pattern--on-light
ns-pattern--diagonal
03 · + ns-pattern--on-light
ns-pattern--hex
04 · + ns-pattern--on-light
ns-pattern--concentric
05 · + ns-pattern--on-light
ns-pattern--chevron-grid
06 · + ns-pattern--on-light
ns-pattern--blueprint
07 · + ns-pattern--on-light
ns-pattern--topographic
08 · + ns-pattern--on-light
ns-pattern--dashed-path
09 · + ns-pattern--on-light
ns-pattern--circuit
10 · + ns-pattern--on-light
ns-pattern--stagger
11 · + ns-pattern--on-light
ns-pattern--arc
12 · + ns-pattern--on-light
ns-pattern--mesh
13 · + ns-pattern--on-light
Shapes
The platform's own marks as CSS rather than image files, so a band, a card or an empty state can carry a piece of the brand's geometry without commissioning art — and so the same shape can be animated or blended rather than pasted. Size with inline-size; colour comes from background, so a shape inherits whatever the surface wants.
ns-shape--cloud
the mark the certification badge carries
ns-shape--plate
the badge's heptagon, on its own
ns-shape--bolt
automation, in one polygon
ns-shape--orbit
a ring and a satellite — integration, sync
Blended, behind content
This is what the shapes are for. --blend puts a shape in soft-light over a band so it tints what is under it instead of covering it; --wash drops it to 8% for a light surface; --behind takes it out of the flow. Keep them under about 12% on content surfaces — a shape you notice while reading is a shape that failed. --drift adds a 24s rotation, and stops entirely under prefers-reduced-motion.