Collections

Design sheets

In-progress UI explorations for the Evolved page.

Designer's new solid-fill featured card

The designer dropped gradients for solid fills, added a thick stroke "line" pattern behind the content, and merged LABEL + TITLE + DESCRIPTION into a single sentence with one highlighted word doing the work of the old label.

ADesigner originals
Three mockups from the designer, as-is. Text in these is converted to paths so they can't be edited from the app.
dark banner
blue banner
purple banner

Dimensions: 438×181 (~2.4:1). rx=18. Our current card is 2.1:1 — close enough that we can adopt the new aspect without rethinking layout.

BParameterized React version
Solid bg + inline SVG line pattern + emoji + a sentence with one highlighted accent word.

The reactions people send every day.

😂

Onyx

#0F1012·#85FC64

Every emoji for the workday chat.

💻

Electric

#2B46E8·#85FC64

Birthdays, big wins, and reasons to celebrate.

🪩

Ultraviolet

#861AF2·#85FC64
CCurrent vs new
Same copy in both styles so the difference is structural, not content.

Current — gradient + label

😂

REACTION PACK

React Instantly

The faces and reactions people send every day.

New — solid + highlighted word

The reactions people send every day.

😂
DHow we'd change the code
Concrete steps if we commit to this direction.

Data shape: replace label + title + desc with a single copy field. Use *word* markdown-ish syntax to mark the highlighted word; renderer splits on it. Keep existing fields as a fallback so we can transition without losing data.

Background: replace the Tailwind gradient bg string with { bg: string, lineColor: string, accent: string }. Expose the 3 palettes above as named presets (Onyx / Electric / Ultraviolet) plus custom.

Decorative pattern: ship one reusable LinePattern SVG. Later we can add a handful of shape-themes (waves, stars, arrows) selectable per card.

PNG render pipeline: no change. renderFeaturedCardToPng already snapshots the DOM — swap the inner component and it keeps working.