Graphite — Every button, one calm grammar.

Summary

A quiet, monochrome button-system showcase page rendered entirely in graphite and platinum on warm paper, framed as a real documentation site. A blurred sticky paper nav (a black rounded 'G' logo tile, a 'Graphite' wordmark with a 'v1.0' pill, five anchor links, a ghost 'Source' button and a solid 'Copy system' button) sits over a hero with a small dotted-grid + fade background, an eyebrow pill ('Button system · monochrome'), a huge bold 'Every button, / one calm grammar.' headline, a graphite subhead, a solid + outline CTA pair, and a row of check-marked feature notes. The body is a two-column layout: a sticky left index ('On this page' with dot bullets) and a main column of bordered card sections, Variants (a 5-cell divided grid: Solid, Outline, Soft, Ghost, Link, each captioned with its emphasis level), Sizes (sm/md/lg in both solid and outline), States (a horizontally scrollable matrix of default/hover/focus/loading/disabled across Solid, Outline, Soft), With icons (leading/trailing/icon-only square buttons plus a segmented group), and Tokens (a graphite-ramp swatch list beside a dark code panel of button.css). It closes on a full-bleed dark graphite CTA strip (an inverted white 'Copy CSS' button + a bordered 'Read the docs' button) and a minimal paper footer.

Style

A restrained, monochrome 'calm grammar' aesthetic: there is NO color, only a graphite-to-platinum grayscale ramp on warm off-white paper, so hierarchy is carried entirely by value, weight and hairline borders rather than hue. The whole surface is drawn on near-invisible hairlines (rgba black at 10-16% opacity), with a faint dotted 28px grid behind the hero. Type is tight and quiet: Inter for everything with negative letter-spacing (body -0.011em, headlines -0.03em 'tightest'), and JetBrains Mono used only for tiny uppercase 'state caps' (labels like PRIMARY, sm/md/lg, variant column headers) and the code panel. Corners are softly rounded on a single small radius scale (7/9/11px on buttons, larger on cards), motion is gentle (180ms color/shadow transitions, a 0.5px press on active), and the focus state is a soft platinum ring. The mood is editorial and engineered: lots of paper whitespace, cards with cream fills sitting a hair above the paper, and one idea hammered, emphasis without a single hue.

Layout & Structure

A real documentation-style page in a centered max-w-[1180px] column with px-6 -> lg:px-8 gutters. Top to bottom: a sticky blurred paper nav (h-16), a hero section with a dotted-grid background and a max-w-3xl text block, then a two-column showcase body (a 200px sticky left 'On this page' index + a fluid main column on lg, stacking to one column below lg) containing five bordered card sections (Variants, Sizes, States, With icons, Tokens), then a full-bleed dark graphite CTA strip, then a minimal footer. The hero scales its headline 44 -> 58 -> 66px across breakpoints; the variants grid goes 2 -> 3 -> 5 columns; the states matrix is a fixed 6-column grid (min-w 640px) inside a horizontal-scroll card; everything reflows to a single comfortable column on mobile with the left index hidden.

Sticky blurred nav

Hero

Showcase body shell + sticky left index

Section header pattern

Variants card

Sizes card

States matrix card

With-icons card

Tokens section

Dark CTA strip

Footer

Special Notes

STRICTLY monochrome, there is no accent hue anywhere; all emphasis comes from a graphite-to-platinum value ramp on warm paper drawn with sub-16% black hairline borders. Exact palette: graphite-900 #1c1c1e, 800 #222224, 700 #2c2c2e, 600 #3a3a3c, 500 #48484a, 400 #636366, 300 #8e8e93, platinum #c7c7cc, paper #f6f6f4 (page bg), card #fcfcfb (card fill); solid button uses #1c1c1e -> hover #000 -> active #2c2c2e with #fff text. Hairlines: rgba(28,28,30,0.10), strong rgba(28,28,30,0.16). Focus ring: rgba(199,199,204,0.55). Fonts via Google Fonts: Inter (400/450/500/600/700) for everything, JetBrains Mono (400/500) ONLY for the .state-cap labels and the code panel. Negative letter-spacing throughout (body -0.011em, headlines -0.03em, buttons -0.006em). Icons are Iconify lucide loaded from code.iconify.design (github, arrow-right, layout-grid, code, check, plus, download, share-2, settings, bookmark, search, clipboard, clipboard-copy, arrow-up-right). Radius scale 7/9/11px on buttons. To transfer the STYLE, keep the no-color graphite ramp + hairlines + Inter/Mono pairing + soft platinum focus ring + gentle 180ms transitions and the .42 disabled / spinner conventions. To transfer the LAYOUT, keep the framed doc page (sticky blurred nav -> dotted-grid hero -> sticky-index two-column body of bordered Variants/Sizes/States/Icons/Tokens cards -> dark CTA strip -> minimal footer) and the repeated section-header + Mono state-cap pattern. No em-dashes in any copy.