pwc-report-design-system

name

pwc-report-design-system

description

Replicate PwC Indonesia Transparency Report design (peach gradient cover, orange section numerals, serif/sans pairing, sidebar layouts, KPI callouts) for Markdown→PDF reports. Use whenever the user mentions PwC-level report, pwc-level-report.pdf, transparency report design, replicate PwC PDF, professional services report layout, or wants Bridge/strategy docs re-skinned to PwC visual standards instead of Bridge navy theme. Also trigger for "check PwC report design", "PwC page templates", or comparing output to docs/analysis/pwc-level-report.pdf — even if they don't say "skill".

PwC Report Design System

Reproduce the visual system in docs/analysis/pwc-level-report.pdf (43pp, A4). This is a layout skin, not PwC branding for unauthorized external use — confirm context with user if document is public-facing.

First steps

1. Read references/design-tokens.md for colors and type rules.
2. Read references/page-templates.md and pick templates per section.
3. Read references/markdown-conventions.md for build commands and HTML comment syntax.

Reference PDF for visual QA: docs/analysis/pwc-level-report.pdf. Render pages with pdftoppm when comparing spacing.

Build (required path)

Do not use tools/pdf/build.mjs (Bridge navy theme). Use:

node tools/pdf/build-pwc.mjs <input.md> --out <output.pdf> [--title "..."] [--subtitle "..."] [--photo cover.jpg] [--brand "PwC"]

Theme CSS: tools/pdf/pwc-theme.css. Extend CSS there if a template element is missing — keep tokens aligned with design-tokens.md.

Validate before claiming done

python .claude/skills/pwc-report-design-system/scripts/validate_pwc_output.py <output.pdf>
# auto-reads <output>.__audit.html if present (written by build-pwc.mjs)

Also spot-check rendered pages 1–3 against reference (cover gradient, TOC orange numerals, section opener 62/38 split).

Workflow: new report from scratch

1. Outline sections → assign template types (see page-templates.md).
2. Write markdown using conventions (<!-- pwc:toc -->, section openers, sidebar, stats, back matter).
3. Source photos: professional, full-bleed for openers; square headshot for sidebar. Use placeholders only when necessary.
4. Run build-pwc.mjs → validate script → visual compare.
5. Iterate CSS/markdown until orange numerals, peach sidebar, and serif titles match reference.

Workflow: re-skin existing Bridge doc

1. Read source docs/**/*.md — extract H1 title, ## sections, tables, callout stats.
2. Insert section-opener before each major ## (map 01-swot, 02-pestel, etc.).
3. Convert Bridge --stats lines to <!-- pwc:stat ... --> blocks.
4. Build with build-pwc.mjs; verify no Bridge classes (cover-mark, --ink, stat-band) remain in HTML.

Design rules (why they matter)

• Orange only for hierarchy — section numbers, KPIs, rules. Overuse dilutes PwC scan pattern.
• Serif only on titles — mixing serif body copy is off-brand for this reference.
• Cover is light — peach gradient + white; dark covers are Bridge, not PwC.
• Running header — minimal: brand + page number top-right. No heavy footers.
• Whitespace — when unsure, add margin; reference report is airy, not dense like Bridge PESTEL PDF.

Visual inspection without guessing

bash .claude/skills/pwc-report-design-system/scripts/compare_pwc_pages.sh \
  docs/analysis/pwc-level-report.pdf <your-output.pdf> /tmp/pwc-qa 5

Compare ref/page-*.png vs sample/page-*.png for cover, TOC, openers. Sign-off requires pages 1–2 token match (orange #D04A02, peach gradient, serif TOC title, 42pt orange numerals).

Bundled resources

Path	Purpose
references/design-tokens.md	Colors, type scale, spacing
references/page-templates.md	8 page layouts + anti-patterns
references/markdown-conventions.md	MD syntax + checklist
scripts/validate_pwc_output.py	Automated token/layout checks
../../tools/pdf/pwc-theme.css	Print CSS (repo root relative from skill: tools/pdf/)
../../tools/pdf/build-pwc.mjs	PDF builder

Known gaps vs reference PDF

Gap	Mitigation
TOC/header page must show 2 on page 2	Use single-document print in build-pwc.mjs with CSS @page @top-right { content: "PwC " counter(page); } and @page :first { @top-right { content: none; } } — do not merge cover+body PDFs with Chrome headerTemplate
Cover photo / skew blocks	Pass --photo path.jpg; tune .cover-bars / .cover-photo in pwc-theme.css
Slope charts / hex icons	Not in v1 CSS — add SVG components or static PNG from reference

After visual compare, read outputs/pwc-design-audit.md pattern (tokens / layout gaps / CSS fixes) and apply top fixes to pwc-theme.css before sign-off.

When output is still wrong

• Missing opener split → check section-opener CSS flex: 0 0 62% on .opener-photo
• Opener spills to 2 pages → use height: calc(297mm - 2 * var(--margin-y)) and page-break-before: avoid on first opener in body
• Wrong colors → grep audit HTML for #0C1E38 or #E8A23B (Bridge leaks)
• TOC not rendering → need <!-- pwc:toc --> AND lines matching N. Title — PP
• Validation fails → fix CSS hex first, rebuild; validator reads .__audit.html automatically