open.cx

A near-white enterprise SaaS landing page that buys its authority with restraint: the ground is an off-white #f9f9f8 rather than pure white, the only saturated color on the whole page is the warm beige (#e6d7bf) of the hero video's studio backdrop, and every control is either solid near-black (#0d0d0d) or a hairline outline. Headings are PP Neue Montreal — a geometric grotesk with a distinctly narrow, flat-sided lowercase — at 48px/500 with a tight 1.2 line-height, while body copy drops to Inter 18px/400 at 1.5, so the two typefaces do hierarchy work that size alone would not. The chrome is deliberately absent: the header has no fill, no border and no blur, so it floats over an off-white section and a full-bleed black one alike. Structure comes from a 6px radius repeated 259 times across cells and cards, pill CTAs at the two extremes of that scale, and generous vertical air — 8400px of page for maybe a dozen sections. The one dramatic move is a scheme inversion two-thirds down: a black band carrying a single financial guarantee and a gold-lit product render, which lands precisely because nothing before it raised its voice.

Set the page ground to an off-white #f9f9f8 and keep pure #ffffff for raised cards only — the two-step separation replaces every shadow you would otherwise reach for. Ink is #111114 for text, roughly 55% gray (#7c736e) for supporting copy, and a 6–8% ink hairline for every border; there is no third color, and no accent hue at all. Pair a geometric display grotesk (PP Neue Montreal, Aeonik, Neue Haas Grotesk Display) for headings with Inter for everything else: h1 48px/500 at 1.2 line-height, section headings 24px/500 at 1.2, body 18px/400 at 1.5, small caps-style labels 12px/500 uppercase with generous tracking, buttons 14px/500. Never letterspace the headings; let the display family's narrow lowercase do that work. Radii are a two-note scale — 6px on every cell, card, input and container, 18px on media surfaces only, and 9999px on buttons and chips — so a pill next to a card always reads as a different class of object. Primary buttons are solid #0d0d0d with white text, 44px tall, 8px 24px padding, no border; secondary buttons are the same geometry in white with a 1px hairline and an optional 12px leading glyph, and the two should sit side by side at equal visual weight. Build repeating content — customer logos, certifications, feature tiles — as a grid of equal hairline cells rather than a free row, letting the cell do the alignment that mismatched artwork cannot. Give feature cards a small round ghost icon button in the top-right corner as the open affordance instead of a text link. Vertical rhythm is loose: 120–180px between sections, 48–64px between a section heading and its grid, and section headings left-aligned with a one-line gray subhead while hero copy stays centered. Bring color in only through photography or a rendered object, never through a fill. Reserve exactly one full-bleed black section for the page's single strongest claim, inverting the same type scale into white and floating white 6px cards over it; used once it feels like a held breath, used twice it is a theme. Motion is minimal: fade-and-rise on scroll for card groups, 150–200ms ease-out on button and card hover, nothing that moves more than a few pixels.