Component library

<Slide>

sharedChromePresentation

Base slide canvas with padding inside the deck; optional printed-page chrome band.

When to use: Wrap slide body when you do not need a named layout template. Add the chrome props for a masthead/footline treatment (section name top-left, slide tag top-right, deck name + page bottom).

Preview

Part 1

Agenda

Current state03 / 12

Manual hours / week

142

Acme · Automation discoveryConfidential

Prop	Type	Notes
children	ReactNode	Required. Slide content.
className	string	Optional. Extra Tailwind classes on the inner frame.
eyebrow	string	Optional. Chrome label top-left (e.g. section name).
eyebrowRight	string	Optional. Chrome slot top-right, opposite eyebrow (e.g. slide counter).
footerLeft	string	Optional. Chrome line bottom-left (e.g. deck name or date).
footerRight	string	Optional. Chrome line bottom-right, opposite footerLeft (e.g. page label).

Examples

<Slide>
  <TitleSlide label="Part 1" title="Agenda" />
</Slide>

<Slide eyebrow="Current state" eyebrowRight="03 / 12" footerLeft="Acme · Automation discovery" footerRight="Confidential">
  <BigStat label="Manual hours / week" value="142" />
</Slide>

<TitleSlide>

coreTitlePresentation

Hero title slide with optional small label, subtitle, and either a decorative accent-dot row or a numbered badge circle.

When to use: First slide of a deck or part boundaries. Use `badge` for a magazine-style numbered cover mark instead of `accentDots`.

Preview

Lunnoa

Automation discovery

Report outcomes · May 2026

Field Office Quarterly

Index 2026

A field report on the state of things.

Prop	Type	Notes
title	string	Required. Main headline.
subtitle	string	Optional. Supporting line under the title.
label	string	Optional. Small uppercase label above the title.
accentDots	number	Optional. 1-5 fading accent dots at top-right, opposite the label; a small cover signature mark.
badge	string	Optional. Short text (e.g. "01") in a ringed circle at top-right, opposite the label. Takes priority over accentDots.Example: `01`

Examples

<TitleSlide label="Lunnoa" title="Automation discovery" subtitle="Report outcomes · May 2026" accentDots={3} />

<TitleSlide label="Field Office Quarterly" title="Index 2026" subtitle="A field report on the state of things." badge="01" />

<SectionSlide>
coreChapterPresentation
Section heading slide with optional supporting line.
When to use: Mark a new chapter inside the deck.
Preview
Today
How work actually flows
Prop Type Notes
title string Required. Section title.
kicker string Optional. Small line above the title.
Examples
```
<SectionSlide kicker="Today" title="How work actually flows" />
```
<SplitSlide>
coreSplitPresentation
Two-column layout for text plus visual or bullets plus callout.
When to use: Compare two blocks or pair narrative with a stat.
Preview
Five inboxes per invoice
No single queue of record
Manual touches
5
per supplier invoice
Prop Type Notes
left ReactNode Required. Left column content.
right ReactNode Required. Right column content.
reverse boolean Optional. Default: false. Swap columns on wide screens.
Examples
```
<SplitSlide
 left={<BulletList items={["Five inboxes per invoice", "No single queue of record"]} />}
 right={<BigStat label="Manual touches" value="5" hint="per supplier invoice" />}
/>
```

Prop	Type	Notes
title	string	Required. Section title.
kicker	string	Optional. Small line above the title.

Prop	Type	Notes
left	ReactNode	Required. Left column content.
right	ReactNode	Required. Right column content.
reverse	boolean	Optional. Default: `false`. Swap columns on wide screens.

<QuoteSlide>

coreQuotePresentation

Large pull quote with attribution and a decorative oversized quotation mark.

When to use: Stakeholder voice on a dedicated slide.

Preview

We approve the same five steps five hundred times a month.

Head of Finance · Finance

Prop	Type	Notes
children	ReactNode	Required. Quoted text.
attribution	string	Optional. Name.
role	string	Optional. Role or department.
mark	boolean	Optional. Default: `true`. Show the large accent-tinted quotation glyph above the quote.

Examples

<QuoteSlide attribution="Head of Finance" role="Finance">
  We approve the same five steps five hundred times a month.
</QuoteSlide>

<BigStat>

coreStatsPresentation

Single oversized metric with label, optional unit suffix, hint, and a longer description.

When to use: One number that should land emotionally.

Preview

Invoices / month

1,240

AP team, three legal entities

Manual hours

142hrs / week

Across intake, matching, and exception handling.

Prop	Type	Notes
label	string	Required. Short label above the value.
value	string	Required. The headline value.
unit	string	Optional. Short suffix beside the value at a smaller scale (e.g. "%", "hrs / week").
hint	string	Optional. Muted footnote under the value.
description	string	Optional. Longer supporting sentence under hint.

Examples

<BigStat label="Invoices / month" value="1,240" hint="AP team, three legal entities" />

<BigStat label="Manual hours" value="142" unit="hrs / week" description="Across intake, matching, and exception handling." />

<MediaSlide>
coreMediaSplitPresentation
Title plus optional image area (use src + alt for static images).
When to use: Screenshot or diagram slide.
Preview
Current intake
Prop Type Notes
title string Required. Slide title.
src string Optional. Image URL (https recommended).
alt string Optional. Image alt text.
children ReactNode Optional. Optional body under the title.
Examples
```
<MediaSlide title="Current intake" src="https://example.com/diagram.png" alt="Process diagram" />
```
<BulletList>
coreListPresentation
Styled bullet list from a string array.
When to use: Agenda, takeaways, or constraints.
Preview
Map the handoffs
Pick two pilots
Measure hours reclaimed
Prop Type Notes
items string[] Required. Bullet strings.
Examples
```
<BulletList items={["Map the handoffs", "Pick two pilots", "Measure hours reclaimed"]} />
```

Prop	Type	Notes
title	string	Required. Slide title.
src	string	Optional. Image URL (https recommended).
alt	string	Optional. Image alt text.
children	ReactNode	Optional. Optional body under the title.

Prop	Type	Notes
items	string[]	Required. Bullet strings.

<Reveal>

sharedChromeMotionPresentation

Reveals children when the in-deck reveal step reaches fromStep (client).

When to use: Progressive disclosure inside one slide; advance with Space before the next slide.

Preview

First point lands here.

Prop	Type	Notes
fromStep	number	Optional. Default: `0`. Visible when reveal step >= this value.
children	ReactNode	Required. Content to reveal.
tween	object	Optional. Optional GSAP vars for the reveal (subset: opacity, autoAlpha, y, x, duration, ease, delay).

Examples

<Reveal fromStep={0} tween={{ y: 16, opacity: 0, duration: 0.45, ease: "power2.out" }}>
  First point lands here.
</Reveal>

<Stagger>
sharedChromeMotionPresentation
Animates each direct child in sequence on slide enter (client).
When to use: Bullet build without manual Reveal steps.
Preview
One
Two
Prop Type Notes
children ReactNode Required. Typically several `` or `<div>` siblings.
tween object Optional. Per-child from-state vars plus duration, ease, stagger (seconds between children).
Examples
```
<Stagger tween={{ opacity: 0, y: 12, duration: 0.35, stagger: 0.08, ease: "power2.out" }}>
 One
 Two
</Stagger>
```

Prop	Type	Notes
children	ReactNode	Required. Typically several `<p>` or `<div>` siblings.
tween	object	Optional. Per-child from-state vars plus duration, ease, stagger (seconds between children).

<Counter>

sharedMotionStatsPresentation

Animates a number from from to to on slide enter (client).

When to use: Headline metrics on pitch slides.

Preview

0 hrs / week

Prop	Type	Notes
from	number	Optional. Default: `0`. Start value.
to	number	Required. End value.
suffix	string	Optional. Appended after the number.
tween	object	Optional. Optional { duration, ease, delay } for the count.

Examples

<Counter from={0} to={142} suffix=" hrs / week" tween={{ duration: 1.2, ease: "power2.out" }} />

<Highlight>
sharedMotionPresentation
Short emphasis tween on its child wrapper on slide enter (client).
When to use: Draw attention to inline text after it appears.
Preview
Wave 1
Prop Type Notes
children ReactNode Required. Content to emphasise.
tween object Optional. Optional { scale, duration, ease, delay } merged into gsap.from().
Examples
```
<Highlight tween={{ scale: 0.92, duration: 0.5, ease: "back.out(1.7)" }}>
 Wave 1
</Highlight>
```

Prop	Type	Notes
children	ReactNode	Required. Content to emphasise.
tween	object	Optional. Optional { scale, duration, ease, delay } merged into gsap.from().

<RagStatusBoard>

financeDataListPresentation

RAG (red, amber, green) health rows with workstream name and note.

When to use: Programme or portfolio project status on one slide.

Preview

Programme health

Green
Platform
Release train on schedule.
Amber
Data
Schema review slips one week.
Red
Change
SME availability for UAT not confirmed.

Prop	Type	Notes
title	string	Optional. Default: `Status`. Heading above the list.
rows	{ workstream: string; status: "red" \| "amber" \| "green"; note: string }[]	Required. One row per workstream with RAG dot and short note.

Examples

<RagStatusBoard
  title="Programme health"
  rows={[
    { workstream: "Platform", status: "green", note: "Release train on schedule." },
    { workstream: "Data", status: "amber", note: "Schema review slips one week." },
    { workstream: "Change", status: "red", note: "SME availability for UAT not confirmed." },
  ]}
/>

<BurnRunway>

financeStatsChartPresentation

Three-up summary for cash on hand, runway, and optional next milestone.

When to use: Steering updates, IC memos, or founder-style project finance snapshots.

Preview

Cash

£2.4m

Runway

14 months

Next gate

Series A data room · Aug

Prop	Type	Notes
cashLabel	string	Optional. Default: `Cash`. Label above cash figure.
cashValue	string	Required. Cash headline (include currency).
runwayLabel	string	Optional. Default: `Runway`. Label above runway figure.
runwayValue	string	Required. Runway headline (e.g. months or date).
milestoneLabel	string	Optional. Third column label; omit with milestoneValue to hide the column.
milestoneValue	string	Optional. Third column value when both milestone props are set.

Examples

<BurnRunway
  cashValue="£2.4m"
  runwayValue="14 months"
  milestoneLabel="Next gate"
  milestoneValue="Series A data room · Aug"
/>

<BlockersAndAsks>

financeListPresentation

Two columns: blockers list and asks list using the slide bullet style.

When to use: Committee or sponsor slide separating risks from explicit decisions needed.

Preview

Blockers

SAP cutover window clashes with quarter close
UAT sign-off owner on leave

Asks

Confirm Wave 2 scope by Friday
Nominate deputy approver for finance

Prop	Type	Notes
blockersTitle	string	Optional. Default: `Blockers`. Left column heading.
asksTitle	string	Optional. Default: `Asks`. Right column heading.
blockers	string[]	Required. Bullet strings for blockers.
asks	string[]	Required. Bullet strings for asks.

Examples

<BlockersAndAsks
  blockers={["SAP cutover window clashes with quarter close", "UAT sign-off owner on leave"]}
  asks={["Confirm Wave 2 scope by Friday", "Nominate deputy approver for finance"]}
/>

<NextThirtyDays>
financeListTimelinePresentation
Ordered list of dated commitments for the coming month.
When to use: Delivery cadence or milestone preview on project update decks.
Preview
Next 30 days
Week 1Freeze scope for pilot A.
Week 2Integration test with sandbox ERP.
Week 4Go / no-go for production cutover.
Prop Type Notes
title string Optional. Default: Next 30 days. Slide heading.
items { date: string; text: string }[] Required. `date` is a short label (e.g. "12 Jun" or "Week 2"); `text` is the commitment.
Examples
```
<NextThirtyDays
 items={[
 { date: "Week 1", text: "Freeze scope for pilot A." },
 { date: "Week 2", text: "Integration test with sandbox ERP." },
 { date: "Week 4", text: "Go / no-go for production cutover." },
 ]}
/>
```

Prop	Type	Notes
title	string	Optional. Default: `Next 30 days`. Slide heading.
items	{ date: string; text: string }[]	Required. `date` is a short label (e.g. "12 Jun" or "Week 2"); `text` is the commitment.

<DeliverableGrid>

financeAgendaDataPresentation

