Quiet Answers — Graphite Minimal FAQ

Summary

A calm, minimal graphite-on-paper FAQ / help-center page. A sticky blurred warm-paper nav (a black rounded-square scribble-loop logo + 'Stencil' wordmark, Canvas / Library / Pricing / FAQ links with FAQ active, a 'Sign in' link + a black 'Start free' pill) sits over a full-bleed grain-textured hero strip: a small bordered 'Support . Help center' lifebuoy pill, a huge two-line headline 'Questions,' / 'answered quietly.' where line two is rendered in muted steel grey, and a centered max-w-xl muted lead. Below, a single-column divider-list accordion built from native <details>: each row is a thin-bordered circular plus toggle + a medium-weight question, separated only by hairline rules (no card chrome), with the first item pre-opened and the answer indented to align under the question; opening rotates the plus to an x (135deg) and darkens the question. The section closes with a soft 'Didn't find your answer?' CTA card (a black rounded-square chats icon tile + reassurance copy + a black 'Talk to us' pill) and a minimal three-column paper footer (brand, copyright, social icons). The whole thing is monochrome graphite on warm off-white, set in Inter, with one black accent.

Style

A quiet, restrained, monochrome-minimal aesthetic: a warm off-white paper page (#f6f6f4) with a slightly lighter paper2 (#fbfbfa) for raised surfaces, near-black ink #1c1c1e text, and a graphite/steel grey scale (graphite #2c2c2e, slate #48484a, steel #5c5c61, mute #8e8e93, platinum #c7c7cc) carrying secondary text, borders and the de-emphasised second headline line. The single accent is solid black: the logo tile, the 'Start free' / 'Talk to us' pills, the CTA icon tile, and the selection colour, all bg-ink. Hairline borders are a faint hair #e5e5ea. There is NO colour anywhere, the entire palette is greyscale on paper, so calm and editorial that the only emphasis comes from weight, size and the one black pill. The signature texture is a very faint dot-grid 'grain' (a 22px radial-dot pattern at rgba(28,28,30,0.04)) behind the hero. Type is set entirely in Inter (weights 300-700) with very tight display tracking (letter-spacing -0.045em 'tightest'): a huge clamp(2.1rem,6vw,4.5rem) semibold headline with near-1.0 leading, an uppercase 0.22em-tracked eyebrow, medium-weight 17-18px questions and relaxed 15.5px slate body. Motion is gentle and calm: a grid-template-rows 0fr->1fr 0.4s cubic-bezier(.4,0,.2,1) accordion reveal, a plus-to-x 135deg rotate, and a single-open behaviour (opening one row closes the others). The result reads as a serene, premium, no-noise help center, not a colourful SaaS FAQ.

Layout & Structure

A vertically stacked, mostly single-column page. A full-width sticky blurred paper nav (constrained to max-w-6xl) tops a full-bleed grain-textured centered hero strip (eyebrow pill, two-line headline, lead). Below, the FAQ body is centered in a narrow max-w-3xl column: a left-aligned eyebrow + section heading with a right-aligned '6 questions' count, then a hairline-divided list of native <details> rows (circular plus toggle + question, answer indented under the question, first row pre-opened). The section closes with a soft full-width rounded CTA card, and the page ends with a full-bleed three-column paper footer (constrained to max-w-6xl).

Sticky nav

Full-bleed grain hero strip

FAQ heading row

Divider-list accordion (closed rows)

Accordion open / active state + single-open behaviour

Soft CTA card

Footer

Special Notes

Constrained max-w-6xl nav + hero + footer (px-6 / md:px-10) with the FAQ body narrowed to max-w-3xl, all on a warm off-white paper #f6f6f4 page. Palette is fully greyscale and fixed: paper #f6f6f4 base, paper2 #fbfbfa raised surfaces, ink #1c1c1e text, graphite #2c2c2e, slate #48484a, steel #5c5c61, mute #8e8e93, platinum #c7c7cc greys, hairline borders in hair #e5e5ea, and solid black (bg-ink) as the ONLY accent (logo tile, 'Start free' / 'Talk to us' pills, CTA icon tile, selection); NO colour appears anywhere, the second headline line is muted in steel grey rather than coloured. ONE typeface: Inter (weights 300-700) via Google Fonts; display headlines are semibold with very tight tracking (a custom letter-spacing -0.045em 'tightest'), leading ~0.98; eyebrows are 12px semibold uppercase tracking-[0.22em]; body is 15.5-18px relaxed-leading slate. Icons are Iconify Phosphor (ph:* bold) throughout (scribble-loop, arrow-up-right, lifebuoy, plus, chats-circle, arrow-right, x-logo, github-logo, discord-logo). A faint dot-grid 'grain' texture (radial-gradient at rgba(28,28,30,0.04), 22px) sits behind the hero. The accordion is native <details> with the marker removed: the answer is a grid that reveals via grid-template-rows 0fr->1fr over 0.4s cubic-bezier(.4,0,.2,1), the leading plus icon rotates 135deg (plus->x) on open, and the question darkens slate->ink; exactly one item ships pre-opened and a tiny JS 'toggle' listener enforces single-open (opening one closes the rest). Responsive: nav center links hide below md and 'Sign in' below sm, the headline scales via clamp(2.1rem,6vw,4.5rem), the 'N questions' count hides below sm, the CTA card stacks (flex-col) on mobile, and the footer collapses from a 3-col grid to a single column; no horizontal overflow at 390px. Copy is human, warm and reassuring with zero em-dashes (proactive-friend voice: 'answered quietly.', 'No noise, just answers.', "We're an interesting, proactive bunch. Ping us and we'll figure it out with you.", 'Talk to us').