# Floom hero variants v2 — design notes

Federico's v1 critique: "the Apple ones are way cheaper than Apple. Apple is way more high class, not as many colours and not so much going on. Visually easier to digest."

Discipline applied to every variant in v2:
- **Max 2 colors** (one neutral + one accent), unless the variant identity is monochrome
- **Strictly fewer elements** than v1 (no product window + chips + URL bar + 2 CTAs + agent row stacked in hero)
- **H1 ≥ clamp(64px, 9vw, 124px)** — go big or don't show up
- **≥40% empty viewport** — silence is the design
- **One motion** per variant — not three
- **One material** (glass OR solid OR gradient) — never combined
- **No mascot** in hero, except #09 which faithfully captures the reference image

---

## 01 — Apple homepage

**Removed vs v1**: hero card, mascot, chips, URL bar, agent row, ambient gradient, second visual.
**The single move that earns its space**: text-only hero with apple.com link-style CTAs ("Try $ npx floom init ›"). No buttons. No image. Three elements total in the frame: H1, sub, two link-CTAs.
**Could still be cheaper than Apple**: the H1 might still be slightly too long; Apple often caps at 8 words. Could shorten to "One library. Every agent."

## 02 — visionOS Liquid Glass

**Removed vs v1**: rainbow mesh, grain, second visual, multi-card stack.
**The single move that earns its space**: the italic phrase ("across every agent") gets a single 2-stop blue→violet gradient that slowly hue-shifts. Everything else is monochrome on deep gray #1d1d1f.
**Could still be cheaper than Apple**: the gradient might still tip into "AI gradient" — could be tightened to a single 1-stop accent if Federico wants more silence.

## 03 — Apple Music for Artists editorial

**Removed vs v1**: every multi-color element. Now monochrome. No product visual.
**The single move that earns its space**: thin display weight (font-weight: 200) on the H1, with ONE word ("Synced everywhere.") at semibold. The mixed weight IS the design.
**Could still be cheaper than Apple**: the spotlight radial behind the text might be too "designed" — Apple Music for Artists often uses pure black with no gradient at all.

## 04 — Linear v3 minimalist

**Removed vs v1**: command palette mockup, ambient spotlight, multi-color tags, product visual.
**The single move that earns its space**: italic phrase carries the only color (blue→violet gradient). Otherwise pure type on near-black, generous left-aligned breathing room.
**Could still be cheaper than Apple**: still has a left-aligned grid feel; could go to a single centered column to feel more disciplined.

## 05 — Vercel post-2024

**Removed vs v1**: dot-grid bg, geometric agent proof row, multi-cell visual.
**The single move that earns its space**: the H1 is monospace (Geist Mono) with one underlined word ("library"). The CTA has a blinking caret. Pure white, pure black, single accent on the link.
**Could still be cheaper than Apple**: the underline is the one quirky moment; could remove if it feels too "designer".

## 06 — Cron paper

**Removed vs v1**: glass library card on right, agent row, mock data table.
**The single move that earns its space**: full Newsreader serif (italic + roman) instead of mixing fonts. One soft-shadow CTA chip. The "Thursday · May 7" kicker is the only date-tile reference (Cron's signature).
**Could still be cheaper than Apple**: the warm cream might still feel "earnest startup" — could go cooler/grayer if Federico wants Apple-quiet.

## 07 — WeTransfer full-bleed

**Removed vs v1**: rainbow gradient bg, vignette, grain, dropcap, three-column layout.
**The single move that earns its space**: SINGLE deep-tone field (no gradient at all — just #1f3a2f forest), with a giant italic serif h1 falling into place. Footer-row is the only chrome.
**Could still be cheaper than Apple**: this is closest to actual WeTransfer brand. Could push h1 even bigger (already at 200px max).

## 08 — NYT print editorial

**Removed vs v1**: multi-column body, dropcap, accent color, side rail.
**The single move that earns its space**: italic Newsreader h1 at 180px max, single 64px rule below the deck. Pure paper white + ink black. Masthead bar is the only chrome.
**Could still be cheaper than Apple**: this is more NYT than Apple — but that's intentional. The masthead might be too literal a quote — could swap for a single line.

## 09 — Floom original vibe (poster)

**Removed vs v1**: the URL bar, the workflow/needs-github chips, the second sidebar visual.
**The single move that earns its space**: faithful to the reference image — cream + sage gradient, MIT pill in the brand row, LAUNCH ANNOUNCEMENT capsule, Instrument Serif italic h1, single floating glass card with mascot + skill, Works with row at bottom. This is the ONLY variant with a card.
**Could still be cheaper than Apple**: the mascot and "by floom community" byline are sentiment that Apple wouldn't ship. But the brief was to capture the reference vibe — kept faithful.

## 10 — Brutalist / Swiss type-only

**Removed vs v1**: every graphic element. ZERO. Just type.
**The single move that earns its space**: clamp(80px, 14vw, 240px) Inter Tight at 800 weight, -0.06em letter-spacing, three lines stacked. Single rule top + bottom (Müller-Brockmann grid). Letter-by-letter mask reveal on load.
**Could still be cheaper than Apple**: this is intentionally NOT Apple — it's Swiss type. Pure brutalism. If anything, it could be even more disciplined (drop the masthead/footer rules entirely).

---

## How to read v2 vs v1

| | v1 (rejected) | v2 (this batch) |
|---|---|---|
| Avg colors per hero | 4-6 (rainbow gradients common) | 1-2 (monochrome or neutral+accent) |
| Avg elements in hero frame | 6-9 (eyebrow + h1 + sub + CTA + product visual + chips + agent row + decoration) | 3-5 (eyebrow + h1 + sub + CTA + ONE proof element max) |
| Hero h1 max font-size | 110px–168px | 124px–240px (bigger, more confident) |
| Material treatments | Often 2+ (glass + gradient + grain) | One (glass OR solid OR gradient) |
| Mascot in hero | Common | Only in #09 (the reference variant) |

If even v2 still feels "designed" — the next move is to go further: cap directions to top 3, refine to extreme silence (e.g., 01 + 02 + 09).