CSS · CSS Best Practices

Design Systems

Create consistent designs across your entire product

Find videos you like?

Save to resource drawer for future reference!

What is a Design System?

A collection of reusable components, guidelines, and standards that ensure design consistency

Consistent colors, typography, and spacing

Reusable UI components with clear guidelines

Design tokens for easy theme changes

Documentation for designers and developers

Used by big companies (Google Material, Apple)

Speeds up design and development

Real-World Example

Think of LEGO blocks: every piece follows the same rules (how they connect, their size system), you can combine them in endless ways, and everything works together perfectly. A design system is the same - consistent building blocks that work together to create any interface!

Parts of a Design System

What makes up a design system

🎨 Design Tokens

Variables for colors, spacing, fonts

--primary-color: #3b82f6

📦 Components

Reusable UI pieces (buttons, cards, forms)

Button component with 5 variations

📐 Guidelines

Rules for using components

When to use primary vs secondary buttons

📚 Documentation

How to use everything

Component examples and code snippets

Design Tokens - The Foundation

Variables that define your design

What are Design Tokens?

Design tokens are named variables that store design decisions (colors, spacing, fonts). Change one token, update everywhere! Think of them as the DNA of your design system.

Design Tokens Example

CSS

/* design-tokens.css - Your design system's foundation */

