# G4 · Simone Adler — review

I read these the way I read any pitch: view-source first, screenshots second. Type pairings, easing curves, and palette counts don't lie the way heroes do. Five of the six escape the template gallery to some degree — one walks straight back into it — and two of them understand something most brand work never does: the logo is a vocabulary, not a sticker.

## 01 — Field Notes
- Scores: First impression 9 · Trust 8 · Clarity 8 · Resonance 8 · Craft 9 · Action 7 · **Total 49/60**
- Likes:
  - The masthead discipline: `border-top:3px solid var(--terra)` on the body plus the 56px terracotta tab on every `.rule::after`. A one-line signature repeated at every section seam — this is how you brand a page for the cost of a pseudo-element.
  - The hero headline typesets itself: each `.hl` is an `overflow:hidden` clip with `setline .8s` staggered at .18/.30/.42s, and then the acacia mark inks in trunk-first, pad-by-pad — eleven ellipses at 70ms intervals (.86s→1.56s). The mark is *drawn*, not pasted. Best logo treatment in the set alongside 06, and the most controlled entrance sequence.
  - The marginalia column — `grid-template-columns:150px minmax(0,1fr)` with the italic terracotta `.sec-no` and olive `.sec-note` ("boundaries, by design") — gives every section a distinct left voice. And it doesn't die on mobile: it collapses to a baseline flex row instead of vanishing.
  - The typographic jokes with a straight face: `content:"*\2002"` turning the trust line into a footnote, the dagger `\2020` on the 201–203 aside. Newsreader + IBM Plex Sans is a pairing with actual tension — warm text face against a cool grotesk for wayfinding.
- Dislikes:
  - `.cur-cell:hover{transform:translateY(-2px); box-shadow:0 10px 26px -16px…}` — the one generic card-lift in an otherwise ruled, line-based system. These are ledger entries; they should not audition as SaaS cards on hover.
  - The `.plate` safety panel with its double inset box-shadow frame (`inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--line)`) tips into diploma pastiche. The register is journal, not certificate.
  - `align-items:end` on the hero grid parks the mark at the headline's baseline; between ~900–1050px the right column floats with dead air above it before the breakpoint rescues it.
  - The curriculum reveal delays (.0/.07/.14/.05/.12/.19) are choreographed for the 3-column grid; at the 960px 2-column layout the stagger scrambles into visual noise.
- Verdict: The one page where I stopped grading and started reading — a print designer's instincts executed in CSS, minus two ornaments it didn't need.

## 02 — Indigo Oath
- Scores: First impression 6 · Trust 8 · Clarity 8 · Resonance 5 · Craft 6 · Action 7 · **Total 40/60**
- Likes:
  - `--brass-ink:#7E621E` with the inline comment "darker brass for small text on ivory (AA contrast)" — someone ran the contrast math and left the receipt. That is professional behavior.
  - The syllabus card in the hero is a genuine artifact — head, "Core" divider, and "No patient data, ever." as the ledger's own footer line — instead of a decorative illustration. It sells the product by *being* the product.
  - The `catchUp()` scroll listener that rescues any `.reveal` stranded above the viewport after a fast anchor jump — a failure mode 95% of scroll-reveal builds ship broken.
  - The scroll-driven `.tl-fill` brass line with dots re-lighting bidirectionally against a 62%-viewport trigger is engineered cleanly (rAF-throttled, px-computed).
- Dislikes:
  - Indigo + brass + Lora is the factory-default "trust palette" — this is the one concept I could plausibly find on a template marketplace. Every choice is safe; no choice is a signature. Even the `.you` brass underline in the H1 is the expected move.
  - The three white `border-radius:10px` pain cards with `box-shadow:0 1px 2px` — the uniform card grid is exactly the AI-template tell I screen for.
  - The unlit timeline state sets sessions to `opacity:.44` until the brass line reaches them — meaning a reader who scrolls at reading speed is served greyed-out body copy below the 62% line. Motion should never tax legibility.
  - The reduced-motion handler nukes everything with `*{transition-duration:.01ms !important}` — a blunt instrument that also kills the harmless nav border fade its own JS still toggles.
- Verdict: The most trustworthy and the least interesting page in the room — a firm handshake from a stranger I will not remember tomorrow.

