UI/UX Designer

Expert guidance for creating intuitive, accessible, and visually appealing user interfaces and experiences.

When to Use This Skill

Designing new screens or components
Creating wireframes and mockups
Establishing or extending a design system
Ensuring accessibility compliance
Implementing responsive layouts
Defining user flows and interactions
Reviewing UI for usability issues

Design System Foundations

Spacing Scale

Use a consistent spacing scale based on a base unit (typically 4px or 8px):

--space-1: 4px    (0.25rem)
--space-2: 8px    (0.5rem)
--space-3: 12px   (0.75rem)
--space-4: 16px   (1rem)
--space-5: 24px   (1.5rem)
--space-6: 32px   (2rem)
--space-7: 48px   (3rem)
--space-8: 64px   (4rem)
--space-9: 96px   (6rem)

Typography Scale

Establish a modular type scale (1.25 ratio example):

--text-xs:   12px / 0.75rem   (captions, labels)
--text-sm:   14px / 0.875rem  (secondary text)
--text-base: 16px / 1rem      (body text)
--text-lg:   20px / 1.25rem   (lead text)
--text-xl:   24px / 1.5rem    (h4)
--text-2xl:  30px / 1.875rem  (h3)
--text-3xl:  36px / 2.25rem   (h2)
--text-4xl:  48px / 3rem      (h1)
--text-5xl:  60px / 3.75rem   (display)

Line Height Guidelines

Headings: 1.1 - 1.3 (tight)
Body text: 1.5 - 1.7 (comfortable reading)
UI elements: 1.2 - 1.4 (compact)

Color System

Semantic Colors

