feat: redesign homepage as benchmark evidence rig

Author: jonathanperis

.impeccable/critique/2026-05-16T22-22-50Z__docs-src-pages-index-astro.md

@@ -0,0 +1,176 @@
+---
+target: docs/src/pages/index.astro
+total_score: 27
+p0_count: 0
+p1_count: 2
+timestamp: 2026-05-16T22-22-50Z
+slug: docs-src-pages-index-astro
+---
+# Impeccable Critique: rinha2-back-end-rust homepage
+
+## Design Health Score
+
+| # | Heuristic | Score | Key Issue |
+|---|---:|---:|---|
+| 1 | Visibility of System Status | 2 | Benchmark numbers are visible, but latest/best/target provenance is not explicit. |
+| 2 | Match System / Real World | 3 | Rust-industrial mood fits the challenge and audience. |
+| 3 | User Control and Freedom | 3 | Clear docs/GitHub/report paths; no complex flows. |
+| 4 | Consistency and Standards | 3 | Strong palette and component consistency, but repeated card grammar dominates. |
+| 5 | Error Prevention | 2 | Not flow-heavy, but users can misread unsupported metric claims because source context is missing. |
+| 6 | Recognition Rather Than Recall | 3 | Key stack and metrics are visible; architecture details require reading docs. |
+| 7 | Flexibility and Efficiency | 2 | Technical reviewers need faster access to latest run, workflow, source, and architecture proof. |
+| 8 | Aesthetic and Minimalist Design | 2 | Attractive, but too much generic hero, badges, card grids, glow, and gradient text. |
+| 9 | Error Recovery | 3 | Mostly static navigation, low risk; report links are present. |
+| 10 | Help and Documentation | 4 | Docs, GitHub, CI, reports, and archive links are surfaced. |
+| **Total** |  | **27/40** | **Good foundation, needs proof-first restructuring.** |
+
+## Anti-patterns Verdict
+
+**LLM assessment:** Not AI slop, but it is close to the common dark developer landing template: centered hero, gradient-filled headline, pill badges, paired CTAs, rounded metric cards, glow/cog decoration, and repeated card grids. The content itself is credible and specific, which saves it from generic AI-site territory.
+
+**Deterministic scan:** `npx impeccable detect --json src/pages/index.astro src/components/home src/layouts/BaseLayout.astro` returned one warning: `single-font` in `BaseLayout.astro`, reporting only Fira Code from linked font detection. Source inspection shows the broader issue is not literally one font, but mono-heavy body styling in `globals.css`.
+
+**Technical audit:** Build succeeds with Bun/Astro. DESIGN.md lint passes with 0 errors and 7 non-blocking warnings for intentionally defined but currently unreferenced auxiliary tokens.
+
+## Audit Health Score
+
+| Dimension | Score | Key Finding |
+|---|---:|---|
+| Accessibility | 2/4 | Reduced-motion support exists, but muted text, orange-on-dark edge cases, gradient text, and focus-state visibility need a dedicated pass. |
+| Performance | 3/4 | Static Astro build is lean; ambient particles, cogs, glow, and backdrop blur should remain bounded. |
+| Responsive Design | 3/4 | Mobile breakpoints exist for core grids and CTAs; overhaul should test historical reports and nav density on narrow screens. |
+| Theming | 2/4 | CSS variables exist, but palette is hex/RGBA mixed and not yet aligned to the new DESIGN.md token contract. |
+| Anti-patterns | 2/4 | Gradient text, generic card grids, glow-heavy dark dev aesthetic, and mono-heavy copy are the main tells. |
+| **Total** | **12/20** | **Acceptable, but the redesign should harden the design system.** |
+
+## Overall Impression
+
+The page has a strong Rust-industrial mood and useful proof artifacts, but it currently presents them through a familiar landing-page shell. The biggest opportunity is to turn it from an attractive dark developer landing page into a compact benchmark evidence machine.
+
+## What's Working
+
+1. **Distinct palette:** deep brown-black, oxidized orange, copper metrics, and warm muted text are coherent and worth preserving.
+2. **Memorable hero:** “Blazingly Fast. Eventually Compiled.” has Rust-native personality without becoming pure meme copy.
+3. **Real artifacts:** docs, GitHub, CI workflow, and historical stress reports make the page more credible than a generic speed-claim page.
+
+## Priority Issues
+
+### [P1] Benchmark proof lacks provenance
+
+**Why it matters:** Technical reviewers need to know whether `46k+`, `<50ms`, and `99.9%` are latest, best, target, or representative values. Without source context, the page asks users to trust marketing-like claims.
+
+**Fix:** Convert the stress metrics into a “latest verified run” module with timestamp, workflow source, report link, environment note, and constraint confirmation.
+
+**Suggested command:** `impeccable layout`, then `impeccable clarify`.
+
+### [P1] Architecture is too small for its importance
+
+**Why it matters:** The implementation strategy is the differentiator: NGINX, two Actix instances, PostgreSQL stored procedures, strict CPU/RAM. Current prose cards undersell this.
+
+**Fix:** Replace architecture cards with a compact system schematic and resource allocation rail.
+
+**Suggested command:** `impeccable layout`.
+
+### [P2] Repeated card grids make the page feel templated
+
+**Why it matters:** The aesthetic is good, but generic cards flatten the story and trigger the “AI/devtool template” reflex.
+
+**Fix:** Vary component grammar: resource meters, architecture rails, report rows, terminal/source plaques, and latest-run strips.
+
+**Suggested command:** `impeccable bolder` or `impeccable overdrive` with same-aesthetic constraint.
+
+### [P2] Typography overuses monospace and uppercase
+
+**Why it matters:** Monospace everywhere reduces readability and makes the page feel more like costume terminal UI than serious technical communication.
+
+**Fix:** Inter for body/prose, JetBrains Mono for instrumentation labels, code, metrics, timestamps, and badges.
+
+**Suggested command:** `impeccable typeset`.
+
+### [P2] Gradient text and decorative glow conflict with the new design contract
+
+**Why it matters:** The headline looks polished, but gradient-filled text is banned in the Impeccable system and is a common AI landing-page tell.
+
+**Fix:** Use solid copper/tinted text, typographic scale, tracking, and maybe a physical shadow/engraving treatment instead of gradient fill.
+
+**Suggested command:** `impeccable polish`.
+
+## Persona Red Flags
+
+**Backend engineer comparing implementations:** Needs architecture, stored procedure strategy, and bottleneck tradeoffs faster than the current page provides.
+
+**Rinha participant or reviewer:** Needs proof that numbers are under challenge constraints and a clearer latest/best/report archive model.
+
+**Rust developer from GitHub/search:** Needs quick reasons to inspect the repo: ~140-line API, SQLx compile checks, stored procedures, unlogged tables, GHCR image.
+
+**Accessibility-conscious technical user:** May struggle with muted text, all-caps density, mono-heavy paragraphs, and decorative motion if not carefully constrained.
+
+## Same-aesthetic Overhaul Plan
+
+### North Star
+
+Preserve the dark Rust-industrial brand, but shift the page from `hero + cards` into `benchmark rig + evidence trail`.
+
+### Proposed IA
+
+1. **Hero + latest verified run:** split first viewport, headline on the left, current run evidence panel on the right.
+2. **Constraint ledger:** CPU and RAM budget as segmented bars for NGINX, API 1, API 2, PostgreSQL.
+3. **Architecture schematic:** NGINX to Actix instances to PostgreSQL stored procedures, with ports and resource caps.
+4. **Implementation proof strip:** ~140 lines, SQLx offline cache, stored procedures, unlogged tables, least_conn, GHCR image.
+5. **Stress-test archive:** convert date chips into compact audit rows with run date, status, headline metric, and report link.
+6. **Docs/GitHub footer CTA:** quieter, with explicit “read architecture,” “inspect source,” and “open latest report.”
+
+## A/B Testing Plan
+
+### Test 1: Hero proof density
+
+- **Hypothesis:** Putting verified benchmark proof in the first viewport increases trust and report engagement.
+- **A/control:** Current centered hero, badges, CTAs, metrics below.
+- **B:** Split hero with latest verified run panel above the fold.
+- **C:** Constraint-first hero: `Rust banking API under 1.5 CPU / 550MB RAM`, with proof strip below.
+- **Primary metric:** report link clicks and docs clicks.
+- **Recommendation:** Try B first. It preserves the current hero while adding proof.
+
+### Test 2: Architecture presentation
+
+- **Hypothesis:** A schematic improves comprehension and increases GitHub/docs clicks.
+- **A/control:** Current two prose architecture cards.
+- **B:** NGINX → API/API → PostgreSQL diagram with ports and CPU/RAM.
+- **C:** Resource-budget rail first, diagram second.
+- **Primary metric:** docs architecture clicks, scroll depth, GitHub clicks.
+- **Recommendation:** Try B first. It is clearer without changing narrative order too much.
+
+### Test 3: Metric provenance
+
+- **Hypothesis:** Metrics with timestamp/source outperform standalone metric cards.
+- **A/control:** Current `46k+`, `<50ms`, `99.9%` cards.
+- **B:** Each metric includes source label and links to latest report.
+- **C:** One “latest run” module plus historical trend sparkline/list.
+- **Primary metric:** latest report clicks, CI workflow clicks.
+- **Recommendation:** Try C if implementation budget allows; otherwise B.
+
+### Test 4: Typography readability
+
+- **Hypothesis:** Proportional body copy improves reading and scroll depth without weakening the technical mood.
+- **A/control:** Current mono-heavy body and uppercase labels.
+- **B:** Inter body, JetBrains Mono only for instrumentation.
+- **C:** Same as B plus fewer repeated all-caps labels and stronger contrast.
+- **Primary metric:** scroll depth and docs click-through.
+- **Recommendation:** Try B first because it matches DESIGN.md.
+
+### Test 5: Report archive format
+
+- **Hypothesis:** Audit rows make reports feel more credible than date chips.
+- **A/control:** Current date/time grid.
+- **B:** Compact table rows: date, time, status, headline metric, open report.
+- **C:** Timeline rail grouped by day with latest/best badges.
+- **Primary metric:** report clicks and “view all reports” clicks.
+- **Recommendation:** Try B first for clarity and mobile resilience.
+
+## Recommended Actions
+
+1. `impeccable layout`: Rework homepage IA around latest verified run, constraint ledger, and architecture schematic.
+2. `impeccable typeset`: Move body copy to Inter and reserve JetBrains Mono for instrumentation.
+3. `impeccable clarify`: Tighten claims and label metrics with source/provenance.
+4. `impeccable adapt`: Verify mobile layout for report archive and architecture schematic.
+5. `impeccable polish`: Remove gradient text, improve focus/contrast, and refine motion.

