Design System

Colors

Three brand colors carry all the meaning on the site. They're used consistently to color-code the three funnel stages everywhere they appear: Ads = red, Landing Pages = blue, Tracking = yellow. Don't reassign these per-section — the consistency is the point.

Blue — Landing Pages --blue / #0208FB
Red — Ads --red / #F2292B
Yellow — Tracking --yellow / #FFC600
Black --black / #0A0A0A
Ink --ink / #111111
Gray --gray / #6B6B6B
Light BG --light-bg / #F7F7F5
White --white / #FFFFFF

Typography

Raleway Black (900) for every heading, Spline Sans for everything else — body copy, labels, buttons, nav. Inter for all standalone numerals.

H1 / Raleway 900

Conversion Strategist

H2 / Raleway 900

Most funnels leak in the same three places.

H3 / Raleway 900

Landing Pages

Body / Spline Sans

Set in Spline Sans at 400–700 weight for paragraphs, buttons, nav links, and labels. Line-height 1.5 for comfortable reading at body size.

Eyebrow label Section label
Numbers / Inter 01  42%  $1,200

Numerals never use Raleway — its digit glyphs are inconsistent at weight 900. Anywhere a number stands alone (badges, stats, prices, step counters) uses --font-numeral (Inter, weight 700) instead.

Buttons

Solid pills for primary actions, plain icon-links for secondary ones. No outlined/ghost buttons — if it's not solid, it's not a button.

On dark backgrounds

On light backgrounds

Cards

Two card systems, both color-coded by funnel stage using the same red/blue/yellow mapping.

Funnel cards — solid fill

01

Ads

Paid media and creative built to qualify the click before it hits your site.

  • Example bullet point
02

Landing Pages

Conversion-first design that matches the ad's promise.

  • Example bullet point
03

Tracking

Full-funnel attribution so you know what drove revenue.

  • Example bullet point

Playbook cards — color header + white body

Campaign Analysis

Ads

Common mistake

Short example of the mistake copy pattern.

Done right

Short example of the done-right copy pattern.

Work card

Project image

Brand Name

Category · Type of work

Result stat

Testimonial — dark section

“Example testimonial copy sits here, two to three sentences long.”

— Name, Title

Icons

Icon sprite is inlined at the top of <body> on every page (not fetched as an external file, so <use> never depends on a cross-document request). Reference with <use href="#icon-name"> — icons inherit color via currentColor, so no per-icon color CSS needed.

arrow-right
arrow-right (rotated)
funnel
briefcase
layers
quote
calendar
alert
check
play
menu
linkedin
dribbble
meta
google-ads
google-analytics

Radius & Shadow

Named tokens instead of one-off pixel values — defined in css/tokens.css.

--radius-pill
--radius-nav
--radius-lg
--radius-md
--radius-sm
--shadow-float
--shadow-card