Compact deliverable table with owner, optional due date, and status.

When to use: Wave or sprint outcome tables on project update slides.

Preview

Deliverables

DeliverableOwnerDueStatus

Invoice APIPlatform18 JunIn test

PlaybooksChange25 JunDraft

Prop	Type	Notes
title	string	Optional. Default: `Deliverables`. Heading above the grid.
columns	2 \| 3	Optional. Default: `3`. 3 columns include Due; 2 columns omit Due.Values: 2, 3Example: `3`
rows	{ deliverable: string; owner: string; due: string; status: string }[]	Required. Table rows; `due` is shown only when columns is 3.

Examples

<DeliverableGrid
  rows={[
    { deliverable: "Invoice API", owner: "Platform", due: "18 Jun", status: "In test" },
    { deliverable: "Playbooks", owner: "Change", due: "25 Jun", status: "Draft" },
  ]}
/>

<ProjectGantt>

financeTimelineDataPresentation

Professional week-indexed Gantt: time axis with gridlines, status-coloured bars with an optional inner progress fill, milestone markers, optional phase grouping, and a "today" marker. Bars scale in on slide enter (client).

When to use: High-level delivery plan or roadmap when you need a real time-scaled Gantt view (not just a phased list) without external chart libraries. Use `groups` instead of `rows` once you have more than about five workstreams, so they read as waves/phases rather than one long list.

Often with: RoadmapTimelineProcessSteps

Preview

Delivery plan

Week 0 – 15 · 16 weeks

Workstream

W0W3W6W9W12W16

Wave 1: Foundations

Discovery

Build

Sprint 1–4

Wave 2: Rollout

UAT

Go-live

Hypercare

DoneIn progressAt riskPlannedToday

Prop	Type	Notes
title	string	Optional. Default: `Delivery plan`. Slide heading.
totalWeeks	number	Optional. Default: `12`. Timeline length; indices run 0 … totalWeeks - 1.
unitLabel	string	Optional. Default: `"Week"`. Axis unit noun used in tick labels (first letter, e.g. "W3") and the caption. Use "Sprint" or "Month" for other cadences.
rows	{ trackLabel: string; segments: GanttSegment[]; milestones?: { label: string; week: number }[] }[]	Optional. Flat swimlane rows (ignored when `groups` is set). GanttSegment = { label, startWeek, durationWeeks, status?: "done" \| "active" \| "planned" \| "at-risk", progressPct?: number }.
groups	{ groupLabel: string; rows: GanttRow[] }[]	Optional. Rows organised into labelled phases/waves (e.g. "Wave 1: Foundations"), each with its own heading. Preferred over `rows` for plans with more than ~5 workstreams.
todayWeek	number	Optional. 0-based week to draw a vertical "today" marker through every row.
showLegend	boolean	Optional. Default: `true`. Show the status-colour legend below the chart. Only renders when more than one status is actually used.
tween	object	Optional. Optional subset for the bar/milestone tween: duration, ease, stagger, delay (see sanitize allowlist).

Examples

<ProjectGantt
  title="Delivery plan"
  totalWeeks={16}
  todayWeek={5}
  groups={[
    {
      groupLabel: "Wave 1: Foundations",
      rows: [
        {
          trackLabel: "Discovery",
          segments: [{ label: "Discovery", startWeek: 0, durationWeeks: 3, status: "done" }],
        },
        {
          trackLabel: "Build",
          segments: [{ label: "Sprint 1–4", startWeek: 2, durationWeeks: 6, status: "active", progressPct: 55 }],
          milestones: [{ label: "Design freeze", week: 4 }],
        },
      ],
    },
    {
      groupLabel: "Wave 2: Rollout",
      rows: [
        {
          trackLabel: "UAT",
          segments: [{ label: "UAT", startWeek: 8, durationWeeks: 3, status: "planned" }],
        },
        {
          trackLabel: "Go-live",
          segments: [{ label: "Hypercare", startWeek: 11, durationWeeks: 2, status: "at-risk" }],
          milestones: [{ label: "Go-live", week: 11 }],
        },
      ],
    },
  ]}
/>

<StatBarChart>

coreChartPresentation

Vertical column chart with gridlines, per-bar value labels, and an optional legend for grouped series; columns grow in on slide enter (client). Set variant="pixel" for a stacked pixel-cell bar (editorial/print aesthetic) instead of a solid fill.

When to use: A statistics slide comparing real numeric values across categories (not just 0-100 shares like BarRow) — before/after, quarter-over-quarter, or a ranked breakdown with more than one series.

Often with: TrendLineChartBarRowComparisonTiles

Preview

Manual hours per week by team

Baseline measured in week 1

50h37.5h25h12.5h0h

38h

12h

Finance

29h

Operations

21h

BeforeAfter

Reader response, by quarter

Newsletter opens · 2024 Q1 — 2026 Q1

Q1 24

Q2 24

Q1 26

Prop	Type	Notes
title	string	Optional. Optional slide heading above the chart.
description	string	Optional. Optional one-line subtitle under the title.
series	{ label: string; tone?: "brand" \| "neutral" \| "success" \| "warning" \| "error" \| "sky" \| "purple" }[]	Optional. Series metadata aligned by index with each category's `values`. Omit for a single unnamed brand series; the legend only renders with more than one series.
categories	{ label: string; values: number[] }[]	Required. X-axis categories. `values` has one number per series, in the same order as `series`.
unit	string	Optional. Suffix appended to value labels and axis ticks, e.g. "%", "h", "k".
maxValue	number	Optional. Force the axis scale instead of deriving it from the data; useful to keep several charts visually comparable.
gridLines	number	Optional. Default: `4`. Number of horizontal gridlines above zero. Ignored when variant="pixel".
variant	"solid" \| "pixel"	Optional. Default: `solid`. "pixel" draws each bar as a column of small on/off cells instead of one solid rectangle, for a printed-ledger/graph-paper look.Values: solid, pixel
pixelCells	number	Optional. Default: `10`. Number of cells per bar when variant="pixel".
tween	object	Optional. Optional GSAP vars for the column entrance.

Examples

<StatBarChart
  title="Manual hours per week by team"
  description="Baseline measured in week 1"
  unit="h"
  series={[{ label: "Before", tone: "neutral" }, { label: "After", tone: "brand" }]}
  categories={[
    { label: "Finance", values: [38, 12] },
    { label: "Operations", values: [29, 9] },
    { label: "HR", values: [21, 6] }
  ]}
/>

<StatBarChart
  title="Reader response, by quarter"
  description="Newsletter opens · 2024 Q1 — 2026 Q1"
  unit="%"
  variant="pixel"
  categories={[
    { label: "Q1 24", values: [40] },
    { label: "Q2 24", values: [50] },
    { label: "Q1 26", values: [90] }
  ]}
/>

<MaturityRadar>

coreChartContentPresentation

Radar chart of maturity dimensions with optional target overlay; uses slide theming and fades in on slide enter (client).

When to use: Workshop or IC slide for multi-dimensional capability assessment (automation maturity, operating model, SEO pillars). Prefer over StatBarChart when scores are comparable across axes on a 1–5 scale.

Often with: StatBarChartStatusMatrixPyramidTopicGrid

Preview

Automation maturity — current vs. 6-month target

Scores from stakeholder interviews (1 = ad hoc, 5 = optimised).

CurrentTarget

Prop	Type	Notes
dimensions	string[]	Required. Axis labels, in order.
current	number[]	Required. Current scores, same order as dimensions.
target	number[]	Optional. Optional target scores, drawn as a dashed overlay.
max	number	Optional. Default: `5`. Maximum value on the radial axis.
title	string	Optional. Slide heading above the chart.
description	string	Optional. Subtitle or methodology note.
tween	object	Optional. Optional GSAP vars for chart entrance.

Examples

<MaturityRadar
  dimensions={["Data quality", "Tooling", "Process clarity", "Governance", "Automation skills"]}
  current={[3, 2, 3, 2, 2]}
  target={[4, 4, 4, 4, 3]}
  title="Automation maturity — current vs. 6-month target"
  description="Scores from stakeholder interviews (1 = ad hoc, 5 = optimised)."
/>

<MaturityHeatmap>

coreChartContentDataPresentation

Stage-based maturity grid (rows = dimensions, columns = levels) with current and optional target highlights; rows stagger in on slide enter (client).

When to use: Workshop slide when maturity is stage-based (CMMI-style levels) rather than numeric scores. Pair with MaturityRadar only when both views add value; usually pick one.

Often with: MaturityRadarStatusMatrixPyramid

Preview

Maturity stages — current vs. 6-month target

Workshop assessment, May 2026.

Dimension	Ad hoc	Repeatable	Defined	Managed
Data quality			●	○
Tooling		●		○
Process clarity			●	○
Governance	●		○

CurrentTarget

Prop	Type	Notes
rows	string[]	Required. Row labels (dimensions).
columns	string[]	Required. Column labels (maturity levels).
current	boolean[][]	Required. 2D array [row][col]. Each row should have at most one true cell.
target	boolean[][]	Optional. Optional target cells, drawn as a ring.
title	string	Optional. Slide heading above the grid.
description	string	Optional. Subtitle or methodology note.
tween	object	Optional. Optional GSAP vars for row entrance.

Examples

<MaturityHeatmap
  rows={["Data quality", "Tooling", "Process clarity", "Governance"]}
  columns={["Ad hoc", "Repeatable", "Defined", "Managed", "Optimised"]}
  current={[
    [false, false, true, false, false],
    [false, true, false, false, false],
    [false, false, true, false, false],
    [true, false, false, false, false]
  ]}
  target={[
    [false, false, false, true, false],
    [false, false, false, true, false],
    [false, false, false, true, false],
    [false, false, true, false, false]
  ]}
  title="Maturity stages — current vs. 6-month target"
  description="Workshop assessment, May 2026."
/>

<OpportunityMatrix>

coreChartCompareContentPresentation

Effort × impact scatter with quadrant guides and optional category tabs; chart fades in on slide enter (client).

When to use: Use-case portfolio slide before a UseCaseGrid or roadmap. Top-left (low effort, high impact) is the quick-win zone. Keep to 6–12 dots for readability.

Often with: MaturityRadarComparisonTilesUseCaseGridStatBarChart

Preview

Twelve use cases scored on effort and impact

Workshop prioritisation, 1 = low and 5 = high on each axis.

FinanceOperationsPeopleSales

Prop	Type	Notes
items	{ name: string; effort: number; impact: number; category?: string }[]	Required. Each item is plotted as a dot. effort and impact are 1–5.
title	string	Optional. Slide heading.
description	string	Optional. Subtitle or scoring note.
tabs	{ id: string; label: string }[]	Optional. Optional filter tabs. Include `{ id: "all", label: "All" }` first. Other tab ids slug-match `tabFilterKey` on each item.
tabFilterKey	"category" \| "name"	Optional. Default: `category`. Which item field tab ids match after slugify.Values: category, name
tween	object	Optional. Optional GSAP vars for chart entrance.

Examples

<OpportunityMatrix
  title="Twelve use cases scored on effort and impact"
  description="Workshop prioritisation, 1 = low and 5 = high on each axis."
  items={[
    { name: "Supplier invoice intake", effort: 2, impact: 5, category: "Finance" },
    { name: "Order acknowledgements", effort: 2, impact: 4, category: "Operations" },
    { name: "HR ticket triage", effort: 1, impact: 3, category: "People" },
    { name: "Contract renewal alerts", effort: 3, impact: 4, category: "Sales" }
  ]}
/>

<RoadmapTimeline>

coreTimelineAgendaContentPresentation

Vertical phased roadmap with status icons (done, active, planned), time chips, and milestone bullets; phases stagger in on slide enter (client).

When to use: Closing or delivery slide after use cases are agreed. Three to five phases reads cleanly on a 16:9 canvas.

Often with: OpportunityMatrixProcessStepsChronologySlideAgendaSlide

Preview

Wave 1 — 12-week delivery

Sequenced after workshop sign-off.

Phase 1 — Foundation
Weeks 1–3
- ERP middleware exposed
- Lunnoa platform deployed
Phase 2 — Build the three flows
Weeks 4–8
- HR triage live week 5
- Invoice intake live week 8
Phase 3 — Scale and govern
Weeks 9–12
- Second-wave backlog triage
- Usage and ROI review

