> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gocrisp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design system

> Save your brand palette, fonts, and logo once so presentations, charts, and apps stay on-brand automatically.

A design system is a single brand guide — palette, fonts, logo, and motif — that the presentation, chart, and app agents read before they pick any colors. Save it once and every artifact stays on-brand without you re-explaining your branding each time.

## When to use a design system

Set one up if you want:

* Decks, charts, and interactive apps to share the same colors, fonts, and logo.
* A team-wide look that anyone on your account can reuse.
* Retailer and distributor branded work (for example, UNFI) without describing the palette every time.

If you only need a one-off chart with a specific color, you can keep telling the agent in chat — a saved design system is for branding you want reused.

## Creating a design system

From any session, ask the assistant to build one. For example:

```text theme={null}
Help me create our brand design system.
```

You can also say yes when an agent offers to set one up while you are building a deck or chart. The assistant walks you through:

1. **Brand context** — your brand or company name, website, and any colors, fonts, or logo you already have. If the brand publishes an official brand center, the assistant pulls the palette, typography, and logo from there instead of guessing.
2. **Logo** — the assistant finds and downloads your real logo and shows it back inline.
3. **Palette** — a strong palette with one primary color and one accent, presented as labeled swatches with hex codes and roles (primary, light, ink, muted, accent, positive, negative).
4. **Fonts and motif** — a font pairing and a repeated visual motif that fit the brand.
5. **Brand board** — the logo, palette swatches, font pairing, and motif on a single preview so you can see exactly what was picked.
6. **Sample slides and charts** — 2–3 sample slides and at least two chart types rendered with the candidate palette, fonts, and logo, so you see the system working in each medium before saving.
7. **Iteration** — adjust the palette, logo, fonts, or motif and the affected samples re-render until you approve.
8. **Save location** — the assistant asks where to save:
   * **My Files** (`/mnt/user/design_system/`) — private to you.
   * **Shared** (`/mnt/shared/design_system/`) — visible to everyone on your account.

Once saved, future presentations, charts, and apps in any session pick up the guide automatically.

<Tip>
  Save the design system to **Shared** if you want everyone on your account to use the same branding. Use **My Files** if you are still experimenting or want a personal style.
</Tip>

## Ready-made retailer kits

For retailer-facing work, you can skip setup and ask for the branding directly:

```text theme={null}
Create a sales chart in Cub Foods' colors.
```

The assistant applies the official palette, fonts, and logo:

* **Cub Foods** — Cub Foods Red and the Cub Foods logo with Arial.

This kit also works as a starting template if you want to build a custom design guide based on it.

## How agents use a saved guide

When you ask for a presentation, chart, or app, the agent checks for a saved design system before choosing any colors. If one exists, it applies the relevant section:

| Medium        | What gets applied                                                      |
| ------------- | ---------------------------------------------------------------------- |
| Presentations | Palette, fonts, logo placement, motif, and slide backgrounds.          |
| Charts        | Categorical palette plus primary, accent, text color, and font family. |
| Apps          | Primary color, accent colors, and font.                                |

If no design system is found, the agent offers to create one before continuing.

## Supported chart fonts

Charts render reliably with **Outfit** (default), **Roboto**, **Arial**, and **Calibri**. Calibri renders through its open metric-compatible twin, Carlito, so charts stay faithful in browser previews and in headless exports such as emailed or PDF reports.

## Updating or replacing a guide

Saved design systems live in the [virtual file system](/unfi-ai-agents/files) under `design_system/design_system.md` in **My Files** or **Shared**. To change your branding, either:

* Ask the assistant to update specific parts (for example, "swap the accent color to teal in our design system"), or
* Edit `design_system.md` directly from the **Files** page.

The assistant will not overwrite an existing design system without confirming first.