Design System - Desktop Mockup

<!-- Font families -->
<h1 class="font-display">Display heading</h1>
<p class="font-sans">Body text</p>

<!-- Font sizes -->
<h1 class="text-5xl">64px heading</h1>
<h2 class="text-3xl">32px heading</h2>
<p class="text-lg">18px body text</p>

<!-- Font weights -->
<p class="font-bold">Bold text</p>
<p class="font-semibold">Semi-bold text</p>
<p class="font-medium">Medium text</p>

<!-- Line heights -->
<h1 class="leading-tight">Tight heading</h1>
<p class="leading-normal">Normal body text</p>
<p class="leading-relaxed">Relaxed paragraphs</p>

<!-- Border radius -->
<div class="rounded-md">Medium rounded corners</div>
<button class="rounded-full">Pill-shaped button</button>

<!-- Shadows -->
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>

<!-- Container -->
<div class="container">
  Centered container with max-width 1200px
</div>

<button class="bg-primary-600 hover:bg-primary-700 text-white">
  Button with hover state
</button>

<a href="#" class="text-neutral-700 hover:text-primary-600">
  Link with hover color
</a>

<input class="focus:outline-primary-600" type="text" />

<button class="focus:ring-primary-500">
  Button with focus ring
</button>

<button class="bg-primary-600 active:bg-primary-700 active:scale-95">
  Button with active/pressed state
</button>

<section class="bg-white py-3xl">
  <div class="container">
    <h1 class="font-display text-4xl md:text-5xl font-bold text-neutral-900 mb-lg">
      We Serve
    </h1>
    <p class="text-lg md:text-xl leading-relaxed text-neutral-600 mb-xl">
      We serve almost 60 people every seconds Saturday all while providing
      necessary recourses like showers, Clothes, and hair care.
    </p>
    <button class="px-lg py-md bg-primary-600 hover:bg-primary-700
                   text-white rounded-sm font-semibold">
      Learn More
    </button>
  </div>
</section>

<article class="bg-white p-lg rounded-lg shadow-md border border-neutral-200
                hover:shadow-lg">
  <h2 class="font-display text-2xl font-bold text-neutral-900 mb-md">
    Card Title
  </h2>
  <p class="text-base leading-normal text-neutral-600 mb-lg">
    Card content with proper spacing and typography that maintains
    consistency across your application.
  </p>
  <button class="px-lg py-md bg-primary-600 hover:bg-primary-700
                 active:scale-95 text-white rounded-sm font-semibold
                 focus:ring-primary-500">
    Action Button
  </button>
</article>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-lg">
  <div class="bg-neutral-50 p-lg rounded-md">
    <h3 class="text-sm text-neutral-500 mb-xs">Showers</h3>
    <p class="text-4xl font-bold text-primary-600">64</p>
    <p class="text-sm text-neutral-400 mt-xs">Requested</p>
  </div>

  <div class="bg-neutral-50 p-lg rounded-md">
    <h3 class="text-sm text-neutral-500 mb-xs">Clothes</h3>
    <p class="text-4xl font-bold text-primary-600">64</p>
    <p class="text-sm text-neutral-400 mt-xs">Requested</p>
  </div>

  <div class="bg-neutral-50 p-lg rounded-md">
    <h3 class="text-sm text-neutral-500 mb-xs">Haircuts</h3>
    <p class="text-4xl font-bold text-primary-600">64</p>
    <p class="text-sm text-neutral-400 mt-xs">Requested</p>
  </div>
</div>

.custom-component {
  /* Use tokens for consistency */
  background: var(--color-surface-base);
  padding: var(--spacing-scale-lg);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  color: var(--color-text-primary);

  /* Custom properties */
  display: flex;
  align-items: center;
  gap: var(--spacing-scale-md);
}

<!-- ✅ Use utility classes -->
<div class="bg-white p-lg rounded-md shadow-md">
  <h2 class="text-2xl font-bold mb-md">Title</h2>
</div>

<!-- ✅ Use tokens in custom CSS -->
<style>
  .component {
    color: var(--color-primary-600);
    padding: var(--spacing-scale-lg);
  }
</style>

<!-- ❌ Don't use hardcoded values -->
<div style="background: white; padding: 24px;">
  <h2 style="font-size: 24px;">Title</h2>
</div>

<!-- ❌ Don't mix utilities with inline styles -->
<div class="bg-white" style="padding: 24px;">
  <h2 class="text-2xl">Title</h2>
</div>

// Import design system
@import '/styles/design-system.css';

// Use tokens in SCSS
.my-component {
  background: var(--color-primary-600);
  padding: var(--spacing-scale-lg);
  border-radius: var(--border-radius-md);

  &:hover {
    background: var(--color-primary-700);
  }
}