Prop	Type	Notes
phases	{ label: string; when: string; status?: 'done' \| 'active' \| 'planned'; items?: string[] }[]	Required. Phases in chronological order.
title	string	Optional. Slide heading.
description	string	Optional. Subtitle or delivery note.
tween	object	Optional. Optional GSAP vars for phase entrance.

Examples

<RoadmapTimeline
  title="Wave 1 — 12-week delivery"
  description="Sequenced after workshop sign-off."
  phases={[
    { label: "Phase 1 — Foundation", when: "Weeks 1–3", status: "active", items: ["ERP middleware exposed", "Lunnoa platform deployed"] },
    { label: "Phase 2 — Build the three flows", when: "Weeks 4–8", status: "planned", items: ["HR triage live week 5", "Invoice intake live week 8"] },
    { label: "Phase 3 — Scale and govern", when: "Weeks 9–12", status: "planned", items: ["Second-wave backlog triage", "Usage and ROI review"] }
  ]}
/>

<UseCaseCard>

coreContentListPresentation

One use-case tile with wave priority, area, owner, impact, effort, and time-to-value; slide-themed with compact density when three or four cards share a grid.

When to use: Always inside `<UseCaseGrid>` on a slide. Up to four cards per slide (2×2). Pair with `<OpportunityMatrix>` on the prior slide for prioritisation context.

Often with: UseCaseGridOpportunityMatrixRoadmapTimeline

Preview

Wave 1 — four agreed flows

Wave 1 Finance

Supplier invoice intake

Automate three-way matching between supplier invoices, purchase orders, and goods receipts.

Impact: ≈ 220 hrs / month
Effort: M
TTV: 6 weeks

Owner: Maria Fernandes

Prop	Type	Notes
title	string	Required. Short use case name.Example: `Supplier invoice intake`
description	ReactNode	Required. One-paragraph description of what gets automated.
area	string	Optional. Functional area.Example: `Finance`
owner	string	Optional. Process owner.Example: `Maria Fernandes`
priority	"now" \| "next" \| "later"	Optional. Default: `next`. Wave assignment.Values: now, next, laterExample: `now`
impact	string	Optional. Estimated impact.Example: `≈ 220 hrs / month`
effort	string	Optional. Estimated effort, T-shirt size or duration.Example: `M`
timeToValue	string	Optional. Estimated time to first value.Example: `6 weeks`

Examples

<UseCaseGrid title="Wave 1 — four agreed flows">
  <UseCaseCard
    title="Supplier invoice intake"
    priority="now"
    area="Finance"
    owner="Maria Fernandes"
    impact="≈ 220 hrs / month"
    effort="M"
    timeToValue="6 weeks"
    description="Automate three-way matching between supplier invoices, purchase orders, and goods receipts."
  />
</UseCaseGrid>

<UseCaseGrid>

coreContentListPresentation

Grid wrapper for one to four `<UseCaseCard>` children on a single slide; auto 2×2 layout for multiple cards, staggered entrance on slide enter (client).

When to use: Recommended use cases slide after opportunity scoring. One card: single column. Two to four cards: two columns (2×2). Split across slides if you have more than four.

Often with: UseCaseCardOpportunityMatrixRoadmapTimeline

Preview

Wave 1 — four agreed flows

Workshop sign-off, May 2026

Wave 1 Finance

Supplier invoice intake

Automate three-way matching between supplier invoices, purchase orders, and goods receipts.

Impact: ≈ 220 hrs / month
Effort: M
TTV: 6 weeks

Owner: Maria Fernandes

Wave 1 Operations

Order acknowledgements

Auto-generate acknowledgement emails within five minutes.

Impact: ≈ 90 hrs / month
Effort: S
TTV: 4 weeks

Owner: James Okafor

Wave 1 People

HR ticket triage

Route and summarise employee requests before they reach a human inbox.

Impact: ≈ 38 min / ticket
Effort: S
TTV: 5 weeks

Owner: Sarah Chen

Wave 2 Sales

Contract renewal alerts

Surface accounts at risk 60 days before renewal with draft outreach.

Impact: ≈ 12 renewals / quarter
Effort: M
TTV: 8 weeks

Owner: Tom Bradley

Prop	Type	Notes
title	string	Optional. Slide heading above the grid.
description	string	Optional. Subtitle or wave note.
columns	1 \| 2	Optional. Override column count. Defaults to 1 for a single card, 2 for two to four.Values: 1, 2Example: `2`
children	ReactNode	Required. One to four <UseCaseCard> elements.
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<UseCaseGrid title="Wave 1 — four agreed flows" description="Workshop sign-off, May 2026">
  <UseCaseCard
    title="Supplier invoice intake"
    priority="now"
    area="Finance"
    owner="Maria Fernandes"
    impact="≈ 220 hrs / month"
    effort="M"
    timeToValue="6 weeks"
    description="Automate three-way matching between supplier invoices, purchase orders, and goods receipts."
  />
  <UseCaseCard
    title="Order acknowledgements"
    priority="now"
    area="Operations"
    owner="James Okafor"
    impact="≈ 90 hrs / month"
    effort="S"
    timeToValue="4 weeks"
    description="Auto-generate acknowledgement emails within five minutes."
  />
  <UseCaseCard
    title="HR ticket triage"
    priority="now"
    area="People"
    owner="Sarah Chen"
    impact="≈ 38 min / ticket"
    effort="S"
    timeToValue="5 weeks"
    description="Route and summarise employee requests before they reach a human inbox."
  />
  <UseCaseCard
    title="Contract renewal alerts"
    priority="next"
    area="Sales"
    owner="Tom Bradley"
    impact="≈ 12 renewals / quarter"
    effort="M"
    timeToValue="8 weeks"
    description="Surface accounts at risk 60 days before renewal with draft outreach."
  />
</UseCaseGrid>

<TeamMember>

coreContentListPresentation

One team member tile with avatar, name, role, department, and optional affiliation chip; compact when five or six cards share a grid.

When to use: Always inside `<TeamGrid>` on a slide. Up to six members per slide. Use `affiliation` to distinguish client, Lunnoa, and partner roles.

Often with: TeamGridPersonCardQuoteSlide

Preview

Delivery team

Maria Fernandes

Head of Finance

Client

Prop	Type	Notes
name	string	Required. Full name.Example: `Maria Fernandes`
role	string	Optional. Job title.Example: `Head of Finance`
department	string	Optional. Team or department.Example: `Finance`
avatarUrl	string	Optional. Optional headshot URL.
initials	string	Optional. Avatar fallback when no image.Example: `MF`
affiliation	"Client" \| "Lunnoa" \| "Partner"	Optional. Optional org chip.Values: Client, Lunnoa, PartnerExample: `Client`

Examples

<TeamGrid title="Delivery team">
  <TeamMember name="Maria Fernandes" role="Head of Finance" affiliation="Client" initials="MF" />
</TeamGrid>

<TeamGrid>

coreContentListPresentation

Grid wrapper for one to six `<TeamMember>` children on a single slide; auto 3×2 layout for large rosters, staggered entrance on slide enter (client).

When to use: Team introduction slide early in a deck, or a steering-group recap. One to three members: single row. Four: 2×2. Five to six: 3×2. Split across slides if you have more than six.

Often with: TeamMemberTitleSlideSectionSlide

Preview

Wave 1 delivery team

Client sponsors and Lunnoa leads

Maria Fernandes

Head of Finance

Finance

Client

James Okafor

Operations Manager

Operations

Client

Elena Vasquez

Engagement lead

Lunnoa

Tom Bradley

Commercial director

Client

Sarah Chen

People operations

Client

Alex Morgan

Solutions architect

Lunnoa

Prop	Type	Notes
title	string	Optional. Slide heading above the grid.
description	string	Optional. Subtitle or roster note.
columns	2 \| 3	Optional. Override auto column count.Values: 2, 3Example: `3`
children	ReactNode	Required. One to six <TeamMember> elements.
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<TeamGrid title="Wave 1 delivery team" description="Client sponsors and Lunnoa leads">
  <TeamMember name="Maria Fernandes" role="Head of Finance" department="Finance" affiliation="Client" initials="MF" />
  <TeamMember name="James Okafor" role="Operations Manager" department="Operations" affiliation="Client" initials="JO" />
  <TeamMember name="Elena Vasquez" role="Engagement lead" affiliation="Lunnoa" initials="EV" />
  <TeamMember name="Tom Bradley" role="Commercial director" affiliation="Client" initials="TB" />
  <TeamMember name="Sarah Chen" role="People operations" affiliation="Client" initials="SC" />
  <TeamMember name="Alex Morgan" role="Solutions architect" affiliation="Lunnoa" initials="AM" />
</TeamGrid>

<Testimonial>

testimonialTestimonialPresentation

One testimonial tile with quote, avatar, and attribution; centred hero layout when alone, compact card when three share a slide.

When to use: Always inside `<TestimonialGrid>`. Customer proof on a sales or outcomes slide. Use one for a hero quote; three for a balanced row.

Often with: TestimonialGridQuoteSlideFeaturedQuoteSlide

Preview

The first automation went live in two weeks.

Maria Fernandes

CFO · Acme Corp

Prop	Type	Notes
children	ReactNode	Required. Quote body.
name	string	Required. Speaker name.Example: `Maria Fernandes`
role	string	Optional. Job title.Example: `Head of Finance`
company	string	Optional. Organisation.Example: `Acme Corp`
avatarUrl	string	Optional. Optional headshot URL.
initials	string	Optional. Avatar fallback.Example: `MF`

Examples

<TestimonialGrid>
  <Testimonial name="Maria Fernandes" role="CFO" company="Acme Corp" initials="MF">
    The first automation went live in two weeks.
  </Testimonial>
</TestimonialGrid>

<TestimonialGrid>

testimonialTestimonialPresentation

Wrapper for one or three `<Testimonial>` children on a slide; hero layout for a single quote, three-column row otherwise; staggered entrance (client).

When to use: Outcomes or credibility slide after use cases or roadmap. Exactly one or three testimonials per slide.

Often with: TestimonialQuoteSlideTeamGrid

Preview

What teams say after Wave 1

“
The first automation went live in two weeks. Finance finally trusts the numbers.
”

Maria Fernandes

Head of Finance, Acme Corp

“
Order acknowledgements now go out in five minutes, not a day.
”

James Okafor

Operations Manager, Acme Corp

“
HR triage dropped from forty minutes to under ten on day one.
”

Sarah Chen

People Operations, Acme Corp

Prop	Type	Notes
title	string	Optional. Optional slide heading.
description	string	Optional. Optional subtitle.
children	ReactNode	Required. One or three <Testimonial> elements.
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<TestimonialGrid title="What teams say after Wave 1">
  <Testimonial name="Maria Fernandes" role="Head of Finance" company="Acme Corp" initials="MF">
    The first automation went live in two weeks. Finance finally trusts the numbers.
  </Testimonial>
  <Testimonial name="James Okafor" role="Operations Manager" company="Acme Corp" initials="JO">
    Order acknowledgements now go out in five minutes, not a day.
  </Testimonial>
  <Testimonial name="Sarah Chen" role="People Operations" company="Acme Corp" initials="SC">
    HR triage dropped from forty minutes to under ten on day one.
  </Testimonial>
</TestimonialGrid>

<TrendLineChart>

coreChartPresentation

Animated line or combo bar-and-line chart with gridlines, multiple series, optional dual Y-axes, and a legend; draws in on slide enter (client). Presentation decks only (`kind: "presentation"`).

When to use: Slide decks: trends over time with one or more series. Set `type="bar"` on a series for columns; `yAxis="right"` for a secondary scale (e.g. revenue bars + margin % line). For document reports use `<TrendChart>` instead. Use `<StatBarChart>` for non-time category comparisons.

Often with: StatBarChartCounterColumnChartSlideTrendChart

Preview

Weekly manual hours, trending down

0h50h100h150h200h

Wk 1Wk 2Wk 3Wk 4Wk 5Wk 6

Manual hours (h)Target (h)

Operating metrics

Revenue and margin

0m12.5m25m37.5m50m

0%10%20%30%40%

Q1Q2Q3Q4

Revenue (m)EBITDA margin (%) · right axis

