Theme Design System

Complete documentation & dashboard

Complete Theme System

A professional design system with 285 CSS variables,89 colors, and 24 ready-to-use components.

89

Color Variables

Semantic color tokens

285

Total Variables

CSS custom properties

24

Components

Ready-to-use UI

3

Themes

Dark, Light, Violet

Current Theme: dark

Theme Colors

Primary Color--color-primary
Accent Color--color-accent
Elevated Background--bg-elevated

Theme Information

CSS File/themes/dark.css
Variables Loaded285
Last UpdatedToday
Theme Status
Active

Quick Start

1. Install Theme

<link id="theme-style" href="/themes/dark.css" />

Add this to your HTML head

2. Use Classes

<div className="bg-primary text-text-on-primary">

Apply theme classes directly

3. Switch Themes

setTheme("light")

Change themes programmatically

Theme Design System v1.0

Complete design system for enterprise applications

Built with ❤️ using Next.js & Tailwind