notes on design,

Interfaces need to serve important data without coming in the way. It needs to be useful and easy to read.

Introducing interface elements, biscuits. They fit into any interface, landing pages, telemetry, embedded devices, and more.

Simple biscuits serve data as intelligent interfaces.

<div class="flex items-center justify-between bg-gray-100 rounded-xl p-2">
  <div class="flex items-center gap-3">
    <span class="bg-black text-white text-sm px-2 py-1 rounded">info</span>
    <p class="text-sm text-black">
      Users shall have unlimited usage for this week, and more. 🥂
    </p>
  </div>
  <button class="ml-4 bg-gray-200 hover:bg-gray-300 text-sm font-medium px-4 py-2 rounded-lg transition">
    expand news
  </button>
</div>

<div class="flex items-center justify-between bg-gray-100 rounded-xl p-2">
  <div class="flex items-center gap-3">
    <span class="bg-gray-700 text-white text-sm px-2 py-1 rounded">new update</span>
    <p class="text-sm text-black">
      Users shall have unlimited usage for this week, and more! 🥂
    </p>
  </div>
  <button onclick="toggleWindow('news')" class="flex items-center gap-x-2 ml-4 bg-gray-200 hover:bg-gray-300 text-sm font-medium px-4 py-2 rounded-lg transition">
    expand news
    <svg class="w-3 h-3 transform -rotate-90" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
    </svg>
  </button>
</div>

Use them to serve data, elegantly.