GLM-Tools-Skills-Agents/frontend-ui-ux-design/design-systems

Design Systems Reference

Comprehensive guide to design systems, pattern libraries, and design tokens.

---

🎨 Popular Design Systems

Enterprise Design Systems

System	Company	URL	Key Features
Material Design	Google	https://m3.material.io	3D effects, motion, color system
Apple Human Interface	Apple	https://developer.apple.com/design	iOS, macOS, watchOS guidelines
Fluent Design	Microsoft	https://fluent2.microsoft.design	Depth, light, motion, material
Carbon	IBM	https://carbondesignsystem.com	Open source, enterprise-grade
Polaris	Shopify	https://polaris.shopify.com	E-commerce focused
Lightning	Salesforce	https://www.lightningdesignsystem.com	CRM components
Spectrum	Adobe	https://spectrum.adobe.com	Creative tools design
Evergreen	Segment	https://evergreen.segment.com	React components
Gestalt	Pinterest	https://gestalt.pinterest.systems	Pinboard UI patterns
Primer	GitHub	https://primer.style	Developer-focused UI

Startup/SaaS Design Systems

System	Company	URL	Key Features
Chakra UI	Chakra	https://chakra-ui.com	Accessible, composable
Mantine	Mantine	https://mantine.dev	Full-featured hooks
Radix Themes	Radix	https://radix-ui.com/themes	Accessible primitives
Circuit UI	SumUp	https://circuit.sumup.com	Fintech focused
Seed	Intercom	https://seed.intercom.com	Conversation UI
Canvas	HubSpot	https://canvas.hubspot.com	Marketing tools
Base Web	Uber	https://baseweb.design	Transportation UI
Atlas	Atlassian	https://atlassian.design	Collaboration tools

---

🧱 Design Tokens

Design tokens are the visual design atoms of the design system.

Token Categories

Category	Examples	Purpose
Colors	primary, secondary, success, error	Brand & semantic colors
Typography	font-family, font-size, line-height	Text styling
Spacing	space-xs, space-md, space-lg	Layout gaps
Sizing	size-sm, size-md, size-lg	Component sizes
Borders	border-radius, border-width	Edge styling
Shadows	shadow-sm, shadow-md, shadow-lg	Elevation
Animation	duration, easing, delay	Motion timing
Breakpoints	sm, md, lg, xl	Responsive design

Token Tools

Tool	URL	Description
Style Dictionary	https://amzn.github.io/style-dictionary	Token management
Theo	https://github.com/salesforce-ux/theo	Salesforce token tool
Diez	https://diez.org	Design language framework
Figma Tokens	https://www.figmatokens.com	Figma plugin
Token Transformer	https://tokens.studio	Design token studio

---

🎯 Design Patterns

Layout Patterns

Pattern	Use Case	Description
Holy Grail	General	Header, footer, sidebar, main content
F-Pattern	Content-heavy	Eye-tracking optimized layout
Z-Pattern	Landing pages	Visual hierarchy flow
Bento Grid	Dashboards	Card-based modular layout
Sidebar Navigation	Apps	Persistent side menu
Top Navigation	Marketing sites	Horizontal nav bar

Component Patterns

Pattern	Use Case	Description
Card	Content preview	Container with image, title, actions
Modal	Focused action	Overlay dialog for interactions
Drawer	Side content	Slide-out panel
Toast	Notifications	Brief, auto-dismiss messages
Skeleton	Loading states	Content placeholder
Infinite Scroll	Long lists	Continuous content loading
Accordion	FAQs	Expandable content sections

---

🎨 Style Systems

Visual Styles

Style	Key Characteristics	Best For
Flat Design	No shadows, minimal, clean	Modern apps
Material Design	Paper-like, elevation, shadows	Android, enterprise
Glassmorphism	Frosted glass, blur, transparency	Modern UI, iOS
Neumorphism	Soft shadows, extruded	Experimental, tactile
Claymorphism	3D clay-like, colorful	Playful, approachable
Skeuomorphism	Realistic textures	Traditional, familiar
Minimalism	Clean, lots of whitespace	SaaS, professional
Brutalism	Raw, bold, unconventional	Creative, artistic

---

📱 Responsive Design

Breakpoints Standard

Name	Size	Use Case
xs	0-639px	Mobile phones
sm	640px+	Large phones
md	768px+	Tablets
lg	1024px+	Laptops
xl	1280px+	Desktops
2xl	1536px+	Large screens

Mobile-First Approach

/* Base styles for mobile */
.element {
  padding: 1rem;
}

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

/* Desktop and up */
@media (min-width: 1024px) {
  .element {
    padding: 3rem;
  }
}

---

♿ Accessibility Guidelines

WCAG 2.1 Levels

Level	Description	Requirements
A	Minimum	Basic accessibility
AA	Standard	Most organizations
AAA	Enhanced	Highest accessibility

Key Accessibility Rules

1. Color Contrast - 4.5:1 for normal text, 3:1 for large text
2. Focus States - Visible focus indicators
3. Keyboard Navigation - All features accessible via keyboard
4. Screen Readers - Proper ARIA labels and roles
5. Alt Text - Descriptive image alternatives
6. Form Labels - Associated labels for all inputs
7. Motion - Respect prefers-reduced-motion

---

🔧 Design System Tools

Documentation Tools

Tool	URL	Description
Storybook	https://storybook.js.org	Component documentation
Docz	https://www.docz.site	MDX-based docs
Docusaurus	https://docusaurus.io	Documentation sites
Zeroheight	https://zeroheight.com	Design system docs
Specify	https://specifyapp.com	Design token platform

Design Tools

Tool	URL	Description
Figma	https://figma.com	Collaborative design
Sketch	https://sketch.com	macOS design tool
Adobe XD	https://adobe.com/products/xd	Prototyping
Framer	https://framer.com	Interactive design

---

🔗 Related Skills

• ui-ux-pro-max - Complete design intelligence
• component-libraries - UI component collections
• css-frameworks - CSS utilities
• frontend-stacks - Technology stacks

---

Last updated: 2026-02-13