Modern UI Designer - 2025 Standards
Overview
This skill provides comprehensive guidance for creating world-class UI designs that follow modern 2025 standards. It covers Tailwind CSS best practices, shadcn/ui component patterns, clean minimalist design principles, 8px grid spacing systems, mobile-first responsive design, and WCAG accessibility compliance.
Core Philosophy: Professional, minimal, accessible, and consistent.
Design Principles (2025)
1. Clean Minimalism
Core Rules:
Remove the unnecessary: Every element must have a clear purpose
Whitespace is powerful: Generous spacing improves readability and reduces cognitive load
Content-first: Design serves content, not the other way around
Visual hierarchy: Use size, color, and spacing to guide attention
Subtle over flashy: Professional designs use restraint
What to Avoid:
❌ Rainbow gradients or excessive colors
❌ Decorative elements without function
❌ Complex patterns or textures
❌ Overcrowded interfaces
❌ Inconsistent spacing
What to Embrace:
✅ Neutral color palette (grays + one accent color)
✅ Generous whitespace and breathing room
✅ Clean typography with clear hierarchy
✅ Subtle shadows and borders
✅ Consistent 8px grid system
2. Visual Hierarchy Best Practices
Size:
Use dramatic size differences for headings vs body text
Minimum 16px for body text (18px preferred for readability)
Heading scale: 48px → 32px → 24px → 20px → 18px → 16px
Use Tailwind's text-* utilities: text-6xl, text-4xl, text-2xl, text-xl, text-lg, text-base
Color:
Use color strategically to indicate importance
Primary actions: Accent color
Secondary actions: Neutral gray
Disabled states: Low contrast gray
Error states: Red (accessible contrast)
Success states: Green (accessible contrast)
Weight:
Headings: font-bold (700) or font-semibold (600)
Body: font-normal (400) or font-medium (500)
Captions: font-light (300) with careful use
Spacing:
Large spacing (32px+) separates major sections
Medium spacing (16-24px) groups related content
Small spacing (8px) for tightly related items
Internal ≤ External rule: Space inside elements should be less than space between them
8px Grid System
Core Concept
All spacing, sizing, and layout must use multiples of 8:
Base units: 8px, 16px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px
Half unit: 4px (only for icons, borders, or micro-adjustments)
Never use: 7px, 13px, 25px, or other non-conforming values
Why 8px?
Device compatibility: Most screen resolutions are divisible by 8
Scaling: Works perfectly across @1x, @2x, @3x displays
Visual consistency: Easy to eyeball and maintain rhythm
Developer-friendly: Reduces translation errors from design to code
Tailwind CSS Spacing Scale
Tailwind's spacing scale aligns perfectly with 8px grid:
0 → 0px
0.5 → 2px (exception for borders)
1 → 4px (half unit)
2 → 8px (base)
3 → 12px (1.5 units, use sparingly)
4 → 16px (2 units)
5 → 20px (2.5 units, use sparingly)
6 → 24px (3 units)
8 → 32px (4 units)
10 → 40px (5 units)
12 → 48px (6 units)
16 → 64px (8 units)
20 → 80px (10 units)
24 → 96px (12 units)
32 → 128px (16 units)
Preferred values for spacing:
Padding: p-2, p-4, p-6, p-8, p-12, p-16
Margin: m-2, m-4, m-6, m-8, m-12, m-16
Gap: gap-2, gap-4, gap-6, gap-8
Spacing Hierarchy (Proximity Principle)
Tightly related (8px - 16px):
Related content (24px - 32px):
Separate sections (48px - 64px):
Component Sizing with 8px Grid
Buttons:
Small: h-8 (32px) with px-3 py-1.5
Medium: h-10 (40px) with px-4 py-2
Large: h-12 (48px) with px-6 py-3
Extra Large: h-14 (56px) with px-8 py-4
Input Fields:
Height: h-10 (40px) or h-12 (48px)
Padding: px-3 py-2 or px-4 py-3
Cards:
Padding: p-4, p-6, or p-8 depending on content
Border radius: rounded-md (6px), rounded-lg (8px), rounded-xl (12px)
Color System (Neutral + Accent)
The Neutral Palette Approach
Base Strategy: Gray scale + ONE accent color
Gray Scale (Tailwind):
slate-50 → Backgrounds
slate-100 → Subtle backgrounds
slate-200 → Borders, dividers
slate-300 → Disabled text
slate-400 → Placeholder text
slate-500 → Secondary text
slate-600 → Body text
slate-700 → Headings
slate-800 → Emphasis
slate-900 → Maximum contrast
Accent Color Selection:
Choose ONE primary brand color
Use for: Primary buttons, links, active states, highlights
Shades needed: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
Example: blue-600 for primary, blue-700 for hover
Semantic Colors (Minimal Use)
Dark Mode Support
Color Contrast Rules (WCAG)
Text Contrast Ratios:
Normal text (< 24px): Minimum 4.5:1
Large text (≥ 24px): Minimum 3:1
UI components & graphics: Minimum 3:1
Safe Combinations:
✅ slate-900 on white → 18.9:1
✅ slate-700 on white → 8.6:1
✅ slate-600 on white → 6.2:1
✅ blue-600 on white → 5.4:1
❌ slate-400 on white → 2.9:1 (fails)
❌ slate-300 on white → 1.7:1 (fails)
Tailwind CSS Best Practices (2025)
1. Utility-First Approach
DO:
Click me
DON'T:
/* ❌ Avoid custom CSS unless absolutely necessary */
.custom-button {
padding: 0.5rem 1rem;
background: #3b82f6;
/* ... */
}
2. Component Extraction with @apply (Sparingly)
Use @apply ONLY for:
Components used 10+ times
Third-party library overrides
Print stylesheets
/* ✅ Good use of @apply */
@layer components {
.btn-primary {
@apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-blue-500;
}
}
3. Responsive Design (Mobile-First)
Breakpoints:
sm: 640px → Small tablets
md: 768px → Tablets
lg: 1024px → Desktop
xl: 1280px → Large desktop
2xl: 1536px → Extra large
Pattern:
Responsive Heading
4. State Variants
Hover, Focus, Active:
Dark Mode:
5. Class Organization (Consistent Order)
Standard order:
Layout (display, position, overflow)
Sizing (width, height)
Spacing (margin, padding)
Typography (font, text)
Visual (background, border)
Effects (shadow, opacity)
Transitions
Variants (hover, focus, dark)
6. JIT Mode & Purging
Always enable JIT (Just-In-Time mode):
// tailwind.config.js
module.exports = {
content: [
'./src/**/*.{html,js,jsx,ts,tsx}',
'./components/**/*.{html,js,jsx,ts,tsx}',
],
// ... rest of config
}
Benefits:
Smaller CSS bundle
Arbitrary values: w-[373px]
All variants available
Faster build times
shadcn/ui Component Patterns
Architecture Understanding
shadcn/ui = Radix UI + Tailwind CSS + CVA:
Radix UI: Unstyled, accessible primitives
Tailwind CSS: Utility-first styling
CVA (Class Variance Authority): Variant management
Core Pattern: Copy, Own, Customize
NOT a package: You copy component source into your project
Full ownership of code
No breaking updates
Complete customization
Type-safe variants
Component Anatomy Example
// Button.tsx
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
// Base styles (always applied)
"inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-slate-900 text-slate-50 hover:bg-slate-800",
outline: "border border-slate-200 bg-transparent hover:bg-slate-100",
ghost: "hover:bg-slate-100",
},
size: {
sm: "h-8 px-3 text-sm",
md: "h-10 px-4",
lg: "h-12 px-6 text-lg",
},
},
defaultVariants: {
variant: "default",
size: "md",
},
}
)
interface ButtonProps
extends React.ButtonHTMLAttributes
,
VariantProps {}
export const Button = ({ className, variant, size, ...props }: ButtonProps) => {
return (
Card Title
Card description goes here
Dialog Pattern:
Open Dialog
Dialog Title
Dialog description text
Cancel
Confirm
Accessibility (WCAG 2.2 Compliance)
The Four Principles (POUR)
1. Perceivable:
Text alternatives for images
Captions for videos
Adaptable content structure
Sufficient color contrast
2. Operable:
Keyboard accessible
No keyboard traps
Sufficient time to interact
No seizure-inducing content
3. Understandable:
Readable text
Predictable behavior
Input assistance and error prevention
4. Robust:
Compatible with assistive technologies
Valid HTML
Proper ARIA attributes
Critical Requirements
Keyboard Navigation:
Accessible Button
Skip to main content
Focus Indicators (WCAG 2.2):
Must be visible
Minimum 2px thickness
Contrast ratio of 3:1 against background
Use focus:ring-2 and focus:ring-offset-2
Touch Targets:
Minimum 44x44px (WCAG 2.1)
Minimum 24x24px spacing (WCAG 2.2)
Use min-h-[44px] min-w-[44px] for interactive elements
Color Contrast:
Body text
Action
Fails WCAG
Semantic HTML:
Page Title
ARIA Labels:
Search
Loading...
Form Accessibility:
Mobile-First Responsive Design
Strategy
Start with mobile (320px - 640px):
Design for smallest screen first
Optimize for touch interactions
Prioritize content hierarchy
Progressive enhancement for larger screens
Responsive Patterns
Container Width:
Typography Scale:
Responsive Heading
Body text with responsive sizing
Grid Layouts:
Flexbox Responsive:
Visibility Control:
Desktop only content
Mobile only content
Navigation Pattern:
Typography System
Font Selection
Modern Professional Fonts:
Sans-serif: Inter, SF Pro, -apple-system, system-ui
Monospace: JetBrains Mono, Fira Code, SF Mono
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
},
},
}
Type Scale (8px-based)
text-xs → 12px (line-height: 16px)
text-sm → 14px (line-height: 20px)
text-base → 16px (line-height: 24px) ← Body text default
text-lg → 18px (line-height: 28px)
text-xl → 20px (line-height: 28px)
text-2xl → 24px (line-height: 32px)
text-3xl → 30px (line-height: 36px)
text-4xl → 36px (line-height: 40px)
text-5xl → 48px (line-height: 48px)
text-6xl → 60px (line-height: 60px)
Line Heights
Always use 8px-aligned line heights:
Text Hierarchy Example
Article Title
Engaging subtitle or description
By Author Name
•
Jan 15, 2025
Body paragraph with comfortable reading size and spacing...
Shadows & Elevation
Shadow System (Subtle Professional)
Modern Pattern: Combine shadow with border
Elevation States
Hover me
Border Radius Guidelines
Consistent Rounding
rounded-none → 0px
rounded-sm → 2px (subtle, modern)
rounded → 4px (default)
rounded-md → 6px (cards)
rounded-lg → 8px (buttons, inputs) ← Preferred
rounded-xl → 12px (large cards)
rounded-2xl → 16px (hero sections)
rounded-full → 9999px (circles, pills)
2025 Trend: Larger, softer corners (8px - 12px)
Component Design Examples
Modern Button
Primary Action
Secondary Action
Ghost Button
Modern Input Field
Modern Card
Card Title
Card description goes here with comfortable reading spacing.
Primary
Secondary
Modern Navigation
Anti-Patterns to Avoid
❌ DON'T DO THESE
1. Inconsistent Spacing:
2. Poor Color Contrast:
Important text
Important text
3. Missing Focus Styles:
4. Non-Semantic HTML:
Home
Home
5. Tiny Touch Targets:
×
×
6. Over-Styled Designs:
7. Fixed Pixel Widths:
Quick Review Checklist
Design Review (Before Development)
Visual Design:
Uses neutral color palette (grays + 1 accent)
Follows 8px grid for all spacing and sizing
Maintains consistent border radius (8px - 12px)
Uses subtle shadows (not heavy drop shadows)
Typography hierarchy is clear
Whitespace is generous and purposeful
Responsiveness:
Mobile-first design approach
Touch targets are minimum 44x44px
Text is readable without zooming
Content reflows properly at all breakpoints
Navigation works on mobile
Accessibility:
Color contrast meets WCAG 2.2 (4.5:1 minimum)
Focus indicators are visible (2px ring)
Semantic HTML used correctly
ARIA labels on icon-only buttons
Form labels are properly associated
Components:
Buttons have hover, focus, and active states
Form inputs have validation states
Loading states are designed
Error states are clear and helpful
Empty states are friendly
Development Review (After Implementation)
Technical:
Tailwind classes follow consistent order
JIT mode enabled and purging configured
No custom CSS unless absolutely necessary
Dark mode support implemented
Performance optimized (lazy loading, etc.)
Accessibility Testing:
Keyboard navigation works completely
Screen reader tested (NVDA/VoiceOver)
Color contrast verified with tool
Forms are fully accessible
ARIA attributes used correctly
Responsive Testing:
Tested on mobile (375px, 414px)
Tested on tablet (768px, 1024px)
Tested on desktop (1280px, 1920px)
Touch interactions work properly
No horizontal scroll at any size
Advanced Techniques
1. Tailwind CSS Variables for Theming
@layer base {
:root {
/* Spacing */
--spacing-xs: 0.5rem; /* 8px */
--spacing-sm: 1rem; /* 16px */
--spacing-md: 1.5rem; /* 24px */
--spacing-lg: 2rem; /* 32px */
/* Colors */
--color-primary: 220 90% 56%;
--color-primary-hover: 220 90% 48%;
/* Border radius */
--radius-sm: 0.5rem; /* 8px */
--radius-md: 0.75rem; /* 12px */
--radius-lg: 1rem; /* 16px */
}
}
2. Custom Utility Classes
@layer utilities {
/* Text balance for headings */
.text-balance {
text-wrap: balance;
}
/* Smooth scroll */
.scroll-smooth {
scroll-behavior: smooth;
}
/* Focus visible only */
.focus-visible-ring {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500;
}
}
3. Component Composition Pattern
// Compose smaller components into larger ones
Overview
Analytics
{/* Content */}
Resources & Tools
Design Tools
Figma: Primary design tool
Tailwind CSS IntelliSense: VS Code extension
Headless UI: Unstyled accessible components
Radix UI: Primitive components for shadcn/ui
Accessibility Testing
WAVE: Browser extension for accessibility testing
axe DevTools: Automated accessibility testing
Contrast Checker: Verify WCAG color contrast
NVDA/VoiceOver: Screen reader testing
Color Tools
Coolors: Color palette generator
Tailwind Shades: Generate Tailwind color scales
Contrast Ratio: WebAIM contrast checker
Typography
Typescale: Generate type scales
Modular Scale: Calculate harmonious sizes
Google Fonts: Free web fonts
Learning Resources
Tailwind CSS Documentation: Official docs
shadcn/ui Documentation: Component library docs
WCAG Guidelines: W3C accessibility standards
Refactoring UI: Design tips by Tailwind creators
Summary
Modern UI Design in 2025 means:
Clean Minimalism: Remove the unnecessary, embrace whitespace
8px Grid System: Consistent, scalable spacing and sizing
Neutral + Accent: Grays with one primary color
Tailwind CSS: Utility-first, JIT-enabled, responsive
shadcn/ui: Copy-and-own accessible components
WCAG 2.2: Full keyboard support and color contrast
Mobile-First: Design small screens first, scale up
Professional Polish: Subtle shadows, soft corners, smooth transitions
Remember: The goal is not to impress with flashy design, but to create interfaces that are beautiful, functional, accessible, and a pleasure to use.
When to Use This Skill
Activate this skill when:
Designing new UI components or pages
Reviewing existing designs for modern standards
Creating design systems or component libraries
Implementing Tailwind CSS or shadcn/ui
Ensuring accessibility compliance
Optimizing responsive layouts
Troubleshooting visual design issues
Teaching or documenting UI best practices
Output Format: Always provide code examples, explain design decisions, and reference specific Tailwind utilities or shadcn/ui components when applicable.
← 返回排行榜