Claude Code Guide

UI/UX Pro Max guide

67 styles + 96 palettes + 57 fonts — visual preview and one-click palette copy.

UI/UX Pro Max guide

67 UI styles, 96 color palettes, 56 font pairings — activate this skill before designing any UI and Claude brings real design vocabulary to the conversation instead of guessing.

Both are skills — don't prefix with /:
ui-ux-pro-max and frontend-design are Claude Code skills (not slash commands). Don't type a leading / — just describe what you're building in plain language and Claude auto-activates them.

The two-step combo works best:
Step 1 — describe the UI you want to build · ui-ux-pro-max auto-activates → pick a style, palette, and fonts; lock in the design language.
Step 2 — ask Claude to build with the direction you just picked · frontend-design auto-activates → production-grade UI code in that style.

Using ui-ux-pro-max on its own still helps you pick a direction; pairing it with frontend-design is what saves you from generic, AI-shaped output.

Want animation? Add the official GSAP skills:
Design locked, code written, and now you want it to move (entrance transitions, scroll parallax, hover micro-interactions)? One line installs GreenSock's official GSAP animation skills (7.5k★, 8 modules); after that just describe it and Claude uses them:

npx skills add https://github.com/greensock/gsap-skills

e.g. "add an entrance animation to this hero", "build a ScrollTrigger parallax". Full how-to is in "Daily use · From install to fully automated", step 12.7 in the left menu. Bonus: after Webflow's acquisition, formerly-paid plugins like SplitText and MorphSVG are now free.

Two-command combo

Step	Command	What you say
Step 1 Pick a style	`ui-ux-pro-max`	`I'm building a fintech data SaaS — recommend a design style and palette`
Step 2 Generate code	`frontend-design`	`Use the dark minimalism direction we just picked, build the data dashboard home`

Solo ui-ux-pro-max recipes

