> 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](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.

| Component | Tag | Docs | Reference (where they live in source code) |
| --- | --- | --- | --- |
| Breadcrumbs | `zui-breadcrumb`<br>`zui-breadcrumbs` | [Breadcrumbs](https://booster.zywave.dev/design-system/components/breadcrumbs/) | https://cdn.zywave.com/@zywave/zui-breadcrumbs@latest/dist/zui-breadcrumb.js<br>https://cdn.zywave.com/@zywave/zui-breadcrumbs@latest/dist/zui-breadcrumbs.js<br>https://cdn.zywave.com/@zywave/zui-breadcrumbs@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-breadcrumbs@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-breadcrumbs@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-breadcrumbs@latest/test/zui-breadcrumbs.test.ts |
| Button Dropdown | `zui-button-dropdown` | [Button dropdowns](https://booster.zywave.dev/design-system/components/button-dropdowns/) | https://cdn.zywave.com/@zywave/zui-button@latest/dist/zui-button-dropdown.js<br>https://cdn.zywave.com/@zywave/zui-button@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-button@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-button@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-button@latest/test/zui-button-dropdown.test.ts |
| Button Group | `zui-button-group` | [Button groups](https://booster.zywave.dev/design-system/components/button-groups/) | https://cdn.zywave.com/@zywave/zui-button@latest/dist/zui-button-group.js<br>https://cdn.zywave.com/@zywave/zui-button@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-button@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-button@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-button@latest/test/zui-button-group.test.ts |
| Button | `zui-button` | [Buttons](https://booster.zywave.dev/design-system/components/buttons/) | https://cdn.zywave.com/@zywave/zui-button@latest/dist/zui-button.js<br>https://cdn.zywave.com/@zywave/zui-button@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-button@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-button@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-button@latest/test/zui-button.test.ts |
| Card | `zui-card` | [Cards](https://booster.zywave.dev/design-system/components/cards/) | https://cdn.zywave.com/@zywave/zui-card@latest/dist/zui-card.js<br>https://cdn.zywave.com/@zywave/zui-card@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-card@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-card@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-card@latest/test/zui-card.test.ts |
| Checkbox | `zui-checkbox` | [Checkboxes](https://booster.zywave.dev/design-system/components/checkboxes/) | https://cdn.zywave.com/@zywave/zui-checkbox@latest/dist/zui-checkbox.js<br>https://cdn.zywave.com/@zywave/zui-checkbox@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-checkbox@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-checkbox@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-checkbox@latest/test/zui-checkbox.test.ts |
| Dialog | `zui-dialog` | [Dialogs](https://booster.zywave.dev/design-system/components/dialogs/) | https://cdn.zywave.com/@zywave/zui-dialog@latest/dist/zui-dialog.js<br>https://cdn.zywave.com/@zywave/zui-dialog@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-dialog@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-dialog@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-dialog@latest/test/zui-dialog.test.ts |
| Dropdown (simple) | `zui-select` | [Dropdown selects](https://booster.zywave.dev/design-system/components/dropdown-selects/) | https://cdn.zywave.com/@zywave/zui-select@latest/dist/zui-select.js<br>https://cdn.zywave.com/@zywave/zui-select@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-select@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-select@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-select@latest/test/zui-select.test.ts |
| Dropdown Multi Select | `zui-select-dropdown` | [Dropdown multi-selects](https://booster.zywave.dev/design-system/components/dropdown-multi-selects/) | https://cdn.zywave.com/@zywave/zui-select@latest/dist/zui-select-dropdown.js<br>https://cdn.zywave.com/@zywave/zui-select@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-select@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-select@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-select@latest/test/zui-select-dropdown.test.ts |
| Dropdown Select | `zui-select-dropdown` | [Dropdown selects](https://booster.zywave.dev/design-system/components/dropdown-selects/) | https://cdn.zywave.com/@zywave/zui-select@latest/dist/zui-select-dropdown.js<br>https://cdn.zywave.com/@zywave/zui-select@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-select@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-select@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-select@latest/test/zui-select-dropdown.test.ts |
| Dropdown Option | `zui-option`<br>`zui-option-group` |  | https://cdn.zywave.com/@zywave/zui-select@latest/dist/zui-option.js<br>https://cdn.zywave.com/@zywave/zui-select@latest/dist/zui-option-group.js<br>https://cdn.zywave.com/@zywave/zui-select@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-select@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-select@latest/docs/demo.html |
| Error Page | `zui-error-page` | [Error pages](https://booster.zywave.dev/design-system/components/error-pages/) | https://cdn.zywave.com/@zywave/zui-error-page@latest/dist/zui-error-page.js<br>https://cdn.zywave.com/@zywave/zui-error-page@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-error-page@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-error-page@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-error-page@latest/test/zui-error-page.test.ts |
| Expander | `zui-expander`<br>`zui-expander-group` | [Expanders](https://booster.zywave.dev/design-system/components/expanders/) | https://cdn.zywave.com/@zywave/zui-expander@latest/dist/zui-expander.js<br>https://cdn.zywave.com/@zywave/zui-expander@latest/dist/zui-expander-group.js<br>https://cdn.zywave.com/@zywave/zui-expander@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-expander@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-expander@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-expander@latest/test/zui-expander.test.ts |
| File Input | `zui-input-file` | [File inputs](https://booster.zywave.dev/design-system/components/file-inputs/) | https://cdn.zywave.com/@zywave/zui-input@latest/dist/zui-input-file.js<br>https://cdn.zywave.com/@zywave/zui-input@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-input@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-input@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-input@latest/test/zui-input-file.test.ts |
| Flyout | `zui-flyout` | [Flyouts](https://booster.zywave.dev/design-system/components/flyouts/) | https://cdn.zywave.com/@zywave/zui-flyout@latest/dist/zui-flyout.js<br>https://cdn.zywave.com/@zywave/zui-flyout@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-flyout@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-flyout@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-flyout@latest/test/zui-flyout.test.ts |
| Formfield | `zui-formfield` | [Formfields](https://booster.zywave.dev/design-system/components/formfields/) | https://cdn.zywave.com/@zywave/zui-formfield@latest/dist/zui-formfield.js<br>https://cdn.zywave.com/@zywave/zui-formfield@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-formfield@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-formfield@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-formfield@latest/test/zui-formfield.test.ts |
| Icons | `zui-icon` | [Icons](https://booster.zywave.dev/design-system/components/icons/) | https://cdn.zywave.com/@zywave/zui-icons@latest/dist/zui-icon.js<br>https://cdn.zywave.com/@zywave/zui-icons@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-icons@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-icons@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-icons@latest/test/zui-icons.test.ts |
| Logo | `zui-logo`<br>`zui-logos` |  | https://cdn.zywave.com/@zywave/zui-logo@latest/dist/zui-logo.js<br>https://cdn.zywave.com/@zywave/zui-logo@latest/dist/zui-logos.js<br>https://cdn.zywave.com/@zywave/zui-logo@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-logo@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-logo@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-logo@latest/test/zui-logo.test.ts |
| Multipicker | `zui-multipicker`<br>`zui-multipicker-item` | [Multipickers](https://booster.zywave.dev/design-system/components/multipickers/) | https://cdn.zywave.com/@zywave/zui-multipicker@latest/dist/zui-multipicker.js<br>https://cdn.zywave.com/@zywave/zui-multipicker@latest/dist/zui-multipicker-item.js<br>https://cdn.zywave.com/@zywave/zui-multipicker@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-multipicker@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-multipicker@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-multipicker@latest/test/zui-multipicker.test.ts |
| Notifier | `zui-notifier` | [Notifiers](https://booster.zywave.dev/design-system/components/notifiers/) | https://cdn.zywave.com/@zywave/zui-notifier@latest/dist/zui-notifier.js<br>https://cdn.zywave.com/@zywave/zui-notifier@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-notifier@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-notifier@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-notifier@latest/test/zui-notifier.test.ts |
| Pager | `zui-pager` | [Pagers](https://booster.zywave.dev/design-system/components/pagers/) | https://cdn.zywave.com/@zywave/zui-pager@latest/dist/zui-pager.js<br>https://cdn.zywave.com/@zywave/zui-pager@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-pager@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-pager@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-pager@latest/test/zui-pager.test.ts |
| Picker | `zui-picker`<br>`zui-picker-item` | [Pickers](https://booster.zywave.dev/design-system/components/pickers/) | https://cdn.zywave.com/@zywave/zui-picker@latest/dist/zui-picker.js<br>https://cdn.zywave.com/@zywave/zui-picker@latest/dist/zui-picker-item.js<br>https://cdn.zywave.com/@zywave/zui-picker@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-picker@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-picker@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-picker@latest/test/zui-picker.test.ts |
| Popover |  | [Popovers](https://booster.zywave.dev/design-system/components/popovers/) |  |
| Progress Bar | `zui-progress` | [Progress bars](https://booster.zywave.dev/design-system/components/progress-bars/) | https://cdn.zywave.com/@zywave/zui-progress@latest/dist/zui-progress.js<br>https://cdn.zywave.com/@zywave/zui-progress@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-progress@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-progress@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-progress@latest/test/zui-progress.test.ts |
| Radio Button | `zui-radio`<br>`zui-radio-group` | [Radio buttons](https://booster.zywave.dev/design-system/components/radio-buttons/) | https://cdn.zywave.com/@zywave/zui-radio@latest/dist/zui-radio.js<br>https://cdn.zywave.com/@zywave/zui-radio@latest/dist/zui-radio-group.js<br>https://cdn.zywave.com/@zywave/zui-radio@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-radio@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-radio@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-radio@latest/test/zui-radio.test.ts |
| Search | `zui-search` | [Search](https://booster.zywave.dev/design-system/components/search/) | https://cdn.zywave.com/@zywave/zui-search@latest/dist/zui-search.js<br>https://cdn.zywave.com/@zywave/zui-search@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-search@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-search@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-search@latest/test/zui-search.test.ts |
| Shell | `zui-shell`<br>`zui-shell-apps`<br>`zui-shell-apps-item`<br>`zui-shell-banner`<br>`zui-shell-content`<br>`zui-shell-content-actionbar`<br>`zui-shell-context-switcher`<br>`zui-shell-footer`<br>`zui-shell-help`<br>`zui-shell-nav`<br>`zui-shell-nav-item`<br>`zui-shell-topbar`<br>`zui-shell-user` | [Shell](https://booster.zywave.dev/design-system/components/shell/) | https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-apps.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-apps-item.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-banner.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-content.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-content-actionbar.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-context-switcher.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-footer.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-help.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-nav.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-nav-item.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-topbar.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/zui-shell-user.js<br>https://cdn.zywave.com/@zywave/zui-shell@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-shell@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-shell@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-shell@latest/test/zui-shell.test.ts |
| Slider | `zui-slider` | [Sliders](https://booster.zywave.dev/design-system/components/sliders/) | https://cdn.zywave.com/@zywave/zui-slider@latest/dist/zui-slider.js<br>https://cdn.zywave.com/@zywave/zui-slider@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-slider@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-slider@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-slider@latest/test/zui-slider.test.ts |
| Spinner | `zui-spinner`<br>`zui-spinner-overlay` | [Spinners](https://booster.zywave.dev/design-system/components/spinners/) | https://cdn.zywave.com/@zywave/zui-spinner@latest/dist/zui-spinner.js<br>https://cdn.zywave.com/@zywave/zui-spinner@latest/dist/zui-spinner-overlay.js<br>https://cdn.zywave.com/@zywave/zui-spinner@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-spinner@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-spinner@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-spinner@latest/test/zui-spinner.test.ts<br>https://cdn.zywave.com/@zywave/zui-spinner@latest/test/zui-spinner-overlay.test.ts |
| SVG Utility | `zui-svg` | [SVG utils](https://booster.zywave.dev/design-system/components/svg-utils/) | https://cdn.zywave.com/@zywave/zui-svg@latest/dist/zui-svg.js<br>https://cdn.zywave.com/@zywave/zui-svg@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-svg@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-svg@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-svg@latest/test/zui-svg.test.ts |
| Table | `zui-table`<br>`zui-table-cell`<br>`zui-table-footer`<br>`zui-table-row`<br>`zui-table-topbar` | [Tables](https://booster.zywave.dev/design-system/components/tables/) | https://cdn.zywave.com/@zywave/zui-table@latest/dist/zui-table.js<br>https://cdn.zywave.com/@zywave/zui-table@latest/dist/zui-table-cell.js<br>https://cdn.zywave.com/@zywave/zui-table@latest/dist/zui-table-footer.js<br>https://cdn.zywave.com/@zywave/zui-table@latest/dist/zui-table-row.js<br>https://cdn.zywave.com/@zywave/zui-table@latest/dist/zui-table-topbar.js<br>https://cdn.zywave.com/@zywave/zui-table@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-table@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-table@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-table@latest/test/zui-table.test.ts |
| Tabs | `zui-tab`<br>`zui-tabs` | [Tabs](https://booster.zywave.dev/design-system/components/tabs/) | https://cdn.zywave.com/@zywave/zui-tabs@latest/dist/zui-tab.js<br>https://cdn.zywave.com/@zywave/zui-tabs@latest/dist/zui-tabs.js<br>https://cdn.zywave.com/@zywave/zui-tabs@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-tabs@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-tabs@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-tabs@latest/test/zui-tabs.test.ts |
| Tag | `zui-tag` | [Tags](https://booster.zywave.dev/design-system/components/tags/) | https://cdn.zywave.com/@zywave/zui-tag@latest/dist/zui-tag.js<br>https://cdn.zywave.com/@zywave/zui-tag@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-tag@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-tag@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-tag@latest/test/zui-tag.test.ts |
| Text Input | `zui-input` | [Text inputs](https://booster.zywave.dev/design-system/components/text-inputs/) | https://cdn.zywave.com/@zywave/zui-input@latest/dist/zui-input.js<br>https://cdn.zywave.com/@zywave/zui-input@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-input@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-input@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-input@latest/test/zui-input.test.ts |
| Textarea | `zui-textarea` | [Textareas](https://booster.zywave.dev/design-system/components/textareas/) | https://cdn.zywave.com/@zywave/zui-textarea@latest/dist/zui-textarea.js<br>https://cdn.zywave.com/@zywave/zui-textarea@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-textarea@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-textarea@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-textarea@latest/test/zui-textarea.test.ts |
| Toggle | `zui-toggle` | [Toggles](https://booster.zywave.dev/design-system/components/toggles/) | https://cdn.zywave.com/@zywave/zui-toggle@latest/dist/zui-toggle.js<br>https://cdn.zywave.com/@zywave/zui-toggle@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-toggle@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-toggle@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-toggle@latest/test/zui-toggle.test.ts |
| Tooltip | `zui-tooltip` | [Tooltips](https://booster.zywave.dev/design-system/components/tooltips/) | https://cdn.zywave.com/@zywave/zui-tooltip@latest/dist/zui-tooltip.js<br>https://cdn.zywave.com/@zywave/zui-tooltip@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-tooltip@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-tooltip@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-tooltip@latest/test/zui-tooltip.test.ts |
| Well | `zui-well` | [Wells](https://booster.zywave.dev/design-system/components/wells/) | https://cdn.zywave.com/@zywave/zui-well@latest/dist/zui-well.js<br>https://cdn.zywave.com/@zywave/zui-well@latest/dist/custom-elements.json<br>https://cdn.zywave.com/@zywave/zui-well@latest/lab.html<br>https://cdn.zywave.com/@zywave/zui-well@latest/docs/demo.html<br>https://cdn.zywave.com/@zywave/zui-well@latest/test/zui-well.test.ts |

### 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](https://zywave.atlassian.net/wiki/spaces/booster/pages/176215818286)
- Typography Rules: [https://zywave.atlassian.net/wiki/spaces/booster/pages/176213884987](https://zywave.atlassian.net/wiki/spaces/booster/pages/176213884987)
- Spacing Primitives: [https://zywave.atlassian.net/wiki/spaces/booster/pages/176215720003](https://zywave.atlassian.net/wiki/spaces/booster/pages/176215720003)
- Page Header Spec: [https://zywave.atlassian.net/wiki/spaces/booster/pages/176226992230](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/](https://booster.zywave.dev/design-system/patterns/builder/)
- Forms pattern: [https://booster.zywave.dev/design-system/patterns/forms/](https://booster.zywave.dev/design-system/patterns/forms/)
- Empty states: [https://booster.zywave.dev/design-system/patterns/empty-states/](https://booster.zywave.dev/design-system/patterns/empty-states/)
- Error patterns: [https://booster.zywave.dev/design-system/patterns/errors/](https://booster.zywave.dev/design-system/patterns/errors/)
- Data visualization: [https://booster.zywave.dev/design-system/patterns/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/](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:

1. **Check the component list above first.** If a `zui-*` component exists for what you need, use it. Do not build a custom version.
2. **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.
3. **Use Blue 500 (`#2777D3`)** as the primary interactive color.
4. **Use Gray 800 (`#31313A`)** for all body text.
5. **Use Gray 50 (`#F4F4F6`)** for page backgrounds and White for surfaces.
6. **Never use Zywave Green on interactive elements**; it's brand-only.
7. **One primary button per page.** Cancel = link button. Destructive = destructive variant + confirmation dialog.
8. **System fonts only.** No Google Fonts, no custom imports.
9. **Reference the draft layout specs** for spacing and page structure until formal specs are published.
10. **All text on colored backgrounds must pass WCAG AA contrast.**
11. **Track any component gaps** in the Booster UI Guidelines gaps log: [https://zywave.atlassian.net/wiki/spaces/booster/pages/176249208945](https://zywave.atlassian.net/wiki/spaces/booster/pages/176249208945)

---

_Last updated: April 2026_
_Source:_ [_https://booster.zywave.dev_](https://booster.zywave.dev)
_This file is a living document; update when specs are finalized or new components are added._