CSS Architecture 🏗️

Build scalable, maintainable, and predictable CSS systems for enterprise applications.

Why CSS Architecture Matters?

CSS Architecture is the foundation for building maintainable, scalable, and consistent user interfaces. It provides structure, predictability, and reusability across your entire application.

🏗️ Scalable Structure

Grows gracefully with your application

🎯 Consistency

Uniform design across all components

⚡ Maintainability

Easy to update and extend

🏢 Enterprise Dashboard Architecture

Architecture Layers:

  • Design Tokens: Variables, colors, typography scales
  • Layout System: Grid, flexbox, container patterns
  • Component Library: Reusable UI components
  • Utility Classes: Single-purpose helpers
  • Responsive Design: Mobile-first breakpoints

Dashboard Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🏢 Enterprise Dashboard - CSS Architecture</title>
  <style>
    /* ===== ARCHITECTURE FOUNDATION ===== */
    
    /* Design Tokens & Variables */
    :root {
      /* Color System */
      --color-primary-50: #eff6ff;
      --color-primary-100: #dbeafe;
      --color-primary-500: #3b82f6;
      --color-primary-600: #2563eb;
      --color-primary-700: #1d4ed8;
      
      --color-gray-50: #f9fafb;
      --color-gray-100: #f3f4f6;
      --color-gray-200: #e5e7eb;
      --color-gray-500: #6b7280;
      --color-gray-700: #374151;
      --color-gray-900: #111827;
      
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      
      /* Typography Scale */
      --text-xs: 0.75rem;
      --text-sm: 0.875rem;
      --text-base: 1rem;
      --text-lg: 1.125rem;
      --text-xl: 1.25rem;
      --text-2xl: 1.5rem;
      --text-3xl: 1.875rem;
      --text-4xl: 2.25rem;
      
      /* Spacing Scale */
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      
      /* Border Radius */
      --radius-sm: 0.125rem;
      --radius-md: 0.375rem;
      --radius-lg: 0.5rem;
      --radius-xl: 0.75rem;
      
      /* Shadows */
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
      
      /* Layout */
      --header-height: 4rem;
      --sidebar-width: 16rem;
      --sidebar-collapsed: 4rem;
    }

    /* ===== LAYOUT SYSTEM ===== */
    
    /* Layout Containers */
    .layout {
      display: grid;
      grid-template-areas: 
        "sidebar header"
        "sidebar main";
      grid-template-columns: auto 1fr;
      grid-template-rows: var(--header-height) 1fr;
      min-height: 100vh;
    }
    
    .layout--collapsed {
      grid-template-columns: var(--sidebar-collapsed) 1fr;
    }
    
    .layout__header {
      grid-area: header;
      background: white;
      border-bottom: 1px solid var(--color-gray-200);
      position: sticky;
      top: 0;
      z-index: 40;
    }
    
    .layout__sidebar {
      grid-area: sidebar;
      background: var(--color-gray-900);
      color: white;
      transition: all 0.3s ease;
    }
    
    .layout__main {
      grid-area: main;
      background: var(--color-gray-50);
      overflow: auto;
    }
    
    /* Grid System */
    .grid {
      display: grid;
      gap: var(--space-6);
    }
    
    .grid--2 {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .grid--3 {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    .grid--4 {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    /* Flexbox Utilities */
    .flex {
      display: flex;
    }
    
    .flex--center {
      align-items: center;
      justify-content: center;
    }
    
    .flex--between {
      align-items: center;
      justify-content: space-between;
    }
    
    .flex--column {
      flex-direction: column;
    }

    /* ===== COMPONENT SYSTEM ===== */
    
    /* Header Component */
    .header {
      height: var(--header-height);
      padding: 0 var(--space-6);
    }
    
    .header__content {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .header__actions {
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }
    
    /* Sidebar Component */
    .sidebar {
      width: var(--sidebar-width);
      height: 100vh;
      position: sticky;
      top: 0;
      transition: width 0.3s ease;
    }
    
    .sidebar--collapsed {
      width: var(--sidebar-collapsed);
    }
    
    .sidebar__brand {
      height: var(--header-height);
      display: flex;
      align-items: center;
      padding: 0 var(--space-4);
      border-bottom: 1px solid var(--color-gray-700);
    }
    
    .sidebar__nav {
      padding: var(--space-4);
    }
    
    .sidebar__item {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3);
      border-radius: var(--radius-md);
      color: var(--color-gray-300);
      text-decoration: none;
      transition: all 0.2s ease;
      margin-bottom: var(--space-2);
    }
    
    .sidebar__item:hover,
    .sidebar__item--active {
      background: var(--color-primary-600);
      color: white;
    }
    
    .sidebar--collapsed .sidebar__text {
      display: none;
    }
    
    /* Card Component */
    .card {
      background: white;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--color-gray-200);
      overflow: hidden;
    }
    
    .card--interactive {
      transition: all 0.2s ease;
      cursor: pointer;
    }
    
    .card--interactive:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    
    .card__header {
      padding: var(--space-6);
      border-bottom: 1px solid var(--color-gray-200);
    }
    
    .card__body {
      padding: var(--space-6);
    }
    
    .card__footer {
      padding: var(--space-6);
      border-top: 1px solid var(--color-gray-200);
      background: var(--color-gray-50);
    }
    
    /* Metric Card Variant */
    .card--metric {
      text-align: center;
      padding: var(--space-8);
    }
    
    .card--metric .metric__value {
      font-size: var(--text-3xl);
      font-weight: 700;
      color: var(--color-gray-900);
      margin-bottom: var(--space-2);
    }
    
    .card--metric .metric__label {
      color: var(--color-gray-500);
      font-size: var(--text-sm);
    }
    
    .card--metric .metric__change {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-md);
      font-size: var(--text-xs);
      font-weight: 500;
      margin-top: var(--space-3);
    }
    
    .metric__change--positive {
      background: var(--color-success);
      color: white;
    }
    
    .metric__change--negative {
      background: var(--color-error);
      color: white;
    }
    
    /* Button Component */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-md);
      font-weight: 500;
      font-size: var(--text-sm);
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
    }
    
    .btn--primary {
      background: var(--color-primary-600);
      color: white;
    }
    
    .btn--primary:hover {
      background: var(--color-primary-700);
    }
    
    .btn--secondary {
      background: var(--color-gray-100);
      color: var(--color-gray-700);
      border: 1px solid var(--color-gray-300);
    }
    
    .btn--secondary:hover {
      background: var(--color-gray-200);
    }
    
    .btn--ghost {
      background: transparent;
      color: var(--color-gray-600);
    }
    
    .btn--ghost:hover {
      background: var(--color-gray-100);
    }
    
    .btn--icon {
      padding: var(--space-2);
      border-radius: var(--radius-md);
    }
    
    /* Badge Component */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-xl);
      font-size: var(--text-xs);
      font-weight: 500;
    }
    
    .badge--success {
      background: var(--color-success);
      color: white;
    }
    
    .badge--warning {
      background: var(--color-warning);
      color: white;
    }
    
    .badge--error {
      background: var(--color-error);
      color: white;
    }
    
    .badge--outline {
      background: transparent;
      border: 1px solid var(--color-gray-300);
      color: var(--color-gray-600);
    }

    /* ===== UTILITIES ===== */
    
    /* Spacing */
    .p-0 { padding: 0; }
    .p-4 { padding: var(--space-4); }
    .p-6 { padding: var(--space-6); }
    .p-8 { padding: var(--space-8); }
    
    .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
    .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
    
    .m-0 { margin: 0; }
    .mb-2 { margin-bottom: var(--space-2); }
    .mb-4 { margin-bottom: var(--space-4); }
    .mb-6 { margin-bottom: var(--space-6); }
    
    /* Text */
    .text-sm { font-size: var(--text-sm); }
    .text-base { font-size: var(--text-base); }
    .text-lg { font-size: var(--text-lg); }
    .text-xl { font-size: var(--text-xl); }
    .text-2xl { font-size: var(--text-2xl); }
    
    .font-medium { font-weight: 500; }
    .font-semibold { font-weight: 600; }
    .font-bold { font-weight: 700; }
    
    .text-center { text-align: center; }
    .text-gray-500 { color: var(--color-gray-500); }
    .text-gray-700 { color: var(--color-gray-700); }
    .text-gray-900 { color: var(--color-gray-900); }
    
    /* Display */
    .hidden { display: none; }
    .block { display: block; }
    .inline-block { display: inline-block; }
    
    /* Width & Height */
    .w-full { width: 100%; }
    .h-full { height: 100%; }
    
    /* Demo Styles */
    .demo-section {
      background: white;
      border-radius: var(--radius-lg);
      padding: var(--space-8);
      margin: var(--space-6) 0;
    }
    
    .architecture-visual {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-4);
      margin: var(--space-6) 0;
    }
    
    .arch-layer {
      background: var(--color-gray-50);
      padding: var(--space-6);
      border-radius: var(--radius-lg);
      border-left: 4px solid var(--color-primary-500);
    }
    
    .arch-layer h4 {
      margin: 0 0 var(--space-2) 0;
      color: var(--color-primary-600);
    }

    /* ===== RESPONSIVE DESIGN ===== */
    @media (max-width: 768px) {
      .layout {
        grid-template-areas: 
          "header"
          "main";
        grid-template-columns: 1fr;
      }
      
      .layout__sidebar {
        display: none;
      }
      
      .grid--2,
      .grid--3,
      .grid--4 {
        grid-template-columns: 1fr;
      }
      
      .sidebar--mobile-open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 50;
      }
    }
  </style>