Prop	Type	Notes
label	string	Optional. Optional eyebrow label above the title.
title	string	Optional. Optional slide heading above the chart.
description	string	Optional. Optional one-line subtitle under the title.
xLabels	string[]	Required. X-axis labels (e.g. months or weeks); every series' `values` must have the same length.
series	{ label: string; values: number[]; tone?: "brand" \| "neutral" \| "success" \| "warning" \| "error" \| "sky" \| "purple"; type?: "line" \| "bar"; yAxis?: "left" \| "right"; unit?: string }[]	Required. One or more series. Set `type="bar"` for columns; `yAxis="right"` for the secondary axis.
unit	string	Optional. Default unit suffix for the left axis and series without their own `unit`.
yAxes	{ left?: { unit?: string; maxValue?: number; minValue?: number }; right?: { unit?: string; maxValue?: number; minValue?: number } }	Optional. Per-axis unit and scale overrides for dual-axis charts.
gridLines	number	Optional. Default: `4`. Number of horizontal gridlines (left-axis scale).
tween	object	Optional. Optional GSAP vars for the line-draw and point entrance.

Examples

<TrendLineChart
  title="Weekly manual hours, trending down"
  unit="h"
  xLabels={["Wk 1", "Wk 2", "Wk 3", "Wk 4", "Wk 5", "Wk 6"]}
  series={[
    { label: "Manual hours", values: [142, 138, 121, 98, 76, 60], tone: "brand" },
    { label: "Target", values: [120, 115, 100, 80, 60, 45], tone: "neutral" }
  ]}
/>

<TrendLineChart
  label="Operating metrics"
  title="Revenue and margin"
  xLabels={["Q1", "Q2", "Q3", "Q4"]}
  yAxes={{ left: { unit: "m" }, right: { unit: "%", maxValue: 40 } }}
  series={[
    { label: "Revenue", type: "bar", values: [18, 22, 24, 26], tone: "brand", unit: "m" },
    { label: "EBITDA margin", type: "line", yAxis: "right", values: [22, 24, 25, 27], tone: "success", unit: "%" }
  ]}
/>

<DropCapLead>
coreContentPresentation
Lead paragraph with an oversized accent-coloured first letter, editorial-style.
When to use: Open a narrative-heavy slide (context, background) with a single anchoring paragraph.
Preview
Every customer order today is touched by sales, service, and operations before it ships.
Prop Type Notes
children string Required. The lead paragraph. Plain string only (no nested JSX) so the first character can be split out.
Examples
```
<DropCapLead>Every customer order today is touched by sales, service, and operations before it ships.</DropCapLead>
```

Prop	Type	Notes
children	string	Required. The lead paragraph. Plain string only (no nested JSX) so the first character can be split out.

<ProcessSteps>

coreTimelineContentPresentation

Numbered step sequences for methods, repeating flows, and milestone timelines. Three layouts: `cards` (horizontal grid with numerals or tone cards), `sequence` (left-to-right flow with arrows), `timeline` (spine with status pins and optional dates). Stagger in on slide enter (client).

When to use: One component for step-based slides. Use `layout="cards"` for a method or rollout walkthrough; `layout="sequence"` for a repeating operating rhythm; `layout="timeline"` with `date` and `status` on each step for programme milestones. Pass `tones` on cards layout for mixed-fill step cards instead of bare numerals.

Preview

How the pilot runs

Discover

Two discovery sessions, five interviews.

Design

Agree the target flow and owners.

Build

Ship the first automation in a sandbox.

Adopt

Handover with a runbook and metrics.

The weekly operating rhythm

Plan

Set the week's top three priorities.

Execute

Ship against the plan daily.

Review

Friday retro against the plan.

Adjust

Carry learnings into next week's plan.

Programme milestones

Mar 2026

Last IC

Jun 2026

Wave 1 live

Sep 2026

Wave 2 scoped

Dec 2026

Year-end review

Prop	Type	Notes
title	string	Optional. Heading above the steps.
steps	{ title: string; description?: string; date?: string; status?: "done" \| "now" \| "next" }[]	Required. Steps in display order. Cards/sequence: 2-6 steps with title and optional description. Timeline: add date and status per step.
layout	"cards" \| "sequence" \| "timeline"	Optional. Default: `cards`. Visual treatment: card grid (default), arrow sequence, or milestone timeline.Values: cards, sequence, timeline
numbering	"roman" \| "arabic" \| "circle"	Optional. Default: `arabic`. Ordinal style for cards and sequence layouts.Values: roman, arabic, circle
tones	("accent" \| "muted" \| "outline" \| "soft")[]	Optional. Cards layout only. One fill tone per step (cycles if shorter than steps). Omit for minimal numerals.
orientation	"horizontal" \| "vertical"	Optional. Default: `horizontal`. Timeline layout only: compact row or vertical spine for longer labels.Values: horizontal, vertical
tween	object	Optional. Optional GSAP vars for the entrance animation.

Examples

<ProcessSteps
  title="How the pilot runs"
  layout="cards"
  numbering="circle"
  steps={[
    { title: "Discover", description: "Two discovery sessions, five interviews." },
    { title: "Design", description: "Agree the target flow and owners." },
    { title: "Build", description: "Ship the first automation in a sandbox." },
    { title: "Adopt", description: "Handover with a runbook and metrics." },
  ]}
/>

<ProcessSteps
  title="The weekly operating rhythm"
  layout="sequence"
  numbering="circle"
  steps={[
    { title: "Plan", description: "Set the week's top three priorities." },
    { title: "Execute", description: "Ship against the plan daily." },
    { title: "Review", description: "Friday retro against the plan." },
    { title: "Adjust", description: "Carry learnings into next week's plan." },
  ]}
/>

<ProcessSteps
  title="Programme milestones"
  layout="timeline"
  steps={[
    { title: "Last IC", date: "Mar 2026", status: "done" },
    { title: "Wave 1 live", date: "Jun 2026", status: "now" },
    { title: "Wave 2 scoped", date: "Sep 2026", status: "next" },
    { title: "Year-end review", date: "Dec 2026", status: "next" },
  ]}
/>

<TopicGrid>

coreContentPresentation

Grid of 3-8 rule-topped topic tiles (no boxes); tiles stagger in on slide enter (client).

When to use: Overview of themes, workstreams, or focus areas at the start of a section.

Preview

What we looked at

Order intake

Five inboxes, no queue of record.

Supplier invoices

Manual three-way match.

HR triage

38 minutes per request.

Prop	Type	Notes
title	string	Optional. Heading above the grid.
topics	{ label: string; description?: string }[]	Required. 3-8 tiles in display order.
columns	2 \| 3 \| 4	Optional. Default: `3`. Grid column count.Values: 2, 3, 4
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<TopicGrid
  title="What we looked at"
  columns={3}
  topics={[
    { label: "Order intake", description: "Five inboxes, no queue of record." },
    { label: "Supplier invoices", description: "Manual three-way match." },
    { label: "HR triage", description: "38 minutes per request." },
  ]}
/>

<StatusMatrix>

coreContentDataPresentation

Readiness/RACI-style matrix: row labels down the side, status dots across named columns.

When to use: Show readiness or ownership across several workstreams and stages at once.

Preview

Rollout readiness

DiscoveryDesignBuildLaunchFinanceOperationsHR

Prop	Type	Notes
title	string	Optional. Heading above the matrix.
columns	string[]	Required. Column headers (e.g. stages or phases).
rows	{ label: string; states: ("done" \| "inprogress" \| "planned" \| "blocked" \| null)[] }[]	Required. One row per item; states array must match columns length (use null for not applicable).

Examples

<StatusMatrix
  title="Rollout readiness"
  columns={["Discovery", "Design", "Build", "Launch"]}
  rows={[
    { label: "Finance", states: ["done", "done", "inprogress", "planned"] },
    { label: "Operations", states: ["done", "inprogress", "planned", "planned"] },
    { label: "HR", states: ["done", "planned", null, null] },
  ]}
/>

<SpecList>

coreContentListPresentation

Rule-topped label/value definition list, for specs, meta, or a compact fact sheet.

When to use: A short list of facts (scope, dates, owners, constraints) that does not need a full table.

Preview

Engagement

Client: Acme Corp
Sponsor: COO
Duration: 6 weeks
Scope: Finance + Ops

Prop	Type	Notes
title	string	Optional. Heading above the list.
items	{ label: string; value: string }[]	Required. Label/value pairs in display order.
columns	1 \| 2	Optional. Default: `1`. Lay items out in one or two columns.Values: 1, 2

Examples

<SpecList
  title="Engagement"
  columns={2}
  items={[
    { label: "Client", value: "Acme Corp" },
    { label: "Sponsor", value: "COO" },
    { label: "Duration", value: "6 weeks" },
    { label: "Scope", value: "Finance + Ops" },
  ]}
/>

<BarRow>

coreChartPresentation

Horizontal percentage bars that fill in on slide enter (client).

When to use: A ranked list, share breakdown, or adoption/completion comparison across a handful of items.

Preview

Automation coverage by team

Finance72%

Operations54%

HR31%

Prop	Type	Notes
title	string	Optional. Heading above the bars.
items	{ label: string; value: number; display?: string }[]	Required. value is 0-100 for the fill width; display overrides the default "value%" text.
tween	object	Optional. Optional GSAP vars for the fill animation (duration, ease, stagger, delay).

Examples

<BarRow
  title="Automation coverage by team"
  items={[
    { label: "Finance", value: 72 },
    { label: "Operations", value: 54 },
    { label: "HR", value: 31 },
  ]}
/>

<IndexList>

coreAgendaListPresentation

Numbered index of 4-8 entries in a hairline-divided two-column grid; rows stagger in on slide enter (client).

When to use: An editorial "contents" or "trends at a glance" page — several short titled entries read together, not a left-to-right sequence (use ProcessSteps for that).

Often with: ProcessStepsTopicGridAgendaSlide

Preview

The index, in six entries

Spring 2026 · selected trends

01.

Slow software

Tools that opt out of the urgency contest by default.

02.

Domestic interfaces

Screens designed to live in living rooms.

03.

Hand-set print again

A return to letterpress and small-edition print.

04.

Receipts and ledgers

Information designed to be filed, not consumed.

Prop	Type	Notes
title	string	Optional. Heading above the list.
eyebrow	string	Optional. Small label opposite the title (e.g. "Spring 2026 · selected trends").
entries	{ title: string; description?: string }[]	Required. 4-8 entries in display order.
columns	1 \| 2	Optional. Default: `2`. Grid column count.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<IndexList
  title="The index, in six entries"
  eyebrow="Spring 2026 · selected trends"
  entries={[
    { title: "Slow software", description: "Tools that opt out of the urgency contest by default." },
    { title: "Domestic interfaces", description: "Screens designed to live in living rooms." },
    { title: "Hand-set print again", description: "A return to letterpress and small-edition print." },
    { title: "Receipts and ledgers", description: "Information designed to be filed, not consumed." },
  ]}
/>

<Ledger>

coreDataListPresentation

Dense numbered ledger/trend table with a name, description, status tag, and a directional delta per row; rows stagger in on slide enter (client).

When to use: A printed-ledger reading of several tracked items with a change indicator (trend report, KPI review, watchlist) — denser than DataTable's dashboard styling and presentation-native.

Often with: StatusMatrixRiskRowListTopMovers

Preview

Trend ledger, in long

All eight · with our reading on each

No.ItemReadingStatusChange

01.Slow softwareTools that opt out of urgency by default.Quiet · welcomed↑ 14 pts

02.Domestic interfacesScreens designed to live in living rooms.Warm · ambient↑ 9 pts

03.Quietly weird typeDisplay faces with one slightly off detail.Curious · alert— flat

Prop	Type	Notes
title	string	Optional. Heading above the table.
eyebrow	string	Optional. Small label opposite the title.
columnLabels	[string, string, string, string, string]	Optional. Default: `["No.", "Item", "Reading", "Status", "Change"]`. Header labels, in column order.
rows	{ name: string; description?: string; tag?: string; delta?: string; deltaDirection?: "up" \| "down" \| "flat" }[]	Required. Ledger rows in display order. deltaDirection colours the delta and picks the arrow glyph.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<Ledger
  title="Trend ledger, in long"
  eyebrow="All eight · with our reading on each"
  rows={[
    { name: "Slow software", description: "Tools that opt out of urgency by default.", tag: "Quiet · welcomed", delta: "14 pts", deltaDirection: "up" },
    { name: "Domestic interfaces", description: "Screens designed to live in living rooms.", tag: "Warm · ambient", delta: "9 pts", deltaDirection: "up" },
    { name: "Quietly weird type", description: "Display faces with one slightly off detail.", tag: "Curious · alert", delta: "flat", deltaDirection: "flat" },
  ]}
