# Speed Styles mascot specifications

## Shared construction

Use the supplied cinematic 3D characters as the identity references. Fur remains tactile and detailed, with soft neutral studio lighting in specification artwork. Both characters have enlarged heads, compact torsos and short limbs. Match the approved body sheets rather than the adult proportions in the original references. Hats are excluded when comparing head size.

Deliverables are transparent RGBA PNG sheets with clear space between cutouts, no scenery, background, ground plane, labels or baked checkerboard. Keep any vehicle, animal, furniture or messaging prop requested in the pose. Scale uniformly; do not stretch or squash. Preserve fur edges and alpha on export.

The mascot costumes are an exception to the system's single-accent imagery rule: Speed keeps the reference red and yellow racing details; Sloth keeps gold and cream historical details. Place mascots on brand surfaces without recoloring their identity.

## Speed

Golden cheetah with solid black spots, dark tear lines, cream muzzle and amber eyes. Preserve rounded ears and spotted tail. Black racing suit with yellow stripes, red trim, white S chest badge, gloves and racing sneakers.

**Signature sunglasses (always on).** Speed always wears his neon red sunglasses, in every view, pose, scene and expression study. There are no bare-face studies.

- Frames: angular wraparound, glowing neon red (#FF1A1A emissive core, soft red bloom around the frame).
- Lenses: dark, glossy, smoke black. Never plain matte black.
- Shimmer glint: always VERTICAL lines. Each lens carries two crisp, parallel, straight up-and-down white glint lines (one bold, one thin). Never diagonal streaks, never stars or sparkles. In flat print or embroidery, use two vertical white bars per lens.
- Emotion: because the eyes stay hidden, emotion reads through brows above the frames, ear posture and mouth. Exaggerate those.
- Rear views show the temple arms and strap over the ears.
- The sunglasses are the only red in the UI imagery system (with the logo mark).

- Neutral: front, back, left side and three-quarter head closeups, sunglasses on.
- Outfit: full body front, back, left side and three-quarter turnarounds with enlarged head, sunglasses on.
- Expressions: surprised, happy, smug, mad, sad. Each has front, back, side and three-quarter views; 20 heads total, sunglasses on. Rear views show the back of the head, ear posture and the sunglasses strap, with no visible face.
- Poses: driving an open-wheel racecar; arms crossed; typing on laptop at futuristic desk; running; jumping.

## Sloth

Brown sloth with cream face, dark eye patches, small dark nose and long curved claws. Black historical coat with gold trim and brass buttons, cream waistcoat, ruffled cravat, cream breeches, dark boots and black/gold bicorne with cream plume. Bare heads for facial studies; hat included in the full outfit and action poses.

- Neutral: front, back, left side and three-quarter head closeups.
- Outfit: full body front, back, left side and three-quarter turnarounds. Match Speed's enlarged-head proportions, excluding the hat.
- Expressions: surprised, happy, smug, mad, sad. Each has front, back, side and three-quarter views; 20 heads total. Rear views preserve the silhouette without displaying a face.
- Poses: riding a donkey; writing with feather quill on parchment scroll at an 1800s wooden desk; sitting on an ornate 1800s throne; sending a message with a carrier pigeon.

## Site usage

**Speed is the primary asset.** Every page hero uses a Speed scene, and each content section that needs an image uses a Speed pose that matches its topic. Launch moments, heroes and final calls to action show him in the racecar.

**Sloth is the contrast.** He appears only in "old way vs new way" comparisons, opposite a Speed pose, doing things slowly: meetings by carrier pigeon, paper files on a donkey, redlines by candlelight, waiting on an hourglass. Never as a hero and never alone.

**Crops never cut the face.** Every scene has a recorded focal point on Speed's face (`FOCUS` in `build.py`). The hero shader crops around it, so at any viewport the full head stays in frame and clear of the nav. Card crops use `object-position` aimed at the face.

**Headline frost.** Wherever a liquid metal headline sits over a scene or the ripple, the shader frosts (blurs and darkens) the background behind the letters so the chrome stays readable. Cards with 3D icons or mascot scenes use frosted glass, and their titles render as clean silver.

**Header loops.** The home hero and the closing call-to-action section play seamless 5 second loops of Speed in the racecar (`img/mascots/loops/`), generated with Kling 3.0 using the scene as both the first and last frame. The still scene is the poster and the reduced-motion fallback.

**Scenes vs cutouts.**

- Scenes are cinematic 3:2 frames on pure black #000 that fade to black at the edges. They are lit only by yellow light trails, and red appears only on Speed's costume and sunglasses. The left third stays dark for headline text. On the site they load as the hero shader background (`data-img`), so the liquid headline renders over them.
- Cutouts are transparent 1:1 PNGs with a soft yellow rim light. They sit on a `.stage` surface (theme surface plus a soft yellow glow), so they work on graphite and on black.

| Page | Hero scene | Section poses | Sloth contrast |
|---|---|---|---|
| Home | `scenes/hero-car.png` | arms-crossed (value); audit, encode, connect, ship (pit stop); marketing, product, sales, leadership (teams); ship (versus) | sloth-donkey |
| AI Design Systems | `scenes/desk.png` | connect (versus) | sloth-pigeon |
| Code Canvas | `scenes/code.png` | product (versus) | sloth-quill |
| Brand Agency | `scenes/paint.png` | encode (versus) | sloth-hourglass |
| About | `scenes/pit.png` | leadership (third crew member) | none |
| Design system | `scenes/hero-car.png` | full library | full library |
| Every final call to action | `scenes/launch.png` | none | none |

## File map

All artwork is in `img/mascots/`. Each character has `-model.png`, `-expressions.png` and `-poses.png`. Site scenes are in `img/mascots/scenes/` and section cutouts in `img/mascots/poses/` (Sloth files are prefixed `sloth-`). The Speed sheets were re-rendered with the always-on sunglasses rule and then edited to the vertical glint rule; earlier versions are archived in `work/mascots-v1/` (no glasses in studies) and `work/mascots-v2-diagonal-glint/`. The design-system page includes download links, angle order and expression row labels outside the artwork. Model sheet top row: heads; bottom row: full body. Expressions: five rows (surprised, happy, smug, mad, sad), four columns (front, back, side, three-quarter).

Generation uses the built-in imagegen tool through `codex exec`. The original prompt set is in `prompts.json`; the sunglasses, scene and pose prompts are in `work/mascots-v2/job-*.txt`, and the vertical glint edits and brand application mockups are in `work/mascots-v3/job-*.txt`.

## Hero campaign

Headline: **New way. Full speed.**

Supporting line: Speed Styles moves ideas faster than the old way.

CTA: Make the switch.

Speed accelerates in a racecar while Sloth follows on a donkey, showing the new and old ways through their established characters. This promotional banner has a cinematic background and is separate from the transparent specification artwork. Download: `img/mascots/speed-styles-hero-banner.png`. Generation prompt: `hero-banner-prompt.json` (built-in imagegen).