Page field
Use Paper with wide breathing room.
Avoid Full-page yellow or black sections.
A working system for the app: color roles, surface hierarchy, motion rules, mascot restraint, and proof-first product patterns we can actually build.
The brand can be funny, but the product surfaces should help teams scan failures, compare evidence, and decide what to fix next.
Use Paper with wide breathing room.
Avoid Full-page yellow or black sections.
Use Paper 2, hard line, short shadow.
Avoid Cards inside cards or ornamental frames.
Use Moss fills, moss outlines, clear action labels.
Avoid Every CTA shouting in canary.
Use Canary for active, selected, or lamp-lit moments.
Avoid Yellow section backgrounds by default.
Use Ember on the exact proof gap.
Avoid Painting whole layouts red or black.
Use Small canonical Bird moments near proof or brand context.
Avoid Using the bird to solve weak product storytelling.
--canary Signal only: primary CTA, active nav, selected proof, mascot body
--moss Conversion and healthy states: recommended plan, passed proof, live runs
--ember Failures and warnings: blocked traces, stopped states, beak and feet
--lamp Soft emphasis: lamp glow, uncertain proof, selected-but-unproven state
--soot Structure: type, borders, shadows, tool chrome, not large wallpaper
--paper Page field and quiet sections
--paper-2 Tools, reports, modals, and raised repeated items
Every frame on the site is drawn from this set. If the value you want isn't here, the answer is almost always the nearest token — not a new one. These swatches render the live variables, so this page goes wrong the moment the tokens do.
Chips and stamps take xs. Controls take sm. Panels take md. Cards and modals take lg.
--r-xs 4px --r-sm 10px --r-md 14px --r-lg 18px --r-pill 999px Two weights carry every frame. The accent is the bar that marks a quote or a proof gap.
--bd 2px --bd-thick 3px --bd-accent 4px One offset at rest. Lift on hover, press on active. There is no third resting depth.
--shadow 4px 4px 0 --shadow-lift 6px 6px 0 --shadow-press 1px 1px 0 A beam or sweep over the target being inspected.
Sequential log entries proving what happened.
Live dot, selected variant, or active proof state.
Subtle bob, blink, wing, or lamp pulse only.
The agent cannot prove the size state changed, so it stops before adding the item to cart. The app should show the exact proof gap and the smallest next fix.
Agent stopped at step 6 before cart.
The joke lives in the board report format: minutes, votes, operating thesis, experiments, and proof gaps. The mascot does not need to become a different mascot.
Your intake context is carried into the booking, so the call starts useful.