Company
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
When you open a Design System on BYQ, you’ll see a navigation across the top with eight sections: Overview, Sections, Colors, Typography, Spacing & shape, Surfaces, Do’s & don’ts, and Example prompts. Each one captures a different layer of the template’s visual language. Together, they’re what makes the output of an AI tool stop looking generic and start looking like a real, premium template.
The starting point. A short description of the brand the template represents, what kind of project it suits, and the overall feeling of the design — calm and editorial, dense and technical, bold and expressive. The Overview gives both you and the AI the high-level sense of what this Design System is for.
A handful of real sections that ship with the original template, shown as preview cards. This isn’t just visual reference — it’s a way to see the Design System in action before you start building. You can click any card to preview the section, or jump into the full Sections library to copy it into Webflow directly.
The full color palette, grouped by role: canvas surfaces, ink (text and primary fills), accents, and state-only utility colors like warning and success. Each color shows its name, hex value, and a short description of what it’s for. The grouping matters — it tells the AI not just what colors exist, but when to reach for which one.
The type system: every font family used in the template, the weights available, and the full size scale from caption up to display. Each typeface has a clear role — labels and taxonomy, body and UI, display and headlines — so the AI knows which voice to use where.
The spatial language of the template: density, max width, section gap, card padding, the full spacing scale, and border radius values for every common element (pill, tags, cards, buttons, inputs, navigation). This is what gives a template its rhythm — the difference between a tight, dense layout and a spacious, editorial one.
A ladder of layering levels — usually six steps from the base canvas up through lifted cards, inset depth, and dark inversions. Surfaces are how depth and hierarchy work in the template. The AI uses this to know what sits on top of what, and which background colors belong at each level.
Short, opinionated rules pulled from the template itself. Things like “anchor every page on Paper Cream and let Lift White cards float above it,” or “don’t bold StackSans for headlines — the type system relies on weight 400 with negative tracking.” This is where the Design System stops being a list of values and starts being a point of view.
A few ready-to-use prompts that show the kind of language that gets the best results from an AI tool when it’s working with this Design System. They’re a starting point you can copy, modify, and build from — useful both for inspiration and for understanding how to phrase your own prompts.
Everything you see on these eight tabs is also encoded in the four downloadable files (DESIGN.md, tokens.json, theme.css, variables.css). The visual page is for you. The files are for your tools. The next chapter breaks down which file does what.
