UI/UX Pro Max — Design Excellence Skill

Premium UI/UX principles, design systems, accessibility, and Human Interface Guidelines.

Design Hierarchy Principles

Visual Hierarchy Checklist

1. Size — larger = more important (headlines > body text)
2. Color/Contrast — high contrast draws the eye first
3. Whitespace — isolation increases perceived importance
4. Position — top-left (LTR) gets seen first; F-pattern reading
5. Weight — bold/heavy fonts signal priority

The 60-30-10 Color Rule

60% — Dominant/neutral (backgrounds, large surfaces)
30% — Secondary (cards, supporting elements)
10% — Accent (CTAs, key actions, highlights)

Spacing & Layout System

4px/8px Base Grid (Industry Standard)

/* Use multiples of 4 for all spacing — creates visual rhythm */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;

Tailwind v4 Spacing Theme

@theme {
  --spacing: 0.25rem; /* 4px base unit — Tailwind multiplies this */
}
/* p-4 = 16px, p-6 = 24px, p-8 = 32px — consistent rhythm */

Layout Density Guide

Typography System

Type Scale (Major Third — 1.25 ratio)

@theme {
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.563rem;   /* 25px */
  --text-2xl: 1.953rem;  /* 31px */
  --text-3xl: 2.441rem;  /* 39px */
  --text-4xl: 3.052rem;  /* 49px */
}

Line Height Rules

/* Tighter line-height for headings, looser for body */
h1, h2, h3 { line-height: 1.1; }
p, li      { line-height: 1.6; }
small      { line-height: 1.4; }

/* Optimal line length for readability: 50-75 characters */
.prose { max-width: 65ch; }

Font Pairing Principles

• Max 2 typefaces per product (one display, one body — or one family with multiple weights)
• Variable fonts preferred for performance (one file, many weights)
• Never pair two similar serif or two similar sans fonts — pick contrasting styles if using two

Color Systems

Accessible Color Palette Structure

@theme {
  /* Each color needs 50-950 scale for flexibility */
  --color-brand-50: oklch(0.97 0.02 260);
  --color-brand-100: oklch(0.94 0.05 260);
  --color-brand-500: oklch(0.55 0.22 260);  /* Primary action color */
  --color-brand-600: oklch(0.48 0.22 260);  /* Hover state */
  --color-brand-900: oklch(0.25 0.12 260);  /* Dark text on light bg */

  /* Semantic colors */
  --color-success: oklch(0.6 0.15 145);
  --color-warning: oklch(0.75 0.15 80);
  --color-danger: oklch(0.55 0.22 25);
  --color-info: oklch(0.6 0.15 230);
}

Contrast Requirements (WCAG)

# Check contrast programmatically
npx @adobe/leonardo-contrast-colors
# Or use https://webaim.org/resources/contrastchecker/

Accessibility (a11y)

Semantic HTML First

// ❌ Div soup with no semantics
<div onClick={handleClick}>Submit</div>

// ✅ Semantic, keyboard-accessible, screen-reader friendly
<button onClick={handleClick} type="button">Submit</button>

ARIA Patterns

// Loading state
<button aria-busy={isPending} disabled={isPending}>
  {isPending ? "Saving…" : "Save"}
</button>

// Form errors
<input
  aria-invalid={!!error}
  aria-describedby={error ? "email-error" : undefined}
/>
{error && <p id="email-error" role="alert">{error}</p>}

// Modal/dialog
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm Delete</h2>
</div>

// Icon-only buttons need labels
<button aria-label="Close menu">
  <XIcon aria-hidden="true" />
</button>

Focus Management

/* Never remove focus outlines — restyle them instead */
:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

Accessibility Audit Checklist

• [ ] All interactive elements reachable via Tab key
• [ ] Focus order matches visual order
• [ ] Color is never the only signal (add icons/text to error states)
• [ ] Images have meaningful alt text (or alt="" if decorative)
• [ ] Form inputs have associated <label>
• [ ] Headings follow logical hierarchy (no skipping h1→h3)
• [ ] Touch targets ≥ 44×44px on mobile
• [ ] Animations respect prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Micro-interactions & Motion

Motion Principles

/* Easing — never use linear for UI motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* Entering elements */
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);       /* Exiting elements */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* Moving elements */

/* Duration guide */
--duration-fast: 100ms;    /* hover states, small UI feedback */
--duration-base: 200ms;    /* most transitions */
--duration-slow: 350ms;    /* modals, page transitions */

Feedback Timing

Human Interface Guidelines (HIG) Consistency

Apple HIG Key Principles

• Clarity: text legible at every size, icons precise, adornments subtle
• Deference: content is the UI — chrome (UI decoration) should not compete
• Depth: visual layers convey hierarchy and facilitate understanding

Material Design Key Principles

• Material as metaphor: surfaces and edges provide visual cues
• Bold, graphic, intentional: deliberate color and typography choices
• Motion provides meaning: transitions show relationships between states

Cross-Platform Consistency Checklist

• [ ] iOS: respects safe areas, uses SF Symbols where appropriate, follows tab bar conventions
• [ ] Android: follows Material elevation/shadow system, uses system back gesture correctly
• [ ] Web: respects OS-level dark mode preference (prefers-color-scheme)
• [ ] Consistent iconography style across platforms (don't mix icon families)
• [ ] Platform-native form controls feel familiar (don't over-customize native pickers)

Component Design Patterns

Button Hierarchy

Primary    → 1 per view, the main action (filled, brand color)
Secondary  → supporting actions (outline or ghost)
Tertiary   → low-emphasis actions (text-only link style)
Destructive → red/danger color, often requires confirmation

Empty States (Don't Skip These)

function EmptyState({ icon, title, description, action }: EmptyStateProps) {
  return (
    <div className="flex flex-col items-center gap-3 py-16 text-center">
      <div className="text-muted-foreground">{icon}</div>
      <h3 className="font-semibold text-lg">{title}</h3>
      <p className="text-muted-foreground text-sm max-w-sm">{description}</p>
      {action}
    </div>
  )
}

Loading State Hierarchy

1. Skeleton screens — preferred for content that has a known shape
2. Spinners — for short, unpredictable waits (<2s)
3. Progress bars — for long, trackable operations (uploads, processing)
4. Optimistic UI — best UX when the outcome is highly likely to succeed

Design Review Checklist

• [ ] Visual hierarchy guides the eye to the primary action first
• [ ] Spacing follows a consistent scale (4px/8px grid)
• [ ] Color contrast meets WCAG AA minimum
• [ ] Empty, loading, and error states are all designed (not just "happy path")
• [ ] Touch targets are ≥44px on mobile
• [ ] Motion has purpose (not decoration) and respects reduced-motion preference
• [ ] Typography scale is consistent across the product
• [ ] Icons are from a single consistent set/style
• [ ] Dark mode tested, not just inverted colors

Key Rules

1. One primary action per screen — too many CTAs dilute focus
2. 4px/8px spacing grid, always — never arbitrary pixel values
3. WCAG AA minimum (4.5:1 contrast) — non-negotiable for body text
4. Design all states — empty, loading, error, success, not just the happy path
5. Never remove focus indicators — restyle, never delete
6. Respect `prefers-reduced-motion` and prefers-color-scheme
7. Semantic HTML before ARIA — ARIA is a patch, not a starting point
8. Skeleton over spinner when content shape is predictable
9. Max 2 typefaces per product
10. Test with keyboard only — if you can't complete a flow without a mouse, it's broken