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
Maker provides you with four options on how you can create a new style guide:
Enter your website URL (Recommended)
Import from Figma
Upload your brand guidelines
Create from an existing project
Overview of steps for creating a new Style Guide
In the left sidebar, click Settings.
Click on the "Style Guide" Tab.
Click the big “+” card to start a new style.
Choose how you’d like to create your style guide from the available options.
Name your style (e.g.
Acme Corp,My Portfolio).Click Generate. Maker analyzes your inputs and builds a style guide with colors, fonts, and sample components.
Review & Save: Tweak any values—swap fonts, adjust a hue—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.
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 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
The Style Guide editor has two tabs: Style Guide (what AI/project uses) and Assets (your uploads used as a reference to generate the Style Guide). Edit the guide directly—these values drive projects.
Brand Overview
Brand context: who you are, target audience, tone, design philosophy.
Layout Checklist & Brand Checklist: add specific rules (e.g., “Avoid oversized hero banners,” “Use rounded buttons”). Maker validates these during generation/edits to improve adherence.
Colors
Organized in palettes: Primary, Secondary, Tertiary, Accent, Neutral.
You can edit color values (e.g., hex). Currently, you can’t re‑order or add new swatches in the UI. To add more, update assets (e.g., upload a palette doc) or the instruction file, and Regenerate the Style Guide.
A live Preview shows changes in context.
Typography
AI proposes a semantic set (e.g., Hero Heading, H1–H6, Body, Caption).
Edit font family/weight/size/line‑height per style.
Google Fonts: In chat or instructions you can say, “Use Inter from Google Fonts.”
Custom Fonts: Upload .ttf/.otf/.woff/.woff2 in Assets, then select those families in Typography. If you imported from Figma and see broken font refs, upload your fonts, update the families, and regenerate if needed.
Spacing Scale
A scale (e.g., 2, 4, 8, 12, 16 …) AI uses consistently across layouts.
You can edit values.
Miscellaneous Elements
Additional design guidelines (e.g., buttons, links) that inform AI styling across components.
Preview Behavior
The preview updates reactively as you edit values.
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.)
Can’t add more color swatches
Add them via instruction/asset (palette doc) and click Regenerate.
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
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
Learn more about Custom Fonts here
Last updated
Was this helpful?