/* Colors */
:root {
  /* Primary colors */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-900: #1e3a8a;
  
  /* Neutral colors */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-500: #6b7280;
  --color-gray-900: #111827;
  
  /* Semantic colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  
  /* Typography */
  --font-sans: system-ui, sans-serif;
  --font-mono: 'Courier New', monospace;
  
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

Using Design Tokens in Components

CSS

/* button.css - Uses design tokens */

.button {
  /* Use tokens instead of hardcoded values */
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.button--primary {
  background: var(--color-primary-500);
  color: white;
}

.button--primary:hover {
  background: var(--color-primary-600);
}

.button--small {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.button--large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

Example: Mini Design System

See design tokens in action

Design System in Action

Frontend

<div class="container">
  <h1 class="heading-large">Design System Demo</h1>
  <p class="text-body">This demo uses a simple design system with tokens for colors, spacing, and typography.</p>
  <div class="section">
    <h2 class="heading-medium">Buttons</h2>
    <button class="btn btn--primary btn--medium">Primary</button>
    <button class="btn btn--secondary btn--medium">Secondary</button>
    <button class="btn btn--success btn--medium">Success</button>
  </div>
  <div class="section">
    <h2 class="heading-medium">Cards</h2>
    <div class="card-grid">
      <div class="card">
        <h3 class="heading-small">Feature 1</h3>
        <p class="text-body">Consistent spacing and typography</p>
      </div>
      <div class="card">
        <h3 class="heading-small">Feature 2</h3>
        <p class="text-body">Reusable components</p>
      </div>
    </div>
  </div>
</div>

Live Preview

Loading preview...

Why Use a Design System?

The advantages

✅ Consistency

Every button looks the same. Every spacing follows the same scale. No more "this button is 14px, that one is 15px" inconsistencies.

✅ Speed

No decisions needed - use existing components. Build pages in minutes, not hours. Designers and developers work faster.

✅ Easy Updates

Change --color-primary once, update 1,000 buttons instantly. Rebranding becomes easy!

✅ Team Alignment

Everyone uses the same components. Designers design with real components. Developers build what was designed. No surprises!

How to Build a Design System

Step-by-step process

Step 1: Define Design Tokens

Start with the basics: colors (3-5 main colors), spacing scale (4px, 8px, 12px...), typography (2-3 fonts, 5-6 sizes), and border radius values.

Step 2: Build Core Components

Start with the most-used components: Button, Input, Card, Modal. Make sure they use your design tokens.

Step 3: Document Everything

Write clear guidelines: when to use each component, examples, code snippets. Make it easy for new team members.

Step 4: Create a Storybook

Build a website showing all components with live examples. Tools like Storybook, Figma, or even a simple HTML page work great.

Step 5: Maintain & Evolve

Review and update regularly. Add new components as needed. Get feedback from users and improve!

Famous Design Systems to Learn From

Real-world examples

🎨 Material Design (Google)

Google's design system used across all their products. Comprehensive, well-documented, with components for web and mobile.

material.io

🍎 Human Interface (Apple)

Apple's design language. Clean, minimalist, with detailed guidelines for iOS, macOS, and web.

developer.apple.com/design

⚡ Lightning (Salesforce)

Enterprise-focused design system. Great example of complex component library with clear documentation.

lightningdesignsystem.com

🛒 Polaris (Shopify)

E-commerce focused design system. Excellent examples of practical components for admin interfaces.

polaris.shopify.com

When to Create a Design System

Common scenarios

Multiple Products

When you have 2+ apps that should look similar

Large Teams

5+ designers/developers working together

Long-Term Projects

Products that will be maintained for years

White-Label Products

Same product with different branding for clients

Design System Best Practices

Start Small: Begin with 10-15 tokens and 5 components. Don't try to build everything at once
Use Your System: Actually use it in a real project. You'll find what's missing or doesn't work
Version Control: Treat your design system like code - use Git, track changes, release versions
Get Feedback: Talk to designers and developers using it. What's confusing? What's missing?
Keep Documentation Updated: Every component should have examples and usage guidelines
Make it Accessible: All components should work with keyboard and screen readers

Design System Tools

Design: Figma, Sketch, Adobe XD - create design libraries

Documentation: Storybook, Docz, Styleguidist - showcase components

Tokens: Style Dictionary, Theo - manage design tokens

CSS: CSS Variables, Sass, CSS Modules - implement tokens

Previous Topic

Modularity

Component-based CSS, CSS Modules, scoped styles, and modular architecture.

Next Topic

CSS Preprocessors

Sass, Less, PostCSS, variables, mixins, functions, and preprocessing workflows.

Ask a Question

Have a question about Design Systems? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · CSS Best Practices

Design Systems

Create consistent designs across your entire product

Find videos you like?

Save to resource drawer for future reference!

What is a Design System?

A collection of reusable components, guidelines, and standards that ensure design consistency

Consistent colors, typography, and spacing

Reusable UI components with clear guidelines

Design tokens for easy theme changes

Documentation for designers and developers

Used by big companies (Google Material, Apple)

Speeds up design and development

Real-World Example

Parts of a Design System

What makes up a design system

🎨 Design Tokens

Variables for colors, spacing, fonts

--primary-color: #3b82f6

📦 Components

Reusable UI pieces (buttons, cards, forms)

Button component with 5 variations

📐 Guidelines

Rules for using components

When to use primary vs secondary buttons

📚 Documentation

How to use everything

Component examples and code snippets

Design Tokens - The Foundation

Variables that define your design

What are Design Tokens?

Design tokens are named variables that store design decisions (colors, spacing, fonts). Change one token, update everywhere! Think of them as the DNA of your design system.

Design Tokens Example

CSS

/* design-tokens.css - Your design system's foundation */

/* Colors */
:root {
  /* Primary colors */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-900: #1e3a8a;
  
  /* Neutral colors */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-500: #6b7280;
  --color-gray-900: #111827;
  
  /* Semantic colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  
  /* Typography */
  --font-sans: system-ui, sans-serif;
  --font-mono: 'Courier New', monospace;
  
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

Using Design Tokens in Components

CSS

/* button.css - Uses design tokens */

.button {
  /* Use tokens instead of hardcoded values */
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.button--primary {
  background: var(--color-primary-500);
  color: white;
}

.button--primary:hover {
  background: var(--color-primary-600);
}

.button--small {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.button--large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

Example: Mini Design System

See design tokens in action

Design System in Action

Frontend

<div class="container">
  <h1 class="heading-large">Design System Demo</h1>
  <p class="text-body">This demo uses a simple design system with tokens for colors, spacing, and typography.</p>
  <div class="section">
    <h2 class="heading-medium">Buttons</h2>
    <button class="btn btn--primary btn--medium">Primary</button>
    <button class="btn btn--secondary btn--medium">Secondary</button>
    <button class="btn btn--success btn--medium">Success</button>
  </div>
  <div class="section">
    <h2 class="heading-medium">Cards</h2>
    <div class="card-grid">
      <div class="card">
        <h3 class="heading-small">Feature 1</h3>
        <p class="text-body">Consistent spacing and typography</p>
      </div>
      <div class="card">
        <h3 class="heading-small">Feature 2</h3>
        <p class="text-body">Reusable components</p>
      </div>
    </div>
  </div>
</div>

Live Preview

Loading preview...

Why Use a Design System?

The advantages

✅ Consistency

Every button looks the same. Every spacing follows the same scale. No more "this button is 14px, that one is 15px" inconsistencies.

✅ Speed

No decisions needed - use existing components. Build pages in minutes, not hours. Designers and developers work faster.

✅ Easy Updates

Change --color-primary once, update 1,000 buttons instantly. Rebranding becomes easy!

✅ Team Alignment

Everyone uses the same components. Designers design with real components. Developers build what was designed. No surprises!

How to Build a Design System

Step-by-step process

Step 1: Define Design Tokens

Start with the basics: colors (3-5 main colors), spacing scale (4px, 8px, 12px...), typography (2-3 fonts, 5-6 sizes), and border radius values.

Step 2: Build Core Components

Start with the most-used components: Button, Input, Card, Modal. Make sure they use your design tokens.

Step 3: Document Everything

Write clear guidelines: when to use each component, examples, code snippets. Make it easy for new team members.

Step 4: Create a Storybook

Build a website showing all components with live examples. Tools like Storybook, Figma, or even a simple HTML page work great.

Step 5: Maintain & Evolve

Review and update regularly. Add new components as needed. Get feedback from users and improve!

Famous Design Systems to Learn From

Real-world examples

🎨 Material Design (Google)

Google's design system used across all their products. Comprehensive, well-documented, with components for web and mobile.

material.io

🍎 Human Interface (Apple)

Apple's design language. Clean, minimalist, with detailed guidelines for iOS, macOS, and web.

developer.apple.com/design

⚡ Lightning (Salesforce)

Enterprise-focused design system. Great example of complex component library with clear documentation.

lightningdesignsystem.com

🛒 Polaris (Shopify)

E-commerce focused design system. Excellent examples of practical components for admin interfaces.

polaris.shopify.com

When to Create a Design System

Common scenarios

Multiple Products

When you have 2+ apps that should look similar

Large Teams

5+ designers/developers working together

Long-Term Projects

Products that will be maintained for years

White-Label Products

Same product with different branding for clients

Design System Best Practices

Start Small: Begin with 10-15 tokens and 5 components. Don't try to build everything at once
Use Your System: Actually use it in a real project. You'll find what's missing or doesn't work
Version Control: Treat your design system like code - use Git, track changes, release versions
Get Feedback: Talk to designers and developers using it. What's confusing? What's missing?
Keep Documentation Updated: Every component should have examples and usage guidelines
Make it Accessible: All components should work with keyboard and screen readers

Design System Tools

Design: Figma, Sketch, Adobe XD - create design libraries

Documentation: Storybook, Docz, Styleguidist - showcase components

Tokens: Style Dictionary, Theo - manage design tokens

CSS: CSS Variables, Sass, CSS Modules - implement tokens

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Modularity

CSS Preprocessors

Building Your Learning Module...

Design Systems

Real-World Example

🎨 Design Tokens

📦 Components

📐 Guidelines

📚 Documentation

What are Design Tokens?

Design Tokens Example

Using Design Tokens in Components

Design System in Action

✅ Consistency

✅ Speed

✅ Easy Updates

✅ Team Alignment

Step 1: Define Design Tokens

Step 2: Build Core Components

Step 3: Document Everything

Step 4: Create a Storybook

Step 5: Maintain & Evolve

🎨 Material Design (Google)

🍎 Human Interface (Apple)

⚡ Lightning (Salesforce)

🛒 Polaris (Shopify)

Multiple Products

Large Teams

Long-Term Projects

White-Label Products

Design System Best Practices

Design System Tools

Modularity

CSS Preprocessors

Design Systems

Real-World Example

🎨 Design Tokens

📦 Components

📐 Guidelines

📚 Documentation

What are Design Tokens?

Design Tokens Example

Using Design Tokens in Components

Design System in Action

✅ Consistency

✅ Speed

✅ Easy Updates

✅ Team Alignment

Step 1: Define Design Tokens

Step 2: Build Core Components

Step 3: Document Everything

Step 4: Create a Storybook

Step 5: Maintain & Evolve

🎨 Material Design (Google)

🍎 Human Interface (Apple)

⚡ Lightning (Salesforce)

🛒 Polaris (Shopify)

Multiple Products

Large Teams

Long-Term Projects

White-Label Products

Design System Best Practices

Design System Tools