Two complete, standalone brand guides — the real TheVibeFounder system, end to end: logo & recede rules, the full color system with usage ratios, the type scale, components, voice, applications, and the asset library. Each file is fully self-contained — download it, open it in any browser, no setup. Use it as the gold-standard example when you build your own.
Open your agent (Claude Code, or any agent) in that folder.
Paste the prompt below with your brand details, then open your filled template in the browser.
The exercise prompt
Use the files in this folder as your framework. Build me a complete brand guide for my brand: [ name ], which is [ what it does, for whom ], and should feel [ the vibe in a few words ].
Read brand-guide-system.md, then fill in template.html end to end:
- Set the CSS variables in :root to a real 5-6 color palette with ONE signal color, and two type families, so the page actually looks like my brand.
- Define the logo recede rule, the type scale + minimum size floor, the 8pt grid + radius.
- Name 3 core components, write the voice (with do/don'ts and one example line), and complete the accessibility + asset-checklist sections.
Replace every [[ placeholder ]]. Explain each choice in one line as you go, like I've never made a brand guide before.
A free kit from TheVibeFounder. Use it for anything — no attribution required.