- Use one pattern per surface, never two.
- Read foreground from
--inkor--signalonly. - Read background from
--paperor--paper-softonly. - Pair with a calm headline. The pattern is the field; the words are the figure.
Patterns — Cloud Mist Labs
Patterns.
Six ground patterns. All stretch-to-fit. All read from a single foreground/background token pair so they shift cleanly between light and dark surfaces.
Pattern specimens
-
01 · Stratum repeat The mark, tiled. Field-fill for hero blocks, deck covers.
-
02 · Pill grid Varied-width pills, rhythmic. Background for testimonials, decks.
-
03 · Horizons Three soft horizontal bands. The brand-anchor pattern. Most-used.
-
04 · Strata wave Three layered sine waves. Hero accents only — never as full ground.
-
05 · Blueprint Dashed grid + dots. Technical pages, decks, internal docs.
-
06 · Punch card Mono lines at decreasing opacity. Status pages, system docs.
Rules.
When to use a pattern, when not to.
- Stack patterns over photos.
- Animate at scroll — they’re ground, not motion.
- Use full opacity on hero text backgrounds.
- Recolour with hex; everything reads from tokens.