harmony.ai

A voice-AI landing page that refuses the usual tech-blue playbook: a white canvas, one tight-tracked Instrument Sans voice at weight 400, and a wine palette — near-black aubergine ink (#1b0e16), deep burgundy (#590727) and a blush pink (#ffe2f9) — that reads closer to a fashion house than a call-center tool. Warm, candid lifestyle photography (people on calls, desks, earbuds) carries the "human" claim, while a single geometric motif — stacked half-circles echoing the logo's sound-wave mark — recurs as the brand's only ornament: in hot pink inside a burgundy card, as a full-bleed burgundy band, and as a scaled-up wave glyph. Sections are separated by generous whitespace rather than rules, and the nav docks into a frosted floating pill once you scroll.

Build on a pure white canvas (#ffffff) with one sans family — Instrument Sans (or Inter Display / Geist as a fallback) — at weight 400 for every heading and 500 only for buttons and small labels. Display 60px/1.1 with -0.05em tracking, h2 40px/1.3 at -0.03em, h3 28px/1.1 at -0.02em, body 16px/1.4 at -0.002em, labels 12–13px weight 500. Ink is a warm near-black aubergine (#1b0e16), never pure black; muted text sits in rose-grays (#8f8284, #b6aaaa). Brand accent is deep burgundy #590727 used as a solid fill for primary buttons, demo cards and one full-bleed band; pair it with blush pink #ffe2f9 for secondary pills and with a saturated hot pink (~#ff6ad5) only inside pattern art. Buttons are 40px-tall pills (radius 50px, 0 22px padding, 13px/500, no border); the primary adds a white circular arrow chip inset on the right. Cards and media use a 10px radius; large photo containers 15px. Create one geometric motif from the logo (stacked half-circles / sound-wave arcs) and reuse it as tiles, bands and dividers — it is the only ornament. Photography is warm, candid, people-first, cropped full-bleed inside rounded containers with floating translucent pills over it. Separate sections with 160px+ whitespace rather than rules; use hairlines only for accordion columns and lists. On scroll, the header becomes a frosted (white ~70%, backdrop blur) inset pill.