vectara.com

An enterprise AI platform page that gets its whole character from one structural decision: the page is built as a stack of full-bleed slabs that alternate between near-black #14151a and near-white #f9fafb, so scrolling reads as a sequence of rooms rather than a scroll of sections. The dark hero is quiet and technical — a wide 64px geometric-grotesk headline set at 1.0 leading and -0.04em tracking, one line of 22px Inter beneath it, and a pair of 32px pills (solid #1d79f9, plus a hairline ghost) — floating over a faint engineering-blueprint backdrop of dotted rules, stipple-textured squares and tiny green, blue and pink node dots at the intersections. The light slabs invert the contrast without changing the system: same type, black ink, and a soft gray illustration panel where concentric offset outlines ripple outward from the product's shield mark. Corners are the tell — 2px on nearly every panel and card, fully round on every button, nothing in between — which keeps a page full of cards feeling drafted rather than styled. Restraint does the trust work: monochrome customer logos, green check rows instead of icon art, a green stat chip as the only saturated thing inside each dark outcome card, and a footer that ends on a live "Platform is healthy" pill.

Build the page as alternating full-bleed slabs: ink #14151a and paper #f9fafb, swapping every one or two sections, each slab owning its own text scale (paper: #14151a headings, #4d4d52 body; ink: #ffffff headings, #ababad body). Keep one sticky header across all of them, always dark ink, 64px tall, with a wordmark left, a center nav of 14px/500 links with chevrons, and a white 9999px pill as the only filled control in the bar.

Type: two faces, no exceptions. A round geometric grotesk for display only — h1 64px/64px weight 500 tracking -0.04em, h2 40px/45px weight 500 tracking -0.04em — and Inter for everything else: 22px/1.375 weight 400 tracking -0.02em lead paragraphs, 18px/1.375 weight 500 subheads, 14px/1.5 weight 500 buttons and nav, 13px/1.5 weight 600 uppercase micro-labels for grouping lists. Never set display type looser than 1.05 leading; the tight tracking is what makes it look engineered.

Color roles: #1d79f9 is the only saturated brand color and it is spent on the primary CTA, small node dots and links — nowhere else; a green (~#3dbd63) is reserved for confirmation only (check rows, stat-chip icons, the status dot); grays ladder #4d4d52 → #6e6f73 → #8e8f91 → #ababad → #d0d0d1 for body, meta, disabled and hairlines. Borders are 1px at about 8–10% of the opposite ink.

Radii: exactly two values. 2px on every card, panel, input and image frame; 9999px on every button, chip and status pill. Buttons are 32px tall, 16px horizontal padding, no border on the solid, a 1px hairline on the ghost. Shadows: none — separation comes from the slab swap, from a 2px inset panel one step lighter than its card, and from hairlines.

Rhythm: 96–140px of vertical padding per slab, a 1200px content column, and feature rows as a 50/50 split — left column headline + lead + a checked list (green check glyph, 14px gap, one line each), right column a single illustration panel on a #eceef0 ground. Draw illustration panels as diagrams, not pictures: concentric offset outlines of a shape you already own, alternating solid and dashed, with tiny colored dots and one accent arc snapped to the strokes like measurement annotations. Hero backdrops get the same language — dotted rules at 6% opacity dividing the space into a grid, one or two squares of stipple or hatch texture in the corners, and single-pixel colored dots at intersections.

Cards carry proof, not decoration: title, a claim rendered as a chip (green round icon + 15px/500 text on an inset panel one step lighter, 2px radius, 16px padding), muted description, a chevron text link, a hairline, and a customer logo in flat white or black. Logos everywhere are monochrome at ~60% opacity, and a row of them may fade at its trailing edge to imply a marquee.

Motion: nothing that moves on its own except the logo marquee and a 150ms color/opacity transition on links and buttons. Close the page with a light footer of five columns, uppercase 13px/600 labels subdividing each column, and a status pill with a live green dot at the bottom left.