Iconography & Motion

Whale uses one icon family and quiet, purposeful motion. Icons communicate domain or action meaning; they do not decorate every heading.

Lucide is the single icon family across Whale surfaces. Use one family consistently; do not mix in a second icon set.

• Icon scale comes from the control’s size variant; do not resize icons independently or let an icon compete with its label.
• Decorative icons are hidden from assistive technology; a meaningful icon does not stand alone when visible text can carry the same meaning.
• Do not repeat a “muted square + icon + title” motif as a page pattern.

Motion clarifies state change; it never decorates. Keep it short, consistent, and interruptible.

• Use brief, consistent durations for enter/exit and state transitions; overlays and menus animate quickly and predictably.
• Motion communicates origin and direction (where a layer came from), not spectacle.
• Respect reduced-motion preferences: when a user prefers reduced motion, drop non-essential animation and fall back to an immediate state change.