Motir

Estimate: 40m · Depends on: 4.4.1, 4.5.1

The design asset every UI subtask of this story builds against. There is no chart design anywhere today — design/ has no reports/charts area, and the sprint (4.4.1) + scrum-board (4.5.1) designs only RESERVED an empty chart seam, they never drew a chart. Under the design gate an unspecified whole element == NO design, so this subtask produces it FIRST (mirrors 1.0.5 / 1.2.1 / 1.3.3 / 1.5.1 and the sibling design subtasks 4.3.1 / 4.4.1 / 4.5.1). Output: design/reports/charts.mock.html (an HTML mockup built from the real design system — components/ui/* + the --el-* colour tokens + the element-semantic shape tokens, so a coding agent has no Pencil→code gap) + a PNG export + design/reports/design-notes.md naming the composing primitives, copy, axis/legend treatment, and placement. --el-* only (no Tier-0 --color-*); shape via the element shape tokens; AA-safe; Jira's burndown + velocity reports as the mirror.

Specify, panel by panel:

• The reusable chart visual language — the shared scaffolding 4.6.2 will build into a primitive: the plot frame, the X/Y axes + tick labels, the gridlines, and the legend (a visible text legend, since colour alone is never the signal — finding #35). Define the series colours from the palette via NEW --el-* tokens where needed (e.g. a guideline tone, an actual-line tone, a committed-bar vs completed-bar pair) — do NOT reach for raw --color-*; the notes record which --el-* tokens to add. This is the language Epic 6.3 reuses, so draw it as a generic chart, not a bespoke one.
• Burndown chart — Y axis = remaining (story points; note the issue-count fallback), X axis = sprint days. The guideline (ideal straight line, committed → 0) and the actual remaining (a STEP line that drops on completion and rises on scope-add). Draw a scope-change marker treatment, the "today" indicator on a live sprint, and label the committed baseline at t=0. Specify the compact form for the scrum-header seam (small, beside the numeric remaining) AND the full form for the sprint-report seam.
• Velocity chart — a grouped bar chart: per completed sprint a committed bar + a completed bar (the pair clearly distinguished by text label, not colour alone), sprint names on the X axis, points on the Y axis, and the average-completed readout (a labelled line or a summary number — the planning forecast). Draw the "last 7 sprints" window.
• States — unestimated ("no point data" / the issue-count fallback, never NaN); too-little-history for velocity (0–1 completed sprints → a "not enough history yet" message, not an axis-of-one); the loading skeleton in the chart slot; the ErrorState; an empty sprint (flat guideline at 0).
• Seam placement — show the burndown inside the 4.5 scrum-header chart slot (the slot 4.5.1 reserved) and the burndown + velocity inside the 4.4.6 sprint-report chart slot (the slot the 4.4.1 design reserved). Reference (do not redraw) the header / report chrome; specify only the chart that drops into each slot and its sizing.

Acceptance criteria

• design/reports/charts.mock.html + a PNG export + design/reports/design-notes.md exist; the mockup is built from components/ui/* + --el-*/element-shape tokens only (no Tier-0 --color-*, no raw rounded-*/p-* for control shape), passes the render checklist (icon viewBox, no nested buttons, prettier --write, every panel), and is AA-safe.
• The mockup draws: the shared chart scaffolding (axes/gridlines/legend), the burndown (guideline + stepped actual + scope marker + "today" + committed baseline, in BOTH the compact header form and the full report form), the velocity grouped-bar chart (committed vs completed + average + the 7-sprint window), and the unestimated / low-history / loading / error / empty states.
• design-notes.md names each composing primitive + the heading scale, lists the NEW --el-* series tokens to add (guideline / actual / committed / completed), states that the in-sprint burndown fills the Story 4.5 scrum-header chart seam and the completed-sprint burndown + velocity fill the Story 4.4.6 sprint-report chart seam, states that the chart language is reused by Story 6.3, and documents the read-as-text legend + not-colour-alone (finding #35) rule.
• The asset REFERENCES (does not redraw) the scrum header (4.5.1) + sprint report (4.4.1) chrome; it specifies only the charts + their seam placement + sizing.

Context refs

• design/boards/scrum.mock.html + the "Scrum board (Story 4.5)" notes (4.5.1) — the scrum-header chart SEAM this burndown fills (placement + the reserved slot)
• design/sprints/sprint-lifecycle.mock.html + design/sprints/design-notes.md (4.4.1) — the sprint-report chart SEAM this burndown + velocity fill
• components/ui/* (Card, Pill, EmptyState, ErrorState, the heading scale) + the /tokens specimen route — the primitives the chart frame composes from
• app/globals.css --el-* (add the series tokens here) + the element-shape tokens
• Jira's Burndown Chart (guideline + remaining + scope change) and Velocity Chart (commitment vs completed bars + average) as the mirror; findings #35 (read as text), #54 (use the palette, not grey+primary), and the design-mockup render checklist