UI/UX Pro Max - SaaS Design Intelligence
Comprehensive design guide for web and mobile applications, specifically optimized for production-ready SaaS products. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations, strictly enforcing professional design standards to prevent amateur, "vibe-coded" interfaces.
When to Apply
Reference these guidelines when:
- Designing new UI components, pages, or complex SaaS dashboards
- Choosing color palettes (especially defining 4-layer systems and dark mode) and typography
- Reviewing code for UX, layout, or accessibility issues
- Building landing pages that require high conversion trust
- Implementing theming engines using modern color spaces (OKLCH)
Rule Categories by Priority
| Priority |
Category |
Impact |
Domain |
| 1 |
Accessibility |
CRITICAL |
ux |
| 2 |
Touch & Interaction |
CRITICAL |
ux |
| 3 |
Layout & Architecture |
HIGH |
ux, product |
| 4 |
Performance |
HIGH |
ux |
| 5 |
Typography & 4-Layer Color |
MEDIUM |
typography, color |
| 6 |
Animation |
MEDIUM |
ux |
| 7 |
Style Selection |
MEDIUM |
style, product |
| 8 |
Charts & Data |
LOW |
chart |
Quick Reference: Core SaaS Philosophy
1. Component Architecture (HIGH)
- Consolidate Navigation: Group administrative links (Settings, Billing, Profile, API Keys, Logout) into a unified Account Popover menu rather than cluttering the main sidebar.
- Clean Lists/Tables: Hide secondary row actions (Edit, Delete, Duplicate) behind a clean ellipsis (three-dot) menu.
- Modals for Focus: Use centered modals with collapsed advanced options for simple forms. Never use empty, full-height flyout menus.
2. The 4-Layer Color System (MEDIUM)
- Layer 1 (Neutral Foundation): Never use pure white (
#FFFFFF) as the app background. Use off-white/light gray (bg-slate-50). Surface interactive cards as pure white to pop. Use ultra-faint borders (85% white) or subtle drop shadows.
- Layer 2 (Functional Accents): Generate a scale from 50 to 950. Main buttons = 500/600, Hover = 700, Text links = 400/500.
- Layer 3 (Semantic Communication): Success = Green, Warning = Yellow/Orange, Destructive = Red. Use OKLCH color space for charts to keep lightness/chroma constant.
- Layer 4 (Theming Engine): Generate programmatic themes using OKLCH math: convert neutral hex to OKLCH, drop lightness
-0.03, increase chroma +0.02, and slide the Hue value.
3. Dark Mode Rules (CRITICAL)
- Double the Distance: Dark colors bleed together. If light mode backgrounds step up by 2% lightness, dark mode MUST step up by 4% to 6%.
- Shift Accents Lighter: Shift primary brand colors to the 300 or 400 range for buttons/active states to ensure legibility.
How to Use
Search specific domains using the CLI tool below.
Prerequisites
Check if Python is installed:
python3 --version || python --version
If Python is not installed, install it based on the user's OS:
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
Workflow Instructions
When a user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Step 1: Analyze User Requirements
Extract key information from the user request:
- Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- Style keywords: minimal, playful, professional, elegant, dark mode, etc.
- Industry: healthcare, fintech, gaming, education, etc.
- Stack: React, Vue, Next.js, or default to
html-tailwind
Step 2: Generate Design System (REQUIRED)
**Always start with --design-system** to get comprehensive recommendations with reasoning:
python3 skills/saas-ui-master/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
This command:
- Searches 5 domains in parallel (product, style, color, landing, typography)
- Applies reasoning rules from
ui-reasoning.csv to select best matches
- Returns complete design system: pattern, style, colors, typography, effects
- Includes anti-patterns to avoid
Step 2b: Persist Design System (Master + Overrides Pattern)
To save the design system for hierarchical retrieval across sessions, add --persist:
python3 skills/saas-ui-master/scripts/search.py "<query>" --design-system --persist -p "Project Name"
This creates:
design-system/MASTER.md — Global Source of Truth with all design rulesdesign-system/pages/ — Folder for page-specific overrides
With page-specific override:
python3 skills/saas-ui-master/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
How hierarchical retrieval works:
- When building a specific page (e.g., "Checkout"), first check
design-system/pages/checkout.md
- If the page file exists, its rules override the Master file
- If not, use
design-system/MASTER.md exclusively
Step 3: Supplement with Detailed Searches (as needed)
After getting the design system, use domain searches to get additional details:
python3 skills/saas-ui-master/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
When to use detailed searches:
| Need |
Domain |
Example |
| More style options |
style |
--domain style "glassmorphism dark" |
| Chart recommendations |
chart |
--domain chart "real-time dashboard" |
| UX best practices |
ux |
--domain ux "animation accessibility" |
| Alternative fonts |
typography |
--domain typography "elegant luxury" |
| Landing structure |
landing |
--domain landing "hero social-proof" |
Step 4: Stack Guidelines (Default: html-tailwind)
Get implementation-specific best practices. If the user doesn't specify a stack, **default to html-tailwind**.
python3 skills/saas-ui-master/scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
Search Reference
Available Domains
| Domain |
Use For |
product |
Product type recommendations (SaaS, e-commerce, portfolio) |
style |
UI styles, colors, effects (glassmorphism, minimalism) |
typography |
Font pairings, Google Fonts |
color |
Color palettes by product type |
landing |
Page structure, CTA strategies (hero, pricing, social-proof) |
chart |
Chart types, library recommendations |
ux |
Best practices, anti-patterns (animation, accessibility) |
prompt |
AI prompts, CSS keywords |
Output Formats & Tips
The --design-system flag supports two output formats:
# ASCII box (default) - best for terminal display
python3 skills/saas-ui-master/scripts/search.py "fintech crypto" --design-system
# Markdown - best for documentation
python3 skills/saas-ui-master/scripts/search.py "fintech crypto" --design-system -f markdown
Tips for Better Results:
- Be specific - "healthcare SaaS dashboard" > "app"
- Combine domains - Style + Typography + Color = Complete design system
- Always check UX - Search "animation", "z-index", "accessibility" for common issues
Common Rules for Professional UI
These are frequently overlooked issues that make UI look unprofessional:
Icons & Visual Elements
| Rule |
Do |
Don't |
| No emoji icons |
Use SVG icons (Heroicons, Lucide, Phosphor) |
Use emojis like 🎨 🚀 ⚙️ as UI icons |
| Stable hover states |
Use color/opacity transitions on hover |
Use scale transforms that shift layout |
| Correct brand logos |
Research official SVG from Simple Icons |
Guess or use incorrect logo paths |
| Consistent icon sizing |
Use fixed viewBox (24x24) with w-6 h-6 |
Mix different icon sizes randomly |
Typography & Component Layout
| Rule |
Do |
Don't |
| Text Hierarchy |
Use shades for hierarchy (slate-900, 700, 500) |
Rely solely on font-weight (bold/normal) |
| Action Consolidation |
Group settings/logout into an Account Popover |
Leave administrative links loose in the sidebar |
| Table Actions |
Collapse row actions into an ellipsis menu |
Show 3+ icon buttons on every single row |
| Form Modals |
Use centered modals for simple creation flows |
Use full-height, mostly empty flyout sidebars |
Interaction & Cursor
| Rule |
Do |
Don't |
| Cursor pointer |
Add cursor-pointer to all clickable cards |
Leave default cursor on interactive elements |
| Hover feedback |
Provide visual feedback (color, shadow) |
No indication element is interactive |
| Smooth transitions |
Use transition-colors duration-200 |
Instant state changes or too slow (>500ms) |
Light/Dark Mode Contrast
| Rule |
Do |
Don't |
| Base Background |
Use off-white/slate-50 for app background |
Use pure #FFFFFF as the main app background |
| Dark Mode Spacing |
Double contrast distance (4-6% steps) |
Use the exact same lightness steps as light mode |
| Dark Mode Accents |
Shift brand buttons to 300/400 range |
Keep dark mode buttons the same dark shade |
| Border visibility |
Use border-gray-200 or subtle shadows |
Use harsh, thick black borders |
Pre-Delivery Checklist
Before delivering UI code, verify these items:
Visual Quality & Architecture
Interaction
Light/Dark Mode
Accessibility & Layout
Credits & Attribution
The underlying CLI search engine, Python scripts (search.py), and foundational data arrays in this skill were originally created by nextlevelbuilder. This skill builds upon their excellent technical framework by injecting a strict, 4-Layer SaaS UI/UX Design philosophy.
1---2name: saas-ui-master3description: Comprehensive UI/UX design intelligence combining a 4-Layer SaaS Master Guide with a robust CLI search system. 50 styles, 97 palettes, 57 font pairings, 25 chart types, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, mobile app. Topics: 4-layer color palette, OKLCH theming, layout, typography, font pairing, accessibility, animation, hover, dark mode contrast.4---56# UI/UX Pro Max - SaaS Design Intelligence78Comprehensive design guide for web and mobile applications, specifically optimized for production-ready SaaS products. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations, strictly enforcing professional design standards to prevent amateur, "vibe-coded" interfaces.910## When to Apply1112Reference these guidelines when:13- Designing new UI components, pages, or complex SaaS dashboards14- Choosing color palettes (especially defining 4-layer systems and dark mode) and typography15- Reviewing code for UX, layout, or accessibility issues16- Building landing pages that require high conversion trust17- Implementing theming engines using modern color spaces (OKLCH)1819## Rule Categories by Priority2021| Priority | Category | Impact | Domain |22|----------|----------|--------|--------|23| 1 | Accessibility | CRITICAL | `ux` |24| 2 | Touch & Interaction | CRITICAL | `ux` |25| 3 | Layout & Architecture | HIGH | `ux`, `product` |26| 4 | Performance | HIGH | `ux` |27| 5 | Typography & 4-Layer Color | MEDIUM | `typography`, `color` |28| 6 | Animation | MEDIUM | `ux` |29| 7 | Style Selection | MEDIUM | `style`, `product` |30| 8 | Charts & Data | LOW | `chart` |3132## Quick Reference: Core SaaS Philosophy3334### 1. Component Architecture (HIGH)35- **Consolidate Navigation:** Group administrative links (Settings, Billing, Profile, API Keys, Logout) into a unified Account Popover menu rather than cluttering the main sidebar.36- **Clean Lists/Tables:** Hide secondary row actions (Edit, Delete, Duplicate) behind a clean ellipsis (three-dot) menu.37- **Modals for Focus:** Use centered modals with collapsed advanced options for simple forms. Never use empty, full-height flyout menus.3839### 2. The 4-Layer Color System (MEDIUM)40- **Layer 1 (Neutral Foundation):** Never use pure white (`#FFFFFF`) as the app background. Use off-white/light gray (`bg-slate-50`). Surface interactive cards as pure white to pop. Use ultra-faint borders (85% white) or subtle drop shadows.41- **Layer 2 (Functional Accents):** Generate a scale from 50 to 950. Main buttons = 500/600, Hover = 700, Text links = 400/500.42- **Layer 3 (Semantic Communication):** Success = Green, Warning = Yellow/Orange, Destructive = Red. Use OKLCH color space for charts to keep lightness/chroma constant.43- **Layer 4 (Theming Engine):** Generate programmatic themes using OKLCH math: convert neutral hex to OKLCH, drop lightness `-0.03`, increase chroma `+0.02`, and slide the Hue value.4445### 3. Dark Mode Rules (CRITICAL)46- **Double the Distance:** Dark colors bleed together. If light mode backgrounds step up by 2% lightness, dark mode MUST step up by 4% to 6%.47- **Shift Accents Lighter:** Shift primary brand colors to the 300 or 400 range for buttons/active states to ensure legibility.4849---5051## How to Use5253Search specific domains using the CLI tool below.5455### Prerequisites5657Check if Python is installed:5859```bash60python3 --version || python --version6162```6364If Python is not installed, install it based on the user's OS:6566**macOS:**6768```bash69brew install python37071```7273**Ubuntu/Debian:**7475```bash76sudo apt update && sudo apt install python37778```7980**Windows:**8182```powershell83winget install Python.Python.3.128485```8687---8889## Workflow Instructions9091When a user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:9293### Step 1: Analyze User Requirements9495Extract key information from the user request:9697* **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.98* **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.99* **Industry**: healthcare, fintech, gaming, education, etc.100* **Stack**: React, Vue, Next.js, or default to `html-tailwind`101102### Step 2: Generate Design System (REQUIRED)103104**Always start with `--design-system**` to get comprehensive recommendations with reasoning:105106```bash107python3 skills/saas-ui-master/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]108109```110111This command:1121131. Searches 5 domains in parallel (product, style, color, landing, typography)1142. Applies reasoning rules from `ui-reasoning.csv` to select best matches1153. Returns complete design system: pattern, style, colors, typography, effects1164. Includes anti-patterns to avoid117118### Step 2b: Persist Design System (Master + Overrides Pattern)119120To save the design system for **hierarchical retrieval across sessions**, add `--persist`:121122```bash123python3 skills/saas-ui-master/scripts/search.py "<query>" --design-system --persist -p "Project Name"124125```126127This creates:128129* `design-system/MASTER.md` — Global Source of Truth with all design rules130* `design-system/pages/` — Folder for page-specific overrides131132**With page-specific override:**133134```bash135python3 skills/saas-ui-master/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"136137```138139**How hierarchical retrieval works:**1401411. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`1422. If the page file exists, its rules **override** the Master file1433. If not, use `design-system/MASTER.md` exclusively144145### Step 3: Supplement with Detailed Searches (as needed)146147After getting the design system, use domain searches to get additional details:148149```bash150python3 skills/saas-ui-master/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]151152```153154**When to use detailed searches:**155156| Need | Domain | Example |157| --- | --- | --- |158| More style options | `style` | `--domain style "glassmorphism dark"` |159| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |160| UX best practices | `ux` | `--domain ux "animation accessibility"` |161| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |162| Landing structure | `landing` | `--domain landing "hero social-proof"` |163164### Step 4: Stack Guidelines (Default: html-tailwind)165166Get implementation-specific best practices. If the user doesn't specify a stack, **default to `html-tailwind**`.167168```bash169python3 skills/saas-ui-master/scripts/search.py "<keyword>" --stack html-tailwind170171```172173Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`174175---176177## Search Reference178179### Available Domains180181| Domain | Use For |182| --- | --- |183| `product` | Product type recommendations (SaaS, e-commerce, portfolio) |184| `style` | UI styles, colors, effects (glassmorphism, minimalism) |185| `typography` | Font pairings, Google Fonts |186| `color` | Color palettes by product type |187| `landing` | Page structure, CTA strategies (hero, pricing, social-proof) |188| `chart` | Chart types, library recommendations |189| `ux` | Best practices, anti-patterns (animation, accessibility) |190| `prompt` | AI prompts, CSS keywords |191192---193194## Output Formats & Tips195196The `--design-system` flag supports two output formats:197198```bash199# ASCII box (default) - best for terminal display200python3 skills/saas-ui-master/scripts/search.py "fintech crypto" --design-system201202# Markdown - best for documentation203python3 skills/saas-ui-master/scripts/search.py "fintech crypto" --design-system -f markdown204205```206207**Tips for Better Results:**2082091. **Be specific** - "healthcare SaaS dashboard" > "app"2102. **Combine domains** - Style + Typography + Color = Complete design system2113. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues212213---214215## Common Rules for Professional UI216217These are frequently overlooked issues that make UI look unprofessional:218219### Icons & Visual Elements220221| Rule | Do | Don't |222| --- | --- | --- |223| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Phosphor) | Use emojis like 🎨 🚀 ⚙️ as UI icons |224| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |225| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |226| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |227228### Typography & Component Layout229230| Rule | Do | Don't |231| --- | --- | --- |232| **Text Hierarchy** | Use shades for hierarchy (slate-900, 700, 500) | Rely solely on font-weight (bold/normal) |233| **Action Consolidation** | Group settings/logout into an Account Popover | Leave administrative links loose in the sidebar |234| **Table Actions** | Collapse row actions into an ellipsis menu | Show 3+ icon buttons on every single row |235| **Form Modals** | Use centered modals for simple creation flows | Use full-height, mostly empty flyout sidebars |236237### Interaction & Cursor238239| Rule | Do | Don't |240| --- | --- | --- |241| **Cursor pointer** | Add `cursor-pointer` to all clickable cards | Leave default cursor on interactive elements |242| **Hover feedback** | Provide visual feedback (color, shadow) | No indication element is interactive |243| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |244245### Light/Dark Mode Contrast246247| Rule | Do | Don't |248| --- | --- | --- |249| **Base Background** | Use off-white/slate-50 for app background | Use pure `#FFFFFF` as the main app background |250| **Dark Mode Spacing** | Double contrast distance (4-6% steps) | Use the exact same lightness steps as light mode |251| **Dark Mode Accents** | Shift brand buttons to 300/400 range | Keep dark mode buttons the same dark shade |252| **Border visibility** | Use `border-gray-200` or subtle shadows | Use harsh, thick black borders |253254---255256## Pre-Delivery Checklist257258Before delivering UI code, verify these items:259260### Visual Quality & Architecture261262* [ ] No emojis used as icons; SVG set utilized (Heroicons/Lucide).263* [ ] Navigation is consolidated (Account Popovers used instead of flat lists).264* [ ] Table/List row actions are tucked behind an ellipsis menu.265* [ ] Pure white (`#FFFFFF`) is NOT used as the base app background.266* [ ] Borders use ultra-faint shades/shadows, not harsh black lines.267268### Interaction269270* [ ] All clickable elements have `cursor-pointer`.271* [ ] Hover states provide clear visual feedback without shifting layouts.272* [ ] Transitions are smooth (150-300ms).273* [ ] Focus states are visible for keyboard navigation.274275### Light/Dark Mode276277* [ ] Light mode text meets 4.5:1 contrast ratio (`#0F172A` for primary).278* [ ] Glass/transparent elements are visible in light mode.279* [ ] Dark mode backgrounds have doubled contrast distances (4-6% steps).280* [ ] Dark mode accents are shifted lighter (300/400 range) for legibility.281* [ ] Test both modes before delivery.282283### Accessibility & Layout284285* [ ] Floating elements have proper spacing from edges (`top-4 left-4`).286* [ ] All images have descriptive alt text.287* [ ] Form inputs have properly linked labels.288* [ ] Color is not the only indicator of status.289* [ ] Responsive at 375px, 768px, 1024px, 1440px without horizontal scroll on mobile.290291### Credits & Attribution292293The underlying CLI search engine, Python scripts (`search.py`), and foundational data arrays in this skill were originally created by **nextlevelbuilder**. This skill builds upon their excellent technical framework by injecting a strict, 4-Layer SaaS UI/UX Design philosophy.
shovonsheikh