Bricolage Grotesque
Hanken Grotesk for body text
Neither needs an account. Use them on a brand you already have, or on one you are about to launch.
Pick your colours or pull them from your logo, choose a font and switch between light and dark. Your brand appears on real buttons, a hero, an FAQ and a form, with every contrast check listed beside it and its ratio. When it passes, export the brand file for your developer.
Paste a page's HTML or upload the file. It is checked against 41 visual rules, from hue-shifting gradients to logo walls with no real customers behind them. You get a score, the evidence for every rule that fired and how to fix it.
Start with the outcome you need. The developer detail is one level down when someone needs it.
Start from a recipe for a campaign, an offer, an event or a local service. Swap in your words and photos and the layout holds together on a phone and a wide screen.
See the page recipesYour colours, fonts and button style live in one small brand file. Every page and every developer works from it, so the tenth page matches the first.
Make the brand fileVisitors have learned what generated sites look like. The score finds those tells on your page and the guide shows each fix side by side.
Read the guideClear calls to action, honest FAQs and short enquiry forms with separate consent come with the free sections. BrandCloud Pro adds a guided copywriting workflow for headlines, offers and guarantees.
What Pro addsFour complete pages for made-up businesses, each in its own brand. Open one to see it full size, then make it yours.
A six-week return-to-running programme with a start date, a price and one enquiry form.
One product, a wedding cake tasting box, with what is in it, how it works and the terms in plain words.
A one-evening market with the date, the running order, how to get there and how to book a stall.
An electrician covering a handful of towns: the jobs they do, how a visit works and a quote form.
The same four steps whether you are setting up a new brand or tidying an old one.
Upload a logo to pull its colours, or choose them by hand. Text colours are adjusted until they pass WCAG 2.2 AA.
Buttons, a hero, steps, an FAQ, a call to action and form fields change as you change the brand.
Download the brand file and its CSS. A developer drops them into the kit and every component follows.
Paste the finished page into the AI-look score and fix what it finds, with the evidence in front of you.
Everything on the left is open source and stays that way. BrandCloud Pro is a one-off licence that opens with the first public release.
Yes. BrandCloud, the brand builder and the AI-look score are open source under the MIT licence, for your own sites and for client work. BrandCloud Pro is a separate, optional licence that opens with the first public release.
Not for the two tools: they run in your browser. Turning a brand into a live site needs someone who works with Astro or React, or you can have M1 Studio build it for you.
Each brand sets its own colours, fonts and default button, and the sections come in several layouts. The four page recipes on this site use four different brands, so you can see the range for yourself.
41 visual rules about colour, layout, type, components, imagery, motion and fake proof. 39 of them run in your browser. The other 2 move the pointer or scroll the page, so they run in the command-line version.
No. It is drawn in a sandboxed frame inside your browser with its scripts switched off, and the checks run on your computer. Nothing is uploaded.
M1 Studio designs and builds sites with this kit, from the brand file to the finished pages.