# Anime cel design language kit > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A kit sheet for "Comet Club", an invented daily-run streak app, drawn in the visual language of Saturday-morning cel animation. Every shape has a 3px ink outline (`#1B1530`, never pure black), every colour comes as a pair (base and one shadow tone) applied as a hard-edged inset with zero blur, and the grounds are speed lines and halftone dots built from CSS gradients. The mascot "Pip" is an original comet made of a circle, three tail paths, two oval eyes and a smile: simple shapes, no borrowed character. The detail worth copying: cel shading is one `box-shadow: inset -14px -12px 0 ` on a circle, and the same rule (inset bottom shadow, hard offset drop) shades the buttons, so illustration and UI read as one drawing. ## Reference behaviour 1. Initial state at 1280 × 800: a 56px white header with a 3px ink bottom border; the sheet is a 12-column grid with 16px gaps. Row one: the composition (7 columns, 440px tall, sky blue) and the type specimen (5 columns). 2. Composition: a conic speed-line burst radiates from 72% / 48%, cleared to flat sky in a 22% circle behind Pip. Pip bobs 4% up and rotates -8° → -5° over 2.4s, alternating, and blinks (eyes `scaleY(.1)`) at 97% of a 4.2s cycle. A yellow 16-point burst reads "47!". A sticker "Best: 61 days" sits bottom right of the stage. 3. Copy column: a pill eyebrow "Episode 47 · Tuesday run", the H1 "Don't break the tail!" (ink fill, 10px white stroke painted behind, 5px ink drop shadow), a speech-bubble paragraph with its tail pointing up toward Pip, and two buttons. 4. Click START RUN: the button squashes (`scale(1.14, .82)` at 30%, `scale(.94, 1.08)` at 60%, back to 1 at 320ms, overshoot spring) and its label toggles to "RUNNING 00:01". Click again to toggle back. 5. Hover any button: it lifts `translate(-2px, -2px)` and its hard shadow grows from 4px to 6px. Press (`:active`): it drops `translate(3px, 3px) scale(1.04, .9)`, the shadow shrinks to 1px and the inner shade to 4px, in 90ms. 6. The controls panel: four buttons (LOG RUN red, +1 DAY yellow, Share white, Locked disabled with a dashed border), two fields, a toggle, three stickers. Clicking LOG RUN, +1 DAY or Share plays the same squash. 7. Click the toggle: the knob springs 28px over 260ms and the track turns mint; `aria-checked` flips. 8. Focus a field: a 4px sky hard shadow appears bottom right of the 3px ink border. 9. Row three: cel shading (four shaded balls and four base/shadow swatches); row four: three background tiles; row five: four grammar cards (two filled yellow and mint). ## Structure ``` 1280 wide (sheet scrolls; first 800px = header + row 1 + top of row 2) +--------------------------------------------------------------------------------+ | (o) COMET CLUB CEL KIT 2.0 Type Cel Backgrounds Controls (3px ink · 2 tones) | 56 +------------------------------------------------+-------------------------------+ | (episode pill) speed lines [47!] | [TYPE] | | DON'T ~~~~( Pip ) | AA! (88px Bungee) | | BREAK | Bungee 40 DAY 47 | | THE TAIL! (68px Bungee) | Bungee 18 START RUN | | +- bubble paragraph ---^--+ | Chakra 700/20 ... | | [START RUN] [Snooze 1h] (Best: 61 days) | (bubble specimen) | +-----------------------------+------------------+-------------------------------+ | [CEL SHADING] 4 balls | [CONTROLS AND STICKERS] buttons / fields / toggle + stickers | | 4 swatch pairs | | +-----------------------------+--------------------------------------------------+ | [BACKGROUNDS] speed burst | halftone | speed lines | +--------------------------------------------------------------------------------+ | Ink 3px | Two tones | Squash | Invent it | +--------------------------------------------------------------------------------+ spans: hero 7 / type 5 / cel 5 / controls 7 / backgrounds 12 / rules 12 (4 cards) ``` - `

`: `.mark` (28px cel-shaded circle), brand (Bungee 18) with kit name (Chakra 600 13), `