html-paper-figure-style

name	html-paper-figure-style
description	Academic Figure genre (white + muted categorical + captions). Use when: 论文配图, 实证结果, figure, benchmark plot, ablation, multi-panel chart, 学术图表, NeurIPS/arXiv figure. Trigger: 论文配图 / 实证结果 / figure / benchmark plot / ablation / multi-panel chart / 学术图表 / academic figure. Inherits typography-system. Single-surface scientific figure.

---

name: html-paper-figure-style description: "Use for an ACADEMIC multi-panel FIGURE page: white sheet, subpanels labelled (a)-(e) each with a small chart (line / grouped bars / donut / scatter), thin hairline axes, muted categorical palette, italic Fig. captions, tabular-nums. Trigger: 论文配图/实证结果/figure/benchmark plot/ablation/multi-panel chart/学术图表/NeurIPS-arXiv style. NOT for marketing visuals. Routed by html-style-router." combo-tags: [html-rendering]

HTML Genre — Academic Figure (学术图版)

Typography base (inherited): composes ON TOP of typography-system; inline tokens/typography.css FIRST, then layer color/accent/brand-font ONLY. Reference template: examples/genre/paper-figure.html (all 3 gates green).

Pixel-sampled from an ML-paper figure composite. The canonical scientific multi-panel look — restrained, chart-dense, caption-driven. DNA: the source reference set (pixel-sampled from real designs).

Layout frame + tokens (inject FIRST)

:root{ --pf-page-max:1000px; --pf-page-gutter-total:clamp(32px,6vw,80px);
  --pf-paper:#FEFEFF; --pf-ink:#1A1A2E; --pf-axis:#9B93A8; --pf-cap:#46465A;
  /* the canonical ML-paper categorical set (sampled): */
  --pf-c1:#8265CF; --pf-c2:#4B8BB8; --pf-c3:#CF7B71; --pf-c4:#E0B84A; --pf-c5:#423F75;
  --pf-hair:#E3DADE; }
.pf-sheet{ box-sizing:border-box; background:var(--pf-paper);
  width:min(var(--pf-page-max),calc(100% - var(--pf-page-gutter-total)));
  margin-inline:auto; }

Structure: .pf-head (mono kicker + bold title, 2px underline) → .pf-grid (2-col) of .pf-panel, each .pl ((a) mono label + name) + .pf-fig (chart: inline <svg> line/scatter, or .pf-bars CSS bars, or .pf-donut conic-gradient) + .pf-legend (swatch chips via --c) + .pf-cap (italic Fig. a. caption, <b> un-italics the label).

Gotchas

1. Charts are inline SVG or pure CSS — line/scatter as <svg><polyline>, bars as flex <i height:%>, donut as conic-gradient + radial mask. No raster, so the figure is self-contained and crisp.
2. The categorical palette is FIXED and muted (--pf-c1..c5, the sampled purple/blue/coral/gold/violet). Don't substitute saturated brand hues — the academic read depends on the desaturated set. Gold #F4D57E is too light for text/thin lines; it's #E0B84A for marks and pairs with a dark legend label.
3. Captions carry the meaning, italic, AA on white (--pf-cap #46465A ~7:1). Fig. x. label is <b> (un-italic, bold) inside the italic caption.
4. tabular-nums everywhere (axis ticks, legend percents) so columns align — the foundation already sets it for tables; add to chart legends.
5. Hairline axes (1.5px ink for the L-frame, --pf-hair for panel borders) — never heavy chrome; the data is the ink.

Verify

python3 scripts/build-genre-templates.py
python3 skills/typography-system/scripts/validate_typography.py --render examples/genre/paper-figure.html
python3 scripts/html-inline-assets.py check examples/genre/paper-figure.html

---

Your Name | [e-mail]