Design Standards Showcase

Explore the canonical theme tokens from design/ui-standards.md and preview how buttons, cards, forms, tables, and alerts respond to light/dark mode and 31 comprehensive themes organized across 6 categories.

Implementation Guide

For Admins: Quick Theme Switching

To implement user-configurable themes in your application:

  1. Copy the CSS: Import globals.css from this demo into your project
  2. Add Theme Switcher: Use document.documentElement.dataset.theme = 'theme-name' to switch themes
  3. Store Preferences: Save user theme selection to localStorage or database
  4. Available Themes (31): Aurora, Zen, Sterling, Justice, Haven (Professional & Business) • Syntax, Neon, Nexus, Velocity, Quantum, Centerpiece (Tech & Digital) • Vogue, Prism, Comic, Opulence, Canvas (Creative & Artistic) • Terracotta, Verdant, Summit, Pastel, Desert (Nature & Organic) • Vitality, Scholar, Wellness, Frontier, Academy (Healthcare & Education) • Ember, Valor, Voyage, Harmony, Luxe (Lifestyle)

Code Example:

// Set theme programmatically
const setTheme = (theme) => {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem('theme', theme);
};

// Load saved theme on app start
const savedTheme = localStorage.getItem('theme') || 'aurora';
setTheme(savedTheme);

All components automatically adapt to theme changes via CSS custom properties. No component updates required.

Theme

Category:Professional & Business
Theme:Aurora

Perfect for SaaS platforms and B2B applications. Features modern rounded corners, friendly gradients, and balanced spacing that builds trust while remaining approachable. Ideal for startups, tech companies, and productivity tools that want to feel contemporary without being overwhelming.

Effect

Category:Cosmic
Effect:Waves

Smooth, flowing gradient waves that undulate across the canvas with an ethereal glow. The signature effect that adapts beautifully to any theme's color palette.

Versatile and professional. The default choice for SaaS, tech, and business applications. Works with most themes, especially Aurora, Sterling, and Quantum.

All tokens and components on this page respond live to your selections.

Effect Placements

Visual effects can be placed in 4 different contexts: background (full viewport), hero (banner sections), card (small containers), and section (content blocks). Each placement adapts the effect for optimal visibility.

Hero Placement

Transform Your Experience

Effects adapt to your chosen theme, using primary and accent colors automatically.

Aurora Waves

Selected Effect

This card shows the currently selected effect. Change the effect above to preview different options.

Particles

Ambient Particles

Floating particles create depth and movement without overwhelming card content.

Geometry

Geometric Mesh

Low-poly meshes create modern, tech-forward aesthetics for digital products.

Implementation Code
import { VisualEffect } from '@/components/VisualEffect';

// Hero banner with effect
<section className="relative overflow-hidden min-h-[60vh]">
  <VisualEffect 
    placement="hero" 
    effect="aurora" 
    intensity="normal" 
  />
  <div className="relative z-10">
    <h1>Hero Content</h1>
  </div>
</section>

// Card with subtle effect
<Card className="relative overflow-hidden">
  <VisualEffect 
    placement="card" 
    effect="neuro" 
    intensity="subtle" 
  />
  <CardContent className="relative z-10">
    Content here
  </CardContent>
</Card>

Buttons & CTAs

Buttons inherit tokenized radius, font weight, focus treatments, and motion curves so style changes propagate automatically.

Success badge
Warning badge
Info badge

Cards, Content & Navigation

Card curvature, elevation, and spacing values pipe straight from `--card-radius`, `--card-shadow`, and `--stack-gap`.

Guidance

Keep primitives token-driven. Update theme CSS instead of hardcoding values in components.

Motion

Animate within the timing curve for the active theme and honor prefers-reduced-motion.

Spacing

Use --stack-gap for vertical rhythm and --section-gap between major regions.

Forms & Inputs

Inputs share control height, radius, and focus treatments for layout consistency.

Localization Demo en-US

See how numbers, currencies, and dates automatically adapt to your selected language using the browser's Intl API.

Currency

$1,234.56

Large Number

1,234,567.89

Date Format

December 6, 2025

Relative Time

2 days agonext week

Table, Alerts & Tokens

Tables, alerts, and live token swatches all bind to the same CSS variables defined in the standards.

Sample table

TokenPurpose
--control-heightButtons & inputs share this value for layout consistency.
--motion-duration-basePrimary transition timing for hover and focus states.
--icon-strokeStandard stroke width for glyphs and iconography.

Alerts

Success — Token changes saved.
Warning — Contrast is borderline.
Destructive — Token missing.
Info — Hover states ease per theme.

Live token swatches

--background
—
--foreground
—
--primary
—
--accent
—
--secondary
—
--success
—
--warning
—
--info
—
--card-radius
—
--button-radius
—
--control-height
—
--stack-gap
—
--section-gap
—
--motion-duration-base
—
--motion-ease
—
--icon-stroke
—

Navigation Components

Navigation bars, breadcrumbs, and tabs provide consistent wayfinding across themes.

Navigation Bar

Breadcrumbs

Tabs

Tab content goes here.

Interactive Feedback

Loading states, progress indicators, and notifications provide user feedback.

Loading States

Spinner
Skeleton

Progress & Tooltip

Progress Bar
65% complete
Tooltip
This is a tooltip!

List Components

Styled lists, definitions, and chips for organizing content.

Unordered List

  • First item with marker
  • Second item
  • Third item

Ordered List

  1. Step one
  2. Step two
  3. Step three

Definition List

Term
Definition goes here
Another
More details

Chip List

React TypeScript Tailwind

Data Display

Statistics cards and empty states for data visualization.

12,458

Total Users

↑ 12% from last month

$45,231

Revenue

↑ 8% from last month

98.5%

Uptime

↓ 0.5% from last month

No items found

Get started by creating your first item.

Extended Form Elements

Checkboxes, radios, toggles, sliders, and more.

Selection Controls

Checkboxes
Radio Buttons

Inputs & Controls

Toggle Switch

Enable notifications

Range Slider

Search Input

File Upload

Drop files here or click to browse

Supports: PDF, PNG, JPG (max 10MB)

Rich Components

Accordions, avatars, steppers, and timelines.

Accordion

Content for section 1 goes here.

Content for section 2 goes here.

Avatars & Icons

Avatars
JS
MJ
AB
Icon Buttons

Stepper

✓
Complete
2
In Progress
3
Pending
4
Review

Timeline

Project Started

Initial planning phase completed

2 days ago
Milestone Reached

First major feature delivered

1 day ago

Form Validation

Visual feedback for form validation states.

✓ Email is valid
⚠ Please enter a valid email

Extended Typography

Blockquotes and link variants for richer text content.

"Design is not just what it looks like and feels like. Design is how it works."— Steve Jobs

Link Styles

This is a primary link and here's an underlined link for reference.