Guide›Design
DesignBeginner7 min

Style & Design DNA

Define a style — colours, type, spacing — as a single Design DNA, and apply one system across every screen on the canvas. Restyle in one move to try a new direction without rebuilding any page.

What Design DNA is

Design DNA is the shared visual system behind your design — the colour palette, typography, spacing scale, and roundness that define how everything looks and feels. Define it once, and it applies to every screen on the canvas, so the product stays coherent however much it grows.

Instead of tweaking colours and fonts screen by screen, you work at one level: the system. This makes it easy to keep multiple pages consistent, and to try an entirely new direction with a single change.

ℹ
Note.This Design DNA lives inside the Design module and governs the whole canvas. It supersedes the older builder-framed version — here it's about the DNA of all your designs, not a single build.

Defining a style

You can define your style the same way you design — by conversation. Describe the mood or brand you want, and the AI design partner proposes a harmonious set of colours, type, and spacing. Adjust any value from there.

1
Colours
A primary brand colour, one or two secondaries, plus neutral surface and text colours. The system maps each to a role, so screens refer to "primary" rather than a fixed colour value.
2
Typography
A heading font family and a body font family, plus a consistent size scale and line height. Describe a tone ("geometric and clean," "warm and editorial") and the assistant picks fitting fonts.
3
Spacing and roundness
A base spacing unit that governs rhythm and padding across layouts, and a roundness that applies to buttons, cards, and inputs — from sharp corners to pill-shaped edges.

If you already have a brand, you can point MyndLab at a live website and it extracts your identity automatically — colours, typography, spacing — turning it into a ready-to-apply Design DNA.

One system across screens

Once Design DNA is defined, every page on the canvas follows it. When the assistant builds a new screen, it automatically uses the same system — the same colours and fonts, the same rhythm — so the tenth page looks like it belongs with the first.

This is what makes multi-page design manageable. You don't repeat style decisions on every screen; you make them once at the system level, and they apply everywhere.

💡
Tip.Build your first screen, get the Design DNA feeling right, then ask for the remaining pages. They'll be generated already consistent with your system.

Restyling

Because the style is one system, trying a completely different look doesn't mean rebuilding anything. You change the Design DNA, and every screen on the canvas shifts together — the structure and content stay, only the visual layer changes.

text
Restyle everything to a darker, premium palette with a serif heading font.
Now try a playful version — brighter accent, more rounded corners.
Go back to the calmer neutral system from before.

This makes restyling cheap enough to explore. Try several directions quickly, capture the ones you like as versions, and compare them before committing to one.

Tokens under the hood

Beneath the surface, Design DNA is represented as a role-based token set — named values for each colour, font, and spacing scale. Screens reference the roles, not fixed values, which is what makes restyling instant.

css
:root {
  --color-primary: #7C3AED;
  --color-secondary: #00D5D8;
  --color-surface: #FFFFFF;
  --color-text: #131313;
  --color-text-muted: #6B7280;
  --radius-base: 10px;
  --space-unit: 8px;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

When you turn a design into a real Web App, this token set travels with it, so the exported product inherits the same design system you saw on the canvas.

Tips for a clean system

1
Settle the system early
Lock the Design DNA before building many pages. Screens built on a stable system need less cleanup later.
2
Keep a tight palette
A primary, one or two secondaries, and a few neutrals are usually enough. Crowded palettes make screens feel incoherent.
3
Test a restyle early
Restyle your first few pages once they exist. If the system doesn't hold up well across a new look, fix that before the canvas grows.
⚠
Watch out.Overriding the system's tokens on a single screen with hardcoded values breaks one-move restyling for that screen. Stick to the Design DNA system unless you have a deliberate need for an exception.