<div class="flex flex-col gap-4 p-6 rounded-2xl border border-neutral-800 bg-neutral-900">
  <h3 class="text-lg font-semibold text-orange-500">The Layouts System</h3>
  <p class="text-base leading-relaxed text-neutral-300">Build layouts in seconds — HTML that reads like layout, not a wall of classes.</p>
  <button class="inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-400 transition-colors">See how it works</button>
</div>

<article class="card vertical gap-4">
  <h3 class="h4 accent">The Layouts System</h3>
  <p class="prose">Build layouts in seconds — HTML that reads like layout, not a wall of classes.</p>
  <button class="button pigment-orange-filled">See how it works</button>
</article>