A design system your marketing team can actually use⁠

Most marketing teams have brand guidelines: a logo, colors, fonts, a few rules about tone of voice. Very few have a design system for their website. That gap is why so many sites start consistent and slowly turn into a patchwork of slightly different buttons, headings and page layouts.

A design system is not a fancy extra for large product companies. For a marketing team that publishes every week, it is the difference between building new pages in hours and waiting weeks for design and development.

Brand guidelines are not enough

Brand guidelines describe what the brand looks like. A website design system describes how the website is built. It answers the questions guidelines leave open:

• Which heading sizes exist, and when do you use each one?
• What does a primary button look like, and when is a secondary one better?
• How much space goes between sections?
• What does a case study card look like on desktop, and on a phone?
• Which sections can be combined on a page, and in what order?

Without those answers, every new page is a new design decision. Decisions multiply, and consistency disappears.

What a website design system contains

• Foundations. Colors, typography, spacing, radius and grid, defined once as tokens and used everywhere.
• Components. Buttons, cards, forms, tags, navigation, quotes: small building blocks with clear variants.
• Sections. Larger, ready-to-use blocks such as hero, logo row, case study list, pricing, FAQ and contact.
• Page templates. Proven combinations of sections for common pages: service, case study, article, landing page.
• Rules. Short guidance on when to use what, written for the people who will build pages, not for designers.

Designed for the people who publish

The best design systems for marketing teams are built around how the team actually works. They are not the biggest possible library of components. They are the smallest set that covers what the team publishes every month.

A few principles we follow:

1. Fewer, better sections. Ten flexible sections your team understands beat fifty that nobody can tell apart.
2. Sensible defaults. Spacing, alignment and responsive behavior are built in, so pages look right without adjustments.
3. Room for campaigns. A way to create something new for a launch or an event, without breaking the rest of the site.
4. Clear names. Sections are named by what they do, such as “Case study highlight” or “Pricing comparison”, not by internal code names.

How it pays off

• Faster pages. New landing pages are assembled from existing sections, often in a single afternoon.
• Consistent brand. Every page follows the same rules, even when different people build them.
• Better performance. Reused components are tested once and load efficiently everywhere.
• Easier redesigns. Updating a color or a component updates it everywhere, instead of page by page.
• Easier onboarding. New team members and new partners understand the system quickly.

A design system is a set of decisions you only have to make once.

Signs you need one

• Pages built by different people look noticeably different.
• There are several versions of the same button, card or form.
• Every campaign page starts from a blank canvas.
• Small visual changes take a long time because they have to be made page by page.
• Your team avoids building new pages because it feels risky.

Where to start

Audit ten of your most important pages. List every heading style, button, card and section you find, and group the ones that should be the same. That list usually shows the problem clearly, and it is the first draft of the system that fixes it.