# happenstance.ai

Source: https://happenstance.ai/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, calm, trustworthy, confident, friendly, optimistic
Colors: #f8f7f6, #d1d1cf, #b3b2b1, #908f8e, #0b9f41, #706e6d, #4db673, #535251
Type (h1): ui-sans-serif · 60px/60px · 600 · tracking -1.5px — "Make your own luck"
Type (h2): ui-sans-serif · 48px/48px · 600 · tracking -1.2px — "Your network is bigger than you think"
Type (h3): ui-sans-serif · 14px/20px · 600 — "1.Connect your accounts"
Type (body): ui-sans-serif · 20px/28px · 400 — "Find anyone in your network. For sales, hiring, fundraising, and more."
Type (small): ui-sans-serif · 12px/16px · 400 — "860"
Type (button): ui-sans-serif · 14px/20px · 500 — "Sign up"
Button (primary): "Sign up" — fill #16a34a, text #fff1f2, radius 8px, border 0px, padding 8px 12px, height 32px, type 14px/500
Button (secondary): "Log in" — text #161413, radius 8px, border 0px, padding 8px 12px, height 32px, type 14px/500
Radii: 9999px (32), 8px (7), 10px (7), 12px (5), 16px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/happenstance-ai/hero.webp?v=29fe7c33
- Page crop (mid-1): https://media.lvly.design/library/happenstance-ai/mid-1.webp?v=9f91d80e
- Page crop (mid-2): https://media.lvly.design/library/happenstance-ai/mid-2.webp?v=b7a09a18
- Hero (mobile): https://media.lvly.design/library/happenstance-ai/mobile-hero.webp?v=2f37e312
- Full page (desktop): https://media.lvly.design/library/happenstance-ai/full.jpg?v=99789019
- Full page (mobile): https://media.lvly.design/library/happenstance-ai/mobile-full.jpg?v=dd82fad8
- Clip preview (mp4): https://media.lvly.design/library/happenstance-ai/video-vs8xyh.preview.mp4?v=8655fe8b

Happenstance is a warm-white, system-font SaaS landing that reads like a search box with a marketing site quietly arranged around it. The page ground is a faintly warm off-white (#f8f7f6) rather than pure white, and almost everything on it is grayscale — 60px/600 tightly tracked headline, muted gray body copy, desaturated gray partner logos — so the one color, a clover green (#16a34a), lands with real force on the CTA, the submit arrow, the "We're hiring" pill and the four-leaf mark. Pill radii dominate (9999px on 32 elements): the hero search bar, the primary buttons, the segmented MCP/API/CLI toggle. Further down, sections become large white cards with a 1px hairline and a soft shadow lifted just off the ground, holding a centered headline pair and a code block that uses only two hues of syntax color. The overall effect is Apple-adjacent restraint with a single friendly accent: calm, unhurried, and confident enough to make the product's input field the hero image.

## Steal-worthy details

- The hero *is* the product: a pill-shaped search input with a pre-filled example query ("Most promising AI founders in my network") and a small green circular submit arrow — the demo and the CTA are the same object.
- Warm off-white page (#f8f7f6) with pure-white raised cards; the difference is tiny but gives the sections tonal layering without any borders doing heavy lifting.
- Strictly monochrome logo wall (Perplexity, Thrive, Lovable, YC, Greylock, Brex, Accel, Cognition, AngelList) in a mid gray, so the green stays the only chroma above the fold.
- Nav "Careers" carries a pale-green tinted pill label "We're hiring" — accent-tinted background with accent text, 20px-ish, no border.
- Pill segmented control (MCP / API / CLI) sitting inside a hairline pill track; selected segment is a white pill with a soft shadow.
- Code block on a slightly darker warm gray inset with a filename caption and a copy icon in the corner; syntax color limited to blue for keys/values and green for the URL string.
- Primary + secondary button pair in the hero: solid green pill and a white bordered pill with the Google glyph — equal height (about 48px), equal weight.
- Headline pairs centered with a generous vertical band of empty ground above the first card (roughly 200px), letting each section breathe like a slide.

## Style recipe

Build a light, calm SaaS site on a warm off-white ground (#f8f7f6) with pure-white (#ffffff) raised surfaces. Use the system sans stack (ui-sans-serif, system-ui, -apple-system, Inter as fallback). Headlines 56–60px, weight 600, line-height 1.0, letter-spacing -1.5px, near-black (#1a1a1a). Body 18–20px, weight 400, line-height 1.4, mid gray (#706e6d); captions 14px in #908f8e. Keep everything grayscale except one accent: green #16a34a for primary buttons, icons, the brand mark and small tinted labels (accent at ~12% alpha as a pill background with the accent as text). Primary buttons are solid #16a34a with white text, 500 weight, 14–16px, fully rounded (9999px), 32px tall in the nav and ~48px in the hero; secondary buttons are white with a 1px #d1d1cf border, same radius and height. Inputs are pill-shaped, white, 1px hairline border, soft shadow, with a circular accent submit button inset on the right. Sections sit inside large white cards with 16px radius, 1px #e5e4e2 border and a soft diffuse shadow (0 8px 32px rgba(0,0,0,0.06)), centered content, and 160–200px of ground above them. Code and inset panels use a slightly darker warm gray (#f1f0ee) with 10–12px radius and a monospace caption. Segmented controls are hairline pill tracks with a white shadowed pill for the active item. Logos and third-party marks render in mid gray (#b3b2b1) only. No gradients, no illustration; motion is limited to subtle fades on load. Prefer centered single-column compositions with a max content width around 1200px and let whitespace, not rules, separate sections.