Achievement Tree Design System

3. Motion language (crucial for delight)

• Micro-interactions are springy and responsive (but not noisy).
• Panning has subtle inertia; zoom anchors to cursor position.
• Node add/edit/done transitions must communicate cause→effect.

4. Color strategy

• Use a limited palette with one accent + one warning + one success.
• URL capacity meter has a memorable, instrument-like look (not a plain progress bar).

Interaction principles

• Every frequent action is 1–2 steps max: add child, edit title, toggle collapse, mark done.
• Inline edit is default; avoid form-heavy panels.
• Provide keyboard paths: Enter confirm, Esc cancel, Tab add child, Cmd/Ctrl+Z undo.

Deliverables expectation

Before coding, draft a “UI spec summary” in the response:

• palette tokens
• type scale
• spacing scale
• shape rules
• motion rules (durations + easing/spring) Then implement to match.