2025-12-307 min read

Design System for Widgets: Gradients, Motion, and Accessibility

Building a scalable widget design system: accessibility defaults, performant motion, and consistent theming across 200+ components.

The goal: widgets that feel native

Widgets shouldn’t look like third‑party add-ons. They should feel like part of the product.

Here are the rules we follow:

  • Strong defaults: a widget should look premium without configuration.
  • Themeability: make it easy to match your brand (colors, radius, typography).
  • Motion with restraint: subtle transitions that feel fast, not distracting.
  • Accessible interaction: keyboard focus, readable contrast, and sensible semantics.

Practical checklist

When you publish a widget, verify:

  • it doesn’t cover important UI (especially on mobile)
  • it doesn’t cause CLS
  • it doesn’t leak styles into the page

If you’re shipping chat widgets, start here: