Brand guidelines · Illustration & Patterns

Data,
drawn.

Illustration and pattern share one world with the logo: the signal, made visible. No scenes, no characters, no metaphor clip-art — the system itself, drawn.

Drawn in nothing but the brand: ink, canvas, clay, and the signal green. The combination is the signature — see it, and it reads Salesloft.

The illustrations.

Abstract data pieces, one per product theme. Each one visualizes what the product does — signals converging, pipelines flowing, forecasts resolving — never what an office looks like.

Sales Engagement · Cadence illustration — Sales Engagement · Cadence

Revenue Orchestration and Forecasting illustration — Revenue Orchestration & Forecasting

AI Powered Selling illustration — AI-Powered Selling

Resource Center illustration — Resource Center

Sales Methodology illustration — Sales Methodology

Sales Methodology illustration, structural variant — Sales Methodology

→Brand colors only. Green, ink, canvas, and clay — no system colors, no new hues. The combination alone should read as Salesloft.

→Ink ground, always. Every piece lives on the dark stage; the light comes from the data.

→Thin structure. Hairline grids, orbits, and waves draw the space — precision is the aesthetic.

→Green is where the data lives. The full green scale is in play; the glow marks the signal moving through the structure.

→Depth from motion, not shadows. Perspective, waves, and density do the dimensionality — no drop shadows, no 3D renders.

One language, four behaviors.

Patterns are the dot language stripped to its atoms. What separates them is not how they look — it’s how they behave in a layout.

The ambience

Signal Field.

A quiet dot atmosphere that sits behind content. It sets the temperature of a section and never asks to be read.

The object

Radar.

A radial burst treated like an image: placed, sized, and composed as a focal element — an anchor, not a wallpaper.

The field, alive

Dot Motion.

The field in motion: signals converging on a center, running quietly and continuously. The living version of the language.

The film

Halftone.

Real footage passed through the dot screen: the world itself, rendered in the brand’s own grain.

Signal Field.

The background layer. Two axes of variation: placement (cluster or edge) and dot scale (standard or large). Keep it clear of the content — prefer edge placement, or pull the opacity down when it must sit underneath.

Cluster · standard dots · 1440 × 600

Edge placement · 1080 × 450

Cluster · large dots · 640 × 640

Radar.

The object. Four expressions, one role: place it like an image, sized and positioned as part of the composition — behind a stat, anchoring a section, breathing next to a headline. Never tiled, never stretched.

Radar pattern, spectrum variant — Spectrum

Dot Motion.

The homepage hero’s living field: signals converging on a center point, quietly and continuously. A weighted green palette with rare teal, blue, and amber sparks — the system colors, passing through. Honors reduced motion as a static constellation.

Live · dotfield.js · converging signals

→Hero and section backgrounds only. It behaves like Signal Field with a pulse — ambient, behind content, one per view.

→Always working. Offset phases, no visible loop — the motion rules from 08 · Motion apply as written.

Halftone.

Real footage through the dot screen — the hero treatment for the solutions industry pages, with the product UI riding on top. Two grounds, chosen by the surface: canvas on light pages, ink on dark.

Canvas ground · industry hero backdrop

Ink ground

→A backdrop, never the subject. The interface rides on top; the film keeps its contrast low and the ambience rules of Signal Field apply as written.

→The footage is the industry’s real work. The photography principles pass through the dot screen with it — real machines, real motion, no stock theatrics.

→One film per hero. It sets the scene once; sections below return to stills and fields.

The rules.

Everything here is scenery for the system’s story. The moment a pattern competes with content, it’s failing.

→Fields stay out of the way. Edge placement first; if content must overlap, drop the field’s opacity until the copy wins.

→Radar is composed, not tiled. One per composition, scaled deliberately, cropped with intent.

→One focal illustration per view. Illustrations are content; two in a viewport fight each other.

✕Never stack an illustration on a pattern. One layer of the dot language at a time.

✕Never recolor, rotate, or stretch. The assets ship in their final form — crop and scale are the only moves.

✕Never use a pattern as the logo. The signal mark is drawn; the patterns are weather.

The source set.

This chapter shows the system; the source files live in Figma — illustrations, both pattern families, and 4K exports of the fields.

Illustration & pattern sources.

Full-resolution originals behind this chapter, organized by family. Dot Motion ships as code (assets/js/dotfield.js); the Halftone films live in assets/video.

Open in Figma →