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 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.

1. 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.

1. 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.

1. 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.

1. Linear icons: inline SVG, stroke="currentColor",

stroke-width="1.8", round caps, sitting in a 52px rounded tinted .icon chip. No emoji anywhere.

1. 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.

1. 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.

1. For ≥ 5 pages, showcase first: build the cover + the master bento

page, confirm the grammar, then batch the rest.

1. 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.