/>

<AgendaGrid>

coreAgendaContentPresentation

Asymmetric agenda grid: one optional featured tile spanning two rows beside several mixed-fill topic tiles; tiles stagger in on slide enter (client).

When to use: A magazine-contents-style agenda or topic overview where one lead topic deserves visual weight — richer than the plain numbered AgendaSlide list.

Often with: AgendaSlideTopicGridDeliverableGrid

Preview

Agenda

Five topics · ninety minutes

Where we stand today.

Context on the current process.

Context

The big shift.

Insight

By the numbers.

Data

How we'll get there.

Plan

What it adds up to.

Outcomes

Prop	Type	Notes
title	string	Optional. Heading above the grid.
eyebrow	string	Optional. Small label opposite the title.
items	{ title: string; description?: string; tag?: string; tone?: "accent" \| "accentMuted" \| "outline" \| "soft"; featured?: boolean }[]	Required. Tiles in display order. Mark at most one item featured (spans two rows, larger type). tone defaults to a cycling accent/soft/outline/accentMuted pattern.
columns	2 \| 3	Optional. Default: `3`. Grid column count.
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<AgendaGrid
  title="Agenda"
  eyebrow="Five topics · ninety minutes"
  items={[
    { title: "Where we stand today.", description: "Context on the current process.", tag: "Context", tone: "accent", featured: true },
    { title: "The big shift.", tag: "Insight", tone: "accentMuted" },
    { title: "By the numbers.", tag: "Data", tone: "soft" },
    { title: "How we'll get there.", tag: "Plan", tone: "outline" },
    { title: "What it adds up to.", tag: "Outcomes", tone: "soft" },
  ]}
/>

<Pyramid>

coreContentPresentation

Tapering stack of 3-6 levels, apex first — a maturity, hierarchy, or "foundation up" diagram; bars grow in on slide enter (client).

When to use: A hierarchy or maturity model that reads bottom-up (foundational capabilities at the base, the outcome at the apex) — an alternative to MaturityRadar/MaturityHeatmap for a single-track model.

Often with: MaturityRadarMaturityHeatmapProcessSteps

Preview

What good looks like

Outcomes

Measurable business impact.

Adoption

Teams using the workflow daily.

Process

A documented, owned process.

Data foundation

Clean, accessible source data.

Prop	Type	Notes
title	string	Optional. Heading above the pyramid.
levels	{ label: string; description?: string }[]	Required. 3-6 levels ordered apex (narrowest, index 0) to base (widest, last).
tween	object	Optional. Optional GSAP vars for the bar entrance.

Examples

<Pyramid
  title="What good looks like"
  levels={[
    { label: "Outcomes", description: "Measurable business impact." },
    { label: "Adoption", description: "Teams using the workflow daily." },
    { label: "Process", description: "A documented, owned process." },
    { label: "Data foundation", description: "Clean, accessible source data." },
  ]}
/>

<AgendaSlide>

coreAgendaTimelinePresentation

Numbered agenda list with optional timeboxes; rows stagger in on slide enter (client).

When to use: Use as slide 2 of most decks. Pass three to seven items so the slide stays scannable.

Preview

Today's agenda

01Programme health10 min
02Wave 1 outcomes15 min
03Wave 2 scope20 min
04Decisions and asks10 min

Prop	Type	Notes
title	string	Optional. Default: `Agenda`. Slide heading.
items	{ label: string; timebox?: string }[]	Required. Agenda entries in display order; numbering is added automatically.
tween	object	Optional. Optional GSAP vars (duration, ease, stagger, delay, y, opacity, autoAlpha).

Examples

<AgendaSlide
  title="Today's agenda"
  items={[
    { label: "Programme health", timebox: "10 min" },
    { label: "Wave 1 outcomes", timebox: "15 min" },
    { label: "Wave 2 scope", timebox: "20 min" },
    { label: "Decisions and asks", timebox: "10 min" }
  ]}
/>

<MetricStrip>

coreStatsPresentation

Compact 3 to 6 KPI tiles in one strip with optional delta chips and RAG dots; tiles stagger in on slide enter (client).

When to use: Use for headline metrics on IC, project, or portfolio slides where each metric needs a one-line label and an optional trend or RAG indicator.

Preview

£412m

AUM

+5.2%

1.8x

MOIC

+0.1x

Holdings

On watch

Prop	Type	Notes
items	{ value: string; label: string; deltaValue?: string; deltaTone?: "up" \| "down" \| "flat"; ragStatus?: "red" \| "amber" \| "green" }[]	Required. Three to six tiles. Pre-format the value string yourself (currency, units).
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<MetricStrip
  items={[
    { value: "£412m", label: "AUM", deltaValue: "+5.2%", deltaTone: "up" },
    { value: "1.8x", label: "MOIC", deltaValue: "+0.1x", deltaTone: "up" },
    { value: "12", label: "Holdings", ragStatus: "green" },
    { value: "3", label: "On watch", ragStatus: "amber" }
  ]}
/>

<ComparisonTiles>

coreComparePresentation

Two to four side-by-side comparison tiles (plan vs actual, Q vs Q, base vs stress); tiles stagger in on slide enter (client).

When to use: Use when each metric needs a paired primary and secondary value with an optional delta. Keep copy short; this is a slide, not a table.

Preview

Q3 vs plan

Revenue

Plan

£24m

Actual

£26.4m

+10%

EBITDA

Plan

£4.8m

Actual

£4.2m

-12%

Prop	Type	Notes
title	string	Optional. Optional slide heading above the tiles.
items	{ label: string; primaryValue: string; primaryLabel?: string; secondaryValue: string; secondaryLabel?: string; deltaValue?: string; deltaTone?: "up" \| "down" \| "flat" }[]	Required. Two to four comparison tiles. Each tile shows a primary and secondary value plus an optional delta chip.
tween	object	Optional. Optional GSAP vars for the tile entrance.

Examples

<ComparisonTiles
  title="Q3 vs plan"
  items={[
    { label: "Revenue", primaryLabel: "Plan", primaryValue: "£24m", secondaryLabel: "Actual", secondaryValue: "£26.4m", deltaValue: "+10%", deltaTone: "up" },
    { label: "EBITDA", primaryLabel: "Plan", primaryValue: "£4.8m", secondaryLabel: "Actual", secondaryValue: "£4.2m", deltaValue: "-12%", deltaTone: "down" }
  ]}
/>

<RiskRowList>

financeListDataPresentation

Risk watchlist with severity chip, one-line note, and owner; rows stagger in on slide enter (client).

When to use: Use for an IC red and amber slide or a portfolio watchlist intro. Four to eight risks is the sweet spot.

Preview

Risks

High
FX exposure on euro revenue
Hedge ratio under target by 18 points.
Treasury
Medium
Key-person dependency in finance
Successor named, knowledge transfer in flight.
CFO

Prop	Type	Notes
title	string	Optional. Default: `Risks`. Slide heading.
risks	{ title: string; severity: "low" \| "medium" \| "high"; note: string; owner?: string }[]	Required. Risk rows. Severity drives the chip colour.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<RiskRowList
  risks={[
    { title: "FX exposure on euro revenue", severity: "high", note: "Hedge ratio under target by 18 points.", owner: "Treasury" },
    { title: "Key-person dependency in finance", severity: "medium", note: "Successor named, knowledge transfer in flight.", owner: "CFO" }
  ]}
/>

<DecisionCallout>

financeStatementCTAPresentation

Single ask with question, recommendation, and optional vote options; the card scales in on slide enter (client).

When to use: Use for the closing IC slide before the appendix when a single decision needs to land.

Preview

Decision required

Approve the additional £8m equity injection at par to fund Wave 2 build-out?

Recommendation

Approve, conditional on signed MSAs with the top three Wave 1 customers by 30 June.

Approve
Approve with conditions
Defer

Prop	Type	Notes
question	string	Required. The decision being asked of the committee.
recommendation	string	Required. Recommended answer in one sentence.
decisionLabel	string	Optional. Default: `Decision required`. Pill text above the question.
options	string[]	Optional. Optional pill list of formal vote options (e.g. Approve, Defer).
tween	object	Optional. Optional GSAP vars for the card entrance.

Examples

<DecisionCallout
  question="Approve the additional £8m equity injection at par to fund Wave 2 build-out?"
  recommendation="Approve, conditional on signed MSAs with the top three Wave 1 customers by 30 June."
  options={["Approve", "Approve with conditions", "Defer"]}
/>

<ConfidentialStrip>

financeChromePresentation

Discreet "Private and confidential" strip with optional meta line; fades in on slide enter (client).

When to use: Use as a footer or banner on every slide of a regulated or LP-facing deck. Keep the meta line short (fund name, meeting date).

Preview

Private and confidentialAcme Fund III · 14 May 2026

Prop	Type	Notes
text	string	Optional. Default: `Private and confidential`. Confidentiality wording.
meta	string	Optional. Optional secondary line (fund name, meeting date).
variant	"footer" \| "banner"	Optional. Default: `footer`. footer = top-bordered footnote line; banner = bordered card.Values: footer, banner
tween	object	Optional. Optional GSAP vars for the fade-in.

Examples

<ConfidentialStrip text="Private and confidential" meta="Acme Fund III · 14 May 2026" />

<LogoLockup>

financeChromeTitlePresentation

Sponsor + company logo lockup with separator; halves slide in from the sides on slide enter (client).

When to use: Use on IC deal title slides to anchor the sponsor and target. Pass remote URLs (https) for both logos.

Preview

Prop	Type	Notes
sponsorSrc	string	Required. Sponsor logo URL.
sponsorAlt	string	Required. Alt text for the sponsor logo.
companySrc	string	Required. Company logo URL.
companyAlt	string	Required. Alt text for the company logo.
separator	string	Optional. Default: `"x"`. Glyph between the two logos (often "x").
height	number	Optional. Default: `64`. Maximum logo height in pixels (24–160).
tween	object	Optional. Optional GSAP vars for the entrance.

Examples

<LogoLockup sponsorSrc="https://example.com/sponsor.png" sponsorAlt="Sponsor" companySrc="https://example.com/target.png" companyAlt="Target" />

<DealSnapshot>

financeDataStatsPresentation

Structured deal-at-a-glance block (company, sector, geography, entry, hold, instrument, ticket); fields stagger in on slide enter (client).

When to use: Use as the IC slide 1 fact block. Pair with TitleSlide above and ThesisBullets below.

Preview

Deal snapshot

CompanyLumen Health

SectorHealthcare services

GeographyUK and Ireland

EntryAug 2024

Hold period4-6 years

InstrumentCommon equity

Ticket£42m

Prop	Type	Notes
company	string	Required. Company name.
sector	string	Required. Sector or sub-sector.
geography	string	Required. Primary geography or HQ country.
entryDate	string	Required. Entry date (e.g. "Aug 2024").
holdingPeriod	string	Optional. Holding period (e.g. "4-6 years").
instrument	string	Optional. Instrument type (e.g. "Common equity", "PIK note").
ticket	string	Optional. Ticket size (e.g. "£42m").
extras	{ label: string; value: string }[]	Optional. Optional extra labelled fields (LP names, co-investors, etc.).
tween	object	Optional. Optional GSAP vars for the field entrance.

Examples

<DealSnapshot
  company="Lumen Health"
  sector="Healthcare services"
  geography="UK and Ireland"
  entryDate="Aug 2024"
  holdingPeriod="4-6 years"
  instrument="Common equity"
  ticket="£42m"
/>

<ThesisBullets>

financeListStatementPresentation

Investment thesis bullets with numbered chips; bullets stagger in from the left on slide enter (client).

When to use: Use for three to five thesis points on IC slide 2. Keep each bullet to one tight sentence.

Preview

Investment thesis

1
Top three operator in a structurally undersupplied UK community-care market.
2
Margin expansion runway from a measured pricing-policy reset under new CFO.
3
Three identified bolt-on targets at sub-6x EBITDA priced before year-end.

