Stateful — A Button System Built for Every State

Summary

A complete, state-aware button system on a light slate canvas with a teal accent. One sticky-nav landing page that documents the full button kit: an 8-state x 3-variant matrix (default, hover, active, focus-ring, disabled, loading spinner, success check, icon-only), an icon-button bank on a dark panel, a small/medium/large size ladder, and a horizontal idle-to-success async lifecycle. Pill-shaped buttons, Inter typeface, generous rounded panels with soft shadows.

Style

Crisp, documentation-grade product style. Light slate background, near-black ink text, a single teal accent used for primary actions and rings. Fully rounded (pill) buttons, large 22px-radius white panels with hairline borders and soft layered shadows, a faint teal dot-grid background texture, and one dark contrast section for the icon-button bank.

Layout & Structure

A single vertical landing page, max-width ~1152px (max-w-6xl), centered. Sticky translucent header, two-column hero with a floating live-preview card, a full-width state matrix panel, a dark icon-button bank, a three-column size ladder, a centered async-flow strip, a centered CTA panel, and a slim footer. Collapses to single column and stacked cells on mobile.

Sticky nav

Hero

State matrix

Icon button bank

Size ladder

Async lifecycle strip

CTA panel

Footer

Special Notes

Single teal accent only; do not introduce other hues. Buttons must be fully pill-shaped (radius 9999px) and use Inter. Every variant must render all eight states, and the focus ring must be the exact double-shadow #f8fafc + #5eead4. Keep one dark (ink-900) section for the icon-button bank for contrast; everything else is light slate. Loading uses an animated spinner, success uses a check icon, disabled uses muted slate. No em-dashes in copy.