--- title: From a website description: Read a brand's colors, type, logo, icons and photos off its website, review what was found, and keep only the parts you want. --- > Source: https://www.heyarchetype.com/docs/import/website If your brand has a website, it already declares most of your foundations: the colors and typefaces in its stylesheets, the logo in its header, the photos on its pages. Archetype reads them, shows you what it found, and writes only the parts you leave ticked. ## Read a website :::steps ### Open Settings → Import Find the **Website** row and press **Read a website**. A dialog titled **Import from website** opens with your brand's website already filled in. Type another address if you want to read a different site. ### Choose how much to read Pick **Whole site** (the default) or **This page**. - **Whole site** reads the address you typed plus up to 24 more pages, found from the site's header, its sitemap and the links on the page. No more than 3 pages come from any one section, so a blog doesn't crowd out the rest. - **This page** reads only the address you typed. Colors, type and scales always come from the stylesheets of the page you typed. The extra pages add photos and copy. ### Start the read Press the arrow at the end of the field. The dialog lists four phases as they finish: **Understanding the brand**, **Mapping visual patterns**, **Capturing color palette** and **Learning the aesthetics**, with a count of pages or images where there is one. A read takes up to a minute. ### Review what was found The drawer **Import from** your site's address lists each part with a checkbox. Everything the site gave starts ticked. A part the site didn't give is shown dimmed, so you know it is missing before you go looking for it. ### Import Press **Import**. Archetype reads the site once more and writes what is still ticked. The drawer then lists what landed, part by part, with **Review in Foundations** and **Read another site**. ::: ## What you review | Row | What it holds | What ticking it does | | --- | --- | --- | | **Colours** | The palette as color scales, greys, and named colors the site already uses for a purpose (such as its text color) | Builds color scales from them. If your brand has scales already, the row notes "Replaces your current scales" | | **Typography** | The heading and body typefaces | Sets your heading and body styles, replacing the current ones | | **Radius, spacing and shadows** | The scales the stylesheets declare | Adds only the scales your brand doesn't have yet. Ones you have stay | | **Icons** | The icon set the site uses, if it is one Archetype carries | Adopts that set for the brand | | **Logo** | The logo found on the page | Replaces your primary logo | | **Copy** | The words on the pages that were read | Keeps them so you can draft a tone of voice later | | **Gradients** | Each gradient the site draws, shown as a swatch | Adds the ones you tick to the Gradients tab of your colors | | **Photos** | Every picture found, as a grid | Adds the ones you tick to your asset library | ### Colors that look like a tool's Sites often load third-party widgets, such as carousels or chat bubbles, that declare colors of their own. When a color looks like it belongs to one of those, the drawer says "This looks like a tool on the site, not the brand" and shows the color with the name the site gave it. Choose **Keep** or **Leave out** for each one before you import. ### Photos you already have A photo that is already in your library is marked **In library**, and a smaller copy of another photo on the same page is marked **Duplicate**. Both start unticked, so importing everything never brings a picture in twice. You can still tick them. After the import, Claude describes each new photo so agents can find it. ### Copy for your voice Ticking **Copy** keeps the words from the pages that were read. They aren't written into your brand as rules. Instead, [Knowledge](/docs/brand/knowledge) can use them when you press **Draft from website** to draft a tone of voice. ## Things to know - Archetype fetches pages from its own servers, so it reads what a signed-out visitor sees. It can't read pages behind a login. - Reading a site again is safe for scales: radius, spacing and shadows you already have are never overwritten. Colors, typography and logo are replaced if you tick them, so untick them when you only want new photos. - The same read runs when you add a website during setup. There it writes straight away, and you confirm the result on the **Your brand is in** card at the end. - You need to be able to edit every part of the brand to read a website. Other members see "Only editors and admins can read a website." > [!TIP] > To see how closely a live page follows your brand, rather than importing from it, use [Check](/docs/create/check). ## Next steps :::cards - [Foundations](/docs/brand/foundations): Look over the colors, type and scales the read wrote. - [From Figma](/docs/import/figma): Bring in components and the rest of your design system from a `.fig` file. - [Import overview](/docs/import/overview): Compare every way to bring a brand in. :::