Pixel Mascot Style Guide
This page shows all seven of Pixel's admonition styles for reference and testing.
Use it to verify that images load, colors look right, and text wraps cleanly
around each pose. Image paths use ../../img/mascot/ because this page renders
two directories deep (learning-graph/mascot-test/index.html).
Just a Note from Pixel
Hi there! I'm Pixel — your guide through the Moving Rainbow textbook.
This is my neutral style, used for general sidebars and introductions
where no particular emotion is needed. Think of it as my "just hanging out" look.
Welcome!
Welcome, coder! I'm so excited you're here. Every chapter starts with
a welcome box like this one where I'll tell you what we're about to learn
and why it's going to be awesome. Let's light this up!
Key Insight
This is my thinking style — used when there's an important idea worth
pausing on. Notice how my rainbow ring glows a little brighter when I'm
concentrating? That's because thinking takes all the watts.
Pixel's Tip
This is my tip style — used when I have a helpful hint that will save
you time or make your code cleaner. See that sparkle near my hand?
That means the tip is extra good. (They're all extra good, I promise.)
Watch Out!
This is my warning style — used for common mistakes that beginners
run into. My hands are up, but I'm smiling because everyone makes these
mistakes! The important thing is now you'll know what to look for.
You Can Do This!
This is my encouraging style — used when the going gets a little tough.
Thumbs up from me means I genuinely believe in you. Every great coder
got stuck on exactly what you're working on right now. Keep going!
Great Work!
This is my celebration style — used at the end of chapters and whenever
something truly excellent happens. My rainbow ring is blazing at full power
right now, and that's exactly how proud I am of you!
Image Border Test
Use the section below to check for excess transparent padding — if Pixel looks too small inside the boxes, run the trim script on the affected PNG files.
| Pose | Preview |
|---|---|
| neutral | |
| welcome | |
| thinking | |
| tip | |
| warning | |
| encouraging | |
| celebration | |
If a pose image is missing (broken image icon), it hasn't been generated yet.
Use the prompts in ../../img/mascot/mascot-image-prompts.md
to generate it, then save it to docs/img/mascot/ with the correct filename.