DESIGN.md

@@ -0,0 +1,179 @@
+---
+version: alpha
+name: Rinha2 Rust Industrial
+register: brand
+description: Dark Rust-industrial benchmark showcase for a high-performance backend challenge implementation.
+colors:
+  primary: "#B34100"
+  primaryBright: "#F74C00"
+  secondary: "#DEA584"
+  backgroundDeep: "#0E0B08"
+  backgroundSurface: "#141010"
+  backgroundMetal: "#1A1411"
+  rustDark: "#2D1A00"
+  textPrimary: "#F5F0EB"
+  textBody: "#E2D8D0"
+  textMuted: "#A89888"
+  textSubtle: "#8A7A6C"
+  borderSubtle: "#332218"
+  borderMedium: "#5B3321"
+  success: "#9CBF7A"
+  warning: "#E6B450"
+typography:
+  display:
+    fontFamily: Inter
+    fontSize: 6rem
+    fontWeight: 800
+    lineHeight: 0.92
+    letterSpacing: "-0.06em"
+  h1:
+    fontFamily: Inter
+    fontSize: 4.5rem
+    fontWeight: 800
+    lineHeight: 0.95
+    letterSpacing: "-0.05em"
+  h2:
+    fontFamily: Inter
+    fontSize: 2.5rem
+    fontWeight: 700
+    lineHeight: 1.05
+    letterSpacing: "-0.03em"
+  h3:
+    fontFamily: Inter
+    fontSize: 1.5rem
+    fontWeight: 700
+    lineHeight: 1.15
+    letterSpacing: "-0.02em"
+  body:
+    fontFamily: Inter
+    fontSize: 1rem
+    fontWeight: 400
+    lineHeight: 1.7
+    letterSpacing: "0em"
+  bodyLarge:
+    fontFamily: Inter
+    fontSize: 1.2rem
+    fontWeight: 400
+    lineHeight: 1.7
+    letterSpacing: "0em"
+  label:
+    fontFamily: JetBrains Mono
+    fontSize: 0.78rem
+    fontWeight: 600
+    lineHeight: 1.2
+    letterSpacing: "0.08em"
+  code:
+    fontFamily: JetBrains Mono
+    fontSize: 0.92rem
+    fontWeight: 500
+    lineHeight: 1.55
+    letterSpacing: "-0.01em"
+rounded:
+  sm: 6px
+  md: 10px
+  lg: 16px
+  xl: 22px
+spacing:
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 40px
+  xxl: 64px
+  section: clamp(4rem, 9vw, 8rem)
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.textPrimary}"
+    typography: "{typography.label}"
+    rounded: "{rounded.md}"
+    padding: 16px
+  button-secondary:
+    backgroundColor: "{colors.backgroundDeep}"
+    textColor: "{colors.primaryBright}"
+    typography: "{typography.label}"
+    rounded: "{rounded.md}"
+    padding: 16px
+  surface-panel:
+    backgroundColor: "{colors.backgroundSurface}"
+    textColor: "{colors.textBody}"
+    rounded: "{rounded.xl}"
+    padding: 48px
+  metric-tile:
+    backgroundColor: "{colors.backgroundMetal}"
+    textColor: "{colors.secondary}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  badge:
+    backgroundColor: "{colors.backgroundMetal}"
+    textColor: "{colors.primaryBright}"
+    typography: "{typography.label}"
+    rounded: "{rounded.sm}"
+    padding: 10px
+---
+
+## Overview
+
+The site should feel like a compact Rust performance rig: warm dark metal, oxidized orange, precise labels, and measured benchmark evidence. The current aesthetic is worth preserving, but future work should make it more intentional and less template-like by replacing generic hero-plus-cards rhythm with engineered artifacts: architecture rails, resource-budget diagrams, run timelines, and proof modules.
+
+## Colors
+
+- **Primary (#B34100):** WCAG-safe Rust orange for high-emphasis actions and identity marks.
+- **Primary Bright (#F74C00):** Hot orange for active states and small interactive accents.
+- **Secondary (#DEA584):** Warm copper for hero emphasis, numeric proof, and highlight states.
+- **Background Deep (#0E0B08):** Page field, never pure black.
+- **Background Surface (#141010):** Major panels and section surfaces.
+- **Background Metal (#1A1411):** Badges, tiles, and inset controls.
+- **Text Primary (#F5F0EB):** Headings and high-priority copy, never pure white.
+- **Text Body (#E2D8D0):** Paragraph text.
+- **Text Muted/Subtle (#A89888 / #8A7A6C):** Labels and secondary context. Use cautiously and verify contrast.
+
+Use OKLCH equivalents in CSS when revising tokens, but keep this file in hex for DESIGN.md tooling compatibility. Avoid gradient text. If gradients remain, keep them as background atmosphere or hairline separators, not typography fill.
+
+## Typography
+
+Use Inter for display and prose, JetBrains Mono for code, labels, timestamps, badges, and compact metrics. Do not use monospace for long paragraphs. The brand can keep uppercase technical labels, but repeated all-caps section headers should be limited to areas that behave like instrumentation labels.
+
+The hero may stay large, uppercase, and compressed. Body copy should become more readable by using proportional type, max line lengths around 65 to 75 characters, and stronger contrast than the current muted brown text in key explanatory paragraphs.
+
+## Layout
+
+The default page structure is a centered, single-surface brand landing page with dramatic vertical pacing. Future overhaul variants should preserve dark industrial atmosphere but explore stronger composition:
+
+- A constrained max-width for prose and a wider max-width for diagrams and proof modules.
+- Asymmetric hero layouts where architecture or benchmark proof appears in the first viewport.
+- Section rhythm that alternates dense data modules with breathing room.
+- Fewer identical cards. Use system diagrams, timeline strips, resource meters, and linked report rows where those better communicate backend evidence.
+
+## Elevation & Depth
+
+Depth comes from low-chroma borders, warm inner glow, copper hairlines, dark metal panels, and mechanical shadow offsets. Avoid decorative glassmorphism. Blur may be used only for sticky navigation legibility over animated background atmosphere.
+
+## Shapes
+
+Rounded rectangles can stay, but keep radii mechanical and consistent: 6px for chips, 10px for controls, 16px for metric tiles, 22px for large panels. Dashed circular cogs are acceptable as a background motif when subtle; they should not compete with content or create visual noise on mobile.
+
+## Components
+
+- **Primary button:** Rust-orange fill, terse uppercase label, clear focus ring, used for the main documentation path.
+- **Secondary button:** Dark fill or outline for GitHub/source links. It should not visually tie the primary CTA.
+- **Metric tile:** Copper number, explicit unit/context, optional source link or timestamp for auditability.
+- **Report link:** Should read as a data row or compact artifact, not just a date chip. Include date, run type/status when available, and a clear hover/focus affordance.
+- **Architecture module:** Prefer a schematic of NGINX, two API instances, and PostgreSQL over prose cards.
+- **Stress-test proof module:** Pair headline metrics with provenance: workflow, k6, latest report link, and historical trend.
+
+## Do's and Don'ts
+
+Do:
+- Keep the Rust-industrial palette and dark warm mood.
+- Expose proof and constraints early.
+- Use proportional body text for readability.
+- Give benchmark numbers context, source, and units.
+- Respect reduced motion and keyboard focus.
+
+Don't:
+- Use gradient-filled text.
+- Turn every section into the same rounded card grid.
+- Use monospace as a blanket style for all copy.
+- Add decorative glow without an information role.
+- Replace technical credibility with vague speed marketing.