Complete Guide to HTML and CSS Design Systems

Table of Contents

Introduction to Design Systems
Core Components of a Design System
Design Tokens
Typography System
Color System
Spacing and Layout
Component Library
Documentation and Usage
Building a Design System
Maintaining a Design System
Real-World Examples
Best Practices

Introduction to Design Systems

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. It serves as the single source of truth for both design and development teams, ensuring consistency, efficiency, and scalability.

What is a Design System?

/* Without a design system - inconsistent and hard to maintain */
.button-primary {
background: #3498db;
padding: 8px 16px;
border-radius: 4px;
}
.button-submit {
background: #2ecc71;
padding: 10px 20px;
border-radius: 5px;
}
/* With a design system - consistent and maintainable */
:root {
--color-primary: #3498db;
--color-success: #2ecc71;
--spacing-sm: 8px;
--spacing-md: 16px;
--border-radius: 4px;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius);
font-family: inherit;
font-size: var(--font-size-md);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all var(--transition-fast);
}
.button-primary {
background: var(--color-primary);
color: white;
}
.button-success {
background: var(--color-success);
color: white;
}

Benefits of a Design System

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Benefits</title>
<style>
:root {
--color-primary: #3498db;
--color-success: #2ecc71;
--color-text: #333;
--spacing: 1rem;
--border-radius: 8px;
--shadow: 0 2px 4px rgba(0,0,0,0.1);
}
body {
font-family: system-ui, -apple-system, sans-serif;
color: var(--color-text);
line-height: 1.5;
max-width: 1200px;
margin: 0 auto;
padding: var(--spacing);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing);
margin: var(--spacing) 0;
}
.benefit-card {
background: white;
border-radius: var(--border-radius);
padding: var(--spacing);
box-shadow: var(--shadow);
transition: transform 0.3s;
}
.benefit-card:hover {
transform: translateY(-5px);
}
.benefit-icon {
font-size: 2rem;
margin-bottom: var(--spacing);
}
.benefit-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.benefit-description {
color: #666;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Benefits of a Design System</h1>
<div class="benefits-grid">
<div class="benefit-card">
<div class="benefit-icon">🎯</div>
<div class="benefit-title">Consistency</div>
<div class="benefit-description">Ensure visual and functional consistency across all products and platforms.</div>
</div>
<div class="benefit-card">
<div class="benefit-icon">⚡</div>
<div class="benefit-title">Efficiency</div>
<div class="benefit-description">Reuse components and patterns, reducing development time and effort.</div>
</div>
<div class="benefit-card">
<div class="benefit-icon">🔧</div>
<div class="benefit-title">Scalability</div>
<div class="benefit-description">Build faster as your product grows without losing quality.</div>
</div>
<div class="benefit-card">
<div class="benefit-icon">🤝</div>
<div class="benefit-title">Collaboration</div>
<div class="benefit-description">Create a common language between designers and developers.</div>
</div>
<div class="benefit-card">
<div class="benefit-icon">📈</div>
<div class="benefit-title">Maintainability</div>
<div class="benefit-description">Update styles in one place, propagate everywhere automatically.</div>
</div>
<div class="benefit-card">
<div class="benefit-icon">🎨</div>
<div class="benefit-title">Brand Identity</div>
<div class="benefit-description">Strengthen brand recognition through consistent visual language.</div>
</div>
</div>
</body>
</html>

Core Components of a Design System

Design System Architecture

/* Design system file structure */
/*
design-system/
├── tokens/
│   ├── colors.css
│   ├── typography.css
│   ├── spacing.css
│   ├── shadows.css
│   └── animations.css
├── foundations/
│   ├── reset.css
│   ├── base.css
│   └── utilities.css
├── components/
│   ├── button.css
│   ├── card.css
│   ├── form.css
│   ├── modal.css
│   ├── navigation.css
│   └── table.css
├── layouts/
│   ├── grid.css
│   └── containers.css
├── themes/
│   ├── light.css
│   └── dark.css
└── index.css
*/

Design System Layers

/* Layer 1: Design Tokens (Lowest level) */
:root {
/* Colors */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-300: #93c5fd;
--color-primary-400: #60a5fa;
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;
--color-primary-800: #1e40af;
--color-primary-900: #1e3a8a;
/* Spacing */
--spacing-0: 0;
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
}
/* Layer 2: Foundations (Base styles) */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family-sans);
font-size: var(--font-size-md);
line-height: var(--line-height-normal);
color: var(--color-gray-900);
background-color: var(--color-white);
}
/* Layer 3: Components (Reusable UI elements) */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
font-weight: var(--font-weight-medium);
line-height: 1;
text-decoration: none;
border-radius: var(--border-radius-md);
cursor: pointer;
transition: all var(--transition-fast);
}
/* Layer 4: Layout (Page structure) */
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.grid {
display: grid;
gap: var(--grid-gap);
grid-template-columns: repeat(var(--grid-columns, 1), 1fr);
}
/* Layer 5: Themes (Visual variations) */
[data-theme="dark"] {
--color-white: #1a1a1a;
--color-gray-50: #1f2937;
--color-gray-900: #f9fafb;
--color-primary-500: #60a5fa;
}

Design Tokens

Complete Design Token System

/* tokens/colors.css */
:root {
/* Primary Colors */
--color-primary: #3b82f6;
--color-primary-light: #60a5fa;
--color-primary-dark: #2563eb;
/* Secondary Colors */
--color-secondary: #8b5cf6;
--color-secondary-light: #a78bfa;
--color-secondary-dark: #7c3aed;
/* Success Colors */
--color-success: #10b981;
--color-success-light: #34d399;
--color-success-dark: #059669;
/* Warning Colors */
--color-warning: #f59e0b;
--color-warning-light: #fbbf24;
--color-warning-dark: #d97706;
/* Danger Colors */
--color-danger: #ef4444;
--color-danger-light: #f87171;
--color-danger-dark: #dc2626;
/* Info Colors */
--color-info: #06b6d4;
--color-info-light: #22d3ee;
--color-info-dark: #0891b2;
/* Neutral Colors */
--color-white: #ffffff;
--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;
--color-black: #000000;
/* Semantic Colors */
--color-text-primary: var(--color-gray-900);
--color-text-secondary: var(--color-gray-600);
--color-text-tertiary: var(--color-gray-400);
--color-text-inverse: var(--color-white);
--color-bg-primary: var(--color-white);
--color-bg-secondary: var(--color-gray-50);
--color-bg-tertiary: var(--color-gray-100);
--color-border-light: var(--color-gray-200);
--color-border-medium: var(--color-gray-300);
--color-border-dark: var(--color-gray-400);
--color-link: var(--color-primary);
--color-link-hover: var(--color-primary-dark);
--color-focus-ring: rgba(59, 130, 246, 0.4);
}

