Design a MotherDuck Dive

Use this skill for the visual system and interaction design of a Dive. Pair it with motherduck-create-dive for current React and useSQLQuery mechanics, and with motherduck-build-dashboard when the task also includes defining the analytical story and SQL.

Design Contract

Every designed or redesigned Dive must:

• start at a 320 px viewport and enhance upward
• use fluid containers and responsive grids instead of fixed desktop widths
• expose a light/dark theme control with token-based chart and UI colors, using the system preference as the initial default when practical
• reserve a predictable filter surface: visible on wide screens and a drawer or sheet on narrow screens
• keep charts inside bounded, responsive containers with readable labels at every breakpoint
• use a restrained business-analytics visual language: neutral surfaces, compact hierarchy, visible axes, quiet borders, and limited decoration
• make each KPI component useful on its own with value, label, comparison context, and a small trend or progress visual when the data supports it
• keep customer variation in data, labels, logo, and theme tokens rather than changing the information architecture
• support keyboard use, visible focus, 44 px touch targets, sufficient contrast, and non-color status cues

Avoid ornamental gradients, glass effects, glowing accents, oversized hero metrics, decorative bento layouts, excessive pills, floating shapes, and prose that sounds like a marketing landing page.