fs-editorial-forestArt-directing a fashion house's annual report — the editorial system, the photography rhythm, and the data spreads. Built as a decision-grade design craft deck for brand stakeholders, exec audience.
Independent GitHub snapshot · Automated classification · Original documentation governs
name: fs-editorial-forest en_name: "Art-Direct an Annual Report like a Magazine Creative Director" zh_name: "像杂志创意总监一样艺术指导年度报告" description: | Art-directing a fashion house's annual report — the editorial system, the photography rhythm, and the data spreads. Built as a decision-grade design craft deck for brand stakeholders, exec audience. en_description: | Art-directing a fashion house's annual report — the editorial system, the photography rhythm, and the data spreads. Built as a decision-grade design craft deck for brand stakeholders, exec audience. zh_description: | 像杂志创意总监一样艺术指导年度报告——一份可商业交付的设计打磨 Deck，围绕真实主题、证据链与决策目标组织。 tags:
A quiet, considered editorial deck theme — deep forest green, dusty pink, and warm cream paper meet Source Serif 4. Built for quarterly reviews, internal readouts, studio updates, research recaps, and anything that should feel warm and unhurried rather than corporate. Avoid it for content that needs to feel urgent, punchy, or sales-driven.
Ported from the MIT-licensed zarazhangrui/beautiful-html-templates editorial-forest template.
Start from example.html in this plugin folder. It is the locked seed: keep the inline <deck-stage> runtime script, the :root token block, and every layout skin verbatim — replace only slide content. Do not rewrite the design, do not introduce colors or fonts outside the spec below.
:root):root {
--green: #2e4a2a; /* forest green — dark canvas + primary text on cream */
--green-deep: #243a21; /* text on pink surfaces */
--green-lite: #3a5a36; /* lighter green tile variant */
--pink: #e89cb1; /* dusty pink — accent, text on green, bar series A */
--pink-deep: #d27e96; /* pink tile border */
--cream: #efe7d4; /* warm cream paper — light canvas, text on green */
--cream-2: #e6dcc4; /* secondary cream tile */
--ink: #1a1a17; /* body text on cream */
--serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
--mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
rgba(239,231,212,0.18) (cream at 18%) is the only permitted alpha, used for chart grid lines.Source Serif 4 (weights 300–800, weight 500 is the display default) for all headings and body; JetBrains Mono (400/500/700, weight 500 default) for kickers, numbers, captions, and axis labels. Load via the Google Fonts <link> already in the seed.line-height: 0.92–0.94, section h2 80–96px, statement quote 140px, KPI numerals 220px (unit 110px in cream). Tracking −0.02em on serif display; mono labels run uppercase at letter-spacing: 0.12–0.18em, 24–28px..label mono uppercase kickers anchor every slide's top edge; paired left/right labels are the header signature..mark monogram (130px, 2px border) on the cover; the bottom .footline running foot; 2px rule lines (border-top: 2px solid) above meta rows, KPI rows, and summary columns; cards with 6–8px radius and 2–2.5px borders. These devices are the theme — keep them.Alternate dark, light, and pink canvases — never run more than two same-tone slides in a row:
| # | Master | Class | Canvas | Role |
|---|---|---|---|---|
| 1 | Cover | .cover | green | monogram topbar, 220px serif title, mono footline |
| 2 | Agenda | .agenda | cream | 5-tile mosaic grid (t-green spans 2 rows, t-pink/t-cream/t-greenLite) |
| 3 | Statement | .statement | pink | 140px serif quote + mono attribution row |
| 4 | Two-column | .two-col | cream | green figure panel (880px) + serif narrative + 3-col dl.meta |
| 5 | Data | .data | green | pure-CSS grouped bar chart (pink/cream bars, mono axes, grid-lines) |
| 6 | Framework | .framework | cream | 4 step cards: outline → pinkfill → fill → outline |
| 7 | Stats | .stats | green | 3 KPI callouts, 220px pink numerals over a pink rule |
| 8 | Summary | .summary | green | 220px pink closing word + 3-column takeaways |
Reuse these masters for longer decks (a second .two-col or .data, another .statement); keep the tone alternation. Charts stay pure CSS/HTML (percentage-height .bar divs); diagrams and icons are inline SVG stroked in token colors only — never Chart.js, mermaid, or remote images.
<section class="…" data-screen-label="NN Label"> authored at a fixed 1920×1080 (width: 1920px; height: 1080px; overflow: hidden), a direct child of <deck-stage aspect="1920/1080" no-rail>.deck-stage web component scales the whole stage uniformly to the viewport: factor = min(viewportWidth/1920, viewportHeight/1080), applied as one transform: scale() with letterbox/pillarbox centering, recomputed on resize. Never reflow content per device, never add responsive breakpoints inside slides; all measurements are fixed px at design size.visibility/opacity — never display: none.←/→, Space, PgUp/PgDn, Home/End, number keys; #<n> hash deep-link restore and write-back (plus the small hashchange supplement script at the end of the seed); print → one page per slide.deck-stage:not(:defined){visibility:hidden} guard and the whole inline runtime <script> verbatim. No external JS, no build step — the output is one self-contained .html file.Template design, palette, and the deck-stage runtime come from the upstream MIT-licensed zarazhangrui/beautiful-html-templates (© 2026 Zara Zhang), template editorial-forest. The LICENSE file ships in this plugin folder; keep it in place when redistributing.