## 03 — Savanna Dawn
- Scores: First impression 7 · Trust 5 · Clarity 7 · Resonance 7 · Craft 9 · Action 6 · **Total 41/60**
- Likes:
  - Optical sizing, actually used: `font-variation-settings:'opsz'` tuned per role — 100 on the H1, 72 on H2s, 60 on the session numerals, 40 on the italic contrast lines. Almost nobody touches Fraunces' opsz axis deliberately. This is real typography, not font-picking.
  - The sunrise is the single best brand moment of round 2: the mark rendered as landscape — glow gradients rising over 3.3s on a custom `cubic-bezier(.33,.09,.18,1)`, a gradient horizon hairline, the acacia in near-black silhouette, then the two canopies swaying at 17s and 21s alternate, offset per tree. The logo has weather.
  - The `feTurbulence` film grain at .05 opacity on `body::before` keeps the dark ground from going flat-black — the difference between "dark theme" and "night."
  - The hand-drawn underline on "Six" via `pathLength:1` stroke-dashoffset draw, gated correctly for reduced motion.
- Dislikes:
  - The card hover — `box-shadow:0 0 0 1px rgba(226,164,78,.14), 0 18px 44px -22px rgba(226,164,78,.22)` honey glow on dark surfaces — is the dev-tool/web3 landing idiom, the precise smell a hype-allergic physician audience will flinch at. The dawn made a promise; the glowing cards break it.
  - Under the atmosphere, the structure is still three uniform rounded `--surface` rectangles, three times over (pains, sessions, steps).
  - The hero performs for ~3.8 seconds before resolving (.45s delay + 3.3s sunrise), sway not starting until 4.2s — longer than a skimmer stays above the fold.
  - Session-grid stagger runs to `--d:.45s`; by card six the reveal reads as lag, not rhythm.
- Verdict: The most cinematic craft in the set wearing the wrong genre's costume — I'd frame the hero and re-cut everything below it in daylight.

## 04 — Morning Clinic
- Scores: First impression 5 · Trust 5 · Clarity 7 · Resonance 6 · Craft 6 · Action 6 · **Total 35/60**
- Likes:
  - The Wednesday card is a legitimately good idea told in motion: chips scatter in from per-chip `--sx/--sy/--sr` transforms and settle on a 140ms stagger, tick strokes draw at `.95s + i*.14s`, and the "Sorted" pill lands at 2.35s. It's the only concept that dramatizes the offer instead of describing it.
  - The mobile degradation is honest: `.chip{position:static}` stacks the same content as plain layout — the animation is garnish, not load-bearing.
  - Two easings, each with a job: `--spring:cubic-bezier(.34,1.4,.5,1)` reserved for hovers, `--glide:cubic-bezier(.22,1,.36,1)` for entrances. More discipline than the visual language deserves.
- Dislikes:
  - Everything around the hero is the AI-generated-SaaS starter pack: `.pill` badges with status dots, `border-radius:999px` buttons, `icon-disc` rounded-square line icons, mint `.band` alternation, dotted `.step::after` connectors. Cleanly executed, and indistinguishable from every telehealth startup's landing page. This is the smell.
  - Palette without an editor — spruce, coral, sun, and mint all claim accent status, and the coral `btn-coral` finale belongs to a different brand than the spruce `btn-primary` in the same nav.
  - The mark gets no treatment at all: 2.1rem of nav furniture and one mid-page repeat at `--spruce`. In the concept where two other teams made the logo the show, this one made it a favicon.
  - Sora for headings is this season's geometric sans — it will date the page faster than anything else on it.
- Verdict: One inspired hero animation stapled to a template I have rejected forty times — the Wednesday card deserves a better house.

## 05 — Honey Ledger
- Scores: First impression 8 · Trust 6 · Clarity 9 · Resonance 7 · Craft 9 · Action 8 · **Total 47/60**
- Likes:
  - The masked numeral reveal: `.num{transform:translateY(-112%)}` inside `.num-clip{overflow:hidden}`, easing in on `cubic-bezier(.16,1,.3,1)` — 104px Archivo Black ledger numbers arriving like letterpress plates dropping into a chase. Signature motion with genuine taste, and it *is* the content.
  - `.hl` with `-webkit-box-decoration-break:clone` so the animated marker highlight wraps multi-line text correctly — the detail nine out of ten highlight effects ship broken.
  - The ledger rows are an interface, not decoration: `.lrow--core:hover` inverts the full row to ink with the numeral flipping honey; `.lrow--f:hover` floods honey — gated behind `@media(hover:hover)` so touch devices never see a stuck state.
  - Palette discipline of the whole round: paper, ink, honey, one brown support tone. Square-cornered buttons. Nothing borrowed.
  - Chrome earned, not defaulted: the fixed section rail appears only ≥1400px, tracks `aria-current` through a -38%/-55% rootMargin band; the nav carries a 2px scroll-progress hairline; a 900ms `ioFired` timeout un-hides everything if observers get throttled. Someone thought about failure.
  - The `hero-index` strip — 001/101…106 in tabular figures between hairlines — is a table of contents as typography.
