UI UX

UI/UX Design Skill

Design intelligence for building professional, modern web interfaces.

Overview

This skill provides guidance for:

• UI Styles - Glassmorphism, minimalism, dark mode, etc.
• Color Palettes - Industry-specific color schemes
• Typography - Font pairings and hierarchy
• Layouts - Page structures and patterns
• Components - Common UI component patterns
• Accessibility - WCAG compliance

How to Use

When building UI/UX:

1. Identify Project Type → SaaS, e-commerce, portfolio, dashboard, etc.
2. Choose Style → Based on brand/industry
3. Select Colors → From curated palettes
4. Pick Typography → Font pairings
5. Build Components → Following patterns
6. Verify Quality → Pre-delivery checklist

UI Styles

Glassmorphism

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

Best for: Modern SaaS, dashboards, creative portfolios Avoid: E-commerce product pages, text-heavy content

Minimalism

.minimal {
  background: #ffffff;
  color: #1a1a1a;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

Best for: Professional services, portfolios, blogs Key: Generous whitespace, limited color palette

Dark Mode

:root {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --accent: #3b82f6;
}

Best for: Developer tools, media apps, gaming Key: Sufficient contrast, reduce eye strain

Neumorphism

.neumorphic {
  background: #e0e0e0;
  border-radius: 12px;
  box-shadow: 
    8px 8px 16px #bebebe,
    -8px -8px 16px #ffffff;
}

Best for: Mobile apps, music players, settings UI Avoid: Complex interfaces, accessibility-critical apps

Bento Grid

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.bento-item.large { grid-column: span 2; grid-row: span 2; }
.bento-item.wide { grid-column: span 2; }
.bento-item.tall { grid-row: span 2; }

Best for: Dashboards, portfolios, feature showcases

Color Palettes

SaaS / Tech

:root {
  --primary: #3b82f6;      /* Blue */
  --secondary: #8b5cf6;    /* Purple */
  --accent: #10b981;       /* Green - success */
  --background: #0f172a;   /* Dark slate */
  --surface: #1e293b;      /* Lighter slate */
  --text: #f8fafc;         /* Near white */
  --text-muted: #94a3b8;   /* Muted */
}

E-commerce

:root {
  --primary: #f59e0b;      /* Amber - CTA */
  --secondary: #1f2937;    /* Dark gray */
  --accent: #10b981;       /* Green - sale */
  --background: #ffffff;
  --surface: #f9fafb;
  --text: #111827;
  --text-muted: #6b7280;
}

Healthcare

:root {
  --primary: #0ea5e9;      /* Sky blue */
  --secondary: #14b8a6;    /* Teal */
  --accent: #f43f5e;       /* Rose - alerts */
  --background: #f0fdfa;   /* Light teal tint */
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
}

Fintech

:root {
  --primary: #059669;      /* Emerald */
  --secondary: #1e40af;    /* Blue */
  --accent: #f59e0b;       /* Amber - warnings */
  --background: #ffffff;
  --surface: #f8fafc;
  --text: #0f172a;
  --text-muted: #64748b;
}

Creative / Portfolio

:root {
  --primary: #ec4899;      /* Pink */
  --secondary: #8b5cf6;    /* Purple */
  --accent: #f59e0b;       /* Amber */
  --background: #0a0a0a;   /* Near black */
  --surface: #171717;
  --text: #fafafa;
  --text-muted: #a3a3a3;
}

Typography

Professional / Corporate

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3 { font-weight: 600; }

Modern / Tech

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

body {
  font-family: 'Space Grotesk', sans-serif;
}

Elegant / Luxury

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Lato:wght@300;400;700&display=swap');

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}
body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

Playful / Friendly

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');

body {
  font-family: 'Nunito', sans-serif;
}

Type Scale

:root {
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
}

Layout Patterns

Landing Page Structure

┌─────────────────────────────────────┐
│           NAVBAR (fixed)            │
├─────────────────────────────────────┤
│                                     │
│              HERO                   │
│     Headline + CTA + Visual         │
│                                     │
├─────────────────────────────────────┤
│           SOCIAL PROOF              │
│        Logos / Testimonials         │
├─────────────────────────────────────┤
│            FEATURES                 │
│      3-4 column grid / Bento        │
├─────────────────────────────────────┤
│           HOW IT WORKS              │
│         Steps / Timeline            │
├─────────────────────────────────────┤
│            PRICING                  │
│         2-3 tier cards              │
├─────────────────────────────────────┤
│              CTA                    │
│       Final call to action          │
├─────────────────────────────────────┤
│             FOOTER                  │
└─────────────────────────────────────┘

Dashboard Layout

┌──────┬──────────────────────────────┐
│      │         HEADER               │
│      ├──────────────────────────────┤
│ SIDE │                              │
│ BAR  │         CONTENT              │
│      │                              │
│      │   ┌─────┐ ┌─────┐ ┌─────┐   │
│      │   │Card │ │Card │ │Card │   │
│      │   └─────┘ └─────┘ └─────┘   │
│      │                              │
│      │   ┌───────────────────────┐  │
│      │   │       Table/Chart     │  │
│      │   └───────────────────────┘  │
└──────┴──────────────────────────────┘

Component Patterns

Button Hierarchy

/* Primary - Main CTA */
.btn-primary {
  background: var(--primary);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Secondary */
.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover {
  color: var(--text);
  background: var(--surface);
}

Card Patterns

.card {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}
.card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.card.interactive {
  cursor: pointer;
}

Input Fields

.input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s;
}
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.input.error {
  border-color: var(--error);
}

Common Rules (MUST FOLLOW)

Icons

Hover States

Light/Dark Mode

Spacing

Pre-Delivery Checklist

Visual Quality

• No emojis used as icons
• All icons from consistent set (Heroicons/Lucide)
• Brand logos verified (Simple Icons)
• Hover states don't cause layout shift
• Colors from defined palette

Interaction

• All clickable elements have cursor: pointer
• Hover states provide visual feedback
• Transitions are smooth (150-300ms)
• Focus states visible for keyboard navigation

Light/Dark Mode

• Light mode text has sufficient contrast (4.5:1)
• Glass/transparent elements visible in light mode
• Borders visible in both modes
• Both modes tested

Layout

• Floating elements have proper spacing
• No content behind fixed navbars
• Responsive at 320px, 768px, 1024px, 1440px
• No horizontal scroll on mobile

Accessibility

• All images have alt text
• Form inputs have labels
• Color is not the only indicator
• prefers-reduced-motion respected

Stack-Specific Implementation

React + Tailwind

// Use Tailwind classes
<button className="bg-primary text-white px-6 py-3 rounded-lg 
  hover:opacity-90 transition-all duration-200">
  Get Started
</button>

Vue + CSS

<template>
  <button class="btn-primary">Get Started</button>
</template>

<style scoped>
.btn-primary {
  @apply bg-primary text-white px-6 py-3 rounded-lg;
  transition: all 0.2s;
}
.btn-primary:hover {
  opacity: 0.9;
}
</style>

Plain HTML + CSS

<button class="btn-primary">Get Started</button>

<style>
.btn-primary {
  background: var(--primary);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
</style>

Converted and distributed by TomeVault — claim your Tome and manage your conversions.