# design-systems > Design system principles, component libraries, typography, color theory, spacing systems, and design tokens - Author: DavinciDreams - Repository: DavinciDreams/Agent-Team-Plugins - Version: 20260207014432 - Stars: 0 - Forks: 0 - Last Updated: 2026-02-07 - Source: https://github.com/DavinciDreams/Agent-Team-Plugins - Web: https://mule.run/skillshub/@@DavinciDreams/Agent-Team-Plugins~design-systems:20260207014432 --- --- name: design-systems description: Design system principles, component libraries, typography, color theory, spacing systems, and design tokens --- # Design Systems ## Design System Principles ### Core Principles - **Consistency**: Ensure consistent visual language and behavior across all products - **Scalability**: Design systems that grow with the product and team - **Efficiency**: Speed up design and development through reusable components - **Accessibility**: Build accessibility into every component from the start - **Maintainability**: Create systems that are easy to update and maintain - **Documentation**: Document everything thoroughly for clear adoption ### Design System Structure - **Foundations**: Colors, typography, spacing, icons, elevation - **Components**: Reusable UI elements with documented variations - **Patterns**: Common solutions to recurring design problems - **Templates**: Page layouts and screen structures - **Guidelines**: Usage rules and best practices - **Resources**: Assets, downloads, and implementation guides ## Component Libraries ### Popular Component Libraries - **Material Design**: Google's design system with comprehensive components - **Ant Design**: Enterprise-class UI design language and React components - **Tailwind CSS**: Utility-first CSS framework with design tokens - **shadcn/ui**: Beautiful, accessible components built with Radix UI and Tailwind - **Chakra UI**: Simple, modular and accessible component library - **MUI**: React components that implement Google's Material Design ### Component Design Principles - **Single Responsibility**: Each component should have one clear purpose - **Composability**: Components should be composable and flexible - **Predictable Behavior**: Components should behave consistently - **Accessible**: All components must meet WCAG AA standards - **Responsive**: Components must work across all device sizes - **Documented**: Each component has clear documentation and examples ### Component States - **Default**: Normal state of the component - **Hover**: When user hovers over the component - **Focus**: When component has keyboard focus - **Active**: When component is being activated - **Disabled**: When component is not available - **Loading**: When component is in a loading state - **Error**: When component has an error state ## Typography ### Typography Fundamentals - **Font Families**: Choose font families that are readable and on-brand - **Font Weights**: Use a limited number of weights (regular, medium, bold) - **Font Sizes**: Establish a type scale with consistent ratios - **Line Height**: Use appropriate line height for readability (1.4-1.6) - **Letter Spacing**: Adjust letter spacing for headings and uppercase text - **Text Alignment**: Left-align for body text, center for short headings ### Type Scale - **Modular Scale**: Use a mathematical scale for consistent sizing - **Common Ratios**: Major third (1.25), Perfect fourth (1.33), Golden ratio (1.618) - **Responsive Typography**: Scale text size based on viewport width - **Clamp Function**: Use CSS clamp() for fluid typography - **Text Scaling**: Support text scaling up to 200% for accessibility ### Typography Hierarchy - **H1**: Main page title, largest size - **H2**: Section headings - **H3**: Subsection headings - **H4-H6**: Minor headings - **Body**: Main content text - **Caption**: Supporting text, labels - **Overline**: Category labels, small uppercase text ## Color Theory ### Color Fundamentals - **Primary Color**: Main brand color, used for primary actions - **Secondary Color**: Supporting brand color, used for accents - **Neutral Colors**: Grays for text, backgrounds, borders - **Semantic Colors**: Success, warning, error, info colors - **Color Palettes**: Create shades and tints of each color - **Color Contrast**: Ensure WCAG AA compliance (4.5:1 for normal text) ### Color Systems - **HSL**: Hue, Saturation, Lightness - easier for designers to work with - **RGB**: Red, Green, Blue - used for digital displays - **HEX**: Hexadecimal - common in web design - **Design Tokens**: Store colors as tokens for consistency - **Dark Mode**: Create dark mode variants of all colors ### Color Usage Guidelines - **60-30-10 Rule**: 60% neutral, 30% primary, 10% accent - **Limit Palette**: Use 5-7 colors maximum for clarity - **Meaningful Colors**: Use color to convey meaning consistently - **Accessibility First**: Ensure all color combinations meet contrast requirements - **Color Blindness**: Consider color blind users when choosing palettes ## Spacing Systems ### Spacing Fundamentals - **Spacing Scale**: Use a consistent scale (4px, 8px, 16px, 24px, 32px, 48px, 64px) - **4px Base Grid**: Use 4px as the base unit for spacing - **Consistent Application**: Apply spacing consistently across components - **Responsive Spacing**: Adjust spacing for different screen sizes - **Whitespace**: Use whitespace effectively to improve readability ### Spacing Types - **Padding**: Space inside elements - **Margin**: Space outside elements - **Gap**: Space between flex/grid items - **Inset**: Shorthand for top, right, bottom, left spacing ## Icon Systems ### Icon Fundamentals - **Icon Style**: Choose a consistent icon style (outline, filled, duotone) - **Icon Size**: Establish standard sizes (16px, 24px, 32px, 48px) - **Icon Library**: Use an established icon library (Material Icons, Lucide, Heroicons) - **Custom Icons**: Create custom icons when needed, maintain consistency - **Accessibility**: Include aria-label or aria-hidden for icons ### Icon Guidelines - **Meaningful**: Icons should be universally understood - **Simple**: Keep icons simple and clear - **Consistent**: Use consistent stroke width and style - **Scalable**: Icons should look good at all sizes - **Labeled**: Always provide text labels for icons ## Illustration Guidelines ### Illustration Style - **Consistent Style**: Maintain consistent illustration style across all illustrations - **Color Palette**: Use brand colors for illustrations - **Purpose**: Use illustrations to support content, not decorate - **Accessibility**: Ensure illustrations don't distract from content - **Loading States**: Use illustrations for empty and loading states ## Design Tokens ### Token Fundamentals - **Naming Convention**: Use clear, descriptive names (color-primary-500) - **Categories**: Organize tokens by category (color, spacing, typography) - **Aliases**: Create aliases for semantic tokens (color-text-primary) - **Platform Support**: Support multiple platforms (web, iOS, Android) - **Documentation**: Document all tokens with examples ### Token Types - **Color Tokens**: Colors for backgrounds, text, borders, etc. - **Spacing Tokens**: Padding, margin, gap values - **Typography Tokens**: Font families, sizes, weights, line heights - **Border Radius Tokens**: Rounded corner values - **Shadow Tokens**: Elevation and shadow values - **Animation Tokens**: Duration, easing, delay values ## Design System Documentation ### Documentation Structure - **Overview**: Introduction to the design system - **Foundations**: Colors, typography, spacing, icons - **Components**: Each component with examples and guidelines - **Patterns**: Common design patterns and solutions - **Guidelines**: Usage rules and best practices - **Resources**: Downloads, assets, and implementation guides ### Documentation Best Practices - **Live Examples**: Show live, interactive examples - **Code Snippets**: Provide code for each component - **Do's and Don'ts**: Show correct and incorrect usage - **Accessibility Notes**: Include accessibility requirements - **Changelog**: Track changes and updates - **Versioning**: Use semantic versioning for releases