← Back to docs

Recipe

Data card design

Data cards are the building blocks of a Meridian dashboard. A well-designed card answers a single question at a glance, scales gracefully on mobile, and stays legible in both light and dark contexts. This recipe walks through composition, hierarchy, and the practical Tailwind utilities we use across Meridian surfaces.

1. Compose around one metric

Each card should expose one headline number plus at most two supporting figures. Push secondary detail into a drawer or a dedicated detail view rather than crowding the card surface.

2. Lock the visual hierarchy

Title at the top in muted weight, value rendered large and bold, delta or trend rendered in a condensed font with a violet or pink accent to indicate direction.

3. Reach for the canonical class set

We keep card chrome identical across the product so the eye learns where to look. The block below is the starting point you should copy into new dashboard tiles.

<div className="rounded-xl border border-violet-500/30
                bg-[#0A0612]/80 p-5 shadow-lg">
  <p className="text-xs text-white/60">Active users</p>
  <p className="text-3xl font-bold text-white">12,480</p>
  <p className="text-sm text-pink-400">+4.2% week over week</p>
</div>