# getmiora.com

Source: https://www.getmiora.com/
Captured: 2026-09-20
Tags: saas, landing, dark, both, luxury, editorial, glassmorphic, premium, confident, calm, trustworthy, warm
Colors: #505f69, #354752, #1e1a0f, #473824, #755f45, #85837e, #a7a29d, #6f4517
Type (h1): Junicode VF · 56px/54.88px · 400 · tracking -1.12px — "Don't start peptides alone. Don't start peptides alone. Start with a specialist "
Type (h2): Junicode VF · 52px/56.16px · 400 · tracking -1.04px — "How miora works"
Type (h3): Montserrat · 32px/33.92px · 400 · tracking -0.96px — "Complete your health assessment & meet your longevity clinician"
Type (body): Montserrat · 16px/24.8px · 400 — "Your protocol built around your goals, labs, and history. Someone watching every"
Type (small): Montserrat · 11px/16.5px · 400 · tracking 0.55px — "Invite-only · Reviewed within 48 hours · From $129/month"
Type (button): Montserrat · 12.5px/12.5px · 600 · tracking 0.125px — "Book a consultation"
Button: "Book a consultation" — text #ffffff, radius 9999px, border 1px, padding 8px 16px, height 31px, type 12.5px/600
Radii: 9999px (8), 32px (8), 12px (8), 19.2683px (7), 50px (5)

## Images

- Hero (desktop): https://media.lvly.design/library/getmiora-com/hero.webp?v=e4d8efd6
- Page crop (mid-1): https://media.lvly.design/library/getmiora-com/mid-1.webp?v=1358e47f
- Page crop (mid-2): https://media.lvly.design/library/getmiora-com/mid-2.webp?v=8f2d7cb5
- Hero (mobile): https://media.lvly.design/library/getmiora-com/mobile-hero.webp?v=3d31a749
- Full page (desktop): https://media.lvly.design/library/getmiora-com/full.jpg?v=372e5eb0
- Full page (mobile): https://media.lvly.design/library/getmiora-com/mobile-full.jpg?v=30a8e29d
- Clip preview (mp4): https://media.lvly.design/library/getmiora-com/video-88jdsr.preview.mp4?v=81b8b465

A pure-black longevity-concierge page that spends its whole budget on two things: photography and a serif. The hero is a full-bleed action frame — a tennis serve shot from behind, blond hair blown across the racket — with no scrim, no gradient and no overlay panel; the headline simply sits on it in white Junicode at 56px with a line-height under 1 (54.88px) and −1.12px tracking, so the two lines lock into a single typographic block against the blue-gray of the sky. Everything below drops to #000000 and stays there: a five-step ladder of zero-padded numerals (01–05) alternating a short Montserrat column against a floating UI mock, a serif pull quote, a three-portrait triptych captioned "The athlete / The seeker / The biohacker," and then one eruption of color — a macro ember photograph carrying two frosted 32px-radius pricing cards, the only warm frame on the page until the footer clips the wordmark into the same fire and bleeds it off both edges. The restraint is what makes it read as premium: the CTA is a 31px outline pill in 12.5px semibold, roughly a fifth the height of the headline it sits under, and the only loud element anywhere is a photograph. A small filled "See if you qualify" pill stays pinned to the top center through the entire scroll, which is the one piece of persistent chrome the design allows itself.

## Steal-worthy details

- Unscrimmed photographic hero — the headline is set straight onto the image with no overlay, no darkening layer and no text panel; the crop is chosen so the subject's mass sits low-left and the sky opens a naturally quiet band exactly where the type lands
- The header has no bar of its own: no fill, no border, no blur, no shadow — just a white wordmark left, three 16px links centered and an outline pill plus a text "Log in" right, floating directly on the photograph
- The primary CTA is deliberately tiny: a 31px-tall outline pill (`border-radius: 9999px`, 1px hairline, transparent fill, 8px/16px padding) in 12.5px/600 Montserrat under a 56px serif headline — the scale gap does the persuading instead of a big filled button
- A qualifier line replaces a second CTA: 11px with 0.55px tracking, dot-separated — invite-only, review window, entry price — so gating, speed and cost are all stated above the fold in one 60%-opacity string
- Two families with a hard job split: the serif is display-only (h1 56px, h2 52px, both weight 400, tracking −0.02em, line-height 0.98–1.08), and the sans takes everything from h3 down — including a 32px h3, which is bigger than most pages' h2 and still reads as body voice
- The how-it-works section is a numbered ladder, not a card grid: 01–05 in zero-padded serif numerals, each step alternating a two-line heading plus three lines of copy against a floating product or app mock, separated by tall empty black rather than borders
- Pricing is the page's only warm frame: two frosted cards (32px radius, 1px white hairline, backdrop blur) laid over a macro ember photograph, with the tier name in a small outlined uppercase pill, the price in 56px+ sans, checkmark rows, and a solid white pill CTA inside each card
- The footer ends on a wordmark blown up to viewport width, clipped to the same fire photograph and bled off both edges, paired with a live count set in the display serif and an "online" dot — a closing signature rather than a logo

## Style recipe

Build on pure black (`#000000`) and let photography be the only color. Set every display line in a high-contrast old-style serif — h1 56px / weight 400 / line-height 0.98 / tracking −0.02em, h2 52px / 1.08 / −0.02em — and hand everything else to a geometric sans (Montserrat or similar): h3 32px/400 with −0.03em tracking, body 16px/1.55, small 11px with +0.05em tracking at ~60% white, buttons 12.5px/600. Never mix the two within one heading.

Color roles: page and section grounds `#000000`; text `#ffffff` at 100% for headings, ~70% for body, ~55% for legal and microcopy; one warm ember accent in the `#6f4517`–`#a8632a` band, introduced only through a photograph or a gradient fill, never as a flat brand block. No borders except 1px white hairlines at 10–20% opacity.

Radii are a two-step scale: `9999px` for every pill (buttons, tier chips, tags) and `32px` for large panels, with `12px` reserved for small inline mocks. Buttons come in exactly two weights — an outline pill (transparent, 1px hairline, white label, 8px/16px padding, ~31px tall) for navigation and hero, and a solid white pill with black label inside a priced card. Keep them small; contrast comes from the type scale, not from button mass.

Layout: one idea per full viewport, centered maxima around 1100–1200px, and vertical rhythm measured in empty black — 160–240px between blocks — rather than in dividers. For process or feature sequences, use zero-padded serif numerals in a left column with a floating UI mock opposite, alternating sides down the page; give each mock a soft dark card with a barely-visible edge so it appears lit rather than framed. Photographic sections run full-bleed with no scrim: pick crops with a natural quiet zone and put the type there.

Shadows are atmospheric, never architectural — large, low-opacity black glows under floating mocks, plus `backdrop-filter: blur(20px)` on any panel sitting over a photograph. Motion is slow and subtle: 400–600ms fades with a small upward translate on scroll, and no bounce. The two moves that make the style recognizable are the giant serif set directly on an unretouched photograph with no overlay, and the single warm photographic section that interrupts an otherwise monochrome black page — repeated once more at the end as an oversized wordmark clipped to that same image.