DESIGN.md is a single-file, machine-readable summary of Booster's visual language and component rules. Drop it into your project so AI coding tools (Claude, Cursor, Copilot, and others) can produce on-brand UI without combing through this site for every decision. The format follows the open google-labs-code/design.md specification.
How to use it
- Download
DESIGN.mdand save it at the root of your project. - Point your AI tooling at the file — reference it from your
CLAUDE.md,.cursorrules, agent system prompt, or equivalent so the agent reads it when generating UI. - Re-download whenever Booster ships meaningful design changes; this page always reflects the current version.
Everything below is the contents of DESIGN.md, rendered for humans. The downloadable file and this view are kept in sync.
This file is a machine-readable design system reference for AI coding agents.
It captures the visual language, component inventory, and design rules for Zywave's
Booster design system. Keep this file updated as specs are finalized.Full documentation: https://booster.zywave.dev
Component toolkit: ZUI (zui-* web components)
1. Visual Theme & Atmosphere
Booster is an enterprise B2B design system for insurance and risk management software. The visual language is clean, structured, and professional, prioritizing clarity and efficiency over decoration. Density is moderate; layouts favor whitespace and clear hierarchy. The overall feel is trustworthy, calm, and business-grade.
Design philosophy:
- Consistency across all Zywave products takes priority over individual product expression
- Accessibility is non-negotiable; all colors and text must meet WCAG AA minimum
- Components are the building blocks; never invent custom UI when a component exists
- Blue is the primary product action color; green is brand-only
2. Color Palette & Roles
Primary colors
| Role | Name | HEX | CSS Variable | Notes |
|---|---|---|---|---|
| Primary action | Blue 500 | #2777D3 | --zui-blue-500 | Buttons, links, interactive elements, tabs, progress indicators |
| Brand | Zywave Green | #5FB53B | --zui-green-500 | Logo and public-facing brand only; minimal product usage |
| Background | Gray 50 | #F4F4F6 | --zui-gray-50 | Page background |
| Surface | White | #FFFFFF | — | Cards, panels, modals |
| Text | Gray 800 | #31313A | --zui-gray-800 | All body text, headings |
Semantic color roles
| Color | HEX | Role | Used in |
|---|---|---|---|
| Red 500 | #D93911 | Error, destructive, failure | Error notifiers, dialogs, wells, destructive buttons |
| Green 500 | #5FB53B | Success, confirm | Success notifiers, dialogs, wells |
| Yellow 500 | #FBAC0E | Caution, warning | Warning notifiers, dialogs, wells |
| Blue 500 | #2777D3 | Information, in-progress, links | Info notifiers, text links, progress |
| Gray 200 | #CBCBD2 | Disabled / unavailable | Disabled buttons, unavailable dropdown items |
| Purple 500 | #6F48B0 | Visited links | Visited text links only |
Extended palette (illustrations and accents only)
| Color | 500 HEX | CSS Variable Base |
|---|---|---|
| Blue | #2777D3 | --zui-blue-{50-700} |
| Green | #5FB53B | --zui-green-{100-700} |
| Aqua | #30BBB1 | --zui-aqua-{100-700} |
| Purple | #6F48B0 | --zui-purple-{100-700} |
| Rose | #C6318C | --zui-rose-{100-700} |
| Red | #D93911 | --zui-red-{100-700} |
| Orange | #F36F12 | --zui-orange-{100-700} |
| Yellow | #FBAC0E | --zui-yellow-{100-700} |
| Gray | #78788C | --zui-gray-{25-900} |
Color rules
- Never create a "sea of blue"; blue is for guiding users to actions, not decorating pages
- Zywave Green must never be used on elements with text smaller than 19px bold or 24px regular
- All text on colored backgrounds must pass WCAG AA contrast minimum
3. Typography Rules
Font family
Booster uses system fonts; no custom typeface is loaded.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;Type scale
| Name | Size | Weight | Color | Usage |
|---|---|---|---|---|
| Hero | 32px | 300 | Gray 800 | Step flows, welcome screens; use sparingly |
| H1 | 26px | 600 | Gray 800 | Page title, modal title |
| H2 | 20px | 600 | Gray 800 | Section headings |
| H3 | 16px | 600 | Gray 800 | Sub-section headings |
| H4 | 14px | 700 | Gray 800 | Minor headings |
| H5 | 12px | 700 | Gray 800 | ALL CAPS only |
| Body (default) | 14px | 400 | Gray 800 | Base body text |
| Body (small) | 12px | 400 | Gray 800 | Secondary/supporting text |
| Body (x-small) | 11px | 400 | Gray 800 | Special cases only |
Typography rules
- Base font size: 14px, weight 400
- Line height: 1.6 (unitless)
- Line length: 45-75 characters for optimal readability
- Font weight and size convey hierarchy; do not use bold arbitrarily
- H5 is always all-caps; no other heading level uses all-caps
4. Component Inventory
All components are ZUI web components with a zui-* tag prefix. Always use these components; do not build custom replacements. If a component doesn't exist, flag it.
Key component rules
Buttons (zui-button)
- Primary button: one per page or section maximum
- Use link button (
type="link") for cancel actions and row-level table actions - Use destructive variant for delete/irreversible actions; always pair with a confirmation dialog
- Button labels: sentence case, start with a verb, 1-3 words, no punctuation
Button Dropdown (zui-button-dropdown)
- Use for 3+ related actions in space-constrained contexts, especially tables
- Do not use when actions are unrelated
Dropdown Select (zui-select-dropdown)
- Use when the user is making a selection, not executing an action
- Use Multipicker (
zui-multipicker) for multi-select scenarios
Tables (zui-table)
- Use pagination by default; do not use infinite scroll
- Use link buttons for row-level actions
- Use button dropdown for 3+ row-level actions
Dialogs (zui-dialog)
- Use for confirmations, especially destructive actions
- Always provide a cancel option
5. Layout Principles
Formal layout specs are in progress. Reference existing product pages for layout patterns until specs are finalized.
Draft specs (use as reference)
- Semantic Spacing Rules: https://zywave.atlassian.net/wiki/spaces/booster/pages/176215818286
- Typography Rules: https://zywave.atlassian.net/wiki/spaces/booster/pages/176213884987
- Spacing Primitives: https://zywave.atlassian.net/wiki/spaces/booster/pages/176215720003
- Page Header Spec: https://zywave.atlassian.net/wiki/spaces/booster/pages/176226992230
General layout rules
- Page background: Gray 50 (
#F4F4F6) - Card/surface background: White (
#FFFFFF) - Buttons: right-aligned in page headers and at the bottom of content areas
- Primary button appears above secondary in vertical stacks (mobile)
- Cancel actions use link button; never secondary button
- Full-width buttons only in mobile/narrow layouts or single-action forms
Patterns
- Builder pattern: https://booster.zywave.dev/design-system/patterns/builder/
- Forms pattern: https://booster.zywave.dev/design-system/patterns/forms/
- Empty states: https://booster.zywave.dev/design-system/patterns/empty-states/
- Error patterns: https://booster.zywave.dev/design-system/patterns/errors/
- Data visualization: https://booster.zywave.dev/design-system/patterns/data-visualization/
6. Do's and Don'ts
| Do | Don't |
|---|---|
Use zui-* components for all UI; check Booster before building anything | Invent custom components when a ZUI equivalent exists |
| Use one primary button per page or section | Use multiple primary buttons; they compete and confuse |
| Use Blue 500 to guide users to actions | Create a "sea of blue" by highlighting too many actions |
| Use sentence case for all button labels | Use title case or ALL CAPS in buttons |
| Use Red 500 for errors and destructive actions | Use red for anything other than error/destructive |
| Use link buttons in table rows | Use primary or secondary buttons for row-level table actions |
| Pair destructive actions with a confirmation dialog | Allow irreversible actions without confirmation |
| Use system fonts; no custom typefaces | Import or load custom fonts |
| Flag any gap where a needed component doesn't exist | Silently build a custom component without documenting it |
7. Responsive Behavior
- Stack buttons vertically on screens narrower than 600px
- Primary button appears above secondary in vertical stacks
- Full-width buttons recommended for mobile forms
- Avoid full-width buttons on full-page desktop layouts or next to other full-width elements
- Touch targets must be large enough for mobile interaction
8. Voice and Tone
- Sentence case everywhere: "Save changes" not "Save Changes"
- No punctuation on button labels or headings
- Be direct: "Delete" not "Are you sure you want to delete?"
- Avoid articles: "Add user" not "Add a user"
- Start button labels with a verb: "Create report", "Send email", "Delete policy"
- Full writing style guide: https://booster.zywave.dev/design-system/voice-and-tone/writing-style-guide/
9. Agent Prompt Guide
When building UI for a Zywave product using this design system:
- Check the component list above first. If a
zui-*component exists for what you need, use it. Do not build a custom version. - If no component exists, flag it explicitly; state what's missing and what you built instead so it can be added to the Booster backlog.
- Use Blue 500 (
#2777D3) as the primary interactive color. - Use Gray 800 (
#31313A) for all body text. - Use Gray 50 (
#F4F4F6) for page backgrounds and White for surfaces. - Never use Zywave Green on interactive elements; it's brand-only.
- One primary button per page. Cancel = link button. Destructive = destructive variant + confirmation dialog.
- System fonts only. No Google Fonts, no custom imports.
- Reference the draft layout specs for spacing and page structure until formal specs are published.
- All text on colored backgrounds must pass WCAG AA contrast.
- Track any component gaps in the Booster UI Guidelines gaps log: https://zywave.atlassian.net/wiki/spaces/booster/pages/176249208945
Last updated: April 2026
Source: https://booster.zywave.dev
This file is a living document; update when specs are finalized or new components are added.