Solo Creator — A Premium Link-in-Bio Experience

As creators scale, the standard tools become the constraint. A rigid vertical list can't sell a digital product, pitch a brand partnership, or capture an email — it can only point elsewhere and hope.

This is a link-in-bio built as a micro-site: a bento hub, a media kit, and a store, designed so a creator's page does the selling instead of delegating it.

A list gives every link the same weight. A bento grid doesn't. Cards come in 1×1, 1×2 and 2×2, so a newly launched product takes a large square while social links sit small — the layout is the hierarchy.

Desktop runs a four-column grid on a 1120px canvas; tablet drops to two and cards resize rather than reflow blindly; mobile becomes a single scrollable column.

Every colour, radius, gap and pad resolves through one variable collection with a light and a dark mode, so the whole site re-themes from a single switch rather than by hand.

Clash Display carries the punchy display type — Gabarito stands in inside Figma, where Clash isn't available — and Manrope keeps body copy legible on a phone. Deep onyx #0D0D0D against soft zinc #F4F4F5 for the two modes, with electric orange #FF4F00 and digital purple #7B61FF reserved for conversion. Cards are a 5%-white fill under a 12px blur — glassmorphism that only reads in dark mode — with a 1px translucent border, 24px corners, and a full 100px pill on every primary CTA.

Atoms before molecules: the pill, tag chip, social pill and profile header were built and bound to tokens before anything composed them. Eleven components — plus a site header and footer — carry sixty-nine variants between them. The BentoCard alone ships in fifteen: every 1×1 / 1×2 / 2×2 size across a rest and a hover state. Each SocialPill fills with its own network's brand colour on hover; the ProductCard carries image, title, price, checkout and a category tag.

The header and footer are placed as live instances, so a single edit updates every page at once.

Two CMS collections carry everything that changes: Digital Products (title, price, cover, description, checkout URL, category) and Brand Partnerships for the media kit (brand, logo, deliverable, reach). The creator updates content without ever opening the canvas.

On load, the bento grid fades up in a staggered spring, 0.05s apart per card. Cards lift to 1.02 on hover while the artwork inside rotates -2° and scales 1.05, so the card gains depth rather than just moving. On the media kit, the metric numbers scale and gain opacity as they scroll into view. Every timing is a real token — an ease-out and an ease-back curve, 80ms tap to 500ms flip — not a default.

7 screens across three breakpoints · 11 components — plus a site header and footer — carrying 69 variants · 29 variables resolved in light and dark modes · 11 text styles and four elevation styles · a walkable prototype with 68 reactions wired on the system's own motion curves.