Meet Max: My Style Guide Got a Superhero (and an AI Sidekick)

When I saw this week's challenge was style guides, my brain immediately did the thing it always does: "cool, but what if it also did something else?" So instead of just building a style guide, I gave it a mascot, an AI Image Generator with a whole prompt library, and a home to live in — the Maximum Health Brand Hub.

Maximum Health is a totally made-up healthcare brand I invented for this challenge. And Max — part superhero, part scrub-wearing best friend — is its mascot, guide, and unofficial hype man. Signature catchphrase: "Let's go to Max effort!"  (I'm not sorry.)

What's inside

The Brand Hub is built as a browsable site with four stops:

• Home — the welcome mat, with quick links to everything else
• Style Guide — logo usage, color palette, typography, voice & tone, and photography guidelines
• AI Image Generator — a prompt library organized by category (brand photography, icons & illustration, social assets, do's & don'ts), plus a little "generate" demo
• Meet Max — the mascot's bio, his character-sheet prompt, and four pose variations you can generate on the spot

How it's actually built

Here's the fun part: this whole thing lives inside Rise 360, but not the way you'd expect. Instead of building it out of native blocks (Statement, Tabs, Accordion, and so on), the entire Brand Hub is custom HTML, CSS, and JavaScript dropped into a single Code Block. So the "course" itself is deceptively simple — really just one lesson holding one Code Block — while everything you see and click is running as its own self-contained mini web app inside it.

⚠️ Quick heads-up: this is a mockup

Before you click around — this is a prototype, not a live product. A few things are just for show:

• The AI Image Generator doesn't call a real model — typing a prompt and hitting Generate cycles through pre-set sample tiles so you can see the intended UX.
• The search bar is decorative. It looks ready to search; it is not, in fact, ready to search.
• There's no real backend — no database, no accounts, nothing saved between visits.

✅ What actually works

That said, more of it is real than you'd expect for a mockup:

• Full navigation — the top nav genuinely switches between all four pages, no reload, with an active-state indicator
• Working tabs — the prompt library's category tabs (Brand Imagery / Icons & Illustration / Social & Marketing / Do's & Don'ts) actually switch content
• Copy-to-clipboard — every single prompt card has a real "Copy prompt" button that copies straight to your clipboard, so the library is genuinely usable
• The "Generate" demo on Meet Max — this one's my favorite. Click Generate on any of Max's pose prompts and it runs a fake loading sequence ("Sketching Max's pose…", "Rendering in 3D…") before revealing the actual AI-generated image. It feels like it's generating live, even though the images are pre-made.
• Responsive — it holds up on mobile, phone-width nav included

Why I built it this way

Honestly? I wanted the style guide to practice what it preaches. A style guide that just tells you the brand voice is fine — a style guide that demonstrates it, with a mascot who talks like the brand and a prompt library you can actually copy from, felt more fun to build and (hopefully) more fun to look at.

Try it yourself

Maximum Brand Hub Mock-up

Would love feedback — especially on the color palette and whether "Let's go to Max effort" is charming or unhinged. Both are valid answers. 🤣