- Dislikes:
  - Archivo 900 at -.035em, everywhere, with a 108px hero — the volume is set at 11 for an audience that equates loud with being sold to. The craft says design annual; the register says sneaker drop.
  - The inset-honey-underline trick appears four times (`.pain-n`, `.step-n::after`, `.hl`, the `.p-init` portrait boxes) — by the founders section the one gag is doing all the work.
  - "Real photos pending." shipped inside `.p-note` — an internal TODO leaked into the interface. Cut it or design the placeholder.
  - `position:fixed` nav with a hardcoded `padding-top:68px` on body instead of sticky — one wrapped nav line at 420px and the layout lies.
- Verdict: The best pure graphic design in the round, printed at a volume the client's reader may not forgive — I'd take it to 80% ink and sign it.

## 06 — Quiet Garden
- Scores: First impression 8 · Trust 7 · Clarity 7 · Resonance 6 · Craft 8 · Action 6 · **Total 42/60**
- Likes:
  - The spine is the most original transition device in the set: sand hairlines growing between sections through a lerped rAF loop (`spineState[i] += (target - spineState[i]) * 0.06`), with the terminal diamond fading in only over the last 15% of growth (`opacity:calc((var(--p) - 0.85)/0.15)`). Scroll-linked motion that never snaps — the physics have manners.
  - The smartest conceptual mark treatment here: the hero's drifting pads are the acacia canopy's own ellipses, scattered as atmosphere and parallaxed by `--sy * --d`. The logo's geometry becomes the page's texture rather than its stamp.
  - One hover idea applied everywhere: the `::after{inset:9px; border:1px solid var(--sand)}` inner frame fading in on cards, the safety mat, the foundations tile, the portraits. A system, not a collection of effects.
  - Quietly modern CSS: `color-mix(in srgb, var(--sage) 88%, transparent)` on the nav, `oldstyle-nums` on the session numerals, a reduced-motion block that renders every state final rather than merely fast.
- Dislikes:
  - Animating `letter-spacing` from .16em to .24em on nav links *and buttons* reflows the text and changes the button's rendered width on every hover — visible layout shift as a house style. Elegant in the spec, jittery in the hand; this is the craft flaw I can't unsee.
  - Every section sits on the center axis — hero, all section-heads, safety, founders, the 201–203 aside, the contrasts, the finale. With no asymmetric counterpoint anywhere, the fifth centered block turns serenity into monotone.
  - EB Garamond is lovely at the 1.1875rem body size on retina and spindly at 1x; the 0.68rem tracked Jost `.p-role` caps are one size below dignity.
  - A 100svh hero plus 130px spines plus 7.5rem section padding pushes the sessions two viewports deep — the calm is billed to the skimmer.
- Verdict: A beautiful hush with a real signature — but a page this quiet cannot afford its one nervous tic, and the hover jitter is exactly that.

## Ranking
1. **01 — Field Notes (49/60)** — the only page where type, rules, motion, and the mark speak one editorial language, and the entrance choreography has print-grade control.
2. **05 — Honey Ledger (47/60)** — the strongest graphic system and the best-engineered chrome in the round; loses only on register, shouting at an audience that whispers.
3. **06 — Quiet Garden (42/60)** — the most original motion concept (the spine) and the smartest logo thinking, undermined by hover reflow and wall-to-wall centering.
4. **03 — Savanna Dawn (41/60)** — the best single brand moment of round 2 (the sunrise) attached to glow-card styling from the wrong industry.
5. **02 — Indigo Oath (40/60)** — impeccably responsible, contrast-audited, fallback-proofed — and aesthetically anonymous; the template smell wears a nicer suit here, but it's still the suit.
6. **04 — Morning Clinic (35/60)** — one genuinely inventive hero animation surrounded by the pill-badge, icon-disc, rounded-card starter pack I'm paid to reject.