# open.cx

Source: https://open.cx/
Captured: 2026-09-20
Tags: saas, landing, light, both, minimal, corporate-clean, confident, trustworthy, calm, premium
Colors: #f9f9f8, #e6d7bf, #c3b3a2, #111114, #7c736e, #9b918c, #5c5151, #383231
Type (h1): PP Neue Montreal · 48px/57.6px · 500 — "Extraordinary customer experiences with AI agents"
Type (h2): PP Neue Montreal · 24px/28.8px · 500 — "Used every day by the world's best companies"
Type (h3): PP Neue Montreal · 24px/28.8px · 400 — "One brain, every channel"
Type (body): Inter · 18px/27px · 400 — "Resolve 77% of support across chat, email, voice, and outbound, instantly, and s"
Type (small): Inter · 12px/16px · 500 — "Automate everything™"
Type (button): Inter · 14px/21px · 500 — "Get Started"
Button: "Get Started" — fill #0d0d0d, text #ffffff, radius 9999px, border 0px, padding 8px 24px, height 44px, type 14px/500
Radii: 6px (259), 18px (31), 9999px (15), 12px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/open-cx/hero.webp?v=a4eff5c8
- Page crop (mid-1): https://media.lvly.design/library/open-cx/mid-1.webp?v=36a0f623
- Page crop (mid-2): https://media.lvly.design/library/open-cx/mid-2.webp?v=2c6a7419
- Hero (mobile): https://media.lvly.design/library/open-cx/mobile-hero.webp?v=1c14f867
- Full page (desktop): https://media.lvly.design/library/open-cx/full.jpg?v=f7f5e1fe
- Full page (mobile): https://media.lvly.design/library/open-cx/mobile-full.jpg?v=e0a9e803
- Clip preview (mp4): https://media.lvly.design/library/open-cx/video-69vey7.preview.mp4?v=e381c03e

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.

## Steal-worthy details

- Chromeless sticky header — no bar fill, no bottom border, no backdrop blur; the wordmark, four nav links and the pill CTA simply float over whatever section scrolls beneath, including the full-bleed black one
- Two-typeface split doing all the hierarchy: PP Neue Montreal 48px/500 at 1.2 for the headline, Inter 18px/400 at 1.5 for the subhead directly under it — no size jump larger than the family change already implies
- The CTA pair at the two ends of the radius scale: a solid #0d0d0d pill and a white pill with a hairline border and a small play triangle, both 44px tall, 14px/500 Inter, 8px/24px padding, fully round — the secondary reads as equal weight, not as a demoted link
- Hero media as one wide rounded card (18px) holding a real person against a warm beige studio gradient, with a small black "Watch video" pill floating over the center of it — the page's only warm color arrives as photography, not as a brand token
- Logo wall built as a hairline grid of equal 6px-radius cells — four rows of five, every customer mark centered in its own box — instead of the usual free-floating row, so twenty logos of wildly different aspect ratios read as one tidy block
- Each feature card puts a small round expand icon button in its top-right corner instead of a "Learn more" link, so the card itself is the affordance and the copy stays uninterrupted
- Scheme inversion reserved for one claim: a full-bleed black band with the guarantee headline in white PP Neue Montreal, a gold-lit render below it, and white 6px cards laid over the black — the only tonal shift in 8400px, spent on the single hardest promise
- Compliance drawn rather than listed: five etched circular seals (SOC 2, ISO 27001, GDPR, EU AI Act) over 12px uppercase letter-spaced captions, between two full-width hairlines, with a green-dot "All systems operational" line in the legal row

## Style recipe

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.