Button Studio — A Playful Button System
A warm, playful pastel button system on cream paper: every variant, size and state as soft, fully-rounded buttons with a springy press, sky + coral accents and Poppins, framed as one Button Studio canvas.
Summary
A warm, playful button-system showcase page rendered in soft pastels on cream paper, framed as a single 'Button Studio' canvas. A blurred sticky cream nav (a sky-to-coral gradient rounded logo tile with a cursor-click icon, a 'ButtonStudio' wordmark, four anchor links with an animated underline, a ghost 'Docs' button and a small solid sky 'Copy prompt' button) sits over a full-bleed hero with a faint dotted-grid backdrop and three big blurred floating color blobs (sky, coral, amber). The hero centers an eyebrow pill ('A playful, rounded button system'), a huge extrabold headline 'Buttons that feel delightful to press.' where 'delightful' is a sky-to-coral gradient word underlined by a hand-drawn coral squiggle SVG, a muted subhead, a candy-gradient + outline CTA pair, and a rounded white palette card showing four color chips (cream / sky / coral / ink) and a 'Cream / Sky / Coral / Poppins' caption. The body is a showcase canvas of rounded white demo cards with an icon-tile + numbered title + count-pill header: 01 Variants (a wrap of six labelled buttons: Primary sky, Accent coral, Soft tint, Outline, Ghost, Candy gradient), then a two-up row of 02 Sizes (sm/md/lg) and 03 States (default, pressed-pushed-in, loading spinner, disabled), then 04 Icon & Group (leading icon, trailing icon, icon-only circle, coral FAB, and a pill segmented Day/Week/Month group). It closes on a full-bleed candy-gradient CTA band (sky-700 to rose-600, white blobs) with a white 'Copy the prompt' button and a dark-ink 'See it live' button, then a minimal cream footer with the brand cluster and three social icons.
Style
A soft, friendly, 'bouncy' aesthetic, all pastel and rounded, that makes buttons feel delightful to press. The palette is warm cream paper with two playful accents, sky blue and coral pink, plus a soft ink for text, and every interactive element is fully pill-shaped (border-radius 9999px) with springy motion. Type is Poppins throughout (extrabold for headlines, semibold for buttons and labels), tight tracking on display sizes. Surfaces are airy: a faint dotted radial-dot grid backdrop, big blurred floating color blobs animating gently behind the hero and CTA, white cards floating on the cream with soft long shadows and 1px ink/5 ring borders, rounded-[2rem] corners on cards and rounded-3xl on the palette chip card. The signature feel is the button motion, a springy cubic-bezier(.34,1.56,.64,1) transform on hover that lifts the button 3px (the candy variant also rotates -1deg), an active squish to scale(.97), and a static 'pressed' treatment that pushes the button in with an inset shadow. Accents are used decoratively in their bright form (sky #38bdf8, coral #fb7185) but every actual filled button and text-on-color uses a DARKENED accessible form (sky-700 #0369a1, rose-600 #e11d48) so white text always clears WCAG-AA. Hand-drawn touches (a coral squiggle underline SVG under the gradient hero word) and emoji-light iconography keep it warm and human, never corporate.
Layout & Structure
A single full-bleed marketing-style canvas in a centered max-w-6xl column with px-5 -> sm:px-8 gutters. Top to bottom: a sticky blurred cream nav (h-16), a full-bleed hero (dotted-grid + three floating blobs, centered text block, CTA pair, palette chip card), a showcase canvas section of rounded white demo cards (a section heading row, then 01 Variants card, then a lg:grid-cols-2 two-up row of 02 Sizes + 03 States, then 04 Icon & Group card), a full-bleed candy-gradient CTA band, and a minimal cream footer. The hero headline scales 4xl -> sm:6xl; the nav center links and the Docs button hide on small screens; the two-up Sizes/States row stacks to one column below lg; button groups wrap with gap-x/gap-y; the footer and CTA reflow from row to column on mobile.
Sticky blurred nav
Hero
Showcase section heading
Demo card pattern
01 Variants card
02 Sizes + 03 States two-up row
04 Icon & Group card
Candy-gradient CTA band
Footer
Special Notes
A warm, playful, fully ROUNDED (border-radius 9999px) pastel button system on cream paper, the whole personality is bounce + roundness + soft color. Exact palette via Tailwind config: cream #fdf9f3 (page bg), sky #38bdf8 (DECORATIVE accent only, blobs/rings/underline/selection), skyfill #0369a1 (sky-700, accessible fill for sky buttons + brand text, white text 5.4:1), coral #fb7185 (decorative accent only), coralfill #e11d48 (rose-600, accessible coral fill, white text 4.7:1), ink #3b3a4a (text), mute #6b6a78 (muted body, >=4.5:1). Soft variant = bg #e0f4fe / #075985 text; disabled = bg #e3ded5 / #5c5950 text. Candy gradient = 120deg linear-gradient(#0369a1, #e11d48) (both stops darkened so white text clears AA). Custom shadows: card 0 24px 60px -28px rgba(59,58,74,0.28), soft 0 10px 30px -12px rgba(56,189,248,0.35), coralsoft 0 10px 30px -12px rgba(251,113,133,0.40). Font: Poppins ONLY (Google Fonts 400;500;600;700;800), extrabold headlines + tracking-tight, semibold buttons/labels. Signature motion: springy transition cubic-bezier(.34,1.56,.64,1), hover translateY(-3px) (candy also rotate(-1deg)), active scale(.97); static .b-pressed pushes in with an inset shadow; .spin loader at .8s. Icons are Iconify ph (phosphor) loaded from code.iconify.design (cursor-click-bold/-fill, sparkle-fill, palette-fill, stack-fill, arrows-out-line-vertical-bold, pulse-bold, hand-pointing-fill, circle-notch-bold, squares-four-fill, download-simple-bold, arrow-right-bold, heart-fill, plus-bold, copy-bold, arrow-up-right-bold, github/twitter/figma-logo-fill). To transfer the STYLE keep the cream+sky+coral pastel palette with darkened accent FILLS for contrast, the full-pill radius, Poppins, the springy bounce/lift/squish motion, the dotted-grid + floating-blob backdrop, the white rounded-[2rem] shadow-card tiles, and the hand-drawn squiggle underline. To transfer the LAYOUT keep the single marketing canvas (sticky blurred nav -> blobby dotted hero with palette chip card -> showcase cards 01 Variants / 02 Sizes + 03 States two-up / 04 Icon & Group, each with an icon-tile + numbered title + count-pill header -> candy-gradient CTA band -> minimal footer) and the labelled 'button above a caption' demo grids. No em-dashes in any copy.