Mascot Style Guide

This page shows every mascot admonition style for reference. Use it to check that Cody's seven poses render correctly and stay readable against their admonition background colors.

Cody's full design rules live in the character sheet; the prompts for redrawing the poses live in image prompts.

A Note from Cody

This is the neutral style. Use it for side notes, forward links, and anything that does not need a particular emotional tone.

Welcome!

This is the welcome style, used once at the opening of a chapter or lab. One step at a time!

Key Insight

This is the thinking style, used for key concepts and for predict-before-you-run questions. What do you think will happen?

Cody's Tip

This is the tip style, used for a hint that helps without giving away the answer.

Watch Out!

This is the warning style, used for the mistake a lab is designed to surface. Cody looks concerned here, never angry.

Keep Going!

This is the encouraging style, used for difficult steps and for the collapsed "Stuck?" hint. Being stuck is a normal part of programming.

You Did It!

This is the celebration style, used once at the end of a chapter or lab. Its background is deliberately dark so the bright confetti stays visible.

Pose Reference

Every pose at its raw size, on the page background:

neutral.png

welcome.png

thinking.png

tip.png

warning.png

encouraging.png

celebration.png

Usage

Place the image in the admonition body, never in the title bar:

!!! mascot-tip "Cody's Tip"
    ![Cody giving a tip](../../img/mascot/tip.png){ class="mascot-admonition-img" }
    Body text goes here, after the image.

The image path is relative to the rendered page URL, not the Markdown file. A chapter at docs/chapters/05-loops-repetition/index.md renders at chapters/05-loops-repetition/, so it also uses ../../img/mascot/.

Use Cody no more than five or six times in a chapter, and never place two mascot admonitions back to back.