Palette
Trust blue + orange CTA contrast [Accent adjusted from #F97316 for WCAG 3:1]
One enormous scrollable display combining every individual UI style page into a single continuous showcase. Each block preserves its own palette, font pairing, chart module, and mock website slice.
Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools
style fit score
Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading
Trust blue + orange CTA contrast [Accent adjusted from #F97316 for WCAG 3:1]
Classic Elegant
Playfair Display / Inter
Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs
style fit score
Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow
Indigo primary + emerald CTA [Accent adjusted from #10B981 for WCAG 3:1]
Modern Professional
Poppins / Open Sans
Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation
style fit score
Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth
Success green + urgency orange [Accent adjusted from #F97316 for WCAG 3:1]
Tech Startup
Space Grotesk / DM Sans
Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs
style fit score
No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks
Premium dark + gold accent [Accent adjusted from #CA8A04 for WCAG 3:1]
Editorial Classic
Cormorant Garamond / Libre Baskerville
Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR
style fit score
WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)
Professional navy + blue CTA
Minimal Swiss
Inter / Inter
Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer
style fit score
Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms
Dark bg + green positive indicators
Playful Creative
Fredoka / Nunito
Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light
style fit score
Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus
Blue data + amber highlights [Accent adjusted from #F59E0B for WCAG 3:1]
Bold Statement
Bebas Neue / Source Sans 3
High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Government, healthcare, education, inclusive products, large audience, legal compliance, public
style fit score
Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets
Calm cyan + health green
Wellness Calm
Lora / Raleway
Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px). A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games
style fit score
Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions
Playful indigo + energetic orange [Accent adjusted from #F97316 for WCAG 3:1]
Developer Mono
JetBrains Mono / IBM Plex Sans
Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections
style fit score
Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph
Bold pink + cyan accent [Accent adjusted from #06B6D4 for WCAG 3:1]
Retro Vintage
Abril Fatface / Merriweather
Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk
style fit score
CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)
Monochrome + blue accent
Geometric Modern
Outfit / Work Sans
2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate
style fit score
No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons
Neon purple + rose action
Luxury Serif
Cormorant / Montserrat
Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education
style fit score
Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)
High contrast navy + blue
Friendly SaaS
Plus Jakarta Sans / Plus Jakarta Sans
Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic aberration. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Premium SaaS, high-end e-commerce, creative platforms, branding experiences, luxury portfolios
style fit score
Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions
Gold trust + purple tech
News Editorial
Newsreader / Roboto
Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS
style fit score
Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions
Vibrant rose + engagement blue
Handwritten Charm
Caveat / Quicksand
Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components
style fit score
Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic
Teal focus + action orange [Accent adjusted from #F97316 for WCAG 3:1]
Corporate Trust
Lexend / Source Sans 3
Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, WCAG AAA, universal. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Public services, education, healthcare, finance, government, accessible consumer, inclusive
style fit score
Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic
Indigo brand + doc hierarchy [Accent adjusted from #F97316 for WCAG 3:1]
Brutalist Raw
Space Mono / Space Mono
Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences
style fit score
Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions
AI purple + cyan interactions [Accent adjusted from #06B6D4 for WCAG 3:1]
Fashion Forward
Syne / Manrope
Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid
style fit score
Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA
Purple tech + gold value
Soft Rounded
Varela Round / Nunito Sans
Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies
style fit score
Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect
Creator pink + engagement orange [Accent adjusted from #F97316 for WCAG 3:1]
Premium Sans
Satoshi / General Sans
Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers
style fit score
Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback
Calm indigo + success green [Accent adjusted from #10B981 for WCAG 3:1]
Vietnamese Friendly
Be Vietnam Pro / Noto Sans
Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products
style fit score
Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions
Calming lavender + wellness green [Accent adjusted from #10B981 for WCAG 3:1]
Japanese Elegant
Noto Serif JP / Noto Sans JP
Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios
style fit score
Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll
Playful orange + trust blue
Korean Modern
Noto Sans KR / Noto Sans KR
Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands
style fit score
Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings
Dark tech + status green
Chinese Traditional
Noto Serif TC / Noto Sans TC
Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software
style fit score
Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction
Electric cyan + eco green [Accent adjusted from #22C55E for WCAG 3:1]
Chinese Simplified
Noto Sans SC / Noto Sans SC
Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services
style fit score
Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal
Excitement purple + urgency orange [Accent adjusted from #F97316 for WCAG 3:1]
Arabic Elegant
Noto Naskh Arabic / Noto Sans Arabic
Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational
style fit score
Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative
Dark audio + warm accent
Thai Modern
Noto Sans Thai / Noto Sans Thai
Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing
style fit score
Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners
Romantic rose + warm orange [Accent adjusted from #F97316 for WCAG 3:1]
Hebrew Modern
Noto Sans Hebrew / Noto Sans Hebrew
Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data
style fit score
Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation
Trust blue + achievement gold [Accent adjusted from #CA8A04 for WCAG 3:1]
Legal Professional
EB Garamond / Lato
High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views
style fit score
KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect
Neutral grey + link blue
Medical Clean
Figtree / Noto Sans
Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking
style fit score
Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect
Location green + action orange [Accent adjusted from #F97316 for WCAG 3:1]
Financial Trust
IBM Plex Sans / IBM Plex Sans
Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence
style fit score
Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation
Soft pink + lavender luxury
Real Estate Luxury
Cinzel / Josefin Sans
Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance
style fit score
Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare
Premium black + gold accent [Accent adjusted from #CA8A04 for WCAG 3:1]
Restaurant Menu
Playfair Display SC / Karla
Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning
style fit score
Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations
Appetizing red + warm gold [Accent adjusted from #CA8A04 for WCAG 3:1]
Art Deco
Poiret One / Didact Gothic
Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking
style fit score
Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill
Energy orange + success green
Magazine Style
Libre Bodoni / Public Sans
Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics
style fit score
Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions
Trust teal + professional blue
Crypto/Web3
Orbitron / Exo 2
Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
CRM dashboards, sales management, opportunity tracking, performance management, quota planning
style fit score
Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights
Sky blue + adventure orange [Accent adjusted from #F97316 for WCAG 3:1]
Gaming Bold
Russo One / Chakra Petch
Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs
style fit score
box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography
Luxury navy + gold service [Accent adjusted from #CA8A04 for WCAG 3:1]
Indie/Craft
Amatic SC / Cabin
Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS
style fit score
grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions
Romantic pink + elegant gold [Accent adjusted from #CA8A04 for WCAG 3:1]
Startup Bold
Clash Display / Satoshi
Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment, youth-focused
style fit score
linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes
Authority navy + trust gold
E-commerce Clean
Rubik / Nunito Sans
Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment
style fit score
Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts
Security blue + protected green [Accent adjusted from #22C55E for WCAG 3:1]
Academic/Research
Crimson Pro / Atkinson Hyperlegible
Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Wellness apps, sustainability brands, eco products, health apps, meditation, organic food brands
style fit score
Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes
Trust navy + premium gold [Accent adjusted from #CA8A04 for WCAG 3:1]
Dashboard Data
Fira Code / Fira Sans
Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces
style fit score
Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals
Progress teal + achievement orange [Accent adjusted from #F97316 for WCAG 3:1]
Music/Entertainment
Righteous / Poppins
80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Creative agencies, music sites, youth brands, event promotion, artistic portfolios, entertainment
style fit score
transform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes
Compassion blue + action orange [Accent adjusted from #F97316 for WCAG 3:1]
Minimalist Portfolio
Archivo / Space Grotesk
Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Music platforms, gaming, creative portfolios, tech startups, entertainment, artistic projects
style fit score
text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines
Dark audio + play green
Kids/Education
Baloo 2 / Comic Neue
Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces
style fit score
z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax
Cinema dark + play red
Wedding/Romance
Great Vibes / Cormorant Infant
Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial
style fit score
font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace
Professional blue + success green [Accent adjusted from #22C55E for WCAG 3:1]
Science/Tech
Exo / Roboto Mono
Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages
style fit score
@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text
Trust purple + transaction green [Accent adjusted from #22C55E for WCAG 3:1]
Accessibility First
Atkinson Hyperlegible / Atkinson Hyperlegible
Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns
style fit score
transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations
Tracking blue + delivery orange [Accent adjusted from #F97316 for WCAG 3:1]
Sports/Fitness
Barlow Condensed / Barlow
Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation
style fit score
display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy
Earth green + harvest gold [Accent adjusted from #CA8A04 for WCAG 3:1]
Luxury Minimalist
Bodoni Moda / Jost
Futuristic, technical, wireframe, neon, data, transparency, iron man, sci-fi, interface. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards
style fit score
Glow effects, scanning animations, ticker text, blinking markers, fine line drawing
Industrial grey + safety orange [Accent adjusted from #F97316 for WCAG 3:1]
Tech/HUD Mono
Share Tech Mono / Fira Code
Retro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT
style fit score
Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text
Premium dark + action red
Pixel Retro
Press Start 2P / VT323
Apple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Product features, dashboards, personal sites, marketing summaries, galleries
style fit score
Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal
Pure black + white contrast
Neubrutalist Bold
Lexend Mega / Public Sans
Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards
style fit score
Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus
Energetic amber + booking blue
Academic/Archival
EB Garamond / Crimson Text
Paper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Reading apps, digital newspapers, minimal journals, distraction-free writing, slow-living brands
style fit score
No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)
Professional blue + urgent orange [Accent adjusted from #F97316 for WCAG 3:1]
Spatial Clear
Inter / Inter
Chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion
style fit score
Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop
Soft pink + safe green [Accent adjusted from #22C55E for WCAG 3:1]
Kinetic Motion
Syncopate / Space Mono
Nature-inspired, cellular, fluid, breathing, generative, algorithms, life-like. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Sustainability tech, biotech, advanced health, meditation, generative art platforms
style fit score
Breathing animations, fluid morphing, generative growth, physics-based movement
Calm blue + reassuring green [Accent adjusted from #22C55E for WCAG 3:1]
Gen Z Brutal
Anton / Epilogue
Hand-drawn, collage, scanned textures, unfinished, imperfect, authentic, human, sketch, raw marks, creative process. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Creative portfolios, artist sites, indie brands, handmade products, authentic storytelling, editorial
style fit score
No smooth transitions, hand-drawn animations, paper texture overlays, jitter effects, sketch reveal
Medical teal + health green [Accent adjusted from #22C55E for WCAG 3:1]
Classic Elegant
Playfair Display / Inter
Jelly buttons, chrome, clay, squishy, deformable, bouncy, physical, tactile feedback, press response. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Modern mobile apps, playful brands, entertainment, gaming UI, consumer products, interactive demos
style fit score
Press deformation (scale + squish), bounce-back (cubic-bezier), material response, haptic-like feedback, spring physics
Pharmacy green + trust blue
Modern Professional
Poppins / Open Sans
Muted earthy, skin tones, wood, soil, sand, terracotta, warmth, organic materials, handmade warmth. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Wellness brands, sustainable products, artisan goods, organic food, spa/beauty, home decor
style fit score
Subtle parallax, natural easing (ease-out), texture overlays, grain effects, soft shadows
Fresh blue + smile yellow [Accent adjusted from #FBBF24 for WCAG 3:1]
Tech Startup
Space Grotesk / DM Sans
Custom cursor, cursor as tool, hover effects, cursor feedback, pointer transformation, cursor trail, magnetic cursor. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Creative portfolios, interactive experiences, agency sites, product showcases, gaming, entertainment
style fit score
Cursor scale on hover, magnetic pull to elements, cursor morphing, trail effects, blend mode cursors, click feedback
Caring teal + warm orange [Accent adjusted from #F97316 for WCAG 3:1]
Editorial Classic
Cormorant Garamond / Libre Baskerville
Voice UI, multimodal, audio feedback, conversational, hands-free, ambient, contextual, speech recognition. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Voice assistants, accessibility apps, hands-free tools, smart home, automotive UI, cooking apps
style fit score
Voice waveform visualization, listening pulse, processing spinner, speak animation, smooth transitions
Natural green + floral pink
Minimal Swiss
Inter / Inter
360 product view, rotatable, zoomable, touch-to-spin, AR preview, product configurator, interactive 3D model. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
E-commerce, furniture, fashion, automotive, electronics, jewelry, product configurators
style fit score
Drag-to-rotate, pinch-to-zoom, spin animation, AR placement, material switching, smooth orbit controls
Warm brown + cream white [Accent adjusted from #F8FAFC for WCAG 3:1]
Playful Creative
Fredoka / Nunito
Complex gradients, mesh gradients, multi-color blend, aurora effect, flowing colors, iridescent, holographic, prismatic. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Hero sections, backgrounds, creative brands, music platforms, fashion, lifestyle, premium products
style fit score
CSS mesh-gradient (experimental), SVG gradients, canvas gradients, smooth color morphing, flowing animation
Deep burgundy + craft gold [Accent adjusted from #CA8A04 for WCAG 3:1]
Bold Statement
Bebas Neue / Source Sans 3
Magazine layout, asymmetric grid, editorial typography, pull quotes, drop caps, column layout, print-inspired. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
News sites, blogs, magazines, editorial content, long-form articles, journalism, publishing
style fit score
Smooth scroll, reveal on scroll, parallax images, text animations, page-flip transitions
Sky blue + booking orange [Accent adjusted from #F97316 for WCAG 3:1]
Wellness Calm
Lora / Raleway
RGB split, color fringing, glitch, retro tech, VHS, analog error, distortion, lens effect. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Music platforms, gaming, tech brands, creative portfolios, nightlife, entertainment, video platforms
style fit score
RGB offset animation, glitch timing, scan line movement, noise flicker, distortion on hover
Breaking red + link blue
Developer Mono
JetBrains Mono / IBM Plex Sans
Film grain, VHS, cassette tape, polaroid, analog warmth, faded colors, light leaks, vintage photography. A complete stacked showcase slice with hero, mock surface, palette, type, chart, components, and implementation guidance.
Photography portfolios, music/vinyl brands, vintage fashion, nostalgia marketing, film industry, cafes
style fit score
Film grain overlay, VHS tracking effect, polaroid shake, fade-in transitions, light leak animations
Editorial black + accent pink
Retro Vintage
Abril Fatface / Merriweather