---
title: Configuration
description: Save the primary color and an optional secondary color into vibe21.json.
order: 1
---

# vibe21-design-configuration

Refines the look already saved by [vibe21-web-new](/docs/vibe21-web-new). You pick a primary color and, if you want one, a secondary color.

This skill writes config. It does not restyle the generated pages.

## When to use it

Run it after [vibe21-web-new](/docs/vibe21-web-new), before you start writing pages.

Run it again when the brand colors change.

Style and theme were chosen during the scaffold. This skill does not ask for them again. To change those keys, edit `vibe21.json` or start a new site.

## How to run it

```
/vibe21-design-configuration
```

The agent reads `design` from `vibe21.json` and tells you what that style means. Then it asks for:

- a primary color — a preset, a Tailwind color name, or a hex
- an optional secondary color — or no secondary color

Colors are stored as uppercase `#RRGGBB` under `designConfiguration`.

## What happens

- `vibe21.json` gets `designConfiguration.primaryColor` and, when you chose one, `secondaryColor`.
- The Next.js app is not restyled here. Later UI work reads those keys and writes CSS tokens (`--color-primary`, `--color-on-primary`, and secondary when present).
- The Design section in `vibe21.md` is refreshed.

Then the agent offers [vibe21-web-preview](/docs/vibe21-web-preview).