Slate — Graphite Premium Monochrome (SaaS Website Design Prompt)

Summary

A graphite, near-monochrome premium SaaS marketing homepage with a single platinum accent. A sticky, glassy charcoal nav sits above a restrained left-aligned hero (a pill 'version' badge, a huge platinum gradient-clipped display headline, a light subhead, and a small inline 'New' link), followed by a large in-page product-canvas mock (an app toolbar, a layers rail, a generated revenue-dashboard card with KPI cells and a bar chart, and a right prompt panel) framed in a soft-shadow card on a dotted grid. Below: a quiet centered logo row, a thin numbered feature list (4 rows, no cards), a two-up testimonial + stats/terminal panel, a minimal 3-tier pricing block (the middle plan featured), a centered closing CTA over a grain wash, and a 4-column dark footer. The signature is the restraint: graphite surfaces #1c1c1e to #2c2c2e, one platinum/silver accent #c7c7cc (with a #ffffff to #c7c7cc gradient clipped onto display text and used on the primary pill button), off-white #f2f2f4 text, tight Inter throughout, hairline #39393c borders, soft platinum-ring shadows, and faint radial grain + dot-grid textures. Linear-like calm, but graphite rather than violet.

Style

Premium, calm, near-monochrome dark mode built almost entirely from graphite greys with a single platinum/silver accent. The page is a stack of charcoal surfaces (page #1c1c1e, panels #202022/#252527/#2c2c2e) separated by 1px hairline borders (#39393c, #2e2e30) rather than color. Text is off-white #f2f2f4 for primary, platinum #c7c7cc / #aeaeb2 for secondary and links, and muted greys #8e8e93 / #6c6c70 reserved only for eyebrows and micro-labels. The lone accent is platinum #c7c7cc: it fills the primary pill button (as a #ededf0 to #c7c7cc gradient with dark ink text), tints feature icons and check marks, and is clipped onto every big display heading as a #ffffff to #c7c7cc top-to-bottom gradient ('plat-text'). Depth comes from craft, not color: a soft platinum-ring drop shadow on framed panels (ring-soft), faint radial 'grain' glows behind the hero/CTA, a 22px dot-grid on the canvas mock, a centered hairline gradient divider, and a subtle card sheen on featured surfaces. Tight Inter (weights 300-700) with negative letter-spacing on display type gives the whole thing a restrained, engineered, Linear-like feel.

Layout & Structure

A single-column, vertically stacked, frameless responsive marketing page. Almost every section centers inside mx-auto max-w-[1200px] with px-6 -> lg:px-8 padding. Order top to bottom: sticky glass nav; hero (left-aligned badge + display headline + a row that splits the lead paragraph from a small 'New' link, then a large full-width product-canvas mock); a quiet bordered logo row; a thin numbered feature list (4 rows on a 12-col grid, divided by hairlines, no cards); a two-up panel (a pull-quote testimonial beside a stats + faux-terminal cell); a minimal 3-column pricing block (middle plan featured with a platinum ring); a centered closing CTA over a grain wash; and a dark 4-column footer with a hairline divider and a bottom legal/social row. Reflow: the hero canvas mock is a 12-col grid (left layers rail col-span-2 and right prompt panel col-span-3 are hidden below lg, leaving the generated UI full width); feature rows go md:grid-cols-12 -> stacked; the testimonial/stats panel is lg:grid-cols-2; pricing is md:grid-cols-3 -> 1; the footer is md:grid-cols-12 with link columns 2-up on mobile. Everything collapses to one column on mobile; the nav links hide below md.

Sticky glass nav

Hero

Hero product-canvas mock

Logo row

Feature list (thin, numbered)

Testimonial + stats panel

Pricing (minimal, 3-tier)

Closing CTA

Footer (dark, 4-column)

Components

Platinum gradient-clipped display headline (.plat-text)

The recurring brand flourish: every large heading is filled with a white-to-platinum top-to-bottom gradient clipped to the glyphs, so the type itself carries the only 'shine' on an otherwise grey page.

Platinum pill button (.btn-plat)

The one filled control on the page: a fully rounded pill with a brushed-platinum gradient and dark ink text, used for the nav 'Get started', the featured pricing CTA, the 'Most popular' badge, and the closing CTA.

In-page product canvas mock (frameless)

A large embedded app-canvas panel that stands in for the hero product shot: an app toolbar, a layers rail, a generated revenue-dashboard card with KPI cells and a bar chart, and a right prompt panel, all on a dot-grid. Not a browser or device frame.

Hairline-only section system

Sections and the feature list are separated by 1px graphite borders and a centered gradient hairline rather than by background color blocks, which is what gives the page its calm, engineered restraint.

Special Notes

Frameless, fully responsive premium SaaS marketing landing page (no browser chrome / no device frame): every section centers in mx-auto max-w-[1200px] with px-6 -> lg:px-8; the hero product mock is a 12-col grid whose left layers rail (col-span-2) and right prompt panel (col-span-3) hide below lg; the feature list is a md:grid-cols-12 hairline-divided list; the testimonial/stats panel is lg:grid-cols-2; pricing is md:grid-cols-3 -> 1; the footer is md:grid-cols-12 with link columns 2-up on mobile; the nav links hide below md; everything collapses to one column on mobile; the nav is fixed + glassy (backdrop-blur). Built with Tailwind via CDN plus a small tailwind.config registering the custom graphite/platinum colors (ink #1c1c1e, ink2 #202022, ink3 #252527, panel #2c2c2e, line #39393c, line2 #2e2e30, plat #c7c7cc, plat2 #aeaeb2, off #f2f2f4, mute #8e8e93, mute2 #6c6c70), the Inter font family, and the tightest letter-spacing; Google Fonts loads Inter 300-700; icons are Iconify Phosphor (ph:) glyphs. All copy and the 'Slate' brand are placeholders meant to be swapped: the transferable value is the graphite near-monochrome palette with a SINGLE platinum accent (#c7c7cc, as the .plat-text white->platinum clipped headline gradient and the .btn-plat brushed-platinum pill, on #1c1c1e->#2c2c2e surfaces with #f2f2f4 text and hairline borders) and the restrained Linear-like full-funnel SaaS layout (sticky glass nav -> left-aligned hero with an in-page product-canvas mock -> quiet logo row -> thin numbered feature list -> testimonial+stats split -> minimal 3-tier pricing -> grain CTA -> 4-column footer), NOT the specific product. Strictly no indigo/violet/blue: the only accent is platinum.