Every button, every state, on one calm canvas — Emerald UI Button System

Summary

A complete, copy-ready button design system laid out on one calm, full-bleed reference page: six semantic variants (primary, secondary, outline, ghost, destructive, icon-only) rendered across three sizes (small 32px, default 40px, large 48px) and five interaction states (default, hover, active, disabled, loading). The page opens with a sticky frosted nav and an emerald hero ('Every button, every state, on one calm canvas.'), then walks through five labeled sections: a variant lineup showcase with a token strip, an anatomy grid where each variant shows rest/hover/active side by side, a sizes band, a five-state strip, and an icons section (square icon-only toolbar buttons plus icon+label combos). Built on white with a faint dotted grid, slate ink text, and a single emerald accent (#10b981), on Inter with Iconify Lucide icons; it reflows cleanly to tablet and mobile. The library value is the transferable button token system and the section-by-section anatomy layout.

Style

A calm, premium, modern-SaaS aesthetic for documenting a component system. The canvas is white (#ffffff) overlaid with a very faint 28px dotted/line grid (slate at ~3.5% opacity) so demo surfaces read as a design canvas. Text is slate ink: near-black #0f172a for headings, slate #64748b for body, light slate #94a3b8 for tiny uppercase cell labels. A single emerald accent (#10b981, deepening to #059669 on hover and #047857 on active) carries every primary/brand moment; rose (#e11d48) is reserved strictly for the destructive variant. Surfaces are soft and airy: cards use rounded corners (rounded-xl to rounded-2xl), hairline slate borders (#e2e8f0 / slate-100), and gentle layered shadows (0 1px 2px plus a wide -12px spread at ~8% opacity). Buttons share a 10px (0.625rem) radius, 600 weight labels, a 160ms cubic-bezier(.4,0,.2,1) transition, and a 3px emerald focus ring (rgba(16,185,129,.35)). The mood is restrained and documentation-grade: lots of whitespace, tiny uppercase tracked labels, monospace token chips, and the emerald reserved so the system reads calm rather than loud. Typography is Inter throughout (400/500/600/700/800), with extrabold for the hero and bold for section H2s.

Layout & Structure

A single-column documentation page: a `sticky top-0 z-50` frosted white nav (`bg-white/85 backdrop-blur-md` over a `border-b border-ink-200/70`) with a logo lockup, anchor links (Showcase/Variants/Sizes/States/Icons), a version chip, and a 'Copy tokens' primary button; a full-bleed grid-bg hero band with a pill badge, the extrabold headline 'Every button, every state, on one calm canvas.', a subhead, two hero CTAs, and a feature checklist; then a centered `max-w-[1180px] px-6` main holding five `border-b` sections (01 Showcase = variant lineup + token strip; 02 Anatomy = a 3-col grid of variant cards each showing Rest/Hover/Active; 03 Sizes = a 3-col band of Small/Default/Large; 04 States = a 5-col strip Default/Hover/Active/Disabled/Loading; 05 Icons = a 2-col block of an icon-only toolbar and icon+label combos); and a full-bleed dark (ink-950) footer band. Every section opens with a tiny emerald uppercase eyebrow ('NN · Label' with a Lucide icon), a bold H2, and a one-line slate subhead. Demo surfaces sit on the `.grid-bg` canvas inside rounded hairline-bordered cards.

Sticky frosted nav

Full-bleed grid-bg hero band

Section 01 — variant lineup showcase

Section 02 — anatomy grid (rest/hover/active per variant)

Section 03 — sizes band

Section 04 — five interaction states

Section 05 — icon buttons + icon+label

Full-bleed dark footer + responsive reflow

Special Notes

Exact color tokens (Tailwind config). Ink/slate scale: 50 #f8fafc, 100 #f1f5f9, 200 #e2e8f0, 300 #cbd5e1, 400 #94a3b8, 500 #64748b, 600 #475569, 700 #334155, 800 #1e293b, 900 #0f172a, 950 #020617. Emerald scale: 50 #ecfdf5, 100 #d1fae5, 200 #a7f3d0, 300 #6ee7b7, 400 #34d399, 500 #10b981, 600 #059669, 700 #047857, 800 #065f46. Rose for destructive: #e11d48 -> #be123c -> #9f1239. Font: Inter (Google Fonts, weights 400/500/600/700/800) as the `sans` family with system fallbacks, antialiased. Icons: Iconify Lucide (lucide:square-mouse-pointer, copy, layout-grid, code-xml, check, square-stack, arrow-right, grid-3x3, plus, settings, more-horizontal, ruler, activity, loader-2, shapes, bold, italic, underline, search, bell, share-2, trash-2, git-branch, download, sparkles, filter). Button tokens: radius 0.625rem (10px), 600 weight, transition `all .16s cubic-bezier(.4,0,.2,1)`, focus ring `0 0 0 3px rgba(16,185,129,.35)`. Sizes: sm 32px, md/default 40px, lg 48px (icon variants are equal-width squares at the same heights). Single `.btn` primitive composes variant + size + state classes; `.is-hover/.is-active/.is-disabled` helpers mirror the real pseudo-states so the static documentation grid can show every state. `.grid-bg` = white + two 1px linear-gradients at rgba(15,23,42,0.035), background-size 28px 28px. `.cell-label` = .6875rem/600/uppercase/.04em tracking/#94a3b8; `.chip-mono` = ui-monospace. Layout: a sticky `top-0 z-50` frosted nav (bg-white/85 backdrop-blur-md over border-ink-200/70), a full-bleed grid-bg hero, a centered `mx-auto max-w-[1180px] px-6` main of five border-separated sections (Showcase/Anatomy/Sizes/States/Icons), and a full-bleed ink-950 footer. Emerald is reserved for primary/brand moments; rose only for destructive; everything else is white, slate ink, and hairline slate borders. Built with the Tailwind CDN + Iconify. The prompt-library value is the transferable button token system plus the section-by-section anatomy layout for documenting any component set.