Design DNA & styling

Design DNA is the engine that decides what your site looks like — palette, typography, spacing, layout, motion. It exists so two projects never look identical.

Generic AI websites all look the same. Design DNA pushes back against the purple-gradient-on-white template and gives every project a unique direction.

Yes. Open Design, DNA and pick a new direction or remix the current one. The AI regenerates the design system to match.

Yes. Lock any token — colour, font, radius — and the AI works around it. Useful when a brand guideline is non-negotiable.

Yes. Drop a logo or brand image in Design, DNA, From image. The AI extracts a palette and proposes matching typography.

Design DNA picks a heading and body font pair plus a type scale. You can swap either font from Design, Typography.

Yes. Every Design DNA direction ships with a balanced dark variant. Toggle from Design, Theme.

A Design DNA option that explicitly avoids common AI layouts (hero-grid-cta-footer) and pushes for asymmetric, magazine-style or bento compositions.

Yes. Design, Custom CSS lets you add scoped overrides. The Coach warns when overrides break the theme contract.

Yes. Design, Tokens, Export produces a JSON file with every colour, font, size and motion value, ready for Figma or your design system.

Yes. Design, Tokens, Import accepts a Style Dictionary or Tokens Studio JSON file. Conflicts are flagged before import.

Yes. On any page click Layout and pick from the available compositions. Design DNA filters out options that conflict with your direction.

Motion follows the Design DNA motion style: subtle, balanced or expressive. You can disable motion globally for accessibility from Design, Motion.

Yes. Colour contrast, focus rings, keyboard navigation and reduced-motion are validated by automated checks before any preview.

Yes. The system flips layouts for Arabic and other RTL languages automatically. Mirroring of icons and progress bars is handled by the design system.

Yes. Design, Presets includes vetted starting points by industry. Each preset is a Design DNA snapshot you can remix freely.

Yes. Brief, Tone lets you pick from a set of voices. The Coach regenerates copy on demand to match.

Yes. Save the DNA as a snapshot and apply it to another project. Useful for keeping a multi-site brand consistent.

Yes. Every accepted design change creates a snapshot. Design, History lets you compare and revert to any earlier version.

Yes. Right-click any element and choose Comment. The Coach uses your feedback when it regenerates that area.