Interactive Design System Playground

🎮 Design System Playground

Explore, customize, and export components in real-time. All changes are live and immediately visible!

📁 Export Theme 🔄 Reset to Defaults 🌙 Toggle Dark Mode

---

🎨 Color System Customization

Primary Brand Colors

Customize the core brand palette. Changes automatically cascade to all components.

Primary Color Main brand color for primary actions

📋

Secondary Color Accent color for highlights and emphasis

📋

Semantic Colors

Success

📋

Warning

📋

Error

📋

Info

📋

🔤 Typography Customization

Typography Scale

Adjust font properties and see the impact across all text elements.

Base Font Size Root font size that scales all typography

16px

Scale Ratio Mathematical ratio for typography scale

Minor Third (1.2) Major Third (1.25) Perfect Fourth (1.333) Augmented Fourth (1.414) Perfect Fifth (1.5) Golden Ratio (1.618)

Line Height Base line height for text elements

1.6

Display Large

Display Medium

Headline Large

Headline Medium

Title Large

Body Large

Body Medium - This is the default body text style used for paragraphs and general content throughout the interface.

Body Small - Used for secondary content, captions, and supplementary information.

🧩 Component Showcase

Interactive Component Library

Test all components with your customizations applied in real-time.

### Button Components

Button Variants

Primary Button Secondary Button Outline Button Ghost Button

📋 Copy Button Code

<button class="ds-button ds-button--primary">Primary Button</button>
<button class="ds-button ds-button--secondary">Secondary Button</button>
<button class="ds-button ds-button--outline">Outline Button</button>
<button class="ds-button ds-button--ghost">Ghost Button</button>

Button Sizes

Small Medium Large Extra Large

Button States

Default Disabled Loading With Icon

### Card Components

Card Variants

Default Card

Standard elevation and styling

This is a default card with standard styling and elevation. Perfect for general content containers.

Action Cancel

Elevated Card

Enhanced shadow and depth

This card has enhanced shadow and elevation effects, perfect for important content that needs emphasis.

Outlined Card

Border-focused design

This card emphasizes borders over shadows, ideal for content that needs clear boundaries.

Featured Card

Brand-colored emphasis

This card uses brand colors for special emphasis and featured content promotion.

📋 Copy Card Code

### Form Components

Form Elements

Text Input

This is helper text

Email Input

Select Dropdown Choose an option Option 1 Option 2 Option 3

Textarea

Checkbox option 1

Checkbox option 2

Radio option 1

Radio option 2

Toggle switch

📋 Copy Form Code

### Advanced Effects

Visual Effects & Signature Components

Glassmorphism

Modern blur effects with backdrop-filter for contemporary design.

Neumorphism

Soft shadow-based depth illusion creating tactile interfaces.

Glow Effect

Subtle glow effects that respond to brand colors and theme.

Gradient Borders

Animated rainbow border system with customizable gradients.

⚙️ Spacing & Layout Customization

Spacing System

Customize the base spacing unit and see how it affects all components.

Base Spacing Unit Fundamental spacing unit (4px recommended)

4px

Border Radius Base border radius for components

8px

Spacing Scale Preview

--ds-space-1

--ds-space-2

--ds-space-4

--ds-space-6

--ds-space-8

📱 Responsive Preview

Responsive Design Testing

Preview how your customizations work across different screen sizes.

📱 Mobile 📱 Tablet 💻 Desktop 🖥️ Wide

💾 Export & Implementation

Export Your Customizations

Generate CSS and configuration files with your custom theme.

📄 CSS Custom Properties

Export as CSS custom properties for direct implementation

Export CSS

⚙️ SCSS Variables

Export as SCSS variables for preprocessor workflows

Export SCSS

📋 Design Tokens JSON

Export as JSON for design tools and token systems

Export JSON

🔧 MkDocs Configuration

Export mkdocs.yml configuration with your theme

Export Config

Preview Export

/* Your customized CSS will appear here */
:root {
  --ds-color-primary: #9c27b0;
  --ds-color-secondary: #ffc107;
  --ds-font-size-base: 16px;
  --ds-space-unit: 4px;
  /* ... */
}

📋 Copy to Clipboard

🧪 Accessibility Testing

Accessibility Validation

Real-time accessibility testing for your customizations.

7.1:1

Color Contrast

✅ AAA Compliant

4.8:1

Focus Contrast

✅ AA Compliant

44px

Touch Targets

✅ Mobile Friendly

Automated Tests

Keyboard Navigation ✅ Pass

Screen Reader Labels ✅ Pass

Motion Preferences ✅ Pass

Focus Management ✅ Pass

🔍 Run Full Audit

---

📚 Usage Instructions

Real-Time Customization

1. Adjust Properties: Use the controls above to modify colors, typography, and spacing
2. See Changes Live: All modifications are immediately visible in the component showcase
3. Test Accessibility: Monitor contrast ratios and accessibility metrics as you customize
4. Export When Ready: Generate implementation code when you're satisfied with your design

Implementation Guidelines

1. Copy Generated CSS: Use the export functionality to get your custom CSS
2. Add to Your Project: Include the CSS in your MkDocs configuration
3. Test Thoroughly: Verify your customizations work across different browsers and devices
4. Validate Accessibility: Ensure all components maintain WCAG compliance

Best Practices

• Start with Colors: Begin by setting your primary and secondary brand colors
• Maintain Contrast: Keep accessibility metrics in the green for compliance
• Test Responsively: Check your design across different screen sizes
• Export Regularly: Save your progress by exporting configurations

---

🎯 Quick Actions

🔄 Reset All to Defaults 🏢 Apply Corporate Theme 🎨 Apply Creative Theme ✨ Apply Minimal Theme 🔗 Share Theme Link

---

The Interactive Playground provides a comprehensive environment for exploring and customizing the Ultimate MkDocs Material Design System. All changes are live, and the system maintains accessibility compliance throughout your customization process.