Mo will dial 248 prospects, route conversions to Sal.
<a>The workhorse. Every panel, list item, dashboard widget.
Lime ring + glow. Selected campaign, featured plan, hover state.
Nested in another card. No shadow. Background = parent L1.
Sticky navbar, command palette, overlay tooltips. Never content.
Soft lime gradient back. Pro plan, marketing feature blocks.
Solid gradient. Hero of a section. Used sparingly — 1 per page.
Your card ending 4242 was declined. Update billing to resume calls.
Standard resting state. Border #2A2F3B, shadow-2.
+lime ring/15, +shadow-3, +glow-soft. transform: translateY(-1px).
+lime ring/30 outer, fill tint. Sticky after click/select.
opacity .5 · saturate .4 · pointer-events: none.
Create your first to get Mo dialing.
+ NEW CAMPAIGN248 leads queued. 31 connected · 12 transferred to a human.
Hi, this is Mo calling about your inquiry — got a minute?
Yeah, sure. What's this about exactly?
Every card opens with a mono eyebrow label. It tells the user what kind of object this is before they read the title. Skip it only on stat cards where the label IS the title.
All cards in a row share the same shadow level. Don't mix shadow-2 and shadow-3 on a grid — the eye picks up the elevated card as more important. Use elevated state for that signal, not asymmetric shadows.
If the card has a primary action, the whole shell is the target. Wrap in <a>, give the button pointer-events:none, set cursor:pointer on the shell. Don't make users hunt for the button.