Theme

Accent color tokens for links, branding, and semantic states.

Backdrop blur effect tokens for glassmorphism and depth. Provides backdrop-filter blur utilities for creating frosted glass effects on overlays, modals, and panels. Commonly used with semi-transparent backgrounds.

Background color tokens for page and surface backgrounds.

Badge surface styling variants for labels and status indicators. Badges are small inline labels used for categories, tags, and status indicators. All variants use consistent sizing with semantic color coding.

Border color tokens for consistent border styling.

Box shadow effect tokens for depth and elevation. Provides subtle elevation effects for cards, panels, and buttons. All shadows use dark colors appropriate for the dark theme interface.

Button surface styling variants for interactive elements. Button styles provide consistent interaction patterns across navigation, CTAs, and other clickable elements.

Card surface styling variants for content containers. Provides consistent styling patterns for card components with various visual treatments. All variants include responsive hover states and smooth transitions.

Utility function for conditionally combining CSS class names.

Complete color system combining all color token categories.

TypeScript type representing all available color tokens.

Effect color tokens for glows, shadows, and other visual effects.

Visual effect design tokens for the application theme. Provides a comprehensive set of visual effects including shadows, gradients, transitions, and backdrop filters. All effects are optimized for the dark theme and support smooth animations.

TypeScript type representing all available effect tokens. Use this type for type-safe access to effect styles in components.

Get button surface styles by variant name.

Get card surface styles by variant name.

Get section surface styles by variant name.

Gradient effect tokens for backgrounds and visual interest. Provides pre-configured gradient styles for page backgrounds, widgets, and special UI elements. All gradients follow the dark theme color palette.

Grayscale color palette used throughout the application.

Layout grid utilities for responsive card and content grids. Provides pre-configured responsive grid layouts with mobile-first column breakpoints. All layouts include consistent gap spacing and padding.

Panel surface styling variants for overlays and UI elements. Panels are floating or fixed UI elements like dropdowns, modals, and sidebars. These styles provide consistent backdrop effects and layering.

Section surface styling variants for page layout containers. Sections are larger content areas that organize page content into logical blocks. Use these for page-level organization and content grouping.

Spacing utilities for consistent layout and content organization. Provides responsive spacing patterns for page layouts, sections, grids, and content flow. All spacing values use Tailwind's responsive breakpoints for mobile-first design.

Surface component for consistent panel styling.

Surface design tokens for consistent UI styling across the application. Provides a comprehensive set of pre-configured surface styles for cards, sections, panels, buttons, badges, and spacing. All styles follow the dark theme design system with consistent colors, borders, shadows, and transitions.

TypeScript type representing all available surface tokens. Use this type for type-safe access to surface styles in components.

Text color tokens organized by semantic meaning and visual hierarchy.

Text shadow effect tokens for glowing and emphasis effects. Provides white glow effects at varying intensities for creating visual hierarchy and emphasis on text elements in the dark theme.

Unified theme object containing all design tokens.

Type representing the whole theme structure.

Transition effect tokens for smooth animations and state changes. Provides Tailwind CSS transition utilities with consistent timing and easing. Combine property transitions with duration and easing tokens for complete control.