By Mehdi HassanWhat is a design system for a marketing site?
A design system for a marketing site is the set of reusable decisions that every page is built from: design tokens, base components and complete page sections, kept in sync between Figma and the codebase. Its job is to let you ship a new landing page in days without it looking like a different company made it.
Product design systems are built around forms, tables and app states. Marketing systems are different. A marketing page is a stack of sections, such as a hero, a logo strip, a feature grid, a testimonial and a pricing table, so the useful unit is the section, not the button. If you're still deciding whether code is the right base at all, start with our guide to choosing Next.js for a marketing website.
Why do marketing sites need sections, not just components?
Marketing sites need sections because that's how pages get planned, written and edited. A marketer asks for a page with a hero, three proof points and a call to action, not for a page with eleven buttons and four cards.
When the system stops at buttons and cards, every new page becomes a small design project: someone composes components into a new layout, makes spacing decisions again and introduces small inconsistencies. When the system includes approved sections, a new page is mostly selection and copy. That's also how a headless CMS page builder works best, with one block per section, and it's why we design sections before pages in our own process.
Design the section once, and every page that uses it inherits the decision.
What are the five layers of a marketing design system?
A marketing design system has five layers, and each one depends on the layer below it. Skipping a layer is the usual reason systems fall apart.
Layer | What it holds | Lives in Figma as | Lives in code as |
|---|---|---|---|
1. Tokens | Color, type scale, spacing, radius, shadows, motion timing | Variables and styles | CSS variables or Tailwind theme values |
2. Primitives | Button, link, badge, input, icon, container | Components with variants | React components with typed props |
3. Content components | Card, quote, stat, logo, feature item, FAQ item | Components built from primitives | Composed components |
4. Sections | Hero, feature grid, testimonial wall, pricing, CTA band | Section frames with variants | Section components mapped to CMS blocks |
5. Templates | Homepage, landing page, blog post, case study | Page frames | Routes that stack sections |
Tokens carry the brand. Primitives make interaction consistent. Content components make proof and features look the same everywhere. Sections make pages fast. Templates set defaults for the page types you ship most.
How do you build a design system for a marketing site step by step?
Build it from an audit of real pages, not from a blank component list. Most teams over-build primitives and under-build sections, so start from what the site actually needs to say.
Audit the pages you have and plan
List every section on the current site and in the next quarter's launch plan. Group duplicates. Most startup sites reduce to a surprisingly short list of distinct sections.
Define tokens with names both sides use
Create Figma variables and matching CSS variables with identical names, such as color-ink, color-accent and space-section. Use semantic names, not raw values.
Build primitives with real states
Buttons, links and inputs need hover, focus, disabled and loading states in both tools. Focus states are a frequent item in accessibility remediation, so design them now.
Design sections with a few variants
Give each section two to four variants, such as image left or right, light or dark, with or without a CTA. Resist adding a toggle for every request.
Map sections to CMS blocks
Each section becomes one page builder block with the same fields as its props. Editors pick sections; they don't pick font sizes.
Document usage, not just appearance
Write one line per section on when to use it and when not to. That's what stops a testimonial wall from appearing three times on one page.
For the Figma side, our guide to component library design in Figma covers variants, properties and auto layout so that the design file mirrors the code.
How do you keep Figma and code in sync?
Keep them in sync by treating names as the contract. If a token, component or variant has the same name in Figma, in code and in the CMS, a designer, developer and marketer can all point at the same thing.
- One source for tokens. Decide whether Figma variables or the code theme is the source, then export or copy in one direction only.
- Matching props and properties. A Figma component property called variant with values light and dark should become a variant prop with the same values.
- Change log. Every system change gets a short note: what changed, why, which pages are affected.
- Section inventory page. A route in the codebase that renders every section with sample content, so reviews happen in the browser, not just in Figma.
How does the design system affect performance and motion?
A good system makes the site faster, because performance decisions get made once inside each section instead of on every page. Image sizes, font loading and animation rules live in the components.
Put the hero image priority logic inside the hero section, image sizing inside the card component, and motion timing in tokens. Then a marketer can't accidentally ship a slow page by choosing the wrong option. Our guides to next/image, fonts and scripts and motion design for marketing websites explain the defaults we bake into sections, and improving INP on Next.js covers keeping interactive sections light.
Hypothetical example: a section spec for a feature grid
For example, suppose a startup needs a feature grid on most product pages. The spec might read: a heading and intro paragraph, then three, four or six feature items; each item has an icon, a title of up to six words and a description of up to 25 words; variants are light and dark background; an optional CTA sits below the grid.
In code, that becomes one component with a small set of typed props and one CMS block with the same fields. Copy limits keep the grid balanced, and because the number of items is limited to three choices, the layout never breaks at awkward counts.
Who should own a marketing design system after launch?
One person or one team should own it, with the authority to say no. Without an owner, every campaign adds a one-off variant and the system quietly turns back into a pile of pages.
For a small startup, the owner is often a designer who also writes code, or an outside team on a retainer. Their job is to review new section requests, decide whether an existing section can cover the need, and update Figma and code together when it can't. If your team is still deciding where the site should live, compare options in our guide to choosing a platform for your marketing site, and if structure is the open question, start with website information architecture.
Pros
- New pages ship faster because most of the work is selection and copy
- The brand looks consistent across every campaign and author
- Performance and accessibility fixes apply everywhere at once
- Editors can build pages without asking a developer
Cons
- Upfront design and build time before the first page benefits
- Needs an owner, or variants multiply and the system decays
- Too many constraints can frustrate a team that wants one-off creative pages
