← brand kit / dot canvas background

Dot canvas background

A subtle dotted backdrop used as full-bleed section chrome on the marketing site. Reads as the React Flow canvas the product is built around — so it doubles as a brand signal and a “this is where you build workflows” cue.

// preview

marketing site — homepage hero

// the canvas, made literal

Create operational workflows for teams to run on any device

Book a demoSee how it works

full-bleed, behind page content — never on top

// anatomy

layer A · 18px · dense

Layer A — dense

Slate-300 dots on an 18×18 grid. Opaque at top-left, fades to transparent by 60% along the 135° diagonal.

layer B · 40px · sparse

Layer B — sparse

Same dots on a 40×40 grid. Invisible at top-left, fades in from 40%, full opacity by 80%.

A + B · stacked

Stacked — the canvas

Net effect: dense cluster upper-left, soft middle transition, sparser dots lower-right.

// spec

Dot colour: #cbd5e1 · Slate-300, both layers
Dot radius: 1.5px
Layer A spacing: 18px × 18px grid (dense)
Layer B spacing: 40px × 40px grid (sparse)
Gradient direction: 135deg · top-left → bottom-right, always
Layer A mask: linear-gradient(135deg, black 0%, transparent 60%)
Layer B mask: linear-gradient(135deg, transparent 40%, black 80%)
Position: absolute, full-bleed, pointer-events: none, negative z-index inside an isolated parent
Background base: White — dots sit on the standard white surface

// implementation

On the marketing site, the dot field is wrapped in a reusable React component at src/components/home/DotField.tsx. Drop it inside any relative isolate parent and pass positioning via className:

// In a section component:
<section className="relative isolate overflow-hidden">
  <DotField className="inset-0" />
  {/* …section content… */}
</section>

// Or, for full-bleed across a sticky-rail section:
<DotField className="inset-y-0 -left-6 -right-6 lg:-left-8 lg:-right-8 xl:-left-[16rem]" />

Raw CSS — if you need to recreate the pattern outside React:

/* Layer A — dense */
background-image: radial-gradient(circle, #cbd5e1 1.5px, transparent 1.5px);
background-size: 18px 18px;
mask-image: linear-gradient(135deg, black 0%, transparent 60%);

/* Layer B — sparse */
background-image: radial-gradient(circle, #cbd5e1 1.5px, transparent 1.5px);
background-size: 40px 40px;
mask-image: linear-gradient(135deg, transparent 40%, black 80%);

// usage

When to use it

Sections that talk about building, automating, or the canvas. A tentpole signal, not wallpaper.

Where it lives today

Homepage hero (extends behind the transparent header). Homepage Build section. Homepage Automate section.

Full-bleed only

Always extends edge-to-edge of the viewport, including behind side rails or sticky nav. Section padding controls breathing room around content, not the dot field’s bounds.

Background-only

Never on top of content. Never a foreground texture.

Pairs with

Solid white sections (the default) and ink (#283343) for type and buttons. No gradients, no halos.

// do / don’t

Diagonal density, soft middle.

Stack both layers exactly as specified. The 135° gradient and the soft middle transition are load-bearing — the field has to read as a fading canvas.

Flat dot wallpaper.

don’t

Skip the mask gradients. A flat field of dots reads as graph paper, not a canvas, and competes with content instead of receding behind it.

Wrong angle.

don’t

Change the diagonal direction. The 135° top-left → bottom-right flow is consistent across the site and how the brand reads.

Recoloured dots.

don’t

Tint the dots with mint, peach, pink, or ink. Slate-300 only — the glow trio is reserved for the logo.