huashu-luxe-whitespace

name: huashu-luxe-whitespace description: | Luxe Whitespace (奢华留白) — quiet-luxury presentation decks adapted from the ppt-build showcase of 花叔 (alchaincyf)'s huashu-design. 70%+ whitespace on a warm off-white #FAFAF8 canvas, Inter 200–600 ultra-thin hierarchy, 120px weight-200 floating numerals with gold decimal points, one warm gold (#D4A574) spent on hairlines and winning comparison bars, gradient hairline separators (#E0DCD6). Use when the user wants a premium brand report, high-end product deck, quiet-luxury keynote, 品牌年度报告, 高端发布会, 奢侈品风格, or an understated thin-type presentation. triggers:

• "luxe whitespace"
• "quiet luxury deck"
• "premium brand report"
• "thin typography slides"
• "奢华留白"
• "高端品牌 PPT"
• "轻奢幻灯片"
• "极简留白年报" od: mode: deck surface: web preview: type: html entry: index.html design_system: requires: false example_prompt: "Use the Luxe Whitespace template to turn my story into a quiet-luxury HTML deck: 1920×1080 fixed warm off-white canvas, 70%+ whitespace, Inter 200–600 ultra-thin hierarchy, 120px weight-200 floating numerals with gold decimal points, one warm gold #D4A574 on hairlines and winning bars, gradient hairline separators. Start from example.html, replace the content only, and keep the design system intact." example_prompt_i18n: zh-CN: "用「奢华留白」模板把我的内容做成轻奢 HTML 幻灯片：1920×1080 米白画布、70% 以上留白、Inter 200–600 超细字重层级、120px 超细数字 + 金色小数点、唯一暖金 #D4A574 用在发丝线与对比条上、渐变发丝线分隔。从 example.html 出发只换内容，不要重写设计。"

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)

• 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)

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.