tryhemo.com

Hemo is a near-black, blue-green-tinted Mac-app landing page that treats bloodwork like a quiet dashboard rather than a health-scare. The ground is a deep teal-black (#031114 over #000d0f) with a faint dot grid, and everything sits on it as a hairline-bordered, barely-lifted panel — the app window, the lab-report cards, the stat tiles. Instrument Sans carries the whole page at a tight -1.96px display tracking, but the hero pairs its bold sans with an italic serif second line ("finally making sense.") — the one flourish on an otherwise clinical page. Color is rationed: a single periwinkle (#85adf7) fills the pill-ish CTA and dots the bullets, with muted green/blue/copper only inside the charts as data. The result reads like a private medical instrument: precise, unhurried, and expensive.

Build on a near-black teal ground: page #000d0f, panels #031114–#0a161a, with a very faint dot grid at ~4% white. Every container is a 1px hairline at ~8–10% white with a 24px radius (cards, app frames); chips and status pills go fully round (999px); buttons take 8px. No drop shadows — depth comes from tonal steps and hairlines only. Use one sans family throughout (Instrument Sans or Inter): display 56px/600 at -1.96px tracking, section heads 44px/600, body 21px/400 at 1.5 line-height in a muted gray (#8b999a), captions 13px. Reserve one italic serif (Instrument Serif or similar, weight 400) for a single contrasting line inside the hero headline and nowhere else. Text scale: white (#edf0f1) for heads, #c6cdce for primary body, #6d7a7e for meta. One accent, periwinkle #85adf7: fill the primary CTA with it (dark text #000d0f, 13–15px/600, a 1px lighter inner top edge and a 0 0 24px rgba(133,173,247,.35) glow), use it for eyebrow labels and bullet dots, and never for large surfaces. Secondary buttons are outline-only on the dark ground. Charts and status colors are the only other hues — muted blue, sage green, copper at ~70% saturation — and they live inside data only. Section eyebrows are 12px, uppercase, +0.12em tracking, in the accent. Float small rounded status chips over the corners of product mocks, and fade long lists out with an opacity gradient rather than a hard cut. Keep generous vertical rhythm (160–200px between sections) and center the hero; left-align everything after it on a 1200px container.