# Match the look of your app

The look is the set of values the components in a reply are drawn with: font family, corners, border, shadow, density and the primary button. Faustine can read these values from your app's code, or you can set them by hand.

The look is saved in the draft. Your users get it when you [publish a version](https://docs.faustine.ai/web-agents/publish-a-version/) and [deploy it](https://docs.faustine.ai/web-agents/deploy-a-version/).

## Read the look from your code

A read is a run on your model provider and costs tokens. It proposes a look and changes nothing until you apply it.

1. In the portal, go to [**Web Agents**](https://auth.faustine.ai/go?to=%2Fweb-assistants) and select your agent.
2. Select the **Generative UI** tab.
3. Select **Customize look**, then **Match my app**.
4. Select **Read my app**. Faustine reads the Tailwind config, the stylesheets, the theme files, the fonts and the primary button of your app.
5. Review the proposal. It lists each value the read found, a confidence badge and the number of files cited. Select the file count to see the files. Under the proposal, every component is drawn with the proposed look.
6. If the read found your brand colors, leave **Use my app’s brand colours** selected to take them too. They also paint the widget, the launcher and the voice bar.
7. Select **Apply this look**.

The **Generative UI** tab opens again, with a line that says the components use the look read from your app.

The run and its log are in the agent's **Activity** tab. To read the code again after it changes, select **Read again**.

## Adjust the look by hand

1. In the **Generative UI** tab, select **Customize look**, then **Adjust by hand**.
2. Change the values. The components next to the form follow every change.
3. Select **Save look**.

| Value | Options |
| --- | --- |
| **Font family** | A font name, as your site loads it. The widget does not download fonts. The whole chat takes it. |
| **Controls corners**, **Cards corners**, **Chips corners** | 0 to 40 px. The far right of the slider is a pill. |
| **Border** | **None**, **Hairline**, **Soft**, **Strong** |
| **Shadow** | **None**, **Soft**, **Default**, **Elevated** |
| **Density** | **Compact**, **Default**, **Comfortable** |
| **Button shape** | **Pill**, **Rounded**, **Square** |
| **Button weight** | **Solid**, **Soft**, **Outline** |

**Reset every value to Faustine’s** clears the form.

## Go back to Faustine's look

In the **Generative UI** tab, select **Use Faustine’s default** on the line that describes the look. The components go back to Faustine's look and your look is kept. **Use my look** turns it on again.

This is a change to the draft, like applying a look.

## Troubleshooting

| Symptom | Cause | Fix |
| --- | --- | --- |
| The proposal says **No design values could be grounded in your code, so there is nothing to apply.** | The read found no values it could tie to a file. | Select **Adjust by hand** and set the values yourself. |
| The **Font** row says none is declared in your code | The read found no font family. The chat keeps the system font. | Enter the name in **Font family** under **Adjust by hand**. |
| The look does not show in your app | The look is in the draft. | Publish a version and deploy it. |

## Next steps

- [Import your own components](https://docs.faustine.ai/web-agents/import-components/): replace Faustine's cards with your app's.
- [Design components with AI](https://docs.faustine.ai/web-agents/design-components-with-ai/): describe the look instead of setting each value.
- [Appearance](https://docs.faustine.ai/web-agents/appearance/): set the three brand colors and the widget around the conversation.