Design System

Style Guide

This page is the live reference for our shared typography, colors, and buttons. Use the semantic classes and shared tokens shown here instead of hardcoded one-off styles in components.

Design tokens and shared styles live in:

src/styles/
  fonts.css
  theme.css
  typography.css
  buttons.css
  utilities.css
  global.css
  variables.css

Typography

Type styles

Use semantic typography classes instead of arbitrary text sizes, line heights, or font-family declarations.

Headings

heading-h1

Turn your website into a lead machine

heading-h2

Find the companies visiting your site

heading-h3

Enrich every lead with buyer intent

heading-h4

Built for sales and marketing teams

heading-h5

Smaller heading example

heading-h6

Smallest heading example

Body

body-large

Body large is ideal for hero supporting copy, introductions, and sections where readability and a little more presence matter.

body-regular

Body regular is the default paragraph style for most pages, cards, and supporting content across the site.

body-small

Body small is useful for labels, metadata, and other secondary information.

Subheads and utility copy

subhead-large

Built for modern revenue teams

subhead-regular

Pipeline intelligence starts here

subhead-small

New feature

subhead-mini

Version 2.0

quote

“The typography system saved us from inventing six different paragraph styles for the same job.”

large-stat

42%

nav-link

Solutions

eyebrow

Featured

Usage

Use semantic typography classes directly in your components.

<h2 class="heading-h2">Section title</h2>
<p class="body-regular">Paragraph copy</p>
<span class="subhead-large">Label</span>
<p class="quote">Customer quote</p>
<p class="large-stat">42%</p>

Colors

Color system

Use shared color tokens and utilities instead of introducing new one-off colors in components.

Semantic

Off Black

#1D1D1B

bg-color-primary-off-black

Off White

#F7F8F9

bg-color-neutral-100

Signal Green

#D1FF8F

bg-color-primary-signal-green

Spectrum Grey

#919191

bg-neutral-400

White

#FFFFFF

bg-white

Dark Teal

#015258

bg-color-teal

50% opacity

Dark Teal 50%

#01525880

bg-color-dark-teal-50

Off Black 50%

#1D1D1B80

bg-color-off-black-50

Off White 50%

#F7F8F980

bg-color-off-white-50

Signal Green 50%

#D1FF8F80

bg-color-signal-green-50

Spectrum Grey 50%

#91919180

bg-color-spectrum-grey-50

White 50%

#FFFFFF80

bg-color-white-50

Usage

Use shared color utilities and semantic background helpers.

<section class="bg-color-primary-off-black">
  <h2 class="heading-h2 color-neutral-100">Dark section heading</h2>
  <p class="body-regular color-neutral-300">Supporting copy</p>
</section>

<div class="bg-color-primary-signal-green color-primary-off-black">
  Highlighted content
</div>

Buttons

Button system

Use the shared button classes instead of building one-off CTA styles inside individual components.

Large

Watch video → Watch video → Watch video →

Watch video Watch video Watch video

Medium

Book a demo → Book a demo → Book a demo →

Book a demo Book a demo Book a demo

Small

Try for free → Try for free → Try for free →

Try for free Try for free Try for free

Mini

Try for free → Try for free → Try for free →

Try for free Try for free Try for free

Mobile full width

Try for free Book a demo

Text-style links

Watch video → Read more → Customer story →

Usage

Compose buttons using the base class plus size and variant classes.

<a href="#" class="btn btn-lg btn-green btn-icon-right">
  Watch video
  <span>→</span>
</a>

<a href="#" class="btn btn-md btn-dark">
  Book a demo
</a>

<a href="#" class="btn btn-md btn-green btn-full">
  Try for free
</a>

Forms

Form inputs

Use shared form classes for fields and common input-plus-button layouts instead of styling inputs individually inside components.

Single input

Inline input + CTA

States

Default

Disabled

Usage

Use form-input for text fields and form-row for the shared inline input-and-button pattern.

<input
  type="email"
  class="form-input"
  placeholder="Your business email"
/>

<div class="form-row">
  <input
    type="email"
    class="form-input"
    placeholder="Your business email"
  />
  <button type="button" class="btn btn-md btn-green">
    Try for free
  </button>
</div>

⚠️ Styling rules

Use semantic typography classes like heading-h2, body-regular, and subhead-large.
Use shared color utilities (src/styles/utilities.css) and button variants (src/styles/buttons.css) before creating new styles.
Do not hardcode font-size, line-height, letter-spacing, or font-family in components unless there is a documented exception.
Shared design tokens and component styles live in src/styles/. If a style becomes reusable, add it there instead of duplicating it in components.
The live reference for typography, colors, and buttons is this page: /dev/styleguide.