# Import a design system from your live website

> Your live site already holds a design system, spread across old stylesheets. Scan it into tokens, then clean up what years of drift left behind.

- Source: https://flashdsm.com/blog/import-design-system-from-website
- Published: 2026-09-11
- Author: Flash DSM Team
- Track: Learn Flash
- Reading time: 5 min read

---

## Start from what you ship

Most teams who want a design system already have one. It's just spread across four stylesheets, a Tailwind config someone extended two years ago, and a hero section with its own private shade of blue. A blank prompt throws all of that away. An import keeps it.

Open [[Dashboard > Import]] and you get the import dialog. It opens on the Figma tab, so switch tabs if that's not your source. There are three:

| Tab | What you give it | What it reads |
|---|---|---|
| Figma | A personal access token with File Content → Read, plus a file | Variables, styles and components from the file |
| Website | A domain | Palette, type and spacing from the public site's CSS |
| GitHub | A **Personal access token** (`ghp_…`) and a repo from **Pick a repository** | Your Tailwind config, CSS variables and components |

You can fill more than one tab. Each connected source gets a dot on its tab, and the footer says the sources are "grounding AI generation". Click **Done**, write a short prompt on the homepage to steer audience and tone, then press **Build**.

The import feeds generation rather than replacing it. The scan supplies the values and the generation builds the structure around them: ramps, semantic tokens, both themes, components.

> [!NOTE]
> The Figma tab uses Figma's Variables REST API, which only works on Figma Enterprise. On other plans the dialog says so, still reads the document's colours, and lets you paste Variables-to-JSON output instead. If your team works in Figma day to day, the plugin is the better route. See [keeping a Figma file in sync](/blog/figma-plugin-live-sync).

This post covers the Website tab, since it needs nothing from you except a URL.

## Run a website scan

1. Open the **Website** tab.
2. Type the domain into **Website domain**. A bare `acme.com` is fine, Flash adds the `https://` for you.
3. Press **Scan website**, or hit {{Enter}}.

The progress line steps through "Fetching the page…", "Reading stylesheets…" and "Extracting tokens & components…". Most sites finish in about 15 seconds. You get a card with the URL, a count like "12 colors · 6 components", and a row of swatches marked "grounded into generation".

Some sites block scanners completely. When that happens Flash falls back to the newest archived snapshot of the site, and the card tells you: same design, possibly not today's. If you shipped a rebrand last week, check those swatches before you build.

## What a scan sees

A scan reads the stylesheets the page loads and the values the page actually uses. That's why it works, and it's also where it stops.

| It extracts | It can't see |
|---|---|
| Colours in use, brand and neutrals included | Hover, focus and pressed states the page never renders while it's scanned |
| Font families and the sizes they're set at | Anything behind a login: your app, settings, admin screens |
| Border radii | Tokens that live in your codebase but never reach the public CSS |
| Shadows | Intent. It sees `#1a73e8` used 40 times, not why |
| Spacing values | Which of two near-identical greys was the "real" one |

If your marketing site and your product are styled differently, scan the one you want the system to follow. A landing page won't tell Flash much about table rows or form errors.

If the real source of truth is a repo, use the GitHub tab. It reads your Tailwind config and CSS variables directly, which is closer to what your developers actually ship than a rendered page is.

Colours the scan finds are kept exactly. When Flash builds the colour ramps, your brand hex is seated at the ramp step nearest its own lightness, and the rest of the ramp is built around it. It isn't re-derived from the hue, so `#DC4405` stays `#DC4405`.

## Send someone a scan

Once a scan finishes, the card shows a link: **Get a link to send this scan**. It creates a public page at `/scan/:slug`, headed "The design system hiding in acme.com", with the token and component counts and every swatch, font and radius the scan pulled out.

It's meant for showing a client or a colleague what their site already contains, before anyone has an account. The page has one button, **Claim this design system - free**, with the line "No card. It's already built - you just sign in." Claiming turns the scan straight into a design system in their account. No prompt, no generation wait.

Rules to know before you send one:

- The page shows the scan as it was stored. It never re-scans, so it's a snapshot of the day you ran it.
- Links expire. An expired one says "This scan link is not live". Run a fresh scan and get a new link.
- Creating links has a daily limit. Hit it and you'll be asked to try again tomorrow.
- One person can claim a scan. Everyone after that sees "Already claimed".
- Free holds one design system. If the claimer already has one, they're offered **Replace {name}** or **See plans**. Replace swaps their current system for the scanned one, so export anything worth keeping first.

> [!TIP]
> If you open your own claimed link, Flash skips the pitch page and drops you in the editor.

## Clean up after import

An import gives you what the site does, accidents included. Give this pass twenty minutes before you export anything.

1. Open [[Foundations > Colors]] and look at the neutrals. Sites collect near-identical greys. Keep the neutral ramp and delete the one-off greys that sit a hair apart.
2. Check that the brand colour landed on primary. If the scan promoted a link blue or a sale-badge red, fix it now, before components start pointing at it.
3. Switch to dark values. A site without a dark theme gives the scan nothing to read, so Flash builds dark values itself. Look at them before you trust them.
4. Open Typography and confirm the fonts. A licensed webfont won't be in Google Fonts, so upload the font files and the editor will render it properly.
5. Snap spacing to a scale. Scans find `13px` and `22px` because somebody once typed them. Move to 4 or 8 point steps and delete the strays.
6. Collapse radii. Small, medium and full cover most products. Scans often find seven.
7. Check the shadows. If one card's shadow falls left and another's falls straight down, pick one light source.
8. Lock what's final. A locked token can't be edited or renamed until you click its lock again.

Then open Ask Flash with {{⌘K}} and run "Check my text contrast for accessibility". Fix every body-text pair under 4.5:1 before anything ships.

With clean values in place, [editing foundations](/blog/editing-foundations) explains how ramps and semantic aliases behave when you change them, so the cleanup stays clean. For more prompts like the contrast check, see [Ask Flash prompts that change real tokens](/blog/ask-flash-prompts).