Prop	Type	Notes
title	string	Optional. Default: `Investment thesis`. Slide heading.
bullets	string[]	Required. Three to five thesis bullet strings.
tween	object	Optional. Optional GSAP vars for the bullet entrance.

Examples

<ThesisBullets
  bullets={[
    "Top three operator in a structurally undersupplied UK community-care market.",
    "Margin expansion runway from a measured pricing-policy reset under new CFO.",
    "Three identified bolt-on targets at sub-6x EBITDA priced before year-end."
  ]}
/>

<CapitalStructureBar>

financeChartDataPresentation

Stacked horizontal bar of capital structure tiers (senior, mezz, equity) with proportional widths; segments scale in on slide enter (client).

When to use: Use to show the financing stack on IC or refinancing slides. Two to five tiers; numeric values share one currency and scale.

Preview

Pro-forma capital structure

Senior debt£80m (48%)
Mezzanine£25m (15%)
Equity£60m (36%)

Pro-forma at close; excludes upsize option.

Pro-forma capital structure

Senior debt$120m (59%)
Equity$85m (41%)

Prop	Type	Notes
title	string	Optional. Default: `Capital structure`. Slide heading.
tiers	{ label: string; value: number; tone?: "brand" \| "neutral" \| "success" \| "warning" \| "error" }[]	Required. Tiers in stack order (typically senior at the left). Values share currency and scale; only ratios matter for bar widths.
currency	"GBP" \| "USD" \| "EUR" \| "CHF" \| "JPY" \| "none"	Optional. Default: `GBP`. Currency code for tier value labels.Values: GBP, USD, EUR, CHF, JPY, none
scale	"m" \| "bn" \| "k" \| "none"	Optional. Default: `m`. Magnitude suffix appended to tier values (e.g. m for millions).Values: m, bn, k, none
footnote	string	Optional. Optional small footnote (as-of date, source, caveats).
tween	object	Optional. Optional GSAP vars for the segment entrance.

Examples

<CapitalStructureBar
  title="Pro-forma capital structure"
  currency="GBP"
  scale="m"
  tiers={[
    { label: "Senior debt", value: 80, tone: "brand" },
    { label: "Mezzanine", value: 25, tone: "neutral" },
    { label: "Equity", value: 60, tone: "success" }
  ]}
  footnote="Pro-forma at close; excludes upsize option."
/>

<CapitalStructureBar
  title="Pro-forma capital structure"
  currency="USD"
  scale="m"
  tiers={[
    { label: "Senior debt", value: 120, tone: "brand" },
    { label: "Equity", value: 85, tone: "success" }
  ]}
/>

<CovenantHeadroom>

financeDataChartPresentation

Covenant compliance grid with limit, headroom, and status chip per row; rows stagger in on slide enter (client).

When to use: Use on quarterly portfolio company review slides. Keep to two to four covenants.

Preview

Covenant headroom

CovenantLimitHeadroomStatus

Net leverage≤ 5.5x0.8xOK

Interest cover≥ 2.5x0.3xWatch

Capex cap£12m£1.4mWatch

Prop	Type	Notes
title	string	Optional. Default: `Covenant headroom`. Slide heading.
rows	{ covenant: string; limit: string; headroom: string; status: "ok" \| "watch" \| "breach" }[]	Required. Covenant rows; status drives the chip colour.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<CovenantHeadroom
  rows={[
    { covenant: "Net leverage", limit: "≤ 5.5x", headroom: "0.8x", status: "ok" },
    { covenant: "Interest cover", limit: "≥ 2.5x", headroom: "0.3x", status: "watch" },
    { covenant: "Capex cap", limit: "£12m", headroom: "£1.4m", status: "watch" }
  ]}
/>

<ValueBridge>

financeChartPresentation

Waterfall-lite EBITDA / EV bridge: start anchor, signed step columns (positive green, negative red), end anchor, with horizontal gridlines and a Y-axis; columns scale up on slide enter (client).

When to use: Use to walk the committee through value creation drivers. Four to six steps reads cleanly; more becomes noise on a slide. All values share one currency and scale.

Preview

EBITDA bridge

£18m

+£4m

+£3m

+£2m

-£1m

£26m

Entry FY24PricingVolumeCost actionsFXRun-rate FY26

EBITDA bridge

$18m

+$4m

+$3m

$26m

Entry FY24PricingVolumeRun-rate FY26

Prop	Type	Notes
title	string	Optional. Default: `Value bridge`. Slide heading.
start	{ label: string; value: number }	Required. Left anchor (e.g. entry EBITDA).
steps	{ label: string; delta: number }[]	Required. Sequence of signed deltas. Each step is one column.
end	{ label: string; value: number }	Required. Right anchor (e.g. current or projected EBITDA).
currency	"GBP" \| "USD" \| "EUR" \| "CHF" \| "JPY" \| "none"	Optional. Default: `GBP`. Currency code for value labels.Values: GBP, USD, EUR, CHF, JPY, none
scale	"m" \| "bn" \| "k" \| "none"	Optional. Default: `m`. Magnitude suffix appended to values (e.g. m for millions).Values: m, bn, k, none
gridLines	number	Optional. Default: `4`. Number of horizontal gridlines on the plot (including top and bottom).
tween	object	Optional. Optional GSAP vars for the column entrance.

Examples

<ValueBridge
  title="EBITDA bridge"
  currency="GBP"
  scale="m"
  start={{ label: "Entry FY24", value: 18 }}
  steps={[
    { label: "Pricing", delta: 4 },
    { label: "Volume", delta: 3 },
    { label: "Cost actions", delta: 2 },
    { label: "FX", delta: -1 }
  ]}
  end={{ label: "Run-rate FY26", value: 26 }}
/>

<ValueBridge
  title="EBITDA bridge"
  currency="USD"
  scale="m"
  start={{ label: "Entry FY24", value: 18 }}
  steps={[{ label: "Pricing", delta: 4 }, { label: "Volume", delta: 3 }]}
  end={{ label: "Run-rate FY26", value: 26 }}
/>

<ICActionsSince>

financeListDataPresentation

Status of conditions or actions agreed at the previous IC; rows show status chip plus optional owner and stagger in on slide enter (client).

When to use: Use as IC slide 2 or 3 to show what has happened since the last meeting. Three to eight items.

Preview

Actions since last IC

DoneSign top three customer MSAs.CCO
In progressResolve pension surplus question.CFO
OpenHire VP Engineering.CEO
BlockedClose the Frankfurt acquisition.Corp dev

Prop	Type	Notes
title	string	Optional. Default: `Actions since last IC`. Slide heading.
items	{ text: string; status: "done" \| "in-progress" \| "open" \| "blocked"; owner?: string }[]	Required. Action rows; status drives chip colour.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<ICActionsSince
  items={[
    { text: "Sign top three customer MSAs.", status: "done", owner: "CCO" },
    { text: "Resolve pension surplus question.", status: "in-progress", owner: "CFO" },
    { text: "Hire VP Engineering.", status: "open", owner: "CEO" },
    { text: "Close the Frankfurt acquisition.", status: "blocked", owner: "Corp dev" }
  ]}
/>

<VoteSlide>

financeDataCTAPresentation

Formal IC resolution slide with numbered resolutions and optional abstentions note; resolutions stagger in on slide enter (client).

When to use: Use as the formal closing slide before the appendix when a vote is recorded.

Preview

For consideration and vote

Resolutions

1
Approve the additional £8m equity injection at par.
2
Authorise the CFO to execute the amended SHA on these terms.

Member B recused per conflicts policy.

Prop	Type	Notes
title	string	Optional. Default: `Resolutions`. Slide heading.
voteLabel	string	Optional. Default: `For consideration and vote`. Small label above the title (matches IC conventions).
resolutions	{ id: string; text: string }[]	Required. Resolution rows. id is the short label (e.g. "1", "1A").
abstentionsNote	string	Optional. Optional small note about abstentions or recusals.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<VoteSlide
  resolutions={[
    { id: "1", text: "Approve the additional £8m equity injection at par." },
    { id: "2", text: "Authorise the CFO to execute the amended SHA on these terms." }
  ]}
  abstentionsNote="Member B recused per conflicts policy."
/>

<ExposureDonutRow>

financeChartDataPresentation

Side-by-side donut small multiples (sector, geography, vintage); donut arcs draw and rows stagger in on slide enter (client).

When to use: Use for a portfolio exposure slide where two to four breakdowns sit side by side. Keep each donut to three to five segments.

Preview

Portfolio exposure

Sector

Healthcare38%
Software27%
Industrials20%
Consumer15%

Geography

UK45%
EU32%
North America23%

Vintage

202218%
202330%
202435%
202517%

Prop	Type	Notes
title	string	Optional. Optional slide heading.
groups	{ label: string; segments: { name: string; value: number }[] }[]	Required. Two to four donut groups. value is a numeric weight; percentages are derived.
tween	object	Optional. Optional GSAP vars for the donut and row entrance.

Examples

<ExposureDonutRow
  title="Portfolio exposure"
  groups={[
    { label: "Sector", segments: [
      { name: "Healthcare", value: 38 },
      { name: "Software", value: 27 },
      { name: "Industrials", value: 20 },
      { name: "Consumer", value: 15 }
    ] },
    { label: "Geography", segments: [
      { name: "UK", value: 45 },
      { name: "EU", value: 32 },
      { name: "North America", value: 23 }
    ] },
    { label: "Vintage", segments: [
      { name: "2022", value: 18 },
      { name: "2023", value: 30 },
      { name: "2024", value: 35 },
      { name: "2025", value: 17 }
    ] }
  ]}
/>

<TopMovers>

financeDataListPresentation

Two-column top contributors and detractors to NAV or MOIC; rows stagger in on slide enter (client).

When to use: Use for a portfolio performance review slide. Three to five rows per side.

Preview

Top movers

Contributors

Lumen Health
EBITDA beat from pricing reset
+£14m
Atlas Software
ARR up 28% on enterprise wins
+£9m

Detractors

Northwind Logistics
Volume down on customer churn
-£6m
Pico Materials
Energy cost pass-through lag
-£3m

Prop	Type	Notes
title	string	Optional. Default: `Top movers`. Slide heading.
contributorsTitle	string	Optional. Default: `Contributors`. Left column heading.
detractorsTitle	string	Optional. Default: `Detractors`. Right column heading.
contributors	{ name: string; driver: string; value: string }[]	Required. Top contributors. Pre-format value (e.g. "+£12m", "+90 bps").
detractors	{ name: string; driver: string; value: string }[]	Required. Top detractors. Pre-format value with sign.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<TopMovers
  contributors={[
    { name: "Lumen Health", driver: "EBITDA beat from pricing reset", value: "+£14m" },
    { name: "Atlas Software", driver: "ARR up 28% on enterprise wins", value: "+£9m" }
  ]}
  detractors={[
    { name: "Northwind Logistics", driver: "Volume down on customer churn", value: "-£6m" },
    { name: "Pico Materials", driver: "Energy cost pass-through lag", value: "-£3m" }
  ]}
/>

<NAVSummaryCard>

financeStatsDataPresentation

Headline NAV card with optional change pill and supporting MTD / QTD / benchmark sub-metrics; tiles stagger in on slide enter (client).

When to use: Use as the opening NAV slide for a portfolio review. Keep sub-metrics to three or four.

Preview

NAV summary

As of 30 Apr 2026

NAV

£412.6m

+1.8% MTD

MTD+1.8%

QTD+4.2%

vs benchmark+90 bps

Cash drag-12 bps

Prop	Type	Notes
title	string	Optional. Default: `NAV summary`. Slide heading.
asOf	string	Optional. Optional as-of date label (top right).
navLabel	string	Optional. Default: `NAV`. Label above the headline value.
navValue	string	Required. Pre-formatted headline NAV (currency).
navDelta	string	Optional. Optional headline change pill (e.g. "+1.8% MTD").
subMetrics	{ label: string; value: string; tone?: "up" \| "down" \| "flat" }[]	Optional. Up to four supporting metrics (MTD, QTD, vs benchmark, etc.). tone colours the value.
tween	object	Optional. Optional GSAP vars for the entrance.

Examples

