Create a new usage card component for our dashboard. It should match our product design system and be ready to use in React.

We would use the delivered design system before creating anything new.

Process:

  1. Read the product design skill.
  2. Check existing dashboard components.
  3. Reuse tokens for spacing, radius, typography, and states.
  4. Create the React component.
  5. Return the preview and implementation.
Read design system
Checked existing components
Created UsageCard.tsx
QA passed

Component created

`UsageCard` matched to the delivered dashboard system

Monthly AI runs

18,420+14.2%

AI summary

Reused card surface, metric type scale, emerald status badge, and compact dashboard spacing from the system.