Why every marketing site should ship with a design system

A design system is not just for product teams. Marketing sites benefit just as much, often more — because marketing sites add pages constantly, and without a system every new page is a chance to drift from the brand.

We structure ours in three layers: tokens, primitives, and patterns. Tokens are the atomic decisions — color, spacing, type scale, radius, shadow, motion. Primitives are the smallest reusable components — Button, Card, Input, Badge. Patterns are the larger compositions that make pages — Hero, FeatureGrid, PricingTable, Testimonial, FAQ, CTA banner.

Tokens live in CSS custom properties. We use OKLCH for color (better perceptual uniformity than HSL or hex), a 4-point spacing scale, a modular type scale (1.25 ratio for marketing sites, tighter for product UIs), and named radii (sm, md, lg, full). When the brand evolves, we update tokens; the entire site shifts in one commit.

Primitives are framework-agnostic in spirit, even when implemented in React. Each primitive has a small, predictable API: variant, size, and a few content slots. We avoid 'kitchen sink' components with 25 props — those are a sign that you have not picked an opinion. Pick the opinions for the team and live with them.

Patterns are where speed compounds. Once we have a Hero pattern with three variants (centered, split, with-image), every new landing page is a configuration exercise, not a design exercise. A new page can ship in a day, not a week, and it always looks like it belongs to the same brand.

Documentation matters. We keep a Storybook (or, increasingly, a single live page in the marketing site itself) that shows every primitive and pattern with copy-pasteable examples. New team members ramp up in hours instead of days. Designers and writers can pick a pattern instead of inventing one.

The discipline is harder than the design. The temptation to invent a new component for 'just this one page' is what destroys design systems. We resist it ruthlessly — 95% of the time, an existing pattern can be reused with new copy. The 5% of the time it cannot, the new component goes into the system, not into a one-off page.

The result is a marketing site where every page feels intentional, every section feels familiar, and the brand stays cohesive even as the site grows from 12 pages to 120. That is the unlock.