tryprofound.com

An almost entirely achromatic dark page — 87% of the pixels are a single near-black #050505 — that spends its whole contrast budget on the product itself. The fold is unusually restrained for an enterprise AI pitch: a two-line 48px/56px Inter heading at weight 500 with a hard −1.08px tracking, one 18px gray subhead, two small 32px buttons, and then a full-width screenshot of the actual three-pane workbench rendered at true UI scale rather than as a stylized illustration. Below the fold the layout turns explicitly structural: dashed vertical hairlines mark the content column edge for thousands of pixels, and every section is a cell bounded by those rules with a left-aligned 48px head, a one-line gray deck, and a dark panel of real interface. Color appears only where it is information — the reds and whites of a chart, an amber status dot, a blue announcement badge — so the eye reads saturation as data and never as decoration. The effect is a page that behaves like the dashboard it sells: quiet chrome, dense content, nothing ornamental competing with the numbers.

Build on a near-black ground of #050505 (#000000 for the outermost page) and layer up with panels at #2c2c2e, hairlines at #4c4d4e, and a raised surface no lighter than #4c4d4e — never leave the near-black band. Text has exactly three roles: #f0f0f0 for headings and primary UI, #8b8d8f for decks, captions and secondary nav, #6e6f71 for disabled and footnotes. Set everything in Inter (variable, with an -apple-system fallback). Type scale: display and section heads 48px/56px at weight 500 with letter-spacing −1.08px (−0.0225em) — the tight tracking at medium weight is the signature, never bold; body and decks 18px/24px at 400 with −0.045px; labels and metadata 12px/16px at 400–500 with normal tracking; button text 14px/20px at 500 with a positive +0.105px. Never go above weight 500 anywhere.

Radii: 8px is the default for buttons, panels and inputs, 12px for large content cards, 9999px only for badges and toggle pills, and nothing else. Controls are small: 32px tall buttons with 6px/12px padding and border-width: 0 — a solid #ffffff fill with #222222 text for primary, the same silhouette in #2c2c2e with light text for secondary, and no outline variant at all. Use no drop shadows; separation comes from a one-step lift in ground value plus a 1px hairline.

Structure the page as a visible grid: two dashed vertical rules at the content column edges running the entire document, and a solid or dashed horizontal hairline closing every section, so each block is a cell. Inside a cell, left-align a 48px head, a single 18px gray deck line of one sentence, generous vertical air (roughly 96–160px between a head and the artifact under it), and then one dark panel. Keep all copy in American English, in sentence case, and let numbers be tabular.

Two moves make this style recognizable. First, put real product interface in the layout at its true size — screenshots with legible 12–14px labels, actual chart axes, real tab chrome — rather than oversized or blurred mockups; the density is the argument. Second, allow color only where it encodes a value: chart series, a status dot, a delta figure, a single tinted badge. Everything else stays gray. Motion should be slight and slow — opacity and a few pixels of translate on scroll entry, cross-fades between tabbed states, no parallax and no bounce.