nexu-io/open-design/huashu-pentagram-grid

Pentagram Info-Architecture · 信息建筑·红

Produce a single-file, Swiss-grid data deck. You are an information architect working in HTML: every page is a measured grid, every number has a coordinate, and red appears exactly where the eye must land. 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-pentagram showcase of huashu-design by 花叔 (alchaincyf), MIT licensed. The upstream file is a single data page; this plugin extends it into a full multi-section deck while preserving its DNA.

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; dark pages add .dark.

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

Zero external dependencies: no Google Fonts, no @import, no CDN. One font stack, one accent. A second accent color is the cardinal sin of this style.

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

1. 64px black chrome bars top and bottom of every light page: top bar =

uppercase 12px/700/3px-tracking label left (with a red / separator) + red uppercase label right; bottom bar = 900-weight logotype + 1px #444 vertical divider + grey footnote left, red uppercase label right. Dark pages swap solid bars for 1px --night-line hairline strips with the same text.

1. Grid hairlines: absolutely-positioned 1px verticals

(top:64px; bottom:64px) and horizontals (left/right:80px) at opacity: 0.05 black (0.08 white on dark). 80px outer margins are the master gutter; columns land on them.

1. Giant numeral anchor: one 180–260px, weight-900,

negative-tracked (≈ −1px per 20px of size) number per hero page; its decimal point, slash, or unit glyph is red (<span class="decimal"> / .red). Hero numerals on dark divider pages may be fully red.

1. Red/dark/grey bar charts: .bar-row = right-aligned 90px label +

--track track + fill (winner red / dark black / base grey) with the value printed inside, right-aligned, white (grey on base). The subject of the page is always the red bar. Optional .delta red uppercase annotation underneath.

1. Summary strip: border-top: 1px solid var(--grid) row of

.summary-items — 32px/900 number with one red glyph + 11px uppercase spaced caption.

1. Outlined red badge (.open-badge): 2px red border, red uppercase

11px text, optional inline-SVG dot glyph. Square corners — this style has zero border-radius anywhere except the runtime counter pill.

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

Typography & scale (read from 10 meters)

• Headlines 64–120px weight 900, tracking −2 to −5px. Hero numerals

180–260px weight 900. Body 15–18px, --muted-2, line-height 1.7, emphasized spans in --ink 700.

• Labels: 11–13px, weight 700, letter-spacing: 2–3px,

text-transform: uppercase — this is the connective tissue of the style.

• Chinese copy uses 「」 quotes and full-width punctuation; red is applied to

single punctuation glyphs (。 ， /) inside headlines, never whole headings.

Rhythm & discipline

• Default 10 pages (8–11 allowed). White pages dominate; **at most 2–3 dark

pages** (divider + closing, optionally one dark hero) — this is a white style with black bookends, not a dark theme.

• Red budget: ≤ 4 red touches per page (bars count as one device). If

everything is red, nothing is.

• No emoji, no icon fonts, no decorative illustrations, no gradients, no

shadows, no rounded corners. Flat ink on paper. Icons, if truly needed, are minimal inline SVG strokes.

• Real content only — the user's actual numbers; missing data gets an honest

<!-- 待用户提供 --> placeholder, never invented statistics. (The seed deck's "析衡" data is fictional demo content and must be fully replaced.)

Workflow

1. Clarify once: topic, audience, page count, and which 2–4 numbers are

the protagonists. This style lives and dies by its hero numerals — pick them before writing any page.

1. Copy `example.html`, retitle, then replace each section's content

following the layout enumeration. Keep chrome bars, grid hairlines, token names, and the script intact. Re-theme by changing token values only — and only if the user's brand genuinely demands it; the red/black/white triad is the identity.

1. For ≥ 5 pages, showcase first: build the cover + one data-theater

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 widths match their printed values proportionally; every page shows the chrome bars and at least one grid hairline; red count per page ≤ 4; no leftover demo ("析衡"/"XIHENG") text; grep for TODO.