Brand Kit Base

<section class="ws-brand-kit bg-[var(--ws-color-surface)] py-16">
  <div class="mx-auto max-w-5xl px-6">
    <div class="text-center">
      <h2 class="text-3xl font-bold text-slate-900">Brand Kit</h2>
      <p class="mt-3 text-lg text-slate-500">Download our brand assets for press, partnerships, and media use.</p>
    </div>

    <!-- Logo variants -->
    <h3 class="mt-12 text-sm font-semibold uppercase tracking-wider text-slate-400">Logo</h3>
    <div class="mt-4 grid gap-4 sm:grid-cols-2">
      <div class="flex flex-col items-center justify-center rounded-2xl bg-[var(--ws-color-surface)] p-10 ring-1 ring-slate-200">
        <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-slate-900 text-lg font-bold text-white">W</div><!-- ws-ok -->
        <p class="mt-4 text-xs text-slate-400">Light background</p>
        <a href="#" class="mt-2 text-xs font-medium text-blue-600 hover:text-blue-700">Download SVG ↓</a>
      </div>
      <div class="flex flex-col items-center justify-center rounded-2xl bg-slate-900 p-10 ring-1 ring-slate-700"><!-- ws-ok -->
        <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-white text-lg font-bold text-slate-900">W</div><!-- ws-ok -->
        <p class="mt-4 text-xs text-slate-400">Dark background</p>
        <a href="#" class="mt-2 text-xs font-medium text-blue-400 hover:text-blue-300">Download SVG ↓</a>
      </div>
    </div>

    <!-- Colors -->
    <h3 class="mt-12 text-sm font-semibold uppercase tracking-wider text-slate-400">Brand Colors</h3>
    <div class="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-4">
      <div>
        <div class="h-20 rounded-xl bg-slate-900"></div><!-- ws-ok -->
        <p class="mt-2 text-sm font-medium text-slate-900">Primary</p>
        <p class="text-xs font-mono text-slate-400">#0f172a</p>
      </div>
      <div>
        <div class="h-20 rounded-xl bg-blue-600"></div>
        <p class="mt-2 text-sm font-medium text-slate-900">Accent</p>
        <p class="text-xs font-mono text-slate-400">#2563eb</p>
      </div>
      <div>
        <div class="h-20 rounded-xl bg-slate-100 ring-1 ring-slate-200"></div>
        <p class="mt-2 text-sm font-medium text-slate-900">Background</p>
        <p class="text-xs font-mono text-slate-400">#f1f5f9</p>
      </div>
      <div>
        <div class="h-20 rounded-xl bg-emerald-500"></div>
        <p class="mt-2 text-sm font-medium text-slate-900">Success</p>
        <p class="text-xs font-mono text-slate-400">#10b981</p>
      </div>
    </div>

    <!-- Typography -->
    <h3 class="mt-12 text-sm font-semibold uppercase tracking-wider text-slate-400">Typography</h3>
    <div class="mt-4 grid gap-4 sm:grid-cols-2">
      <div class="rounded-2xl border border-slate-200 p-6">
        <p class="text-xs text-slate-400">Headings</p>
        <p class="mt-2 text-3xl font-bold text-slate-900">Inter Bold</p>
        <p class="mt-1 text-sm text-slate-500">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
        <p class="text-sm text-slate-500">abcdefghijklmnopqrstuvwxyz 0123456789</p>
      </div>
      <div class="rounded-2xl border border-slate-200 p-6">
        <p class="text-xs text-slate-400">Body</p>
        <p class="mt-2 text-3xl text-slate-900">Inter Regular</p>
        <p class="mt-1 text-sm text-slate-500">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
        <p class="text-sm text-slate-500">abcdefghijklmnopqrstuvwxyz 0123456789</p>
      </div>
    </div>

    <!-- Download all -->
    <div class="mt-12 text-center">
      <a href="#" class="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-6 py-3 text-sm font-semibold text-white hover:bg-slate-800 dark:hover:bg-slate-100"><!-- ws-ok -->
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        Download Brand Kit (ZIP)
      </a>
    </div>
  </div>
</section>