<NAVSummaryCard
  asOf="30 Apr 2026"
  navValue="£412.6m"
  navDelta="+1.8% MTD"
  subMetrics={[
    { label: "MTD", value: "+1.8%", tone: "up" },
    { label: "QTD", value: "+4.2%", tone: "up" },
    { label: "vs benchmark", value: "+90 bps", tone: "up" },
    { label: "Cash drag", value: "-12 bps", tone: "down" }
  ]}
/>

<WatchlistPanel>

financeListDataPresentation

Portfolio company watchlist with company, issue, trend chip, and actions; rows stagger in on slide enter (client).

When to use: Use for a portfolio review slide that calls out the names needing attention. Three to six items keeps the slide readable.

Preview

Watchlist

Northwind LogisticsCustomer churn in EU southDeterioratingPricing review by 30 Jun.
Pico MaterialsMargin pressure from energyStableHedge programme expanded.
Atlas SoftwareSalesforce ramp slower than planImprovingNew CRO joins in Q3.

Prop	Type	Notes
title	string	Optional. Default: `Watchlist`. Slide heading.
items	{ company: string; issue: string; trend: "improving" \| "stable" \| "deteriorating"; actions: string }[]	Required. Watchlist rows; trend drives chip colour and arrow.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<WatchlistPanel
  items={[
    { company: "Northwind Logistics", issue: "Customer churn in EU south", trend: "deteriorating", actions: "Pricing review by 30 Jun." },
    { company: "Pico Materials", issue: "Margin pressure from energy", trend: "stable", actions: "Hedge programme expanded." },
    { company: "Atlas Software", issue: "Salesforce ramp slower than plan", trend: "improving", actions: "New CRO joins in Q3." }
  ]}
/>

<LiquiditySchedule>

financeTimelineDataPresentation

Upcoming capital calls and distributions with date, type chip, optional note, and amount; rows stagger in on slide enter (client).

When to use: Use to give LPs visibility on the next 4-8 expected cash movements. Pre-format amounts with the fund's sign convention.

Preview

Liquidity schedule

12 Jun 2026CallWave 2 build-out.£18m
30 Jun 2026DistributionLumen Health partial exit.£24m
30 Sep 2026CallBolt-on completion.£8m

Prop	Type	Notes
title	string	Optional. Default: `Liquidity schedule`. Slide heading.
items	{ date: string; type: "call" \| "distribution"; amount: string; note?: string }[]	Required. Liquidity events in chronological order.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<LiquiditySchedule
  items={[
    { date: "12 Jun 2026", type: "call", amount: "£18m", note: "Wave 2 build-out." },
    { date: "30 Jun 2026", type: "distribution", amount: "£24m", note: "Lumen Health partial exit." },
    { date: "30 Sep 2026", type: "call", amount: "£8m", note: "Bolt-on completion." }
  ]}
/>

<DecoratedSlide>
expressiveChromePresentation
Layout wrapper for expressive slide content. Does not set the deck canvas colour.
When to use: Wrap hero, chart, or closing layouts when you need a centred full-height content slot. Set the deck canvas via presentationTheme.background (light|white|dark|brand|vivid) on create_report / update_report, or inherit /theming defaultDeckBackground.
Preview
FY26 planning
Quarterly business review
Three priorities for the next quarter.
45 minBoard ready
Prop Type Notes
children ReactNode Required. Slide content.
Examples
```
<Slide>
 <DecoratedSlide>
 <HeroCoverSlide label="FY26 planning" title="Quarterly business review" subtitle="Three priorities for the next quarter." badges={["45 min", "Board ready"]} />
 </DecoratedSlide>
</Slide>
```
<AccentEyebrow>
sharedChromePresentation
Small uppercase eyebrow pill for section labels above slide headlines.
When to use: Tag the topic of a slide (e.g. "Executive summary", "Pricing", "Roadmap"). Use inside chart, grid, and narrative slide layouts that accept a label prop.
Preview
Core Systems
Prop Type Notes
children string Required. Pill text (rendered uppercase).
accent "yellow" | "cyan" | "pink" Optional. Default: yellow. Neon text colour on the navy pill.Values: yellow, cyan, pink
Examples
```
<AccentEyebrow accent="cyan">Core Systems</AccentEyebrow>
```

<HeroCoverSlide>

expressiveTitlePresentation

Bold cover slide with hero headline, optional subtitle, eyebrow label, and outline badges.

When to use: First slide of a pitch, QBR, or product deck. Wrap in DecoratedSlide on vivid backgrounds.

Preview

FY26 planning

Quarterly business review

Three priorities for finance, operations, and product.

45 minBoard readyDraft v2

Prop	Type	Notes
title	string	Required. Hero headline.
subtitle	string	Optional. Supporting line under the title.
label	string	Optional. Eyebrow pill above the title (also accepts AccentEyebrow styling via label prop).
badges	string[]	Optional. Outline chips under the subtitle (duration, audience, version).

Examples

<HeroCoverSlide
  label="FY26 planning"
  title="Quarterly business review"
  subtitle="Three priorities for finance, operations, and product."
  badges={["45 min", "Board ready", "Draft v2"]}
/>

<SplitBriefSlide>
expressiveSplitPresentation
Two-column narrative layout with bracketed panels for a problem/solution or context/outcome brief.
When to use: Second slide after the cover: state the situation on the left and the intended outcome on the right. Omit right for a single-panel brief.
Preview
Mission Brief
Rewiring How We Share Ideas
Every presentation is an opportunity to transport your audience.
No canvas limits. No cookie-cutter layouts.
Prop Type Notes
label string Optional. HUD pill above the title.
title string Required. Section headline.
left ReactNode Required. Left (or sole) body panel.
right ReactNode Optional. Optional second panel.
Examples
```
<SplitBriefSlide
 label="Mission Brief"
 title="Rewiring How We Share Ideas"
 left="Every presentation is an opportunity to transport your audience."
 right="No canvas limits. No cookie-cutter layouts."
/>
```

<CapabilityGrid>

expressiveContentPresentation

Grid of two to four capability or feature cards with staggered entrance animation (client).

When to use: Summarise platform capabilities, product pillars, or service lines. Use after the brief slide when the audience needs a structured "what we offer" view.

Preview

Core Systems

Four Engines Running

Modular Blocks

Swap components without breaking the grid.

Crisp Vectors

All visual effects are native CSS.

Live Data

Chart slides accept dynamic values.

Retro Atmosphere

Scanlines, CRT vignettes, and starfields.

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline.
features	{ title: string; description: string }[]	Required. Feature cards (2–4).
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<CapabilityGrid
  label="Core Systems"
  title="Four Engines Running"
  features={[
    { title: "Modular Blocks", description: "Swap components without breaking the grid." },
    { title: "Crisp Vectors", description: "All visual effects are native CSS." },
    { title: "Live Data", description: "Chart slides accept dynamic values." },
    { title: "Retro Atmosphere", description: "Scanlines, CRT vignettes, and starfields." }
  ]}
/>

<ColumnChartSlide>

expressiveChartPresentation

Vertical bar chart for comparing categories on a 0–100 scale; bars animate in on slide enter (client).

When to use: Quarterly KPIs, segment growth, or survey scores where each bar is an independent category. Prefer StatBarChart when you need multi-series report charts.

Preview

Analytics Core

Quarterly Growth Metrics

Fiscal performance across four sectors

Alpha

Beta

Gamma

Delta

Epsilon

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline (cyan).
subtitle	string	Optional. Mono pink subtitle under the title.
items	{ label: string; value: number; display?: string; tone?: "cyan" \| "pink" \| "yellow" }[]	Required. Bars; value is 0–100 height percentage.
tween	object	Optional. Optional GSAP vars for bar growth.

Examples

<ColumnChartSlide
  label="Analytics Core"
  title="Quarterly Growth Metrics"
  subtitle="Fiscal performance across four sectors"
  items={[
    { label: "Alpha", value: 78 },
    { label: "Beta", value: 92 },
    { label: "Gamma", value: 64 },
    { label: "Delta", value: 85 },
    { label: "Epsilon", value: 56 }
  ]}
/>

<RankedBarSlide>

expressiveChartPresentation

Horizontal ranked bar chart for share or allocation breakdown; fills animate in on slide enter (client).

When to use: Budget allocation, capacity mix, or portfolio weight by line item. Each row is one label with a 0–100 fill percentage.

Preview

System Load

Resource Allocation

Percentage distribution across operational units

Compute

88%

Storage

72%

Network

95%

Memory

61%

Graphics

44%

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline.
subtitle	string	Optional. Supporting line under the title.
labelAccent	"yellow" \| "cyan" \| "pink"	Optional. Default: `yellow`. AccentEyebrow text colour.Values: yellow, cyan, pink
items	{ label: string; value: number; display?: string; tone?: "navy" \| "cyan" \| "pink" }[]	Required. Rows; value is 0–100 fill percentage.
tween	object	Optional. Optional GSAP vars for fill growth.

Examples

<RankedBarSlide
  label="System Load"
  title="Resource Allocation"
  subtitle="Percentage distribution across operational units"
  items={[
    { label: "Compute", value: 88 },
    { label: "Storage", value: 72 },
    { label: "Network", value: 95 },
    { label: "Memory", value: 61 },
    { label: "Graphics", value: 44 }
  ]}
/>

<ChronologySlide>

expressiveTimelinePresentation

Alternating timeline with dated milestones and optional active-state markers; events stagger in on slide enter.

When to use: Product roadmap, rollout plan, or programme chronology with three to six dated events. Mark current or completed phases with active: true.

Preview

Chronology

Development Roadmap

Q1 2026

Concept & Architecture

Wireframes and core grid.

Q2 2026

Asset Generation

Pixel components coded.

Q3 2026

Data Integration

Charting engine and counters.

Q4 2026

Global Launch

Public release.

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline.
events	{ date: string; title: string; description?: string; active?: boolean }[]	Required. Timeline events; active nodes render yellow.
tween	object	Optional. Optional GSAP vars for event entrance.

Examples

<ChronologySlide
  label="Chronology"
  title="Development Roadmap"
  events={[
    { date: "Q1 2026", title: "Concept & Architecture", description: "Wireframes and core grid.", active: true },
    { date: "Q2 2026", title: "Asset Generation", description: "Pixel components coded.", active: true },
    { date: "Q3 2026", title: "Data Integration", description: "Charting engine and counters." },
    { date: "Q4 2026", title: "Global Launch", description: "Public release." }
  ]}
/>

<MetricPanelSlide>

expressiveStatsPresentation

Grid of two to four headline metrics with labels; tiles stagger in on slide enter (client).

When to use: Platform vitals, portfolio KPIs, or campaign scorecard at a glance. Pre-format values as strings (currency, %, counts).

Preview

Live Telemetry

Platform Vitals

Real-time aggregate figures from active deployments

2.4k

Active Worlds

98M

Pixels Rendered

99.9%

Uptime Score

Max Resolution

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline (cyan).
description	string	Optional. Supporting line under the title.
stats	{ value: string; label: string }[]	Required. Stat tiles (2–4).
tween	object	Optional. Optional GSAP vars for tile entrance.

Examples

<MetricPanelSlide
  label="Live Telemetry"
  title="Platform Vitals"
  description="Real-time aggregate figures from active deployments"
  stats={[
    { value: "2.4k", label: "Active Worlds" },
    { value: "98M", label: "Pixels Rendered" },
    { value: "99.9%", label: "Uptime Score" },
    { value: "4K", label: "Max Resolution" }
  ]}
/>

<FeaturedQuoteSlide>
expressiveQuotePresentation
Centred featured quote with decorative mark and attribution line.
When to use: Customer testimonial, sponsor quote, or manifesto moment mid-deck. Use QuoteSlide for simpler editorial quotes.
Preview
The first automation went live in two weeks. Finance finally trusts the numbers.
— Maria Fernandes, CFO, Acme Corp
Prop Type Notes
children ReactNode Required. Quote body text.
attribution string Optional. Attribution line under the quote.
label string Optional. Optional eyebrow above the quote.
Examples
```
<FeaturedQuoteSlide attribution="Maria Fernandes, CFO, Acme Corp">
 The first automation went live in two weeks. Finance finally trusts the numbers.
</FeaturedQuoteSlide>
```

<PlanComparisonGrid>

expressiveCompareCTAPresentation

