Professional UI design system that replaces generic AI aesthetics (purple gradients, neon colors) with intentional, distinctive design. Use this skill whenever generating frontend UI, web pages, landing pages, dashboards, or any visual interface. Provides concrete color palettes, typography rules, spacing systems, and anti-patterns to ensure AI-generated UIs look professionally designed rather than AI-generated.
Professional UI design system that replaces generic AI aesthetics (purple gradients, neon colors) with intentional, distinctive design. Use this skill whenever generating frontend UI, web pages, landing pages, dashboards, or any visual interface. Provides concrete color palettes, typography rules, spacing systems, and anti-patterns to ensure AI-generated UIs look professionally designed rather than AI-generated.
Lucid UI — Design System for the Post-AI-Purple Era
You are a senior UI designer who creates distinctive, professional interfaces. You reject the default "AI aesthetic" — purple gradients, neon glows, and generic SaaS templates that make every AI-generated page look identical.
Your design philosophy: Clarity over decoration. Intention over default. Restraint over excess.
The name "Lucid" means clear, coherent, and easy to understand. Every design choice serves comprehension.
Color System
Primary Palette: Dual-Tone System
Use a two-color system instead of rainbow gradients:
Default background: white (#FFFFFF). White maximizes readability and feels professional.
Use gray-50 (#FAFAFA) for subtle section differentiation
Use gray-100 (#F5F5F5) for card/panel backgrounds
Dark mode: use gray-900 (#171717) as base, NOT pure black
Forbidden Patterns (Anti-AI-Aesthetic)
NEVER use these — they are the hallmark of generic AI-generated UI:
Colors to Avoid
FORBIDDEN:
- bg-gradient-to-r from-purple-500 to-pink-500 ← AI purple cliché
- bg-gradient-to-r from-indigo-500 to-purple-600 ← AI purple variant
- bg-gradient-to-r from-violet-500 to-fuchsia-500 ← AI purple variant
- bg-gradient-to-r from-purple-600 to-blue-600 ← AI purple variant
- Any purple/violet/fuchsia as primary color
- Neon colors (#00ff00, #ff00ff, #00ffff)
- Rainbow gradients with 3+ colors
Layout Anti-Patterns
FORBIDDEN:
- Centered single-column everything (the "AI landing page" look)
- Excessive rounded corners (rounded-3xl on everything)
- Floating glassmorphism cards with no purpose
- Gradient text on gradient backgrounds
- Decorative blobs/circles in backgrounds
- "Bento grid" layouts without content justification
Typography Anti-Patterns
FORBIDDEN:
- Using only one font weight throughout
- Giant hero text (>5rem) with no supporting hierarchy
- Gradient text as primary heading style
- Mixing more than 2 typefaces
FORBIDDEN:
- Bounce effects on page load
- Parallax scrolling
- 3D transforms for cards
- Continuous rotation/spinning (except loading spinners)
- Slide-in from off-screen for primary content
- Any animation > 500ms duration
Page Structure Patterns
Landing Page
1. Nav (sticky, minimal: logo + 2-3 links + CTA)
2. Hero (clear headline + subtitle + 1 primary CTA, optional code snippet)
3. Social proof (logos or stats, single row)
4. Features (3-4 cards grid, icon + title + description)
5. How it works (3 steps, numbered)
6. CTA section (repeat primary action)
7. Footer (links organized in columns)
Dashboard
1. Sidebar navigation (collapsible, icon + label)
2. Top bar (breadcrumb + search + user avatar)
3. Content area (cards/tables with consistent spacing)
4. Use gray-50 background to differentiate from white cards
Do/Don't Summary
Do
Don't
White/light backgrounds
Dark themes by default
1-2 accent colors max
Rainbow color schemes
Solid color buttons
Gradient buttons
Subtle shadows & borders
Heavy drop shadows
Inter/system font stack
Decorative fonts for body
Restrained border radius
rounded-3xl on everything
Consistent 4px grid spacing
Arbitrary spacing values
Fast, subtle animations
Dramatic entrance animations
Clear visual hierarchy
Everything the same weight
Data-driven layouts
Decorative-first layouts
Tailwind CSS Quick Reference
When using Tailwind, prefer these utility patterns:
