Guide›Design DNA
Design DNABeginner7 min

Design DNA

Point Myndlab at any live website and it extracts your brand — colours, typography, logo, spacing — and applies it to everything it builds for you.

What Design DNA extracts

Design DNA is Myndlab's brand extraction system. Give it a URL and it crawls the public-facing pages of that site, analyses the computed styles, and produces a structured design token set that Myndlab uses whenever it generates UI for your project.

A completed extraction captures six categories of design information:

1
Colour palette
Primary and secondary brand colours, plus surface, border, and text colours. Myndlab identifies which colours are used most prominently for interactive elements (buttons, links, highlights) versus backgrounds, and maps them to a role-based token system: --color-primary, --color-secondary, --color-surface, --color-text, and so on.
2
Typography
Font families in use on the site (up to three: heading, body, monospace), typical size scale, line height, and letter spacing. If the fonts are served from Google Fonts or a standard CDN, Myndlab includes the correct import in every generated project. Custom self-hosted fonts are flagged for manual configuration.
3
Border radius
The roundness applied to buttons, cards, and inputs across the site. Myndlab detects whether the site uses sharp corners (radius ≈ 0), slightly rounded (2–4px), rounded (6–10px), or pill-shaped (≥ 9999px) elements, and applies the same aesthetic to all generated components.
4
Spacing scale
The base unit used for padding and margin (commonly 4px or 8px), inferred from the computed layout of key UI regions. Myndlab uses this to set its internal spacing tokens so generated layouts feel consistent with your existing site.
5
Logo URL
The URL of the logo image found in the site's header, extracted as a direct link. Myndlab uses this in generated app headers, email templates, and export documents. SVG logos are supported only if they are served as an <img> src — inline SVG is flagged as a limitation (see below).
6
Dark mode variant
If the site ships a dark mode, Myndlab extracts both light and dark palettes and maps them to a single unified token set. Your generated apps will include working dark mode support out of the box.

Running an extraction

Design DNA extraction takes about 30 seconds and costs 1 credit. Here is how to run it:

1
Open Project Settings
Navigate to your project in the Build screen. Click the settings icon (gear) in the top-right corner, or press ⌘ K and type 'Project Settings'.
2
Go to the Design DNA tab
Inside Project Settings, select the 'Design DNA' tab. You'll see a URL input field and any previously extracted DNA for this project.
3
Enter the URL
Type or paste the URL of the website whose brand you want to extract. This is typically your company's public marketing site, an existing product, or a client's site. The URL must be publicly accessible — Myndlab cannot access pages behind a login.
4
Click Extract
Myndlab crawls the URL, analyses the computed styles across the homepage and up to three linked pages, and returns the extracted token set within about 30 seconds. A preview panel shows the detected colours, fonts, and border radius alongside rendered sample components using those values.
5
Review the preview
The preview includes a sample button, a card, a form input, and a typography specimen rendered in your extracted tokens. If anything looks wrong, you can edit the tokens directly before saving.
💡
Tip.Run extraction on your most polished, brand-consistent page — typically the homepage or a landing page. Avoid extracting from internal tools, staging environments, or pages that are undergoing a redesign, as their styles may not represent your final brand.

Reviewing and editing the extracted system

After extraction, every token is editable. The Design DNA editor displays your token set as a visual panel with colour swatches, font previews, and a live sample. Click any value to override it.

Common manual adjustments after extraction:

1
Correct primary colour mapping
Myndlab picks the most-used non-neutral colour as the primary. On sites with a strong accent colour used only for alerts, it may pick the wrong one. Drag the correct swatch to the Primary slot.
2
Swap auto-detected fonts
If your heading font is self-hosted and was not detected, type the font name manually and provide the import URL or select it from the Google Fonts picker embedded in the DNA editor.
3
Set a logo URL manually
If the crawler couldn't extract the logo (for example, if it's an inline SVG or loaded via JavaScript), paste the direct URL of your logo asset into the Logo URL field.

Once you're satisfied, click Save DNA. The token set is stored with your project and applied to every subsequent build.

Applying DNA to a new build

When Design DNA is saved to a project, it's applied automatically to every new code generation run. You don't need to mention branding in your prompt — Myndlab injects the token set into the generated CSS variables, Tailwind config (if applicable), and component library configuration before writing any UI code.

css
:root {
  --color-primary: #0057FF;
  --color-secondary: #FF6B00;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F7FA;
  --color-text: #111827;
  --color-text-muted: #6B7280;
  --color-border: #E5E7EB;
  --radius-base: 8px;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

The generated code references these variables — not hardcoded colour values — so you can update your brand at any time by editing the DNA and re-applying it without regenerating every file.

Applying DNA to an existing project

If you've already built and deployed an app and want to update its branding, Design DNA can apply a new token set to an existing project without triggering a full regeneration.

1
Extract or edit your DNA
Run a fresh extraction from the new URL, or manually update the token values in the DNA editor.
2
Click 'Apply to existing files'
This option appears at the bottom of the DNA editor when a project already has generated code. Myndlab performs a targeted pass that updates only the CSS variable declarations and design token references — it does not regenerate any logic, routes, or data-layer files.
3
Review the diff
A diff view shows every file that will be changed. Confirm and Myndlab writes the updates. A deploy push is required to get the new styles live.
ℹ
Note.Applying DNA to existing files updates CSS tokens only. If your existing generated code contains hardcoded colour values (which can happen if you manually edited files after generation), those values will not be automatically replaced. The diff view will highlight any such occurrences so you can update them manually.

Limitations

Design DNA works well for the vast majority of public websites, but a few scenarios fall outside its current capabilities:

1
Pages behind authentication
Myndlab cannot log into your site. If your most on-brand pages are inside a dashboard or behind a paywall, extraction will run on the public marketing pages instead. Manually override any tokens that don't match your internal product's brand.
2
Inline SVG logos
Logos embedded directly as SVG markup in HTML (rather than loaded via an <img> src attribute) cannot be extracted as a URL. Paste your logo's direct asset URL manually in the Logo URL field.
3
Heavy custom fonts without a CDN
Fonts loaded from a private font server or via a CSS @font-face pointing to a non-public URL will be detected by name but cannot be included in generated import statements. Myndlab will flag these for manual configuration and suggest the closest Google Fonts match as a fallback.
4
JavaScript-rendered styles
Sites that apply colours and typography entirely through JavaScript at runtime (some design-system-in-JS setups) may produce incomplete extractions because the crawler analyses the initial HTML and computed styles, not the JS runtime. In these cases, run a manual token override after extraction.
⚠
Watch out.Design DNA extraction respects robots.txt. If the site you're trying to extract blocks crawlers, the extraction will either return partial results or fail entirely. In that case, configure your design tokens manually in the DNA editor.