</head>
<body>
  <!-- 🏢 ENTERPRISE DASHBOARD LAYOUT -->
  <div class="layout" id="layout">
    <!-- HEADER COMPONENT -->
    <header class="layout__header header">
      <div class="header__content">
        <div class="flex flex--center">
          <button class="btn btn--ghost btn--icon" onclick="toggleSidebar()">
            ☰
          </button>
          <h1 class="text-xl font-semibold ml-4">Enterprise Dashboard</h1>
        </div>
        
        <div class="header__actions">
          <button class="btn btn--ghost btn--icon">
            🔔
          </button>
          <button class="btn btn--ghost btn--icon">
            ⚙️
          </button>
          <div class="flex flex--center">
            <div style="width: 32px; height: 32px; background: var(--color-primary-500); border-radius: 50%;" class="flex flex--center text-white font-semibold">
              JD
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- SIDEBAR COMPONENT -->
    <aside class="layout__sidebar sidebar" id="sidebar">
      <div class="sidebar__brand">
        <span class="text-lg font-bold">🚀 Acme Inc</span>
      </div>
      
      <nav class="sidebar__nav">
        <a href="#" class="sidebar__item sidebar__item--active">
          <span>📊</span>
          <span class="sidebar__text">Dashboard</span>
        </a>
        <a href="#" class="sidebar__item">
          <span>👥</span>
          <span class="sidebar__text">Team</span>
        </a>
        <a href="#" class="sidebar__item">
          <span>📈</span>
          <span class="sidebar__text">Analytics</span>
        </a>
        <a href="#" class="sidebar__item">
          <span>🛒</span>
          <span class="sidebar__text">Projects</span>
        </a>
        <a href="#" class="sidebar__item">
          <span>📋</span>
          <span class="sidebar__text">Tasks</span>
        </a>
        <a href="#" class="sidebar__item">
          <span>⚡</span>
          <span class="sidebar__text">Settings</span>
        </a>
      </nav>
    </aside>

    <!-- MAIN CONTENT AREA -->
    <main class="layout__main p-6">
      <!-- PAGE HEADER -->
      <div class="flex flex--between mb-6">
        <div>
          <h1 class="text-2xl font-bold text-gray-900 mb-2">Dashboard Overview</h1>
          <p class="text-gray-500">Welcome back, John! Here's what's happening today.</p>
        </div>
        <button class="btn btn--primary">
          + New Project
        </button>
      </div>

      <!-- METRICS GRID -->
      <div class="grid grid--4 mb-6">
        <div class="card card--metric">
          <div class="metric__value">$24,568</div>
          <div class="metric__label">Total Revenue</div>
          <div class="metric__change metric__change--positive">
            ↑ 12.5%
          </div>
        </div>
        
        <div class="card card--metric">
          <div class="metric__value">1,248</div>
          <div class="metric__label">New Users</div>
          <div class="metric__change metric__change--positive">
            ↑ 8.2%
          </div>
        </div>
        
        <div class="card card--metric">
          <div class="metric__value">89.7%</div>
          <div class="metric__label">Conversion Rate</div>
          <div class="metric__change metric__change--negative">
            ↓ 2.1%
          </div>
        </div>
        
        <div class="card card--metric">
          <div class="metric__value">4.8/5</div>
          <div class="metric__label">Satisfaction</div>
          <div class="metric__change metric__change--positive">
            ↑ 0.3%
          </div>
        </div>
      </div>

      <!-- CONTENT GRID -->
      <div class="grid grid--2 gap-6">
        <!-- RECENT ACTIVITY CARD -->
        <div class="card">
          <div class="card__header">
            <h2 class="text-lg font-semibold">Recent Activity</h2>
          </div>
          <div class="card__body">
            <div class="space-y-4">
              <div class="flex flex--between">
                <div class="flex flex--center">
                  <div class="w-8 h-8 bg-blue-100 rounded-full flex flex--center text-blue-600 mr-3">
                    👤
                  </div>
                  <div>
                    <p class="font-medium">New user registration</p>
                    <p class="text-sm text-gray-500">Sarah Johnson joined the platform</p>
                  </div>
                </div>
                <span class="badge badge--success">Completed</span>
              </div>
              
              <div class="flex flex--between">
                <div class="flex flex--center">
                  <div class="w-8 h-8 bg-green-100 rounded-full flex flex--center text-green-600 mr-3">
                    💰
                  </div>
                  <div>
                    <p class="font-medium">Payment processed</p>
                    <p class="text-sm text-gray-500">$2,500 from Acme Corp</p>
                  </div>
                </div>
                <span class="badge badge--success">Completed</span>
              </div>
            </div>
          </div>
        </div>

        <!-- PERFORMANCE CARD -->
        <div class="card">
          <div class="card__header">
            <h2 class="text-lg font-semibold">System Performance</h2>
          </div>
          <div class="card__body">
            <div class="space-y-4">
              <div>
                <div class="flex flex--between mb-2">
                  <span class="text-sm font-medium">CPU Usage</span>
                  <span class="text-sm text-gray-500">65%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
                </div>
              </div>
              
              <div>
                <div class="flex flex--between mb-2">
                  <span class="text-sm font-medium">Memory</span>
                  <span class="text-sm text-gray-500">42%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div class="bg-green-600 h-2 rounded-full" style="width: 42%"></div>
                </div>
              </div>
              
              <div>
                <div class="flex flex--between mb-2">
                  <span class="text-sm font-medium">Storage</span>
                  <span class="text-sm text-gray-500">78%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div class="bg-yellow-600 h-2 rounded-full" style="width: 78%"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- ARCHITECTURE DEMONSTRATION -->
      <div class="demo-section">
        <h2 class="text-2xl font-bold mb-6">🏗️ CSS Architecture Layers</h2>
        
        <div class="architecture-visual">
          <div class="arch-layer">
            <h4>Design Tokens</h4>
            <p class="text-sm">Variables, colors, typography</p>
          </div>
          <div class="arch-layer">
            <h4>Layout System</h4>
            <p class="text-sm">Grid, flexbox, containers</p>
          </div>
          <div class="arch-layer">
            <h4>Components</h4>
            <p class="text-sm">Buttons, cards, navigation</p>
          </div>
          <div class="arch-layer">
            <h4>Utilities</h4>
            <p class="text-sm">Spacing, text, display</p>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script>
    function toggleSidebar() {
      const layout = document.getElementById('layout');
      const sidebar = document.getElementById('sidebar');
      
      layout.classList.toggle('layout--collapsed');
      sidebar.classList.toggle('sidebar--collapsed');
    }
  </script>
