The layout and type system that makes a data story feel designed rather than generated. This is the largest gap in generic output: mechanically correct content set in default type on an ungridded page.
Typography system
Set a deliberate system before writing a single page:
Two faces, assigned roles: a display face with personality for headlines and big numbers, a workhorse for body and labels. The pairing carries the artifact’s character — choose it to match the story’s tone (authoritative, urgent, exploratory), never default to the renderer’s default stack. (Aligns with anthropics frontend-design: “typography carries the personality of the page”; and theme-factory‘s curated pairings are a legitimate shortcut.)
A modular scale, not ad-hoc sizes: e.g. 11/14/18/24/36/54. Reports: body 10–11pt print / 16–18px screen, generous leading (1.4–1.6). Presentation slides: titles 36–44pt, body ≥18pt spoken / ≥14pt slidedoc (aligns with anthropics pptx floors).
font-variant-numeric: tabular-nums (or a tabular figure set) wherever numbers stack or compare — tables, KPI rows, axis labels.
Real typographic marks: curly quotes, en-dashes for ranges (2019–2024), minus signs (−4.2%, not hyphens), non-breaking spaces between value and unit (10 MB).
Consistent decimal precision per measure; thousands separators; compact notation ($2.4M) used consistently.
Hierarchy through weight and size, not decoration: no underlined headings, no accent bars under titles (a named pptx anti-pattern), no ALL-CAPS body.
Line length 45–75 characters for body text; text-wrap: balance (or manual breaks) on headlines to kill widows.
Pick a grid and commit: 12-column for reports and web, 3–4 content regions for slides. Every element aligns to it — “deliberate alignment, no accidental placement.” Near-alignment reads as sloppiness; exact alignment reads as intent.
Whitespace is structure: margins and spacing encode grouping (Gestalt proximity). Dense ≠ rigorous; a page’s restraint signals editing.
One focal point per page/slide/screen: the eye’s first landing spot is a design decision. Big number, hero chart, or headline — pick one; everything else is subordinate.
Page rhythm in reports: vary density deliberately (full-bleed chart page → dense evidence spread → breathing-room transition). Uniform density is monotony; random density is chaos.
Covers and section openers earn their page: title as claim, one hero visual or number, date/source/author. No wall of logos.
4–6 named colors total: background, ink, one signature accent, 2–3 chart categoricals (inherit chart-color rules from dreambase-visualization-design‘s color-accessibility.md — ≤6 hues, CVD-safe, never color-only meaning).
“Spend your boldness in one place” (frontend-design): one signature element — the hero chart, the big number, the cover — carries the strong color; everything else stays quiet.
The same palette runs across every artifact from the same analysis (report, deck, one-pager) — cross-format consistency is what makes a set of artifacts feel like one story.
Avoid the recognizable AI-default palettes (cream+serif+terracotta, near-black+acid-green) — named by frontend-design as generative tells.
A big-number callout (large numeral + one-line label + context line) beats a one-value chart. Derive it from real data and give it the comparison that makes it meaningful (vs. target, vs. last period).
Pull quotes and callout boxes are for the argument’s hinge points, one per spread/section at most — a page of callouts has none.
Annotation boxes on charts follow dreambase-visualization-design rules: observation on the chart, interpretation clearly marked.
When building actual files, use the established mechanics skills if available in the environment, and keep this skill’s role to the design system:
.pptx → anthropics pptx skill (pptxgenjs creation, XML editing, thumbnails, validation). Its palettes/layouts are sane defaults; this skill’s story structure and type system override where they conflict.
.docx → anthropics docx skill (mechanics only — it carries no design opinions; this skill owns the design layer entirely).
PDF output → anthropics pdf skill or print-CSS from HTML.
HTML artifacts / scrollytelling → dreambase-echarts for charts; standard web craft for the page (contrast, keyboard access, responsive breakpoints — see web-design-guidelines-style audits).
If a mechanics skill isn’t available, build clean HTML/markdown and say what tooling would produce the final format.