# hirofinance.com

Source: https://hirofinance.com/
Captured: 2026-09-20
Tags: saas, blog, light, both, minimal, editorial, organic, calm, warm, human, elegant
Colors: #faf1ea, #feb48c, #fbd4b7, #d7d6d4, #b2b2b0, #959593, #747473, #bac9f9
Type (h1): Geologica · 30px/36px · 300 — "Hiro is joining OpenAI"
Type (h2): Geologica · 12px/18px · 300 · tracking 1.2px — "FREQUENTLY ASKED QUESTIONS"
Type (body): Geologica · 18px/28px · 100 — "We started Hiro with the vision of building an AI personal CFO, and we worked re"
Type (small): Geologica · 13px/20px · 100 — "No. As a part of Hiro's wind down, all of your personal data will be permanently"
Radii: 50% (5), 2px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/hirofinance-com/hero.webp?v=4462e9b0
- Page crop (mid-1): https://media.lvly.design/library/hirofinance-com/mid-1.webp?v=894cf38c
- Page crop (mid-2): https://media.lvly.design/library/hirofinance-com/mid-2.webp?v=4d0b1c34
- Hero (mobile): https://media.lvly.design/library/hirofinance-com/mobile-hero.webp?v=619769f4
- Full page (desktop): https://media.lvly.design/library/hirofinance-com/full.jpg?v=8fc09f3d
- Full page (mobile): https://media.lvly.design/library/hirofinance-com/mobile-full.jpg?v=5a218fc3
- Clip preview (mp4): https://media.lvly.design/library/hirofinance-com/video-s2u5t6.preview.mp4?v=6ade4a85

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.

## Steal-worthy details

- The whole page is one card and one background — a 640px sheet (44% of a 1440 viewport) at `#faf1ea`, ~48px inner padding, a near-square 2px radius and a wide diffuse shadow, sitting on a gradient it never touches
- Body copy at weight **100**, 18px/28px (1.56 line height) — a hairline that turns a corporate notice into handwriting, and only works because the measure is short (~540px, ~62 characters) and the ink is near-black on warm paper
- The headline barely outranks the body: 30px/36px at weight 300, normal tracking, no color change — a 1.7× step over body instead of the usual 3×
- The date is the only thing above the headline, set small and gray and centered — it does the job an eyebrow label would, and dates the letter at the same time
- Apricot mesh gradient built from heavily blurred blobs — `#feb48c` concentrated top-left and bottom-right over `#faf1ea`, no visible stop or seam, and it covers a third of the viewport without a single hard edge
- Zero buttons on the entire page: the one call to action is a centered blue text link with a trailing `→`, and the one inline link is the same blue in running copy — the only chromatic ink in the design
- FAQ as hairline rows, not cards: a 12px uppercase heading at 1.2px tracking, then nine full-measure rows each closed by a 1px rule with a thin `+` flush right — an accordion that adds no boxes to the page
- The footer is deliberately outside the card, centered on bare gradient — copyright plus two small links — so the letter ends where the paper ends

## Style recipe

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.