UI kit

Components — from the shared package

Values lifted from packages/ui tokens: 12px buttons at 36px, 16px cards, 20px pills, purple-tinted shadows, one focus ring.

Type scale — Plus Jakarta Sans, one family

Display · 30/800 tabular342
Headline · 24/800Circle console
Title · 18/700Ripple started
Body · 14/400Log acts of kindness and watch them ripple.
Label · 11/600 trackedRipple Score

Color — brand hues + AA-safe deeps on cool neutrals

{{ s.n }}

{{ s.c }}

The tri-color gradient: one appearance per surface — the Inspired CTA, the score ring, the sign-in waterline. Never a background.

Buttons — 36px, 12px radius

Hover darkens one step (never lightens); press scales to 0.97. The focus ring is one system-wide utility: 2px page-color gap + 3px full-strength ring.

Status vocabulary — one shared mapping

Active Approved Sent Pending Scheduled Suspended Expired Redeemed Completed

Always ink on a tint + a status dot — the hue never carries meaning alone, and small text never sets in amber. "Pending" looks the same in every queue.

Inputs — muted fill, real labels

Interaction pills — the four, and only four

♥ Love · 12 + Follow ⛉ Saved ✦ I was inspired

Love pops with a spring and fills pink; Inspired ripples outward. These two moments are where the brand allows delight — no confetti anywhere.

AR CM FG Avatars: initials on a brand hue; ring = tappable identity

← Back to Kits