Blog Details With Sidebar

<div class="ws-blog-details mx-auto grid max-w-7xl gap-10 px-6 py-16 lg:grid-cols-[1fr_300px]">
  <!-- Article -->
  <article>
    <header>
      <span class="inline-flex rounded-full bg-[var(--ws-blog-details-accent)]/10 px-3 py-1 text-xs font-medium text-[var(--ws-blog-details-accent)]">Engineering</span>
      <h1 class="mt-4 text-3xl font-bold tracking-tight text-[var(--ws-blog-details-text)] sm:text-4xl">How We Migrated 200 Components to a Token-Driven System</h1>
      <div class="mt-6 flex items-center gap-4">
        <div class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-blog-details-border)] text-sm font-semibold text-[var(--ws-blog-details-text-soft)]">AS</div>
        <div>
          <p class="text-sm font-medium text-[var(--ws-blog-details-text)]">Alex Smith</p>
          <p class="text-sm text-[var(--ws-blog-details-text-soft)]">Mar 18, 2026 &middot; 12 min read</p>
        </div>
      </div>
    </header>

    <div class="mt-8 flex aspect-[2/1] items-center justify-center rounded-2xl bg-gradient-to-br from-violet-100 to-fuchsia-100 dark:from-violet-900 dark:to-fuchsia-900" role="img" aria-label="Article hero image">
      <svg class="h-12 w-12 text-violet-300" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
    </div>

    <div class="mt-10 space-y-6 text-base leading-relaxed text-[var(--ws-blog-details-text-soft)]">
      <p>Migrating an existing component library to a token-driven architecture is one of the most impactful — and most challenging — projects a design system team can undertake. After 18 months of gradual rollout, our team completed the migration of over 200 components across three platforms.</p>
      <p>The key insight was treating the migration as a series of small, reversible steps rather than a single big-bang release. We began by extracting color and spacing values from our most-used components, creating semantic tokens that mapped to the existing visual output. This meant zero visual regressions on day one.</p>
      <blockquote class="border-l-4 border-[var(--ws-blog-details-accent)] pl-6 italic text-[var(--ws-blog-details-text)]">"The migration succeeded because we optimized for zero visual change first. Once tokens were in place, we could evolve the design language without touching component code."</blockquote>
      <p>Phase two introduced component-level tokens, scoping decisions like border-radius and shadow intensity to individual patterns. This layer gave teams the flexibility to customize without forking, while the semantic layer ensured brand consistency across the portfolio.</p>
    </div>

    <footer class="mt-10 border-t border-[var(--ws-blog-details-border)] pt-6">
      <div class="flex flex-wrap gap-2">
        <span class="rounded-full border border-[var(--ws-blog-details-border)] px-3 py-1 text-xs text-[var(--ws-blog-details-text-soft)]">Migration</span>
        <span class="rounded-full border border-[var(--ws-blog-details-border)] px-3 py-1 text-xs text-[var(--ws-blog-details-text-soft)]">Tokens</span>
        <span class="rounded-full border border-[var(--ws-blog-details-border)] px-3 py-1 text-xs text-[var(--ws-blog-details-text-soft)]">Engineering</span>
      </div>
    </footer>
  </article>

  <!-- Sidebar -->
  <aside class="space-y-8 lg:sticky lg:top-8 lg:self-start">
    <!-- Table of Contents -->
    <nav aria-label="Table of contents">
      <h2 class="text-sm font-semibold text-[var(--ws-blog-details-text)]">On this page</h2>
      <ul class="mt-3 space-y-2 border-l border-[var(--ws-blog-details-border)] pl-4">
        <li><a href="#" class="text-sm text-[var(--ws-blog-details-accent)] font-medium">Introduction</a></li>
        <li><a href="#" class="text-sm text-[var(--ws-blog-details-text-soft)] transition hover:text-[var(--ws-blog-details-text)]">Phase 1: Extraction</a></li>
        <li><a href="#" class="text-sm text-[var(--ws-blog-details-text-soft)] transition hover:text-[var(--ws-blog-details-text)]">Phase 2: Component Tokens</a></li>
        <li><a href="#" class="text-sm text-[var(--ws-blog-details-text-soft)] transition hover:text-[var(--ws-blog-details-text)]">Results &amp; Lessons</a></li>
      </ul>
    </nav>

    <!-- Related Posts -->
    <div>
      <h2 class="text-sm font-semibold text-[var(--ws-blog-details-text)]">Related Posts</h2>
      <div class="mt-3 space-y-4">
        <a href="#" class="block rounded-lg border border-[var(--ws-blog-details-border)] p-3 transition hover:border-[var(--ws-blog-details-accent)]">
          <p class="text-sm font-medium text-[var(--ws-blog-details-text)]">Token Naming Conventions That Scale</p>
          <p class="mt-1 text-xs text-[var(--ws-blog-details-text-soft)]">Feb 28, 2026</p>
        </a>
        <a href="#" class="block rounded-lg border border-[var(--ws-blog-details-border)] p-3 transition hover:border-[var(--ws-blog-details-accent)]">
          <p class="text-sm font-medium text-[var(--ws-blog-details-text)]">Multi-Platform Token Delivery</p>
          <p class="mt-1 text-xs text-[var(--ws-blog-details-text-soft)]">Jan 12, 2026</p>
        </a>
      </div>
    </div>

    <!-- Newsletter -->
    <div class="rounded-xl border border-[var(--ws-blog-details-border)] bg-[var(--ws-blog-details-accent)]/5 p-4">
      <h2 class="text-sm font-semibold text-[var(--ws-blog-details-text)]">Newsletter</h2>
      <p class="mt-1 text-xs text-[var(--ws-blog-details-text-soft)]">Get design system insights delivered weekly.</p>
      <form class="mt-3 space-y-2">
        <input type="email" placeholder="you@example.com" class="w-full rounded-lg border border-[var(--ws-blog-details-border)] bg-[var(--ws-blog-details-bg)] px-3 py-2 text-sm text-[var(--ws-blog-details-text)] placeholder:text-[var(--ws-blog-details-text-soft)] focus:border-[var(--ws-blog-details-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-blog-details-accent)]/20" aria-label="Email address">
        <button type="submit" class="w-full rounded-lg bg-[var(--ws-blog-details-action-bg)] px-3 py-2 text-sm font-semibold text-[var(--ws-blog-details-action-text)] transition hover:opacity-90">Subscribe</button>
      </form>
    </div>
  </aside>
</div>