Plutonium Design Token System

Plutonium uses a comprehensive CSS design token system for consistent, themeable UI components. This system provides CSS custom properties and reusable component classes that automatically support light and dark modes.

CSS Design Tokens

Design tokens are defined in src/css/tokens.css and provide the foundation for all UI styling.

Surface & Background Colors

/* Light mode */
--pu-body: #f8fafc;              /* Page background */
--pu-surface: #ffffff;            /* Main surface (cards, panels) */
--pu-surface-alt: #f1f5f9;        /* Alternate surface (headers) */
--pu-surface-raised: #ffffff;     /* Elevated elements */
--pu-surface-overlay: rgba(255, 255, 255, 0.95);