happenstance.ai

Happenstance | Search your network with AIsaved 26d ago · captured 26d ago

Eight details, eight pinned.

View as Markdown ↗

Colors8 colors · ground #F8F7F6

ground#f8f7f6·94.84%#d1d1cf·2.08%#b3b2b1·0.94%#908f8e·0.45%#0b9f41·0.38%#706e6d·0.36%#4db673·0.28%#535251·0.20%

Sized by coverage · click to copy.

Typography1 family · 5 styles · ui-sans-serif

Make your own luck

ui-sans-serif · 60/60 · 600 · -1.5px

Your network is bigger than you think

ui-sans-serif · 48/48 · 600 · -1.2px

1.Connect your accounts

ui-sans-serif · 14/20 · 600 · normal

Body

Find anyone in your network. For sales, hiring, fundraising, and more.

ui-sans-serif · 20/28 · 400 · normal

Small

860

ui-sans-serif · 12/16 · 400 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsSign up2 styles

Sign upLog in

primary · fill #16a34a · label #fff1f2 · radius 8px · border 0px · padding 8px 12px · height 32px · type 14px / 500

secondary · fill — · label #161413 · radius 8px · border 0px · padding 8px 12px · height 32px · type 14px / 500

Shape5 radii · 53 uses

9999px32 uses · 60%

8px7 uses · 13%

10px7 uses · 13%

12px5 uses · 9%

16px2 uses · 4%

AnalysisHappenstance is a warm-white, system-font SaaS landing that reads like a search box with a marketing site quietly arranged around it.

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.

Style recipeBuild a light, calm SaaS site on a warm off-white ground (#f8f7f6) with pure-white (#ffffff) raised surfaces.

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.

Details8 worth noting

happenstance.ai — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Search input as hero
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.
2Warm off-white ground
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.
3Monochrome logo wall
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.
4Tinted hiring pill in nav
Nav "Careers" carries a pale-green tinted pill label "We're hiring" — accent-tinted background with accent text, 20px-ish, no border.
5Pill segmented control
Pill segmented control (MCP / API / CLI) sitting inside a hairline pill track; selected segment is a white pill with a soft shadow.
6Two-hue code block
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.
7Equal-weight button pair
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.
8Generous band of empty ground
Headline pairs centered with a generous vertical band of empty ground above the first card (roughly 200px), letting each section breathe like a slide.

saas · landing · light · minimal, corporate-clean · calm, trustworthy, confident, friendly, optimistic

happenstance.ai

More like this