premium-saas-ui

name	premium-saas-ui
description	Build premium SaaS interfaces that avoid vibe-coded anti-patterns. Use when creating UI components, forms, dashboards, hero sections, pricing pages, or any user-facing templates. Enforces consistent spacing, typography, color discipline, and accessibility standards.
allowed-tools	Read, Grep, Glob, Edit, Write

Premium SaaS UI Patterns

Purpose

This skill ensures all UI work produces polished, intentional interfaces that signal quality and professionalism. It actively prevents the "vibe coded" aesthetic that undermines user trust.

When This Skill Activates

• Creating new templates or components
• Designing hero sections, pricing pages, dashboards
• Building forms, modals, cards, navigation
• Styling with Tailwind CSS
• Reviewing existing UI for quality

Core Design Principles

1. Spacing System (Mandatory)

Use a strict 4px or 8px spacing scale. Never introduce random values.

<!-- WRONG: Random spacing -->
<div class="p-5 m-7 gap-3">

<!-- CORRECT: Consistent 4px scale -->
<div class="p-4 m-8 gap-4">  <!-- 16px, 32px, 16px -->

Tailwind spacing classes to prefer:

• p-2, p-4, p-6, p-8 (8, 16, 24, 32px)
• m-2, m-4, m-6, m-8
• gap-2, gap-4, gap-6, gap-8
• space-y-4, space-x-4

2. Typography Hierarchy

Define a clear type ramp and apply consistently:

<!-- Heading hierarchy -->
<h1 class="text-3xl font-bold text-gray-900">Page Title</h1>
<h2 class="text-2xl font-semibold text-gray-800">Section</h2>
<h3 class="text-xl font-medium text-gray-700">Subsection</h3>

<!-- Body text -->
<p class="text-base text-gray-600 leading-relaxed">Content</p>
<p class="text-sm text-gray-500">Secondary text</p>

Never:

• Mix font weights randomly
• Use overly light text on light backgrounds
• Inconsistent line heights across similar elements

3. Color Discipline

Use a constrained palette. For PaymentReminder:

<!-- Primary actions -->
<button class="bg-blue-600 hover:bg-blue-700 text-white">

<!-- Secondary actions -->
<button class="bg-gray-100 hover:bg-gray-200 text-gray-700">

<!-- Destructive actions -->
<button class="bg-red-600 hover:bg-red-700 text-white">

<!-- Success states -->
<div class="bg-green-50 text-green-800 border border-green-200">

NEVER use:

• Purple gradients (unless brand-mandated)
• Neon glow effects
• Random accent colors
• Low-contrast text

4. Border Radius Consistency

Pick ONE radius and use everywhere:

<!-- Standard radius for all components -->
<div class="rounded-lg">  <!-- Use this everywhere -->
<button class="rounded-lg">
<input class="rounded-lg">
<div class="rounded-lg">

<!-- Exception: Pills/badges -->
<span class="rounded-full px-3 py-1">Badge</span>

<!-- Exception: Avatars -->
<img class="rounded-full">

Never mix rounded-sm, rounded-md, rounded-lg, rounded-xl on the same page.

5. Shadow Consistency

One elevation system:

<!-- Cards, modals, dropdowns -->
<div class="shadow-sm">  <!-- Subtle lift -->
<div class="shadow-md">  <!-- Prominent cards -->
<div class="shadow-lg">  <!-- Modals only -->

Never use glow shadows or colored shadows.

Anti-Patterns to Actively Prevent

Visual Red Flags (NEVER DO)

1. Purple Gradients

   <!-- BANNED -->
   <div class="bg-gradient-to-r from-purple-500 to-pink-500">
   

2. Sparkle Overload

   <!-- BANNED: Sparkles as decoration -->
   <h1>Launch your idea today ✨</h1>
   <button>Get Started ✨</button>
   

3. Aggressive Hover Animations

   <!-- BANNED -->
   <div class="hover:-translate-y-2 hover:rotate-1 hover:scale-105">
   
   <!-- ALLOWED: Subtle feedback -->
   <div class="hover:bg-gray-50 transition-colors">
   

4. Emoji as UI Elements

   <!-- BANNED -->
   <li>🚀 Feature one</li>
   <li>💎 Feature two</li>
   
   <!-- USE proper icons instead -->
   <li><svg class="w-5 h-5 text-blue-500">...</svg> Feature one</li>
   

5. Fake Testimonials

   • AI-generated avatars
   • Generic names like "Sarah P."
   • Vague quotes like "Helped me so much"
   • No job title, company, or link

6. Broken Social Links

   <!-- BANNED: Placeholder links -->
   <a href="#">Twitter</a>
   <a href="https://twitter.com">Follow us</a>
   
   <!-- Only include if real -->
   <a href="https://twitter.com/actualhandle">@actualhandle</a>
   

Structural Red Flags (ALWAYS FIX)

1. Missing Loading States

   <!-- Every async action needs feedback -->
   <button x-data="{ loading: false }"
           @click="loading = true"
           :disabled="loading">
     <span x-show="!loading">Save</span>
     <span x-show="loading">Saving...</span>
   </button>
   

2. Inconsistent Component Sizing

   <!-- All buttons same size in context -->
   <button class="px-4 py-2">Cancel</button>
   <button class="px-4 py-2">Save</button>  <!-- Match padding -->
   

3. Misaligned Grids

   <!-- Use consistent grid gaps -->
   <div class="grid grid-cols-3 gap-6">
     <!-- All cards identical structure -->
   </div>
   

Required Checklist Before Shipping UI

Before any UI is complete, verify:

• Spacing follows 4px/8px scale
• Typography uses defined type ramp
• Colors from approved palette only
• Single border-radius throughout
• No purple gradients or neon effects
• No sparkle emoji decorations
• Hover effects are subtle
• Loading states for all async actions
• Mobile responsive (test at 375px)
• All links functional
• No placeholder text
• Proper contrast (WCAG AA)

Template Structure

Every page should follow:

<!-- Consistent page structure -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Page header -->
  <div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-900">Page Title</h1>
    <p class="mt-2 text-gray-600">Description</p>
  </div>

  <!-- Content -->
  <div class="space-y-6">
    <!-- Sections with consistent spacing -->
  </div>
</main>

The Golden Rule

When in doubt, remove it. Premium design is about restraint, not addition. Every element must earn its place. If something feels decorative rather than functional, delete it.