Design Systems

🎨 Design Systems with Tailwind CSS

The LEGO Analogy

Imagine you have a giant box of LEGO blocks. But instead of random colors and sizes everywhere, you have organized bins:

• Blue bin: All the blue blocks (your colors)
• Size bin: Small, medium, large blocks (your spacing)
• Letter bin: Different letter blocks for words (your typography)

A Design System is like organizing your LEGO so everyone builds things that look like they belong together!

🏗️ What is a Design System?

A Design System is a rulebook for how your website looks.

Without a Design System:

• Button A is blue, Button B is kinda-blue
• This page has 10px padding, that page has 12px
• Headings use Arial here, Helvetica there
• Result: Messy, confusing, looks unprofessional

With a Design System:

• ALL buttons use the exact same blue
• ALL padding follows the same scale
• ALL text uses the same fonts
• Result: Clean, consistent, looks amazing!

📐 Consistent Spacing Scales

The Problem Without Spacing Rules

<!-- Chaos! Random numbers everywhere -->
<div style="padding: 7px">...</div>
<div style="margin: 13px">...</div>
<div style="gap: 11px">...</div>

Every developer picks different numbers. Nothing lines up!

Tailwind’s Magic Spacing Scale

Tailwind gives you a ruler with set marks:

The 4-Point Grid System

Everything is a multiple of 4 pixels:

• 4, 8, 12, 16, 20, 24, 32, 40, 48…

Why 4? It divides evenly on all screens!

<!-- Consistent spacing! -->
<div class="p-4">16px padding</div>
<div class="m-2">8px margin</div>
<div class="gap-6">24px gap</div>

Spacing in Action

graph TD
    A["Container p-6"] --> B["Card p-4"]
    B --> C["Content gap-2"]
    C --> D["Text mb-2"]
    C --> E["Button mt-4"]

Pro Tip: Stick to these numbers: 2, 4, 6, 8. They cover 90% of your needs!

🎨 Color Palette Management

The Rainbow Problem

Without a system:

/* Developer 1 */
color: #3B82F6;
/* Developer 2 */
color: #2563EB;
/* Developer 3 */
color: blue;

Three “blues” that don’t match!

Tailwind’s Color System

Tailwind organizes colors like a paint store:

blue-50   → Very light blue (backgrounds)
blue-100  → Light blue
blue-200  → ...
blue-500  → THE main blue (buttons)
blue-600  → Darker (hover states)
blue-900  → Very dark blue (text)

Using Colors Consistently

<!-- Primary Button -->
<button class="bg-blue-500 hover:bg-blue-600
               text-white">
  Click Me
</button>

<!-- Secondary Button -->
<button class="bg-gray-200 hover:bg-gray-300
               text-gray-800">
  Cancel
</button>

Building Your Color Palette

graph TD
    A["Brand Colors"] --> B["Primary: blue-500"]
    A --> C["Secondary: gray-500"]
    A --> D["Accent: amber-500"]

    E["Semantic Colors"] --> F["Success: green-500"]
    E --> G["Error: red-500"]
    E --> H["Warning: yellow-500"]

Custom Colors in Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#E0F2FE',
          DEFAULT: '#0EA5E9',
          dark: '#0369A1',
        }
      }
    }
  }
}

Now use bg-brand, bg-brand-light, bg-brand-dark!

✍️ Typography Systems

The Font Chaos Problem

/* Without a system */
font-size: 14px;
font-size: 15px;
font-size: 16px;
font-size: 17px;

Too many similar sizes = visual noise!

Tailwind’s Type Scale

Like a music scale, each size has a purpose:

Font Weights

<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>

Line Height (Leading)

<p class="leading-tight">Compact lines</p>
<p class="leading-normal">Default spacing</p>
<p class="leading-relaxed">Breathing room</p>

Typography Hierarchy Example

<article class="space-y-4">
  <h1 class="text-3xl font-bold">
    Page Title
  </h1>
  <h2 class="text-xl font-semibold">
    Section Heading
  </h2>
  <p class="text-base leading-relaxed">
    Body paragraph text goes here...
  </p>
  <span class="text-sm text-gray-500">
    Caption or metadata
  </span>
</article>

🧩 Putting It All Together

A Complete Design System Card

<div class="p-6 bg-white rounded-lg shadow">
  <h3 class="text-xl font-semibold
             text-gray-900 mb-2">
    Card Title
  </h3>
  <p class="text-base text-gray-600
            leading-relaxed mb-4">
    Description text using our
    typography system.
  </p>
  <button class="px-4 py-2
                 bg-blue-500 hover:bg-blue-600
                 text-white font-medium
                 rounded">
    Action
  </button>
</div>

The Three Pillars

graph TD
    A["Design System"] --> B["Spacing"]
    A --> C["Colors"]
    A --> D["Typography"]

    B --> B1["p-4, m-2, gap-6"]
    C --> C1["blue-500, gray-200"]
    D --> D1["text-lg, font-bold"]

💡 Key Takeaways

1. Spacing: Use the 4-point grid (p-2, p-4, p-6, p-8)
2. Colors: Pick shades from the same family (blue-500, blue-600)
3. Typography: Limit yourself to 4-5 text sizes
4. Consistency: Everyone uses the SAME classes

Remember: A Design System is like a recipe. Follow it, and everything tastes (looks) great together!

🚀 Interview Quick Hits

Q: What is a design system?

A collection of reusable components and guidelines ensuring visual consistency.

Q: Why use spacing scales?

Prevents random pixel values, creates visual rhythm, easier maintenance.

Q: How does Tailwind handle colors?

Numbered shades (50-900) for each color family.

Q: What’s the base font size in Tailwind?

16px (text-base)

You’ve got this! Design Systems make you look like a pro. 🎯