ui-design

name

ui-design

description

Comprehensive UI/UX design resources including design systems, UI component libraries, color palettes, typography, icons, stock assets, and design tools. Use when: (1) Selecting a design system or UI library, (2) Finding design resources (colors, fonts, icons, images), (3) Getting design inspiration or recommendations, (4) Building user interfaces with modern component libraries, (5) Understanding design patterns and best practices.

UI Design Resources

This skill aggregates the best design resources from multiple curated collections to help you build beautiful, modern interfaces.

Quick Reference

Design Systems

Category	Popular Options	Best For
Enterprise	Atlassian, Fluent UI, Polaris, Carbon	Large-scale applications
Open Source	Chakra UI, Mantine, Radix, Shadcn/ui	React projects
Government	GOV.UK, US Web Design Standards	Public sector projects
Lightweight	Blueprint, Evergreen, UI Kit	Dashboards, tools

Color Tools

Tool	Specialty
Coolors	Quick palette generation
Color Brewer	Data visualization, accessibility
Huetone	Accessible color systems
Happy Hues	Live color inspiration

Font Resources

Tool	Specialty
Google Fonts	Free licensed fonts
Fontjoy	Font pairing
Font Flipper	Preview fonts on designs
TypeScale	Typography scales

Icon Libraries

Library	Count	Style
Phosphor	6000+	Flexible, modern
Heroicons	250+	Clean, outlined
Tabler	3500+	Detailed, filled
Feather	280+	Minimal, outline
Simple Icons	1300+	Brand logos

Component Libraries

Library	Framework	Popularity
shadcn/ui	React	Very High
Chakra UI	React	High
Mantine	React	High
Radix UI	React (headless)	High
DaisyUI	Tailwind	High
Vuetify	Vue	High
PrimeVue	Vue	High
Svelte Material	Svelte	Medium

Design Systems by Use Case

For Enterprise Applications

• Salesforce Lightning: Enterprise-grade, widely adopted
• Atlassian Design: Team collaboration tools
• Microsoft Fluent: Cross-platform experiences
• IBM Carbon: Data-heavy applications

For Startups & Side Projects

• shadcn/ui: Customizable, copy-paste components
• Chakra UI: Composable, accessible
• Mantine: Feature-rich, modern
• DaisyUI: Tailwind-native, themable

For Government & Public Sector

• US Web Design Standards: Official US government
• GOV.UK Design System: UK government standard
• Canada CA Design System: Canadian government
• Australia Design System: Australian government

For Open Source Projects

• Primer (GitHub): Developer tools
• Polaris (Shopify): E-commerce
• Pajamas (GitLab): DevOps platform

Color Selection Guide

Brand Colors

1. Start with Adobe Color or Coolors
2. Generate palette from brand values
3. Test with Khroma for harmony
4. Verify accessibility with whocanuse or Colorable

Data Visualization

• Color Brewer 2: Scientifically accurate
• Viridis: Perceptually uniform
• Tableau 20: Categorical data

Dark Mode

• UI Gradients: Pre-built dark themes
• CSS Gradient: Custom dark backgrounds
• Happy Hues: Light/dark preview

Typography Workflow

Selection Process

1. Choose typeface from Google Fonts
2. Test pairing with Fontjoy
3. Calculate scale with Golden Ratio
4. Verify readability with TypeScale
5. Self-host with Fontsource or Google Webfonts Helper

Font Pairings

Heading	Body	Vibe
Playfair Display	Lato	Elegant
Montserrat	Open Sans	Modern
Poppins	Inter	Clean
Oswald	Roboto	Bold

Icon Strategy

Selection Criteria

• Consistency: Use single family
• Format: SVG preferred
• Size: 24px baseline
• Customization: Stroke width, color

Workflow

1. Search Iconify or ** Phosphor Icons**
2. Export SVG for React/Vue
3. Use Iconset or Nucleo for management
4. Optimize with SVGOMG

UI Graphics & Assets

Illustrations

Source	Style	License
Undraw	Flat, modern	Free
Drawkit	Hand-drawn	Free
Blush	Customizable	Free
Humaaans	Mix-and-match	Free
Manypixels	Isometric	Free

Stock Photos

Source	Quality	License
Unsplash	High	Free
Pexels	High	Free
Pixabay	High	Free
Reshot	Curated	Free

Mockups

• Placeit: Browser/device mockups
• Magic Mockups: Simple placeholders
• Mockup World: PSD templates

Component Library Selection

React

Library	Size	Accessibility	Customization
shadcn/ui	Medium	Excellent	High (copy)
Chakra UI	Medium	Excellent	Medium
Mantine	Medium	Excellent	Medium
Radix UI	Small	Excellent	High (headless)
MUI	Large	Good	Medium

Vue

Library	Size	Customization
Vuetify	Large	Medium
PrimeVue	Medium	High
Naive UI	Medium	High

General Selection Criteria

1. Bundle size: Check tree-shaking
2. TypeScript support: Required
3. Accessibility: WCAG 2.1 AA
4. Theming: CSS variables preferred
5. Community: Stars, contributors, activity

Design Inspiration

Galleries

• Dribbble: Trending UI designs
• Behance: Professional work
• Awwwards: Web design awards
• Muzli: Curated discoveries

Pattern References

• UI Patterns: Solution catalog
• Mobbin: Real-world examples
• Screenlane: Mobile patterns

File Structure for Design Projects

project/
├── design/
│   ├── assets/
│   │   ├── icons/
│   │   ├── illustrations/
│   │   └── fonts/
│   ├── colors/
│   │   └── palette.json
│   └── typography/
│       └── fonts.json
├── src/
│   ├── components/
│   ├── styles/
│   └── utils/
└── docs/
    ├── design-decisions.md
    └── accessibility-checklist.md

Accessibility Checklist

• Color contrast 4.5:1 minimum
• Keyboard navigation
• ARIA labels where needed
• Focus indicators visible
• Screen reader tested
• Reduced motion respected
• Alt text for images
• Form labels present

Resources by Task

Starting a New Project

1. Choose design system → See DESIGN-SYSTEMS.md
2. Set up colors → See COLORS.md
3. Select typography → See TYPOGRAPHY.md
4. Add icons → See ICONS.md

Finding Specific Resources

• UI Components → COMPONENTS.md
• Stock images → ASSETS.md
• Design tools → TOOLS.md
• Templates → TEMPLATES.md

Learning Design

• Design principles → See PRINCIPLES.md
• Best practices → See BEST-PRACTICES.md
• Case studies → See CASE-STUDIES.md