Design System

A design system is a DESIGN.md-style definition of your brand — colors, typography, spacing, radius, component rules, voice — that Morpho's AI follows on every generation, across every app type.

Managing your design systems

At /design-system you can:

• Create and edit a design system, including seeding it from an image (Morpho extracts colors/typography direction from a screenshot or brand image).
• Keep several named systems (e.g. "Client A," "Dark variant") and switch which is active.
• Override the active system per-generation from the composer's design-system picker.

Because a design system is written into your project as a real DESIGN.md file, it travels with exports and git pushes, and the AI re-reads it on every later edit — so your look-and-feel stays consistent turn after turn.

Browse a design system

Instead of starting from a blank system, open the Browse dialog inside /design-system to explore a gallery of 74 real-brand design references (Stripe, Airbnb, Apple, Linear, Notion, and more). Preview one and copy it into your own library as a new, editable named system — a fast way to say "make it feel like Stripe" instead of hand-writing tokens.

Design editor

/design is a separate, lightweight tool for quick visual/prototype work — an instant preview, multi-page support, and export to plain HTML. It's distinct from the main chat builder: reach for it for fast static-site iteration rather than an app-like build. Existing Website Prototype projects, and the "remix" flow from a shared project, open here.