Design System Guide
Visual reference for theme-responsive primitives. Toggle the daily theme to see how components adapt.
Colors
Core color tokens that adapt to light/dark mode and daily themes.
Typography
Text styles that respond to theme font pairings and weights.
The quick brown fox
The quick brown fox jumps over the lazy dog. This paragraph demonstrates the body text style with proper line height and letter spacing.
Caption text for metadata and secondary information
const theme = 'dynamic';
Muted text for less prominent content
Size Scale
.text-xs - Extra small text
.text-sm - Small text
.text-base - Base text
.text-lg - Large text
.text-xl - Extra large text
.text-2xl - 2X large text
.text-3xl - 3X large text
Cards
Card variants respond to [data-card-style] theme attribute.
Default Card
Standard card with border and background.
Elevated Card
Card with shadow, no border.
Outlined Card
Strong border, transparent background.
Glass Card
Glassmorphism with blur effect.
Filled Card
Solid background, no border.
Interactive Card
Hover to see lift effect.
Card with Header/Footer
Card Header
This is the card body content with proper spacing.
Surfaces
Background surfaces with different elevation levels.
Default surface
Elevated surface
Recessed surface
Glass blur surface
Images
Image styles respond to [data-image-style] and [data-image-hover] attributes.
Avatars
.img-avatar-sm .img-avatar .img-avatar-lg Badges
Small labels for status, categories, or counts.
Links
Link styles respond to [data-link-style] theme attribute.
Inputs
Form elements that adapt to theme colors.
Dividers
Horizontal rules for separating content.
.divider-subtle
.divider-thick
Spacing
Spacing utilities using the spacing scale.
Border Radius
Layout
Grid and flexbox utilities.
Grid
Flexbox
Current Theme
Information about the currently active theme.
Checking...
—
—
—
—