Style Guide

Give Maker “style guide” to keep your colors, fonts and imagery on-brand—across every project.

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.

Style Guide options

From Settings → Style guides, click the + Create style guide card. Maker gives you four ways to start:

Enter your website URL (Recommended)
Import a DESIGN.md — already have one? Upload the file or paste a hosted URL and Maker will build a style guide from it.
Import from Figma
Upload your brand guidelines

Overview of steps for creating a new Style Guide

In the left sidebar, click Settings.
Click on the "Style guides" tab.
Click the "+ Create style guide" card to start a new one.
Choose how you'd like to create your style guide from the four options above.
Name your style (e.g. Acme Corp, My Portfolio).
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.
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:

Your brand guidelines (PDF/Markdown)
Screenshots of your current website/marketing
Font files your brand uses

Steps

Go to Site Settings → Style Guides → New Style Guide.
Drag in your files (docs, screenshots, fonts) and click Generate.
Review the generated guide (colors, type, spacing, etc.).
Make tweaks in the Style Guide editor (see details in the "Understand the Style Guide Editor" section).
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.

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

See Style Guide FAQs here

PreviousSelect to edit NextStyle Guide FAQs

Last updated 29 days ago

Was this helpful?