// 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

bg-[linear-gradient(150deg,var(--color-brand-600)_0%,var(--color-brand-500)_45%,var(--color-brand-400)_100%)] · 5 layers

Brand

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

bg-[linear-gradient(150deg,var(--color-aqua-800)_0%,var(--color-aqua-600)_45%,var(--color-aqua-500)_100%)] · 5 layers

Teal

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

02

Color

Silver 50var(--color-silver-50)
Silver 100var(--color-silver-100)
Silver 900var(--color-silver-900)
Silver 950var(--color-silver-950)
Brandvar(--color-brand-450)
Brand softvar(--color-brand-200)
Cyan softvar(--color-aqua-300)
Bordervar(--color-silver-300)
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 98+ 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

.inline-flex items-center gap-2.5 font-mono text-[11.5px] font-medium tracking-[0.04em] text-primary-text before:inline-block before:h-px before:w-[18px] before:bg-current before:opacity-60
// Built for GTM engineers

Geist Mono 500 · 11.5px · brand. 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 brand. The single accent doing the typographic lifting.

05

Motion

animate-pulse · 2s
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 brand accent — used on the hero and any “moment” headline.

06

Components

Buttons
Install command
# Install the CLI and connect your account.