Design Systems for Marketing Sites That Are Not Product Apps

Product design systems optimize for screens that repeat forever: dashboards, settings, tables, forms. Marketing sites optimize for scenes that earn attention once and route a decision. If you copy a product UI kit onto a brand homepage, you get a dashboard wearing a logo. A marketing site design system is smaller, stricter about composition, and honest about what editors will touch. This spoke sits under Websites That Feel Like Films.

Marketing site design system — what it actually is

A marketing design system is a governed set of tokens, type rules, layout primitives, components, motion budgets, and content constraints that keep every page reading as one brand film. It is not a 400-component Storybook of every button variant ever imagined. It is the minimum vocabulary that prevents drift while still letting a homepage feel authored.

I treat systems as production tools, not museum pieces. If a token or component does not show up in the next three builds, delete it or demote it to a sketch. Dead documentation trains teams to ignore the living rules.

What belongs in the marketing system:

• Color, type, space, radius, and elevation tokens
• Grid and section rhythm rules
• A short component inventory (nav, CTA, media plate, FAQ, form, footer)
• Motion timing and reduced-motion policy
• Content field limits for CMS-driven pages
• Image and LCP rules for hero and work plates

What usually does not belong: dense data tables, multi-step wizards, admin chrome, and infinite variant trees for “just in case.”

Design tokens for brand websites

Tokens are the contract between taste and implementation. Keep them boring and few. Brand sites fail when every page invents a new cream, a new “almost black,” and a new shadow stack.

Token layers that matter

Primitive tokens: raw palette values, font families, base space unit. Named by value or role at the lowest layer (for example ink-900, space-4), not by page mood.

Semantic tokens: meaning in context — bg-canvas, text-primary, accent-cta, border-quiet. Marketing pages should consume semantics, not raw hex in components.

Component tokens (sparingly): only when a component truly needs a local override that would pollute the global semantic layer. Prefer composition over special cases.

Rules I enforce:

• One primary accent used for action, not decoration
• Neutrals that cover text hierarchy without six nearly identical greys
• Space scale that fits section rhythm (tight inside components, generous between scenes)
• No token for “marketing purple gradient #3” unless the brand actually owns that look

Tokens for brand websites also encode performance taste. If your type scale assumes a display font at 96px on every breakpoint, you have also assumed font loading cost and line-length failure. Pair tokens with loading strategy: which faces are critical, which are optional, what falls back when webfonts are late.

Naming that editors and engineers both survive

Avoid poetry in token names. sunset-blush is a mood board label. accent-warm or brand-secondary is operable. When marketing asks for a “campaign red,” either map it to an existing semantic or create a time-boxed campaign token set that dies with the campaign. Permanent token sprawl is how systems rot.

Document tokens where builders look: code, Figma variables, and a one-page reference — not a PDF that ships once and disappears into Drive.

Type and composition before components

Marketing sites are type and image systems first. Components are packaging. If the type scale is weak, no button library will save the brand.

Type rules that hold

• Display for brand and scene titles; body for proof and FAQ; UI for nav and forms
• Line length targets that keep body readable on desktop without becoming a newspaper column farm
• Mobile sizes designed as compositions, not desktop sizes shrunk until they fit
• Hierarchy that survives removing color (contrast and size, not “the accent makes it a heading”)

Composition rules from the film model apply here: one job per section, one dominant visual plane on the fold, brand as a hero-level signal. The system should make the wrong composition harder — for example, a hero component that accepts one headline, one support line, one primary CTA, and one media slot, not twelve optional promo chips.

Components: short inventory, hard edges

Build fewer components with clearer jobs.

Component	Job
Nav	Wayfinding without competing with the fold
Hero / title card	Brand + offer + one action
Media plate	Show work or world without card sludge
Proof strip	One specific proof, not a logo landfill
Section intro	Headline + one support sentence
CTA band	Single next step
FAQ	Answer buyer questions without a chat widget
Form	Capture intent with minimal fields
Footer	Legal, lanes, contact — quiet

Cards are allowed when they are the interaction surface (pricing tier selection, project filters). Decorative cards that only add border, shadow, and radius are usually noise. The system should prefer plates, rules, and space over nested boxes.

States matter: hover, focus-visible, active, disabled, loading, error. Marketing teams often skip focus styles because “it looks cleaner.” That is how accessibility debt and keyboard failure ship. Focus styles are part of the brand system, not a compliance sticker.

Motion as a system, not a playground

Motion tokens: duration steps, easing families, and a hard rule that entrance motion never hides meaning. Reduced-motion users get the final composition immediately. Scroll-driven scenes are budgeted, not sprinkled. Pair with the motion spokes on this site when you need production detail; the system layer only needs: what is allowed, what is forbidden, who can approve exceptions.

Forbidden by default on marketing systems I ship: parallax on every section, autoplaying sound, long loader choreography before first paint of the offer, and hover-only information that mobile users never see.

Content constraints are design system

