> For the complete documentation index, see [llms.txt](https://docs.maker.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maker.co/features/style-guide.md). # Style Guide *** ### What are Style Guides? A **Style Guide** is a reusable set of brand guidelines you build once (by uploading a logo, a palette screenshot, or simple text instructions) and then select in any new chat to have Maker: * Auto-apply your brand’s color stops, gradients, and text styles * Generate UI components that match your existing design system * Keep layouts, spacing, and imagery consistent > 🔔 Note: Uploaded screenshots or logos are used solely to extract colors, fonts, and layout cues. They are not included as assets in your generated projects. *** {% embed url="" %} ### Style Guide options From **Settings → Style guides**, click the **+ Create style guide** card. Maker gives you four ways to start: 1. **Enter your website URL** (Recommended) 2. **Import a DESIGN.md** — already have one? Upload the file or paste a hosted URL and Maker will build a style guide from it. 3. **Import from Figma** 4. **Upload your brand guidelines**
### Overview of steps for creating a new Style Guide 1. In the **left sidebar**, click **Settings**. 2. Click on the **"Style guides"** tab. 3. Click the **"+ Create style guide"** card to start a new one. 4. Choose how you'd like to create your style guide from the four options above. 5. **Name your style** (e.g. `Acme Corp`, `My Portfolio`). 6. Click **Generate**. Maker analyzes your inputs and builds a style guide with colors, fonts, spacing, corners, and sample components — this typically takes under a minute. 7. **Review & Save**: tweak any values in the editor — swap fonts, adjust a hue, rename a spacing step — then click **Save**. > 🔑 Pro Tip: To have all new projects follow this style guide, set it as your default. It will be automatically selected when you start a new project. **How it works:** **Assets → Style Guide → Projects.** * **Assets** (docs, screenshots, fonts) are inputs the AI reads. * The **Style Guide** is the structured output that the AI generates and what projects actually reference — under the hood, it's a `DESIGN.md` file. * **Projects** created with a Style Guide use its tokens consistently. *** ### Create a Style Guide with the Enter your website URL Enter your website. Maker will analyze your website’s design and create a style guide from it. Provide any additional context in the field provided. *Note: You will still need to upload the custom fonts in the assets tab once the style guide is created.* ### Create a Style Guide by importing a DESIGN.md Already have a `DESIGN.md` from another project, or one exported from Maker? Upload the file directly or paste a hosted URL, and Maker will generate a full style guide from it — colors, typography, spacing, corners, components, and guidelines all come in pre-populated. This is the fastest way to bring an existing design system into Maker or copy one guide's structure into a new one. ### Create a Style Guide with Import from Figma Maker can import your Figma designs and automatically generate a style guide. You can provide either a single frame containing your design system elements or a full webpage design. Just paste the Figma link in the field provided and include any additional context if needed. *Note: You will still need to upload the custom fonts in the assets tab once the style guide is created.* ### Create a Style Guide with the Upload Option Upload brand inputs and let AI draft the guide. **Supported inputs** * **Documents:** Markdown (.md) and PDF (≤ **5 MB** each) * **Images:** PNG/JPG (e.g., screenshots of your current site) * **Fonts:** We support these formats-**.ttf, .otf, .woff, .woff2** **Best practice**\ Upload **all three** for the highest fidelity guide: 1. Your brand guidelines (PDF/Markdown) 2. **Screenshots** of your current website/marketing 3. **Font files** your brand uses **Steps** 1. Go to **Site Settings → Style Guides → New Style Guide**. 2. Drag in your files (docs, screenshots, fonts) and click **Generate**. 3. Review the generated guide (colors, type, spacing, etc.). 4. Make tweaks in the Style Guide editor (see details in the "Understand the Style Guide Editor" section). 5. If you add more assets later, click **Regenerate** to incorporate them. > **Note:** Regenerate uses a token credit. ### Create a Style Guide from an existing project Any current project can be used to create a new style guide. This can be a project created using a Figma import or any other way you choose to create that project. **Steps:** * In the project prompt, say **“Save this project as a Style Guide,” or in the dropdown seen on the top of the editor, select Save to Style Guide and save as a new style guide or update an existing style guide.** * Fonts from Figma may come in as generic/Google references. **Upload your actual font files** to the created Style Guide under assets, and then update the typography tab in the Style Guide. If needed, regenerate. *** ### Understand the Style Guide Editor Opening a style guide drops you into an editor with a **left navigation panel**, a **center panel** for the settings you're editing, and a **live preview** on the right that updates as you type. At the top, a **Editor / Advanced** toggle lets you switch between the guided form view and the raw `DESIGN.md` source. The left navigation is split into two groups, each item showing a live count of the tokens or sections it holds: **Set up** * **Brand basics** — the guide's name and one-line description. * **Colors** — your named color tokens. * **Text styles** — your named typography tokens. * **Spacing** — your spacing scale. * **Corners** — your corner-radius scale. * **Components** — reusable UI component definitions styled by your tokens. **Write** * **Guidelines** — the prose sections that make up the written part of your `DESIGN.md`. A status indicator at the bottom of the sidebar (e.g. "Guide looks healthy — every value is named and valid") flags missing names or invalid values as you edit, so you can catch problems before saving. Use **Save** at any time to persist changes, and the **undo/redo** arrows next to it to step back and forth through your edits. **Brand basics** * **Name** — shows up in your list of style guides and in the card preview. * **Description** — a one-line summary of the brand's look and feel. This appears on the style guide's card in the gallery and in the "Style Guide" preview card in the live preview panel. **Colors** * Your brand's core colors, each with a short **name** and a **value** — either a hex code or a `{ref}` pointing to another color (e.g. `on-secondary: {colors.primary}`), so aliases stay in sync automatically. * Use **+ Add color** to add a new token, or the **×** next to a row to remove one — you're no longer limited to a fixed palette size. * The live preview's **Palette** grid shows every swatch with its name and hex value. **Text styles** * Named typography tokens (e.g. `display-lg`, `display-md`, `body-lg`, `body-md`, `nav-link`, `badge`), each with **Font family**, **Size**, **Weight**, **Line height**, and **Letter spacing**. * Click **+ Add property** on a style to add another attribute, or **+ Add style** to define a new named text style. * The **"Ag"** button on each style previews it inline; **Remove** deletes the style. * The live preview's **Type scale** section renders sample text ("The quick brown fox") for every style so you can see size and weight side by side. **Spacing** * A named scale for padding and margins (e.g. `xxs` 4px, `xs` 8px, `sm` 12px, `md` 16px, `base` 20px, `lg` 24px, `xl` 32px, `xxl` 48px, `section` 64px). * Give each step a short name and a size; use **+ Add step** to extend the scale. * The live preview's **Spacing scale** shows each step as a proportionally sized bar. **Corners** * A named scale for corner radii (e.g. `rounded.sm`, `rounded.full`), used the same way as Spacing — short name, a size or keyword, add/remove freely. * Referenced from Guidelines to enforce rules like "don't apply radii larger than `4px` to primary buttons." **Components** * Reusable component definitions (buttons, announcement bars, cards, etc.) styled by your other tokens. * Each component appears in the live preview so you can see it rendered with your current colors, type, spacing, and corners applied. **Guidelines** Written notes on how to use the brand — these become the prose sections of your `DESIGN.md`. Maker seeds a default set of sections and you can add your own: * **Overview** — who the brand is, audience, tone. * **Colors**, **Typography**, **Layout**, **Elevation & Depth**, **Shapes**, **Components** — how each design decision should be applied, often referencing tokens directly (e.g. `{colors.secondary}`). * **Do's and Don'ts** — quick rules of thumb. * **Custom sections** — click **+ Add section** to write your own (e.g. "Responsive Behavior," "Known Gaps") with a title and free-form text; use **Remove** to delete one. **Advanced mode** Switching to **Advanced** shows the guide's raw `DESIGN.md` as YAML — front matter (`version`, `name`, `description`), then `colors`, `typography`, and the rest of the tokens — for direct editing. A **Validate** button checks the YAML before you save, and the live preview stays in sync on the right. This is the fastest path if you're comfortable editing structured text directly or pasting in values from another system. **Preview behavior** * The preview updates reactively as you edit values in either Editor or Advanced mode. * **Saving the Style Guide does not retro-apply to existing projects.** It's for validation and for **future** projects/remixes. *** ### Using a Style Guide in Projects * From the **Home** screen, select a Style Guide in the dropdown, then **create a project**. Maker will use its tokens. * As you work, Maker can surface a **“Save to Style Guide”** suggestion (light‑bulb button). Click it to update the linked guide—or say in chat: **“Update the linked Style Guide with these changes.”** > **Important:** Changing a Style Guide **does not** change projects you previosly published. To apply updates, **Remix** or create a new project with the guide. 🔑 Pro Tip: If you didn’t set a default Style Guide, Maker will apply a neutral one. You can switch to your preferred Style Guide at any time—even mid-project—with our [remix feature](/features/project-remix.md). *** ### Fonts * Upload the actual **.ttf/.otf/.woff/.woff2** files in **Assets** even if they are mentioned in the PDF you uploaded in the assets. * After uploading fonts, either: * Select those families in **Typography**, or * Update the auto‑generated instruction file to reference the correct families and **Regenerate**. * **Cross‑guide availability:** AI can use any custom font you’ve uploaded in **any** of your Style Guides—just ask it to use the font **by name** in a project. *** ### Logos * Host your logo (PNG/SVG) publicly and paste its **URL** into **Brand Context** with a clear instruction, e.g., *“Use this logo in headers: https\://…/logo.svg; use the white variant on dark backgrounds.”* * **Do not** rely on uploading a logo only as an Asset: project‑creation AI reads the **generated Style Guide**, not raw Asset files. * PDFs can describe logo usage (safe‑area, on dark/light), but AI cannot extract the logo file from the PDF. *** ### Troubleshooting **Fonts not showing / wrong family** * Upload the actual font files → pick them in **Typography** → Regenerate if needed. Ensure names match the family you reference. **Colors look “off”** * Screenshots can be approximate. Upload a palette doc or list exact hex values. Edit values directly in Colors. **My updates didn’t change existing pages** * Style Guide edits don’t retro‑apply. **Remix** or create a new project using the updated guide. **Logo doesn’t appear** * Add a **public URL** and instruction in **Brand Context**. (Dedicated logo uploads are coming.) **I need a color, spacing, or corner token that isn't there** * Click **+ Add color** / **+ Add step** in the relevant tab to add it directly — no need to regenerate. Reserve **Regenerate** for when you've uploaded new source assets. **My DESIGN.md won't save** * Switch to **Advanced**, click **Validate** to surface the YAML error, fix it, and save again. *** ### Quick Prompt Recipes * **Save from project:** *“Save this project as a Style Guide.”* * **Update from project:** *“Update the linked Style Guide with the changes on this page.”* * **Use Google font:** *“Use Inter from Google Fonts for Body text.”* * **Use custom font:** *“Use ‘Acme Sans’ for H1/H2. It’s uploaded in my Style Guides.”* * **Enforce a rule:** *“Add to Brand Checklist: Avoid oversized hero banners.* *** ### Managing Styles Guides * **Edit**: click on the style guide and make the necessary edits * **Delete**: to remove old or unused styles to keep your list tidy, hover over a style card and select the delete icon *** ### Best Practices * ``` #### Best Practices ``` ``` * **Share as much content and context as you can:** The richer your assets, the stronger the Style Guide. You can always add, refine, or remove assets and regenerate the Style Guide. * **Keep it up-to-date:** regenerate after any brand palette or font change. * **Don't over-write your Guidelines:** past a certain point, extra length doesn't improve output — the AI won't act on padding. Keep Guidelines focused on brand-level rules (colors, type, spacing, tone); save component-level precision for a Template. > 🔑 Pro Tip: Style Guides and Templates serve different jobs — a Style Guide keeps a project on-brand (colors, type, spacing, tone), while a Template locks in precise component-level layout. Use both together for the tightest results, but don't try to make one do the other's job. ``` [Learn more about Custom Fonts here](/tips-and-tricks/custom-fonts.md) [See Style Guide FAQs here ](/features/style-guide/style-guide-faqs.md) *** --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.maker.co/features/style-guide.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.