Theme playground
Tiny tokens, big impact. This billing screen is built only with the real components from @bridge-ds/react, and the same
101 semantic tokens paint it in both themes, in either brand and density. Hover or focus any part to see exactly which tokens it reads.
Updated Oct 16, 2026
Light
Settings / Billing
Billing
Payment method
We only keep the last four digits.
Enter a full email address, like ada@example.com.
This month
- API requests
- Healthy
- Storage
- 84% used
- Last invoice
- Payment failed
Dark
Settings / Billing
Billing
Payment method
We only keep the last four digits.
Enter a full email address, like ada@example.com.
This month
- API requests
- Healthy
- Storage
- 84% used
- Last invoice
- Payment failed
Turn the knobs
Three scales drive most of how a product feels. Try them on the screen above. This is a playground: it changes this preview in your browser only, the design system does not change.
Want one of these for real? Propose it with DS Bridge from Figma or open an issue: scale changes are Tier 3 and need both the design and the tech owner.