Huashu luxe whitespace

Luxe Whitespace · 奢华留白

Produce a single-file, quiet-luxury deck. You are typesetting for a maison, not a startup: every page breathes, numbers float in ultra-thin weights, and gold appears only as a hairline or a decimal point — never as a surface. 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.

Adapted from the ppt-build showcase of huashu-design by 花叔 (alchaincyf), MIT licensed. The upstream file is a single benchmark page; this plugin extends it into a full multi-section deck while preserving its DNA: the off-white field, the thin floating metrics, the gold-vs-grey comparison bars, and the gradient hairline separators.

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 and the locked page frame: padding: 64px 96px 48px 96px, flex column, .top-row chrome at the top and .bottom-section (insight text + brand mark) pinned to the bottom via margin-top: auto. Exactly one slide carries .active.
• 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; the script also builds the gold slide-dot indicator into #dots and syncs it in go(). Counter pill bottom-right, key-hint bottom-left. No external JS, no build step — the file must open inside a sandboxed iframe.

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

Token	Value	Role
--bg	#FAFAF8	warm off-white page — the only background
--ink	#2A2A2A	primary ink (soft black, never #000)
--gold	#D4A574	the only accent — hairlines, decimals, winning bars
--hairline	#E0DCD6	gradient hairline separators
--rule	#EEECE8	horizontal section rules / counter border
--track	#EEECEA	comparison bar track
--bar	#D8D5D0	baseline / losing bar
--muted	#696963	metric names, strong captions
--soft	#74746E	subtitles
--faint	#B8B4AE	tertiary captions, eyebrow
--ghost	#C8C4BC	brand text, source notes, oldest timeline year
--body	#6E6E68	insight body copy (WCAG AA on --bg)
--sans	'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif	the only family

• Font loading: exactly one @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap') at the top of the stylesheet. Weights 200/300/400/500/600 only — 700+ is forbidden; emphasis in this style is achieved by stepping 300 → 500, not by bolding.
• One accent. A second color, a dark page, a gradient surface, or a drop shadow on content (the stage letterbox shadow is the sole exception) is the cardinal sin of this style.

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

1. Ultra-thin floating numerals: metric values at 120px weight 200 with letter-spacing: -4px; hero numbers up to 240px weight 200 (letter-spacing: -10px). The decimal point is always a gold <span class="dot">.</span> at weight 300; units are 28–56px weight 200 gold vertical-align: super at opacity: 0.8.
2. Gradient hairline separators: 1px verticals built with linear-gradient(to bottom, transparent, var(--hairline) 50%, transparent) — between metric cards (::after), timeline columns, and the two-column divider. Never a solid full-height border.
3. Gold-vs-grey comparison bars: .comp-row = right-aligned 80px label + 2px --track track + fill; the page's subject is always the 3px gold fill, competitors get the 2px grey --bar fill; values sit outside the track (gold for the subject). Wide chart rows may use the linear-gradient(to right, var(--gold), rgba(212,165,116,0.35)) fade fill.
4. Page chrome: every page opens with .top-row — 10px/400/4px-tracking uppercase .eyebrow left, 10px/300 right-aligned .source-note — and closes with .bottom-section — 13px/300 .insight-text (emphasis = <strong> at 500/#666) left, .brand-mark (32px gold hairline + 10px tracked brand text) right. Title pages add .title-area: 40px weight-200 headline with a weight-400 .mid span and a gold full stop (.gold-dot), 14px/300 subtitle, closed by a 1px --rule border.
5. Gold slide-dot indicator: 4px --hairline dots top-right; the active page becomes a 16px gold pill. Built by the script — do not hand-write dots into slides.
6. Gold punctuation: headlines end in a gold 。 or .; gold is never applied to a whole headline or paragraph. Budget: ≤ 5 gold touches per page (a bar group counts as one).

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

Layout	Role
cover	104px thin statement headline + gold full stop + 64px gold rule + 280px ghost year numeral at 5% opacity
contents	hairline-ruled rows: 32px thin gold number + 22px/300 title + uppercase right caption
big-number	one 240px thin numeral protagonist + gold-ruled side column (label + 15px/300 body)
metrics	2–3 .metric-card columns with 120px numerals + comparison groups + hairline separators (the upstream master)
channels	full-width horizontal bar rows: name + EN small caption, gradient gold winner, 32px thin values
timeline	equal hairline-separated columns, 88px year numerals graded ghost→faint→muted→ink, gold dot on the current year
quote	centered: vertical gold fade hairline + 52px/200 quote (key phrase gold) + uppercase attribution
two-column	before/after: ghost numerals left vs ink+gold numerals right, gradient hairline divider
stats-grid	2×2 grid of 96px thin numerals, crossed gradient hairlines through the center
closing	120px thin sign-off + gold full stop + uppercase EN echo + gold rule

Typography & whitespace discipline

• Scale: eyebrow/captions 10–12px tracked uppercase · body 13–16px weight 300, line-height 1.8–2 · titles 40px weight 200 · metrics 120px · heroes 240px. Tracking: +2 to +4px on small uppercase, −0.5 to −10px on large thin type. Chinese copy uses 「」 quotes and full-width punctuation.
• 70%+ of every page is empty. One idea per page; at most 3 metric cards, 4 bar rows, 4 timeline columns, 4 stat cells, 7 contents rows. If content doesn't fit with this much air, add a page — never shrink the whitespace.
• No emoji, no icon fonts, no images, no dark pages, no borders thicker than 1px (bars excepted at 2–3px), no border-radius except the counter pill and bar tracks. Icons, if truly needed, are 1px-stroke inline SVG.
• Real content only — the user's actual numbers; missing data gets an honest <!-- 待用户提供 --> placeholder, never invented statistics. (The seed deck's 「素白 SOBLANC」 perfume-house data is fictional demo content and must be fully replaced.)

Workflow

1. Clarify once: topic, audience, page count, and which 2–4 numbers deserve the thin-numeral treatment. This style is carried by its floating numerals — choose them before writing any page.
2. Copy example.html, retitle, then replace each section's content following the layout enumeration. Keep the page chrome, hairline devices, token names, and the script intact. Re-theme by changing token values only — and only if the user's brand genuinely demands it; the off-white + warm gold pairing is the identity.
3. For ≥ 5 pages, showcase first: build the cover + one metrics page, confirm the grammar, then batch the rest.
4. Self-check before delivery: arrow through every page; dots, counter, and #/N hash stay in sync; no overflow beyond 1920×1080; bar widths match their printed values proportionally; every page shows the eyebrow row, the bottom brand mark, and at least one hairline device; no weight above 600 anywhere; gold count per page ≤ 5; no leftover demo ("素白"/"SOBLANC") text; grep for TODO.