@awesomate/hosting-mcp/skill/awesomate-app-builder/references/design-system.md

Awesomate MCP server — lets Claude manage your Awesomate WordPress hosting, plan, limits, n8n automations, and build Node/static apps + databases

# The brand design system: find it, connect it, or make one

A brand design system keeps a business's colours, type, components and layout rules in one place,
so everything built for it looks like the same business. Claude Design holds them (claude.ai/design,
Settings, Design systems). It checks its own work against the design system, and `/design-sync` in
Claude Code keeps a project's code and the design system in step. Asking for the design system
before building is strongly recommended. It is never a reason to refuse to build.

## Before you build anything people will see

1. **Look it up.** `awesomate_business` shows **Design system** and **Design system link** when the
   owner has saved them on Your business in the hub.
2. **It's in Claude Design.** Connect this project to it with `/design-sync`. The owner may need to
   run `/design-login` once first. Build with its tokens and components, not with new ones.
3. **Nothing is saved.** Ask once: "Do you have a brand design system, in Claude Design, Figma, or
   your website's code?" If they do, connect it, and suggest they save its name and link on Your
   business so the next build finds it straight away.
4. **They have none.** Offer to make one. `awesomate_design_system_package` writes a starter design
   system into the project from their confirmed details: `tokens.css`, preview cards, the fonts and
   the logo inside the folder, and a README of what is still to decide. Then `/design-sync` puts it
   in Claude Design as their design system. Tell them to save its name and link on Your business,
   and to work through the README's "still to decide" list with you or in Claude Design.
5. **They'd rather not now.** Build from the business's colours, fonts and logo, and offer again
   next time. Never make the build wait for a design system.

Follow Anthropic's `/design-sync` for how the sync itself works. Don't describe it from memory.

## What a good brand design system has

Check the system you connect or create against these eight points, and say in one line what is
missing:

1. **One idea**, rooted in the business's place or story: its town, its building, its trade, its people.
2. **Type first.** One expressive face for headings and one neutral face for text. Generic system
   fonts are not a display face.
3. **Colour with a rule.** A tight trio (a near-black, one brand colour, a near-white), or small
   palettes that never mix. Large areas use off-black and off-white, not pure black and white.
4. **The name at hero scale.** The wordmark large, over an image or a flat colour.
5. **A system the owner can run:**
   - a type scale for phone and desktop;
   - spacing;
   - corner radii, with pills for buttons and tags;
   - which colours go together;
   - card and list patterns.
6. **One piece of motion** that expresses the idea, not scattered effects.
7. **Voice.** Two or three lines on how it sounds, and real copy, never placeholder text.
8. **Accessible.** AA contrast for text, and buttons and links at least 44 px to tap.

## Tokens to start from

When you make one from the business's details, name the variables so a person can read them:

```css
:root {
  --brand-ink: #1a1a1a;      /* text and dark surfaces */
  --brand-paper: #f7f5f0;    /* page background */
  --brand-accent: #e9484d;   /* the one brand colour: buttons, links, highlights */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
  --radius-card: 12px;
  --radius-control: 10px;
  --radius-pill: 999px;
  --space: 8px;              /* multiply for layout: 2x, 3x, 4x */
}
```

Replace every value with the business's own: its colours from **Main colour** and **Second
colour**, its font from **Font**, and its logo from **Logo**. Check the accent against the ink and
paper for AA contrast before using it for text.