Pulse public homepage — design spec

Surface archetype: Decide / Learn. This is the only public face of the fleet (Young ruling 2026-10-20). One idea lands per section. A hero is correct here — it is the one surface where a hero earns its place.

Audience: anyone on the open web — prospective clients, Pulse readers, EVE/tenant evaluators. No auth, no telemetry, no fleet-internal data.

Current state (measured 2026-10-20, live prerender): two cards + a footnote on a white page. Emoji icons (📚⚡), duplicated theme toggles (header + floating bottom-right), low-contrast gray metadata, no hover states, bottom 55% dead space. Reads as scaffolding.

Slop self-audit (before fix): 6/10. Tells fired: tech gradient (no), generic tech hue (no — green brain is brand-correct), feature-tile grid (⚠ yes — two equal cards), accent rail (no), unearned blur (no), monument stat (no), icon topper (⚠ emoji as topper), center stack (⚠ mostly), default type (Inter/system — acceptable), wrong surface (no). Diagnosis: the composition is fine; the decoration and states are missing, and the dead space is a macro-spacing failure, not a micro one.

1. Design tokens

/* Surfaces */
--bg:            #ffffff        /* page canvas */
--surface:       #ffffff        /* card */
--surface-2:     #fafaf9        /* inset / secondary surface */
--border:        #e7e5e4        /* hairline */
--border-strong: #d6d3d1        /* interactive border */

/* Ink */
--ink:           #1c1917        /* primary text */
--ink-2:         #57534e        /* secondary */
--ink-3:         #a8a29e        /* metadata — raised to pass AA on white */
--ink-on-dark:   #fafaf9

/* Accent — brand green brain (single accent) */
--accent:        #16a34a        /* ok / brand / focus ring */
--accent-ink:    #ffffff
--accent-soft:   #f0fdf4        /* tinted surface */

/* Semantic (Pulse status language) */
--ok:            #16a34a
--warn:          #d97706
--err:           #dc2626

/* Type — system stack, no webfont dependency for a public mirror */
--font-sans:      ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono:      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

/* Scale (4px base) */
--space-1: 4px;  --space-2: 8px;  --space-3: 12px;
--space-4: 16px; --space-5: 24px; --space-6: 40px; --space-7: 64px;

/* Radius */
--r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 9999px;

/* Elevation — whisper, border-led not shadow-led */
--shadow-card: 0 1px 2px 0 rgba(28,25,23,.04);
--shadow-lift: 0 4px 12px -2px rgba(28,25,23,.08), 0 1px 2px 0 rgba(28,25,23,.04);

Contrast (AA checked): --ink #1c1917 on #ffffff = 15.9:1 ✅ · --ink-2 #57534e on #ffffff = 7.0:1 ✅ · --ink-3 #a8a29e on #ffffff = 2.9:1 → raised to #78716c for metadata (5.0:1) ✅ · --accent #16a34a on #ffffff = 3.3:1 → used only for large text / icons / filled surfaces with white ink (4.5:1) ✅ · --accent-ink on --accent = 3.3:1 → use --accent-ink: #052e16 for text on accent-soft, and keep accent buttons dark (--accent-strong: #15803d, ink white = 4.6:1) ✅.

2. Layout — top to bottom

┌──────────────────────────────────────────────────────────────┐
│ HEADER  logo  Young's Mind      [search]      [theme]  [menu]│
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  HERO  (left-aligned, not centered)                          │
│  ┌────────────────────────────────────────────────────────┐  │
│  │ eyebrow: PULSE · THE PUBLIC SURFACE                     │  │
│  │ H1:      Markets, briefs and research.                  │  │
│  │          In the open.                                   │  │
│  │ lede:    Short briefs, deep-dive research, podcast and  │  │
│  │          product notes — published from one vault.      │  │
│  │ CTA:     [ Browse the latest ]  [ What we publish ]     │  │
│  └────────────────────────────────────────────────────────┘  │
│                                                              │
│  LATEST STRIP  — kills the dead space (3-up, glanceable)     │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
│  │ Brief       │ │ Research    │ │ Podcast     │            │
│  │ <title>     │ │ <title>     │ │ <title>     │            │
│  │ 2h ago      │ │ 1d ago      │ │ 3d ago      │            │
│  └─────────────┘ └─────────────┘ └─────────────┘            │
│                                                              │
│  SECTIONS  — the five collections, as a directory (not tiles) │
│  Brief · Research · Podcast · Product Spec · Weekly Study    │
│  one row each: name · one-line scope · page count →           │
│                                                              │
│  FOOTER  — what this is, who runs it, contact                 │
│  Young's Mind — Melbourne · Published from the vault          │
│  [Docs (team)]  [Contact]  © 2026                             │
└──────────────────────────────────────────────────────────────┘

