Graphite — Cards in monochrome
Restrained monochrome card design-system landing page ('Graphite — the quiet card, done right') with no brand color: a sticky paper glass nav, a split hero with a featured card floating over a ghost-card stack, a dark principles marquee, an annotated Anatomy + spec list, a 3-up Gallery with one inverted dark focal card, a five-swatch Tokens palette, and a dark 'copy the component' CTA, all in graphite + platinum + paper, set in Inter with Phosphor icons.
Summary
A restrained monochrome card design-system landing page ('Graphite — The quiet card, done right') built around one canonical content card on an off-white paper canvas. A sticky translucent paper glass nav sits above a split hero (left: copy + two CTAs + WCAG/responsive trust line; right: a featured card floating over two stacked ghost cards), then a full-bleed dark marquee strip of principles, an Anatomy section (an annotated card beside a four-row spec list), a Gallery (a 3-up grid of card variants including one inverted dark focal card), a Tokens section (a five-swatch palette + a type specimen), a full-bleed dark System CTA band (copy + a 'copy the component' button beside a paper card on dark), and a footer. The entire palette is graphite + platinum + paper, set in Inter, with Phosphor icons.
Style
Quiet, monochrome, system-documentation aesthetic: an off-white 'paper' canvas (body #f6f5f3, card surfaces #fcfbfa, soft fills #efeeec) with near-black 'graphite' ink (#1c1c1e) for headings and graphite-600 #48484a for body, and a platinum grey (#c7c7cc, with light #d8d8dc / dark #aeaeb2 / ghost #86868a) as the only secondary tone. There is no brand color: contrast lives entirely inside the graphite-to-paper scale. Surfaces use 1px hairline borders at 10% graphite (and a stronger 16% variant), generous padding, and a soft layered card shadow rather than heavy chrome. One typeface, Inter (300-700), with very tight letter-spacing (a custom 'tightest' -0.045em) on big headings and mega-tracked (0.18em) uppercase micro-eyebrows. Texture is subtle: a faint radial-dot 'grain' on the hero and a light dot-grid on the dark bands. Icons are Phosphor (ph:*) via Iconify. Links are 'quiet' (no buttons): a caret that nudges 3px right on hover; cards 'rise' 4px with a deeper shadow on hover.
Layout & Structure
A full-width page in vertical bands, each band centered in a max-w-6xl container with 1.5rem/2rem horizontal padding, separated by full-width 7%-graphite hairlines. Vertical order: sticky glass nav -> split hero (a 12-col grid: 6-col copy left, 6-col featured card right with ghost cards behind) -> full-bleed dark marquee strip -> Anatomy (a 12-col grid: a 7-col annotated card on a soft inset, a 5-col four-row spec list) -> Gallery on a soft band (a sm:2 / lg:3 column card grid, six cards, one inverted dark) -> Tokens (a 12-col grid: 5-col intro copy, 7-col swatch grid) -> full-bleed dark System CTA band (a 12-col grid: 7-col copy + buttons, 5-col paper card on dark) -> footer. Responsive: the hero and most grids collapse to a single column below lg; nav center links and the ghost cards hide below md/lg; the gallery is one column on mobile, two at sm, three at lg; a hamburger toggles a mobile menu below md.
Sticky glass nav
Split hero
The featured card (signature component)
Dark marquee strip + Anatomy
Gallery + Tokens
Dark System CTA band + footer
Special Notes
No-brand-color discipline: the entire system is graphite (950 #1c1c1e through 600 #48484a) + platinum (#c7c7cc, light #d8d8dc, dark #aeaeb2, ghost #86868a) + paper (#f6f5f3 body, #fcfbfa card surfaces, #efeeec soft fills); all contrast lives inside that greyscale, with zero accent hue. One typeface only, Inter (300-700, via Google Fonts), with a custom 'tightest' (-0.045em) tracking on big headings and 0.18em uppercase eyebrows. The look is built from restraint: 1px hairlines (10% / 16% graphite) instead of heavy boxes, generous padding, soft layered card-shadows, a faint radial-dot 'grain' on light bands and a 'dot-grid' on the dark bands, and 'quiet' button-less links whose caret nudges right on hover. Icons are Phosphor (ph:*) via Iconify. Copy is human with zero em-dashes ('The quiet card, done right.', 'Ship the card. Skip the noise.', 'A palette you can count on one hand.'). All card titles / body are sample copy so the prompt ships with no bundled assets; the reusable value is the quiet monochrome card composition (hairline + generous padding + one quiet CTA + ghost-card stack + inverted focal variant) and the graphite/platinum/paper no-accent system, not the words.