Bloom, the design system Grok Bot
Design system Grok Bot template. Builds or audits your tokens: colour ramps with real contrast, one type scale, one spacing step, and the component conventions that hold them together.
About this design Grok Bot template
Bloom is the design system Grok Bot for the point where a product has grown a system by accident. Nine blues, four spacing scales, a type ramp nobody decided. It builds the tokens, or audits the ones you have, and returns the code rather than a document about the code.
What it actually does: a colour ramp with contrast checked at every step against the grounds it will really sit on, one type scale with a stated ratio, one spacing step, radius and elevation decided once, and the component conventions that keep them applied. Then it finds where the codebase has drifted from its own system, which is usually the more useful half, and gives you the replacements.
Use Bloom at the point where the system exists but nobody decided it. Lens is the Grok Bot for judging a single screen, Mon for building new screens once the tokens are settled, and A11y for the moment contrast and focus have to pass an audit rather than a taste test. Bloom is also the cheapest of the four to run early: a token set decided in week one saves the rewrite that a year of accumulated hex codes eventually forces.
Mentioned above: Mon Design Bot, Lens UI Review Bot, A11y Fix Bot. Or see every Design Grok Bot.
What to ask it
- Build a token set for a dark first product with one accent.
- Audit my CSS variables and tell me where the codebase drifted.
- My greys are inconsistent. Give me one ramp and the replacements.
- Set a type scale for a dense dashboard product.
- Which of my colour pairs fail contrast, and what should they be?
How to install this Grok Bot template
- Copy the template. You get the name, the description and the instructions.
- In Grok Bot, choose New, then Create new agent.
- Open Bot actions, then Edit Profile, and paste the name and the description.
- Paste the instructions.
- Switch on Web browsing. It needs no routines.
Or skip all five: add Bloom Design System Bot to Grok Bot in one click, using Grok Bot's own share as template link.
Questions about this Grok Bot
Does this design system Grok Bot output tokens as code?
Yes, in the format your project uses: CSS custom properties, a Tailwind config or a token file, ready to commit. Not a picture of a palette and not a document describing one.
Will it check contrast properly?
It gives real computed ratios for every pair it flags, with the threshold each one fails, and when it proposes a new value it keeps the hue and moves the lightness so the design intention survives.
Can it audit an existing codebase?
That is most of what it does. It finds the values that are used once, the near duplicates, and the places a raw hex is used where a token exists.
How is this different from a design system template?
A template gives you somebody else's decisions. Bloom makes yours, then tells you where your code disagrees with them.
Design templates for your tool
Bloom Design System Bot works alongside the vibe coding tool you already build in, and the same licence covers the design templates for it: Lovable templates, Bolt templates, Replit templates, Claude Code templates, ChatGPT Codex templates, Cursor templates, Windsurf templates, Framer templates, v0 templates and Cline templates.
Included in the BrowserMoon licence, alongside every design template and all 51 Grok Bot templates. One licence, unlimited projects, including work you sell.
More Design Grok Bot templates
View allMon, the design Grok Bot
Design and build any screen
Lens, the UI review Grok Bot
Reviews a screen like a senior designer
North, the brand Grok Bot
Name, voice, wordmark and palette
Board, the dashboard Grok Bot
The operating view, with every state
Browse Grok Bot templates