Studio
Brands
Read colors, fonts, logo and images from any website with Studio's Brands screen, edit them, copy them as CSS or JSON, and use the brand in images and designs.
On this page
Open Brands in Studio, paste a website address, and Studio reads the site's brand: colors, fonts, logo and images. The brand is saved and you can use it in everything you make.
Read a website#
- 1
Paste an address
Type it in Paste a website, like stripe.com. Under Try, example sites such as stripe.com, linear.app, vercel.com and notion.so fill it in for you.
- 2
Read it
Choose Read brand. Studio opens the site in the background and shows Opening the site, Colors, fonts and logo and Site images.
- 3
Open it
When the site is ready, choose Open brand. Saved brands are listed under Saved brands.
Only http and https addresses can be read. A site that takes longer than 40 seconds stops with The site took too long to load. Check the address and try again.
The brand sheet#
| Part | Details |
|---|---|
| Colors | Primary, Secondary, Accent, Background, Surface, Text, Muted and Border. Click a color to change it. |
| Fonts | The fonts for headings and text. |
| From the site | Images from the site that designs can use. Remove from brand drops one. |
| Preview | A small website mock in the brand. |
- Use in Create or Make with this brand picks the brand in the composer.
- CSS and JSON copy the brand's values for your own code.
- Delete brand asks Delete this brand? Images made with it stay.
How a brand is used#
- Images and videos: the brand's colors are added to your prompt.
- Designs: the brand's colors, fonts and logo shape the whole design. See Designs.
- Other apps: send a brand to Workshop from Hub > Library to style an app with it.
Brands are saved in .jennefer/design-systems in your user profile.