Why this composition: left-aligned hero (not center stack — that was the #8 slop tell), a latest strip to anchor the vertical rhythm, and the five collections as a directory row list (name · scope · count), not five equal icon cards. Equal-weight feature tiles were the original compositional slop; a directory carries hierarchy by content, not by box.

3. Components

Header — sticky, backdrop-filter: blur(12px), 1px bottom border --border. Left: logo mark (green brain SVG) + wordmark. Center: search (/ opens palette, CTRL K badge). Right: theme toggle only here (remove the floating duplicate — it was a rendering artifact), then menu on mobile.

Hero eyebrow — 12px / 600 / uppercase / letter-spacing 0.08em / --accent. Establishes the section label without a box.

H1 — clamp(2.25rem, 5vw, 3.5rem) / 600 / line-height 1.05 / letter-spacing -0.02em. Two lines max, sentence case.

Lede — 1.125rem / 400 / line-height 1.6 / --ink-2. Max 60ch.

CTA pair — primary dark pill (--accent-strong, white ink, --r-full, padding 12px 24px), secondary ghost (--surface, --border-strong, --r-full, padding 12px 20px). One primary action per screen (rule).

Latest strip cards — grid 3 cols → 1 col, gap --space-5, card: bg --surface, border 1px --border, radius --r-md, padding --space-5, shadow --shadow-card, hover → --shadow-lift + border-color --border-strong. Label (mono, uppercase, --ink-3) → title (1.05rem/600/--ink, clamp 2 lines) → age (mono 0.75rem --ink-3).

Section directory rows — border-top 1px --border, each row display flex; align-items baseline; gap --space-4; padding --space-4 0;: name (1rem/600), scope (0.875rem/--ink-2, flex-1), count (mono 0.75rem/--ink-3), arrow. Hover: row background --surface-2, arrow nudges 2px. Not cards — a directory reads faster than a grid of boxes for five collections.

Footer — --surface-2 band, padding --space-7 0. Left: wordmark + one-line description. Right: links (Docs gated → label "Docs (team)", Contact). Bottom row: © 2026 Young's Mind · Melbourne · Published from the vault. No social icons unless real accounts exist.

4. Motion

• Card hover: transform: translateY(-1px) + shadow swap, 120ms cubic-bezier(0.2,0,0,1).
• Row hover: background + arrow nudge, 120ms.
• Focus: :focus-visible ring 2px solid var(--accent) offset 2px — no outline:none without a replacement.
• prefers-reduced-motion: reduce → disable all transforms/transitions.
• No entrance animations on first paint (public mirror, fast load).

5. Responsive

Touch targets ≥44px. Toggles/arrows are real buttons with aria-label.

6. Content sources (measured, not assumed)

• Latest strip: Pulse/brief/ newest 3 files by frontmatter date.
• Section directory: five collections — Brief, Research, Podcast, Product Spec, Weekly Study (matches the forge's keeps list).
• Page counts: queryCollectionNavigation leaf counts (already used on the homepage cards today).
• Constraint: no fleet-internal data, no agent telemetry, no research notes not already public. Anything else stays in Docs.

7. Verification

• / renders hero left-aligned, latest strip 3-up, directory 5 rows
• Contrast: run the token list through npx @google/design.md lint
• prefers-reduced-motion disables transform
• Mobile drawer populated and groups expand on tap (nav fix shipped f4875eb)
• No emoji icons in the DOM (replaced with SVG)
• Only one theme toggle in the DOM

8. Do / Don't

Do — one accent (green brain), left-aligned hero, directory rows for collections, mono for counts, whisper shadows. Don't — center-stack the hero, five equal icon cards, glassmorphism, emoji icons, gradient washes, monument stats.

Handoff: Tam deploys via the forge→build lane (content side). Nova's spec is content-agnostic — it consumes the same /pulse/** collection. Register: Min (index + cross-links). Related: pulse-docs-redesign-brief, redesign-status.