05 · Icons & patterns

240 icons. Built on currentColor.

A 24×24 symbol library for product UI, channels, agents, analytics, and industries — plus 11 hand-drawn “voice” icons that carry the brand's principles (speed is strategy, social proof, leads deserve better). Every SVG ships with a baked color attribute in three palette variants — ink (warm bg), pink (hero moments), duo (white-on-dark for dark surfaces) — and uses currentColor + var(--ico-alt) internally so every icon stays duotone and rethemes on the fly. Below the grid: the block pattern, the same cubes from the logo, scaled up and tiled.

5.2 Block pattern

The same cubes that make up the icon scale into a geometric pattern we use for backgrounds, banners, and full-bleed editorial moments. Keep it subtle — it should feel like texture, not wallpaper.

Block pattern

The quad at small scale, tiled. Use at 15–30% opacity behind display type, or as a full-bleed texture on hero banners.

Download banner SVG ↓

The single block

Pulled out on its own, the isometric cube is a versatile mark. Use it for bullet points, list markers, and ornamental beats. Three tones — highlight, base, shadow.

Each cube is three polygons — top, right-face, left-face — using highlight / base / shadow tones.

5.3 Scalable backgrounds

A set of SVG backgrounds in three colour themes — drop them on any section to set tone. Tiled patterns (blocks, dots, grid, iso-grid, hash, stripes) repeat seamlessly at any size; gradient-based ones (bloom, mega) ship full-bleed. All self-contained: no external CSS, no web fonts, currentColor-free, works anywhere.

BlocksWarm
SVG
BlocksInk
SVG
BlocksPink
SVG
Dot gridWarm
SVG
Dot gridInk
SVG
Dot gridPink
SVG
Square gridWarm
SVG
Square gridInk
SVG
Square gridPink
SVG
Isometric gridWarm
SVG
Isometric gridInk
SVG
Isometric gridPink
SVG
Diagonal hashWarm
SVG
Diagonal hashInk
SVG
Diagonal hashPink
SVG
Diagonal stripesWarm
SVG
Diagonal stripesInk
SVG
Diagonal stripesPink
SVG
Pink bloomWarm
SVG
Pink bloomInk
SVG
White bloomPink
SVG
Mega blockWarm
SVG
Mega blockInk
SVG

Drop-in CSS

.my-hero {
  background-image: url('/06-brand-assets/backgrounds/bg-dots-warm.svg');
  background-size: cover;            /* full-bleed, clean edges */
  background-repeat: no-repeat;
}
/* Or tile a pattern at a fixed scale: */
.my-hero {
  background-image: url('/06-brand-assets/backgrounds/bg-iso-grid-ink.svg');
  background-size: 600px auto;
  background-repeat: repeat;
}

All backgrounds ship at 1200×800 viewBox with preserveAspectRatio="xMidYMid slice", so they scale cleanly from favicon-size up to billboard. Tiled patterns (blocks, dots, grid, iso-grid, hash, stripes) use native SVG <pattern> and repeat seamlessly at any background-size.

5.4 Anatomy & notes

How the icon system is drawn and where to reach for each variant.

  • Every icon is 24×24, optical-grid aligned, drawn with 1.8 px strokes and occasional opacity 0.45 fills for tonal layering.
  • The 229 library icons are monochrome and set to currentColor — the root color attribute (baked per variant) determines the hue, and interior-contrast elements use var(--ico-alt, …) so you can retheme without touching the path data.
  • The 11 voice icons (deaddatabase, socialproof, speedisstrategy, emotionaltriggers, persistencewins, quiethours, resultsnotfeatures, understandpainpoints, leadsdeservebetter, inactiveoutreach, zerobadge) are hand-drawn as full duotone originals — a 40%-opacity fill behind a 1.8 px stroke. They carry the brand's principles, so they get more care than the utility set.
  • Ink is the default on warm and paper surfaces. Pink is reserved for hero moments — buttons, callouts, hovers. Duo (formerly “mono”) is for dark surfaces — white glyphs with ink interior-contrast fills; the name reflects that it's still a duotone, not a flat silhouette.
  • Don't recolour icons manually — pull the right variant from 07-icons/, or override the root's color in CSS if you're using them inline.
  • The block pattern is a single native SVG using a <pattern> element. Scale freely.