Design System Overview Card with Token Preview

<article class="group relative bg-neutral-900 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6">
          <div class="flex items-center justify-between">
            <h3 class="text-white text-lg sm:text-xl tracking-tight font-medium font-geist" style="">Design Systems at Scale</h3>
            <span class="text-[11px] text-neutral-300 font-geist" style="">v1.4</span>
          </div>
          <p class="mt-2 text-sm text-neutral-300 font-geist" style="">Token-driven UI kits and accessible components for product velocity.</p>

          <div class="mt-4 grid grid-cols-5 gap-2">
            <div class="flex flex-col items-center gap-1">
              <span class="h-8 w-8 rounded-lg ring-1 ring-white/10" style="background:linear-gradient(135deg,#22c55e,#16a34a)"></span>
              <span class="text-[10px] text-neutral-400 font-geist" style="">Brand</span>
            </div>
            <div class="flex flex-col items-center gap-1">
              <span class="h-8 w-8 rounded-lg ring-1 ring-white/10" style="background:linear-gradient(135deg,#60a5fa,#2563eb)"></span>
              <span class="text-[10px] text-neutral-400 font-geist" style="">Primary</span>
            </div>
            <div class="flex flex-col items-center gap-1">
              <span class="h-8 w-8 rounded-lg ring-1 ring-white/10" style="background:linear-gradient(135deg,#a78bfa,#7c3aed)"></span>
              <span class="text-[10px] text-neutral-400 font-geist" style="">Accent</span>
            </div>
            <div class="flex flex-col items-center gap-1">
              <span class="h-8 w-8 rounded-lg ring-1 ring-white/10 bg-neutral-800"></span>
              <span class="text-[10px] text-neutral-400 font-geist" style="">Surface</span>
            </div>
            <div class="flex flex-col items-center gap-1">
              <span class="h-8 w-8 rounded-lg ring-1 ring-white/10 bg-white/90"></span>
              <span class="text-[10px] text-neutral-400 font-geist" style="">Text</span>
            </div>
          </div>

          <pre class="mt-4 text-xs leading-relaxed text-neutral-200 bg-neutral-900 ring-1 ring-white/10 rounded-xl p-4 overflow-x-auto font-mono"><code class="font-geist" style="">tokens: {
  radius: { sm: 8, md: 12, xl: 24 },
  colors: { brand: '#10B981', surface: '#0A0A0A' },
  shadow: '0 6px 24px -8px rgba(16,185,129,.35)'
}</code></pre>

          <div class="mt-4 flex items-center justify-between">
            <span class="inline-flex items-center gap-2 text-[11px] text-emerald-200 bg-emerald-500/10 rounded-full px-2 py-1 ring-1 ring-emerald-400/20 font-geist" style="">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="a11y" class="lucide lucide-a11y w-3.5 h-3.5" style="stroke-width:1.5"><circle cx="16" cy="4" r="1" class=""></circle><path d="m18 19 1-7-5 1-3-3-4 1" class=""></path><path d="M2 19h7" class=""></path><path d="M13 19h9" class=""></path></svg>
              WCAG 2.2 AA
            </span>
            <a href="#services" class="text-sm text-white/90 hover:text-white underline underline-offset-4 decoration-white/30 font-geist" style="">Explore kits</a>
          </div>
        </article>