minimalist-ui-design

name	minimalist-ui-design
description	Designs minimalist UI interfaces with clean layouts, ample whitespace, and focused content presentation. Invoke when user requests minimalist, clean, or simple UI designs for dashboards and data visualization.

Minimalist UI Design Skill

Design Philosophy

• Less is more: Remove all unnecessary elements
• Content first: Let data speak for itself
• Whitespace is active: Use space to create hierarchy
• Typography as UI: Use font weights and sizes to guide attention

Color Palette

Background: #FFFFFF (pure white) or #FAFAFA (off-white)
Surface: #FFFFFF
Primary Text: #1A1A1A (near black)
Secondary Text: #666666 (medium gray)
Tertiary Text: #999999 (light gray)
Accent: #0066FF (clean blue) or #000000 (black)
Border: #E5E5E5 (light gray)
Divider: #F0F0F0
Hover: #F5F5F5

Typography

• Font Family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif
• Headings: Bold, tight letter-spacing (-0.02em)
• Body: Regular, comfortable line-height (1.6)
• Data/Numbers: Tabular figures, monospace for alignment
• Scale:
  • H1: 32px/40px
  • H2: 24px/32px
  • H3: 18px/24px
  • Body: 14px/22px
  • Caption: 12px/18px
  • Data: 28px/36px (KPI numbers)

Layout Principles

• Grid: 12-column, 24px gutter
• Spacing Scale: 4px base (4, 8, 12, 16, 24, 32, 48, 64)
• Cards: No border-radius or 4px max, 1px border
• Shadows: None or very subtle (0 1px 3px rgba(0,0,0,0.04))
• Borders: 1px solid #E5E5E5

Component Styles

KPI Cards

• White background, 1px border
• Large number (28px, bold)
• Small label (12px, gray)
• No shadow, no gradient
• Subtle hover: background #FAFAFA

Tables

• No vertical borders
• Horizontal dividers only (1px #F0F0F0)
• Header: 12px uppercase, gray, letter-spacing 0.05em
• Row height: 48px
• Hover: #FAFAFA

Charts

• Clean lines, no background grid
• Minimal axes
• Direct labels where possible
• Color: Single hue or max 2 colors

Buttons

• Text only or outlined
• No radius or 4px
• Hover: underline or background shift
• Active: opacity 0.8

Sidebar

• White or light gray background
• Simple text links
• Active: bold text or left border accent
• No icons or minimal icons

Data Visualization

• Line charts: 2px stroke, no fill
• Bar charts: No border-radius, single color
• Pie charts: Donut style, minimal segments
• Colors: #0066FF, #00C853, #FF1744, #FFD600 (max 4)

Interaction Design

• Hover: Subtle background change
• Click: Immediate feedback (opacity)
• Loading: Skeleton screens, no spinners
• Transitions: 150ms ease

Anti-patterns to Avoid

• No gradients
• No shadows (except minimal)
• No border-radius > 4px
• No decorative elements
• No multiple colors
• No animation beyond opacity/position