</body>
</html>

🎨 Design System Architecture

Design Tokens

🎨Color palettes and semantic colors
📐Typography scales and weights
📏Spacing and sizing scales
🎯Border radius and shadows

Component Library

🔘Buttons with variants and sizes
📦Cards, alerts, and form elements
🎭Badges, avatars, and indicators
📱Responsive and accessible components

Design System Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🎨 Design System - CSS Architecture</title>
  <style>
    /* ===== DESIGN TOKENS ===== */
    :root {
      /* Color Palette */
      --color-white: #ffffff;
      --color-black: #000000;
      
      /* Primary Colors */
      --color-primary-50: #f0f9ff;
      --color-primary-100: #e0f2fe;
      --color-primary-200: #bae6fd;
      --color-primary-300: #7dd3fc;
      --color-primary-400: #38bdf8;
      --color-primary-500: #0ea5e9;
      --color-primary-600: #0284c7;
      --color-primary-700: #0369a1;
      --color-primary-800: #075985;
      --color-primary-900: #0c4a6e;
      
      /* Gray Colors */
      --color-gray-50: #f9fafb;
      --color-gray-100: #f3f4f6;
      --color-gray-200: #e5e7eb;
      --color-gray-300: #d1d5db;
      --color-gray-400: #9ca3af;
      --color-gray-500: #6b7280;
      --color-gray-600: #4b5563;
      --color-gray-700: #374151;
      --color-gray-800: #1f2937;
      --color-gray-900: #111827;
      
      /* Semantic Colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;
      
      /* Typography Scale */
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      
      /* Font Weights */
      --font-weight-light: 300;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --font-weight-extrabold: 800;
      
      /* Line Heights */
      --line-height-tight: 1.25;
      --line-height-snug: 1.375;
      --line-height-normal: 1.5;
      --line-height-relaxed: 1.625;
      
      /* Spacing Scale */
      --space-0: 0;
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;
      --space-24: 6rem;
      
      /* Border Radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius-base: 0.25rem;
      --radius-md: 0.375rem;
      --radius-lg: 0.5rem;
      --radius-xl: 0.75rem;
      --radius-2xl: 1rem;
      --radius-3xl: 1.5rem;
      --radius-full: 9999px;
      
      /* Shadows */
      --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
      
      /* Z-Index Scale */
      --z-0: 0;
      --z-10: 10;
      --z-20: 20;
      --z-30: 30;
      --z-40: 40;
      --z-50: 50;
      --z-auto: auto;
      
      /* Breakpoints */
      --breakpoint-sm: 640px;
      --breakpoint-md: 768px;
      --breakpoint-lg: 1024px;
      --breakpoint-xl: 1280px;
      --breakpoint-2xl: 1536px;
    }

    /* ===== BASE STYLES ===== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 16px;
      line-height: var(--line-height-normal);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    body {
      background-color: var(--color-gray-50);
      color: var(--color-gray-900);
    }
    
    /* ===== LAYOUT COMPONENTS ===== */
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--space-4);
    }
    
    .container--narrow {
      max-width: 800px;
    }
    
    .section {
      padding: var(--space-16) 0;
    }
    
    .section--sm {
      padding: var(--space-8) 0;
    }
    
    .section--lg {
      padding: var(--space-20) 0;
    }
    
    .grid {
      display: grid;
      gap: var(--space-6);
    }
    
    .grid--2 {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .grid--3 {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    .flex {
      display: flex;
    }
    
    .flex--center {
      align-items: center;
      justify-content: center;
    }
    
    .flex--between {
      align-items: center;
      justify-content: space-between;
    }
    
    .flex--column {
      flex-direction: column;
    }

    /* ===== COMPONENT LIBRARY ===== */
    
    /* Button Component */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-md);
      font-weight: var(--font-weight-medium);
      font-size: var(--font-size-sm);
      line-height: var(--line-height-tight);
      border: 1px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
      position: relative;
      overflow: hidden;
    }
    
    .btn:focus {
      outline: 2px solid var(--color-primary-500);
      outline-offset: 2px;
    }
    
    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    /* Button Variants */
    .btn--primary {
      background: var(--color-primary-600);
      color: var(--color-white);
      border-color: var(--color-primary-600);
    }
    
    .btn--primary:hover:not(:disabled) {
      background: var(--color-primary-700);
      border-color: var(--color-primary-700);
    }
    
    .btn--secondary {
      background: var(--color-gray-100);
      color: var(--color-gray-700);
      border-color: var(--color-gray-300);
    }
    
    .btn--secondary:hover:not(:disabled) {
      background: var(--color-gray-200);
      border-color: var(--color-gray-400);
    }
    
    .btn--outline {
      background: transparent;
      color: var(--color-primary-600);
      border-color: var(--color-primary-600);
    }
    
    .btn--outline:hover:not(:disabled) {
      background: var(--color-primary-600);
      color: var(--color-white);
    }
    
    .btn--ghost {
      background: transparent;
      color: var(--color-gray-600);
      border-color: transparent;
    }
    
    .btn--ghost:hover:not(:disabled) {
      background: var(--color-gray-100);
      color: var(--color-gray-700);
    }
    
    /* Button Sizes */
    .btn--sm {
      padding: var(--space-2) var(--space-3);
      font-size: var(--font-size-xs);
    }
    
    .btn--lg {
      padding: var(--space-4) var(--space-6);
      font-size: var(--font-size-base);
    }
    
    .btn--xl {
      padding: var(--space-5) var(--space-8);
      font-size: var(--font-size-lg);
    }
    
    /* Card Component */
    .card {
      background: var(--color-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--color-gray-200);
      overflow: hidden;
    }
    
    .card__header {
      padding: var(--space-6);
      border-bottom: 1px solid var(--color-gray-200);
    }
    
    .card__body {
      padding: var(--space-6);
    }
    
    .card__footer {
      padding: var(--space-6);
      border-top: 1px solid var(--color-gray-200);
      background: var(--color-gray-50);
    }
    
    /* Alert Component */
    .alert {
      padding: var(--space-4);
      border-radius: var(--radius-lg);
      border: 1px solid;
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
    }
    
    .alert--success {
      background: #f0fdf4;
      border-color: var(--color-success);
      color: #166534;
    }
    
    .alert--warning {
      background: #fffbeb;
      border-color: var(--color-warning);
      color: #92400e;
    }
    
    .alert--error {
      background: #fef2f2;
      border-color: var(--color-error);
      color: #991b1b;
    }
    
    .alert--info {
      background: #eff6ff;
      border-color: var(--color-info);
      color: #1e40af;
    }
    
    /* Badge Component */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-full);
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-tight);
    }
    
    .badge--primary {
      background: var(--color-primary-100);
      color: var(--color-primary-800);
    }
    
    .badge--success {
      background: #dcfce7;
      color: #166534;
    }
    
    .badge--warning {
      background: #fef3c7;
      color: #92400e;
    }
    
    .badge--error {
      background: #fee2e2;
      color: #991b1b;
    }
    
    /* Avatar Component */
    .avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full);
      font-weight: var(--font-weight-medium);
      color: var(--color-white);
      background: var(--color-primary-500);
    }
    
    .avatar--sm {
      width: 2rem;
      height: 2rem;
      font-size: var(--font-size-sm);
    }
    
    .avatar--md {
      width: 2.5rem;
      height: 2.5rem;
      font-size: var(--font-size-base);
    }
    
    .avatar--lg {
      width: 3rem;
      height: 3rem;
      font-size: var(--font-size-lg);
    }
    
    .avatar--xl {
      width: 4rem;
      height: 4rem;
      font-size: var(--font-size-xl);
    }

    /* ===== UTILITY CLASSES ===== */
    
    /* Spacing */
    .m-0 { margin: var(--space-0); }
    .m-4 { margin: var(--space-4); }
    .m-6 { margin: var(--space-6); }
    
    .mx-auto { margin-left: auto; margin-right: auto; }
    .my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
    .my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
    
    .p-0 { padding: var(--space-0); }
    .p-4 { padding: var(--space-4); }
    .p-6 { padding: var(--space-6); }
    .p-8 { padding: var(--space-8); }
    
    .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
    .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
    .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
    
    /* Text */
    .text-xs { font-size: var(--font-size-xs); }
    .text-sm { font-size: var(--font-size-sm); }
    .text-base { font-size: var(--font-size-base); }
    .text-lg { font-size: var(--font-size-lg); }
    .text-xl { font-size: var(--font-size-xl); }
    .text-2xl { font-size: var(--font-size-2xl); }
    .text-3xl { font-size: var(--font-size-3xl); }
    .text-4xl { font-size: var(--font-size-4xl); }
    
    .font-light { font-weight: var(--font-weight-light); }
    .font-normal { font-weight: var(--font-weight-normal); }
    .font-medium { font-weight: var(--font-weight-medium); }
    .font-semibold { font-weight: var(--font-weight-semibold); }
    .font-bold { font-weight: var(--font-weight-bold); }
    
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }
    
    .text-gray-500 { color: var(--color-gray-500); }
    .text-gray-700 { color: var(--color-gray-700); }
    .text-gray-900 { color: var(--color-gray-900); }
    .text-primary-600 { color: var(--color-primary-600); }
    
    /* Display */
    .block { display: block; }
    .inline-block { display: inline-block; }
    .inline { display: inline; }
    .flex { display: flex; }
    .hidden { display: none; }
    
    /* Width & Height */
    .w-full { width: 100%; }
    .w-auto { width: auto; }
    .h-full { height: 100%; }
    .h-auto { height: auto; }
    
    /* Demo Styles */
    .demo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--space-6);
      margin: var(--space-8) 0;
    }
    
    .demo-card {
      background: var(--color-white);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--color-gray-200);
    }
    
    .color-swatch {
      width: 100%;
      height: 4rem;
      border-radius: var(--radius-md);
      margin-bottom: var(--space-2);
    }
    
    .token-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-4);
      margin: var(--space-6) 0;
    }
    
    .token-item {
      background: var(--color-gray-50);
      padding: var(--space-4);
      border-radius: var(--radius-md);
      border-left: 4px solid var(--color-primary-500);
    }

    /* ===== RESPONSIVE DESIGN ===== */
    @media (min-width: 768px) {
      .md\:grid--2 {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .md\:grid--3 {
        grid-template-columns: repeat(3, 1fr);
      }
      
      .md\:flex-row {
        flex-direction: row;
      }
    }
  </style>
</head>
<body>
  <!-- 🎨 DESIGN SYSTEM SHOWCASE -->
  <div class="section">
    <div class="container">
      <!-- HERO SECTION -->
      <div class="text-center mb-16">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">🎨 Design System</h1>
        <p class="text-xl text-gray-600 max-w-2xl mx-auto">
          A comprehensive CSS architecture system built with design tokens, components, and utilities.
        </p>
      </div>

      <!-- COLOR SYSTEM -->
      <section class="mb-16">
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Color Palette</h2>
        <div class="grid grid--3">
          <div class="demo-card">
            <h3 class="text-lg font-semibold mb-4">Primary Colors</h3>
            <div class="space-y-2">
              <div>
                <div class="color-swatch" style="background: var(--color-primary-50); border: 1px solid var(--color-gray-200);"></div>
                <span class="text-sm">--color-primary-50</span>
              </div>
              <div>
                <div class="color-swatch" style="background: var(--color-primary-500);"></div>
                <span class="text-sm">--color-primary-500</span>
              </div>
              <div>
                <div class="color-swatch" style="background: var(--color-primary-900);"></div>
                <span class="text-sm">--color-primary-900</span>
              </div>
            </div>
          </div>
          
          <div class="demo-card">
            <h3 class="text-lg font-semibold mb-4">Gray Colors</h3>
            <div class="space-y-2">
              <div>
                <div class="color-swatch" style="background: var(--color-gray-50); border: 1px solid var(--color-gray-200);"></div>
                <span class="text-sm">--color-gray-50</span>
              </div>
              <div>
                <div class="color-swatch" style="background: var(--color-gray-500);"></div>
                <span class="text-sm">--color-gray-500</span>
              </div>
              <div>
                <div class="color-swatch" style="background: var(--color-gray-900);"></div>
                <span class="text-sm">--color-gray-900</span>
              </div>
            </div>
          </div>
          
          <div class="demo-card">
            <h3 class="text-lg font-semibold mb-4">Semantic Colors</h3>
            <div class="space-y-2">
              <div>
                <div class="color-swatch" style="background: var(--color-success);"></div>
                <span class="text-sm">--color-success</span>
              </div>
              <div>
                <div class="color-swatch" style="background: var(--color-warning);"></div>
                <span class="text-sm">--color-warning</span>
              </div>
              <div>
                <div class="color-swatch" style="background: var(--color-error);"></div>
                <span class="text-sm">--color-error</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- BUTTON COMPONENTS -->
      <section class="mb-16">
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Button Components</h2>
        <div class="demo-card">
          <h3 class="text-lg font-semibold mb-4">Button Variants</h3>
          <div class="flex flex--center gap-4 mb-6">
            <button class="btn btn--primary">Primary</button>
            <button class="btn btn--secondary">Secondary</button>
            <button class="btn btn--outline">Outline</button>
            <button class="btn btn--ghost">Ghost</button>
          </div>
          
          <h3 class="text-lg font-semibold mb-4">Button Sizes</h3>
          <div class="flex flex--center gap-4">
            <button class="btn btn--primary btn--sm">Small</button>
            <button class="btn btn--primary">Medium</button>
            <button class="btn btn--primary btn--lg">Large</button>
            <button class="btn btn--primary btn--xl">X-Large</button>
          </div>
        </div>
      </section>

      <!-- COMPONENT SHOWCASE -->
      <section class="mb-16">
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Component Library</h2>
        <div class="grid grid--2">
          <!-- ALERTS -->
          <div class="demo-card">
            <h3 class="text-lg font-semibold mb-4">Alert Components</h3>
            <div class="space-y-4">
              <div class="alert alert--success">
                <span>✅</span>
                <div>
                  <strong>Success!</strong> Your action was completed successfully.
                </div>
              </div>
              
              <div class="alert alert--warning">
                <span>⚠️</span>
                <div>
                  <strong>Warning!</strong> This action requires your attention.
                </div>
              </div>
              
              <div class="alert alert--error">
                <span>❌</span>
                <div>
                  <strong>Error!</strong> Something went wrong. Please try again.
                </div>
              </div>
            </div>
          </div>
          
          <!-- BADGES & AVATARS -->
          <div class="demo-card">
            <h3 class="text-lg font-semibold mb-4">Badges & Avatars</h3>
            <div class="space-y-6">
              <div>
                <h4 class="font-medium mb-2">Badges</h4>
                <div class="flex gap-2">
                  <span class="badge badge--primary">Primary</span>
                  <span class="badge badge--success">Success</span>
                  <span class="badge badge--warning">Warning</span>
                  <span class="badge badge--error">Error</span>
                </div>
              </div>
              
              <div>
                <h4 class="font-medium mb-2">Avatars</h4>
                <div class="flex gap-4">
                  <div class="avatar avatar--sm">JD</div>
                  <div class="avatar avatar--md">AS</div>
                  <div class="avatar avatar--lg">MJ</div>
                  <div class="avatar avatar--xl">TK</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- DESIGN TOKENS -->
      <section class="mb-16">
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Design Tokens</h2>
        <div class="token-grid">
          <div class="token-item">
            <h4 class="font-semibold">Spacing</h4>
            <p class="text-sm text-gray-600">--space-1 to --space-24</p>
          </div>
          
          <div class="token-item">
            <h4 class="font-semibold">Typography</h4>
            <p class="text-sm text-gray-600">--text-xs to --text-5xl</p>
          </div>
          
          <div class="token-item">
            <h4 class="font-semibold">Border Radius</h4>
            <p class="text-sm text-gray-600">--radius-sm to --radius-full</p>
          </div>
          
          <div class="token-item">
            <h4 class="font-semibold">Shadows</h4>
            <p class="text-sm text-gray-600">--shadow-xs to --shadow-2xl</p>
          </div>
          
          <div class="token-item">
            <h4 class="font-semibold">Z-Index</h4>
            <p class="text-sm text-gray-600">--z-0 to --z-50</p>
          </div>
          
          <div class="token-item">
            <h4 class="font-semibold">Breakpoints</h4>
            <p class="text-sm text-gray-600">--breakpoint-sm to --breakpoint-2xl</p>
          </div>
        </div>
      </section>

      <!-- ARCHITECTURE OVERVIEW -->
      <section>
        <div class="demo-card">
          <h2 class="text-2xl font-bold text-gray-900 mb-6">🏗️ Architecture Overview</h2>
          <div class="grid grid--3">
            <div>
              <h3 class="text-lg font-semibold mb-3">Design Tokens</h3>
              <p class="text-gray-600">Centralized variables for colors, typography, spacing, and more.</p>
            </div>
            
            <div>
              <h3 class="text-lg font-semibold mb-3">Base Styles</h3>
              <p class="text-gray-600">Reset, normalize, and foundational element styles.</p>
            </div>
            
            <div>
              <h3 class="text-lg font-semibold mb-3">Layout System</h3>
              <p class="text-gray-600">Containers, grids, and flexbox utilities for page structure.</p>
            </div>
            
            <div>
              <h3 class="text-lg font-semibold mb-3">Components</h3>
              <p class="text-gray-600">Reusable UI components with variants and states.</p>
            </div>
            
            <div>
              <h3 class="text-lg font-semibold mb-3">Utilities</h3>
              <p class="text-gray-600">Single-purpose classes for spacing, typography, and display.</p>
            </div>
            
            <div>
              <h3 class="text-lg font-semibold mb-3">Responsive</h3>
              <p class="text-gray-600">Mobile-first responsive design with breakpoint utilities.</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</body>
</html>

🏛️ Architecture Patterns & Methodologies

🎯 Methodology Comparison

BEM (Block Element Modifier)

.block__element--modifier naming convention

ITCSS (Inverted Triangle)

Layered architecture from generic to specific

Atomic Design

Atoms → Molecules → Organisms → Templates → Pages

Utility-First

Composable single-purpose classes

🏗️ Architecture Principles

  1. Separation of Concerns - Structure, presentation, behavior
  2. Single Responsibility - Each class has one purpose
  3. Composition over Inheritance - Build complex from simple
  4. Consistent Naming - Predictable and meaningful names
  5. Progressive Enhancement - Mobile-first responsive design
  6. Accessibility First - Built-in accessibility patterns

💡 Enterprise Architecture Tips

Scalability Strategies:

  • Use design tokens for consistency
  • Implement component-driven development
  • Create comprehensive documentation
  • Establish coding standards and patterns

Team Collaboration:

  • Use version control for design systems
  • Implement automated testing
  • Create contribution guidelines
  • Establish review processes

🚀 Implementation Roadmap

1️⃣

Foundation

Design tokens, reset styles, and base element styling

2️⃣

Layout & Components

Grid systems, layout patterns, and core UI components

3️⃣

Utilities & Optimization

Helper classes, responsive design, and performance optimization

📋 Architecture Checklist

  • ✓Design token system established
  • ✓Consistent naming conventions
  • ✓Component library documented
  • ✓Responsive design patterns
  • ✓Accessibility considerations
  • ✓Performance optimization
  • ✓Team collaboration tools
  • ✓Testing and quality assurance

Ready to Architect Your CSS? 🏗️

Build scalable, maintainable CSS architectures that empower your team and create consistent, high-quality user experiences across your entire application.

< PreviousNext >