Primary:    Main brand color, primary actions
Secondary:  Supporting brand color, secondary actions
Success:    Positive feedback, confirmations (#22c55e family)
Warning:    Caution states, important notices (#f59e0b family)
Error:      Errors, destructive actions (#ef4444 family)
Info:       Informational messages (#3b82f6 family)

Neutral Palette

--gray-50:  #fafafa  (backgrounds)
--gray-100: #f4f4f5  (subtle backgrounds)
--gray-200: #e4e4e7  (borders, dividers)
--gray-300: #d4d4d8  (disabled states)
--gray-400: #a1a1aa  (placeholder text)
--gray-500: #71717a  (secondary text)
--gray-600: #52525b  (icons)
--gray-700: #3f3f46  (body text)
--gray-800: #27272a  (headings)
--gray-900: #18181b  (high emphasis)

Color Contrast Requirements (WCAG)

Level	Normal Text	Large Text	UI Components
AA	4.5:1	3:1	3:1
AAA	7:1	4.5:1	4.5:1

Large text = 18px+ regular or 14px+ bold

Component Specifications

Buttons

Primary Button:
- Background: Primary color
- Text: White or contrast color
- Padding: 12px 24px (space-3 space-5)
- Border radius: 6px
- Font weight: 600 (semibold)
- Min height: 44px (touch target)

States:
- Default: Full opacity
- Hover: 90% opacity or darker shade
- Active: 80% opacity or darkest shade
- Disabled: 50% opacity, cursor: not-allowed
- Focus: 2px outline offset 2px

Variants:
- Secondary: Outlined or muted background
- Ghost: Transparent background
- Destructive: Error/red color
- Icon-only: Square aspect ratio

Form Inputs

Text Input:
- Height: 40-44px
- Padding: 8px 12px
- Border: 1px solid gray-300
- Border radius: 6px
- Font size: 16px (prevents iOS zoom)

States:
- Default: gray-300 border
- Hover: gray-400 border
- Focus: primary color border + ring
- Error: error color border + message
- Disabled: gray-100 background

Labels:
- Position: Above input
- Font size: 14px
- Font weight: 500
- Margin bottom: 4px

Helper/Error text:
- Font size: 12px
- Margin top: 4px
- Color: gray-500 (helper) or error (error)

Cards

Card Container:
- Background: white
- Border: 1px solid gray-200 OR shadow
- Border radius: 8-12px
- Padding: 16-24px

Shadow options:
- Subtle: 0 1px 2px rgba(0,0,0,0.05)
- Default: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)
- Medium: 0 4px 6px rgba(0,0,0,0.1)
- Large: 0 10px 15px rgba(0,0,0,0.1)

Responsive Breakpoints

--screen-sm:  640px   (mobile landscape)
--screen-md:  768px   (tablet)
--screen-lg:  1024px  (laptop)
--screen-xl:  1280px  (desktop)
--screen-2xl: 1536px  (large desktop)

Mobile-First Approach

/* Base styles for mobile */
.container { padding: 16px; }

/* Tablet and up */
@media (min-width: 768px) {
  .container { padding: 24px; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container { padding: 32px; max-width: 1200px; }
}

Layout Patterns

Common Page Layouts

Single Column: Content-focused (articles, forms)
Sidebar + Content: Dashboards, settings
Holy Grail: Header, footer, sidebar(s), content
Card Grid: Product listings, galleries
Split Screen: Marketing, comparison views

Grid System

12-column grid with gutters:
- Mobile: 4 columns, 16px gutter
- Tablet: 8 columns, 24px gutter
- Desktop: 12 columns, 24-32px gutter

Accessibility (WCAG 2.1)

Core Principles (POUR)

Perceivable: Content can be perceived by all users
Operable: Interface can be operated by all users
Understandable: Content and operation are understandable
Robust: Works with assistive technologies

Essential Accessibility Checklist

Visual

Color contrast meets WCAG AA (4.5:1 for text)
Color is not the only indicator (add icons, text)
Text can be resized to 200% without loss
Focus indicators are visible (2px+ outline)
Animations respect reduced-motion preference

Interactive

All functionality available via keyboard
Tab order follows logical reading order
No keyboard traps
Touch targets are at least 44x44px
Form inputs have associated labels
Error messages are clear and helpful

Semantic

Proper heading hierarchy (h1 → h2 → h3)
Meaningful link text (not "click here")
Images have alt text
ARIA labels where needed
Landmarks defined (main, nav, aside)

Focus Management

/* Visible focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

Interaction Patterns

Loading States

Skeleton screens: Show layout shape while loading
Spinners: For short operations (< 3 seconds)
Progress bars: For known duration operations
Optimistic updates: Assume success, rollback if needed

Empty States

Include:

Illustration or icon (optional)
Clear headline explaining the state
Description with next steps
Primary action button

Error States

Use error color consistently
Position error messages near the source
Provide specific, actionable guidance
Offer retry or alternative actions

Success Feedback

Toast/snackbar for non-critical confirmations
Inline message for form submissions
Redirect with success state for major actions
Animation/celebration for achievements

User Flow Guidelines

Navigation Principles

Consistency: Same patterns throughout app
Visibility: Current location always clear
Efficiency: Important actions within 3 clicks
Recovery: Easy to go back or undo

Information Architecture

Group related items together
Limit primary navigation to 5-7 items
Use progressive disclosure for complex features
Provide search for large content sets

Component Specification Template

## Component: [Name]

### Purpose
What problem does this component solve?

### Variants
- Variant A: When to use
- Variant B: When to use

### Anatomy
[Diagram or description of parts]

### States
- Default
- Hover
- Active
- Focus
- Disabled
- Loading
- Error

### Responsive Behavior
How it adapts across breakpoints.

### Accessibility
- Keyboard interaction
- Screen reader behavior
- ARIA attributes needed

### Do's and Don'ts
✅ Do: [Best practice]
❌ Don't: [Anti-pattern]

Output Artifacts

When this skill is activated, I can help create:

Component Specifications: Detailed specs for UI components
Design Tokens: CSS custom properties for the design system
Wireframe Descriptions: Text-based wireframe layouts
Accessibility Audit: Review against WCAG guidelines
Responsive Strategy: Breakpoint-specific design decisions
Color Palette: Semantic color system with contrast ratios
Typography System: Font scales and usage guidelines

ui-ux-designer