> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Set design guidelines to keep every Flowstep generation on-brand

> Define file-level design guidelines in DESIGN.md format — colors, typography, spacing, and conventions that steer every AI generation and edit in the file.

Design guidelines let you set standing rules — colors, typography, spacing, component conventions — that Flowstep applies to every AI generation and edit in a file. Instead of repeating "use our blue theme" in every prompt, write it down once and the AI follows it from then on.

## Edit your design guidelines

<Steps>
  <Step title="Open the Design guidelines modal">
    In the chat panel header, click the **Edit design guidelines** button. The **Design guidelines** modal opens with a `DESIGN.md` text editor.
  </Step>

  <Step title="Write or import your guidelines">
    Type your guidelines directly, or drag and drop a `.md` file into the editor to import it. The format follows Google's open `design.md` standard — optional YAML front matter (recognized keys: `version`, `name`, `description`, `colors`, `typography`, `rounded`, `spacing`, `components`) followed by Markdown sections.
  </Step>

  <Step title="Save">
    Click **Save changes**. From now on, every generation and edit in this file uses your guidelines as mandatory context.
  </Step>
</Steps>

<Note>
  Guidelines apply to **future output only** — existing designs stay as they are. They are scoped to the current file and don't carry over to other files.
</Note>

## Good to know

* **Length limit** — guidelines can be up to 50,000 characters. Imported files beyond that are truncated.
* **Validation** — structural errors (unclosed YAML front matter, duplicate `##` section headings) block saving. Softer issues, like unrecognized YAML keys or colors that aren't valid hex codes, show warnings but still save.
* **Export** — use the **Copy raw file** and **Download** buttons in the modal to copy or download your `DESIGN.md`.
* **Removing guidelines** — clear the text field and save to remove the guidelines for that file.

## Flowstep updates guidelines for you

When you give a standing style instruction in a prompt — for example, "from now on, use a blue theme" — Flowstep detects it and updates your design guidelines automatically, confirming in the chat: "Updated your design guidelines to use \[style] for future generations." One-off requests like "make it blue" don't change the guidelines; they only affect that generation.

## Design guidelines over MCP

If you work through the [MCP server](/mcp/overview), the `get-design-guidelines`, `update-design-guidelines`, and `delete-design-guidelines` tools read and write the same guidelines — so your IDE workflow and the web app stay in sync. See the [Tools reference](/mcp/tools).