HTML Report Builder
Polished consulting reports as standalone HTML. Print to PDF via browser.
Install
git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/html-report-builder ~/.claude/skills/
When to Use
- Audit reports, performance analyses, strategy documents
- Any multi-section document that needs professional formatting
- When the deliverable is a report (not slides — use pro-deck-builder for decks)
Quick Reference
| Task | Approach |
|---|---|
| Create report from scratch | Read REFERENCE.md for CSS + HTML patterns |
| Add a new component | Compose from existing components in REFERENCE.md |
| Export to PDF | Open in browser → Print → Save as PDF (Cmd+P) |
| Update design tokens | Edit CSS custom properties in :root block |
Before You Start
Ask the user:
- What type of report? Audit, strategy, performance review, case study?
- How many sections? Helps plan the document structure.
- What data do they have? Raw numbers, API exports, spreadsheets?
- Where should the file be saved? Get an explicit path.
Design System
Color Tokens
:root {
/* Dark mode (cover page only) */
--bg-deep: #141414;
--bg-surface: #1E1E1E;
--bg-elevated: #282828;
--text-bright: #f0f3f6;
--text-secondary-dark: #9ca3af;
/* Light mode (content pages — the default) */
--bg-light: #FAF7F2;
--bg-light-surface: #F2EDE6;
--text-primary: #0f0e0e;
--text-secondary: #57606a;
--text-muted: #8b949e;
/* Brand accent */
--accent: #3D7A5C;
--accent-light: #6AB88A;
/* Semantic */
--green: #2e8b57;
--red: #c0392b;
--amber: #D97706;
}
Color Rules
- Light mode (
#FAF7F2warm cream) is default for all content pages. NOT white. - Dark mode (
#141414) only for: cover page. - Accent green (
#3D7A5C) used sparingly: key metrics, accent callouts. - Semantic colors (green/amber/red) only for status indicators, never decoration.
Typography
| Role | Font | Weight | Size |
|---|---|---|---|
| Report title | Switzer | Light (300) | 48-64px |
| Section heading | Switzer | Regular (400) | 28-32px |
| Subsection heading | Switzer | Medium (500) | 20-22px |
| Body text | Switzer | Regular (400) | 16-17px |
| KPI number | Cartograph CF | Bold (700) | 36-48px |
| Data label | Cartograph CF | Regular (400) | 13px |
| Table data | Cartograph CF | Regular (400) | 14px |
Critical rules:
- Headlines use Light (300), NOT Bold. Light at large sizes = confident, premium.
- Cartograph CF for ALL numeric/data content. KPIs, table numbers, labels.
- Negative tracking on headlines. -0.03em to -0.04em.
- Positive tracking on ALL CAPS labels. +0.08em to +0.1em.
Font loading:
- Switzer: free from Fontshare CDN
- Cartograph CF: commercial, loaded via
local(). Fallback:'JetBrains Mono', 'Consolas', monospace
Document Structure
Cover Page (dark) → Table of Contents → Executive Summary → Findings (3-6 sections) → Recommendations → Appendix
Component Library
| Component | Use |
|---|---|
| KPI Card | Big number + label + detail |
| Data Table | Styled table with mono numbers, severity colors |
| Callout Box | Highlighted insight or bottom-line statement |
| Recommendation Card | Numbered action with impact + effort badges |
| Priority Banner | Critical/warning/info alert bar |
| Section Divider | Visual break between major sections |
| Bullet List | Styled list with custom markers |
| Numbered List | Ordered list with accent-colored numbers |
Narrative Rules
- Lead with the number. Metric-first, explanation second.
- One insight per section. If a section makes two points, split it.
- Benchmark everything. Never show a metric without context.
- Color = meaning. Green/amber/red only for performance indicators.
- No white backgrounds. Always warm cream
#FAF7F2. - No bold headlines. Switzer Light (300) for report title and hero headings.
PDF Export
Open the HTML file in Chrome/Safari → Cmd+P → Save as PDF. Set margins to "None" and enable "Background graphics."
For complete CSS framework and HTML patterns, see REFERENCE.md.