Import brand from website: fill your brand kit in one step

To import brand from website details in Gradiently, open the Brand page, type your address into Website under Identity and choose Read site. Gradiently fetches the site's name, description, theme colour and icon, then offers each one: use the name, use the description as your tagline or About, add the colour to your brand colours, add the icon as a logo. You pick what goes in. It takes a few seconds and saves the most tedious part of setting up a kit.

How to import your brand from a website

1. 1

   Open the Brand page

   Choose the brand you want to fill in. Each brand in your account has its own kit, so make sure you are in the right one.

2. 2

   Enter the website

   Under Identity, type the address into Website. A plain domain such as crumb.co is enough; you don't need the https.

3. 3

   Choose Read site

   Gradiently visits the page once, reads its head and fetches its icon. The button shows Reading… while it works.

4. 4

   Use what fits

   Each finding appears with its own button: Use "Crumb" as the name, Use its description as the tagline, Use its description as About, Add its colour, Add its icon as a logo. Ignore anything that's wrong.

5. 5

   Read again after changes

   If you update your site, choose Read again. When everything useful is already in the kit, the page says so.

The site's colour also turns up later as a suggestion in the Colours section, labelled with your site's name, so you can add it there if you skipped it the first time.

What Gradiently reads from your website

It reads only the public homepage at the address you give, and only the parts that describe the brand. It doesn't crawl other pages, sign in or read your content.

Two details are worth knowing. SVG icons are skipped, because Gradiently won't rasterise someone else's SVG, so a site with only an SVG favicon gives no icon. And the colour must be a plain hex or rgb() value; a CSS variable in the theme-color tag can't be read.

Make your website easy to read

If Read site comes back thin, the fix is usually a few lines in your site's HTML head. They help more than Gradiently: browsers use theme-color for the address bar on phones, and link previews use your Open Graph tags. Open Graph tags and favicon design go deeper.

<head>
  <title>Crumb · Sourdough bakery in Leeds</title>
  <meta name="description" content="Slow sourdough and pastries, baked every morning on Kirkgate.">
  <meta property="og:site_name" content="Crumb">
  <meta name="theme-color" content="#c2410c">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
</head>

What to do after the import

The import gives you a foundation, not a finished kit. Four things are worth doing next, in this order.

1. Upload proper logo files. A favicon is tiny and square. Add your full logo as PNG, JPEG, WebP, GIF or AVIF, one for dark backgrounds and one for light; see logo on a gradient background.
2. Round out the colours. One theme colour is a start. Add a supporting colour and your darkest and lightest neutrals; how to choose brand colors helps.
3. Set your fonts. Choose a heading and a body face, or upload your own font files.
4. Write the voice. A site description tells the Designer what you are, not how you sound. Fill in Tone, In your words, Always and Never; brand voice for AI shows how.

When reading a website fails

If you see We couldn't read that website, the page didn't answer in time, returned an error or blocked the request. Check the address opens in a private browser window. Addresses that point to a private network, a login page or a file rather than a web page are refused on purpose. A site behind a strict bot wall may never be readable; type the details in by hand, which takes a couple of minutes.

With the kit filled in, the Studio puts your colours first in every picker, offers your logos and starts designs in your fonts, and the Designer writes from your description. Pair it with a Mark that nobody else can use and your posts look like you from the first one. The rest of the kit is covered in brand kit setup.