Design Systems

A Design System extracts the complete visual language of a BYQ template — its colors, typography, spacing, surface depth, and voice — into a small set of files you can take anywhere: AI tools, Figma, or your own codebase. The template's styling then follows you wherever you build. Full details are in the Design Systems documentation.

Four: DESIGN.md (an instruction file that teaches an AI tool the whole visual language), tokens.json (raw design tokens for design tools and pipelines), theme.css (a drop-in theme block for Tailwind v4), and variables.css (plain CSS custom properties that work anywhere CSS works). Each one unlocks a different workflow.

Design Systems are available for 50+ of our most popular templates today, out of 160+ total, and the library keeps expanding as we convert more of our catalogue.

Attach the DESIGN.md file in your AI tool, then ask it to build. The file teaches the AI the template's colors, type, spacing, voice, and do's and don'ts, so what it generates carries the personality of a polished template instead of generic output. See Using DESIGN.md with AI tools.

Design tokens are the atomic values — the actual hex code, pixel value, font weight. A design system is the full package: tokens plus the rules around them, the voice, the do's and don'ts, the example prompts. BYQ Design Systems include both — the token files give you the values, and DESIGN.md gives an AI the rules to use them well.

Yes. Import tokens.json into Figma to bring the template's tokens into your design files, so you can design around the same colors, type, and spacing the template uses.

Anywhere you build. The files are tool-agnostic: DESIGN.md works with any AI tool (Claude, ChatGPT, Cursor, v0, Lovable), tokens.json imports into design tools, and theme.css / variables.css drop into any CSS or Tailwind v4 project. It's a visual language, not a platform-specific export.

A Section is a finished building block you drop in. A Design System is the visual language that makes anything you build look intentional — the colors, type, and spacing rules. Apply a Design System first, then generate components or layouts, and everything shares the same polished foundation.

Design Systems are a Pro and Ultra feature, with unlimited Design Systems access on both. The Free plan includes only limited access — you can see what's available, but using and downloading Design Systems requires Pro or Ultra. You can compare plans on our pricing page.

Yes — that's the full BYQ loop. Pull a Design System so your AI generates on-brand code, then run that code through the Converter to land it in Webflow as native elements. With the MCP connected, your AI can search and apply the Design System for you without leaving your editor.