usesondo.com

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.

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.