getmiora.com

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.

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.