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

# Design System

> Your site's colors, typography, spacing and logo, read from the live site. Also known as your branding kit.

The Design System (your branding kit) holds your site's visual identity. The agent
uses it when it builds or edits pages, so new work matches the existing site.

Pull colors and fonts from the site you already have

## Open it

Open **Design System** from the new tab launcher in the Command Center. It
describes this site's colours, typography and spacing, and the moodboard the agent
designed from.

## What it shows

WPOS reads your live site by itself ("Reading your brand…") and fills in these
sections:

* Overview
* Logo
* Colors
* Typography
* UI elements
* Spacing and icons
* Moodboard

If no live design data is found, the panel tells you so.

## Change something

To change a color, font or spacing value, ask the agent in chat. Each change then
appears as an activity line in the conversation, for example "primary color
switched to ...".

Related: [Styling](https://docs.wpos.ai/operate/styling.md), [Playbook](https://docs.wpos.ai/memory/playbook.md).


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