Glossary
What is a design system?
A design system is a shared set of rules, reusable components and design values, such as colors, type sizes and spacing, that a team uses to build a website or product consistently.
What is in one
- Design tokens: named values for color, typography, spacing, corner radius and shadows
- Components: buttons, cards, forms, navigation and page sections, built once and reused
- Patterns: how components combine for common needs, such as a pricing table or a case study layout
- Guidelines: when to use what, including accessibility and tone of voice
Why it matters for B2B websites
A website without a system drifts. Each new landing page gets a slightly different button, a new shade of blue, its own spacing. After a year the site looks like several companies stitched together, which costs trust with buyers who are judging how carefully you work.
A design system keeps new pages consistent and makes them faster to build, because most of the work is assembling existing parts. It also lets marketers build pages in Framer or Webflow without a designer checking every detail.
Website system vs product system
Large product design systems, such as Google’s Material Design or IBM’s Carbon, cover hundreds of components. A marketing website needs far less: a set of tokens, a dozen or two components and a set of section layouts. Keeping it small is what keeps it used.
Example
pentaclay.com follows its own small system: three brand colors plus a deeper accent for small text, fixed type sizes and spacing steps, 4px corners on cards and 2px on other boxes. New pages, including this glossary, use only those values.
How we handle it
Every site we design starts with tokens and components in Figma, built the same way in Framer, Webflow, Next.js or another platform, so the design file and the live site match. The system is handed over with the site. See website design.
Last updated 15 November 2026