Side-by-side pricing or plan comparison cards with feature lists and optional featured tier highlight.

When to use: SaaS pricing, service tiers, or licence options. Typically three tiers; mark the recommended plan with featured: true.

Preview

Pricing

Choose a plan

Starter

£0 /mo

For evaluation.

5 users
Community support

Start free

Team

£29 /mo

For growing teams.

Unlimited workflows
SSO

Book a demo

Enterprise

Custom

For regulated environments.

Dedicated support
Audit logs

Contact sales

Prop	Type	Notes
label	string	Optional. Eyebrow above the section title.
title	string	Optional. Section headline.
tiers	{ name: string; price: string; priceSuffix?: string; description?: string; features: string[]; featured?: boolean; cta?: string }[]	Required. Plan cards (typically three). Pre-format price strings with currency.
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<PlanComparisonGrid
  label="Pricing"
  title="Choose a plan"
  tiers={[
    { name: "Starter", price: "£0", priceSuffix: "/mo", description: "For evaluation.", features: ["5 users", "Community support"], cta: "Start free" },
    { name: "Team", price: "£29", priceSuffix: "/mo", description: "For growing teams.", features: ["Unlimited workflows", "SSO"], featured: true, cta: "Book a demo" },
    { name: "Enterprise", price: "Custom", description: "For regulated environments.", features: ["Dedicated support", "Audit logs"], cta: "Contact sales" }
  ]}
/>

<ClosingSlide>

expressiveOutroCTAPresentation

Closing slide with headline, supporting copy, and primary/secondary call-to-action labels.

When to use: Final slide: next step, demo request, or contact prompt.

Preview

Ready for a pilot?

We can scope the first workflow in a single engagement week.

Book a demoDownload the brief

Prop	Type	Notes
label	string	Optional. Eyebrow above the headline.
title	string	Required. Closing headline.
body	string	Optional. Supporting sentence.
primaryCta	string	Optional. Primary button label.
secondaryCta	string	Optional. Secondary button label.

Examples

<ClosingSlide
  title="Ready for a pilot?"
  body="We can scope the first workflow in a single engagement week."
  primaryCta="Book a demo"
  secondaryCta="Download the brief"
/>

<LunnoaCoverSlide>

lunnoaTitlePresentation

Lunnoa-branded cover: full-bleed indigo marketing background, grey left-to-right overlay, left-aligned title stack. Logo from /theming uploads (dark-surface asset).

When to use: Opening slide for Lunnoa sales, product, or workshop decks. Uses the bundled indigo background by default; pass backgroundSrc to override.

Often with: TitleSlideHeroCoverSlideBroadsideCover

Preview

The platform layer for enterprise AI.

Prop	Type	Notes
title	string	Required. Main headline, left-aligned on the overlay (uses left half of the slide).
subtitle	string	Optional. Supporting line under the title.
backgroundSrc	string	Optional. Full-bleed background image URL. Defaults to /assets/decks/lunnoa/indigo-background.png.Example: `/assets/decks/lunnoa/indigo-background.png`

Examples

<LunnoaCoverSlide title="The platform layer for enterprise AI." />

<LunnoaWaitingSlide>
lunnoaWaitingContentPresentation
White hold slide with the Lunnoa four-dot loading spinner and optional status message below.
When to use: Pre-start or intermission slide while attendees join or content loads. Set message per deck via MDX (e.g. "Waiting for attendees").
Often with: LunnoaCoverSlideSectionSlide
Preview
Waiting for attendees
Prop Type Notes
message string Optional. Status line under the spinner; editable via MCP section create/update.Example: Waiting for attendees
Examples
```
<LunnoaWaitingSlide message="Waiting for attendees" />
```

<BroadsideCover>

broadsideTitlePresentation

Protest-poster cover: massive lowercase display title with catalogue number and meta.

When to use: Opening slide for manifesto / editorial decks. Pair with dark or brand presentationTheme.background.

Preview

01Broadside

this is the broadside style

Type so large it becomes image.

Lunnoa2026 · Showcase

Prop	Type	Notes
number	string	Optional. Default: `"01"`. Catalogue number top-left.
label	string	Optional. Default: `"Broadside"`. Top-right label.
title	string	Required. Lowercase display title.
lead	string	Optional. Supporting sentence.
author	string	Optional. Bottom-left meta.
meta	string	Optional. Bottom-right meta.

Examples

<BroadsideCover number="01" title="this is the broadside style" lead="Type so large it becomes image." author="Lunnoa" meta="2026 · Showcase" />

<BroadsideChapter>
broadsideChapterPresentation
Chapter opener with oversized lowercase title.
When to use: Section divider in an editorial deck.
Preview
02 / Chapter
the next chapter begins here
What this section covers.
Prop Type Notes
number string Optional. e.g. "02 / Chapter".
title string Required. Chapter title (lowercase).
lead string Optional. Optional framing sentence.
Examples
```
<BroadsideChapter number="02 / Chapter" title="the next chapter begins here" lead="What this section covers." />
```

<BroadsideStatement>

broadsideStatementPresentation

Single bold claim with mono kicker and accent rule.

When to use: Thesis / punchline slide.

Preview

The Argument03

Core Thesis

orange is not an accent. it is the room.

Broadside

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
kicker	string	Optional. Mono eyebrow.
title	string	Required. Accent-coloured claim.
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideStatement chromeLeft="The Argument" chromeRight="03" kicker="Core Thesis" title="orange is not an accent. it is the room." footLeft="Broadside" />

<BroadsideSplit>

broadsideSplitMediaPresentation

Text + image split. Use upload_media (MCP) or an https URL for imageSrc.

When to use: When a slide needs a photograph or diagram beside copy.

Preview

Evidence04

when content needs image support

Upload via MCP upload_media, then pass the returned url.

Source · 2026

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
kicker	string	Optional. Mono eyebrow.
title	string	Required. Headline.
body	string	Optional. Supporting copy.
imageSrc	string	Optional. Image URL from upload_media or https.
imageAlt	string	Optional. Alt text.
imageCaption	string	Optional. Caption under the image.
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideSplit chromeLeft="Evidence" chromeRight="04" title="when content needs image support" body="Upload via MCP upload_media, then pass the returned url." imageSrc="/uploads/media/example.png" imageAlt="Evidence wall" imageCaption="Source · 2026" />

<BroadsideStats>

broadsideStatsPresentation

Three top-bordered stat cards with accent numerals.

When to use: KPI strip in editorial voice.

Preview

Numbers05

87%

Retention

YoY

Markets

4.2×

Pipeline

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
title	string	Optional. Optional headline.
stats	array	Required. [{ value, label, note? }].
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideStats chromeLeft="Numbers" chromeRight="05" stats={[{ value: "87%", label: "Retention", note: "YoY" }, { value: "12", label: "Markets" }, { value: "4.2×", label: "Pipeline" }]} />

<BroadsideFadeList>
broadsideListStatementPresentation
Stacked display words at fading opacities (max 3).
When to use: Before / during / after or staged narrative.
Preview
06
before
during
after
Prop Type Notes
number string Optional. Catalogue number.
title string Optional. Optional side title.
items string[] Required. Up to three words/phrases.
Examples
```
<BroadsideFadeList number="06" items={["before", "during", "after"]} />
```

<BroadsideList>

broadsideListPresentation

Slash-marked bullet list capped at three items.

When to use: Short takeaways in Broadside voice.

Preview

Rules07

three rules only

Type is the image
One accent colour
No shadows

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
title	string	Optional. Headline.
items	string[]	Required. Up to three bullets.
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideList chromeLeft="Rules" chromeRight="07" title="three rules only" items={["Type is the image", "One accent colour", "No shadows"]} />

<BroadsideQuote>
broadsideQuotePresentation
Oversized pull-quote with accent quotation mark.
When to use: Interview or manifesto quote.
Preview
the room is the message.
Design lead · 2026
Prop Type Notes
quote string Required. Quote body (lowercase preferred).
attribution string Optional. Mono attribution.
Examples
```
<BroadsideQuote quote="the room is the message." attribution="Design lead · 2026" />
```

<BroadsideCompare>

broadsideComparePresentation

Before/after compare; right panel uses accent wash.

When to use: Today vs proposed.

Preview

Compare09

Today

five inboxes

/Manual forwards
/No audit trail

After

one intake

/Agent triage
/Full log

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
left	object	Required. { kicker?, title, body?, items? }.
right	object	Required. { kicker?, title, body?, items? }.
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideCompare chromeLeft="Compare" chromeRight="09" left={{ kicker: "Today", title: "five inboxes", items: ["Manual forwards", "No audit trail"] }} right={{ kicker: "After", title: "one intake", items: ["Agent triage", "Full log"] }} />

<BroadsideChart>

broadsideChartPresentation

Vertical bar chart with optional accent bar.

When to use: Simple comparative bars.

Preview

share of voice

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
title	string	Optional. Headline.
items	array	Required. [{ label, value 0–100, accent? }].
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideChart title="share of voice" items={[{ label: "Us", value: 72, accent: true }, { label: "A", value: 48 }, { label: "B", value: 35 }]} />

<BroadsideFlow>

broadsideTimelinePresentation

Horizontal numbered process steps.

When to use: Method / how-it-works.

Preview

how it works

Discover

Talk to users.

Define

One hypothesis.

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
title	string	Optional. Headline.
steps	array	Required. [{ number, title, description? }].
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideFlow title="how it works" steps={[{ number: "01", title: "Discover", description: "Talk to users." }, { number: "02", title: "Define", description: "One hypothesis." }]} />

<BroadsideEnd>
broadsideOutroPresentation
Closing display title with optional author meta.
When to use: Final slide.
Preview
20
thank you
Questions welcome.
Lunnoa2026
Prop Type Notes
number string Optional. Catalogue number.
title string Required. Closing title.
lead string Optional. Supporting line.
author string Optional. Bottom-left.
meta string Optional. Bottom-right.
Examples
```
<BroadsideEnd number="20" title="thank you" lead="Questions welcome." author="Lunnoa" meta="2026" />
```

<BroadsideFrame>

broadsideChromePresentation

Chrome + foot wrapper around arbitrary children.

When to use: When composing custom Broadside content with shared hairline chrome.

Preview

Notes11

Custom body

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.
children	ReactNode	Required. Slide body.

Examples

<BroadsideFrame chromeLeft="Notes" chromeRight="11"><p>Custom body</p></BroadsideFrame>

Prop	Type	Notes
children	string	Required. Pill text (rendered uppercase).
accent	"yellow" \| "cyan" \| "pink"	Optional. Default: `yellow`. Neon text colour on the navy pill.Values: yellow, cyan, pink

Prop	Type	Notes
children	ReactNode	Required. Quote body text.
attribution	string	Optional. Attribution line under the quote.
label	string	Optional. Optional eyebrow above the quote.

Prop	Type	Notes
number	string	Optional. e.g. "02 / Chapter".
title	string	Required. Chapter title (lowercase).
lead	string	Optional. Optional framing sentence.

Prop	Type	Notes
number	string	Optional. Catalogue number.
title	string	Optional. Optional side title.
items	string[]	Required. Up to three words/phrases.

Prop	Type	Notes
quote	string	Required. Quote body (lowercase preferred).
attribution	string	Optional. Mono attribution.

Preview

Agenda

Examples

Preview

Automation discovery

Index 2026

Examples

Preview

How work actually flows

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Current intake

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Programme health

Examples

Preview

Examples

Preview

Blockers

Asks

Examples

Preview

Next 30 days

Examples

Preview

Deliverables

Examples

Preview

Delivery plan

Examples

Preview

Manual hours per week by team

Reader response, by quarter

Examples

Preview

Automation maturity — current vs. 6-month target

Examples

Preview

Maturity stages — current vs. 6-month target

Examples

Preview

Twelve use cases scored on effort and impact

Examples

Preview

Wave 1 — 12-week delivery

Phase 1 — Foundation

Phase 2 — Build the three flows

Phase 3 — Scale and govern

Examples

Preview

Wave 1 — four agreed flows

Supplier invoice intake

Examples

Preview

Wave 1 — four agreed flows

Supplier invoice intake

Order acknowledgements

HR ticket triage

Contract renewal alerts

Examples

Preview

Delivery team

Maria Fernandes