Design System
Power UI design tokens and visual language reference.
Why Tokens Matter
The token system is what sets Power UI apart from traditional theme generators. Instead of manually updating hundreds of color properties across dozens of visuals, tokens create intelligent relationships between colors. Change your brand color once, and watch as every related element—from subtle backgrounds to emphasized buttons—updates automatically while maintaining perfect visual harmony.
Instant Dark Mode
No more manually creating separate dark themes. Tokens ensure every element inverts properly—backgrounds become dark, text becomes light, and brand colors adjust their intensity automatically.
Brand Consistency
Tokens guarantee your brand colors are applied correctly everywhere. No more mismatched shades or forgotten hover states across your reports.
Rebrand in Seconds
When your organization updates brand colors, simply change the palette and every token-based element updates automatically. What used to take hours now takes seconds.
Semantic Color Tokens
Theme-aware color tokens that adapt to light/dark mode and palette selections. Click any value to copy it.
Text
| Token | Name | Light Mode | Dark Mode |
|---|---|---|---|
@text-primary | Primary text | ||
@text-secondary | Secondary text | ||
@text-tertiary | Tertiary text |
Backgrounds
| Token | Name | Light Mode | Dark Mode |
|---|---|---|---|
@bg-primary | Primary background | ||
@bg-secondary | Secondary background | ||
@bg-tertiary | Tertiary background | ||
@bg-quaternary | Quaternary background | ||
@bg-active | Active background | ||
@bg-disabled | Disabled background |
Brand
| Token | Name | Light Mode | Dark Mode |
|---|---|---|---|
@brand-faint | Brand faint | ||
@brand-muted | Brand muted | ||
@brand-subtle | Brand subtle | ||
@brand-default | Brand default | ||
@brand-emphasis | Brand emphasis |
Success
| Token | Name | Light Mode | Dark Mode |
|---|---|---|---|
@success-faint | Success faint | ||
@success-muted | Success muted | ||
@success-subtle | Success subtle | ||
@success-default | Success default | ||
@success-emphasis | Success emphasis |
Warning
| Token | Name | Light Mode | Dark Mode |
|---|---|---|---|
@warning-faint | Warning faint | ||
@warning-muted | Warning muted | ||
@warning-subtle | Warning subtle | ||
@warning-default | Warning default | ||
@warning-emphasis | Warning emphasis |
Error
| Token | Name | Light Mode | Dark Mode |
|---|---|---|---|
@error-faint | Error faint | ||
@error-muted | Error muted | ||
@error-subtle | Error subtle | ||
@error-default | Error default | ||
@error-emphasis | Error emphasis |
Borders
| Token | Name | Light Mode | Dark Mode |
|---|---|---|---|
@border-primary | Primary border | ||
@border-secondary | Secondary border | ||
@border-tertiary | Tertiary border | ||
@border-disabled | Disabled border |
Utility
| Token | Name | Light Mode | Dark Mode |
|---|---|---|---|
@utility-shadow | Shadow color |
Base
| Token | Name | Light Mode | Dark Mode |
|---|---|---|---|
@base-white | White | ||
@base-black | Black |
Next: Brand Palettes
Learn about the Tailwind-based color systems for consistent brand representation.
Continue to Brand Palettes →