Design Systems

Component libraries, design tokens, documentation, and Storybook integration.

Overview

Design systems ensure consistency and accelerate development across teams.

Key Concepts

• Component Library — Reusable UI components
• Design Tokens — Colors, spacing, typography as variables
• Storybook — Component documentation and testing
• Theming — Customizable appearance with tokens
• Accessibility — Built-in a11y support

Code Examples

// Design tokens
const tokens = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
    success: '#28a745',
    danger: '#dc3545'
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px'
  },
  typography: {
    fontFamily: 'system-ui, sans-serif',
    fontSize: {
      sm: '14px',
      base: '16px',
      lg: '18px',
      xl: '24px'
    }
  }
};

// Theme provider
const ThemeContext = createContext(tokens);

function ThemeProvider({ children, customTokens }) {
  const theme = { ...tokens, ...customTokens };
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
}

function useTheme() {
  return useContext(ThemeContext);
}

// Button component with design tokens
function Button({ variant = 'primary', size = 'md', children }) {
  const theme = useTheme();
  
  return (
    <button
      style={{
        backgroundColor: theme.colors[variant],
        padding: theme.spacing[size],
        fontSize: theme.typography.fontSize[size],
        fontFamily: theme.typography.fontFamily,
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer'
      }}
    >
      {children}
    </button>
  );
}

Practice

Create a design system with Storybook documentation and theme customization.