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

| Token | Value | Role | |---|---|---| | --paper | #FFFFFF | light page background | | --night | #111111 | dark pages + chrome bars | | --ink | #111111 | primary text on light | | --night-ink | #FFFFFF | primary text on dark | | --accent | #E63946 | the only red — the only accent | | --grid | #E8E8E8 | hairline rules / column rules | | --track | #F5F5F5 | bar-chart track | | --bar-base | #E0E0E0 | losing / baseline bar | | --muted | #999999 | secondary labels | | --muted-2 | #666666 | body copy on light | | --faint | #BBBBBB | tertiary captions | | --night-line | #333333 | hairlines on dark pages | | --night-mut | #888888 | secondary text on dark | | --sans | 'Helvetica Neue', 'Helvetica', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif | the only family |

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 (` / .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)

| Layout | Role | |---|---| | cover | giant statement headline (red full stop) + right-column hero numeral | | contents | numbered red-kicker rows separated by --grid hairlines | | big-number | one 260px numeral protagonist + side stat rail | | data-theater | left hero column + 2–3 .bench-col bar-chart columns + summary strip (the upstream master) | | divider | dark page, 260px red chapter number + oversized title | | two-column | before/after comparison: grey bars left, red bars right | | timeline | equal columns, 96px year numerals graded grey→black→red | | quote | whitespace + red SVG quote marks + 54px/900 quote, key phrase red | | stats-grid | 2×2 grid of 128px numerals with red glyph accents | | closing | dark page, giant CTA with red punctuation + key-hint capsule |

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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: nexu-io
• Source: nexu-io/open-design
• License: Apache-2.0
• Homepage: https://open-design.ai

Install and usage instructions live in the source repository linked above.