[PazDak]

Kyle, 2026-09-29: "Consider putting the loon-loading in the branding guide with a few variations? Have some fun with it, like full page, icon, etc."

Animated preview, both themes and in context: https://claude.ai/artifact/SSrgxMZuWywSCBw8UYAZbc (private to Kyle until shared)

Why

LoonSecIO/LoonInspect#721 gives LoonInspect a loading loon that beats its checkered back while a page waits. Making the loon's motion a brand asset, with rules, lets LoonInspect, the marketing site and a future native agent use one loon instead of each drawing its own.

This touches two sentences in the guide, so I'm naming them: "Do not redraw, distort, rotate…" the mark, and "Avoid looping decorative motion; honor reduced-motion preferences." This PR sanctions one functional motion and nothing decorative. The loon moves only while work is in flight, stands still under reduced motion, and never appears on a finished, empty, failed or stale state. Only the back lifts about the shoulder; nothing is redrawn, and the tests hold every path and circle to the supplied files. If you'd rather keep the mark still, the guide section is the place to say no.

What

• assets/motion/: five files, generated by tools/motion.py from loon-mark.svg, loon-favicon.svg and lake-scene.svg. Each adds only clip regions, CSS animation and a reduced-motion rule.
  • loon-working-small.svg (16–31 px, the simplified loon) for busy buttons and controls.
  • loon-working.svg (32–64 px) for a panel or table waiting on its first read. This is what LoonInspect#721 draws inline.
  • loon-working-page.svg (96–200 px) for a whole page that waits; the ripples drift.
  • loon-diving.svg (96–200 px) for long work of unknown length: the loon dives, swims out of sight, surfaces and shakes off.
  • lake-working.svg (full width) for onboarding and a first run: the illustration with the loon riding the swell.
  • -reversed twins of the four loon files for dark surfaces (ink swapped for paper, eye kept). The lake keeps its own palette.
• guide/brand.md: a new section, "The loon at work", with the table, six rules, and the swimming loon pattern for known progress (the small loon swims along a waterline to the share that's done, with the numbers in words beside it). The illustration sentence now names the working loon as the one exception.
• tests/test_motion.py: the files regenerate byte for byte; every d and circle, fill included, is a supplied one; the eye is present in every loon file; every file stands still under prefers-reduced-motion, with no scripts and no remote references; the reversed twins change only the ink; the lake's paths equal the illustration's.
• Version 0.2.0 (additive, so a minor version per the README), plus CHANGELOG, ASSETS provenance and README notes.

Verification

• python3 tools/build.py → dist/loon-design-0.2.0.zip; python3 -m unittest discover -s tests -v → 8 tests, OK.
• Mutation checks, each caught and then restored byte for byte: a nudged coordinate (3 failures), a removed reduced-motion rule (2), a recolored eye in a reversed twin (3).
• Static poses reviewed: the beat at rest and at its 32° peak at 180 px and 40 px; the small loon at 16/20/24/31 px; the dive at 14/24/32/56/66/72/80%. The divide sits 2.5 units inside the lens, so no seam shows at rest or in motion.
• Checked live in a browser: every file renders at rest as a still image, and animates inside an <img> (the dive and the page loon caught mid-motion). An earlier fade-in inside the files hid the loon from still renderers; it was removed, and the 300 ms wait is now the host's job (second commit).
• Contrast: the loon files use the supplied inks (#2b373d, #F6F2E7) and eye (#c30000) unchanged. The swim recipe uses --loon-action and --loon-border, both already AA-checked by test_foundations.py. Keyboard: nothing here takes focus; the swim pattern is a role="progressbar" with its value in words.

Not in this PR

• LoonInspect vendors 0.1.0; adopting 0.2.0 is a LoonInspect PR (its #721 loader already matches loon-working.svg).
• Marketing's /brand/ pin update is a marketing PR.
• A native-agent version (SF Symbols–style or Lottie) is later work.

Kyle owns brand decisions; an independent reviewer approves before merge. Not merged. AI-assisted: yes.

🤖 Generated with Claude Code