Blog Details Base

<article class="ws-blog-details mx-auto max-w-3xl px-6 py-16">
  <!-- Header -->
  <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)]">Design Systems</span>
    <h1 class="mt-4 text-3xl font-bold tracking-tight text-[var(--ws-blog-details-text)] sm:text-4xl">Building Scalable Token Architectures for Modern Teams</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)]">JD</div>
      <div>
        <p class="text-sm font-medium text-[var(--ws-blog-details-text)]">Jane Doe</p>
        <p class="text-sm text-[var(--ws-blog-details-text-soft)]">Mar 15, 2026 &middot; 8 min read</p>
      </div>
    </div>
  </header>

  <!-- Hero image -->
  <div class="mt-8 flex aspect-[2/1] items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-100 to-cyan-100 dark:from-indigo-900 dark:to-cyan-900" role="img" aria-label="Article hero image">
    <svg class="h-12 w-12 text-indigo-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>

  <!-- Body -->
  <div class="mt-10 space-y-6 text-base leading-relaxed text-[var(--ws-blog-details-text-soft)]">
    <p>Design tokens have fundamentally changed how organizations approach visual consistency. Rather than scattering color values, spacing units, and font sizes across dozens of stylesheets, tokens centralize these decisions into a single, versionable source of truth. The result is a system that scales from one product to an entire portfolio without losing coherence.</p>
    <p>The most effective token architectures follow a three-tier model: primitive, semantic, and component-level tokens. Primitive tokens define the raw palette — every shade, every spacing step. Semantic tokens map meaning onto primitives, creating a vocabulary teams can reason about. Component tokens scope decisions to individual patterns.</p>
    <blockquote class="border-l-4 border-[var(--ws-blog-details-accent)] pl-6 italic text-[var(--ws-blog-details-text)]">"A design system is only as strong as the governance model behind it. Tokens without naming conventions and versioning strategies become technical debt disguised as progress."</blockquote>
    <p>Implementing this architecture requires careful tooling choices. Modern workflows use token transformers that output platform-specific formats — CSS custom properties for the web, Swift constants for iOS, XML resources for Android — all from a single JSON source. This eliminates drift and ensures every platform renders the same visual language.</p>
  </div>

  <!-- Tags -->
  <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)]">Design 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)]">Architecture</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)]">CSS</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)]">Governance</span>
    </div>
  </footer>
</article>