A website design system is the shared set of design tokens, components and written rules that keeps every page on brand. In 2026 it also steers AI agents. Figma Specs, Google's DESIGN.md format and design-system MCP servers all hand those rules to the tools now generating pages, so your system shapes what agents build.
For most B2B companies, the design system used to be a nice-to-have that lived in a Figma file and a designer's head. That arrangement breaks once agents start producing landing pages and components at machine speed. Figma's October 14 announcements make the point plainly, and the rest of the toolchain has been moving the same way for a year. Here is what a modern design system contains, why agents need one, and how to build yours in order.
A website design system is the rulebook behind every page
A design system has three layers: design tokens, components and guidance. Tokens are the named values for color, type, spacing and motion. Components are the buttons, forms, cards and navigation built from those tokens. Guidance is the written explanation of when to use each one. The W3C Design Tokens Community Group describes tokens as "the single source of truth for colors, typography, spacing, and other design decisions" (Design Tokens Community Group).
A style guide stops at the first layer and a page template stops at the second. A website design system ties all three together, so a change to your primary color or button style ripples through every page from one place. For a B2B site, where demo forms, pricing tables and case study layouts carry the revenue, that consistency is what lets a buyer trust the page, and trust is a large part of why B2B websites convert or fail to. It also sets up the next problem: someone, or something, has to follow the rules.
Figma Specs puts the design system in front of AI agents
The newest design tools assume agents will do a large share of the building. At its first Config event in India, Figma announced Specs on October 14, a Markdown editor for defining a company's design language that serves as a reference for both teams and agents, and opened its code layers feature to a public beta (TechCrunch). TechCrunch reported that teams can feed design libraries, code libraries and guidelines into one context that agents refer to, and that Figma had made its on-canvas agent available to a wider user base in the preceding week.
Figma's chief design officer, Loredana Crisan, gave the reason in numbers: "There are 17-times more lines of code being produced today than in the past. But when you're looking at releases, only 1.3-times more releases" (TechCrunch). Output is cheap now, and direction is scarce. We made the same argument about agentic coding: faster production only pays off when the specs are clear. An agent with no website design system will still ship a page. It will simply invent the spacing, the color and the button states as it goes.
Design tokens give AI agents exact values to follow
Design tokens are the part of a website design system that machines read best, and the format finally has a stable standard. The Design Tokens Community Group released version 2025.10 of its specification on October 28, 2025, with support for theming across light, dark and accessibility variants, modern color spaces such as Display P3 and Oklch, and aliases that let one token reference another. The group says one token file can generate platform code for iOS, Android, web and Flutter, and that more than 10 tools, including Figma, Sketch, Framer and Penpot, support or are implementing it (Design Tokens Community Group).
Tokens carry values without intent, so a second layer is emerging for agents. Google Labs' DESIGN.md format pairs YAML design tokens with Markdown prose that explains the design rationale, can export to Tailwind and the DTCG JSON format, and is still labeled alpha, with changes to the format expected as it matures. Its own guidance calls the prose "the most vital part of the specification" because it describes intent (Google Labs DESIGN.md repository). The practical setup is to keep tokens in the DTCG format as your source of truth and generate the agent-facing file from them. That way the hex code and the reason behind it never drift apart.
An agent-ready design system ships an MCP server and llms.txt
The large public design systems have already made themselves readable to AI. A July 2026 field study by Kaelig Deloumeau-Prigent, co-chair of the Design Tokens Community Group, compiled with AI research agents, examined 21 open-source design systems, including IBM Carbon, Atlassian, Salesforce Lightning, Shopify Polaris and GitHub Primer. Counting official and community-built tools, it found that 20 of the 21 have an MCP server, 19 an agent skill, 16 keep agent instruction files in their repositories and 15 publish an llms.txt file (State of AI in Design Systems). Only 3 connected Figma components to code through Code Connect.
Read that as a snapshot. The data was gathered July 26 to 28, 2026, the maturity ratings are the author's own judgment, and the systems change weekly (study methodology). The direction is still clear. An MCP server lets a coding agent query your live components and tokens, while a plain-text file such as llms.txt gives it a map of your documentation. A mid-size B2B company can start its website design system with the two or three affordances that match the tools its team and agencies actually use. Openness is also a choice. The same study records Shopify Polaris running an MCP server while publishing an AI-crawler blocklist and noai meta tags, so decide which agents you want reading the system and which you do not.
Design system accessibility starts at the token level
Accessibility failures are getting more common as pages get more complex, and a website design system is the cheapest place to stop them. WebAIM's 2026 scan of the top one million home pages found low-contrast text on 83.9% of them, up from 79.1% a year earlier, with an average of 34 instances per page. Detected WCAG failures appeared on 95.9% of home pages, and WebAIM linked the rise to growing complexity, third-party frameworks and "automated or AI-assisted coding practices" (WebAIM).
Contrast is a token problem. If your text and background color pairs pass WCAG once, in the token file, every component and every agent-generated page inherits a passing pair. Fix it page by page and the next batch of generated pages brings the problem back. The same logic applies to focus states, form labels and heading order, which belong in component definitions and written rules. Our WCAG 2.2 guide covers the specific criteria, and our piece on AI code technical debt explains why uncorrected generated code compounds.
Six steps to build a website design system
Start your website design system with an audit and build outward. Inventory every color, font size, button and form on the live site, and you will usually find several near-identical blues and a handful of button styles nobody chose on purpose. Collapse them into a short token set in the DTCG format, then define the components your revenue pages depend on: navigation, hero, form, pricing table, proof block and call to action. Map each Figma component to the code that renders it, so design and site never disagree.
Then write the rules in plain language, whether in Figma Specs, a DESIGN.md file or your own documentation. Explain when to use each component, and use the prose to carry intent that tokens cannot. Expose the system to the agents your team uses through an MCP server or an llms.txt file, and give one owner the job of reviewing changes. Measure the result the way buyers experience it, through conversion rates on your key pages and visual consistency across them. Keep the first version small: the six revenue-page components above, documented well, are enough to start. A lean system gets used, and a sprawling library tends to get ignored. Add components only when two or more pages need the same thing. If you want help building or retrofitting a website design system, our digital marketing and technology team does this work, or you can talk to us directly.
