# Copy of 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 Maker provides you with four options on how you can create a new style guide: 1. Upload your brand guidelines 2. Enter your website URL (Coming soon) 3. Import from Figma (Coming soon) 4. Create from an existing project ### Overview of steps for creating a new Style Guide 1. In the **left sidebar**, click **Settings**. 2. Click on the "**Style Guide**" Tab. 3. Click the big **“+”** card to start a new style. 4. Choose how you’d like to create your style guide from the available options. 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, and sample components. 7. **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. 1. **Upload inputs** * **Screenshot**: drag in a palette, logo slide, fonts or UI sample * **Instructions**: bullet points like ``` Primary: #1A73E8; Secondary: #FBBC05 Headings: Montserrat; Body: Inter ``` **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: 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 editor (see Section 2). 5. 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 1. In any **New Project**, click the **Style Guide** dropdown under the prompt. 2. Select your saved style (e.g. `Acme Corp`). 3. 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](/features/project-remix.md). *** ### 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](/tips-and-tricks/custom-fonts.md) [See Style Guide FAQs here ](/features/style-guide/style-guide-faqs.md) *** --- # Agent Instructions: 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: ``` GET https://docs.maker.co/features/copy-of-style-guide.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.