Mini Ramesh, the mascot sheet.

One character drawn in code, with four views and a set of poses. Every placement on the site picks a pose by name, so new poses show up everywhere at once. It's linked from the Design System page.

Turnaround

Front, three-quarter, side, back, and a mirrored three-quarter (data-flip).

Full-figure poses

Add data-full for the whole figure. Each pose has its own small loop (waving, steam, page turns, walking).

Waist-up crops

Without data-full you get a waist-up crop, for page heroes, plan cards and the footer.

Use it

<div class="mascot" data-mascot="thumbs" data-full></div>
<div class="mascot" data-mascot="present" data-full data-flip></div>

// change pose later
Mascot.set(el, "cheer");