Skip to main content
A Design Story · May 2026

Six ways to think about
a task card.

The default kanban card was carrying too many fights at once — six color signals competing for attention. We tore it down and rebuilt around one rule: the title reads first; color is signal. Then we built six full styles around that rule and put a picker into onboarding.

Try Gryphin Read the changelog
What was wrong
  • • Two coloured label chips on top.
  • • A third coloured type chip on the bottom.
  • • A pink branded avatar competing with both.
  • • An emoji prefix in every title.
  • • A glow ring fighting all of that for attention.
  • Result: six color signals, nothing reads first.
What we shipped
  • • One eyebrow label. One title. One footer row.
  • • Color reserved for state — overdue, blocked, attention.
  • • Brand orange and blue used purposefully: rails, dots, gates, gradients.
  • • Six distinct visual paradigms — pick the one that fits.
  • • Per-board choice, with a picker in onboarding.
  • Result: cards that read like a product worth paying for.
Principles

The rules we wrote first.

Title is the hero
One thing reads first. Everything else recedes: smaller, lighter, muted.
Color is signal, not decoration
Reserved for state that matters — overdue, blocked, attention. Default cards are quiet.
Progressive disclosure
Footer rows only render when there's something to communicate. Empty meta is invisible meta.
Type, not chrome
Hierarchy comes from weight, size, and tracking — not chips, borders, or coloured backgrounds.
One label, never three
Multiple labels on a single card create visual chaos. Pick the primary one.
Whitespace is the luxury good
Generous internal padding and tight line-height. Cards should feel like paper, not forms.
The Lineup

Six card styles. One rule.

Each style is a different mental model for what a task card is — a banking statement, a physical object, an airline ticket, a document row, a product surface.

01

Status Strip

Default
Brand-rail clean

Orange-to-deep-orange brand rail, small-caps eyebrow label, title-led hierarchy.

Brand color use:#FF5C00
Planning
Plan with start and due dates
Due May 14
02

Minimal

Things-3 calm

Almost nothing. A label-color dot, a title, one subtitle row when it matters.

Brand color use:Restrained — neutral palette
!!Plan with start and due dates
Today
03

Tactile

Skeuomorphic depth

Layered shadow stack and a raised orange pin head. Reads like paper you could pick up.

Brand color use:#FF5C00
Planning
Plan with start and due dates
Due May 14
04

Notion

Document row

Page icon, title, one-line description preview, brand-tinted date pill.

Brand color use:Restrained — neutral palette
Planning
Plan with start and due dates
Cal and Gantt auto-pick up changes.
Due May 14
05

Boarding Pass

Airline ticket

Brand-blue gate-code stub, perforated edge, mono DUE / BY meta. Reads like a ticket — perfect for milestones and sprint cards.

Brand color use:#3A6CA8
MAY
14
PLN
Gate
Planning
Plan with start and due dates
By
JO
06

Iridescent

Premium edge

Deep-ink interior wrapped in a conic orange-to-blue brand-gradient border that rotates on hover.

Brand color use:#FF5C00+#3A6CA8
Planning
Plan with start and due dates
Due May 14
07

Brutalist

Swiss poster

Hard 2px black border, hard orange offset shadow, slab uppercase title. Unmissable, opinionated, works over any background.

Brand color use:#FF5C00
Planning
Plan with start and due dates
MAY 14JO
Building in public — what we cut

We prototyped seven. We shipped six.

Aurora — a frosted-glass card with orange and blue brand-color aurora bleeds — looked beautiful over our marketing photos. Then we put it on a real board with a solid orange background and the title became unreadable. We killed it. Boards that had already picked Aurora fall forward to Status Strip automatically.

Editorial — a magazine-column treatment with a serif title — was prototyped, replaced by Boarding Pass because its airline-ticket stub and monospaced meta felt stronger for sprint and milestone cards.

Honest history is what builds-in-public is supposed to mean.

Performance

Polished doesn't have to be slow.

React.memo + GPU
Every shell is memoized and runs on a GPU layer (transform-gpu).
CSS variable animation
Iridescent's rotating gradient border uses @property — pure CSS, no JS, no jank.
Shared atoms
Cover image, avatar stack, featured link are deduped across every shell.

Pick your style. Start your board.

Every new Gryphin account walks through the card-style picker before landing on a welcome board. Each board can have its own — switch anytime in board settings.

Join the beta See how we build