What you want	How to ask Claude
Design a new page	`Design a SaaS landing page in glassmorphism on a dark background`
Pick a palette	`I'm building a fintech app — recommend a palette and font pairing`
Restyle a component	`Reskin this login form in neumorphism`
Audit existing UI	`Audit this page for UX issues and check WCAG compliance`
Don't know what style fits	`I'm building a healthcare app — what design style fits best?`

67 UI styles 96 color palettes 57 font pairings

67 UI styles

67/67

Minimalism & Swiss Style

极简主义与瑞士风格

For Enterprise apps · Clean, simple, spacious, functional, white space, high contrast

Neumorphism

新拟物化

For Health/wellness apps · Soft UI, embossed, debossed, convex, concave, light source

Glassmorphism

玻璃拟态

For Modern SaaS · Frosted glass, transparent, blurred background, layered, vibrant background, light source

RAW

Brutalism

粗野主义

For Design portfolios · Raw, unpolished, stark, high contrast, plain text, default fonts

3D & Hyperrealism

3D 超写实

For Gaming · Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements

Vibrant & Block-based

鲜艳色块

For Startups · Bold, energetic, playful, block layout, geometric shapes, high color contrast

Dark Mode (OLED)

深色模式（OLED）

For Night-mode apps · Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly

Accessible & Ethical

无障碍与伦理设计

For Government · High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state

Claymorphism

黏土拟态

For Educational apps · Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px)

Aurora UI

极光 UI

For Modern SaaS · Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric

Retro-Futurism

复古未来主义

For Gaming · Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art

Flat Design

扁平化设计

For Web apps · 2D, minimalist, bold colors, no shadows, clean lines, simple shapes

Skeuomorphism

拟物化

For Legacy apps · Realistic, texture, depth, 3D appearance, real-world metaphors, shadows

Liquid Glass

流体玻璃

For Premium SaaS · Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur

Motion-Driven

动效驱动

For Portfolio sites · Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim

Micro-interactions

微交互

For Mobile apps · Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive

Inclusive Design

包容性设计

For Public services · Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader

Zero Interface

零界面

For Voice assistants · Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive

Soft UI Evolution

软 UI 进化

For Modern enterprise apps · Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows

Neubrutalism

新粗野主义

For Gen Z brands · Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors

Bento Box Grid

便当格栅

For Dashboards · Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space

Y2K Aesthetic

Y2K 美学

For Fashion brands · Neon pink, chrome, metallic, bubblegum, iridescent, glossy

2099

Cyberpunk UI

赛博朋克

For Gaming platforms · Neon, dark mode, terminal, HUD, sci-fi, glitch

Organic Biophilic

有机亲生物

For Wellness apps · Nature, organic shapes, green, sustainable, rounded, flowing

AI-Native UI

AI 原生界面

For AI products · Chatbot, conversational, voice, assistant, agentic, ambient

Memphis Design

孟菲斯设计

For Creative agencies · 80s, geometric, playful, postmodern, shapes, patterns

Vaporwave

蒸汽波

For Music platforms · Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic

Dimensional Layering

维度层叠

For Dashboards · Depth, overlapping, z-index, layers, 3D, shadows

Exaggerated Minimalism

夸张极简

For Fashion · Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design

MOVE

Kinetic Typography

动态排版

For Hero sections · Motion text, animated type, moving letters, dynamic, typing effect, morphing

Parallax Storytelling

视差叙事

For Brand storytelling · Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic

Swiss Modernism 2.0

瑞士现代主义 2.0

For Corporate sites · Grid system, Helvetica, modular, asymmetric, international style, rational

HUD / Sci-Fi FUI

HUD / 科幻界面

For Sci-fi games · Futuristic, technical, wireframe, neon, data, transparency

Pixel Art

像素艺术

For Indie games · Retro, 8-bit, 16-bit, gaming, blocky, nostalgic

Bento Grids

便当网格

For Product features · Apple-style, modular, cards, organized, clean, hierarchy

Spatial UI (VisionOS)

空间 UI（VisionOS）

For Spatial computing apps · Glass, depth, immersion, spatial, translucent, gaze

E-Ink / Paper

墨水屏 / 纸感

For Reading apps · Paper-like, matte, high contrast, texture, reading, calm

YEEET!

✨

💜

Gen Z Chaos / Maximalism

Z 世代混沌 / 极繁

For Gen Z lifestyle brands · Chaos, clutter, stickers, raw, collage, mixed media

Biomimetic / Organic 2.0

仿生 / 有机 2.0

For Sustainability tech · Nature-inspired, cellular, fluid, breathing, generative, algorithms

Anti-Polish / Raw Aesthetic

反精致 / 原生美学

For Creative portfolios · Hand-drawn, collage, scanned textures, unfinished, imperfect, authentic

Tactile Digital / Deformable UI

触感数字 / 可变形 UI

For Modern mobile apps · Jelly buttons, chrome, clay, squishy, deformable, bouncy

Nature Distilled

自然精粹

For Wellness brands · Muted earthy, skin tones, wood, soil, sand, terracotta

Interactive Cursor Design

交互光标设计

For Creative portfolios · Custom cursor, cursor as tool, hover effects, cursor feedback, pointer transformation, cursor trail

Voice-First Multimodal

语音优先多模态

For Voice assistants · Voice UI, multimodal, audio feedback, conversational, hands-free, ambient

↻

3D Product Preview

3D 产品预览

For E-commerce · 360 product view, rotatable, zoomable, touch-to-spin, AR preview, product configurator

Gradient Mesh / Aurora Evolved

渐变网格 / 极光进化

For Hero sections · Complex gradients, mesh gradients, multi-color blend, aurora effect, flowing colors, iridescent

Editorial Grid / Magazine

编辑网格 / 杂志风

For News sites · Magazine layout, asymmetric grid, editorial typography, pull quotes, drop caps, column layout

Chromatic Aberration / RGB Split

色差 / RGB 分离

For Music platforms · RGB split, color fringing, glitch, retro tech, VHS, analog error

Vintage Analog / Retro Film

复古胶片

For Photography portfolios · Film grain, VHS, cassette tape, polaroid, analog warmth, faded colors

Data-Dense Dashboard

高密度数据看板

For Business intelligence dashboards · Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient

Heat Map & Heatmap Style

热力图风格

For Geographical analysis · Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring

$24M

↑ 12.4%

Executive Dashboard

高管看板

For C-suite dashboards · High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights

LIVE

Real-Time Monitoring

实时监控

For System monitoring dashboards · Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts

▼ Region

▼ NA

› CA · 2.3M

Drill-Down Analytics

下钻分析

For Sales analytics · Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation

Comparative Analysis Dashboard

对比分析看板

For Period-over-period reporting · Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks

Predictive Analytics

预测分析

For Forecasting dashboards · Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization

User Behavior Analytics

用户行为分析

For Conversion funnel analysis · Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis

Financial Dashboard

金融看板

For Financial reporting · Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow

Sales Intelligence Dashboard

销售智能看板

For CRM dashboards · Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking

Hero-Centric Design

主视觉中心

For SaaS landing pages · Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video

BUY

Conversion-Optimized

转化优化

For E-commerce product pages · Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals

Feature-Rich Showcase

功能展示

For Enterprise SaaS · Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs

Minimal & Direct

极简直给

For Simple service landing pages · Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric

★★★★★

Social Proof-Focused

社会证明

For B2B SaaS · Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics

Interactive Product Demo

交互式产品演示

For SaaS platforms · Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos

Trust & Authority

信任权威

For Healthcare/medical landing pages · Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges

Storytelling-Driven

故事叙述

For Brand/startup stories · Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization

Color palettes

96/96

#2563EB

#3B82F6

#F97316

#F8FAFC

#1E293B

#E2E8F0

SaaS (General)

Trust blue + orange CTA contrast

#6366F1

#818CF8

#10B981

#F5F3FF

#1E1B4B

#E0E7FF

Micro SaaS

Indigo primary + emerald CTA

#059669

#10B981

#F97316

#ECFDF5

#064E3B

#A7F3D0

E-commerce

Success green + urgency orange

#1C1917

#44403C

#CA8A04

#FAFAF9

#0C0A09

#D6D3D1

E-commerce Luxury

Premium dark + gold accent

#0EA5E9

#38BDF8

#F97316

#F0F9FF

#0C4A6E

#BAE6FD

Service Landing Page

Sky blue trust + warm CTA

#0F172A

#334155

#0369A1

#F8FAFC

#020617

#E2E8F0

B2B Service

Professional navy + blue CTA

#0F172A

#1E293B

#22C55E

#020617

#F8FAFC

#334155

Financial Dashboard

Dark bg + green positive indicators

#1E40AF

#3B82F6

#F59E0B

#F8FAFC

#1E3A8A

#DBEAFE

Analytics Dashboard

Blue data + amber highlights

#0891B2

#22D3EE

#059669

#ECFEFF

#164E63

#A5F3FC

Healthcare App

Calm cyan + health green

#4F46E5

#818CF8

#F97316

#EEF2FF

#1E1B4B

#C7D2FE

Educational App

Playful indigo + energetic orange

#EC4899

#F472B6

#06B6D4

#FDF2F8

#831843

#FBCFE8

Creative Agency

Bold pink + cyan accent

#18181B

#3F3F46

#2563EB

#FAFAFA

#09090B

#E4E4E7

Portfolio/Personal

Monochrome + blue accent

#7C3AED

#A78BFA

#F43F5E

#0F0F23

#E2E8F0

#4C1D95

Gaming

Neon purple + rose action

#0F172A

#334155

#0369A1

#F8FAFC

#020617

#E2E8F0

Government/Public Service

High contrast navy + blue

#F59E0B

#FBBF24

#8B5CF6

#0F172A

#F8FAFC

#334155

Fintech/Crypto

Gold trust + purple tech

#E11D48

#FB7185

#2563EB

#FFF1F2

#881337

#FECDD3

Social Media App

Vibrant rose + engagement blue

#0D9488

#14B8A6

#F97316

#F0FDFA

#134E4A

#99F6E4

Productivity Tool

Teal focus + action orange

#4F46E5

#6366F1

#F97316

#EEF2FF

#312E81

#C7D2FE

Design System/Component Library

Indigo brand + doc hierarchy

#7C3AED

#A78BFA

#06B6D4

#FAF5FF

#1E1B4B

#DDD6FE

AI/Chatbot Platform

AI purple + cyan interactions

#8B5CF6

#A78BFA

#FBBF24

#0F0F23

#F8FAFC

#4C1D95

NFT/Web3 Platform

Purple tech + gold value

#EC4899

#F472B6

#F97316

#FDF2F8

#831843

#FBCFE8

Creator Economy Platform

Creator pink + engagement orange

#059669

#10B981

#0891B2

#ECFDF5

#064E3B

#A7F3D0

Sustainability/ESG Platform

Nature green + ocean blue

#6366F1

#818CF8

#10B981

#F5F3FF

#312E81

#E0E7FF

Remote Work/Collaboration Tool

Calm indigo + success green

#8B5CF6

#C4B5FD

#10B981

#FAF5FF

#4C1D95

#EDE9FE

Mental Health App

Calming lavender + wellness green

#F97316

#FB923C

#2563EB

#FFF7ED

#9A3412

#FED7AA

Pet Tech App

Playful orange + trust blue

#1E293B

#334155

#22C55E

#0F172A

#F8FAFC

#475569

Smart Home/IoT Dashboard

Dark tech + status green

#0891B2

#22D3EE

#22C55E

#ECFEFF

#164E63

#A5F3FC

EV/Charging Ecosystem

Electric cyan + eco green

#D946EF

#E879F9

#F97316

#FDF4FF

#86198F

#F5D0FE

Subscription Box Service

Excitement purple + urgency orange

#1E1B4B

#312E81

#F97316

#0F0F23

#F8FAFC

#4338CA

Podcast Platform

Dark audio + warm accent

#E11D48

#FB7185

#F97316

#FFF1F2

#881337

#FECDD3

Dating App

Romantic rose + warm orange

#0369A1

#0EA5E9

#CA8A04

#F0F9FF

#0C4A6E

#BAE6FD

Micro-Credentials/Badges Platform

Trust blue + achievement gold

#475569

#64748B

#2563EB

#F8FAFC

#1E293B

#E2E8F0

Knowledge Base/Documentation

Neutral grey + link blue

#059669

#10B981

#F97316

#ECFDF5

#064E3B

#A7F3D0

Hyperlocal Services

Location green + action orange

#EC4899

#F9A8D4

#8B5CF6

#FDF2F8

#831843

#FBCFE8

Beauty/Spa/Wellness Service

Soft pink + lavender luxury

#1C1917

#44403C

#CA8A04

#FAFAF9

#0C0A09

#D6D3D1

Luxury/Premium Brand

Premium black + gold accent

#DC2626

#F87171

#CA8A04

#FEF2F2

#450A0A

#FECACA

Restaurant/Food Service

Appetizing red + warm gold

#F97316

#FB923C

#22C55E

#1F2937

#F8FAFC

#374151

Fitness/Gym App

Energy orange + success green

#0F766E

#14B8A6

#0369A1

#F0FDFA

#134E4A

#99F6E4

Real Estate/Property

Trust teal + professional blue

#0EA5E9

#38BDF8

#F97316

#F0F9FF

#0C4A6E

#BAE6FD

Travel/Tourism Agency

Sky blue + adventure orange

#1E3A8A

#3B82F6

#CA8A04

#F8FAFC

#1E40AF

#BFDBFE

Hotel/Hospitality

Luxury navy + gold service

#DB2777

#F472B6

#CA8A04

#FDF2F8

#831843

#FBCFE8

Wedding/Event Planning

Romantic pink + elegant gold

#1E3A8A

#1E40AF

#B45309

#F8FAFC

#0F172A

#CBD5E1

Legal Services

Authority navy + trust gold

#0369A1

#0EA5E9

#22C55E

#F0F9FF

#0C4A6E

#BAE6FD

Insurance Platform

Security blue + protected green

#0F172A

#1E3A8A

#CA8A04

#F8FAFC

#020617

#E2E8F0

Banking/Traditional Finance

Trust navy + premium gold

#0D9488

#2DD4BF

#F97316

#F0FDFA

#134E4A

#5EEAD4

Online Course/E-learning

Progress teal + achievement orange

#0891B2

#22D3EE

#F97316

#ECFEFF

#164E63

#A5F3FC

Non-profit/Charity

Compassion blue + action orange

#1E1B4B

#4338CA

#22C55E

#0F0F23

#F8FAFC

#312E81

Music Streaming

Dark audio + play green

#0F0F23

#1E1B4B

#E11D48

#000000

#F8FAFC

#312E81

Video Streaming/OTT

Cinema dark + play red

#0369A1

#0EA5E9

#22C55E

#F0F9FF

#0C4A6E

#BAE6FD

Job Board/Recruitment

Professional blue + success green

#7C3AED

#A78BFA

#22C55E

#FAF5FF

#4C1D95

#DDD6FE

Marketplace (P2P)

Trust purple + transaction green

#2563EB

#3B82F6

#F97316

#EFF6FF

#1E40AF

#BFDBFE

Logistics/Delivery

Tracking blue + delivery orange

#15803D

#22C55E

#CA8A04

#F0FDF4

#14532D

#BBF7D0

Agriculture/Farm Tech

Earth green + harvest gold

#64748B

#94A3B8

#F97316

#F8FAFC

#334155

#E2E8F0

Construction/Architecture

Industrial grey + safety orange

#1E293B

#334155

#DC2626

#F8FAFC

#0F172A

#E2E8F0

Automotive/Car Dealership

Premium dark + action red

#18181B

#27272A

#F8FAFC

#000000

#FAFAFA

#3F3F46

Photography Studio

Pure black + white contrast

#F59E0B

#FBBF24

#2563EB

#FFFBEB

#78350F

#FDE68A

Coworking Space

Energetic amber + booking blue

#0891B2

#22D3EE

#22C55E

#ECFEFF

#164E63

#A5F3FC

Cleaning Service

Fresh cyan + clean green

#1E40AF

#3B82F6

#F97316

#EFF6FF

#1E3A8A

#BFDBFE

Home Services (Plumber/Electrician)

Professional blue + urgent orange

#F472B6

#FBCFE8

#22C55E

#FDF2F8

#9D174D

#FCE7F3

Childcare/Daycare

Soft pink + safe green

#0369A1

#38BDF8

#22C55E

#F0F9FF

#0C4A6E

#E0F2FE

Senior Care/Elderly

Calm blue + reassuring green

#0891B2

#22D3EE

#22C55E

#F0FDFA

#134E4A

#CCFBF1

Medical Clinic

Medical teal + health green

#15803D

#22C55E

#0369A1

#F0FDF4

#14532D

#BBF7D0

Pharmacy/Drug Store

Pharmacy green + trust blue

#0EA5E9

#38BDF8

#FBBF24

#F0F9FF

#0C4A6E

#BAE6FD

Dental Practice

Fresh blue + smile yellow

#0D9488

#14B8A6

#F97316

#F0FDFA

#134E4A

#99F6E4

Veterinary Clinic

Caring teal + warm orange

#15803D

#22C55E

#EC4899

#F0FDF4

#14532D

#BBF7D0

Florist/Plant Shop

Natural green + floral pink

#92400E

#B45309

#F8FAFC

#FEF3C7

#78350F

#FDE68A

Bakery/Cafe

Warm brown + cream white

#78350F

#92400E

#FBBF24

#FEF3C7

#451A03

#FDE68A

Coffee Shop

Coffee brown + warm gold

#7C2D12

#B91C1C

#CA8A04

#FEF2F2

#450A0A

#FECACA

Brewery/Winery

Deep burgundy + craft gold

#1E3A8A

#3B82F6

#F97316

#EFF6FF

#1E40AF

#BFDBFE

Airline

Sky blue + booking orange

#DC2626

#EF4444

#1E40AF

#FEF2F2

#450A0A

#FECACA

News/Media Platform

Breaking red + link blue

#18181B

#3F3F46

#EC4899

#FAFAFA

#09090B

#E4E4E7

Magazine/Blog

Editorial black + accent pink

#6366F1

#818CF8

#22C55E

#EEF2FF

#312E81

#C7D2FE

Freelancer Platform

Creative indigo + hire green

#0F172A

#334155

#CA8A04

#F8FAFC

#020617

#E2E8F0

Consulting Firm

Authority navy + premium gold

#EC4899

#F472B6

#06B6D4

#FDF2F8

#831843

#FBCFE8

Marketing Agency

Bold pink + creative cyan

#7C3AED

#A78BFA

#F97316

#FAF5FF

#4C1D95

#DDD6FE

Event Management

Excitement purple + action orange

#1E40AF

#3B82F6

#22C55E

#EFF6FF

#1E3A8A

#BFDBFE

Conference/Webinar Platform

Professional blue + join green

#7C3AED

#A78BFA

#22C55E

#FAF5FF

#4C1D95

#DDD6FE

Membership/Community

Community purple + join green

#0369A1

#0EA5E9

#F97316

#F0F9FF

#0C4A6E

#BAE6FD

Newsletter Platform

Trust blue + subscribe orange

#6366F1

#818CF8

#22C55E

#EEF2FF

#312E81

#C7D2FE

Digital Products/Downloads

Digital indigo + buy green

#7C3AED

#A78BFA

#CA8A04

#FAF5FF

#4C1D95

#DDD6FE

Church/Religious Organization

Spiritual purple + warm gold

#DC2626

#EF4444

#FBBF24

#FEF2F2

#7F1D1D

#FECACA

Sports Team/Club

Team red + championship gold

#18181B

#27272A

#F8FAFC

#FAFAFA

#09090B

#E4E4E7

Museum/Gallery

Gallery black + white space

#1E1B4B

#312E81

#CA8A04

#0F0F23

#F8FAFC

#4338CA

Theater/Cinema

Dramatic dark + spotlight gold

#4F46E5

#818CF8

#22C55E

#EEF2FF

#312E81

#C7D2FE

Language Learning App

Learning indigo + progress green

#0F172A

#1E293B

#22C55E

#020617

#F8FAFC

#334155

Coding Bootcamp

Terminal dark + success green

#00FF41

#0D0D0D

#FF3333

#000000

#E0E0E0

#1F1F1F

Cybersecurity Platform

Matrix green + alert red

#1E293B

#334155

#22C55E

#0F172A

#F8FAFC

#475569

Developer Tool / IDE

Code dark + run green

#0EA5E9

#0284C7

#10B981

#F0F9FF

#0C4A6E

#BAE6FD

Biotech / Life Sciences

DNA blue + life green

#F8FAFC

#94A3B8

#3B82F6

#0B0B10

#F8FAFC

#1E293B

Space Tech / Aerospace

Star white + launch blue

#171717

#404040

#D4AF37

#FFFFFF

#171717

#E5E5E5

Architecture / Interior

Minimal black + accent gold

#00FFFF

#7B61FF

#FF00FF

#050510

#E0E0FF

#333344

Quantum Computing

Quantum cyan + interference purple

#FF4D4D

#4D94FF

#00E676

#F5F5F7

#1C1C1E

#E5E5EA

Biohacking / Longevity

Bio red/blue + vitality green

#00FF41

#008F11

#FF3333

#0D1117

#E6EDF3

#30363D

Autonomous Systems

Terminal green + alert red

#18181B

#3F3F46

#EC4899

#FAFAFA

#09090B

#E4E4E7

Generative AI Art

Canvas neutral + creative pink

#FFFFFF

#E5E5E5

#007AFF

#888888

#000000

#CCCCCC

Spatial / Vision OS

Glass white + system blue

#059669

#10B981

#FBBF24

#ECFDF5

#064E3B

#A7F3D0

Climate Tech

Nature green + solar gold

Font pairings

57/57

Aa Design

The quick brown fox

Classic Elegant

Heading: Playfair Display· Body: Inter

Luxury brands, fashion, spa, beauty, editorial, magazines, high-end e-commerce

Aa Design

The quick brown fox

Modern Professional

Heading: Poppins· Body: Open Sans

SaaS, corporate sites, business apps, startups, professional services

Aa Design

The quick brown fox

Tech Startup

Heading: Space Grotesk· Body: DM Sans

Tech companies, startups, SaaS, developer tools, AI products

Aa Design

The quick brown fox

Editorial Classic

Heading: Cormorant Garamond· Body: Libre Baskerville

Publishing, blogs, news sites, literary magazines, book covers

Aa Design

The quick brown fox

Minimal Swiss

Heading: Inter· Body: Inter

Dashboards, admin panels, documentation, enterprise apps, design systems

Aa Design

The quick brown fox

Playful Creative

Heading: Fredoka· Body: Nunito

Children's apps, educational, gaming, creative tools, entertainment

Aa Design

The quick brown fox

Bold Statement

Heading: Bebas Neue· Body: Source Sans 3

Marketing sites, portfolios, agencies, event pages, sports

Aa Design

The quick brown fox

Wellness Calm

Heading: Lora· Body: Raleway

Health apps, wellness, spa, meditation, yoga, organic brands

Aa Design

The quick brown fox

Developer Mono

Heading: JetBrains Mono· Body: IBM Plex Sans

Developer tools, documentation, code editors, tech blogs, CLI apps

Aa Design

The quick brown fox

Retro Vintage

Heading: Abril Fatface· Body: Merriweather

Vintage brands, breweries, restaurants, creative portfolios, posters

Aa Design

The quick brown fox

Geometric Modern

Heading: Outfit· Body: Work Sans

General purpose, portfolios, agencies, modern brands, landing pages

Aa Design

The quick brown fox

Luxury Serif

Heading: Cormorant· Body: Montserrat

Fashion brands, luxury e-commerce, jewelry, high-end services

Aa Design

The quick brown fox

Friendly SaaS

Heading: Plus Jakarta Sans· Body: Plus Jakarta Sans

SaaS products, web apps, dashboards, B2B, productivity tools

Aa Design

The quick brown fox

News Editorial

Heading: Newsreader· Body: Roboto

News sites, blogs, magazines, journalism, content-heavy sites

Aa Design

The quick brown fox

Handwritten Charm

Heading: Caveat· Body: Quicksand

Personal blogs, invitations, creative portfolios, lifestyle brands

Aa Design

The quick brown fox

Corporate Trust

Heading: Lexend· Body: Source Sans 3

Enterprise, government, healthcare, finance, accessibility-focused

Aa Design

The quick brown fox

Brutalist Raw

Heading: Space Mono· Body: Space Mono

Brutalist designs, developer portfolios, experimental, tech art

Aa Design

The quick brown fox

Fashion Forward

Heading: Syne· Body: Manrope

Fashion brands, creative agencies, art galleries, design studios

Aa Design

The quick brown fox

Soft Rounded

Heading: Varela Round· Body: Nunito Sans

Children's products, pet apps, friendly brands, wellness, soft UI

Aa Design

The quick brown fox

Premium Sans

Heading: Satoshi· Body: General Sans

Premium brands, modern agencies, SaaS, portfolios, startups

Aa Design

The quick brown fox

Vietnamese Friendly

Heading: Be Vietnam Pro· Body: Noto Sans

Vietnamese sites, multilingual apps, international products

Aa Design

The quick brown fox

Japanese Elegant

Heading: Noto Serif JP· Body: Noto Sans JP

Japanese sites, Japanese restaurants, cultural sites, anime/manga

Aa Design

The quick brown fox

Korean Modern

Heading: Noto Sans KR· Body: Noto Sans KR

Korean sites, K-beauty, K-pop, Korean businesses, multilingual

Aa Design

The quick brown fox

Chinese Traditional

Heading: Noto Serif TC· Body: Noto Sans TC

Traditional Chinese sites, cultural content, Taiwan/Hong Kong markets

Aa Design

The quick brown fox

Chinese Simplified

Heading: Noto Sans SC· Body: Noto Sans SC

Simplified Chinese sites, mainland China market, business apps

Aa Design

The quick brown fox

Arabic Elegant

Heading: Noto Naskh Arabic· Body: Noto Sans Arabic

Arabic sites, Middle East market, Islamic content, bilingual sites

Aa Design

The quick brown fox

Thai Modern

Heading: Noto Sans Thai· Body: Noto Sans Thai

Thai sites, Southeast Asia, tourism, Thai restaurants

Aa Design

The quick brown fox

Hebrew Modern

Heading: Noto Sans Hebrew· Body: Noto Sans Hebrew

Hebrew sites, Israeli market, Jewish content, bilingual sites

Aa Design

The quick brown fox

Legal Professional

Heading: EB Garamond· Body: Lato

Law firms, legal services, contracts, formal documents, government

Aa Design

The quick brown fox

Medical Clean

Heading: Figtree· Body: Noto Sans

Healthcare, medical clinics, pharma, health apps, accessibility

Aa Design

The quick brown fox

Financial Trust

Heading: IBM Plex Sans· Body: IBM Plex Sans

Banks, finance, insurance, investment, fintech, enterprise

Aa Design

The quick brown fox

Real Estate Luxury

Heading: Cinzel· Body: Josefin Sans

Real estate, luxury properties, architecture, interior design

Aa Design

The quick brown fox

Restaurant Menu

Heading: Playfair Display SC· Body: Karla

Restaurants, cafes, food blogs, culinary, hospitality

Aa Design

The quick brown fox

Art Deco

Heading: Poiret One· Body: Didact Gothic

Vintage events, art deco themes, luxury hotels, classic cocktails

Aa Design

The quick brown fox

Magazine Style

Heading: Libre Bodoni· Body: Public Sans

Magazines, online publications, editorial content, journalism

Aa Design

The quick brown fox

Crypto/Web3

Heading: Orbitron· Body: Exo 2

Crypto platforms, NFT, blockchain, web3, futuristic tech

Aa Design

The quick brown fox

Gaming Bold

Heading: Russo One· Body: Chakra Petch

Gaming, esports, action games, competitive sports, entertainment

Aa Design

The quick brown fox

Indie/Craft

Heading: Amatic SC· Body: Cabin

Craft brands, indie products, artisan, handmade, organic products

Aa Design

The quick brown fox

Startup Bold

Heading: Clash Display· Body: Satoshi

Startups, pitch decks, product launches, bold brands

Aa Design

The quick brown fox

E-commerce Clean

Heading: Rubik· Body: Nunito Sans

E-commerce, online stores, product pages, retail, shopping

Aa Design

The quick brown fox

Academic/Research

Heading: Crimson Pro· Body: Atkinson Hyperlegible

Universities, research papers, academic journals, educational

Aa Design

The quick brown fox

Dashboard Data

Heading: Fira Code· Body: Fira Sans

Dashboards, analytics, data visualization, admin panels

Aa Design

The quick brown fox

Music/Entertainment

Heading: Righteous· Body: Poppins

Music platforms, entertainment, events, festivals, performers

Aa Design

The quick brown fox

Minimalist Portfolio

Heading: Archivo· Body: Space Grotesk

Design portfolios, creative professionals, minimalist brands

Aa Design

The quick brown fox

Kids/Education

Heading: Baloo 2· Body: Comic Neue

Children's apps, educational games, kid-friendly content

Aa Design

The quick brown fox

Wedding/Romance

Heading: Great Vibes· Body: Cormorant Infant

Wedding sites, invitations, romantic brands, bridal

Aa Design

The quick brown fox

Science/Tech

Heading: Exo· Body: Roboto Mono

Science, research, tech documentation, data-heavy sites

Aa Design

The quick brown fox

Accessibility First

Heading: Atkinson Hyperlegible· Body: Atkinson Hyperlegible

Accessibility-critical sites, government, healthcare, inclusive design

Aa Design

The quick brown fox

Sports/Fitness

Heading: Barlow Condensed· Body: Barlow

Sports, fitness, gyms, athletic brands, competition

Aa Design

The quick brown fox

Luxury Minimalist

Heading: Bodoni Moda· Body: Jost

Luxury minimalist brands, high-end fashion, premium products

Aa Design

The quick brown fox

Tech/HUD Mono

Heading: Share Tech Mono· Body: Fira Code

Sci-fi interfaces, developer tools, cybersecurity, dashboards

Aa Design

The quick brown fox

Pixel Retro

Heading: Press Start 2P· Body: VT323

Pixel art games, retro websites, creative portfolios

Aa Design

The quick brown fox

Neubrutalist Bold

Heading: Lexend Mega· Body: Public Sans

Neubrutalist designs, Gen Z brands, bold marketing

Aa Design

The quick brown fox

Academic/Archival

Heading: EB Garamond· Body: Crimson Text

University sites, archives, research papers, history

Aa Design

The quick brown fox

Spatial Clear

Heading: Inter· Body: Inter

Spatial computing, AR/VR, glassmorphism interfaces

Aa Design

The quick brown fox

Kinetic Motion

Heading: Syncopate· Body: Space Mono

Music festivals, automotive, high-energy brands

Aa Design

The quick brown fox

Gen Z Brutal

Heading: Anton· Body: Epilogue

Gen Z marketing, streetwear, viral campaigns

Recommended styles by product type

Product type	Recommended styles	Prompt keywords
SaaS / productivity tools	Minimalism · Flat · Dark Mode	`modern minimal professional dark dashboard`
Fintech / data / trading	Minimalism · Dark Mode	`fintech data-dense dark professional trust`
Social / entertainment	Glassmorphism · Claymorphism	`entertainment social vibrant content-first playful`
Healthcare / wellness	Flat · Minimalism	`healthcare clean calm trustworthy minimal`
Gaming / kids	Claymorphism · Brutalism	`gaming playful vibrant bold energetic`
Brand site / portfolio	Bento Grid · Minimalism	`brand portfolio elegant premium showcase`
Developer tools / IDE	Dark Mode · Minimalism	`developer tool dark code technical precision`
E-commerce / retail	Flat · Minimalism	`ecommerce product-focused clean conversion`

Beginner walkthrough

Describe what you're building · ui-ux-pro-max auto-activates

Without it, Claude will still try; with it, the full 50+ style database is in context and the output is noticeably better.

ui-ux-pro-max

Tell Claude what you're building, let it recommend a style

Not sure which style fits? Just describe your product and Claude pulls a style + palette + font combination from the library that matches.

I'm building a stock-analysis SaaS — recommend a design style and palette

Copy the prompt from a card, replace [page name], confirm the direction

Click any prompt above to copy it. Swap [page name] for what you're actually building ("home", "login", "dashboard") and Claude returns a detailed design spec.

Ask Claude to build · frontend-design auto-activates to generate the final UI code

Once the direction is locked, this command tells Claude to produce production-grade frontend code in that style — distinctive, intentional, not template-shaped.

Use the [style name] direction we picked, build [page name]

Open the full interactive index →

Vexilo is the missing index for Claude Code — 31 agents, 125 commands, 123 skills and more, organized by scenario. Browse free; unlock search, filters and one-click CLAUDE.md export with a one-time $19 licence.