Pressable — A 3D Button System (cobalt)

Summary

A tactile 3D 'pushable' BUTTON SYSTEM showcase page on a light off-white base (#f6f7fb), framed as a single 'Pressable' canvas. The signature is a button built from three stacked layers, a blurred ground shadow, a darker static bottom edge, and a raised gradient front that visibly compresses when pressed, so every button reads as a physical key you can push. A blurred sticky nav (a cobalt gradient rounded-orb logo with a cursor-click icon, a 'Pressable.' wordmark, four anchor links, a 'Docs' link, and a small cobalt 'Copy prompt' button) sits over a full-bleed hero with a faint dotted-grid backdrop and two big blurred floating color blobs (cobalt + amber). The hero centers an eyebrow pill ('Prompt Library · Button Design'), a huge black headline 'Buttons that push back.' where 'push back.' carries an amber highlighter swipe, a muted subhead, a 3D cobalt 'Press me' + light 'See it move' CTA pair, and a hint line. The body is a stack of white rounded showcase cards, each with a numbered icon-tile header: 01 Variants (six tactile fills, cobalt / amber / light / ink / ghost / icon-only), 02 Sizes (sm/md/lg + full-width block), 03 States (rest, hover-lift, pressed-compress, loading spinner, disabled-flat), and a two-column 04 Anatomy row that explodes the three layers (front / edge / shadow) beside a 'The prompt' card with a 'Remix this prompt' button. It closes on a minimal white footer with the brand cluster and four anchor links.

Style

A clean, modern, tactile aesthetic where the whole personality is physical depth, every button is a 3D 'pushable' key that lifts on hover and compresses on press. The base is a soft off-white #f6f7fb with crisp near-black ink text (#0f1424) and a muted slate body color (#5b6178). The hero accent is a confident cobalt blue used as a 5-step gradient face, paired with a single warm amber as the secondary/attention color. Inter is the only typeface (weights 400-900), with black (900) tracking-tight display headlines, extrabold (800) section titles, and bold (700) button labels. Surfaces are airy and friendly: a faint cobalt radial dot-grid backdrop behind the hero, two big blurred floating color orbs (cobalt-200/40 + amber-300/30), and white .swatch-card panels with rounded-[22px] corners, a 1px #eceef5 border, and a soft layered drop shadow (0 1px 2px rgba(15,20,36,.04), 0 12px 30px -18px rgba(15,20,36,.18)). The signature is the 3D button itself, three stacked absolutely-positioned layers (a blurred bottom shadow, a static darker 'edge' base, and a raised gradient 'front' that sits translateY(-5px) at rest), animated with a springy transform transition cubic-bezier(.3,.7,.4,1): hover lifts the front to -7px and drops the shadow, :active snaps the front to -2px in 34ms so it physically presses in. Iconography is Iconify ph (phosphor) glyphs. Nothing is flat, the depth, the gradient faces, and the press physics carry the identity.

Layout & Structure

A single full-bleed marketing-style canvas in a centered max-w-[1180px] column with px-6 gutters. Top to bottom: a sticky blurred nav (h-[68px]), a full-bleed dotted-grid hero with floating blobs (centered text block + 3D CTA pair + hint line), a main stack of white .swatch-card showcase sections spaced space-y-7 (01 Variants, 02 Sizes, 03 States, then a lg:grid-cols-5 04 Anatomy row split into a 3-col anatomy card + 2-col 'The prompt' card), and a minimal full-bleed white footer. The hero headline scales 44px -> sm:64px; nav center links and the 'Docs' link hide on small screens; the Variants grid is grid-cols-2 -> md:grid-cols-3; the States grid is grid-cols-2 -> lg:grid-cols-5; the Anatomy row stacks to one column below lg; footer reflows row -> column on mobile.

Sticky blurred nav

Hero

01 Variants card

02 Sizes card

03 States card

04 Anatomy + prompt two-column row

Footer

Special Notes

A tactile, modern 3D 'pushable' button SYSTEM on a light base, the whole personality is physical depth + press physics. Exact palette via Tailwind config: cobalt 50 #eef2ff / 100 #e0e7ff / 200 #c7d2fe / 300 #a5b4ff / 400 #7c8cff / 500 #4f6bff / 600 #1f4fff / 700 #1539d6 / 800 #142fa8 / 900 #162a82; amber 300 #ffd089 / 400 #ffb84d / 500 #ff9e2c / 600 #f5851f; ink #0f1424; body bg #f6f7fb; muted body text #5b6178. The 3D button is three stacked border-radius:14px layers, .pb__shadow (rgba(15,20,36,.18), translateY(2px)) + .pb__edge (static darker left-to-right gradient base) + .pb__front (raised gradient face, translateY(-5px) at rest), all on a transform transition .6s cubic-bezier(.3,.7,.4,1). Press physics: hover front -> -7px + shadow -> 5px (fast .25s cubic-bezier(.3,.7,.4,1.5) + brightness 1.04); active front -> -2px + shadow -> 1px in .034s (snaps in); focus-visible double ring 0 0 0 3px #f6f7fb, 0 0 0 6px #4f6bff. Variant FRONT gradients (180deg): cobalt #3a64ff->#1f4fff white; amber #ffb04a->#ff9e2c on #3a1d00; light #ffffff->#f2f4fa on #1f2a44; ink #2a3450->#161c2e white; ghost flat #eef2ff on #1539d6 + inset ring #c7d2fe; disabled flat #e7e9f0/#a3a9bd, edge #d3d7e2, no shadow. EDGE gradients run to-left DARK/BASE/BASE/DARK (cobalt #0e2bb0/#1539d6, amber #c75e06/#e0700f, light #c2c8da/#d6dbe8, ink #050813/#11182e, ghost #b9c2ee/#cdd5f7). Sizes scale only .pb__front padding/font: sm 9px 18px /13px, md 13px 26px /15px, lg 18px 36px /17px. Loading .pb__spin = a .7s white-top spinner. Surfaces: .swatch-card = #fff, 1px #eceef5 border, radius 22px, box-shadow 0 1px 2px rgba(15,20,36,.04), 0 12px 30px -18px rgba(15,20,36,.18). Backdrop: .dotgrid radial-gradient(rgba(31,79,255,.10) 1px) at 22px, .nav-blur rgba(246,247,251,.78)+saturate(160%) blur(14px), .hero-orb radial cobalt sphere. Font: Inter ONLY (Google Fonts 400-900), font-black (900) tracking-[-.03em] headlines, extrabold (800) section titles, bold (700) buttons. Icons are Iconify ph (phosphor) from code.iconify.design (cursor-click-fill, copy-bold, cube-bold, arrow-down-bold, play-fill, hand-pointing-fill, lightning-fill, sparkle-fill, download-simple-bold, github-logo-fill, bookmark-simple-bold, plus-bold, heart-fill, shopping-cart-simple-fill, magic-wand-fill). To transfer the STYLE keep the off-white base + cobalt-gradient button faces + single amber accent + Inter, and above all the three-layer 3D depth with the springy hover-lift / fast active-compress physics. To transfer the LAYOUT keep the single marketing canvas (sticky blurred nav -> dotted-grid hero with floating orbs and a highlighter-swiped headline -> white showcase cards 01 Variants / 02 Sizes / 03 States, each with a numbered icon-tile header -> a two-column 04 Anatomy + 'The prompt' row -> minimal footer) and the 'labelled button above a caption' demo grids. No em-dashes in any copy.