Typography Tokens

/* tokens/typography.css */
:root {
/* Font Families */
--font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-family-serif: Georgia, 'Times New Roman', serif;
--font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
/* Font Sizes - Type Scale (Perfect Fourth: 1.25) */
--font-size-xs: 0.75rem;    /* 12px */
--font-size-sm: 0.875rem;   /* 14px */
--font-size-md: 1rem;       /* 16px */
--font-size-lg: 1.25rem;    /* 20px */
--font-size-xl: 1.563rem;   /* 25px */
--font-size-2xl: 1.953rem;  /* 31px */
--font-size-3xl: 2.441rem;  /* 39px */
--font-size-4xl: 3.052rem;  /* 49px */
--font-size-5xl: 3.815rem;  /* 61px */
/* Font Weights */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
--line-height-loose: 2;
/* Letter Spacing */
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Text Decoration */
--text-decoration-thickness: 2px;
--text-underline-offset: 0.2em;
}
/* Heading styles using typography tokens */
.h1 {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: var(--spacing-4);
}
.h2 {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-3);
}
.h3 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-2);
}
.h4 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
margin-bottom: var(--spacing-2);
}
.body-large {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
}
.body-regular {
font-size: var(--font-size-md);
line-height: var(--line-height-normal);
}
.body-small {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}
.caption {
font-size: var(--font-size-xs);
line-height: var(--line-height-normal);
color: var(--color-text-tertiary);
}

Spacing Tokens

/* tokens/spacing.css */
:root {
/* Spacing Scale (8px base) */
--spacing-0: 0;
--spacing-1: 0.125rem;  /* 2px */
--spacing-2: 0.25rem;   /* 4px */
--spacing-3: 0.5rem;    /* 8px */
--spacing-4: 0.75rem;   /* 12px */
--spacing-5: 1rem;      /* 16px */
--spacing-6: 1.25rem;   /* 20px */
--spacing-7: 1.5rem;    /* 24px */
--spacing-8: 2rem;      /* 32px */
--spacing-9: 2.5rem;    /* 40px */
--spacing-10: 3rem;     /* 48px */
--spacing-11: 3.5rem;   /* 56px */
--spacing-12: 4rem;     /* 64px */
--spacing-14: 5rem;     /* 80px */
--spacing-16: 6rem;     /* 96px */
--spacing-20: 8rem;     /* 128px */
--spacing-24: 10rem;    /* 160px */
--spacing-28: 12rem;    /* 192px */
--spacing-32: 14rem;    /* 224px */
/* Container Widths */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
/* Grid Gaps */
--gap-xs: var(--spacing-2);
--gap-sm: var(--spacing-4);
--gap-md: var(--spacing-6);
--gap-lg: var(--spacing-8);
--gap-xl: var(--spacing-10);
/* Section Spacing */
--section-spacing-sm: var(--spacing-8);
--section-spacing-md: var(--spacing-12);
--section-spacing-lg: var(--spacing-16);
--section-spacing-xl: var(--spacing-20);
}

Border and Shadow Tokens

/* tokens/borders.css */
:root {
/* Border Radius */
--radius-none: 0;
--radius-sm: 0.125rem;   /* 2px */
--radius-md: 0.25rem;    /* 4px */
--radius-lg: 0.5rem;     /* 8px */
--radius-xl: 0.75rem;    /* 12px */
--radius-2xl: 1rem;      /* 16px */
--radius-full: 9999px;
/* Border Widths */
--border-width-thin: 1px;
--border-width-medium: 2px;
--border-width-thick: 4px;
/* Border Colors */
--border-color-default: var(--color-gray-200);
--border-color-hover: var(--color-gray-300);
--border-color-focus: var(--color-primary);
--border-color-error: var(--color-danger);
--border-color-success: var(--color-success);
}
/* tokens/shadows.css */
:root {
/* Shadow Levels */
--shadow-none: 0 0 #0000;
--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);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
/* Inner Shadows */
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
/* Colored Shadows */
--shadow-primary: 0 4px 14px 0 rgba(59, 130, 246, 0.4);
--shadow-success: 0 4px 14px 0 rgba(16, 185, 129, 0.4);
--shadow-danger: 0 4px 14px 0 rgba(239, 68, 68, 0.4);
/* Focus Ring */
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
--focus-ring-color: var(--color-primary);
--focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

Typography System

Complete Typography System