If the CMS allows a 400-character headline and five optional badge fields, the design system has already lost. Field limits, required alt text, image aspect guidance, and “one primary CTA” rules belong next to the components. Editors are part of the system whether you invite them or not.

Train with examples: good fold copy, bad fold copy, good work caption, bad work caption. Systems without editorial taste still produce on-brand chaos — just prettier chaos.

How marketing systems differ from product kits

Product kits optimize consistency across dense UI. Marketing systems optimize recognizability and conversion across sparse scenes. Density is the enemy of cinema. A product button matrix with twenty sizes is a gift to an app team and a curse to a brand homepage.

When a company has both product and marketing surfaces, share tokens (color, type families) and split components. Do not force the marketing site to inherit the product sidebar metaphor. Do not force the product to inherit the marketing film hero. Shared brand DNA, separate interaction models.

Governance without bureaucracy

Someone must own the system. On studio builds, that is usually the design lead plus the implementer. On client teams, name a human: brand owner or marketing ops. Change process can be light: propose, show in a PR or staging page, merge tokens, deprecate the old path. What fails is “anyone can invent a new component in the page builder on Friday.”

Version the system the way you version releases. When you change space scale or CTA styles sitewide, say so. Silent global changes train stakeholders to fear the system.

Implementation notes by stack

Custom (Astro/React/etc.): tokens as CSS variables or a typed token package; components colocated; Storybook only if it earns its keep.

Webflow: classes and variables mapped to the same semantics; components as Webflow components with locked structure; CMS fields capped.

Framer: component variants kept short; shared styles; resist the urge to duplicate slightly different heroes on every page.

Whatever the stack, the system is the same idea: fewer decisions at build time, clearer decisions at edit time. Stack chooser detail lives in the Framer vs Webflow vs custom spoke; this post is the craft contract those stacks must honor.

Anti-patterns I delete

• Token files with 80 greys and 12 accents “for flexibility”
• Hero components with optional everything
• Card grids as the default for every content type
• Shadows as personality
• Documentation screenshots that do not match production
• Design system pages that are prettier than the marketing site they claim to serve

Rollout on a real project

Do not pause a launch for six months to “finish the system.” Ship a thin vertical: tokens, type, hero, CTA, section intro, footer. Use it on the homepage and one interior template. Expand when a second template needs a new primitive. Systems grown from production stay honest; systems grown from speculation invent ghosts.

When redesigning an existing site, extract tokens from the best pages you already have, not from a competitor mood board. Codify what already works, then delete the rest.

Measuring whether the system works

Proxies that matter:

• Time to build a new campaign page without inventing styles
• Editor error rate (broken layouts, missing alt, oversized headlines)
• Visual QA drift between pages after three months
• Conversion clarity on the fold (still one job?)

If every new page needs custom CSS to “make it special,” the system is incomplete or the culture is rejecting it. Fix the gap or the culture; do not paper over with more exceptions.

Relationship to performance and accessibility

A marketing design system that ignores LCP, focus, and contrast is incomplete. Image aspect tokens, font loading rules, and focus styles belong in the same kit as color. Cinema-grade brand work that fails keyboard users or arrives late on mobile is unfinished craft. See the accessibility and Lighthouse spokes for depth; keep the system as the place those rules are enforced by default.

Explore the websites lane at /websites or book a sprint at /contact?intent=websites-sprint when you want a system built for brand pages instead of product chrome.

Case study: from entropy to recipes

A typical mid-engagement pattern: the brand has a handsome homepage and three inner pages that look like cousins, not siblings. Buttons differ by a few pixels. Section padding wanders. A freelancer added a teal that is “close” to the accent. The fix is not another homepage redesign. The fix is three passes: audit what already works, define tokens and a short component inventory, then enforce through locked components and CMS field limits. After recipes exist, new pages take hours instead of days, and the site starts feeling intentional again — the same authorship goal as Websites That Feel Like Films.

Document before/after with screenshots for stakeholders. Systems sell better when people can see entropy called out concretely. Then maintain the kit like product code: pull requests for token changes, not silent Figma drift.

FAQ

What belongs in a marketing site design system?

Tokens, type and space rules, a short component list, motion budgets, CMS field limits, and image/LCP guidance. Skip dense product UI patterns unless the marketing site truly needs them.

How are design tokens for brand websites different from product tokens?

Brand tokens emphasize semantic roles for scenes and CTAs, fewer variants, and pairing with media and performance rules. Product tokens often expand for dense UI states and data density.

Should we use the same system for app and marketing site?

Share brand primitives (color, type families). Split components and layout models. Marketing folds and product shells solve different jobs.

How big should the component library be?

Small enough that every component has a real job on shipping pages. Prefer ten sharp components over eighty half-used ones.

When do we add a new component?

When two or more pages need the same structure and styling it ad hoc would create drift. One-off campaign art can stay one-off without becoming a system citizen.

How do we stop editors from breaking the system?

Lock structure in components, limit CMS fields, train with examples, and name an owner who reviews exceptions. Tools alone will not save an unlocked page builder.