Pillbox · A Gradient Button System That Pops

Summary

A complete pill-button design system on one vibrant reference page: two gradient color stories (teal->lime #14b8a6->#a3e635 and coral->amber #ff6b4a->#ffb020) rendered across four variants (fill, gradient outline, soft, and icon-only), four sizes (XS 34px, SM 40px, MD 48px, LG 58px), and six interaction states (default, hover, active, focus, disabled, loading). The page opens with a sticky frosted nav and a dotted-grid hero ('Buttons that glow, in every state.') beside a live-preview spec card, then walks five labeled sections: 01 Variants (two gradient columns each showing fill/outline/soft/icon), 02 Sizes (a four-row size scale per gradient), 03 Interaction states (a six-state grid per variant), 04 Icons & composition (leading/trailing/icon-only/count/split/full-width), and 05 Tokens (the two gradient stops + an ink scale, closed by a gradient-bordered dark CTA strip). Built on a light #f7f8fa canvas with near-black ink text, fully-rounded 9999px pills, Plus Jakarta Sans, and Iconify Phosphor icons; dense state/size tables scroll horizontally on mobile rather than clip. The library value is the transferable two-gradient pill token system plus the section-by-section state/size documentation layout.

Style

A vibrant, playful-but-polished modern-SaaS aesthetic built around fully-rounded pill buttons and two punchy linear gradients. The canvas is light #f7f8fa with near-black ink text (#141823) and a graphite/slate ink scale for secondary copy (#4c5466, #6b7384, #9aa3b4). Two gradient 'color stories' carry every accent: teal->lime (linear-gradient(100deg, #14b8a6 0%, #5fce8f 48%, #a3e635 100%)) and coral->amber (linear-gradient(100deg, #ff6b4a 0%, #ff8f3a 50%, #ffb020 100%)). Buttons are pills (border-radius 9999px), 700 weight, with a 140% background-size that slides on hover (background-position 0%->100%) for a living-gradient shimmer, plus layered depth (a colored drop shadow 0 8px 22px -10px that deepens on hover, and an inset 0 1px 0 rgba(255,255,255,.35) top highlight); active presses inward (inset shadow + translateY 1px). Surfaces are airy white spec cards (.spec = #fff, 1px #e6e9f0 border, 24px radius, a soft 0 18px 40px -28px shadow). The mood is energetic and demo-forward: a faint 22px radial dotted hero backdrop, tiny uppercase tracked labels (.lbl 11px/700/.14em), monospace code pills for hex tokens, and dark gradient-clipped headline words. Dark moments (the CTA strip + token footer) use ink-950 #0a0d15. Typography is Plus Jakarta Sans throughout (400/500/600/700/800), extrabold for headlines.

Layout & Structure

A single-column documentation page: a `sticky top-0 z-50` frosted nav (`bg-[#f7f8fa]/80 backdrop-blur-md` over `border-b border-ink-200/70`) with a gradient pill-logo lockup ('Pillbox' + a v1.0 chip), five anchor links (Variants/Sizes/States/Icons/Tokens), a Docs link and a teal-gradient 'Get the kit' button; a full-bleed `.dotgrid` hero of a two-column `lg:grid-cols-[1.05fr_.95fr]` layout (left: a dual-swatch badge, the extrabold gradient-clipped headline 'Buttons that glow, in every state.', a subhead, two CTAs, and a two-item checklist; right: a `.spec` live-preview card showing six buttons + an icon toolbar + a loading button); then full-width sections each opened by a `.lbl` numbered eyebrow + extrabold H2 + slate subhead: 01 Variants (a 2-col grid of two gradient columns, each Fill/Outline/Soft/Icon), 02 Sizes (a `.spec` table of four size rows x two gradient columns, horizontally scrollable), 03 Interaction states (a `.spec` table of four variant rows x six state columns Default/Hover/Active/Focus/Disabled/Loading, horizontally scrollable), 04 Icons & composition (a 3-col grid of six `.spec` cards: leading / trailing / icon-only / count / split-group / full-width), and 05 Tokens (a 3-col grid of two gradient swatch cards + an ink-scale card, then a gradient-bordered dark CTA strip); closed by a light footer with the pill-logo lockup and three anchor links. Sections alternate white and #f7f8fa backgrounds and are separated by `border-ink-200/70` hairlines.

Sticky frosted nav

Dotted-grid hero + live-preview spec card

Section 01 — variants (two gradient columns)

Section 02 — sizes (scrollable size scale)

Section 03 — six interaction states grid

Section 04 — icons & composition (six cards)

Section 05 — tokens + gradient-bordered dark CTA + footer

Special Notes

Exact tokens (Tailwind config). Ink scale: 50 #f7f8fa, 100 #eef0f4, 200 #dfe3ea, 300 #c4cad6, 400 #9aa3b4, 500 #6b7384, 600 #4c5466, 700 #363d4d, 800 #222836, 900 #141823, 950 #0a0d15. Accents: teal 400 #2dd4bf / 500 #14b8a6 / 600 #0d9488; lime 400 #a3e635 / 500 #84cc16; coral 400 #ff8a6b / 500 #ff6b4a / 600 #f0502d; amber 400 #ffc24a / 500 #ffb020. Gradients: --g-tl linear-gradient(100deg,#14b8a6 0%,#5fce8f 48%,#a3e635 100%) (hover --g-tl-hover #0d9488/#4cc485/#92d822, active --g-tl-active #0a7d72/#3aac6f/#7bbd16); --g-ca linear-gradient(100deg,#ff6b4a 0%,#ff8f3a 50%,#ffb020 100%) (hover --g-ca-hover #f0502d/#ff7d23/#f59e0a, active --g-ca-active #db4321/#ef6f17/#de8b00). Focus ring --ring: 0 0 0 3px #f7f8fa, 0 0 0 5px rgba(20,184,166,.55) (coral variants 0 0 0 5px rgba(255,107,74,.55)). Fill text colors: teal #06241f, coral #3a1605; outline core text teal #0a7d72, coral #c63d1d; soft bg/text teal #e8faf5/#0a7d72, coral #fff0eb/#c63d1d. Font: Plus Jakarta Sans (Google Fonts, weights 400/500/600/700/800) as the `sans` family with system fallbacks, antialiased. Icons: Iconify Phosphor (ph:pill-fill, ph:arrow-right-bold, ph:sparkle-fill, ph:check-circle-fill, ph:plus-bold, ph:pencil-simple-bold, ph:gear-six-fill, ph:heart-fill, ph:bookmark-simple-bold, ph:share-network-bold, ph:download-simple-bold, ph:upload-simple-bold, ph:caret-down-bold, ph:play-fill, ph:lightning-fill, ph:dots-three-bold, ph:trash-bold, ph:chat-circle-fill, ph:credit-card-fill). Pill tokens: border-radius 9999px, 700 weight, border 1.6px, transition background-position .35s + box-shadow .22s + transform .12s. Sizes: XS 34px/px-16/12.5px, SM 40px/px-20/13.5px, MD 48px/px-26/15px, LG 58px/px-34/16.5px; icon variants are equal-width squares at 40/48/58px. Treatments: FILL (.g-tl/.g-ca) gradient bg with background-size 140% 100% that slides on hover + colored drop shadow + inset white highlight; OUTLINE (.o-tl/.o-ca) a 1.6px gradient ring via padding:1.6px + an inner white .core pill; SOFT (.s-tl/.s-ca) tinted bg + deep accent text; ICON (.btn-icon-sm/md/lg) square. Forced-state helpers .is-hover/.is-active/.is-focus/.is-disabled/.is-loading mirror the real pseudo-states so the static grid shows all six. .spec card = #fff/1px #e6e9f0/24px radius/0 18px 40px -28px shadow; .lbl 11px/700/uppercase/.14em #4c5466; .statelbl 11px/600/.04em #4c5466; .codepill ui-monospace 11.5px; .swatch 14px round; .dotgrid radial-gradient(rgba(20,24,35,.06) 1px) 22px. Layout: a sticky top-0 z-50 frosted nav (bg-[#f7f8fa]/80 backdrop-blur-md), a .dotgrid hero with a live-preview spec card, a centered mx-auto max-w-[1180px] px-6 main of five sections (01 Variants two-column, 02 Sizes scroll table, 03 States six-state scroll table, 04 Icons six cards, 05 Tokens swatch cards + gradient-bordered ink-950 CTA), and a light footer. Dense Sizes/States tables scroll horizontally (.scroll-x + min-width grids) instead of clipping at 390px; md grids stack to one column and the nav links + Docs link hide. The prompt-library value is the transferable two-gradient pill token system plus the section-by-section state/size documentation layout for any button set.