/* foundations/typography.css */
:root {
--font-size-scale-ratio: 1.25;
--font-size-base: 1rem;
}
/* Fluid Typography with clamp */
:root {
--font-size-fluid-sm: clamp(0.75rem, 2vw, 0.875rem);
--font-size-fluid-base: clamp(1rem, 3vw, 1.125rem);
--font-size-fluid-lg: clamp(1.125rem, 4vw, 1.25rem);
--font-size-fluid-xl: clamp(1.25rem, 5vw, 1.5rem);
--font-size-fluid-2xl: clamp(1.5rem, 6vw, 2rem);
--font-size-fluid-3xl: clamp(2rem, 7vw, 2.5rem);
--font-size-fluid-4xl: clamp(2.5rem, 8vw, 3rem);
}
/* Headings */
.heading-1 {
font-family: var(--font-family-sans);
font-size: var(--font-size-fluid-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: var(--spacing-6);
}
.heading-2 {
font-family: var(--font-family-sans);
font-size: var(--font-size-fluid-3xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: var(--spacing-5);
}
.heading-3 {
font-family: var(--font-family-sans);
font-size: var(--font-size-fluid-2xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-4);
}
.heading-4 {
font-family: var(--font-family-sans);
font-size: var(--font-size-fluid-xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
margin-bottom: var(--spacing-3);
}
.heading-5 {
font-family: var(--font-family-sans);
font-size: var(--font-size-fluid-lg);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
margin-bottom: var(--spacing-2);
}
.heading-6 {
font-family: var(--font-family-sans);
font-size: var(--font-size-fluid-base);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
margin-bottom: var(--spacing-2);
}
/* Body Text */
.body-xl {
font-size: var(--font-size-xl);
line-height: var(--line-height-relaxed);
}
.body-lg {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
}
.body-md {
font-size: var(--font-size-md);
line-height: var(--line-height-normal);
}
.body-sm {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}
.body-xs {
font-size: var(--font-size-xs);
line-height: var(--line-height-normal);
}
/* Display Text (Hero sections) */
.display-lg {
font-size: clamp(3rem, 8vw, 5rem);
font-weight: var(--font-weight-extrabold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
}
.display-md {
font-size: clamp(2rem, 6vw, 4rem);
font-weight: var(--font-weight-extrabold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
}
.display-sm {
font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
}
/* Text Utilities */
.text-uppercase {
text-transform: uppercase;
}
.text-lowercase {
text-transform: lowercase;
}
.text-capitalize {
text-transform: capitalize;
}
.text-underline {
text-decoration: underline;
text-decoration-thickness: var(--text-decoration-thickness);
text-underline-offset: var(--text-underline-offset);
}
.text-strikethrough {
text-decoration: line-through;
}
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-break {
word-break: break-word;
overflow-wrap: break-word;
}
/* Text Colors */
.text-primary {
color: var(--color-primary);
}
.text-secondary {
color: var(--color-secondary);
}
.text-success {
color: var(--color-success);
}
.text-warning {
color: var(--color-warning);
}
.text-danger {
color: var(--color-danger);
}
.text-muted {
color: var(--color-text-tertiary);
}
.text-inverse {
color: var(--color-text-inverse);
}
/* Text Alignment */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
/* Line Clamping */
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

Color System

Complete Color System

/* foundations/colors.css */
:root {
/* Color Palette */
--color-blue-50: #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-200: #bfdbfe;
--color-blue-300: #93c5fd;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-blue-800: #1e40af;
--color-blue-900: #1e3a8a;
--color-green-50: #f0fdf4;
--color-green-100: #dcfce7;
--color-green-200: #bbf7d0;
--color-green-300: #86efac;
--color-green-400: #4ade80;
--color-green-500: #22c55e;
--color-green-600: #16a34a;
--color-green-700: #15803d;
--color-green-800: #166534;
--color-green-900: #14532d;
--color-yellow-50: #fefce8;
--color-yellow-100: #fef9c3;
--color-yellow-200: #fef08a;
--color-yellow-300: #fde047;
--color-yellow-400: #facc15;
--color-yellow-500: #eab308;
--color-yellow-600: #ca8a04;
--color-yellow-700: #a16207;
--color-yellow-800: #854d0e;
--color-yellow-900: #713f12;
--color-red-50: #fef2f2;
--color-red-100: #fee2e2;
--color-red-200: #fecaca;
--color-red-300: #fca5a5;
--color-red-400: #f87171;
--color-red-500: #ef4444;
--color-red-600: #dc2626;
--color-red-700: #b91c1c;
--color-red-800: #991b1b;
--color-red-900: #7f1a1a;
--color-purple-50: #faf5ff;
--color-purple-100: #f3e8ff;
--color-purple-200: #e9d5ff;
--color-purple-300: #d8b4fe;
--color-purple-400: #c084fc;
--color-purple-500: #a855f7;
--color-purple-600: #9333ea;
--color-purple-700: #7e22ce;
--color-purple-800: #6b21a5;
--color-purple-900: #581c87;
/* Semantic Colors */
--color-primary: var(--color-blue-500);
--color-primary-dark: var(--color-blue-600);
--color-primary-light: var(--color-blue-400);
--color-primary-hover: var(--color-blue-600);
--color-primary-active: var(--color-blue-700);
--color-primary-focus: rgba(59, 130, 246, 0.4);
--color-secondary: var(--color-purple-500);
--color-secondary-dark: var(--color-purple-600);
--color-secondary-light: var(--color-purple-400);
--color-success: var(--color-green-500);
--color-success-dark: var(--color-green-600);
--color-success-light: var(--color-green-400);
--color-success-bg: var(--color-green-50);
--color-warning: var(--color-yellow-500);
--color-warning-dark: var(--color-yellow-600);
--color-warning-light: var(--color-yellow-400);
--color-warning-bg: var(--color-yellow-50);
--color-danger: var(--color-red-500);
--color-danger-dark: var(--color-red-600);
--color-danger-light: var(--color-red-400);
--color-danger-bg: var(--color-red-50);
/* Neutral Colors */
--color-white: #ffffff;
--color-black: #000000;
--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;
/* Background Colors */
--color-bg-primary: var(--color-white);
--color-bg-secondary: var(--color-gray-50);
--color-bg-tertiary: var(--color-gray-100);
--color-bg-inverse: var(--color-gray-900);
/* Text Colors */
--color-text-primary: var(--color-gray-900);
--color-text-secondary: var(--color-gray-600);
--color-text-tertiary: var(--color-gray-400);
--color-text-disabled: var(--color-gray-300);
--color-text-inverse: var(--color-white);
/* Border Colors */
--color-border-primary: var(--color-gray-200);
--color-border-secondary: var(--color-gray-300);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-danger);
--color-border-success: var(--color-success);
/* Overlay Colors */
--color-overlay-light: rgba(0, 0, 0, 0.05);
--color-overlay-medium: rgba(0, 0, 0, 0.5);
--color-overlay-dark: rgba(0, 0, 0, 0.8);
}
/* Color Utilities */
.bg-primary {
background-color: var(--color-primary);
}
.bg-primary-light {
background-color: var(--color-primary-light);
}
.bg-primary-dark {
background-color: var(--color-primary-dark);
}
.bg-success {
background-color: var(--color-success);
}
.bg-success-light {
background-color: var(--color-success-light);
}
.bg-warning {
background-color: var(--color-warning);
}
.bg-danger {
background-color: var(--color-danger);
}
.bg-gray-50 {
background-color: var(--color-gray-50);
}
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-200 {
background-color: var(--color-gray-200);
}
/* Hover States */
.hover\:bg-primary-dark:hover {
background-color: var(--color-primary-dark);
}
.hover\:bg-gray-100:hover {
background-color: var(--color-gray-100);
}
/* Focus States */
.focus\:ring-primary:focus {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width) var(--color-primary-focus);
}

Spacing and Layout

Spacing System

/* foundations/spacing.css */
:root {
/* Spacing Scale */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;   /* 2px */
--space-1: 0.25rem;      /* 4px */
--space-1-5: 0.375rem;   /* 6px */
--space-2: 0.5rem;       /* 8px */
--space-2-5: 0.625rem;   /* 10px */
--space-3: 0.75rem;      /* 12px */
--space-3-5: 0.875rem;   /* 14px */
--space-4: 1rem;         /* 16px */
--space-5: 1.25rem;      /* 20px */
--space-6: 1.5rem;       /* 24px */
--space-7: 1.75rem;      /* 28px */
--space-8: 2rem;         /* 32px */
--space-9: 2.25rem;      /* 36px */
--space-10: 2.5rem;      /* 40px */
--space-11: 2.75rem;     /* 44px */
--space-12: 3rem;        /* 48px */
--space-14: 3.5rem;      /* 56px */
--space-16: 4rem;        /* 64px */
--space-20: 5rem;        /* 80px */
--space-24: 6rem;        /* 96px */
--space-28: 7rem;        /* 112px */
--space-32: 8rem;        /* 128px */
--space-36: 9rem;        /* 144px */
--space-40: 10rem;       /* 160px */
--space-44: 11rem;       /* 176px */
--space-48: 12rem;       /* 192px */
--space-52: 13rem;       /* 208px */
--space-56: 14rem;       /* 224px */
--space-60: 15rem;       /* 240px */
--space-64: 16rem;       /* 256px */
--space-72: 18rem;       /* 288px */
--space-80: 20rem;       /* 320px */
--space-96: 24rem;       /* 384px */
}
/* Margin Utilities */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }
/* Padding Utilities */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
/* Gap Utilities */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

Grid System

/* layouts/grid.css */
:root {
--grid-columns: 12;
--grid-gutter: var(--space-4);
--container-max-width: 1280px;
--container-padding: var(--space-4);
}
/* Container */
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--container-padding);
width: 100%;
}
.container-fluid {
width: 100%;
padding: 0 var(--container-padding);
}
/* Grid */
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
gap: var(--grid-gutter);
}
/* Column Classes */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
/* Offset Classes */
.offset-1 { margin-left: calc(100% / 12 * 1); }
.offset-2 { margin-left: calc(100% / 12 * 2); }
.offset-3 { margin-left: calc(100% / 12 * 3); }
.offset-4 { margin-left: calc(100% / 12 * 4); }
.offset-5 { margin-left: calc(100% / 12 * 5); }
.offset-6 { margin-left: calc(100% / 12 * 6); }
/* Responsive Grid */
@media (min-width: 640px) {
.sm\:col-1 { grid-column: span 1; }
.sm\:col-2 { grid-column: span 2; }
.sm\:col-3 { grid-column: span 3; }
.sm\:col-4 { grid-column: span 4; }
.sm\:col-5 { grid-column: span 5; }
.sm\:col-6 { grid-column: span 6; }
.sm\:col-7 { grid-column: span 7; }
.sm\:col-8 { grid-column: span 8; }
.sm\:col-9 { grid-column: span 9; }
.sm\:col-10 { grid-column: span 10; }
.sm\:col-11 { grid-column: span 11; }
.sm\:col-12 { grid-column: span 12; }
}
@media (min-width: 768px) {
.md\:col-1 { grid-column: span 1; }
.md\:col-2 { grid-column: span 2; }
.md\:col-3 { grid-column: span 3; }
.md\:col-4 { grid-column: span 4; }
.md\:col-5 { grid-column: span 5; }
.md\:col-6 { grid-column: span 6; }
.md\:col-7 { grid-column: span 7; }
.md\:col-8 { grid-column: span 8; }
.md\:col-9 { grid-column: span 9; }
.md\:col-10 { grid-column: span 10; }
.md\:col-11 { grid-column: span 11; }
.md\:col-12 { grid-column: span 12; }
}
@media (min-width: 1024px) {
.lg\:col-1 { grid-column: span 1; }
.lg\:col-2 { grid-column: span 2; }
.lg\:col-3 { grid-column: span 3; }
.lg\:col-4 { grid-column: span 4; }
.lg\:col-5 { grid-column: span 5; }
.lg\:col-6 { grid-column: span 6; }
.lg\:col-7 { grid-column: span 7; }
.lg\:col-8 { grid-column: span 8; }
.lg\:col-9 { grid-column: span 9; }
.lg\:col-10 { grid-column: span 10; }
.lg\:col-11 { grid-column: span 11; }
.lg\:col-12 { grid-column: span 12; }
}
/* Flexbox Grid Alternative */
.flex-grid {
display: flex;
flex-wrap: wrap;
margin: calc(var(--grid-gutter) / -2);
}
.flex-grid > * {
flex: 1;
padding: calc(var(--grid-gutter) / 2);
min-width: 0;
}
.flex-grid .col-1 { flex: 0 0 calc(100% / 12 * 1); }
.flex-grid .col-2 { flex: 0 0 calc(100% / 12 * 2); }
.flex-grid .col-3 { flex: 0 0 calc(100% / 12 * 3); }
.flex-grid .col-4 { flex: 0 0 calc(100% / 12 * 4); }
.flex-grid .col-5 { flex: 0 0 calc(100% / 12 * 5); }
.flex-grid .col-6 { flex: 0 0 calc(100% / 12 * 6); }

