Marketing & engagement

When to use

Hero/CTA: top-of-page block on any marketing or landing page where the goal is "do this one thing". Referral: when growth benefits from existing users inviting others (paid plans, workspaces, social products). Achievements: when ongoing engagement needs a non-monetary reward — streaks, completion badges, level-ups.

Hero — title + subtitle + CTA

The minimal hero. Centered display headline, subtitle, primary CTA + secondary "Learn more" ghost. No supporting image — works when the headline carries the weight.

Hero — split with visual

Two-column hero. Headline + subtitle + CTA on the left, supporting visual on the right. The visual is a placeholder card here; in production it's a screenshot, animation, or video poster.

Referral — share link

Read-only input prefilled with the user's referral URL + Copy button. Below it: per-channel share buttons (email, X, LinkedIn). Reward copy describes what referrer + referee get ("$10 credit each").

Referral — status

The user's referral history. Stats grid (referrals sent / converted / credits earned), then a list of per-referral rows with avatar + status tag. Pending = invite sent, no signup; Joined = signed up, no verify; Verified = credit earned.

Achievements — earned badges

Grid of earned + locked badges. Each card shows the icon, name, description, and earn-date. Earned badges carry the date as a success tag; locked badges show progress as a muted tag and live in a ghost card so they read as quieter without raw opacity.

Achievements — unlock moment

The just-earned achievement card — usually appears as a toast or modal moment. Big icon, "You earned…" header, description, and a CTA to share or keep going. This is the dopamine hit; don't make it dismissive.

Composition rules

• Hero CTA is one primary action, not three — "Get started" + "See demos" (ghost) is the maximum. Three primaries means none — the user reads ambivalence.
• Hero kicker tag is for new/version/audience badges — "v0.0.27 out today" or "For teams" reads as a slim eyebrow above the headline. Skip the tag if there's no signal.
• Referral copy leads with the symmetrical reward — "Both get $10" beats "Get $10 when they sign up". Symmetry signals trust; one-sided rewards trigger spam reflex.
• Referral statuses are 3-state — Pending (link sent, no signup) · Joined (signed up, not verified) · Verified (credit earned). Anything else is collapsing distinct states into noise.
• Achievement badges show locked + earned together — locked badges with progress hints ("7 of 10") drive engagement; hiding them removes the goalpost. Use variant="ghost" on locked cards + color="subtle" on the icon — communicates state without raw opacity hacks.
• Don't auto-advance the unlock modal — the moment is the reward; let the user dismiss when ready. Auto-dismiss erases the dopamine hit.
• Streaks reset honestly — "You broke your 7-day streak" is honest; "You earned a 6-day streak" is patronizing. The product respects the user when it doesn't hide the loss.
• Achievements are private by default, shareable by choice — auto-posting "Kim earned 7-day streak" to a feed feels like surveillance. The Share button is the consent.

See also

• card-ui · button-ui · tag-ui — primitives.
• stat-ui — referral metrics.
• field-ui · input-ui — referral link field.
• system-banners — adjacent (announcement banners are sibling marketing-promo surfaces).
• profile-public-and-verification — adjacent (achievements often surface on the public profile).