name: Dense Institutional Report System
description: Brand-neutral self-contained HTML report design system for compact institutional deliverables with sticky rails, rounded section panels, format-specific chrome, and SVG icon governance.
colors:
bg: "#ffffff"
bg-band: "#f6f6f8"
bg-subtle: "#fafafb"
bg-deep: "#15131a"
rule: "#dcdce2"
rule-soft: "#ebebef"
ink: "#11131a"
ink-mid: "#33363f"
ink-soft: "#5a5e68"
ink-faint: "#868b95"
navy: "#0b5fd4"
navy-deep: "#0842a0"
navy-bg: "#e8f1fc"
navy-line: "#bcd6f5"
ok: "#1a4f9c"
ok-bg: "#e9f0fa"
ok-line: "#b7cdea"
risk: "#b3261e"
risk-bg: "#fbeceb"
risk-line: "#edc7c4"
hold: "#8a6d00"
hold-bg: "#fbf3da"
hold-line: "#e7d8a4"
typography:
body-md: { fontFamily: "-apple-system, Segoe UI, system-ui, Roboto, Noto Sans, sans-serif", fontSize: 13px, fontWeight: 400, lineHeight: 1.6, letterSpacing: 0 }
hero-title: { fontFamily: "-apple-system, Segoe UI, system-ui, Roboto, Noto Sans, sans-serif", fontSize: 25px, fontWeight: 800, lineHeight: 1.28, letterSpacing: 0 }
section-h2: { fontFamily: "-apple-system, Segoe UI, system-ui, Roboto, Noto Sans, sans-serif", fontSize: 16px, fontWeight: 800, lineHeight: 1.25, letterSpacing: 0 }
card-title: { fontFamily: "-apple-system, Segoe UI, system-ui, Roboto, Noto Sans, sans-serif", fontSize: 14px, fontWeight: 700, lineHeight: 1.4, letterSpacing: 0 }
mono-label: { fontFamily: "ui-monospace, JetBrains Mono, SFMono-Regular, Menlo, Consolas, monospace", fontSize: 10px, fontWeight: 700, lineHeight: 1.4, letterSpacing: 0 }
spacing:
page-max-3col: 1720px
page-max-prose: 1180px
gutter: 40px
toc-width: 208px
rail-width: 244px
col-gap: 40px
section-gap: 18px
scroll-margin: 84px
rounded:
panel: 12px
card: 10px
chip: 6px
inset: 5px
node: 2px
dot: 9999px
components:
topbar: { background: "{colors.bg}", border: "{colors.rule}", height: "compact" }
section-panel: { background: "{colors.bg}", border: "{colors.rule}", radius: "{rounded.panel}" }
toc-rail: { width: "{spacing.toc-width}", sticky: true }
metadata-rail: { width: "{spacing.rail-width}", sticky: true }
status-chip: { radius: "{rounded.chip}", ok: "{colors.ok}", risk: "{colors.risk}", hold: "{colors.hold}" }Overview
html_report_design defines a dense institutional report system for self-contained HTML deliverables. It is brand-neutral, compact, and publication-like: thin sticky top bar, compact hero, left table-of-contents rail, right metadata rail, rounded section panels, 13px body text, system fonts, and inline SVG iconography.
The system is multi-format. Long-form reports, dashboards, data registers, kanban boards, roadmaps, decks, one-pagers, portfolios, infographics, matrix canvases, and magazine-style features share visual DNA but must keep structurally different chrome.
Colors
The page is white with cool light bands and near-black ink. Navy is the swappable brand accent name, even when presets change the actual hue. OK uses a deeper same-hue accent. Risk and hold are fixed desaturated semantic colors across brand presets.
Do not invent extra semantic colors. Use source-type colors only for reference-list source pills.
Typography
The signature density comes from 13px body text, compact headings, system fonts, and mono micro-labels. Stats use heavy weights and tabular treatment. Presentation decks are the only format that may scale type substantially upward.
Keep letter spacing at 0 in generated token implementations unless a local format explicitly needs tracked uppercase labels.
Layout
The anchor layout is a centered three-column report grid: left sticky contents rail, main body, and right sticky metadata rail. Below tablet breakpoints, rails collapse into a single-column reading order.
Self-contained outputs inline the CSS, SVG icons, report data, and runtime scripts needed for the specific format. Avoid linked shared CSS or external assets.
Elevation & Depth
Depth is document-grade: borders, header bands, nested cards, and occasional dark code or diff panels. Avoid app-dashboard depth, floating cards inside cards, and decorative gradients.
Shapes
Rounded panels replace the older square-only report style. Panels use 12px, cards 10px, chips 6px, and tiny node/icon signatures 2px. Status dots use full radius.
Components
Topbar, hero, rails, section panels, reference chips, status chips, source pills, code panels, tables, diagrams, and bespoke icons are the recurring primitives. Icons come from the local SVG library, use currentColor, and avoid generic assistant imagery.
Do's and Don'ts
Do preserve dense institutional rhythm and self-contained portability. Do keep brand placeholders generic until an organization and project are provided. Do make each format structurally distinct, not just a themed clone. Don't introduce external fonts, CDN assets, raw private paths, or machine-specific metadata. Don't use extra semantic colors outside ok, risk, hold, and tightly scoped source-type pills.