hirofinance.com

A wind-down letter staged as a single sheet of paper: a 640px card in warm off-white #faf1ea, corners almost square at 2px, floating with a wide soft shadow on a full-bleed apricot mesh gradient that blurs #feb48c and #fbd4b7 into peach clouds with no hard edge anywhere. Everything inside the card is Geologica and almost nothing is bold — the headline is 30px at weight 300 and the body is 18px/28px at weight 100, a hairline weight most sites never reach for, which is exactly why the page reads as a letter rather than as marketing. There is no nav, no button, no illustration and no second column; the only chromatic ink is a blue used twice, once inline and once on a bare text link with an arrow. Below the letter, a 1px rule, a 12px tracked-uppercase eyebrow and nine hairline FAQ rows with thin plus glyphs hold the whole support burden of a shutdown without raising their voice. The tenderness is structural: warm paper, warm light, thin type, and the page's one loud element — the gradient — kept entirely outside the card so the message never has to compete with it.

Build the page as one centered sheet on a warm gradient. Ground: a full-bleed mesh of 3–5 heavily blurred radial blobs — apricot #feb48c and #fbd4b7 over #faf1ea, 200–400px blur radius, opposing corners loaded, nothing reaching the middle. Over it place a single card, 620–680px wide, background #faf1ea (warmer than the gradient's lightest value is cool — never pure #ffffff), radius 2px, padding 48px horizontal and 56–72px vertical, and one wide low-opacity shadow (roughly 0 24px 80px rgba(0,0,0,.08)). No border on the card; the shadow is the only separation.

Type: one geometric sans (Geologica, or Poppins/Jost as a stand-in) at four sizes and two weights only. Body 18px/28px at weight 100; small print 13px/20px at weight 100; headline 30px/36px at weight 300, tracking normal, never uppercase; section label 12px/18px at weight 300, uppercase, letter-spacing 1.2px (0.1em), in the muted gray. Hold the measure to ~540px / 60–65 characters and set everything left-aligned except the masthead, the date and the headline, which center. Paragraph rhythm is one blank line (~24px), never an indent.

Color roles: ink near-black #1a1a1a for headline and emphasis, #4a4a4a for body, #8a8a8a for dates, labels and footer, hairlines at #d7d6d4 (1px), and one chromatic accent — a periwinkle-blue #5b7cf5-ish — used exclusively for links, inline and standalone. No filled buttons anywhere: the primary action is a centered text link with a trailing →. Bold is reserved for dates and deadlines inside running copy, nothing else.

Lists and disclosure: build FAQ and detail sections as full-measure rows separated by 1px rules, label 15px weight 300 left, a thin + glyph flush right, ~28px of vertical padding per row — no cards, no fills, no radii. Separate major blocks with a single 1px rule and 48–64px of air, and put the footer outside the card, centered on the bare gradient at 13px gray. Motion: 150–200ms ease on link color and on the accordion's plus rotation; the gradient does not animate. The two moves that make it recognizable are the weight-100 body and the hard-edged sheet on a soft gradient — keep both or the style collapses into ordinary minimalism.