UI COMPONENTS

The building blocks

Buttons

DEFAULTHOVERLOADINGDISABLEDPrimarySecondary (ink)OutlineAccent (Pro)——Destructive

SIZES · SHAPES · ICONText link

Inputs

Default

Helper text sits here.

Focus

Cobalt border + 4 px ring.

Enter a full email, like ada@lumen.co

Disabled

Textarea + counter46 / 300

Select

Password

Badges, meters & avatars

FitsOverNear limitSCANNABLEPRONEW

XIGinYTTTTHPlatform chips — text, never logos

96/160

172/160

LBAOPSInitials avatars · 48 / 40 / 32

Cards & tiles

TILE · INK

Hero moment

TILE · COBALT

Feature tile

TILE · APRICOT 100

Helpful info

CARD · SURFACE + shadow-md

Content card

Template card colors rotate Cobalt → Apricot 100 → Ink → Cobalt 100 → Apricot 400. The preview inside tilts −2° to +2°.

FEEDBACK & STATES

Every state, covered

Try it:

Toasts

Desktop: bottom-right, 24 px inset · Mobile: bottom-center, full width − 32 · Auto-dismiss 4 s (errors stay until closed) · Max 3 stacked

Copied to clipboardGo make an entrance.

Bio deleted

Saved to My biosFind it any time under My bios.View

2 generations left this monthResets on the 1st of the month, or go unlimited.Go Pro

Couldn’t write your biosThat didn’t work. Your inputs are safe.

Banners & inline errors

You’ve used all 5 free bios. Upgrade to keep writing — your saved bios stay put.See plans

You’re offline. Edits are kept on this device and will sync when you reconnect.

Two things need a look before we can generate

Tell us what you do — at least a few words
Pick a role so the tone fits

Payment received — welcome to Pro.

Modals

Backdrop rgba(17,17,17,0.45) + 4 px blur · radius 28 · max-width 480 (paywall 440, share 500, shortcuts 680) · Esc and backdrop click close · focus trapped, returns to trigger · mobile: bottom sheet

Open the real one:

Delete this bio?

“Founder & CEO @Lumen | Payroll for…” and its 6 platform versions will be removed. You can undo for a few seconds.

PRO

You’re on a roll

You’ve hit this month’s free limit. Pro keeps the bios coming.

Unlimited generations & saved biosBrand voice that learns how you writeAll premium templatesUpgrade — $12/mo

Export bio

X / Twitter110/160LinkedIn110/220TikTok58/80

MOBILE · BOTTOM SHEET

Leave without saving?

Your edits to The Pipe Stack will be lost.

LOADING · AI GENERATION (≈ 3–8 s)Writing your bios…

Reading your story
Finding your strongest proof point
Fitting it to X’s 160 characters

LOADING · TEMPLATE GRID SKELETON (shimmer 1.2 s)

Empty states

No bios yet

Bios you save land here, ready to copy for any platform.

Browse templates Write my first bio

No match for “podcast host”

Try a broader word, or let AI write a bio for exactly that.

Generate instead

APP SHELL

Logged-in headers

DESKTOP · FREE · 3 UNREAD

Go Pro

DESKTOP · FREE · ALL READ