Docs: hi-res images across pages + content refinements

[anahernandez-dev]

Overview

A sweep across the design guidelines docs to replace pixelated visuals with hi-res exports and land a batch of content/structure refinements gathered over one working session. Docs-only — no library/runtime code.

Images (hi-res)

Re-exported from Figma at higher resolution (mostly scale-4, ~2–4× the previous pixels) to fix fuzziness on retina. Where the Figma metadata API worked, each visual frame was exported individually; for the two whole-page nodes it rejects (Filter and sort), the visuals were cropped from a full-page 4× export.

• Text field — hero + all 7 state visuals
• Date filter — hero + variants, placement, interaction, copy
• Active filters — hero + states, placement, copy
• Checkbox group — placement (do/don't) + interaction + copy
• Clear filters — states + placement
• Khanductor — placement + appearance/scale visuals
• Progress stepper — variants + copy
• Toggle — placement/interaction/copy + new Preferences visuals
• Filter and sort — hero + all 10 logic-framework diagrams

Content & structure

• Toggle — restructured into Filtering and Preferences contexts; Copy split per context; do/don't examples now render via the Figure component instead of bars baked into the images; added Preferences examples to the when-to-use / when-not-to-use tables; "Interaction" → "Instant save".
• Filter and sort — reordered so each section's text sits above the image it describes (was off by one); removed the Figma source link.
• Date filter — state each variant's active-filter-chip behavior explicitly.
• Active filters — corrected the "what generates an active filter" rule to be about who owns the control's starting value (not legibility); added the Date inline filter button row.
• Text field — badge on its own line; tightened Placeholder and Helper text copy; removed the Figma source link.
• Checkbox group — fixed do-bar captions (explanation → caption prop the Figure component actually reads).
• Clear filter / Toggle / Text field / Filter and sort — removed Figma source links.
• Khanductor — badge on its own line above the description.
• Introduction — refined the opening paragraph.

Tooling

• .claude/launch.json — autoPort: true so the Storybook dev server can pick a free port when 56789 is taken.

Notes for reviewers

• Every page was verified rendering in the Storybook preview after each change (no MDX compile errors).
• toggle/interaction-2.png was deleted and replaced by interaction-2-do.png / interaction-2-dont.png (the Filter modal example was split so the do/don't bars render from the component).
• clear-filter's states-default.png and placement.png are intentionally the same mockup (they already were before this PR).
• Khanmigo is intentionally not included for hi-res: its whole-page Figma node crashes the metadata API, and its white-on-white visuals (one is a tall composite with baked-in "Don't" bars) don't crop cleanly — best done separately from the individual section nodes.

🤖 Generated with Claude Code

[github-actions]

A new build was pushed to Chromatic! 🚀

https://6a5008743971119020a6233b-amhzqzwpxn.chromatic.com/