Copy of Style Guide
Give Maker an instant “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:
Upload your brand guidelines
Enter your website URL (Coming soon)
Import from Figma (Coming soon)
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.
Maker Style Guides — Create, Edit & Apply
A Style Guide in Maker is your brand’s single source of truth for design tokens (colors, type, spacing) and written rules (tone, layout standards). AI uses it to keep every page on‑brand.
Upload inputs
Screenshot: drag in a palette, logo slide, fonts or UI sample
Instructions: bullet points like
At a glance
Where it lives: Site Settings → Style Guides (moved from the left sidebar).
How it works: Assets → Style Guide → Projects.
Assets (docs, screenshots, fonts) are inputs the AI reads.
The Style Guide is the structured output the AI generates and what projects actually reference.
Projects created with a Style Guide use its tokens consistently.
1) Create a Style Guide
You can create a guide from uploads (recommended) or from an existing project.
A. From uploads (recommended)
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/ads)
Fonts: Standard font files (e.g., .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 editor (see Section 2).
If you add more assets later, click Regenerate to incorporate them.
Note: Regenerate uses a token credit; small tweaks in the editor are free.
B. From an existing project
There are two common starting points:
Import from Figma
Import your Figma file → in the project chat, say “Save this project as a Style Guide.”
Fonts from Figma may come in as generic/Google references. Upload your actual font files to the created Style Guide and then update the typography (see Section 3). If needed, regenerate.
Clone a website (coming soon to users)
Maker’s internal clone workflow extracts font URLs and tokens accurately. Once exposed, you’ll be able to clone a page and save it as a Style Guide. Until then, you may use third‑party Figma plugins to approximate a site → import to Maker → save as a Style Guide (expect to upload/match fonts manually).
2) Understand the Editor
The Style Guide editor has two tabs: Style Guide (what AI/project uses) and Assets (your uploads). 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.
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. Grid options are not yet exposed.
Miscellaneous Elements
Technical design tokens (e.g., buttons, links) that inform AI styling across components.
Preview Behavior
The preview updates reactively as you edit tokens.
Saving the Style Guide does not retro‑apply to existing projects. It’s for validation and for future projects/remixes.
3) Using a Style Guide in Projects
From the Home screen, select a Style Guide in the dropdown, then create a project. AI 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.”
When a guide is saved from chat, Maker shows a confirmation card. A permanent banner indicating the guide used is planned.
Important: Changing a Style Guide does not change projects you already shipped. To apply updates, Remix or create a new project with the guide.
4) Fonts — What to Know
PDFs rarely include full font binaries. Even if a PDF mentions your fonts, upload the actual .ttf/.otf/.woff/.woff2 files in 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.
Avoid relying on local system fonts in previews—AI cannot read your computer’s installed fonts.
5) Logos — Current Workaround
A first‑class Logos section is planned.
For now, 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.
6) 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.
7) 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.”
9) Known Limitations & What’s Next
Logos: first‑class logo upload & variants (light/dark) planned.
Website clone → Style Guide: planned for users.
Color management: add/reorder colors in UI.
Grid tokens in the editor.
Project banner showing which guide a project uses.
10) Change Log
Sep 2025: Initial public documentation. Style Guides moved to Site Settings.
Need help?
If you’re stuck, share:
A link to your Style Guide
The assets you uploaded
The project you’re trying to apply it to
We’ll help diagnose fonts, color palettes, and checklists quickly.
(keep)Applying a Style Guide
In any New Project, click the Style Guide dropdown under the prompt.
Select your saved style (e.g.
Acme Corp).All subsequent UI and layout suggestions will adhere to that style.
🔑 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.
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
Start simple: upload just your logo & primary color, then refine later
Keep it up-to-date: regenerate after any brand palette or font change
Learn more about Custom Fonts here
Last updated
Was this helpful?