Design systems are for people who build in code with an AI coding tool such as Claude Code, Cursor, Codex, v0 or Lovable, and for designers who bring colors, type and spacing into Figma as tokens. If you build in Webflow, Framer or Figma and want finished blocks, use Sections instead. Design systems do not import into Webflow Variables, and there is no Framer route.
Every BYQ template carries a complete visual language: its colors, typography, spacing, surface depth and voice. A design system extracts that language into four files you can hand to your AI tool or wire into your own codebase.
Pick any template’s Design System and you’ll see four files on the right side of the page:
Each file unlocks a different workflow, and we’ll cover all of them in the next chapters.
You’ll hear both terms used interchangeably across the industry. Design tokens are the atomic values — the actual hex code, the actual pixel value, the actual font weight. A design system is the full package: tokens plus the rules around them, the voice, the do’s and don’ts, the surface logic, the example prompts.
BYQ Design Systems include both. The token files give you the values; the DESIGN.md file gives the AI the rules and context to use them well.
AI tools are fast at generating layouts but generic by default. Without context, you get the same spacing, the same shadows, the same fonts, the same rounded buttons everyone else gets. Feed an AI a BYQ Design System and the output starts carrying the personality of a polished, production-ready template — the same templates we use for full websites.
There are 300+ design systems to browse. Anyone can view a Design System on BYQ. Downloading any of the four files requires a Pro or Ultra plan; on Free the buttons read “Upgrade to copy”. They come from three sources: Made by BYQ, Popular brands and Made by you. The sidebar calls it Design systems and the page is titled Styles.
You can also generate your own from a website URL. You need to be signed in, and it uses about 1 AI token.
Design systems are made for building in code with AI coding tools. For Figma, import tokens.json with the Tokens Studio plugin. In the Website Builder, you can ask the assistant to switch a site to another design system.
They work on their own: drop a file into your AI tool and start building. If you build in Webflow, Framer or Figma, Sections are how you bring finished blocks in. If you build in Webflow and already have plain HTML from an AI tool, the Converter turns it into Webflow elements (it cannot read React, so your AI needs to give you the rendered HTML).
