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 and deploy it.

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.

In the portal, go to Web Agents and select your agent.
Select the Generative UI tab.
Select Customize look, then Match my app.
Select Read my app. Faustine reads the Tailwind config, the stylesheets, the theme files, the fonts and the primary button of your app.
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.
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.
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

In the Generative UI tab, select Customize look, then Adjust by hand.
Change the values. The components next to the form follow every change.
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: replace Faustine's cards with your app's.
Design components with AI: describe the look instead of setting each value.
Appearance: set the three brand colors and the widget around the conversation.