Brand Style holds your colors, fonts and components, extracted from your live site or imported from Figma. Add a Reference Style to describe the direction, and every generation and edit follows both.
Set the brand once. Use it everywhere.
Capture your Brand Style
Adjust it
Generate and edit on brand
Brand Style, Reference Style, and Figma import.
Extract
Workbench extracts colors, typography and components from your site. Prefer your design file? Import from Figma.
Review the Foundation and Components tabs, fix fonts, and add custom colors Workbench didn't find.
Brand Style stays active in the editor, so chat edits, regenerated sections and Edit mode keep your palette and type.
WorkbenchPaste a URL
Primary, secondary and accent colors, backgrounds and your type scale in one sheet.
Buttons, cards and other components extracted from your site, previewed before you save.
Bring styles in from a Figma file instead of the live site.
A short Markdown brief of the look you want: mood, colors, typography and layout.
Select
Frequently asked questions
Questions about Brand Kit
Where does Brand Style come from?
From your live site by default. You can also import it from Figma and adjust colors and fonts by hand.
Do edits stay on brand?
Yes. Brand Style stays active in the editor, and chat edits, section regeneration and Edit mode all work within it.
What is a Reference Style?
A Markdown note that describes the design direction you want. It goes to the generation AI alongside your Brand Style.