Design Language Playground
Explore our modern neumorphic design system featuring soft shadows, elegant gradients, and fluid animations. Built with OKLch color space for perceptual uniformity.
Neumorphic Elevations
Standard
Default neumorphic shadow
Hover me
Raised
Elevated neumorphic effect
More depth
Flat
Subtle neumorphic shadow
Soft touch
Core Tokens
Foundation colors for the design system
Background
Card
Popover
Border / Input
Primary
Main brand color with gradient support
Accent
Highlight color for emphasis
Ring
Focus indicator color
Destructive
Error and warning states
Brand Palette
Extended brand colors for various use cases
brand-forest
Nature-inspired green
brand-sakura
Playful pink accent
brand-dracula
Rich purple tone
brand-mist
Soft neutral tone
Color Harmony
Built with OKLch for perceptual uniformity. Colors maintain consistent brightness and adapt beautifully between light and dark modes.
Buttons
Interactive button components with neumorphic styling
Variants
Sizes
With Icons
Badges
Status and label indicators
DefaultSecondaryOutlineDestructiveGradient
Maya-Inspired Decorations
Celebrating our name's Maya heritage with tasteful geometric patterns inspired by ancient Mesoamerican art. These decorative elements blend traditional step-fret, spiral, and diamond motifs with modern neumorphic styling.
Step-Fret Pattern
Iconic Maya architectural motif
Spiral Motif
Classic Maya decorative element
Diamond Grid
Traditional Maya geometric pattern
Decorative Border Accent
Maya-inspired border combining step-fret and geometric elements
Itza Labs
Honoring our Maya heritage through thoughtful design. The name "Itza" connects us to the rich cultural history of Honduras and the broader Mesoamerican region.
Logo with Maya Accent
Example of subtle Maya pattern integration with the Itza Labs logo
Design System Features
Multi-layer Shadows
Complex shadow systems with light and dark components for realistic depth
OKLch Color Space
Perceptually uniform colors that maintain consistency across themes
Smooth Animations
Fluid transitions with cubic-bezier easing for natural motion
Dark Mode Support
Seamless theme switching with optimized colors for both modes
Gradient Backgrounds
Subtle gradients that add depth without overwhelming the design
Accessibility First
Proper focus states and color contrast for inclusive design
Ready to Build?
This design system is continuously evolving. Experiment with the components, explore the color palette, and create something beautiful.