A single source of truth for the shared visual system of every HTML report in this skill
(recommendation-report.html, poc-report.html). The v3 style is document-first (sober typography,
numbered sections, ruled tables) with one accent data visualization (score bars). Keeping it
here means these rules are maintained in ONE place, so reports stop drifting.
Content-specific CSS (score bars, unit cards, diagram cards, cost cards, etc.) does NOT
live here — each report keeps its own content rules in its own generator, ADDED AFTER this
block. Never restate a shell rule locally.
The two chart fill colors are design-system constants, validated with the dataviz
six-checks palette validator on the white document surface (lightness band PASS, CVD ΔE 66+
PASS; the muted tone is a deliberate de-emphasis, and every bar always carries a visible
value label, which satisfies the contrast-relief obligation):
--chart-accent: #C77700 — the WINNER / primary magnitude fill. (NOT #FF9900: raw AWS
orange fails 3:1 contrast on white. #FF9900 is reserved for chrome on DARK surfaces —
where it has ample contrast.)
--chart-muted: #94a3b8 — every de-emphasized bar/track mark.
Any report that renders a Mermaid diagram loads the SAME SRI-pinned mermaid@10.9.3 script tag
in its <head> — copy it VERBATIM (the integrity hash must not change):
Each report generator inlines the CSS block above into its own <style> block, then adds
its OWN content-specific rules after it. The union of (this shell + the report’s own
content CSS) must reproduce that report’s full rule set — do not drop or restyle a shared
rule locally, or the reports drift again.
Component contract (what each shared piece is FOR):
Component
Use
.doc-head family
document header: kicker, title, meta row (run ID, date, entry point, region, status)
.help-strip
compact help CTA (v3 report family uses this; see report-help-banner.md for a note)
h2 / h3 + .no
numbered sections (the .no span is the muted section number)
table / th / td / .em
document tables with 2px ink header rule; .target is bold runtime verdicts
.lede / .note
lead paragraph (slightly larger) / muted footnote text
.rule-cite / .pre-flag
inline rule citations (e.g., Tier1-R5) / PRE-RELEASE flag
.scores / .score-row
sober score bars (the v3 form, moved into the shell since Temporal sections reuse them)
.callout / .callout.warn
bordered info callouts with left accent; .warn is amber
the ONLY chart fill colors (see Chart color tokens above)
recommendation-report.html — references/phases/generate/generate-report.md inlines
this block plus its unit-card/diagram/alternatives/service/cost content rules.
Temporal sections — Temporal migration content renders as a CONDITIONAL section of
recommendation-report.html (references/phases/generate/generate-report.md, gated on
temporal units); its tier tables use the shared table, its cutover runbook the shared
.timeline, and any diagram the shared mermaid tag.
poc-report.html — references/phases/poc/poc-report.md; its file map uses
.feat-grid, its deploy steps use .timeline.
The shared “Need help?” CTA: references/report-help-banner.md documents the full 3-card
banner form. The v3 report family renders it as .help-strip (the compact inline variant
defined in this shell).