/html-report-design-system

name: html-report-design-system
description: Create polished, interactive, mobile-friendly HTML reports using the AllyHub-style report design system. Use this skill whenever the user asks for an HTML report, interactive research/analysis page, source-backed visual summary, dashboard-like report page, or wants to apply the provided blue/sage/sand/rose/slate/moss/plum/ember/mist/clay report format. It covers visual tokens, layout, cards, charts, citations, responsive behavior, animation, and source-level validation; prefer it even when the user says only “做成 HTML 报告” without specifying a style.
compatibility: Requires a writable workspace for the final HTML. Chart.js may be loaded from cdnjs when charts are needed. Do not depend on opening the generated HTML for validation.

HTML Report Design System

Use this skill to turn research, analysis, structured reference material, and data summaries into a self-contained, polished HTML report. The report should feel like a compact editorial/data product rather than a raw document: clear hierarchy, meaningful interactivity, restrained decoration, and strong mobile behavior.

1. Decide the report shape

Before writing HTML:

1. Identify the report's main job: explain findings, compare options, show trends, document a guide, or present a dashboard-like summary. 2. Select one theme from `blue`, `sage`, `sand`, `rose`, `slate`, `moss`, `plum`, `ember`, `mist`, or `clay` according to the subject. If the user gives no style preference, use the subject-appropriate theme rather than defaulting blindly to blue. 3. Keep the hero compact and information-dense. Use an eyebrow, headline or hero metric, subtitle, a hairline divider, and a small stat row only when useful. 4. Use the page shell, cards, metric blocks, tables, alerts, progress bars, and charts only when they help comprehension. Do not decorate for its own sake. 5. If data or research sources are involved, plan citations in the body and a reference section near the footer before writing the page.

2. Required visual tokens

Define CSS custom properties at `:root`, then use them consistently. The base system is:

:root {
  --outer-bg:#E4E1DC; --page-bg:#FDFCF9; --surface:#FFFFFF;
  --border:#E8E6E2; --divider:#C5C0BA;
  --text-primary:#151515; --text-body:#3D3D3D; --text-secondary:#717171;
  --hero-bg:#DEE5F7; --hero-deco:#A3AEEE; --hero-deco2:#7F8FE0;
  --success-bg:#E8FBCF; --success-fg:#3D4826;
  --warning-bg:#FFF0DC; --warning-fg:#E47700;
  --info-bg:#DEE5F7; --info-fg:#3E54CE;
  --error-bg:#FDECEA; --error-fg:#C4433A;
  --neutral-bg:#FDF9F2; --neutral-fg:#7C746F;
}

Theme-specific hero overrides (only change the three hero variables):

• `blue`: `#DEE5F7 / #A3AEEE / #7F8FE0`
• `sage`: `#D7EDE2 / #8FC5A8 / #5FA882`
• `sand`: `#EDE8DE / #C8BB9F / #A99778`
• `rose`: `#F0E4E1 / #C4A8A2 / #A88078`
• `slate`: `#DDE3E8 / #9BADB0 / #6E9298`
• `moss`: `#DDE8D8 / #93B888 / #5E8F52`
• `plum`: `#E8DDEF / #B89AC8 / #8F6AAF`
• `ember`: `#F0E4D8 / #D4A882 / #B87D50`
• `mist`: `#E2E8E8 / #96B4B4 / #6A9898`
• `clay`: `#EDE4DC / #C4A890 / #A07858`

Typography:

• Use `Inter Tight, sans-serif` throughout; provide a sensible system fallback.
• Use `Noto Serif` only for hero metrics.
• Section title: `17px / 600`; card title: `15px / 600`; body: `14px / 400`; small body: `13px`; meta: `12px`; tag/badge: `11px / 500`.
• Hero metric: `48px / 500`, `letter-spacing:-0.02em`.

3. Page shell and responsive behavior

Use a centered shell with `max-width:1200px`, `background:var(--page-bg)`, `border-radius:24px`, and `overflow:hidden`, placed on `var(--outer-bg)`. Use a comfortable desktop outer padding, but collapse the frame on small screens:

@media (max-width: 720px) {
  body { padding:0; }
  .page-shell { width:100%; max-width:none; border-radius:0; }
  .content { padding-left:16px; padding-right:16px; }
}

On mobile, the report must fill the viewport width: no outer padding, no side margins, no page corner radius. Collapse 2-column card grids to one column. Put wide tables inside a horizontally scrollable wrapper. Keep tap targets comfortable and avoid hover-only interactions.

4. Hero and footer

Both hero and footer use `--hero-bg`. Add no more than four irregular, organic blob shapes in each zone. Blobs are absolutely positioned, low-opacity decoration using `--hero-deco` and `--hero-deco2`; they must not affect layout height.

Avoid the specificity trap where a child wildcard changes blob positioning. Put meaningful content in a named wrapper such as `.hero-content { position:relative; z-index:1; }`; do not use a later `.hero > *` or `footer > *` rule that assigns `position` or `z-index`.

Hero pattern:

1. Optional eyebrow label. 2. Headline or hero metric. 3. Optional subtitle. 4. Optional white hairline divider. 5. Compact stat row of value + label pairs.

Footer pattern:

• Brand title and sub-label on the left.
• Two-column metadata on the right.
• White hairline divider.
• Bottom bar with document info on the left and copyright on the right.
• Include `Generated by <a href="https://allyhub.com" target="_blank" rel="noopener noreferrer">AllyHub AI</a>` when the generated-by line is present.

5. Core components

Section heading

Use a 17px semibold title, optional 12px secondary label, and a full-width `0.5px` border rule below.

Cards

White surface, `0.5px var(--border)`, `12px` radius, and a restrained shadow if needed. Use a 2-column grid that collapses to one column. Card headers pair a title with small metadata. Quote or insight blocks are separated with `0.5px` rules; omit the last divider.

Metrics and KPI blocks

For metric cards, use an auto-fit grid with `minmax(140px,1fr)`. Sequence: label, value, delta, optional sparkline. Use a larger stat card for a single headline number. Use success/error colors only when the direction is meaningful; do not imply a positive or negative judgment without data.

Pills and alerts

Pills use `11px / 500