Brand Board Generator
Create a mini styleguide board with colors, fonts and logo. Export as PNG or copy the CSS variables.
Your inputs are processed in your browser and are not transmitted to our servers. Note: third-party resources (e.g. advertising and analytics from Google/Cloudflare) and an optional PayPal donation link may transfer data when loading or when clicked. Browser extensions or plugins may be able to read content that is visible in the input fields.
The result will appear here …
Create a brand board and mini styleguide
Enter brand name, claim, three colors and two to three fonts and optionally load a logo. From that a compact styleguide board appears: color chips with hex values, font specimens and a logo area. The board fits on one slide and works for client meetings, freelancer onboarding or as a quick reference for your own work.
You can use the export twice: as a PNG for presentations and as a CSS variables block to copy. The variables drop straight into your stylesheet, so website and print material share the same values. Your entries stay local in the browser.
Frequently asked questions
What belongs on a brand board?
The essentials: logo, primary, secondary and accent colors with hex values, the main fonts and the claim. Extensions such as image style or tone of voice often follow as separate documents, the board stays deliberately compact.
How do I use the copied CSS variables?
Paste the block into the :root section of your stylesheet. After that you reach the colors everywhere with var(--brand-primary) and the other names. Change one color and it applies across the whole website instantly.
Can I hand the board to clients?
Yes, as a PNG it fits into emails and presentations. For handover to developers add the CSS block, then implementation has colors and fonts without follow-up questions.