# delphi.ai

Source: https://www.delphi.ai/
Captured: 2026-09-13
Tags: saas, landing, light, both, editorial, minimal, retro-warm, warm, premium, human, elegant, calm
Colors: #f7f0e8, #d4c9be, #a49485, #986e52, #070a09, #7e4e36, #655e57, #37312c
Type (h1): fontPythia · 50px/51px · 500 · tracking -1.75px — "What's on your mind"
Type (h2): fontInter · 20px/28px · 500 · tracking -0.5px — "Quick questions"
Type (h3): fontInter · 23px/29.9px · 500 · tracking -0.46px — "How do I host a dinner party that actually feels effortless?"
Type (small): fontPythia · 11px/11px · 600 · tracking 0.99px — "CREATIVITY"
Type (button): fontInter · 14px/20px · 500 — "Create Your Delphi"
Button (primary): "Create Your Delphi" — fill #fd5400, text #ffffff, radius 26px, border 1px, padding 0px 12px, height 36px, type 14px/500
Button (secondary): "Sign In" — text #63635e, radius 26px, border 1px, padding 0px 12px, height 36px, type 14px/500
Button (tertiary): "Discover" — text #63635e, radius 0px, border 0px, padding 0px 12px, height 36px, type 14px/500
Radii: 12px (26), 16px (20), 6px (6), 10px (5), 140px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/delphi-ai/hero.webp?v=bbfee5a3
- Page crop (mid-1): https://media.lvly.design/library/delphi-ai/mid-1.webp?v=d47c0a95
- Page crop (mid-2): https://media.lvly.design/library/delphi-ai/mid-2.webp?v=586f5fc3
- Hero (mobile): https://media.lvly.design/library/delphi-ai/mobile-hero.webp?v=aa320972
- Full page (desktop): https://media.lvly.design/library/delphi-ai/full.jpg?v=698f83eb
- Full page (mobile): https://media.lvly.design/library/delphi-ai/mobile-full.jpg?v=a8e62d50
- Clip preview (mp4): https://media.lvly.design/library/delphi-ai/video-6gc5y7.preview.mp4?v=67cc7fff

Delphi's landing page is a cream-paper stage for faces. The whole canvas sits on a warm off-white (#fdf6ee ground, #f7f0e8 covering nearly 90% of the page) with almost no hairlines — sections are separated by a barely-there tonal step to a second cream card, so the page reads as one continuous sheet. Type does the heavy lifting: a light-weight serif (Martina Plantijn Light, 64px, tracked to −2.56px) for every headline, set in short two-line sentences, against Inter 17px body in warm grays and browns. The hero is a single arch-topped portrait card with a dark chat input and an orange "Ask" pill inside it, orbited by softly rotated paper "chips" (LinkedIn · 180 posts, Talks · 41 videos, a reply card) that float and drift on load. Color is disciplined to one hot vermilion-orange for the primary action and the chat bubbles; everything else is cream, tan (#d4c9be) and cocoa (#986e52, #7e4e36). Feature sections repeat the motif — a portrait on a warm radial glow, ringed by dotted orbits holding source pills (Podcast, YouTube, Books, TikTok, Notes) — so the product's "a person, made of their sources" idea is drawn rather than explained.

## Steal-worthy details

- Arch-topped portrait card (140px top radius over 12–16px corners): the photo bleeds to the edges, the name is set in the serif in white, and a dark rounded chat input with an orange pill CTA sits inside the card's lower edge — the product demo *is* the hero image.
- Scattered "paper chip" cards rotated ±10–20°, each a tiny fact (source icon + label + count) or a mock reply in orange text — a warm, tactile way to show breadth of data without a feature grid.
- Two-tone CTA pair: a cream secondary (#f0e6dc on #2b180a text, 12px radius, 45px tall) beside one solid orange primary — the orange is used nowhere else in the hero, so it owns the eye.
- Tonal layering instead of borders: 12–16px-radius cream cards on a slightly lighter cream ground, with dotted orbit rings at ~3% contrast as decoration.
- Source pills (icon + word) placed on concentric orbits around a portrait — a diagram that doubles as illustration.
- Chat-bubble mock as a feature illustration: the user's question in an orange bubble, the answer in a cream bubble, set inside a card headed by a serif line.
- Serif headlines kept to two lines with a full stop each — "Meet a mind. Ask it anything." — full stops make the light serif feel decisive.

## Style recipe

Build a warm, editorial, light-mode page. Ground everything on cream: page `#fdf6ee`, section cards `#f7f0e8`, secondary controls `#f0e6dc`; use `#d4c9be` for muted lines and dotted decoration and warm cocoa `#986e52` / `#7e4e36` for tertiary text and small labels. Ink is near-black brown `#2b180a` (never pure black), body copy a warm gray `#655e57`. Reserve exactly one saturated vermilion-orange (a hot red-orange, approx. `#f04a12`) for the primary button, chat bubbles and inline highlight text — it appears nowhere else. Headlines: a light-weight high-contrast serif (Martina Plantijn Light or a substitute like Instrument Serif / Fraunces Light), 56–64px, weight 300, line-height 1.0, letter-spacing −4%; keep them to two short sentences with full stops. Body: Inter 17px/1.4, weight 400, letter-spacing −1%; UI labels Inter 15px/500. Radii: 12px for buttons and inputs, 16px for cards, 140px top radius for an arch-shaped portrait card. No hairlines — separate regions by stepping one cream tone lighter or darker, and add depth with soft radial warm-orange glows behind portraits and ~3%-contrast dotted orbit rings. Buttons are solid, unbordered, 45px tall, 12×16px padding, no uppercase. Decorate with small rotated (±10–20°) paper chips carrying an icon, a label and a count, floating with a slow drift on load. Photos are warm-toned, close-cropped portraits, never product screenshots. Keep the composition centered and symmetrical, generous vertical space (120px+ between sections), and let the serif headline and one orange control carry each section.