Ads
Short example of the mistake copy pattern.
Short example of the done-right copy pattern.
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.
Raleway Black (900) for every heading, Spline Sans for everything else — body copy, labels, buttons, nav. Inter for all standalone numerals.
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.
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.
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.
Two card systems, both color-coded by funnel stage using the same red/blue/yellow mapping.
Paid media and creative built to qualify the click before it hits your site.
Conversion-first design that matches the ad's promise.
Full-funnel attribution so you know what drove revenue.
Short example of the mistake copy pattern.
Short example of the done-right copy pattern.
“Example testimonial copy sits here, two to three sentences long.”
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.
Named tokens instead of one-off pixel values — defined in css/tokens.css.