Component Library

Button Component System

/* components/button.css */
:root {
--button-padding-y: var(--space-2);
--button-padding-x: var(--space-4);
--button-font-size: var(--font-size-md);
--button-border-radius: var(--radius-md);
--button-transition: all var(--transition-fast);
}
/* Base Button */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--button-padding-y) var(--button-padding-x);
font-family: inherit;
font-size: var(--button-font-size);
font-weight: var(--font-weight-medium);
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 1px solid transparent;
border-radius: var(--button-border-radius);
transition: var(--button-transition);
}
/* Button Variants */
.btn-primary {
background-color: var(--color-primary);
color: var(--color-white);
}
.btn-primary:hover,
.btn-primary:focus {
background-color: var(--color-primary-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-primary:active {
transform: translateY(0);
}
.btn-secondary {
background-color: var(--color-secondary);
color: var(--color-white);
}
.btn-secondary:hover,
.btn-secondary:focus {
background-color: var(--color-secondary-dark);
}
.btn-outline {
background-color: transparent;
border-color: currentColor;
color: var(--color-primary);
}
.btn-outline:hover,
.btn-outline:focus {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
.btn-ghost {
background-color: transparent;
color: var(--color-primary);
}
.btn-ghost:hover,
.btn-ghost:focus {
background-color: var(--color-primary-light);
color: var(--color-primary-dark);
}
.btn-danger {
background-color: var(--color-danger);
color: var(--color-white);
}
.btn-danger:hover,
.btn-danger:focus {
background-color: var(--color-danger-dark);
}
.btn-success {
background-color: var(--color-success);
color: var(--color-white);
}
.btn-success:hover,
.btn-success:focus {
background-color: var(--color-success-dark);
}
/* Button Sizes */
.btn-sm {
--button-padding-y: var(--space-1);
--button-padding-x: var(--space-2);
--button-font-size: var(--font-size-sm);
--button-border-radius: var(--radius-sm);
}
.btn-lg {
--button-padding-y: var(--space-3);
--button-padding-x: var(--space-6);
--button-font-size: var(--font-size-lg);
--button-border-radius: var(--radius-lg);
}
/* Button States */
.btn:disabled,
.btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.btn.loading {
position: relative;
color: transparent;
}
.btn.loading::after {
content: '';
position: absolute;
width: 1rem;
height: 1rem;
top: 50%;
left: 50%;
margin: -0.5rem 0 0 -0.5rem;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
/* Button Groups */
.btn-group {
display: inline-flex;
border-radius: var(--button-border-radius);
overflow: hidden;
}
.btn-group .btn {
border-radius: 0;
}
.btn-group .btn:not(:last-child) {
border-right: none;
}
.btn-group .btn:first-child {
border-top-left-radius: var(--button-border-radius);
border-bottom-left-radius: var(--button-border-radius);
}
.btn-group .btn:last-child {
border-top-right-radius: var(--button-border-radius);
border-bottom-right-radius: var(--button-border-radius);
}
/* Full Width Button */
.btn-block {
width: 100%;
display: flex;
}
/* Icon Button */
.btn-icon {
padding: var(--button-padding-y);
}
.btn-icon svg {
width: 1.25rem;
height: 1.25rem;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

Card Component

/* components/card.css */
:root {
--card-padding: var(--space-6);
--card-border-radius: var(--radius-lg);
--card-transition: all var(--transition-base);
}
.card {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--card-border-radius);
overflow: hidden;
transition: var(--card-transition);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card-header {
padding: var(--card-padding) var(--card-padding) 0;
}
.card-header:first-child {
padding-top: var(--card-padding);
}
.card-body {
padding: var(--card-padding);
}
.card-footer {
padding: 0 var(--card-padding) var(--card-padding);
border-top: 1px solid var(--color-border-primary);
background: var(--color-bg-secondary);
}
.card-footer:last-child {
padding-bottom: var(--card-padding);
}
/* Card Variants */
.card-primary {
border-top: 4px solid var(--color-primary);
}
.card-success {
border-top: 4px solid var(--color-success);
}
.card-warning {
border-top: 4px solid var(--color-warning);
}
.card-danger {
border-top: 4px solid var(--color-danger);
}
/* Card with Image */
.card-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.card-image-top {
border-top-left-radius: var(--card-border-radius);
border-top-right-radius: var(--card-border-radius);
}
.card-image-bottom {
border-bottom-left-radius: var(--card-border-radius);
border-bottom-right-radius: var(--card-border-radius);
}
/* Card Grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-6);
}
/* Horizontal Card */
.card-horizontal {
display: flex;
flex-direction: row;
}
.card-horizontal .card-image {
width: 33.333%;
aspect-ratio: 1;
object-fit: cover;
}
.card-horizontal .card-body {
flex: 1;
}
@media (max-width: 768px) {
.card-horizontal {
flex-direction: column;
}
.card-horizontal .card-image {
width: 100%;
aspect-ratio: 16 / 9;
}
}

Form Component System

/* components/form.css */
:root {
--form-input-height: 2.5rem;
--form-input-padding: var(--space-2) var(--space-3);
--form-input-border-radius: var(--radius-md);
--form-label-margin: var(--space-1);
--form-error-margin: var(--space-1);
}
/* Form Group */
.form-group {
margin-bottom: var(--space-4);
}
.form-label {
display: block;
margin-bottom: var(--form-label-margin);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.form-label-required::after {
content: '*';
margin-left: var(--space-1);
color: var(--color-danger);
}
/* Input Fields */
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: var(--form-input-padding);
font-family: inherit;
font-size: var(--font-size-md);
line-height: 1.5;
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--form-input-border-radius);
transition: var(--transition-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 var(--focus-ring-width) var(--color-primary-focus);
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
background-color: var(--color-bg-secondary);
cursor: not-allowed;
opacity: 0.7;
}
/* Input States */
.form-input.error,
.form-select.error,
.form-textarea.error {
border-color: var(--color-danger);
}
.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
box-shadow: 0 0 0 var(--focus-ring-width) rgba(239, 68, 68, 0.4);
}
.form-input.success,
.form-select.success,
.form-textarea.success {
border-color: var(--color-success);
}
/* Input Sizes */
.form-input-sm {
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-sm);
}
.form-input-lg {
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-lg);
}
/* Textarea */
.form-textarea {
min-height: 6rem;
resize: vertical;
}
/* Select */
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
/* Checkbox & Radio */
.form-checkbox,
.form-radio {
display: inline-flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
}
.form-checkbox input,
.form-radio input {
width: 1rem;
height: 1rem;
margin: 0;
cursor: pointer;
}
.form-checkbox input {
border-radius: var(--radius-sm);
}
.form-radio input {
border-radius: 50%;
}
/* Form Help Text */
.form-help {
margin-top: var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
/* Form Error */
.form-error {
margin-top: var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-danger);
}
/* Form Layouts */
.form-inline {
display: flex;
align-items: flex-end;
gap: var(--space-4);
flex-wrap: wrap;
}
.form-inline .form-group {
flex: 1;
margin-bottom: 0;
}
/* Floating Labels */
.form-floating {
position: relative;
}
.form-floating .form-input {
padding-top: var(--space-4);
padding-bottom: var(--space-1);
}
.form-floating .form-label {
position: absolute;
top: 50%;
left: var(--space-3);
transform: translateY(-50%);
margin-bottom: 0;
transition: all var(--transition-fast);
pointer-events: none;
background: transparent;
padding: 0 var(--space-1);
}
.form-floating .form-input:focus + .form-label,
.form-floating .form-input:not(:placeholder-shown) + .form-label {
top: 0;
transform: translateY(-50%);
font-size: var(--font-size-xs);
background: var(--color-bg-primary);
}
/* Form Validation Icons */
.form-input-icon {
position: relative;
}
.form-input-icon .form-input {
padding-right: 2rem;
}
.form-input-icon .validation-icon {
position: absolute;
right: var(--space-3);
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.form-input-icon .validation-icon.success {
color: var(--color-success);
}
.form-input-icon .validation-icon.error {
color: var(--color-danger);
}

Documentation and Usage

Component Documentation Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Documentation</title>
<style>
/* Include design system CSS here */
/* Documentation-specific styles */
.docs-container {
display: grid;
grid-template-columns: 280px 1fr;
min-height: 100vh;
}
.docs-sidebar {
background: var(--color-bg-secondary);
border-right: 1px solid var(--color-border-primary);
padding: var(--space-6);
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.docs-content {
padding: var(--space-8);
max-width: 1200px;
}
.docs-section {
margin-bottom: var(--space-12);
}
.docs-section h2 {
border-bottom: 2px solid var(--color-border-primary);
padding-bottom: var(--space-2);
margin-bottom: var(--space-6);
}
.component-demo {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-bottom: var(--space-6);
}
.component-code {
background: var(--color-gray-900);
color: var(--color-gray-100);
padding: var(--space-4);
border-radius: var(--radius-md);
overflow-x: auto;
font-family: var(--font-family-mono);
font-size: var(--font-size-sm);
margin-top: var(--space-4);
}
.component-props {
width: 100%;
border-collapse: collapse;
margin-top: var(--space-4);
}
.component-props th,
.component-props td {
padding: var(--space-2);
text-align: left;
border-bottom: 1px solid var(--color-border-primary);
}
.component-props th {
font-weight: var(--font-weight-semibold);
background: var(--color-bg-secondary);
}
.docs-nav {
list-style: none;
padding: 0;
}
.docs-nav li {
margin-bottom: var(--space-2);
}
.docs-nav a {
color: var(--color-text-secondary);
text-decoration: none;
display: block;
padding: var(--space-2);
border-radius: var(--radius-md);
transition: var(--transition-fast);
}
.docs-nav a:hover,
.docs-nav a.active {
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
</style>
</head>
<body>
<div class="docs-container">
<!-- Sidebar -->
<aside class="docs-sidebar">
<h2 style="margin-bottom: var(--space-6);">Design System</h2>
<ul class="docs-nav">
<li><a href="#getting-started" class="active">Getting Started</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#spacing">Spacing</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#grid">Grid System</a></li>
</ul>
</aside>
<!-- Main Content -->
<main class="docs-content">
<section id="getting-started" class="docs-section">
<h1>Getting Started</h1>
<p>Welcome to the Design System documentation. This system provides a collection of reusable components and design tokens to help you build consistent, accessible, and beautiful interfaces.</p>
<div class="component-demo">
<h3>Installation</h3>
<div class="component-code">
&lt;link rel="stylesheet" href="design-system.css"&gt;
</div>
</div>
</section>
<section id="buttons" class="docs-section">
<h2>Buttons</h2>
<p>Buttons are used to trigger actions. They come in various styles, sizes, and states.</p>
<div class="component-demo">
<h3>Primary Button</h3>
<div>
<button class="btn btn-primary">Primary Button</button>
</div>
<div class="component-code">
&lt;button class="btn btn-primary"&gt;Primary Button&lt;/button&gt;
</div>
<h3>Button Variants</h3>
<div style="display: flex; gap: var(--space-4); flex-wrap: wrap;">
<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>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-success">Success</button>
</div>
<div class="component-code">
&lt;button class="btn btn-primary"&gt;Primary&lt;/button&gt;<br>
&lt;button class="btn btn-secondary"&gt;Secondary&lt;/button&gt;<br>
&lt;button class="btn btn-outline"&gt;Outline&lt;/button&gt;<br>
&lt;button class="btn btn-ghost"&gt;Ghost&lt;/button&gt;<br>
&lt;button class="btn btn-danger"&gt;Danger&lt;/button&gt;<br>
&lt;button class="btn btn-success"&gt;Success&lt;/button&gt;
</div>
<h3>Button Sizes</h3>
<div style="display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap;">
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>
</div>
<h3>Button States</h3>
<div style="display: flex; gap: var(--space-4); flex-wrap: wrap;">
<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-primary loading">Loading</button>
</div>
<h3>Button Group</h3>
<div class="btn-group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Center</button>
<button class="btn btn-primary">Right</button>
</div>
<h3>Full Width Button</h3>
<button class="btn btn-primary btn-block">Full Width Button</button>
<h3>Icon Button</h3>
<button class="btn btn-icon btn-primary">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<h3>API Reference</h3>
<table class="component-props">
<thead>
<tr>
<th>Prop</th>
<th>Values</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>variant</td>
<td>primary, secondary, outline, ghost, danger, success</td>
<td>primary</td>
<td>Visual style of the button</td>
</tr>
<tr>
<td>size</td>
<td>sm, md, lg</td>
<td>md</td>
<td>Size of the button</td>
</tr>
<tr>
<td>disabled</td>
<td>true, false</td>
<td>false</td>
<td>Disables button interactions</td>
</tr>
<tr>
<td>loading</td>
<td>true, false</td>
<td>false</td>
<td>Shows loading spinner</td>
</tr>
<tr>
<td>fullWidth</td>
<td>true, false</td>
<td>false</td>
<td>Button takes full width</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
</div>
</body>
</html>

Building a Design System

Design System Development Process

/* Phase 1: Foundation (Design Tokens) */
/* Step 1: Define color palette */
:root {
--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;
}
/* Step 2: Define typography scale */
:root {
--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;
}
/* Step 3: Define spacing scale */
:root {
--spacing-0: 0;
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
}
/* Phase 2: Base Components */
.btn {
/* Base styles */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
cursor: pointer;
}
/* Phase 3: Variants */
.btn-primary {
background-color: var(--color-primary-500);
color: white;
}
.btn-primary:hover {
background-color: var(--color-primary-600);
}
.btn-outline {
background-color: transparent;
border: 1px solid var(--color-primary-500);
color: var(--color-primary-500);
}
.btn-outline:hover {
background-color: var(--color-primary-500);
color: white;
}
/* Phase 4: Sizes */
.btn-sm {
padding: var(--spacing-1) var(--spacing-2);
font-size: var(--font-size-sm);
}
.btn-lg {
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--font-size-lg);
}
/* Phase 5: States */
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn.loading {
position: relative;
color: transparent;
}
.btn.loading::after {
content: '';
position: absolute;
width: 1rem;
height: 1rem;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}

Build System Configuration

// build.config.js
// Example build configuration for design system
module.exports = {
// Entry points
entries: [
'tokens/colors.css',
'tokens/typography.css',
'tokens/spacing.css',
'foundations/reset.css',
'foundations/base.css',
'components/button.css',
'components/card.css',
'components/form.css',
'layouts/grid.css',
'utilities/helpers.css'
],
// Output configuration
output: {
path: 'dist',
filename: 'design-system.css',
minified: true
},
// CSS processing
css: {
autoprefixer: {
browsers: ['last 2 versions', '> 1%']
},
minify: true,
sourceMap: true
},
// Variable transformation
variables: {
transform: {
'--color-primary': '--color-blue-500',
'--color-secondary': '--color-purple-500'
}
},
// Media queries
breakpoints: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px'
},
// Theme generation
themes: {
light: {
'--color-bg': '#ffffff',
'--color-text': '#111827'
},
dark: {
'--color-bg': '#111827',
'--color-text': '#f9fafb'
}
}
};

Maintaining a Design System

Versioning Strategy

{
"name": "@company/design-system",
"version": "2.0.0",
"description": "Company Design System",
"main": "dist/design-system.css",
"style": "dist/design-system.css",
"versioning": {
"major": "Breaking changes (API changes, removed components)",
"minor": "New features (new components, new variants)",
"patch": "Bug fixes, documentation updates"
},
"changelog": {
"2.0.0": {
"breaking": [
"Removed deprecated button variants",
"Updated spacing scale",
"Changed color tokens"
],
"features": [
"Added new Card component",
"Added dark mode support",
"Added responsive utilities"
],
"fixes": [
"Fixed button focus states",
"Fixed form validation styling"
]
}
}
}

Component Lifecycle

/* components/_lifecycle.css */
/* Phase 1: Experimental */
.experimental-component {
/* Not yet stable, may change */
--experimental-prefix: true;
opacity: 0.8;
}
/* Phase 2: Stable */
.component {
/* Fully supported, documented */
--stable: true;
}
/* Phase 3: Deprecated */
.component.old {
text-decoration: line-through;
cursor: not-allowed;
}
.component.old::after {
content: ' (Deprecated)';
font-size: var(--font-size-sm);
color: var(--color-danger);
}
/* Phase 4: Removed */
/* Component removed from design system */

Real-World Examples

Example: Complete 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 Example</title>
<style>
/* Design Tokens */
:root {
/* Colors */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-300: #93c5fd;
--color-primary-400: #60a5fa;
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;
--color-primary-800: #1e40af;
--color-primary-900: #1e3a8a;
--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;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-danger: #ef4444;
--color-info: #06b6d4;
--color-white: #ffffff;
--color-black: #000000;
/* Typography */
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
--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;
--text-5xl: 3rem;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--leading-none: 1;
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
/* Spacing */
--spacing-0: 0;
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-32: 8rem;
/* Borders */
--radius-sm: 0.125rem;
--radius-md: 0.25rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
/* Layout */
--container-max-width: 1280px;
--container-padding: var(--spacing-4);
--grid-gap: var(--spacing-6);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
:root {
--container-padding: var(--spacing-6);
--grid-gap: var(--spacing-8);
}
}
@media (min-width: 1024px) {
:root {
--container-padding: var(--spacing-8);
--grid-gap: var(--spacing-10);
}
}
/* Reset */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Base Styles */
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-gray-900);
background-color: var(--color-gray-50);
}
/* Container */
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* Grid System */
.grid {
display: grid;
gap: var(--grid-gap);
grid-template-columns: repeat(12, 1fr);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
font-family: inherit;
font-weight: var(--font-medium);
text-align: center;
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
}
.btn-primary {
background-color: var(--color-primary-500);
color: var(--color-white);
}
.btn-primary:hover {
background-color: var(--color-primary-600);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background-color: var(--color-gray-200);
color: var(--color-gray-800);
}
.btn-secondary:hover {
background-color: var(--color-gray-300);
}
.btn-outline {
background-color: transparent;
border-color: var(--color-primary-500);
color: var(--color-primary-500);
}
.btn-outline:hover {
background-color: var(--color-primary-500);
color: var(--color-white);
}
.btn-danger {
background-color: var(--color-danger);
color: var(--color-white);
}
.btn-sm {
padding: var(--spacing-1) var(--spacing-3);
font-size: var(--text-sm);
}
.btn-lg {
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--text-lg);
}
.btn-block {
width: 100%;
}
/* Cards */
.card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition-base);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.card-header {
padding: var(--spacing-4);
border-bottom: 1px solid var(--color-gray-200);
}
.card-body {
padding: var(--spacing-4);
}
.card-footer {
padding: var(--spacing-4);
border-top: 1px solid var(--color-gray-200);
background-color: var(--color-gray-50);
}
.card-image {
width: 100%;
height: auto;
}
/* Forms */
.form-group {
margin-bottom: var(--spacing-4);
}
.form-label {
display: block;
margin-bottom: var(--spacing-1);
font-weight: var(--font-medium);
color: var(--color-gray-700);
}
.form-input {
width: 100%;
padding: var(--spacing-2) var(--spacing-3);
font-family: inherit;
font-size: var(--text-base);
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.form-input:focus {
outline: none;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-input.error {
border-color: var(--color-danger);
}
.form-input.error:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.form-help {
margin-top: var(--spacing-1);
font-size: var(--text-sm);
color: var(--color-gray-500);
}
.form-error {
margin-top: var(--spacing-1);
font-size: var(--text-sm);
color: var(--color-danger);
}
/* Typography Utilities */
.text-center {
text-align: center;
}
.text-primary {
color: var(--color-primary-500);
}
.text-success {
color: var(--color-success);
}
.text-danger {
color: var(--color-danger);
}
/* Spacing Utilities */
.mt-4 {
margin-top: var(--spacing-4);
}
.mb-4 {
margin-bottom: var(--spacing-4);
}
.p-4 {
padding: var(--spacing-4);
}
</style>
</head>
<body>
<div class="container">
<!-- Hero Section -->
<section style="padding: var(--spacing-16) 0; text-align: center;">
<h1 style="font-size: var(--text-5xl); font-weight: var(--font-bold); margin-bottom: var(--spacing-4);">
Design System Demo
</h1>
<p style="font-size: var(--text-xl); color: var(--color-gray-600); max-width: 600px; margin: 0 auto;">
A complete design system with reusable components and consistent styling
</p>
</section>
<!-- Buttons Section -->
<section style="margin-bottom: var(--spacing-16);">
<h2 style="font-size: var(--text-3xl); font-weight: var(--font-semibold); margin-bottom: var(--spacing-6);">
Buttons
</h2>
<div style="display: flex; gap: var(--spacing-4); flex-wrap: wrap;">
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-outline">Outline Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-primary btn-sm">Small Button</button>
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary btn-block">Full Width Button</button>
</div>
</section>
<!-- Cards Section -->
<section style="margin-bottom: var(--spacing-16);">
<h2 style="font-size: var(--text-3xl); font-weight: var(--font-semibold); margin-bottom: var(--spacing-6);">
Cards
</h2>
<div class="grid" style="gap: var(--spacing-6);">
<div class="card" style="grid-column: span 4;">
<div class="card-header">
<h3>Card Title</h3>
</div>
<div class="card-body">
<p>This is a card component with header, body, and footer sections. Perfect for displaying content.</p>
</div>
<div class="card-footer">
<button class="btn btn-primary btn-sm">Learn More</button>
</div>
</div>
<div class="card" style="grid-column: span 4;">
<img src="https://via.placeholder.com/400x200/3b82f6/ffffff?text=Card+Image" alt="Card" class="card-image">
<div class="card-body">
<h3>Card with Image</h3>
<p>Cards can also include images, making them perfect for product listings or article previews.</p>
</div>
</div>
<div class="card" style="grid-column: span 4;">
<div class="card-body">
<h3>Interactive Card</h3>
<p>Hover over cards to see the interactive effect with shadow and lift animation.</p>
<button class="btn btn-outline btn-sm mt-4">Click Me</button>
</div>
</div>
</div>
</section>
<!-- Form Section -->
<section style="margin-bottom: var(--spacing-16);">
<h2 style="font-size: var(--text-3xl); font-weight: var(--font-semibold); margin-bottom: var(--spacing-6);">
Forms
</h2>
<div style="max-width: 500px;">
<div class="form-group">
<label class="form-label" for="name">Name</label>
<input type="text" id="name" class="form-input" placeholder="Enter your name">
</div>
<div class="form-group">
<label class="form-label" for="email">Email Address</label>
<input type="email" id="email" class="form-input" placeholder="[email protected]">
<div class="form-help">We'll never share your email</div>
</div>
<div class="form-group">
<label class="form-label" for="message">Message</label>
<textarea id="message" class="form-input" rows="3" placeholder="Your message..."></textarea>
</div>
<div class="form-group">
<div class="form-checkbox">
<input type="checkbox" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>
</div>
</div>
<button class="btn btn-primary">Submit Form</button>
</div>
</section>
<!-- Typography Section -->
<section style="margin-bottom: var(--spacing-16);">
<h2 style="font-size: var(--text-3xl); font-weight: var(--font-semibold); margin-bottom: var(--spacing-6);">
Typography
</h2>
<div class="grid" style="gap: var(--spacing-6);">
<div style="grid-column: span 6;">
<h1 class="text-primary">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<div style="grid-column: span 6;">
<p class="text-primary">Primary text color</p>
<p class="text-success">Success text color</p>
<p class="text-danger">Danger text color</p>
<p><strong>Bold text</strong> and <em>italic text</em></p>
<p><a href="#" class="text-primary">This is a link</a></p>
<p class="text-center">Centered text</p>
</div>
</div>
</section>
</div>
</body>
</html>

Best Practices

Design System Checklist

/* Design System Implementation Checklist */
/* ✅ 1. Define clear design tokens */
:root {
--color-primary: #3b82f6;
--spacing-unit: 8px;
--font-size-base: 16px;
}
/* ✅ 2. Create component variants */
.btn-primary,
.btn-secondary,
.btn-outline { }
/* ✅ 3. Provide responsive breakpoints */
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
/* ✅ 4. Include accessibility features */
:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ✅ 5. Document components */
/**
* Button Component
* @example
* <button class="btn btn-primary">Click me</button>
*/
/* ✅ 6. Version control */
/* design-system.css v2.0.0 */
/* ✅ 7. Provide fallbacks */
.btn {
background: #3b82f6; /* Fallback */
background: var(--color-primary);
}
/* ✅ 8. Use consistent naming */
/* BEM naming convention */
.card { }
.card__title { }
.card--featured { }
/* ✅ 9. Optimize performance */
/* Use CSS variables, minimize specificity */
/* ✅ 10. Test across browsers */
/* Ensure compatibility with target browsers */

Design System Governance

/* Design System Governance Rules */
/* Rule 1: No direct overrides in consuming applications */
/* Bad: .btn { background: red; } */
/* Good: .btn-custom { background: red; } */
/* Rule 2: Use design tokens, not hardcoded values */
/* Bad: color: #3b82f6; */
/* Good: color: var(--color-primary); */
/* Rule 3: Follow component API */
/* All buttons must have .btn class */
/* Rule 4: Contribute changes back */
/* Submit PRs for new components or modifications */
/* Rule 5: Document changes */
/* Update documentation when modifying components */

Conclusion

A well-implemented design system is a powerful asset for any organization:

Key Takeaways

Consistency: Single source of truth for design and development
Efficiency: Reusable components speed up development
Scalability: Easy to maintain and extend as products grow
Collaboration: Common language between designers and developers
Quality: Ensured accessibility and best practices
Brand Identity: Consistent visual language across all products

Design System Components

Layer	Purpose	Examples
Design Tokens	Atomic values	Colors, spacing, typography
Foundations	Base styles	Reset, base elements, utilities
Components	Reusable UI	Buttons, cards, forms
Layouts	Page structure	Grid, containers
Themes	Visual variations	Dark mode, brand themes

Next Steps

Audit existing components for consistency
Define design tokens and naming conventions
Build a component library
Document usage and API
Test across browsers and devices
Educate teams on usage
Maintain and evolve over time

A successful design system requires ongoing commitment, collaboration, and iteration. Start small, focus on high-impact components, and gradually expand. Remember: the best design system is one that actually gets used!

HTML & CSS Learning Guides, Exercises, Projects, Design Systems, Accessibility & Performance (Related to HTML & CSS Development)

HTML & CSS Quiz – Comprehensive Assessment:
This quiz evaluates core knowledge of HTML and CSS including structure, styling, layout, forms, and responsive design. It is used to test practical understanding of front-end fundamentals and identify skill levels in web development.
Read more: https://macronepal.com/bash/html-and-css-quiz-comprehensive-assessment/

Complete Guide to HTML & CSS Tooling & Automation:
This guide explains tools and automation workflows used in modern web development, such as preprocessors, build tools, and task runners that improve efficiency in HTML and CSS projects.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-tooling-automation/

Complete HTML & CSS Exercises:
A collection of practical exercises designed to strengthen HTML and CSS skills through hands-on coding tasks, covering layout, styling, and responsive design concepts.
Read more: https://macronepal.com/bash/complete-html-and-css-exercises/

Complete HTML & CSS Landing Page Project:
This project focuses on building a full landing page using HTML and CSS, helping learners understand real-world website structure, layout design, and UI development.
Read more: https://macronepal.com/bash/complete-html-css-landing-page-project/

HTML & CSS Debugging and Testing Guide:
This guide teaches how to identify and fix errors in HTML and CSS code, along with testing techniques to ensure websites work correctly across browsers.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-debugging-testing/

HTML & CSS Design Systems Guide:
A design system approach helps maintain consistency in UI development using reusable components, styles, and patterns across web projects.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

HTML & CSS Accessibility (A11y) Guide:
This guide focuses on making websites accessible for all users, including proper semantic HTML, keyboard navigation, alt text, and screen reader support.
Read more: https://macronepal.com/bash/complete-guide-to-html-css-accessibility-a11y/

HTML & CSS Performance Guide:
This topic explains optimization techniques such as reducing file size, improving loading speed, and writing efficient HTML and CSS for better website performance.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-performance/

HTML & CSS Design Systems (Advanced Overview):
Design systems help developers maintain scalable and consistent UI components across large projects using structured HTML and reusable CSS patterns.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/