Design System

Your brand as structured design tokens.

#What Design System does

Colours, type, spacing and radius as structured tokens — the single source of truth for how your work looks.

  • Design tokens. Colours, typography, spacing and radius defined once as data, not scattered across files.
  • Design rules. The written do's and don'ts of your brand live next to the tokens — readable by humans and machines alike.
  • Per-client systems. Agencies run one design system per client brand — switch context without switching tools.
  • Feeds Components & Wireframes. Components style themselves with token variables and wireframes attach a design system, so consistency is the default.

#Build a brand system

  1. Open Design system and run the Brand wizard (or the full Design Studio) to create a system — one per client brand.
  2. Each system holds tokens (colours, typography, spacing, radius) and written rules; colour tokens carry a live WCAG contrast badge.
  3. Browse the built-in Fonts (40+ curated families with real specimens) and Palettes tabs for raw material.
  4. The selected system grounds Build AI: its tokens and rules are injected into the prompt before a single line is written.

#On the MCP surface

This is the module that keeps your AI on-brand. It reads sstm://design/tokens, the rules and the recipe before it builds — and it can add or retune tokens with the design tools, so a rebrand is one conversation away.

Tools (write):

  • sstm_design_create_system
  • sstm_design_add_token
  • sstm_design_add_rule
  • sstm_design_update_token

Resources (read):

  • sstm://design/systems
  • sstm://design/tokens
  • sstm://design/rules
  • sstm://design/recipe
  • sstm://brand/fonts
  • sstm://brand/palettes

Full definitions live in the MCP reference.

#On the Cloudflare side

  • Tokens and rules live in the platform database — and are injected into Build AI's prompt, steering what gets built and deployed to your Cloudflare account.