Complete reference for all components, patterns, and design tokens. Use the theme switcher (bottom-right) to see how everything adapts.
Zalando Sans for bold fashion-forward headlines, Switzer for readable body text, and JetBrains Mono for code.
Zalando Sans with fluid sizing using clamp()
Full character set showcase
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 !@#$%^&*()
Self-hosted with multiple weights for optimal readability
Small text (14px) — Used for captions, labels, and metadata
Base text (16-18px) — Primary body copy with optimal readability
Large text (18-20px) — Emphasized body text and introductions
JetBrains Mono for code and technical content
Inline const code = true example
function example() {
return "Hello, World!";
}Five switchable theme palettes with consistent design tokens across all themes.
2026 Pantone-inspired palette with warm neutrals and earthy accent
Editorial magazine aesthetic with muted jewel tones
Future-forward clean palette with refreshing mint accent
Atmospheric warmth with terracotta and gold accents
Dark mode option with Jeff Green neon green accent
Theme-aware utility classes that adapt automatically
.bg-ds-primary.bg-ds-secondary.bg-ds-accent.border-ds-strongConsistent spacing scale based on Tailwind's default system.
Common spacing values (4px base unit)
10.25rem(4px)20.5rem(8px)41rem(16px)61.5rem(24px)82rem(32px)123rem(48px)164rem(64px)246rem(96px)Frequently used spacing combinations
p-6 (Card padding)py-16 (Section spacing)gap-4 (Flex gap)
Form inputs, labels, and textarea components with proper accessibility.
Text input with label
Multi-line text input
Form with multiple fields and submit button
Card components with various styles and content patterns.
Standard card with border and padding
This is a basic card component with consistent padding and styling.
Card with hover effects
Hover over this card to see the lift effect and border color change.
Featured card with icon header
Card with an icon to draw attention to important content.
Badges, tags, and interactive feedback components.
Button with copy-to-clipboard functionality
Tech stack and status tags
Common container, grid, and flexbox patterns.
container mx-automax-w-4xlmax-w-6xlResponsive grid patterns
Col 1Col 2Col 1Col 2Col 3Common flexbox arrangements
LeftRightCenteredStack 1Stack 2Scroll-triggered reveals, transitions, and motion patterns.
Elements animate in as you scroll (refresh to see again)
Smooth transitions for hover effects
Gradient text, glows, and decorative animations.
Colorful gradient text effects
Frosted glass effects with backdrop blur — Apple's 2025 design language
backdrop-blur-md bg-white/20
backdrop-blur-xl bg-ds-elevated/50
Uses glass-panel utility class
Lighter blur for performance
Text and box glow with optional pulse
Box with Glow
Pulsing Glow
Five switchable color palettes with automatic component adaptation.
All components use design system utilities (bg-ds-*, text-ds-*, border-ds-*) that automatically adapt to the selected theme. Switch themes using the switcher at the top of the page to see components update in real-time.
The same components rendered in the current theme
This card adapts to all themes
Uses secondary background
Use design system utilities or CSS variables
This component works in all themes
Complete design system reference • Switch themes to see adaptation • Back to Lab