# harmony.ai

Source: https://harmony.ai/
Captured: 2026-10-21
Tags: saas, landing, light, both, minimal, editorial, corporate-clean, premium, warm, human, confident, calm
Colors: #fefefe, #1b0e16, #590727, #b6aaaa, #8f8284, #774441, #806868, #4b3137
Type (h1): Instrument Sans · 60px/66px · 400 · tracking -3px — "Give your business a voice that runs discovery calls."
Type (h2): Instrument Sans · 40px/52px · 400 · tracking -1.2px — "Proactive Sales Use Cases"
Type (h3): Instrument Sans · 28px/30.8px · 400 · tracking -0.56px — "Lead Qualification"
Type (body): Instrument Sans · 16px/22.4px · 400 · tracking -0.032px — "Deploy a voice AI in minutes. No code, no call center."
Type (small): Instrument Sans · 12px/15.6px · 500 — "1:35 min"
Type (button): Instrument Sans · 13px/16.9px · 500 — "Try for free"
Button: "Try for free" — fill #ffe2f9, text #000000, radius 50px, border 0px, padding 0px 22px, height 40px, type 13px/500
Radii: 10px (38), 41.444px (9), 50px (5), 60px (3), 15px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/harmony-ai/hero.webp?v=0d6c205c
- Page crop (mid-1): https://media.lvly.design/library/harmony-ai/mid-1.webp?v=c1a318e0
- Page crop (mid-2): https://media.lvly.design/library/harmony-ai/mid-2.webp?v=7a2812cd
- Hero (mobile): https://media.lvly.design/library/harmony-ai/mobile-hero.webp?v=c465b529
- Full page (desktop): https://media.lvly.design/library/harmony-ai/full.jpg?v=3fdfdb8d
- Full page (mobile): https://media.lvly.design/library/harmony-ai/mobile-full.jpg?v=ff4e7005
- Clip preview (mp4): https://media.lvly.design/library/harmony-ai/video-i1i9ua.preview.mp4?v=2b5eef6e

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.

## Steal-worthy details

- Display headline at 60px, weight 400, -3px tracking (-0.05em) and 1.1 line height — light weight plus crushed tracking reads expensive without going serif
- Primary CTA is a burgundy pill with a white circular arrow chip inset on the right, so the button carries its own affordance icon
- Nav pairs a blush-pink "Try for free" pill (#ffe2f9, black text) with a burgundy "Book a call" pill — same shape, two tonal weights, a clear primary/secondary without an outline button
- Nav links each prefixed by a tiny gray dot instead of separators or chevrons — quiet rhythm, no dropdown arrows
- Interactive "Receive a live call" form card in solid burgundy overlaid on the hero photograph, with the logo in a pink circle and a green live dot
- Translucent dark pill "Watch our launch video · 1:35 min" with a white play disc, floated on the photo corner rather than a centered play button
- Header detaches on scroll into a frosted, inset rounded pill that keeps both CTAs
- Full-bleed burgundy band with pink concentric half-circles framing a centered manifesto line — the logo's wave turned into a section-scale pattern
- Use-case cards each carry a different pink or lilac half-circle tile pattern, generated from the same geometric primitive
- Industries section as a horizontal accordion: one open panel with a soft Rococo painting, the rest as hairline columns with plus icons
- Closing CTA on a solid pink field with the half-circle pattern bleeding off the edges

## Style recipe

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.