Theme Inspector
Theme Inspector
Debug and analyze theme combinations in real-time
Current Theme: minimalist-default
Design System
Minimal Clean
Pure, distraction-free design with maximum content focus
Category: minimal
Color Preset
Default
Primary Light
Primary Dark
Color Tokens
background
0 0% 100%
foreground
240 10% 4%
card
0 0% 100%
card_foreground
240 10% 4%
popover
0 0% 100%
popover_foreground
240 10% 4%
primary
240 6% 10%
primary_foreground
0 0% 98%
secondary
240 5% 96%
secondary_foreground
240 6% 10%
muted
240 5% 96%
muted_foreground
240 5% 40%
accent
240 5% 96%
accent_foreground
240 6% 10%
destructive
0 84% 60%
destructive_foreground
0 0% 98%
success
142 76% 36%
success_foreground
0 0% 98%
warning
38 92% 50%
warning_foreground
0 0% 98%
border
240 6% 90%
input
240 6% 90%
ring
240 6% 10%
Typography System
Font Configuration
Heading Font: system-ui
Body Font: system-ui
Base Size: 16px
Scale: 1.2
Line Height: 1.6
Typography Preview
Heading 1 Sample
Heading 3 Sample
Body text sample showing the typography system in action.
Layout System
Spacing & Sizing
Space Unit: 1rem
Space Scale: 1.5
Container Width: 1000px
Grid Gap: 2rem
Component Shapes
Button Shape: rounded
Card Shape: rounded
Input Shape: rounded
Border Radius
Small: 2px
Medium: 4px
Large: 8px
Surface Treatment
Shadows
Small Shadow
0 1px 2px rgba(0,0,0,0.05)
Medium Shadow
0 2px 4px rgba(0,0,0,0.08)
Large Shadow
0 4px 8px rgba(0,0,0,0.12)
Border & Effects
Border Width: 1px
Border Style: solid
Surface Treatment: flat
Animation System
Timing & Easing
Fast: 0.2s
Normal: 0.3s
Slow: 0.4s
Easing: ease-out
Effects
Entrance: fade
Hover Effect: none
Click Effect: none
Loading Style: progress
Generated CSS
Size: 12756 characters
/* djust-theming - Design System CSS */
/* Design System: minimal */
/* Color Preset: default */
:root {
--font-sans: system-ui;
--font-display: system-ui;
--text-base: 16px;
--leading-normal: 1.6;
--radius-sm: 2px;
--radius: 4px;
--radius-lg: 8px;
--button-radius: var(--radius);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow: 0 2px 4px rgba(0,0,0,0.08);
--shadow-lg: 0 4px 8px rgba(0,0,0,0.12);
--duration-fast: 0.2s;
--duration-normal: 0.3s;
--duration-slow: 0.4s;
--easing: ease-out;
--background: 0 0% 100%;
--foreground: 240 10% 4%;
--card: 0 0% 100%;
--card-foreground: 240 10% 4%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 4%;
--primary: 240 6% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 5% 96%;
--secondary-foreground: 240 6% 10%;
--muted: 240 5% 96%;
--muted-foreground: 240 5% 40%;
--accent: 240 5% 96%;
--accent-foreground: 240 6% 10%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--success: 142 76% 36%;
--success-foreground: 0 0% 98%;
--warning: 38 92% 50%;
--warning-foreground: 0 0% 98%;
--info: 199 89% 48%;
--info-foreground: 0 0% 98%;
--link: 221 83% 53%;
--link-hover: 221 83% 45%;
--code: 240 5% 94%;
--code-foreground: 240 10% 20%;
--selection: 240 100% 80%;
--selection-foreground: 240 10% 4%;
--border: 240 6% 90%;
--input: 240 6% 90%;
--ring: 240 6% 10%;
--surface-1: 0 0% 99%;
--surface-2: 0 0% 97%;
--surface-3: 0 0% 95%;
--sidebar-background: 0 0% 100%;
--sidebar-foreground: 240 10% 4%;
--sidebar-primary: 240 6% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 5% 96%;
--sidebar-accent-foreground: 240 6% 10%;
--sidebar-border: 240 6% 90%;
--sidebar-ring: 240 6% 10%;
--chart-1: 240 6% 10%;
--chart-2: 240 5% 96%;
--chart-3: 240 5% 96%;
--chart-4: 142 76% 36%;
--chart-5: 38 92% 50%;
--chart-6: 199 89% 48%;
}
.dark,
[data-theme="dark"] {
--background: 240 10% 4%;
--foreground: 0 0% 98%;
--card: 240 10% 4%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 4%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 6% 10%;
--secondary: 240 4% 16%;
--secondary-foreground: 0 0% 98%;
--muted: 240 4% 16%;
--muted-foreground: 240 5% 75%;
--accent: 240 4% 16%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62% 30%;
--destructive-foreground: 0 0% 98%;
--success: 142 69% 28%;
--success-foreground: 0 0% 98%;
--warning: 38 92% 40%;
--warning-foreground: 0 0% 98%;
--info: 199 89% 60%;
--info-foreground: 0 0% 98%;
--link: 221 83% 65%;
--link-hover: 221 83% 75%;
--code: 240 4% 12%;
--code-foreground: 240 5% 80%;
--selection: 240 100% 30%;
--selection-foreground: 0 0% 98%;
--border: 240 4% 16%;
--input: 240 4% 16%;
--ring: 240 5% 84%;
--surface-1: 240 4% 8%;
--surface-2: 240 4% 12%;
--surface-3: 240 4% 16%;
--sidebar-background: 240 10% 4%;
--sidebar-foreground: 0 0% 98%;
--sidebar-primary: 0 0% 98%;
--sidebar-primary-foreground: 240 6% 10%;
--sidebar-accent: 240 4% 16%;
--sidebar-accent-foreground: 0 0% 98%;
--sidebar-border: 240 4% 16%;
--sidebar-ring: 240 5% 84%;
--chart-1: 0 0% 98%;
--chart-2: 240 4% 16%;
--chart-3: 240 4% 16%;
--chart-4: 142 69% 28%;
--chart-5: 38 92% 40%;
--chart-6: 199 89% 60%;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--background: 240 10% 4%;
--foreground: 0 0% 98%;
--card: 240 10% 4%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 4%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 6% 10%;
--secondary: 240 4% 16%;
--secondary-foreground: 0 0% 98%;
--muted: 240 4% 16%;
--muted-foreground: 240 5% 75%;
--accent: 240 4% 16%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62% 30%;
--destructive-foreground: 0 0% 98%;
--success: 142 69% 28%;
--success-foreground: 0 0% 98%;
--warning: 38 92% 40%;
--warning-foreground: 0 0% 98%;
--info: 199 89% 60%;
--info-foreground: 0 0% 98%;
--link: 221 83% 65%;
--link-hover: 221 83% 75%;
--code: 240 4% 12%;
--code-foreground: 240 5% 80%;
--selection: 240 100% 30%;
--selection-foreground: 0 0% 98%;
--border: 240 4% 16%;
--input: 240 4% 16%;
--ring: 240 5% 84%;
--surface-1: 240 4% 8%;
--surface-2: 240 4% 12%;
--surface-3: 240 4% 16%;
--sidebar-background: 240 10% 4%;
--sidebar-foreground: 0 0% 98%;
--sidebar-primary: 0 0% 98%;
--sidebar-primary-foreground: 240 6% 10%;
--sidebar-accent: 240 4% 16%;
--sidebar-accent-foreground: 0 0% 98%;
--sidebar-border: 240 4% 16%;
--sidebar-ring: 240 5% 84%;
--chart-1: 0 0% 98%;
--chart-2: 240 4% 16%;
--chart-3: 240 4% 16%;
--chart-4: 142 69% 28%;
--chart-5: 38 92% 40%;
--chart-6: 199 89% 60%;
}
}
/* Design System Styles */
/* Typography */
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
/* Layout */
.container {
max-width: 1200px;
margin: 0 auto;
}
/* Component shapes */
.btn, button {
border-radius: var(--radius);
}
.card {
border-radius: var(--radius-lg);
}
.input, input, textarea, select {
border-radius: var(--radius-sm);
}
/* Surfaces */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.border {
border-width: var(--border-width);
border-style: var(--border-style);
}
.surface-glass {
backdrop-filter: blur(var(--backdrop-blur, 0));
background: rgba(255, 255, 255, 0.1);
}
.surface-noise {
position: relative;
}
.surface-noise::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: var(--noise-opacity, 0);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
pointer-events: none;
}
/* Animations */
.transition {
transition-duration: var(--duration-normal);
transition-timing-function: var(--easing);
}
.transition-fast {
transition-duration: var(--duration-fast);
transition-timing-function: var(--easing);
}
.transition-slow {
transition-duration: var(--duration-slow);
transition-timing-function: var(--easing);
}
.hover-lift:hover {
transform: translateY(var(--hover-translate-y, -2px)) scale(var(--hover-scale, 1.02));
}
.hover-scale:hover {
transform: scale(var(--hover-scale, 1.05));
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(var(--primary) / 0.3);
}
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hover-lift:hover,
.hover-scale:hover {
transform: none;
}
}
/* Theme utility classes */
/* Backgrounds */
.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.bg-success { background-color: hsl(var(--success)); }
.bg-warning { background-color: hsl(var(--warning)); }
.bg-info { background-color: hsl(var(--info)); }
.bg-code { background-color: hsl(var(--code)); }
.bg-selection { background-color: hsl(var(--selection)); }
/* Text colors */
.text-foreground { color: hsl(var(--foreground)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
.text-success { color: hsl(var(--success)); }
.text-success-foreground { color: hsl(var(--success-foreground)); }
.text-warning { color: hsl(var(--warning)); }
.text-warning-foreground { color: hsl(var(--warning-foreground)); }
.text-info { color: hsl(var(--info)); }
.text-info-foreground { color: hsl(var(--info-foreground)); }
.text-link { color: hsl(var(--link)); }
.text-code-foreground { color: hsl(var(--code-foreground)); }
.text-selection-foreground { color: hsl(var(--selection-foreground)); }
/* Borders */
.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }
.border-primary { border-color: hsl(var(--primary)); }
.border-secondary { border-color: hsl(var(--secondary)); }
.border-destructive { border-color: hsl(var(--destructive)); }
.border-success { border-color: hsl(var(--success)); }
.border-warning { border-color: hsl(var(--warning)); }
.border-info { border-color: hsl(var(--info)); }
/* Ring (focus) */
.ring-ring { --tw-ring-color: hsl(var(--ring)); }
/* Rounded corners using theme radius */
.rounded-theme { border-radius: var(--radius); }
.rounded-theme-sm { border-radius: calc(var(--radius) - 0.25rem); }
.rounded-theme-md { border-radius: calc(var(--radius) + 0.25rem); }
.rounded-theme-lg { border-radius: calc(var(--radius) + 0.5rem); }
/* Common component patterns */
.card-theme {
background-color: hsl(var(--card));
color: hsl(var(--card-foreground));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
}
.btn-primary {
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border-radius: var(--radius);
}
.btn-primary:hover {
background-color: hsl(var(--primary) / 0.9);
}
.btn-secondary {
background-color: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
border-radius: var(--radius);
}
.btn-secondary:hover {
background-color: hsl(var(--secondary) / 0.8);
}
.btn-destructive {
background-color: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
border-radius: var(--radius);
}
.btn-destructive:hover {
background-color: hsl(var(--destructive) / 0.9);
}
.input-theme {
background-color: transparent;
border: 1px solid hsl(var(--input));
border-radius: var(--radius);
}
.input-theme:focus {
outline: none;
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
}
/* Badge variants */
.badge-primary {
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.badge-secondary {
background-color: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
}
.badge-destructive {
background-color: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
}
.badge-success {
background-color: hsl(var(--success));
color: hsl(var(--success-foreground));
}
.badge-warning {
background-color: hsl(var(--warning));
color: hsl(var(--warning-foreground));
}
.badge-info {
background-color: hsl(var(--info));
color: hsl(var(--info-foreground));
}
/* Link styles */
a,
.link {
color: hsl(var(--link));
text-decoration: none;
transition: color 150ms ease;
}
a:hover,
.link:hover {
color: hsl(var(--link-hover));
text-decoration: underline;
}
/* Code blocks */
code,
.code {
background-color: hsl(var(--code));
color: hsl(var(--code-foreground));
padding: 0.125rem 0.375rem;
border-radius: calc(var(--radius) - 0.125rem);
font-family: ui-monospace, SFMono-Regular, "SF Mono", Monaco, "Cascadia Mono",
"Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono",
monospace;
font-size: 0.875em;
}
pre code {
padding: 0;
background: transparent;
}
/* Selection */
::selection {
background-color: hsl(var(--selection));
color: hsl(var(--selection-foreground));
}
::-moz-selection {
background-color: hsl(var(--selection));
color: hsl(var(--selection-foreground));
}