Bring your brand in
Import overview
Every way to bring an existing brand into Archetype, what each one brings, and what you review before anything is written.
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
.figfile. 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
.figfile 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.
Next steps
Something missing or wrong on this page? Write to support@heyarchetype.com.