Gryphin Logo
Gryphin
Back to changelog
Released May 11, 2026

Card styles — seven new looks, picked during onboarding

The default kanban card got a serious upgrade. The old card was carrying too many fights at once — colored chips on top, a colored type chip on the bottom, a pink avatar, an emoji prefix in the title — six color signals competing for attention. We tore it down and rebuilt around one rule: the title reads first, color is reserved for signal (overdue, blocked, attention). Then we built seven full card styles around that rule and put a picker into onboarding so new users choose the look they want before they land on their welcome board. Existing boards are untouched — they keep the original look until their owner opts in via Board Settings → Cards → Style.

What changed

  • NewSeven new card styles, each a different mental model: Status Strip (default, brand rail), Minimal (Things-3 calm), Tactile (skeuomorphic depth), Notion (document row), Boarding Pass (airline ticket with dated stub + gate code), Iridescent (premium conic-gradient border), and Brutalist (Swiss poster with hard black border + orange offset shadow).
  • NewOnboarding step at /onboarding/card-style — visual picker with live previews, runs once after signup before your welcome board renders.
  • NewPer-board card style: each board can have its own look. Switch anytime in Board Settings → Cards → Style.
  • ImprovedTitle is the hero across every style: weight 500–600, tracking −0.005em, line-height 1.32–1.38. Footer rows only render when there is something to say.
  • ImprovedBrand colors used purposefully: orange rails, gradient dots, conic borders, aurora bleeds, tinted date pills — never as decoration.
  • ImprovedAll styles handle every state: cover image, completed (strikethrough), overdue (red), today (amber), blocked, glowing, dragging, plus full subtask/comment/attachment/time-tracker meta.
  • FasterEvery shell is React.memo + transform-gpu. Iridescent uses @property + CSS variable animation — pure GPU, no JS.
  • FasterShared cover, avatar-stack, featured-link, priority-dot, and type-icon atoms dedupe across all seven shells; tree-shakable per-style imports.
  • ImprovedEvery card now surfaces five glanceable signals: title (always hero), type icon, label, priority dot (with urgent halo), due date with state coloring, and assignee avatar stack. Each style expresses them differently; all six are answerable in under a second.
  • InfraNew boards default to Status Strip. Existing boards default to Classic (the original) so nothing changes for them — feature is opt-in for legacy boards.
  • InfraStyle choice syncs across collaborators in real-time via the existing board-update channel.
The Lineup · Seven Styles

One rule. Seven expressions.

Each card style is a different mental model — a banking statement, a physical object, an airline ticket, a document row, a premium product surface, a Swiss poster — all running on the same data, all carrying the same five glanceable signals.

01Default
Planning
Plan with start and due dates
Due May 14
Status Strip
Brand-rail clean
02
Plan with start and due dates
Today
Minimal
Things-3 calm
03
Planning
Plan with start and due dates
Due May 14
Tactile
Skeuomorphic depth
04
Plan with start and due dates
Cal and Gantt views auto-pick up changes from the start and due dates.
Planning
Due May 14
Notion
Document row
05
MAY
14
PLN
Gate
Planning
Plan with start and due dates
By
JO
Boarding Pass
Airline ticket
06
Planning
Plan with start and due dates
Due May 14
Iridescent
Premium edge
07
Planning
Plan with start and due dates
MAY 14JO
Brutalist
Swiss poster
Before

Six color signals fighting for attention.

  • • Two colored label chips on top
  • • A third colored type chip on the bottom
  • • A branded pink avatar competing with both
  • • An emoji prefix in every title
  • • A glow ring fighting all of that for attention
After

One title. Five quiet signals. A picker.

  • • One eyebrow label. One title. One footer row.
  • • Color reserved for state — overdue, blocked, urgent
  • • Brand orange + blue used purposefully
  • • Seven distinct paradigms — pick what fits
  • • Per-board choice, picker in onboarding
The Five Glanceable Signals

Every card surfaces these. Every style expresses them differently.

Title
The hero in every style — weight, size, and tracking do the work, not chrome.
Type
A small monochrome glyph that says feature, bug, design, chore, doc — at a glance.
Label
Primary tag as eyebrow, dot, breadcrumb, or chip — depending on the style's voice.
Priority
Color-coded dot. Urgent gets a soft halo so it scans first across a busy column.
Due date
Tabular numerics; red for overdue, amber for today, muted otherwise.
Assignee
Avatar stack, ring color matched to the card surface, +N overflow.
Brand orange · #FF5C00

Identity + signal

Left rail (Status Strip), raised pin (Tactile), section heading (Boarding Pass), offset shadow (Brutalist), priority halo (everywhere).

Brand blue · #3A6CA8

Wayfinding + assignment

Boarding-pass gate stub, gradient avatars (Tactile), featured-link color, conic edge gradient (Iridescent).

Building in public — what we cut

We prototyped nine. We shipped seven.

AuroraPrototyped → cut

Frosted-glass with orange + blue aurora bleeds looked beautiful over photo backgrounds; titles became unreadable over solid brand-color boards. Boards that picked it now fall forward to Status Strip automatically.

EditorialPrototyped → replaced

Magazine-column treatment with a serif title; replaced by Boarding Pass because its dated stub + monospaced meta felt stronger for sprint and milestone cards.

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

Want the full story?

The design story behind this release.

Principles, every style with a live preview, brand-color attribution, performance notes, and the full honest history.

Read the design story

More on the way. See what's next on the roadmap.

See the roadmap