Soft & Elevated — A Warm Button System

Summary

A warm, tactile BUTTON SYSTEM showcase page on a sandy off-white base (#efe7d8), framed as a single 'Soft & Elevated' specimen canvas. The whole personality is soft physical elevation built from layered shadows instead of borders: every button sits on a stack of inset highlight + soft drop shadows and rises 2px on hover. A blurred sticky nav (a terracotta gradient rounded-square logo tile with a ph:stack-fill icon, a 'TactileUI' wordmark with a terracotta 'UI', a 'BUTTON SYSTEM' pill, four anchor links, a ghost 'Docs' link, and a small terracotta 'Get the kit' button) sits over a full-bleed two-column hero. The hero left holds an eyebrow pill ('A button system that feels pressable'), a huge black headline 'Soft & Elevated. Buttons with weight.' (the second line in burnt terracotta #a8481f), a warm subhead, a terracotta 'Browse the system' + soft 'Copy the tokens' CTA pair, and a 4-item feature row (7 variants / 3 sizes / 5 states / Tactile tokens). The hero right is an elevated 'Specimen' card on warm paper (#f7f2e8) previewing the whole kit with a LIVE pill, all variants, sizes, states, a hint line, and four palette swatches. The body is a stack of warm-paper rounded showcase sections, each with a numbered terracotta-wash chip header: 01 Variants (eight cells: terracotta / olive / soft / terra-tonal / olive-tonal / outline / ghost / icon), 02 Sizes (sm/md/lg plus a second mixed row), 03 States (rest, hover-lift, focus-ring, loading, disabled, demoed across terracotta then soft/olive), and a two-column 04 Tokens row (a palette swatch list beside a dark ink card holding the elevation-recipe box-shadow code, then an assembled terracotta-wash CTA bar). It closes on a sandy footer with the brand cluster and a specimen caption. The whole canvas reflows cleanly to one column on mobile.

Style

A warm, calm, tactile aesthetic where the personality is SOFT elevation, every button is a gently raised surface built from layered inset + drop shadows, never a hard border, and it lifts 2px on hover. The base is a sandy warm off-white #efe7d8 with surfaces on warm paper #f7f2e8 / #faf6ec and a sandy-deep footer #e6dcc7. Text is a warm near-black ink #2b251d with a softer body ink #544c40 and a muted ink #6e6453. The system runs on two earthy accents: a terracotta family (DEFAULT #c4633f, dark #a94f2f, light #d98a68, wash #f3ddd0; solids ship slightly darkened #b5532f->#a8481f so white labels clear WCAG 4.5:1) and an olive family (DEFAULT #6b7048, dark #565a37, light #8a8f63, wash #e3e4d4). Inter is the only typeface (Google Fonts weights 400-900): font-black (900) tracking-tight display headlines, font-extrabold (800) section titles and wordmark, and font-semibold (600) button labels with letter-spacing -0.01em. Buttons share one elevation language: rounded 10-14px corners and a layered box-shadow of an inset top highlight (0 1px 0 rgba(255,255,255,.22) inset) over a tight contact shadow plus a soft spread shadow (e.g. 0 2px 4px + 0 8px 18px -6px in the variant's shadow tint), all on a springy transform+shadow transition (.18s cubic-bezier(.2,.7,.3,1)); hover lifts translateY(-2px) and deepens the shadow, :active drops back translateY(1px). Surfaces echo the same recipe: warm-paper cards with an inset white top highlight + a big soft drop shadow (0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -28px rgba(80,68,48,.4)) and rounded-3xl corners. The hero uses two soft radial color washes (terracotta-wash top-right + an olive-tinted wash top-left) over the sand base. Iconography is Iconify ph (phosphor) glyphs. Nothing is loud or hard-edged, the warmth, the earthy terracotta/olive duo, and the soft layered elevation carry the identity.

Layout & Structure

A single full-bleed specimen-style canvas, every centered block in a mx-auto max-w-6xl px-6 column. Top to bottom: a sticky blurred nav (h-16), a full-bleed two-column hero (lg:grid-cols-[1.05fr_.95fr]) with the headline/CTA block on the left and an elevated 'Specimen' preview card on the right over a soft radial-wash sand background, a main stack of warm-paper rounded-3xl showcase sections spaced space-y-7 (01 Variants, 02 Sizes, 03 States, 04 Tokens), and a sandy full-bleed footer. The hero headline scales clamp(40px,7vw,68px); the hero grid stacks to one column below lg; the nav center links and 'Docs' link hide on small screens; the Variants grid is grid-cols-2 -> sm:grid-cols-3 -> lg:grid-cols-4; the Sizes grid is sm:grid-cols-3; the States grid is grid-cols-2 -> sm:grid-cols-3 -> lg:grid-cols-5; the Tokens row is md:grid-cols-2; the footer and the assembled CTA bar reflow row -> column on mobile.

Sticky blurred nav

Hero

Hero Specimen card

01 Variants section

02 Sizes section

03 States section

04 Tokens section

Footer

Special Notes

A warm, tactile, SOFT-ELEVATED button SYSTEM on a sandy base, the whole personality is soft layered-shadow elevation (never hard borders) plus a calm earthy terracotta + olive duo. Exact palette via Tailwind config: sand DEFAULT #efe7d8 / deep #e6dcc7 / card #f7f2e8 / paper #faf6ec; terra DEFAULT #c4633f / dark #a94f2f / light #d98a68 / wash #f3ddd0 (solids ship darkened #b5532f->#a8481f for WCAG 4.5:1 white text); olive DEFAULT #6b7048 / dark #565a37 / light #8a8f63 / wash #e3e4d4; ink DEFAULT #2b251d / soft #544c40 / mute #6e6453. The headline second line + wordmark accent use #a8481f; outline/tonal text uses #8f3f23 for 4.5:1; footer caption #5f5646. The .btn core: font-weight 600, letter-spacing -0.01em, radius 12px, inline-flex gap .5rem, transition .18s cubic-bezier(.2,.7,.3,1); :active translateY(1px); hover always translateY(-2px) + deepened shadow. Every variant shadow = an inset top highlight + a tight contact shadow + a soft spread shadow tinted to the variant (terra/olive tint rgba(120,52,28,...) / rgba(54,57,33,...); soft + cards tint rgba(80,68,48,...)). Variant fills: terra linear-gradient(180deg,#b5532f,#a8481f) white; olive linear-gradient(180deg,#787c52,#6b7048) #f4f3e6; soft linear-gradient(180deg,#fdfbf5,#f4eee1) #2b251d; outline rgba(255,255,255,.35) + 1.5px rgba(196,99,63,.5) border, #8f3f23 text, hover bg #f3ddd0; tonal #f3ddd0 #8f3f23 (hover #eed0bf); tonal-olive #e3e4d4 #565a37 (hover #d9dbc6); ghost transparent #5a5246 (hover #c4633f on rgba(196,99,63,.08)). Sizes scale padding+font+radius: sm 12.5px / 8px 14px / r10; md 14px / 11px 18px; lg 15.5px / 14px 24px / r14. States: .is-loading transparent label + a .7s spinner (white-top on solids, ink-top on .btn-soft); .is-disabled opacity .45 + grayscale(.25) + flat shadow + transform none; .is-focus a 3px rgba(196,99,63,.4) outline at offset 2px. Surfaces: warm-paper cards #f7f2e8 rounded-3xl, box-shadow 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -28px rgba(80,68,48,.4) (hero specimen deeper: 0 30px 60px -30px rgba(80,68,48,.45)); inner cells rgba(250,246,236,.6) + 1px rgba(80,68,48,.06). Accents: .num-chip terra-wash #f3ddd0 / #8f3f23 tabular-nums 800; .label-chip uppercase 10.5px 700 tracking .08em; .swatch 30px r9 with inset ring + soft drop. Hero bg = radial-gradient(1100px 520px at 78% -10%, #f3ddd0, transparent 55%), radial-gradient(900px 480px at 8% 8%, #e6e7d6, transparent 50%), #efe7d8; .nav-blur saturate(1.4) blur(10px) over rgba(239,231,216,.78). Font: Inter ONLY (Google Fonts 400-900), font-black tracking-tight headlines, font-extrabold (800) section titles + wordmark, font-semibold (600) buttons. Icons are Iconify ph (phosphor) from code.iconify.design (stack-fill, sparkle-fill, hand-tap-fill, squares-four-fill, check-circle-fill, download-simple-bold, lightning-fill, plus-bold). To transfer the STYLE keep the sandy warm base + warm-paper surfaces + the terracotta/olive earthy duo + Inter, and above all the SOFT layered-shadow elevation (inset highlight + contact + soft spread) with the gentle translateY(-2px) hover lift, no hard borders. To transfer the LAYOUT keep the single specimen canvas (sticky blurred nav -> two-column hero with a left headline/CTA block + a right elevated specimen card over a soft radial-wash sand background -> warm-paper showcase cards 01 Variants / 02 Sizes / 03 States / 04 Tokens, each with a numbered terra-wash chip header -> an assembled terracotta-wash CTA bar -> a sandy footer) and the 'button above an uppercase label-chip' demo grids. No em-dashes in any copy.