// Brand kit

The pieces we build with.

One design system across the whole site. Atomic primitives, gradient surfaces, opinionated typography, and a single italic accent doing all the lifting.

01

Surfaces

fx-tone-indigo · 5 layers

Indigo

Gradient + diagonal sheen + jitter noise + mini-grid + dither, all stacked. The primary brand surface.

fx-tone-teal · 5 layers

Teal

The secondary surface — used to give the page variation without ever leaving the system.

02

Color

Paper#FAFAF8
Paper 2#F2EEE4
Plum#1C112A
Plum-deep#0C0A12
Indigo#1919FF
Indigo soft#A5B4FC
Cyan soft#67E8F9
Border#E0E0E9
03

Type

Switzer 500 · Instrument Serif italic · Geist Mono 500

Run your entire GTM stack from Claude Code.

Build lists, enrich leads, research accounts, and activate campaigns from Claude Code. Deepline connects agents to 55+ GTM providers and writes every result to a SQL database you own.

Body — Switzer 400 at 15px / 1.6 leading / -0.008em tracking. Used for paragraph copy across the site.

$ deepline plays run lead-email-waterfall --watch
04

Marks

.dl-eyebrow
// Built for GTM engineers

Geist Mono 500 · 11.5px · indigo. Acts as the section eyebrow across the whole site.

Chapter marker
03What you can build

The numbered chapter marker. Magazine-style structure that lets the page read as chapters.

Accent (italic serif)

Used everywhere.

Instrument Serif italic on indigo. The single accent doing the typographic lifting.

05

Motion

@keyframes dlPulse · 1.4s
live cursor

The single primitive that signals freshness — used in nav status dots, live indicators, and pulses on the CTA card.

.fx-grad hover (translate-y -3px)

Cards lift 3px on hover with a soft shadow. Easing: cubic-bezier(0.16, 1, 0.3, 1).

RotatingAgent · 420ms
from Claude Code

The Instrument Serif italic indigo accent — used on the hero and any “moment” headline.

06

Components

Buttons
Install command
# Installs everything. Quickest way to log in.