A card idiom for TubeSpanner

Five candidates, each shown on the same three real cards: a shortcut, channel health, and an outcome headline.

What makes a card ours is not decoration. A coloured rail, a tinted panel and a rounded box with a shadow are what every tool ships, which is why the current cards read as generic. The signature has to be either the silhouette (the shape you recognise before you read it) or the anatomy (where things always sit). Colour stays where it already works: the icon disc, the grade meter, the chips.

Option A

The squared corner

Every card is 14px rounded except one corner, cut to 3px. It reads as a tag or a tooled part rather than a generic box, and it is recognisable across the estate at any size, in any colour, at a glance. Nothing else changes.

Cost: one line of CSS. Works on every existing card immediately. No markup change.

Shortcut

Post to social media
Video script templates

Channel health

Retention is dragging this down most

FDCBAA+

3 of 4 measured.

Since you last looked

72+22

Packaging moved from 50 to 72.

Option B

The tab

The eyebrow leaves the card body and becomes a tab hanging off the top edge, like a divider in a drawer. It gives every card a named handle, and the tab is where a state or a workflow stage can take colour without washing anything.

Cost: the eyebrow becomes required. A card with nothing to name it looks unfinished, which is a real constraint on empty states.

Promote

Post to social media
Mailing lists

Channel health

Retention is dragging this down most

FDCBAA+

3 of 4 measured.

Win

72+22

Packaging moved from 50 to 72.

Option C

The plate

The header becomes a plate: its own band, hairline-separated, faintly hatched at the brand purple so it reads as an engraved label on an instrument rather than a heading in a box. The action sits in a matching footer, so every card has a top and a bottom and the middle is only ever content.

Cost: the most markup. Cards need a header and body wrapper, so it is a component rather than a class.

Shortcuts

6 of 34
Post to social media
Video script templates

Channel health

3 of 4

Retention is dragging this down most

FDCBAA+

Since you last looked

72+22

Packaging moved from 50 to 72.

Option D

The stack

The squared corner from A, plus the layered-card technique from your reference. Fractal noise gives a matte paper grain, tinted toward the brand purple so even the texture belongs to us. A second plane sits offset behind it, so depth comes from a layer rather than a blurred drop shadow, and the card itself leans a hair. Hovering squares it: the one you are acting on is the one that is straight, which beats a border colour for saying "active". A card sitting on more cards is a fair description of a toolkit.

Cost: still CSS only, no markup change. The noise is baked into a data URI and tiled rather than applied as a live SVG filter, because a filter on every card is a filter pass per card per frame. Needs a larger grid gap for the offset layer and the lean, so the shortcut row goes from 16px to about 24px.

Shortcut

Post to social media
Video script templates

Channel health

Retention is dragging this down most

FDCBAA+

3 of 4 measured.

Since you last looked

72+22

Packaging moved from 50 to 72.

Option E

The glass

A frosted surface over a brand field, keeping the squared corner so it is ours rather than everyone's. The field is not decoration here, it is what makes the treatment legible: on a flat page a frosted card is just a pale rectangle.

Cost: real, and worth knowing before choosing it. The page needs a gradient field behind the content, which is a change to the whole dashboard rather than to cards. Every glass surface is a live blur of what is under it, so this belongs on a few large panels, not on 46px shortcut rows. And the eyebrow lavender fails contrast on a translucent surface, so on glass it has to darken to the body ink: the one surface in the product that cannot use a house colour.

Shortcut

Post to social media
Video script templates

Channel health

Retention is dragging this down most

FDCBAA+

3 of 4 measured.

Since you last looked

72+22

Packaging moved from 50 to 72.

My recommendation is now E, the glass, with C's footer rule. D failed on contact: half a degree of lean survives three cards in a mock and reads as a broken grid across a real row of six, and the grain looks like dirt rather than paper at 46px. A and B remain the safe fallbacks. E is the only one that looks like a decision rather than a default, but it is also the only one that changes the page and not just the card, so it should be chosen with the three costs open: the dashboard needs a gradient field behind the content, glass belongs on large panels rather than 46px rows because each one is a live blur, and the eyebrow lavender fails contrast on a translucent surface, so on glass it darkens to the body ink.