---
title: Import overview
description: Every way to bring an existing brand into Archetype, what each one brings, and what you review before anything is written.
---

> Source: https://www.heyarchetype.com/docs/import/overview

You rarely start a brand from nothing. Archetype can read one in from a website, a Figma file or your code, so your agents get the colors, type, components and logos you already have. Each route shows you what it found before it writes, and none of them locks the result: everything it brings in is yours to edit afterwards.

## Where imports live

Most imports start from **Settings → Import**, which has one row per source:

- **Figma file**: colors, type, components and logos from a `.fig` file. Press **Import**.
- **Website**: colors, type, icons and images read off a site. Press **Read a website**.
- **Code repository**: tokens and components from your code, kept in step. Press **Connect** (or **View** once a repository is connected).

A few more ways in sit closer to the thing they bring:

- **Components → Add** opens the **Add component** drawer, with tabs for **Code** (your coding agent), **Paste** (HTML and CSS), **Figma** and **Marketplace** (ready-made UI libraries).
- **Templates → Add template → Import** turns frames from a `.fig` file into templates.
- An agent connected over MCP can import token files and components in bulk with `update_brand`.

## What each source brings

| Source | What comes in | How you review it |
| --- | --- | --- |
| Website | Colors, typography, radius, spacing and shadows, an icon set, the logo, gradients, photos, and the site's words for drafting a voice | A drawer lists each part with a checkbox; only what is still ticked is written |
| Figma file | Colors and color tokens (with modes), gradients, typography, spacing, radius, shadows, components with their variants and states, logos, icons and photos | Every item is listed and can be unchecked; nothing existing is changed |
| Figma frames | Templates, one per frame you tick | You pick the frames, then name the template and choose its type |
| Code repository | Components pushed from your code, and the brand's tokens pulled into the repo | Your coding agent asks what to connect and opens a pull request |
| Coding agent | Token files and real, rendered components | The agent runs a dry run and shows you the summary first |
| Pasted markup | Components from HTML and CSS | A summary of what was linked to your tokens and what stayed literal |
| UI library | Components from shadcn/ui, Mantine, Radix Themes, Chakra UI, BeautifulUI, Material Design 3 or Ant Design, drawn on your foundations | You pick the library and the components |

## During setup

When you create a brand, the first screen asks for your name, the brand's name and its **Website** (marked optional). If you give one, Archetype reads it before moving on, under **Extracting your brand**. This read is the same as the website import, but it writes straight away rather than stopping for review.

The second step connects the agent you build with. Archetype gives you a prompt to paste into it, and you point the agent at your code, files or website to bring in what a website can't give, such as components. You can also press **Skip for now**.

Setup ends on a card titled **Your brand is in**, showing the logo, typefaces, pictures and palette that arrived. Hover a tile to edit or remove that one thing before you press **Open Archetype**.

## What an import changes

The routes differ in how much of your current brand they touch, so it is worth knowing before you run one on a brand that already has content.

- **Figma file** only adds. Nothing you already have is changed or removed. A token whose name and value match one you have is reused; one with the same name but a different value comes in under a new name (for example "Primary 2").
- **Website** can replace. Ticking **Colours** replaces your current color scales, **Typography** replaces your heading and body styles, and **Logo** replaces your primary logo. The drawer says so on each row. Radius, spacing and shadow scales you already have are never written over, and photos already in your library start unticked.
- **Agent imports** check for items you already hold under another name and ask whether to merge, skip or keep both. The whole import is recorded as one change, so it can be undone in one step. Depending on your brand's settings, an agent's changes may wait for review first; see [Changes from agents](/docs/agents/drafts).

> [!NOTE]
> Settings → Import is for members who can edit every part of the brand. Anyone else sees "Only editors and admins can import." See [Members and roles](/docs/workspace/team).

## Next steps

:::cards
- [From a website](/docs/import/website): Read a site's colors, type, logo and photos, then pick what to keep.
- [From Figma](/docs/import/figma): Import a `.fig` file's foundations, components, logos and icons.
- [From code](/docs/import/code): Connect a repository, import token files, paste markup or start from a UI library.
:::