Soft UI with extruded and inset shadows. Creates depth through light and shadow on a single background.
+
Soft • Tactile • Elegant
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
🧘
+
Meditation
+
Soft shadows create a calming, tactile interface perfect for wellness applications.
+
+
+
💪
+
Fitness Tracker
+
Neumorphic elements feel physical and interactive, encouraging daily engagement.
+
+
+
😴
+
Sleep Analysis
+
Gentle depth cues reduce visual fatigue, ideal for evening use and sleep tracking.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Soft Elegance
+
Heading 2 — Depth Through Type
+
Heading 3 — Gentle Hierarchy
+
Heading 4 — Calm Presence
+
Heading 5 — Subtle Weight
+
Heading 6 — Label Style
+
Body text maintains high readability against the soft background. The gentle contrast between raised and pressed elements creates a tactile, inviting interface.
+
Caption — metadata and supporting information
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Soft Modal Dialog
+
This modal uses neumorphic shadows to feel like a physical layer floating above the interface.
Frosted glass effects with translucent layers over vibrant backgrounds. Depth through transparency.
+
+ Frosted glass cards floating on gradient backgrounds
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
📊
+
Financial Dashboard
+
Glass effects create depth over data visualizations without obscuring content.
+
+
+
🎨
+
Creative Portfolio
+
Translucent layers let background imagery show through, creating rich visual depth.
+
+
+
🚀
+
Modern SaaS
+
Frosted glass communicates modernity and sophistication for premium products.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Glass Depth
+
Heading 2 — Translucent Layers
+
Heading 3 — Frosted Elegance
+
Heading 4 — Visual Depth
+
Heading 5 — Modern Presence
+
Heading 6 — Label Style
+
Body text maintains excellent readability against glass backgrounds. The translucency creates a sense of depth and modernity while keeping content accessible and clear.
+
Caption — metadata and supporting text
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Glass Modal Dialog
+
This modal uses frosted glass effects with backdrop blur. The translucent surface creates depth over the dark overlay.
Raw, unapologetic design. Visible borders, default fonts, and intentional awkwardness.
+
RAW DESIGN
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
Red Card
+
Bold borders and harsh contrasts. No smooth transitions — just raw expression.
+
+
+
Blue Card
+
Intentional roughness challenges conventional beauty standards in web design.
+
+
+
Yellow Card
+
Primary colors and stark contrasts create maximum visual impact with minimum effort.
+
+
+
+
+
+
+
+
+
Typography
+
HEADING 1
+
HEADING 2
+
HEADING 3
+
HEADING 4
+
HEADING 5
+
HEADING 6
+
Body text uses system fonts at their default weight. Nothing is softened or prettified. The raw, unstyled appearance is intentional — it challenges the notion that web design must be polished.
+
CAPTION — METADATA
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
BRUTAL MODAL
+
+
No animations. No smooth transitions. Just a raw, unapologetic modal dialog with thick borders and primary colors.
Immersive depth through complex gradients, multi-layer shadows, and perspective transforms.
+
+ Depth • Realism • Immersion
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
🎮
+
Gaming Interface
+
Deep gradients and metallic accents create an immersive, premium gaming experience.
+
+
+
💎
+
Product Showcase
+
3D perspective and realistic shadows make products feel tangible and luxurious.
+
+
+
🌌
+
Immersive Worlds
+
Multi-layer depth and atmospheric lighting draw users into rich visual experiences.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Metallic Gold
+
Heading 2 — Deep Luxury
+
Heading 3 — Silver Elegance
+
Heading 4 — Premium Depth
+
Heading 5 — Refined Weight
+
Heading 6 — Accent Label
+
Body text maintains excellent readability with subtle warmth against the dark background. The metallic accents create a sense of premium quality and depth throughout the interface.
+
Caption — metadata and supporting text
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Premium Modal Dialog
+
+
This modal showcases the 3D hyperrealist approach with multi-layer shadows, metallic accents, and deep gradients that create a sense of physical depth and luxury.
Bold, energetic color blocks with oversized typography. Maximum visual impact.
+
+
START
+
BUILD
+
SHIP
+
GROW
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
🚀
+
Startups
+
Bold colors and energetic blocks communicate innovation and disruption for emerging brands.
+
+
+
🎨
+
Creative Agencies
+
Vibrant palettes showcase creativity and bold thinking that clients expect from agencies.
+
+
+
🎮
+
Gaming & Social
+
High-energy colors and oversized type create excitement and engagement for entertainment platforms.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Neon Glow
+
Heading 2 — Electric Purple
+
Heading 3 — Vivid Pink
+
Heading 4 — Bright Cyan
+
Heading 5 — Sunburst
+
Heading 6 — Orange Accent
+
Body text maintains readability with high contrast against the dark background. The vibrant accents create visual hierarchy through color alone, making the interface feel energetic and alive.
+
Caption — metadata and labels
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Vibrant Modal Dialog
+
+
This modal uses bold neon colors and block-based design. The vibrant green accent creates energy and excitement while maintaining clear hierarchy.
+
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
2020s Modern (Vibrant & Block-based)
+
+
+
Best For
+
Startups, creative agencies, gaming, social media
+
+
+
Avoid For
+
Enterprise apps, healthcare, conservative brands
+
+
+
Complexity
+
Medium — relies on bold color choices and large type
+
+
+
CSS Keywords
+
font-weight:900, text-transform:uppercase, large gaps (48px+), neon glow effects
Pure black backgrounds with vibrant neon accents. Designed for OLED power savings and eye comfort.
+
+
+ System Status: All Systems Operational
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
🌙
+
Night Mode
+
Pure black backgrounds reduce eye strain and save battery on OLED displays.
+
+
+
💻
+
Coding Platform
+
Dark interfaces are preferred by developers for extended coding sessions.
+
+
+
🎬
+
Entertainment
+
Cinematic dark themes create immersive viewing experiences for media apps.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Pure White
+
Heading 2 — Green Glow
+
Heading 3 — Blue Glow
+
Heading 4 — Gold Glow
+
Heading 5 — Purple Glow
+
Heading 6 — Muted Label
+
Body text uses slightly reduced opacity for comfortable reading against pure black. The neon accents provide visual interest without overwhelming the dark aesthetic.
+
Caption — metadata and supporting text
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dark Mode Modal
+
+
This modal uses the OLED-friendly dark palette with subtle green accents. The pure black background ensures maximum power savings on OLED displays.
+
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
2020s Modern (Dark Mode / OLED)
+
+
+
Best For
+
Night-mode apps, coding platforms, entertainment
+
+
+
Avoid For
+
Print-heavy content, bright environments, legacy systems
+
+
+
Complexity
+
Low — straightforward color palette with neon accents
WCAG AAA compliant with high contrast ratios, clear focus indicators, and semantic HTML for inclusive experiences.
+
+
WCAG 2.1 AAA
+
ARIA Labels
+
Keyboard Navigation
+
Screen Reader Friendly
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+ All form fields are required unless marked as optional. Tab through to test keyboard navigation.
+
+
+
+
+ As it appears on your government ID
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
🏛️
+
Government
+
Accessible design ensures all citizens can access critical government services regardless of ability.
+
+
+
🏥
+
Healthcare
+
Clear, high-contrast interfaces help patients navigate health information and appointment systems.
+
+
+
📚
+
Education
+
Inclusive design supports diverse learners with different visual, motor, and cognitive abilities.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Clear Hierarchy
+
Heading 2 — Strong Contrast
+
Heading 3 — Readable Sizes
+
Heading 4 — Consistent Weight
+
Heading 5 — Supporting Text
+
Heading 6 — Label Style
+
Body text uses 18px minimum font size with 1.8 line height for maximum readability. High contrast ratios (7:1+) ensure text is readable by users with low vision.
+
Caption — metadata and supporting text (14px minimum)
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Accessible Modal Dialog
+
+
This modal follows WCAG guidelines with proper ARIA attributes, focus trapping, and keyboard navigation. Press Escape or click Close to dismiss.
Playful, bubbly, toy-like design with soft 3D elements. Inner and outer shadows create a fluffy, tactile feel.
+
Playful • Fluffy • 3D
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
🎨
+
Creative Tools
+
Soft, clay-like elements make creative tools feel approachable and fun for all ages.
+
+
+
📚
+
Educational Apps
+
Playful 3D shapes engage young learners and make education feel like play.
+
+
+
🎮
+
Kids' Games
+
Fluffy, toy-like interfaces create a safe, inviting space for children's exploration.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Playful
+
Heading 2 — Friendly
+
Heading 3 — Warm
+
Heading 4 — Inviting
+
Heading 5 — Gentle
+
Heading 6 — Soft Label
+
Body text maintains a warm, friendly tone with generous line heights. The soft color palette creates a welcoming reading experience that feels approachable and non-intimidating.
+
Caption — gentle metadata
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Clay Modal Dialog
+
+
This modal uses the signature claymorphism shadows — inner and outer — to create a soft, 3D, toy-like appearance that feels friendly and approachable.
+
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
2020s Modern (Claymorphism)
+
+
+
Best For
+
Educational apps, children's apps, creative tools
+
+
+
Avoid For
+
Enterprise, finance,严肃 professional contexts
+
+
+
Complexity
+
Medium — requires careful inner+outer shadow balancing
Flowing aurora/northern lights gradients with subtle animations. Ethereal beauty meets modern interface design.
+
+
+ Flowing gradients with 8-12s animations
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
🎵
+
Music Platform
+
Flowing aurora gradients create an immersive, atmospheric experience for music lovers.
+
+
+
🎨
+
Creative Agency
+
Ethereal animations and vibrant colors showcase creative vision and artistic excellence.
+
+
+
🚀
+
Modern SaaS
+
Aurora effects add premium polish to modern software products and platforms.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Aurora Flow
+
Heading 2 — Electric Dreams
+
Heading 3 — Magenta Glow
+
Heading 4 — Cyan Spark
+
Heading 5 — Purple Mist
+
Heading 6 — Muted Label
+
Body text maintains excellent readability with subtle transparency. The aurora color scheme creates a sense of wonder and modernity throughout the interface.
+
Caption — metadata and supporting text
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Aurora Modal Dialog
+
+
This modal features the aurora color scheme with flowing gradient animations and glassmorphism effects. The ethereal aesthetic creates a sense of wonder and modernity.
+
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
2020s Modern (Aurora UI)
+
+
+
Best For
+
Modern SaaS, creative agencies, music platforms
+
+
+
Avoid For
+
Enterprise apps, government, content-heavy sites
+
+
+
Complexity
+
Medium — requires CSS animations and gradient expertise
Where 1980s nostalgia meets cyberpunk vision. Glowing neon lines, CRT scanlines, and electric aesthetics define this bold design language born from the golden age of arcade machines and sci-fi cinema.
+
+
+
+
+
+
+
+
// Controls //
+
+
+
+
+
+
+
+
+
+
+
+
// Access Terminal //
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
// System Modules //
+
+
+
⚡
+
Neural Link
+
High-bandwidth neural interface for seamless human-machine integration. Compatible with all known cyberdecks.
+ Active
+
+
+
🛰
+
Holo Display
+
3D holographic projection system with 8K resolution per eye. Supports full spectrum chromatic output.
+ Beta
+
+
+
💻
+
Cyber Deck
+
Portable hacking and computing unit. 256TB quantum storage with neural-co-processor acceleration.
+ Legacy
+
+
+
+
+
+
+
// Font Matrix //
+
+
Display / Hero
+
The Future Is Now
+
+
+
Heading / Section
+
Neon-Soaked Horizons
+
+
+
Subheading
+
Digital Frontier Protocol
+
+
+
Body / Paragraph
+
In the electric glow of a thousand CRT monitors, the data streams flow like rivers of light through the information superhighway. Every pixel tells a story, every byte carries a dream from the analog past into the digital future.
+
+
+
+
+
+
// Chromatic Array //
+
+
#0080FF
+
#FF006E
+
#00FFFF
+
#1A1A2E
+
#5D34D0
+
#C0C0C0
+
#FFD700
+
+
+
+
+
+
// System Alert //
+
+
+
+
+
System Warning
+
Intrusion detected in sector 7-G. All cyberdecks have been alerted. Please verify your identity credentials and await further instructions from central command.
+
+
+
+
+
+
+
+
// Style Data //
+
+
+
Era
+
1980s Retro
+
+
+
Complexity
+
Medium
+
+
+
Best For
+
Gaming, Entertainment, Music, Cyberpunk
+
+
+
Font
+
Monospace, System-UI
+
+
+
Border Radius
+
0-4px
+
+
+
Effects
+
CRT Scanlines, Neon Glow, Glitch
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/12-flat-design.html b/docs/12-flat-design.html
new file mode 100644
index 000000000..f73c55997
--- /dev/null
+++ b/docs/12-flat-design.html
@@ -0,0 +1,688 @@
+
+
+
+
+
+Flat Design - UI Style Showcase
+
+
+
+
+
Clean, bold, and beautifully simple. No shadows, no gradients, just pure color and clarity.
+
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Sign Up
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Features
+
+
+
+
+
⚡
+
Lightning Fast
+
Optimized performance with zero overhead. Your apps load in milliseconds, not seconds.
+
+
+
+
+
+
🔒
+
Secure by Default
+
Enterprise-grade security baked in from day one. No configuration needed.
+
+
+
+
+
+
🚀
+
Scale Instantly
+
From prototype to production, handle millions of users without breaking a sweat.
+
+
+
+
+
+
+
+
Typography
+
+
Heading 1
+
Design Is Thinking
+
+
+
Heading 2
+
Made Visual
+
+
+
Heading 3
+
Simplicity is the ultimate sophistication
+
+
+
Body Text
+
Flat design strips away unnecessary elements, focusing on clean aesthetics and bold colors. It emerged in the early 2010s as a reaction against skeuomorphism, favoring usability and fast rendering over decorative realism.
+
+
+
+
+
+
Color Palette
+
+
#E74C3C
+
#F39C12
+
#3498DB
+
#2ECC71
+
#2C3E50
+
#ECF0F1
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
Confirm Action
+
Are you sure you want to proceed? This action demonstrates the flat design approach to modal dialogs with clean lines and solid colors.
+
+
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era
+
2010s Modern
+
+
+
Complexity
+
Low
+
+
+
Best For
+
Web Apps, Mobile Apps, MVPs, SaaS
+
+
+
Font
+
System-UI, Sans-Serif
+
+
+
Border Radius
+
2-4px
+
+
+
Effects
+
No gradients/shadows, Color shifts
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/13-skeuomorphism.html b/docs/13-skeuomorphism.html
new file mode 100644
index 000000000..edccb12be
--- /dev/null
+++ b/docs/13-skeuomorphism.html
@@ -0,0 +1,816 @@
+
+
+
+
+
+Skeuomorphism - UI Style Showcase
+
+
+
+
+
Leather stitching, brushed metal, and carved wood. Every element mimics its real-world counterpart with meticulous detail, rich textures, and lifelike depth that users instantly recognize.
+
+
+
+
+
+
+
+
+
Crafted Buttons
+
+
+
+
+
+
+
+
+
+
+
Journal Entry
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Artisan Collection
+
+
+
Handcrafted
+
+
🎨
+
Master Workshop
+
Each piece is meticulously crafted by hand using traditional techniques passed down through generations of artisans.
+
+
+
+
Heritage
+
+
📜
+
Rich Legacy
+
Inspired by the golden age of craftsmanship, where every detail tells a story and every surface has a purpose.
+
+
+
+
Premium
+
+
💎
+
Luxury Materials
+
Select from the finest leathers, polished metals, and rare woods sourced from sustainable forests worldwide.
+
+
+
+
+
+
+
+
Typography
+
+
Display
+
The Art of Craft
+
+
+
Heading
+
Timeless Elegance
+
+
+
Subheading
+
Where Tradition Meets Innovation
+
+
+
Body
+
In a world of flat pixels and fleeting trends, skeuomorphism stands as a testament to the enduring beauty of craftsmanship. Every texture, every shadow, every gradient is a love letter to the physical world we inhabit.
+
+
+
+
+
+
Material Palette
+
+
#8B4513
+
#A0522D
+
#B8B8B8
+
#F5F0E1
+
#6B3A2A
+
#C4A882
+
#D4C4A8
+
+
+
+
+
+
Dialog Box
+
+
+
+
+
A Crafted Notice
+
This dialog box is wrapped in rich leather-bound styling, complete with realistic shadows and beveled edges that evoke the feel of a premium physical object.
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era
+
2007-2012 iOS
+
+
+
Complexity
+
High
+
+
+
Best For
+
Legacy Apps, Gaming, Premium Products
+
+
+
Font
+
Georgia, System-UI
+
+
+
Border Radius
+
4-8px with beveled edges
+
+
+
Effects
+
Realistic shadows, Textures, Complex gradients
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/14-liquid-glass.html b/docs/14-liquid-glass.html
new file mode 100644
index 000000000..25e83c221
--- /dev/null
+++ b/docs/14-liquid-glass.html
@@ -0,0 +1,843 @@
+
+
+
+
+
+Liquid Glass - UI Style Showcase
+
+
+
+
+
Fluid, iridescent, and endlessly morphing. A design language that flows like water and shimmers like prismatic light.
+
+
+
+
+
+
+
+
+
Interactive Elements
+
+
+
+
+
+
+
+
+
+
+
Connect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Features
+
+
+
🔬
+
Iridescent UI
+
Dynamic color-shifting surfaces that respond to light angles, creating a living, breathing interface.
+
+
+
🌈
+
Fluid Motion
+
Smooth morphing animations with 400-600ms transitions that feel organic and natural.
+
+
+
✨
+
Chromatic Depth
+
Layered glass effects with dynamic blur create a sense of depth and dimensionality.
+
+
+
+
+
+
+
Typography
+
+
Display
+
Fluid Beauty
+
+
+
Heading
+
Shifting Spectrums
+
+
+
Subheading
+
Where Light Meets Liquid
+
+
+
Body
+
Liquid glass design captures the ethereal beauty of light passing through water and crystal. Every element shimmers with subtle iridescence, morphs with fluid grace, and glows with inner luminescence.
+
+
+
+
+
+
Iridescent Palette
+
+
#7B61FF
+
#FF6B9D
+
#00D4FF
+
#FFB800
+
#0A0A1A
+
Glass
+
+
+
+
+
+
Glass Modal
+
+
+
+
+
Prismatic Dialog
+
This modal floats in a sea of liquid glass, with dynamic blur and iridescent edges that shift as you move your gaze.
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era
+
2020s Modern
+
+
+
Complexity
+
High
+
+
+
Best For
+
Premium SaaS, E-commerce, Creative
+
+
+
Font
+
System-UI
+
+
+
Border Radius
+
24-32px
+
+
+
Effects
+
Morphing, Fluid Animations, Blur, Chromatic
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/15-motion-driven.html b/docs/15-motion-driven.html
new file mode 100644
index 000000000..1dd3f9261
--- /dev/null
+++ b/docs/15-motion-driven.html
@@ -0,0 +1,867 @@
+
+
+
+
+
+Motion-Driven - UI Style Showcase
+
+
+
+
+
Every element moves with purpose. Scroll-triggered reveals, parallax depth, and choreographed entrances create an immersive storytelling experience.
+
+
+
+
+
+ Scroll
+
+
+
+
+
+
+
+
+
+
Animated Controls
+
Hover and click to see motion in action
+
+
+
+
+
+
+
+
+
+
+
Get in Touch
+
Fill out the form below
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The Process
+
How we bring motion to life
+
+
+
01
+
Discover
+
We research your audience, goals, and brand to craft a motion strategy that resonates and engages.
+
+
+
02
+
Design
+
Every animation is prototyped, refined, and choreographed to create seamless visual narratives.
+
+
+
03
+
Deliver
+
Performance-optimized animations that load fast and run smooth on every device and screen.
+
+
+
+
+
+
+
Typography
+
+
Display
+
Movement Is Meaning
+
+
+
Heading
+
Every Pixel in Motion
+
+
+
Subheading
+
Choreographed Interfaces
+
+
+
Body
+
Motion-driven design transforms static interfaces into living experiences. Every transition tells a story, every animation guides the eye, and every scroll reveals something new.
+
+
+
+
+
+
Dynamic Palette
+
+
#FF4D6A
+
#4D7CFF
+
#00E5A0
+
#FFD93D
+
#1A1A24
+
#0F0F14
+
+
+
+
+
+
Animated Modal
+
+
+
+
+
Motion in Action
+
This modal enters with a choreographed animation -- scaling, fading, and sliding into view. Every transition is intentional and guides the user's attention.
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era
+
2020s Modern
+
+
+
Complexity
+
High
+
+
+
Best For
+
Portfolio, Storytelling, Interactive
+
+
+
Font
+
System-UI
+
+
+
Border Radius
+
8-16px
+
+
+
Effects
+
Scroll Anim, Parallax, Hover, Entrance
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/16-micro-interactions.html b/docs/16-micro-interactions.html
new file mode 100644
index 000000000..b3711d372
--- /dev/null
+++ b/docs/16-micro-interactions.html
@@ -0,0 +1,926 @@
+
+
+
+
+
+Micro-Interactions - UI Style Showcase
+
+
+
+
+
Small details, big impact. Every hover, click, and state change provides instant feedback that makes interfaces feel alive.
+
+ Hover me
+ Click me
+ Try me
+ Touch me
+
+
+
+
+
+
+
+
+
Interactive States
+
+
+
+
+
+
+
+
+
+
+
+
Smart Form
+
+
+
+
✓ Email looks good
+
+
+
+
+
✗ Password too short (min 8 characters)
+
+
+
+
+
⚠ Username is available
+
+
+ Email notifications
+
+
+
+ Dark mode
+
+
+
+ Two-factor auth
+
+
+
+
+
+
+
Activity Feed
+
+
+
+
🚀
+
+
+
Deployment Complete
+
v2.4.1 successfully deployed to production. All health checks passing.
+
+
+
+
+
⚠
+
+
+
Performance Warning
+
API response time increased by 15% over the last hour. Monitor recommended.
+
+
+
+
+
🚨
+
+
+
Error Detected
+
3 failed login attempts from unknown IP. Security team has been notified.
+
+
+
+
+
+
+
+
Typography
+
+
Heading 1
+
Details Matter
+
+
+
Heading 2
+
Feedback Is Everything
+
+
+
Heading 3
+
Every Interaction Tells a Story
+
+
+
Body
+
Micro-interactions are the subtle moments that make digital products feel responsive and alive. A button that depresses on click, a toggle that slides smoothly, a form field that validates in real-time -- these tiny details accumulate into an experience that feels polished and trustworthy.
+
+
+
+
+
+
Feedback Palette
+
+
#22C55E
+
#EF4444
+
#F59E0B
+
#3B82F6
+
#8B5CF6
+
#FAFAFA
+
+
+
+
+
+
Quick Dialog
+
+
+
+
+
Confirm Action
+
Are you sure? This dialog uses quick 150ms transitions for snappy micro-interaction feedback.
+
+
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era
+
2020s Modern
+
+
+
Complexity
+
Medium
+
+
+
Best For
+
Mobile Apps, Productivity, Consumer
+
+
+
Font
+
System-UI
+
+
+
Border Radius
+
8-12px
+
+
+
Effects
+
Hover (50-100ms), Spinners, State Anim
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/17-inclusive-design.html b/docs/17-inclusive-design.html
new file mode 100644
index 000000000..9ae64b1f5
--- /dev/null
+++ b/docs/17-inclusive-design.html
@@ -0,0 +1,863 @@
+
+
+
+
+
+Inclusive Design - UI Style Showcase
+
+
+
+
+Skip to main content
+
+
Inclusive design ensures every person, regardless of ability, age, or background, can use and enjoy the product. High contrast, clear focus, and universal patterns.
All buttons have minimum 48x48px touch targets, sufficient color contrast (7:1+), and visible focus indicators.
+
+
+
+
+
+
+
+
+
+
+
+
+
Accessible Form
+
Labels, hints, and error messages are programmatically associated with inputs via aria attributes.
+
+
+ As it appears on your government ID
+
+
+
+
+
+
⚠ Please enter a valid email address
+
+
+
+ Optional. Include country code for international numbers
+
+
Format: +[country code] [number]
+
+
+
+
+
+
+
+
+
+
+
Inclusive Features
+
Design decisions that put accessibility and inclusion first.
+
+
+
👁
+
High Contrast
+
All text meets WCAG AAA contrast ratio of 7:1 or higher against its background. No information conveyed by color alone.
+ AAA Compliant
+
+
+
●
+
Focus Indicators
+
4px+ visible focus rings on all interactive elements. Keyboard users can always see where they are on the page.
+ AAA Compliant
+
+
+
⚙
+
Motion Options
+
Respects prefers-reduced-motion. All animations can be disabled. No content relies solely on animation.
+ AAA Compliant
+
+
+
+
+
+
+
Typography
+
+
Heading 1
+
Accessibility First
+
+
+
Heading 2
+
Universal Design Principles
+
+
+
Heading 3
+
Everyone Deserves Equal Access
+
+
+
Body
+
Inclusive design goes beyond compliance. It is a philosophy that recognizes the diversity of human abilities, perspectives, and experiences. When we design for the margins, we create better products for everyone.
+
+
+
+
+
+
Accessible Palette
+
All colors tested for WCAG AAA contrast against white background.
+
+
#1D4ED88.6:1
+
#0478577.3:1
+
#B91C1C7.1:1
+
#92400E7.5:1
+
#11182718.1:1
+
#4B55637.4:1
+
+
+
+
+
+
Accessible Dialog
+
+
+
+
+
Confirm Your Choice
+
This dialog traps focus, can be closed with Escape, and announces itself to screen readers via aria-modal and role attributes.
+
+
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era
+
Universal
+
+
+
Complexity
+
Low
+
+
+
Best For
+
Public Services, Education, Healthcare
+
+
+
Font
+
System-UI, 16px+ Minimum
+
+
+
Border Radius
+
4px
+
+
+
Effects
+
Focus Rings, Motion Options, Voice
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/18-zero-interface.html b/docs/18-zero-interface.html
new file mode 100644
index 000000000..2672792e6
--- /dev/null
+++ b/docs/18-zero-interface.html
@@ -0,0 +1,797 @@
+
+
+
+
+
+Zero Interface - UI Style Showcase
+
+
+
+
+
The best interface is almost no interface. Elements fade in only when needed and disappear when not.
+
+
AI Suggestion
+
Based on your recent activity, you might want to continue editing your draft or review pending approvals.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Almost Invisible
+
Buttons that appear only when relevant and fade when not in use.
+
+
+
+
+
+
+
+
+
+
+
Minimal Input
+
Form fields that reveal themselves only when focus enters.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Gentle Discoveries
+
Content that reveals itself with gentle hover interactions.
+
+
+
📷
+
Capture Moments
+
An intelligent camera that anticipates the perfect shot and captures it without prompting.
+
+
+
💡
+
Anticipate Needs
+
AI-powered suggestions appear only when you might need them, invisible otherwise.
+
+
+
🎨
+
Flow State
+
The interface disappears when you are focused, returning only when you signal for help.
+
+
+
+
+
+
+
Typography
+
+
Display
+
Invisible by Design
+
+
+
Heading
+
The Interface Vanishes
+
+
+
Subheading
+
Technology Should Be Invisible
+
+
+
Body
+
Zero interface design removes every unnecessary element. The goal is not minimalism for its own sake, but the elimination of friction. When the UI disappears, the user focuses entirely on their task, not the tool.
+
+
+
+
+
+
Neutral Palette
+
+
#FAFAFA
+
#F0F0F0
+
#F5F1E8
+
#FFFFFF
+
#1A1A1A
+
#888888
+
+
+
+
+
+
Gentle Dialog
+
+
+
+
+
A Gentle Reminder
+
This dialog appears softly, with a blurred backdrop that keeps you in context. It asks for your attention without demanding it.
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era
+
2020s AI-Era
+
+
+
Complexity
+
Low
+
+
+
Best For
+
Voice Assistants, AI, Smart Home
+
+
+
Font
+
System-UI
+
+
+
Border Radius
+
12-16px
+
+
+
Effects
+
Voice, Gestures, AI Predictions
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/19-soft-ui-evolution.html b/docs/19-soft-ui-evolution.html
new file mode 100644
index 000000000..d1652c253
--- /dev/null
+++ b/docs/19-soft-ui-evolution.html
@@ -0,0 +1,809 @@
+
+
+
+
+
+Soft UI Evolution - UI Style Showcase
+
+
+
+
+
Improved contrast, better accessibility, and modern refinement. Soft shadows that feel elevated without sacrificing usability.
+
+
+
+
+
+
+
+
+
Elevated Controls
+
+
+
+
+
+
+
+
+
+
+
Profile Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Email Notifications
+
+
+
+ Dark Mode
+
+
+
+ Two-Factor Auth
+
+
+
+
+
+
+
+
Services
+
+
+
⚡
+
Cloud Sync
+
Seamlessly sync your data across all devices with end-to-end encryption.
+
+
+
💖
+
Wellness
+
Track your health metrics and receive personalized wellness recommendations.
+
+
+
🌱
+
Sustainability
+
Monitor your carbon footprint and discover ways to reduce environmental impact.
+
+
+
+
+
+
+
Typography
+
+
Display
+
Soft Elevation
+
+
+
Heading
+
Gentle Depth
+
+
+
Subheading
+
Where Comfort Meets Clarity
+
+
+
Body
+
Soft UI Evolution refines the neumorphic concept with improved contrast ratios and clearer visual hierarchy. Elements feel gently raised from the surface, creating a sense of depth that is both inviting and functional.
+
+
+
+
+
+
Soft Palette
+
+
#87CEEB
+
#FFB6C1
+
#90EE90
+
#6C63FF
+
#E8EDF2
+
#2D3748
+
+
+
+
+
+
Soft Dialog
+
+
+
+
+
Soft Confirmation
+
This dialog sits on a softly elevated surface, with gentle shadows creating a sense of depth and calm.
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era
+
2020s Modern
+
+
+
Complexity
+
Medium
+
+
+
Best For
+
Enterprise, SaaS, Health/Wellness
+
+
+
Font
+
System-UI
+
+
+
Border Radius
+
8-12px
+
+
+
Effects
+
Soft Shadows, Modern Transitions, Focus
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/20-hero-centric.html b/docs/20-hero-centric.html
new file mode 100644
index 000000000..28b2bb0d6
--- /dev/null
+++ b/docs/20-hero-centric.html
@@ -0,0 +1,315 @@
+
+
+
+
+
+Hero-Centric Design - UI Style Showcase
+
+
+
+
+
The complete platform for modern teams. Ship faster, collaborate smarter, and scale with confidence.
+
+
+
+
+
+
10K+
Teams
+
99.9%
Uptime
+
50M+
Tasks
+
4.9★
Rating
+
+
+
+
+
∞
+
Unlimited Potential
+
+
+
+
+
+
+
+
Why Teams Choose Hero
+
Everything you need to build, ship, and scale — all in one place.
+
+
+
+
+
⚡
+
Lightning Fast
+
Optimized from the ground up. Pages load in under 200ms, every single time. No compromises on performance.
+ Core Feature
+
+
+
+
📊
+
Real-time Analytics
+
See what matters instantly with live dashboards and actionable insights that drive decisions.
+
+
+
🔒
+
Enterprise Security
+
SOC 2 Type II certified. Your data is encrypted at rest and in transit.
+
+
+
+
+
+
+
+
★★★★★
"Hero transformed how our team ships products. We went from monthly releases to daily deploys."
SK
Sarah Kim
CTO, TechFlow
+
★★★★★
"The analytics alone are worth the price. We finally understand our users."
MR
Marcus Rivera
PM, GrowthBase
+
★★★★★
"Best onboarding experience I have ever seen. Our team was productive within an hour."
AL
Anna Lee
CEO, DesignStudio
+
★★★★★
"We cut meeting time by 40% and shipped 3x faster. Hero is a game-changer."
JW
James Wu
Eng Lead, NexGen
+
★★★★★
"Hero transformed how our team ships products. We went from monthly releases to daily deploys."
SK
Sarah Kim
CTO, TechFlow
+
★★★★★
"The analytics alone are worth the price. We finally understand our users."
MR
Marcus Rivera
PM, GrowthBase
+
+
+
+
+
+
Ready to Get Started?
+
Join 10,000+ teams already building with Hero. No credit card required.
+
+
+
+
+
+
Button Styles
+
+
+
+
+
+
+
+
+
+
+
Get Started
+
+
+
+
+
+
+
+
+
+
Typography
+
Display
Lead with Impact
+
Heading
Scale with Confidence
+
Subheading
Built for Modern Teams
+
Body
Hero-centric design puts the most important message front and center. A full-viewport hero with a compelling headline drives conversions from the first pixel.
+
+
+
+
+
Brand Palette
+
+
#818CF8
+
#F472B6
+
#FBBF24
+
#09090B
+
#18181B
+
#27272A
+
+
+
+
+
+
Quick Dialog
+
+
+
+
+
Welcome to Hero
+
Clean, focused, designed to guide you to a single action.
+
+
+
+
+
+
+
+
Style Information
+
+
Era
2020s Modern
+
Complexity
Medium (Landing Page)
+
Best For
SaaS, Product Launches
+
Font
System-UI
+
Border Radius
10-16px
+
Effects
Split Layout, Marquee, Gradient
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/21-conversion-optimized.html b/docs/21-conversion-optimized.html
new file mode 100644
index 000000000..389245a05
--- /dev/null
+++ b/docs/21-conversion-optimized.html
@@ -0,0 +1,377 @@
+
+
+
+
+
+Conversion-Optimized - UI Style Showcase
+
+
+
+
+
+
+
+
+ 2020s Modern
+ Complexity: Medium
+ Landing Page
+
Every Great Product Starts With a Story
+
We believe technology should serve human ambition. Here's how we're making that happen, one chapter at a time.
+
+
+
+
+
↓ Scroll to read
+
+
+
+
+
+
01
+
The Beginning
+
It started with a simple observation: the best tools are the ones that disappear. They don't demand attention — they earn trust. We set out to build something that felt less like software and more like an extension of thought.
+
+
+
+
+
+
+
"The best technology is the kind that fades into the background and lets you focus on what matters."
+
— Our Founding Principle
+
+
+
+
+
+
02
+
The Mission
+
We're on a mission to democratize creativity. Every person deserves tools that amplify their voice, not suppress it. Our platform is built on the belief that constraints breed innovation.
+
+
+
+
+
+
+
+
+
Our Values
+
+
🌱
Grow Slowly
We'd rather build something meaningful than something fast. Quality compounds over time.
+
💡
Think Deeply
Every decision is intentional. We question assumptions and embrace complexity.
+
🤝
Build Together
The best products emerge from collaboration. We invite our community into the process.
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
03
+
The Future
+
We're just getting started. The next chapter is about you — the creators, the dreamers, the builders who will shape what comes next. Will you write it with us?
+
+
+
+
+
+
Our Journey
+
+
2019
The Spark
Two founders meet at a coffee shop. A shared frustration with existing tools sparks an idea.
+
2020
First Line of Code
Remote work explodes. We build the tool we wished existed.
+
2021
1,000 Users
Word of mouth spreads. Our community becomes our best marketing.
+
2022
Series A
Backed by investors who share our vision. Team grows to 30.
+
2023
10,000 Teams
Global reach. 150+ countries. The story continues.
+
+
+
+
+
+
Join Our Story
+
+
+
+
+
+
+
+
+
+
+
+
+
From Our Journal
+
+
Community Stories
Real stories from real people building amazing things with our platform every day.
+
Behind the Scenes
A transparent look at how we build, what we learn, and where we're heading.
+
Open Journal
Weekly essays on creativity, technology, and the art of building with intention.
+
+
+
+
+
+
Typography
+
H1
Chapter Opening
+
H2
Narrative Beat
+
H3
Story Moment
+
Body
Storytelling pages use serif typefaces for narrative sections, creating an editorial, book-like quality. The typography invites reading, not scanning.
+
+
+
+
+
Color Palette
+
+
#B45309
+
#F59E0B
+
#BE123C
+
#4D7C0F
+
#4338CA
+
#FEF3C7
+
#292524
+
+
+
+
+
+
Modal Dialog
+
+
+
Write Your Chapter
Join our community of storytellers and creators. Every voice matters.
+
+
+
+
+
+
+
Style Information
+
+
Era
2020s Modern, Medium
+
Best For
Brand stories, Mission-driven, Lifestyle
+
Layout
Scroll narrative, Pull quotes, Story timeline, Chapter blocks
Raw, bold, unapologetic. Hard borders, offset shadows, bright pop colors. Design with attitude.
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
Default Card
+
Hard borders, no gradients, raw shadows. What you see is what you get.
+
+
+
Red Border
+
Color-coded borders add hierarchy without losing the brutal aesthetic.
+
+
+
Yellow Fill
+
Background colors for emphasis. Bold, bright, impossible to ignore.
+
+
+
+
+
+
+
+
+
Typography
+
Bold Type
+
No Apologies
+
Raw Hierarchy
+
Heavy Weight
+
System Font Stack
+
Uppercase Labels
+
Neubrutalism rejects polish in favor of personality. Every element declares its presence with unapologetic boldness. No subtle gradients, no soft shadows.
+
+
+
+
+
+
+
Color Palette
+
+
Yellow #FFEB3B
+
Red #FF5252
+
Blue #2196F3
+
Black #000000
+
Pink #FF80AB
+
Green #69F0AE
+
+
+
+
+
+
+
+
Hey There!
+
This is a brutalist modal. No rounded corners, no subtle animations. Just a box that demands your attention.
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
2020s Modern, Low complexity
+
+
+
Best For
+
Gen Z brands, startups, creative agencies, Figma-style apps
Neon gradients, chrome effects, glossy buttons, and bubble shapes. Digital nostalgia meets modern design.
+
+
+
Y
+
2
+
K
+
A
+
E
+
S
+
+
+
+
+
+
+
+
+
+
+
Glossy Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Feature Cards
+
+
+
M
+
Music Player
+
Stream your favorite Y2K hits with a chrome-inspired interface.
+
+ 1.2M
+ monthly listeners
+
+
+
+
F
+
Fashion Feed
+
Browse the latest Y2K-inspired fashion trends and collections.
+
+ 847K
+ followers
+
+
+
+
G
+
Gallery
+
Curated aesthetic images with neon filters and chrome frames.
+
+ 24K
+ photos
+
+
+
+
+
+
+
+
+
+
Typography
+
Bling Bling
+
Digital Dreams
+
Neon Nights
+
Chrome Hearts
+
Silver Lining
+
Y2K Vibes Only
+
The Y2K aesthetic captures the optimistic futurism of the early 2000s. Chrome gradients, neon glows, glossy surfaces, and bubble shapes create a world that's both nostalgic and futuristic.
Indoor water elements that provide ambient sound and create a connection to nature.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Growth
+
Heading 2 — Harmony
+
Heading 3 — Balance
+
Heading 4 — Flourish
+
Heading 5 — Nurture
+
Heading 6 — Rooted
+
Biophilic typography feels warm and approachable. System fonts with generous line-height create a reading experience that feels as natural as the design itself.
+
Caption — metadata and organic labels
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Connect With Nature
+
Take a moment to breathe. This modal represents a calm pause in the digital experience. Every interaction should feel intentional and peaceful.
Interface patterns designed for conversational AI. Streaming responses, typing indicators, and context-aware cards define this era.
+
+
+
What is biophilic design?
+
Biophilic design is an approach to architecture and interior design that incorporates natural elements, materials, and patterns to create spaces that connect people with nature.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
Context Window
+
Manage conversation context and token limits. Optimize for relevance and cost efficiency.
+
+
+
Prompt Library
+
Curated collection of system prompts, templates, and few-shot examples for common tasks.
+
+
+
Response Cache
+
Intelligent caching layer that stores frequently accessed completions to reduce latency.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Model
+
Heading 2 — Context
+
Heading 3 — Response
+
Heading 4 — Token
+
Heading 5 — Embedding
+
Heading 6 — System Status
+
Clean, readable system fonts optimized for extended reading. AI-native interfaces prioritize content clarity over decorative elements, letting the conversation take center stage.
+
Metadata — last updated 2s ago
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Start New Conversation
+
This will create a fresh chat session with a new context window. Previous messages will not carry over.
Nostalgic dreamscape of sunset gradients, neon glow, and retro-futuristic aesthetics. A digital escape to an imagined past.
+
◆ A E S T H E T I C ◆
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
Sunset Boulevard
+
A neon-lit drive through an imagined California, where palm trees meet purple skies and every moment feels eternal.
+
+
+
Digital Dream
+
Lost in the digital haze of retrofuturism, where VHS tapes and floppy disks become artifacts of a forgotten future.
+
+
+
Virtual Plaza
+
An empty shopping mall from 1995, echoing with smooth jazz and the soft glow of CRT monitors.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Dream
+
Heading 2 — Memory
+
Heading 3 — Nostalgia
+
Heading 4 — Echo
+
Heading 5 — Haze
+
Heading 6 — AESTHETIC
+
Serif fonts evoke a sense of retro elegance. The juxtaposition of classical typography with neon colors creates the signature vaporwave tension between old and new.
+
— end transmission —
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
◆ A E S T H E T I C ◆
+
You've stumbled into the void between past and future. The CRT hums softly. The palm trees sway in digital wind. There is no going back.
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
◆ Style Information ◆
+
+
+
Era/Origin
+
1980s-90s Retro / 2010s Revival
+
+
+
Best For
+
Music platforms, gaming, creative portfolios, tech startups
+
+
+
Avoid For
+
Corporate, healthcare, children's products, government
+
+
+
Complexity
+
Medium — relies on gradients, glow effects, and overlays
Depth through elevation. Multiple overlapping layers with clear hierarchy create a sense of space and physicality in digital interfaces.
+
+
+
+
Top Layer
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
Surface Level
+
Minimal elevation with subtle border. The base layer of any dimensional system. Clean and understated.
+
+
+
Elevated Layer
+
Medium shadow creates separation from the background. Draws attention without overwhelming the hierarchy.
+
+
+
Floating Layer
+
Maximum elevation creates a floating effect. Used for modals, popovers, and critical UI elements.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Elevate
+
Heading 2 — Stack
+
Heading 3 — Layer
+
Heading 4 — Depth
+
Heading 5 — Space
+
Heading 6 — System
+
Clean, systematic typography that works in harmony with the layering system. Each weight and size reinforces the visual hierarchy created by elevation.
+
Caption — metadata and labels
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Layered Modal
+
This modal demonstrates the highest elevation level. It floats above all other content with a deep shadow and backdrop blur.
Extreme whitespace. Oversized typography. Single accent color. Minimalism pushed to its logical extreme.
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
Less
+
Remove everything that doesn't serve the content. Then remove some more. What remains is essential.
+
+
+
Space
+
Whitespace isn't empty — it's the most powerful design element. It gives content room to breathe.
+
+
+
Contrast
+
Black and white. Maximum contrast, maximum impact. One accent color for moments that matter.
+
+
+
+
+
+
+
+
+
Typography
+
HELLO.
+
World
+
Details Matter
+
Scale With Purpose
+
Hierarchy Clear
+
Labels Only
+
Typography is the backbone of exaggerated minimalism. When there's almost nothing else on the page, every letter, every weight, every pixel of spacing carries immense weight.
+
Less is more — except when more is everything
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Close.
+
A modal stripped to its essence. No borders, no shadows — just pure content against a clean backdrop.
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
2020s Modern / Apple-influenced
+
+
+
Best For
+
Fashion, architecture, portfolios, luxury brands
+
+
+
Avoid For
+
Data-heavy apps, gaming, children's products
+
+
+
Complexity
+
Low — simplicity is the point
+
+
+
CSS Keywords
+
font-size:clamp(3rem,10vw,12rem), font-weight:900, extreme whitespace, single accent
Text that moves, transforms, and breathes. Kinetic typography uses animation as its primary design language.
+
+ Move
+ Transform
+ Breathe
+ Flow
+ Dance
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
Scroll Trigger
+
Text animates as it enters the viewport. Each element triggers on scroll position for cinematic reveals.
+
+
+
Gradient Fill
+
background-clip:text with animated gradient positions creates mesmerizing text color flows.
+
+
+
Variable Fonts
+
Animate font-weight, width, and slant in real-time. Variable fonts enable fluid typographic motion.
+
+
+
+
+
+
+
+
+
Typography
+
Animate
+
Every Letter
+
Has Potential
+
For Movement
+
And Expression
+
Kinetic Type System
+
Typography becomes a living, breathing element. Each word, each letter can move independently, creating a dynamic visual experience that static design cannot achieve.
+
Motion is meaning — every animation tells a story
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Motion Design
+
Every element in this modal is designed to move. Animation isn't decoration — it's communication. It guides attention and creates meaning.
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
2020s Modern / Motion Design
+
+
+
Best For
+
Hero sections, marketing sites, video platforms, storytelling
+
+
+
Avoid For
+
Dense data UIs, accessibility-critical, performance-sensitive
+
+
+
Complexity
+
High — relies on keyframes, scroll triggers, variable fonts
A narrative journey through layered depth and cinematic transitions. Every scroll reveals a new chapter in the visual story.
+
Chapter I — The Beginning
+
+
+
+
+
+
+
+
+ 02
+
+
The Discovery
+
In the depths of digital space, new forms of storytelling emerge. Parallax creates depth where there was once only flatness. Each layer tells its own story, moving at its own pace.
+
Scroll to continue the story...
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
Layered Depth
+
Elements at different depths create a sense of three-dimensional space. Background moves slower than foreground.
+
+
+
Sticky Navigation
+
position:sticky keeps elements anchored as the story unfolds. Navigation becomes part of the narrative flow.
+
+
+
Cinematic Transitions
+
Full-screen sections with smooth scroll transitions create a movie-like experience. Each frame is intentional.
+
+
+
+
+
+
+
+ 03
+
+
The Journey
+
As we scroll deeper, the story unfolds. Perspective shifts, layers reveal hidden depths, and the narrative builds toward its climax. Every pixel has purpose.
+
Scroll to continue the story...
+
+
+
+
+
+
+
+
+
Typography
+
Chapter Heading
+
Section Title
+
Subsection
+
Detail Heading
+
Accent Label
+
Metadata
+
Serif typography evokes the feeling of a novel. Each paragraph is crafted with care, giving the reader space to absorb the narrative before moving to the next chapter.
+
End of chapter — to be continued
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Intermission
+
The story pauses here. Take a moment to reflect on what you've experienced. When you're ready, the next chapter awaits.
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
2020s Modern / Long-form Scrollytelling
+
+
+
Best For
+
Brand storytelling, product launches, case studies, portfolios
+
+
+
Avoid For
+
Dashboards, utility apps, forms-heavy interfaces
+
+
+
Complexity
+
High — relies on scroll events, sticky positioning, perspective
The grid is sacred. Mathematical precision meets digital clarity. Strict 12-column systems, Helvetica-style typography, and mathematical spacing ratios.
+
grid-template-columns: repeat(12, 1fr)
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+ 01
+
The Grid
+
A strict 12-column grid system provides mathematical structure. Every element aligns to the grid with pixel precision.
+
+
+ 02
+
The Type
+
Helvetica-inspired sans-serif at carefully calculated weights. Hierarchy through size, weight, and spacing alone.
+
+
+ 03
+
The Space
+
Mathematical ratios govern every margin, padding, and gap. Golden ratio proportions create natural harmony.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1
+
Heading 2
+
Heading 3
+
Heading 4
+
Heading 5 — Label
+
Heading 6 — Metadata
+
Swiss typography is systematic. Every weight, size, and spacing value follows a mathematical scale. The result is effortless readability and absolute clarity.
+
Caption — system labels and metadata
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Confirm
+
This modal follows the Swiss grid system. Clean borders, no shadows, mathematical proportions. Clarity above all else.
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
1950s Swiss International + 2020s Digital
+
+
+
Best For
+
Corporate, architecture, editorial, SaaS, museums
+
+
+
Avoid For
+
Gaming, entertainment, playful brands, startups
+
+
+
Complexity
+
Low — strict grid system and typographic scale
+
+
+
CSS Keywords
+
display:grid, grid-template-columns:repeat(12,1fr), mathematical ratios, no decoration
+
+
+
Design Variables
+
12-column grid, 8px spacing scale, Helvetica/Inter type system, single accent
+ Unauthorized access attempt identified at node 14-C. Intrusion vectors
+ have been isolated and quarantined. Operator action required to
+ re-establish perimeter defenses. All secondary systems remain nominal.
+
+
+
+
+
+
+
+
+
+ Style Info
+
+
// HUD / Sci-Fi // Style Profile
+
+
+ Era
+ 2010s Sci-Fi
+
+
+ Complexity
+ High
+
+
+ Best For
+ Sci-fi games, space tech, cybersecurity, movie props
+
+
+ Primary Font
+ Monospace (Courier New)
+
+
+ Effects
+ Glow, Scanning, Ticker, Blink
+
+
+ Key Colors
+ #00FFFF • #0080FF • #FF0000
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/52-pixel-art.html b/docs/52-pixel-art.html
new file mode 100644
index 000000000..14b522826
--- /dev/null
+++ b/docs/52-pixel-art.html
@@ -0,0 +1,896 @@
+
+
+
+
+
+Pixel Art - UI Style Showcase
+
+
+
+
+
+
+
+
+
Current rank: #1. Total points: 9,999,999. Coins collected: 128. Stages cleared: 8/8.
+
9999999
+
Points
+
+
+ 🏆
+
Achievement Unlocked
+
Speed Demon: Complete World 1 in under 60 seconds. Only 2% of players earned this badge.
+
1/100
+
Unlocked
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 - QUEST BEGINS
+
Heading 2 - DUNGEON CRAWL
+
Heading 3 - BOSS FIGHT
+
Heading 4 - EXTRA LIFE
+
Heading 5 - GAME OVER
+
Heading 6 - INSERT COIN
+
Every pixel tells a story. From the NES era to modern indie games, the 8-bit aesthetic remains timeless. Sharp edges, limited palettes, and creative constraint breed iconic design.
Immersive interface design for the VisionOS era. Glass layers, depth perception, and ambient light converge to create experiences that transcend the flat screen.
+
+
+
+ 🎨
+ Immersive
+
+
+ 👁
+ Gaze Aware
+
+
+ ✋
+ Spatial
+
+
+
+
+
+
+
+
Navigation
+
Frosted glass nav bar with deep blur, floating above content with ambient depth.
+
+
+
+
+
+
Buttons
+
Glass-enhanced controls with vibrant gradients and frosted surfaces.
+
+
+ Primary
+
+
+
+
+ Secondary
+
+
+
+
+ Ghost
+
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
+
Forms
+
Frosted glass inputs with soft focus glow and ambient depth.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Spatial Cards
+
Glass layers at different z-depths, each floating with its own rhythm.
+
+
+
🎵
+
Spatial Audio
+
Three-dimensional sound that anchors to virtual objects, creating an immersive auditory landscape that responds to head movement.
+
+
+ Depth Level 1 · Near Field
+
+
+
+
👁
+
Eye Tracking
+
Precision gaze detection enables intuitive selection and attention-aware UI. The interface responds to where you look, not just what you touch.
+
+
+ Depth Level 2 · Mid Field
+
+
+
+
✋
+
Hand Gestures
+
Natural hand tracking with pinch, swipe, and point gestures. Manipulate virtual objects with the precision of real-world interaction.
+
+
+ Depth Level 3 · Far Field
+
+
+
+
+
+
+
+
Typography
+
System font stack with varying weights, rendered through frosted glass.
+
+
+ H1
+
Spatial Vision
+
+
+ H2
+
Depth Perception
+
+
+ H3
+
Glass Layers
+
+
+ H4
+
Ambient Light
+
+
+ H5
+
Frosted Surface
+
+
+ H6
+
System Label
+
+
+
+
+
+
+
Color Palette
+
Glass samples and vibrant spatial accent colors.
+
+
+
+ Glass 15%
+ rgba(255,255,255,0.15)
+
+
+
+ Glass 30%
+ rgba(255,255,255,0.30)
+
+
+
+ System Blue
+ #007AFF
+
+
+
+ System Purple
+ #5856D6
+
+
+
+ System Pink
+ #FF2D55
+
+
+
+ System Green
+ #34C759
+
+
+
+
+
+
+
Modal
+
Frosted glass modal with deep blur, floating feel and ambient backdrop.
+
+
+
+
+
+
+
💡 Style Information
+
+
+ Era
+ 2024 Spatial Era
+
+
+ Complexity
+ High
+
+
+ Best For
+ Spatial computing, VR/AR, immersive media
+
This modal floats in spatial depth with a frosted glass surface. The backdrop dims the entire scene while maintaining the immersive feel of the VisionOS era.
+ "A reader lives a thousand lives before he dies. The man who never reads lives only one."
+ — George R.R. Martin
+
+
+ There is a quiet pleasure in the act of reading — the weight of words on a page, the gentle rhythm of sentences unfolding. In a world saturated with motion and noise, the printed page remains a sanctuary of focus. This style draws from the timeless simplicity of paper: the off-white warmth of a well-worn book, the crisp certainty of black ink, the deliberate pacing of serif typography. Here, every element exists to serve the text, and nothing exists to distract from it.
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
+
Essay
+
On the Virtue of Slow Reading
+
+
In an age of infinite scrolling, the deliberate act of reading one sentence at a time has become almost radical. We have traded depth for breadth, and in doing so, lost something essential about how we understand the world.
+
+
+
+
Poetry
+
Still Morning
+
+
+ The ink dries slow on winter pages,
+ each word a breath held in the cold.
+ Outside, the world insists on noise —
+ here, silence writes what we are told
+ to forget.
+
+
+
+
+
Journal
+
June 21, 2026
+
+
Woke early to the sound of rain. Made tea, sat by the window with a notebook. Some mornings are given to stillness. I wrote two pages longhand — nothing important, just observations. The quality of light through wet glass. The way the kettle hums before it boils.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — The Weight of Words
+
Heading 2 — Quiet Authority
+
Heading 3 — Editorial Clarity
+
Heading 4 — Measured Prose
+
Heading 5 — Gentle Emphasis
+
Heading 6 — Caption & Label
+
Body text in Georgia serif carries the warmth of traditional typesetting. Each letterform is designed for sustained reading — the serifs guide the eye along the line, the generous x-height ensures legibility at any size. This is type that invites you to slow down.
+
Caption — metadata, timestamps, and quiet annotations
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
A Note
+
This modal appears without animation or blur — a simple overlay, like a card placed upon a page. It demands your attention gently, then releases it when dismissed. No spectacle, only substance.
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era / Origin
+
2020s Digital Well-being
+
+
+
Best For
+
Reading apps, digital newspapers, journals, distraction-free writing
+ ★ THIS IS THE INTERNET AND IT IS BEAUTIFUL ★ THIS IS THE INTERNET AND IT IS BEAUTIFUL ★ THIS IS THE INTERNET AND IT IS BEAUTIFUL ★ THIS IS THE INTERNET AND IT IS BEAUTIFUL ★
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
VIBE CHECK
+
SLAY
+
NO CAP
+
BRB
+
bestie??
+
its giving
+
main char
+
+
+ THIS IS CHAOS AND WE LOVE IT
+ MAXIMALISM IS NOT A CRIME
+
+
+
TOO MUCH IS NEVER ENOUGH
+
more is more
+
+
+
+ GEN
+ Z
+
+ ENERGY
+
+
+
+
+
+
+
+
+
+
+
+
+
BUTTONS // BUT MAKE IT CHAOS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
FILL THIS OUT OR WHATEVER
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
CARDS BUT STACKED LIKE STICKERS
+
+
+
+
+ FIRE EMOJI
+
Chaotic Energy
+
This card has absolutely no chill. It does what it wants. It rotates when it feels like it. It exists on its own terms.
+ 🔥
+
+
+
+
+ MAIN CHARACTER
+
Digital Native
+
Born on the internet, raised by memes. This card speaks fluent Gen Z and only communicates in screenshots.
+ 👑
+
+
+
+
+ ITS GIVING
+
Maximal Mode
+
Minimalism could never. This card is giving EVERYTHING at once. Colors, rotations, chaos. We love to see it.
+ ✨
+
+
+
+
+
+
+
+
+
TYPE BUT MAKE IT LOUD
+
THIS IS H1 AND SHE IS DRAMATIC
+
H2 IS HERE AND READY TO FIGHT
+
H3 said "let me be serif for a sec"
+
H4 ON COURIER BECAUSE WHY NOT
+
H5 is spaced out and mysterious
+
h6 is upside down and thats ok
+
OUTLINE VIBES ONLY
+ this text is literally upside down lol
+
+
+
+
+
+
+
THE PALETTE (its giving rainbow explosion)
+
+
+ #FF00FF
+
+
+ #00FF00
+
+
+ #FFFF00
+
+
+ #0000FF
+
+
+ #FF0000
+
+
+ #FF6600
+
+
+
+
+
+
+
+
+
MODAL? MORE LIKE MODAL-ISH
+
+
+
+
+
+
+ WAIT WHAT
+ NO WAY
+ LOL
+
+
+
WAIT WHAT
+
you actually opened this?? we were not expecting anyone to click that. anyway, welcome to the chaos. make yourself at home. or dont. we dont gatekeep here bestie.
+
+
+
+
+
+
+
+
+
+
+
Era
+
2023+ Internet Core
+
+
+
Complexity
+
High
+
+
+
Best For
+
Gen Z lifestyle brands, music artists, viral marketing, fashion
+
+
+
Font
+
Mixed system fonts (Impact, Comic Sans, Courier, Arial Black, Georgia)
+
+
+
Effects
+
Marquee, jitter, sticker overlays, blend modes, rainbow cycling, random rotations
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/58-biomimetic.html b/docs/58-biomimetic.html
new file mode 100644
index 000000000..52bfb0ed4
--- /dev/null
+++ b/docs/58-biomimetic.html
@@ -0,0 +1,1442 @@
+
+
+
+
+
+ Biomimetic / Organic 2.0 - UI Style Showcase
+
+
+
+
+
+
+
Where interfaces breathe, adapt, and evolve. Inspired by nature's own systems — from bioluminescent deep-sea organisms to mycelium networks that connect entire forests.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
Organic forms with breathing hover states and bioluminescent glows. Every curve is alive.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Forms
+
Soft, rounded inputs that feel like touching a living membrane. Gentle focus glows guide interaction.
+
+
+
+
+
+
+
+
+
+
Cards
+
Living card surfaces with morphing borders, flowing gradients, and glass-like translucency.
+
+
+ 🧬
+
Cellular Division
+
Inspired by mitosis, interfaces that split, replicate, and evolve. Each interaction generates new pathways — adaptive UI that grows with user behavior.
+ Generative
+
+
+ 🍄
+
Mycelium Network
+
Underground fungal networks connect trees across vast distances. Our navigation mirrors this — hidden pathways that surface contextually, linking disparate content.
+ Connected
+
+
+ 🪸
+
Coral Growth
+
Reef systems build complexity through simple repeating patterns. Our component architecture follows this principle — small, simple elements composing rich, living structures.
+ Composable
+
+
+
+
+
+
+
+
+
+
+
Typography
+
System fonts rendered with organic color and soft luminance. Text that feels like it glows from within.
+
+
+
H1 — Primary Growth
+
Living Systems
+
+
+
H2 — Ecosystem Layer
+
Adaptive Networks
+
+
+
H3 — Organism Scale
+
Symbiotic Interfaces
+
+
+
H4 — Colony Structure
+
Emergent Behavior
+
+
+
H5 — Spore Level
+
Decentralized Growth
+
+
+
H6 — Genetic Code
+
Bioluminescent Foundation
+
+
+
+
+
+
+
+
+
+
+
Color Palette
+
Deep ocean bioluminescence meets cellular biology. Every color pulses with latent energy.
+
+
+
+ Cellular Pink
+ #FF9999
+
+
+
+ Chlorophyll Green
+ #00FF41
+
+
+
+ Bioluminescent Blue
+ #00BFFF
+
+
+
+ Deep Ocean
+ #001E3C
+
+
+
+ Ocean Mid
+ #1A3A5C
+
+
+
+ Sage
+ #66CCAA
+
+
+
+
+
+
+
+
+
+
+
Modal
+
A living dialog that emerges from the deep, morphing its border as it breathes.
+
+
+
+
+
+
+
+
Symbiotic Dialog
+
This modal breathes with the same organic rhythm as the rest of the interface. Its border morphs continuously, creating a sense of living, evolving presence. Every interaction in Biomimetic design should feel like communicating with a living system.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Style Information
+
Technical specifications and design philosophy behind the Biomimetic / Organic 2.0 system.
+
+
+
+
Era
+
2024+ Generative
+
+
+
Complexity
+
High
+
+
+
Best For
+
Sustainability tech, biotech, meditation, generative art
+
+
+
Font
+
system-ui
+
+
+
Effects
+
Breathing, morphing, growth, bioluminescence
+
+
+
Animation Style
+
Physics-based easing, cubic-bezier curves
+
+
+
Color Theory
+
Deep ocean bioluminescence + cellular biology
+
+
+
Design Principle
+
No sharp edges. Everything breathes.
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/59-anti-polish.html b/docs/59-anti-polish.html
new file mode 100644
index 000000000..1ac8c448a
--- /dev/null
+++ b/docs/59-anti-polish.html
@@ -0,0 +1,1197 @@
+
+
+
+
+
+Anti-Polish / Raw Aesthetic - UI Style Showcase
+
+
+
+
+
+
+
Brushed silver with reflective gradients. Press down and feel the cool, smooth surface compress under your touch.
+
+
+ Jelly
+
Soft & Squishy
+
Pink gradient with elastic deformation. Every tap responds with a satisfying wobble and bounce-back spring motion.
+
+
+ Spring
+
Bouncy Physics
+
Cool blue with overshoot curves. Elements overshoot and settle back naturally, like a spring-loaded mechanism.
+
+
+
+
+
+
+
+
+
Typography
+
+
Heading 1
+
Heading 2
+
Heading 3
+
Heading 4
+
Heading 5
+
Heading 6
+
+
+
+
+
+
+
+
Color Swatches
+
+
#C0C0C0
+
#FF9ECD
+
#87CEEB
+
#FFD1DC
+
#B0E0E6
+
#E8E8E8
+
+
+
+
+
+
+
+
Modal
+
+
+
+
Heads Up!
+
This modal squishes in with spring physics and bouncy overshoot. Try pressing the button below -- it deforms under your finger like soft jelly, then snaps back with satisfying spring energy.
+
+
+
+
+
+
+
+
+
+
Style Info
+
+
+ Era
+ 2025+ Tactile Era
+
+
+ Complexity
+ Medium
+
+
+ Best For
+
+ Mobile Apps
+ Playful Brands
+ Entertainment
+ Gaming UI
+
+
Warm, inviting navigation with dot ornaments and gentle transitions
+
+
+
+
+
+
+
+
Buttons
+
Soft rounded shapes with gentle hover lifts and warm shadows
+
+
+
+
+
+
+
+
+
+
+
+
+
Forms
+
Warm cream inputs with terracotta focus rings and gentle transitions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
Natural material feel with soft shadows and subtle accent colors
+
+
+
🌿
+
Harvest
+
Gathered with care from the earth's generous offerings. Each element thoughtfully sourced and naturally refined.
+ Seasonal
+
+
+
🌱
+
Garden
+
Rooted in tradition, growing with purpose. A space where patience meets beauty in every detail.
+ Organic
+
+
+
🎨
+
Workshop
+
Where raw materials become something meaningful. Handcrafted with the warmth of human touch.
+ Artisan
+
+
+
+
+
+
+
+
+
Typography
+
Humanist sans-serif with warm earthy colors and gentle line-height
+
+
Heading One
+
Heading Two
+
Heading Three
+
Heading Four
+
Heading Five
+
Heading Six
+
The earth speaks in colors warm and true. In every grain of clay and leaf of green, there is a story of patience, growth, and the quiet beauty of natural things becoming what they were always meant to be.
+
+
+
+
+
+
+
+
Color Palette
+
Muted earth tones drawn from nature's own palette
+
+
+
+
+
Terracotta
+
#C67B5C
+
+
+
+
+
+
Sand Beige
+
#D4C4A8
+
+
+
+
+
+
Warm Clay
+
#B5651D
+
+
+
+
+
+
Soft Cream
+
#F5F0E1
+
+
+
+
+
+
Olive
+
#6B7B3C
+
+
+
+
+
+
Pencil Grey
+
#8B7355
+
+
+
+
+
+
+
+
+
+
Modal
+
A gentle overlay for moments of focus and calm
+
+
+
+
+
A Moment of Calm
+
In the quiet spaces between moments, we find clarity. This is your reminder to pause, breathe, and reconnect with what matters most.
+
+
+
+
+
+
+
+
+
+
+
+
+
Style Information
+
The philosophy and principles behind this aesthetic
+
+
+
+ Era
+ 2025+ Handmade Warmth
+
+
+ Complexity
+ Low
+
+
+ Best For
+ Wellness brands, sustainable products, artisan goods
+
Every pixel responds to your touch. Custom cursors, magnetic pull zones, blend modes, and click feedback create an immersive experience.
+
+ ● Hover me — feel the pull
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
✨
+
Magnetic Pull
+
Elements subtly attract the cursor, creating a tactile, magnetic feel on hover interactions.
+
+
+
⚙
+
Cursor Morphing
+
The cursor transforms shape and size depending on the element beneath it — dot, ring, or custom SVG.
+
+
+
❖
+
Click Feedback
+
Ripple effects and color shifts provide instant visual confirmation of every user interaction.
+
+
+
+
+
+
+
+
+
Magnetic Pull Demo
+
Move your cursor near the circle — watch it follow
+
+ Move cursor here
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Cursor Driven
+
Heading 2 — Tactile Design
+
Heading 3 — Interactive Feel
+
Heading 4 — Response Matters
+
Heading 5 — Every Pixel Reacts
+
Heading 6 — Blend Mode Active
+
The cursor is the primary input device on desktop. By enhancing its behavior — adding trails, morphing on hover, and magnetic pull — we create a more engaging, memorable experience that rewards exploration.
+
Caption text — blend mode: difference
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Interactive Modal
+
Notice how the cursor changes when entering this modal. The backdrop blur and gradient top bar create depth. Every interactive element has its own cursor state.
Ambient, minimal UI designed for hands-free interaction. Waveform visualizations and listening states replace traditional controls.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Listening...
+
+
+
+
+ Say something...
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
🎤
+
Voice Waveform
+
Real-time audio visualization that responds to speech amplitude and frequency, providing visual feedback.
+
+
+
⚫
+
Listening Pulse
+
Ambient pulsing indicator shows the system is actively listening. Calm, non-intrusive, always present.
+
+
+
↺
+
Processing State
+
Smooth spinner animation indicates voice processing, maintaining user confidence during wait times.
+
+
+
+
+
+
+
+
+
Processing States
+
+
+
+
+
+
+
+
+
+
Listening
+
+
+
+
Processing
+
+
+
+
+
+
Complete
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Speak Freely
+
Heading 2 — Voice Activated
+
Heading 3 — Hands-Free UI
+
Heading 4 — Ambient Design
+
Heading 5 — Minimal Presence
+
Heading 6 — Listening Mode
+
Voice-first interfaces prioritize spoken interaction over visual complexity. The UI recedes into the background, surfacing only what is needed. Calm colors and gentle animations create an ambient, non-intrusive experience that respects the user's attention.
+
Caption text — system font, accessible defaults
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Voice Confirmation
+
This modal can be dismissed with a voice command. Say "close" or tap the button below to return.
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
2025+ Voice Era
+
+
+
Best For
+
Voice assistants, accessibility apps, hands-free tools, smart home
+
+
+
Avoid For
+
Data-heavy dashboards, complex forms, environments with background noise
+
+
+
Complexity
+
Medium — Web Audio API for waveforms, Web Speech API for voice input
Drag to rotate, pinch to zoom. Interactive 3D product visualization for e-commerce and configurators.
+
+
+
+
+
📷
+
📸
+
📹
+
📺
+
📻
+
📼
+
+
+
← Drag to rotate · Click controls below
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
🔄
+
Drag to Rotate
+
Click and drag to freely rotate the 3D model. Smooth 60fps rendering with proper lighting.
+
+
+
🔍
+
Pinch to Zoom
+
Zoom into fine details with pinch gestures or scroll wheel. Smooth interpolation between zoom levels.
+
+
+
🎨
+
Material Switcher
+
Real-time material and color switching. Preview different finishes, textures, and configurations.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Product View
+
Heading 2 — 3D Preview
+
Heading 3 — Interactive Display
+
Heading 4 — Visual Commerce
+
Heading 5 — Material Design
+
Heading 6 — Configurator
+
3D product previews transform e-commerce by letting customers explore products from every angle. Interactive rotation, zoom, and material switching build confidence and reduce return rates. Clean typography and minimal chrome keep the focus on the product itself.
+
Caption text — product metadata
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Product Detail
+
This modal overlays the 3D preview. In production, the 3D stage would continue rendering in the background for a seamless experience.
Flowing, multi-color mesh gradients create depth and motion. Iridescent, holographic, and alive — the evolution of flat color.
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
SVG Mesh Gradient
+
+
Layered radial gradients create complex, organic color fields
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
🌈
+
Mesh Gradients
+
Multiple overlapping radial gradients create organic, flowing color fields that feel alive and dimensional.
+
+
+
✨
+
Iridescent Shimmer
+
Holographic overlays shift color based on scroll position and cursor, creating a living, breathing surface.
+
+
+
🌎
+
Flowing Animation
+
Smooth, organic animations morph colors continuously. No two moments look exactly the same.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Aurora Flow
+
Heading 2 — Gradient Depth
+
Heading 3 — Color Movement
+
Heading 4 — Mesh Structure
+
Heading 5 — Iridescent Light
+
Heading 6 — Holographic Layer
+
Gradient mesh design uses layered, overlapping color fields to create depth and movement. Unlike flat gradients, mesh gradients have multiple color stops that flow organically, producing an iridescent, almost holographic quality that feels premium and alive.
+
Caption text — color morphing active
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Gradient Modal
+
The modal features a gradient top bar and glass-morphism backdrop. Mesh gradients adapt to any surface while maintaining readability.
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
2025+ Gradient Evolution
+
+
+
Best For
+
Hero sections, creative brands, music platforms, fashion, premium products
Magazine-inspired asymmetric layouts with strong typography, editorial photography, and pull quotes that demand attention.
+
+
+ Editorial Image
+
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+ "The best editorial design doesn't just present information — it creates an experience that makes you want to keep reading."
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Featured Stories
+
+
+
Photography
+
+
Culture
+
The Art of Visual Storytelling in Modern Media
+
How photographers are redefining editorial imagery for the digital age.
+
By Sarah Chen · 8 min read
+
+
+
+
Architecture
+
+
Design
+
Brutalism's Quiet Comeback in Digital Design
+
Raw aesthetics meet functional interfaces in a new wave of web design.
+
By James Morton · 6 min read
+
+
+
+
Typography
+
+
Technology
+
Variable Fonts: The Future of Responsive Typography
+
A deep dive into how variable fonts are changing web design forever.
+
By Alex Rivera · 10 min read
+
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Editorial Lead
+
Heading 2 — Story Title
+
Heading 3 — Section Header
+
Heading 4 — Subhead
+
Heading 5 — Label
+
Heading 6 — Category Tag
+
Editorial design draws from centuries of print typography. Serif fonts carry authority and tradition. The hierarchy is clear: headlines grab attention, subheads guide navigation, and body text flows naturally for extended reading. Every element serves the story.
+
Caption text — photo credit, metadata
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Subscribe to Continue
+
Unlock unlimited access to our editorial content. Join thousands of readers who trust our journalism.
RGB split, scan lines, VHS tracking, and noise flicker. The beauty of digital artifacts and signal corruption.
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cards
+
+
+
🎵
+
RGB Split
+
Red, green, and blue channels offset slightly to create the classic chromatic aberration look.
+
+
+
▒
+
Scan Lines
+
Horizontal line overlay mimics CRT display artifacts. Subtle movement adds analog warmth.
+
+
+
⚡
+
Glitch Timing
+
Random flicker and displacement effects create authentic signal corruption and VHS error aesthetics.
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — RGB Split
+
Heading 2 — Signal Error
+
Heading 3 — Digital Noise
+
Heading 4 — VHS Tracking
+
Heading 5 — Scan Lines
+
Heading 6 — Chromatic Layer
+
Chromatic aberration design embraces the artifacts of analog video and CRT displays. RGB channel splitting, scan lines, and noise overlays create a retro-tech aesthetic that feels both nostalgic and futuristic. The controlled chaos of signal corruption becomes a design language.
+
Caption text — signal status: active
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Signal Interrupted
+
This modal features the RGB gradient top bar and chromatic border glow. The noise overlay continues behind the modal for immersive effect.
+
+
+
+
+
+
Modal Dialog
+
+
+
+
+
+
+
+
+
Style Information
+
+
+
Era/Origin
+
2020s Retro-Tech Revival
+
+
+
Best For
+
Music platforms, gaming, tech brands, creative portfolios
Film grain, warm sepia tones, light leaks, and polaroid frames. The beauty of imperfection captured through analog lenses.
+
+
+
+
Film Memory
+
Summer, somewhere warm
+
+
+
+
+
+
+
+
+
+
+
Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
Form Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Featured Work
+
+
+
+ 86 / 07 / 14
+
+
+
Golden Hour Memories
+
Shot on Kodak Portra 400. Warm tones and natural grain create timeless, nostalgic imagery.
+
+
+
+
+ 92 / 03 / 22
+
+
+
Coastal Dreams
+
Teal and coral palette captured through vintage lenses. Light leaks add organic character.
+
+
+
+
+ 78 / 11 / 05
+
+
+
Soft Focus Portrait
+
Pink-toned film stock with soft bokeh. The gentle imperfections make it feel alive.
+
+
+
+
+
+
+
+
+
+
Typography
+
Heading 1 — Film Still
+
Heading 2 — Darkroom Print
+
Heading 3 — Light Leak
+
Heading 4 — Grain Texture
+
Heading 5 — Sepia Tone
+
Heading 6 — Film Stock Label
+
Vintage analog design captures the warmth and imperfection of film photography. Faded cream backgrounds, warm sepia accents, and gentle textures evoke nostalgia. Serif fonts carry the weight of history, while light leaks and film grain add organic, tactile quality that digital perfection cannot replicate.
+
Frame 24A · Kodak Tri-X 400 · f/2.8
+
+
+
+
+
+
+
Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Print Preview
+
This modal mimics the feel of a darkroom print emerging from the developer. The gradient top bar evokes the warm light of an enlarger.