# usesondo.com

Source: https://usesondo.com/
Captured: 2026-09-16
Tags: saas, landing, light, both, minimal, organic, corporate-clean, calm, trustworthy, confident, human
Colors: #222e0e, #f7f9f2, #485235, #707861, #d1d8c6, #8e9580, #afb5a4, #484fb8
Type (h1): Manrope · 61.92px/68.112px · 600 · tracking -1px — "AI for your website, answering accurately on your behalf."
Type (h2): Manrope · 51.84px/62.208px · 500 · tracking -0.5px — "Bring your content. Files, links, a whole site."
Type (h3): Manrope · 19px/28.5px · 600 · tracking -0.532px — "Lumen Analytics"
Type (body): Manrope · 28px/33.6px · 700 — "When it does not know, it takes an email."
Type (small): Inter Variable · 11px/16.5px · 600 · tracking 0.88px — "TITLE"
Type (button): Manrope · 20px/24px · 500 — "Get started"
Button (primary): "Get started" — fill #f7faf2, text #182604, radius 10px, border 1px, padding 12px 32px, height 54px, type 20px/500
Button (secondary): "AI agent setup" — text #f7faf2, radius 10px, border 1px, padding 12px 32px, height 54px, type 20px/500
Button (tertiary): "MCP" — text #182604, radius 6px, border 0px, padding 0px 16px, height 44px, type 14px/500
Radii: 11px (19), 8px (18), 16px (16), 6px (11), 32px (7)

## Images

- Hero (desktop): https://media.lvly.design/library/usesondo-com/hero.webp?v=1cba153a
- Page crop (mid-1): https://media.lvly.design/library/usesondo-com/mid-1.webp?v=7ca24227
- Page crop (mid-2): https://media.lvly.design/library/usesondo-com/mid-2.webp?v=f6a9ac41
- Hero (mobile): https://media.lvly.design/library/usesondo-com/mobile-hero.webp?v=a7d5c11d
- Full page (desktop): https://media.lvly.design/library/usesondo-com/full.jpg?v=2bf82274
- Full page (mobile): https://media.lvly.design/library/usesondo-com/mobile-full.jpg?v=cc377f5f
- Clip preview (mp4): https://media.lvly.design/library/usesondo-com/video-yhih32.preview.mp4?v=ebdd30b1

Sondo puts a chat product inside a forest. The ground is a pale green-tinted off-white (#f7faf2) and the page is built from large inset panels — roughly 32px radius, an even margin on all four sides so the ground always frames them — each filled edge to edge with an aerial photograph of dark conifer canopy. That deep forest green (#222e0e) covers 45% of the capture and doubles as the ink, so the photography and the type are the same color family rather than a picture with text on top. Everything is Manrope: a 62px/68px headline at weight 600 and −1px tracking, white over the trees, plain declarative sentences that end in a period ("AI for your website, answering accurately on your behalf." / "When it does not know, it takes an email."). The hero's right half is not a screenshot but the product itself — an "Ask Sondo" card in white at 16px radius holding an iridescent marbled orb as the assistant's face, a greeting bubble in pale sage, three hairline suggestion pills, and a live input with a green focus ring and a lime circular send button. Below the fold the pattern alternates: a second forest plate holding a deliberately content-free gray wireframe of "a website" with the widget docked to its right edge, then "Everything else." over a bento of white hairline cards on a pale sage panel, each led by a 12px uppercase tracked label. Chroma is rationed to two places — the lime of the send button and the scrolled header CTA, and the orb — so a page that is 90% green and off-white still has somewhere for the eye to land.

## Steal-worthy details

- The hero's product panel is the live widget, working, with real suggested questions in the assistant's own voice — the demo and the onboarding are the same object, and the floating launcher in the bottom-right corner is the same widget again on the marketing page.
- Photographs are set as inset plates (32px radius, margin on all four sides) instead of full-bleed sections, so the pale ground reads as a mount and section breaks need no rule or background shift.
- The header CTA changes state with the ground beneath it: plain white text while the hero photo is behind it, a solid lime pill once the page turns pale — one control, two treatments, no second nav.
- Button pair over photography: a solid #f7faf2 fill with #182604 text (54px tall, 10px radius, 12px/32px padding, 20px at weight 500) beside a transparent twin with a 1px white border — identical geometry, inverted fill, no shadow.
- The customer's site is drawn as gray skeleton bars in a macOS window — no fake copy, no fake logo, no invented brand — so the only legible thing in the frame is the chat panel.
- One iridescent marbled sphere (blue, magenta, yellow, on a hard edge with no glow) carries the whole brand identity at three sizes: a 96px avatar in the hero card, a carousel specimen in the bento, and a 64px launcher bubble. It is the only non-photographic image in the system.
- Conversation styling is tonal, not colored: user bubbles in warm gray at the right, assistant bubbles in a pale sage tint at the left, both at ~12px radius, with the accent reserved for the send button alone.
- Suggested questions as full-radius outline pills stacked left under the greeting, hairline border, no fill — an empty state that reads as a menu.
- A 12px muted line under the input ("Powered by Sondo · AI can make mistakes") that does attribution, disclaimer and product footer in one sentence.
- Bento cells label themselves with 12px uppercase captions at wide tracking in a muted sage gray ("THEME IT", "THE ORB", "LIGHT AND DARK", "CONNECTED SITES") and then show a working miniature of the feature rather than an icon.
- Status is a pale-green pill ("Ready", "Synced, 24 posts") — tinted, never saturated; the accent swatch row uses plain circles with a ring on the selected one.

## Style recipe

Build on a pale green-tinted off-white ground (#f7faf2) with white cards, and take the ink from the photography rather than from black: deep forest #222e0e for headings and body, #485235 for secondary text, #707861 and #8e9580 for captions and muted labels, #d1d8c6 and #afb5a4 for hairlines and tints. Reserve one high-chroma note — a lime chartreuse (~#a8e63d) — for the primary pill, the circular send button and small affordances, and never for text. Set everything in Manrope (substitutes: Figtree, General Sans) at 600 for display and 500 for controls: hero 60–64px / 1.1 / −1px tracking, section heads 48–56px centered, lead 20px / 1.4, body 16px. Write headlines as complete sentences with terminal periods, in plain words, second person. Compose sections as inset photographic plates — an aerial nature shot at 32px radius with 24–40px of ground visible on all four sides, the image darkened only enough to carry white type — and alternate them with pale sage panels of the same radius; do not use rules or full-bleed color blocks to divide. Radii elsewhere: 6–8px for chips, 10–11px for buttons and bubbles, 16px for cards and panels, 9999px for suggestion pills and status pills. Buttons are 54px tall with 12px/32px padding and a 1px border; on photography the primary is a near-white solid with dark green text and the secondary is transparent with a 1px white border, and on the pale ground the primary is the lime pill with dark green text. Cards are white with a 1px #d1d8c6 hairline and a barely-there shadow. Label feature cells with 12px uppercase captions at ~0.06em tracking in #8e9580, and fill each cell with a live, interactive miniature of the feature at true scale instead of an illustration. Give the product one non-photographic mark — a single iridescent, marbled sphere with a hard edge — and reuse it at every size as avatar, launcher and specimen. Keep shadows nearly absent, gradients off the chrome entirely, and let the photographs supply all of the texture.