huashu-bento-insight

# Bento Insight Grid · 便当格洞见

Produce a **single-file, Apple-keynote-school bento deck**. You are a metrics
curator working in HTML: every card holds exactly one insight, every number is
tabular, and whitespace does the talking. The visual system, canvas contract,
and navigation runtime are locked by `example.html`. **Start from
`example.html`, replace content only — do not rewrite the design or the
script. Do not introduce any color or font outside this spec.**

Generated from the「Bento便当格模块网格 / Bento Grid」entry (neutral school,
95% fidelity) of `references/design-styles.md` in
[huashu-design](https://github.com/alchaincyf/huashu-design) by 花叔
(alchaincyf), MIT licensed. Reference lineage: Apple Keynote Bento-Grid era,
new-generation MBB Bento/Big-Type decks (2024–2026), Stripe annual-report
metric-card matrices, Pitch.com QBR templates. Distinct from the fixed 8-cell
`weekly-report` KPI scenario: this is a general bento *aesthetic* theme —
free-form unequal-height composition, weight contrast, sparklines.

## Hard spec (locked — violating any line is a regression)

### Canvas & runtime

- One `<div id="stage">` fixed at **1920 × 1080 px**, centered with
  `position: fixed; top: 50%; left: 50%`; a `fit()` function applies
  `translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080))` on
  load and `resize`. All inner layout in px — the scaler owns responsiveness.
- Each page is one `<section class="slide">` inside `#stage` with a
  `data-screen-label="01 封面"`-style label; exactly one slide carries
  `.active`; cream pages add `.cream`.
- Navigation (keep the script verbatim): `←`/`↑`/`PageUp` previous,
  `→`/`↓`/`Space`/`PageDown` next, `Home`/`End` first/last; `#/N` hash
  routing (1-indexed) read on load + `hashchange`, written via
  `history.replaceState`; click left third = back, rest = forward; rounded
  counter pill bottom-right, key-hint bottom-left. No external JS, no build
  step — the file must open inside a sandboxed iframe via `file://`.

### Design tokens (`:root` — keep the names, re-theme values only)

| Token | Value | Role |
|---|---|---|
| `--bg` | `#F5F5F7` | master page background (Apple light grey) |
| `--cream` | `#FBFAF7` | warm cream alternate page background |
| `--card` | `#FFFFFF` | default card surface |
| `--card-dark` | `#1D1D1F` | hero inverse card (≤ 1–2 per deck spread) |
| `--tint-blue` | `#EAF2FE` | tinted card — brand |
| `--tint-green` | `#EAF8F0` | tinted card — positive |
| `--tint-warm` | `#FDF3E7` | tinted card — highlight |
| `--ink` | `#1D1D1F` | primary text |
| `--ink-soft` | `#424245` | body copy |
| `--muted` | `#6E6E73` | secondary labels |
| `--faint` | `#AEAEB2` | tertiary captions |
| `--dark-ink` / `--dark-mut` | `#F5F5F7` / `#98989D` | text on dark card |
| `--hairline` | `#E8E8ED` | 1px card border |
| `--brand` | `#0071E3` | brand blue — primary accent |
| `--green` | `#1FA958` | positive delta accent |
| `--orange` | `#F08A24` | highlight / caution accent |
| `--shadow` | `0 2px 6px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.05)` | micro shadow |
| `--r-lg` / `--r-md` / `--r-sm` | `32px` / `24px` / `14px` | radius scale |
| `--sans` | `'Inter', 'Geist', -apple-system, 'PingFang SC', …` | body family |
| `--display` | `'Geist', 'Inter', …` | display headlines |
| `--mono` | `'Geist Mono', 'SF Mono', ui-monospace, …` | all KPI numerals |

- Fonts come from one Google Fonts `@import` (Inter + Geist + Geist Mono) —
  the only allowed external reference. No other CDN, no icon fonts, no
  Chart.js/mermaid; charts are pure CSS/SVG.
- Brand may be re-themed to the user's primary color, but the triad stays:
  **one brand + green (positive) + orange (caution)**. A fourth accent is the
  cardinal sin of this style. No gradients, no glassmorphism, no neon.

### Signature devices (the visual DNA — every deck must show them)

1. **Unequal-height bento grid**: CSS Grid (`repeat(6, 1fr)` columns ×
   `1.18fr 1fr`-style rows) with mixed `span` widths and one tall
   `grid-row: span 2` hero card. Never a uniform equal-cell grid — unequal
   heights *are* the style. Gap 20–24px.
2. **Card anatomy**: `--card` surface + `1px solid var(--hairline)` +
   `var(--shadow)` micro shadow + 24–32px radius. One insight per card: a
   `card-label` (14px/600 muted) on top, one protagonist below. Tinted and
   dark cards are seasoning — at most 1 dark + 2 tinted per bento page.
3. **Tabular KPI numerals**: every number in `--mono` with
   `font-variant-numeric: tabular-nums`, weight 700–800, negative tracking;
   units in a `.unit` span at ~0.42em muted. Deltas are rounded `.delta`
   pills (`↑ 42%`) in green/orange tints.
4. **Sparklines & charts**: inline `<svg preserveAspectRatio="none">`
   polyline + optional 14%-opacity area fill for sparklines; bar charts are
   flex columns of rounded `div` bars with the current period in `--brand`
   and history in `#E4E4E9`, values printed in mono above each bar.
5. **Linear icons**: inline SVG, `stroke="currentColor"`,
   `stroke-width="1.8"`, round caps, sitting in a 52px rounded tinted
   `.icon` chip. No emoji anywhere.
6. **Display weight contrast**: headlines pair weight 800–900 spans with
   300–400 `.thin`/`.lite` spans in the same line (e.g. 「稳健增长，全面提
   效。」 with the verb heavy and the qualifier light). Kickers are 14px
   mono uppercase, 3px tracking, brand-colored.

### Layout enumeration (use 5+ per deck, never one layout everywhere)

| Layout | Role |
|---|---|
| `cover` | cream page, giant 130–150px display statement + mini bento strip of 3–4 KPI cards |
| `agenda` | 4 equal cards, oversized hairline-grey mono numbers, first number brand-colored |
| `bento` | the master: 6-col × 2-row unequal grid, dark hero card with sparkline + 5 satellite cards |
| `one-insight` | cream page, one 300–380px mono numeral protagonist + label + chip row |
| `chart` | big bar-chart card (2 rows tall) + 2 side insight cards |
| `feature-bento` | 3-col grid with wide cards, linear icon chips + meta footer rows |
| `quote` | oversized quote card (brand SVG quote marks, key phrase in brand color) + 2 stat cards |
| `stats-2x2` | 2×2 grid of 80–90px numerals, one dark + one tinted card |
| `roadmap` | 3 track cards: mono Q-tag, dot-bulleted list, hairline-topped target footer |
| `closing` | cream page, giant display farewell (one brand-colored word) + summary card strip |

### Typography & scale (read from 10 meters)

- Display headlines 120–170px weight 900 on cover/closing, tracking −6 to
  −8px; page titles 62px weight 800, tracking −2px. Hero KPI 84–96px; the
  one-insight numeral 300–380px weight 800 with its `%`/unit glyph in
  `--brand`.
- Body 15–19px `--muted`/`--ink-soft`, line-height 1.6–1.7. Labels 14px/600.
  Mono meta rows 14px with 1–2px tracking.
- Chinese copy is idiomatic and uses 「」 quotes and full-width punctuation;
  zh/en mixing is welcome (mono English kickers over Chinese headlines is
  the house voice).

### Rhythm & discipline

- Default 10 pages (8–11 allowed). Page backgrounds alternate `--bg` and
  `--cream` for breathing rhythm; cards stay white/tinted/dark.
- Whitespace is a feature: card padding ≥ 36px, page padding ≈ 84–110px;
  never cram more than 7 cards on one bento page.
- One insight per card — if a card needs two numbers, it is two cards.
- Honest data only — the user's actual numbers; missing data gets an
  `<!-- 待用户提供 -->` placeholder, never invented statistics. (The seed
  deck's 「澄流 ClearFlow」data is fictional demo content and must be fully
  replaced.) Negative metrics keep the orange caution treatment — bento
  decks that hide bad news read as marketing, not review.

## Workflow

1. **Clarify once**: topic, audience, page count, and which 3–6 metrics are
   the protagonists (plus the single most important one for the one-insight
   page). This style lives on its numbers — pick them before writing pages.
2. **Copy `example.html`**, retitle, then replace each section's content
   following the layout enumeration. Keep the grid skeletons, token names,
   card anatomy, and the script intact. Re-theme by changing token values
   only — and only `--brand` plus tints, if the user's brand demands it.
3. **For ≥ 5 pages, showcase first**: build the cover + the master bento
   page, confirm the grammar, then batch the rest.
4. **Self-check before delivery**: arrow through every page; counter and
   `#/N` hash stay in sync; no overflow beyond 1920×1080; bar heights match
   their printed values proportionally; every bento page has unequal card
   heights and ≤ 1 dark card; no emoji; no fourth accent color; no leftover
   demo (「澄流」/"ClearFlow") text; grep for `TODO`.