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

> ## Agent Instructions
> Internal links on these pages omit the .md extension. Append .md to a docs page URL, or send an Accept: text/markdown header, to get that page as markdown.

# Design system

> Configure the colors, typography, and design rules your white label agent builds with.

A design system defines your app's colors, fonts, and component styling. Set one as your workspace default, then include its design tokens and rules with your [custom agent prompt](/developers/white-label/system-prompt#include-your-default-design-system) to guide the look of the apps built in your platform.

## Configure your design guidance

**To use your default design system with your agent prompt:**

1. [Create a design system and set it as the workspace default](/Building-your-app/Design-system#setting-a-default-design-system).
2. Wait for the design system to finish generating.
3. Open **White label** → **System Prompt** in workspace settings.
4. Turn on **Custom system prompt** and save your **Agent prompt**.
5. Turn on **Default design system**.

A workspace can hold multiple design systems, but only one can be the default at a time. The **Default design system** switch is off by default. Choosing a workspace default alone doesn't add it to your custom agent prompt.

## What the prompt includes

The design guidance includes colors, typography, spacing, radii, shadows, design guidelines, and component styling rules. It doesn't include full component examples, the logo, or brand voice. Define the agent's tone and product behavior in your [system prompt](/developers/white-label/system-prompt).

<Note>
  This prompt addition applies only when **Agent prompt** contains your own prompt. If you leave it empty, the default white-label prompt doesn't include this design-system addition. If your default design system isn't ready, the agent continues without it.
</Note>

<Card title="Design system management" icon="swatchbook" horizontal href="/Building-your-app/Design-system">
  Create, edit, and manage design systems
</Card>

## See also

* [System prompt](/developers/white-label/system-prompt): Set the agent's identity and behavior
* [Setup checklist](/developers/white-label/setup-checklist): Everything you need to do to get an integration running
* [Skills and MCP](/developers/white-label/skills-and-mcp): The rules the agent follows and the tools it can call


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.