# tryhemo.com

Source: https://tryhemo.com/
Captured: 2026-09-13
Tags: saas, landing, dark, both, dark-techno, minimal, calm, technical, trustworthy, premium, serious
Colors: #031114, #2c3640, #4a5860, #6d7a7e, #8b999a, #85adf7, #c6cdce, #edf0f1
Type (h1): Instrument Sans · 34px/54.4px · 700 — "Your bloodwork, finally making sense."
Type (h2): Instrument Sans · 40px/46px · 600 · tracking -0.8px — "Upload your whole lab history"
Type (h3): Instrument Sans · 24px/28.8px · 600 · tracking -0.24px — "Trends over time"
Type (body): Instrument Sans · 21px/31.5px · 400 — "Every lab you've ever taken, privately on your Mac. See what's trending, what's "
Type (small): IBM Plex Mono · 12px/19.2px · 400 · tracking 0.96px — "01 · IMPORT"
Type (button): Instrument Sans · 13px/13px · 600 — "Join the beta"
Button (primary): "Join the beta" — text #000d0f, radius 8px, border 1px, padding 0px 14px, height 34px, type 13px/600
Button (secondary): "Features" — text #f5fafa, radius 8px, border 0px, padding 0px 12px, height 34px, type 14px/400
Radii: 24px (20), 999px (9), 10px (6), 8px (5), 14px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/tryhemo-com/hero.webp?v=7dbdce2d
- Page crop (mid-1): https://media.lvly.design/library/tryhemo-com/mid-1.webp?v=9384115e
- Page crop (mid-2): https://media.lvly.design/library/tryhemo-com/mid-2.webp?v=c46ecd22
- Hero (mobile): https://media.lvly.design/library/tryhemo-com/mobile-hero.webp?v=4507c3fe
- Full page (desktop): https://media.lvly.design/library/tryhemo-com/full.jpg?v=73ff8b60
- Full page (mobile): https://media.lvly.design/library/tryhemo-com/mobile-full.jpg?v=81786064
- Clip preview (mp4): https://media.lvly.design/library/tryhemo-com/video-ynofcv.preview.mp4?v=622f1c58

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.

## Steal-worthy details

- Hero headline split across two voices: line one bold sans (white, 56px/600, -1.96px), line two a light italic serif at the same size — one typographic gesture does all the personality.
- Periwinkle CTA (#85adf7) with a slightly lighter top edge and a soft blue outer glow, on an otherwise glow-free page — the only object that "emits light".
- App window mock cropped below the fold with a subtle rounded (24px) mac frame, flanked by floating "SNAPSHOT · 3 improving · 1 to watch" and "ApoB · Optimal · trending ↓" chips that overlap the frame edge.
- Timeline of lab reports that fades out downward (opacity falloff on the third card) instead of clipping — a soft ellipsis for "and more".
- Section eyebrow labels in small-caps-tracked periwinkle ("FEATURES") above a 44–48px headline, with body copy at 21px/31.5 in a muted gray — big, readable body text for a dark page.
- Secondary buttons are outline-only 1px hairlines on the dark ground (8px radius, 34px tall, 13px/600) — no fill, no glow, so the primary CTA stays singular.
- Data bars in the report cards use three restrained hues (blue, green, copper) with the count set as small numerals to the right rather than as axis labels.

## Style recipe

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.