{
"deck_id": "deck-demo",
"title": "Deck Demo + Chart Gallery",
"summary": "Unified reference-and-validation deck for page styles, block styles, charting examples, diagrams, and all creator-intent controls.",
"author": "OVES Deck System",
"version": "0.3.0",
"status": "draft",
"visibility": "internal",
"asset_type": "react",
"source_system": "oves-decks",
"owner": "OVES Product Team",
"launch_url": "/decks/deck-demo",
"updated_at": "2026-06-05T06:58:00.638Z",
"tags": [
"audience:internal",
"use:technical-explainer",
"collection:internal-training",
"state:featured"
],
"pages": [
{
"page_id": "P1.cover",
"page_style": "hero",
"variant": "dark",
"title": "Deck Demo",
"description": "Unified reference-and-validation deck for page styles, block styles, charting examples, and diagrams.",
"content": {
"subtitle": "Unified reference-and-validation deck for page styles, block styles, charting examples, and diagrams."
}
},
{
"page_id": "P3.coverage_map",
"page_style": "single-block",
"variant": "basic",
"title": "Coverage Map",
"description": "High-level inventory of what this deck validates.",
"blocks": [
{
"address": "1/1",
"block_style": "bullet-list",
"title": "What This Deck Covers",
"content": [
"Page styles: cover, single-block, two-column, two-column callout, and matrix layouts.",
"Block styles: bullet list, numbered list, callout, stat cards, key-value table, comparison table, image gallery, and media bullet list.",
"Charting examples: schedule/gantt-style timeline and radar/spider comparison.",
"Diagram examples: Venn overlap and directed flow architecture."
]
}
]
},
{
"page_id": "P4.single_block",
"page_style": "single-block",
"variant": "basic",
"title": "Page Style: Single Block",
"description": "Baseline single-message layout.",
"blocks": [
{
"address": "1/1",
"block_style": "callout",
"title": "Single-Block Baseline",
"tone": "info",
"content": "Use the single-block page when the slide has one dominant message and should not compete with layout logic. This is the simplest reference page for typography, spacing, and callout treatment."
}
]
},
{
"page_id": "P5.two_column",
"page_style": "two-column",
"variant": "basic",
"title": "Page Style: Two Column",
"description": "Standard left/right narrative-and-structure layout.",
"blocks": [
{
"address": "1/1",
"block_style": "bullet-list",
"title": "Left Narrative Column",
"content": [
"Left side carries framing, guidance, or reader orientation.",
"This layout is useful when the right side needs a denser visual or structured block.",
"It remains the default comparison page style in the current deck system."
]
},
{
"address": "1/2",
"block_style": "comparison-table",
"title": "Right Structured Column",
"columns": [
"Item",
"Value"
],
"rows": [
{
"cells": [
"Best use",
"Comparison, narrative + evidence, framing + visual pairing."
]
},
{
"cells": [
"Strength",
"Balanced reading flow with explicit separation between message and proof."
]
},
{
"cells": [
"Risk",
"Fails when both columns are equally dense and visually noisy."
]
}
]
}
]
},
{
"page_id": "P6.two_column_callout",
"page_style": "two-column-callout",
"variant": "basic",
"title": "Page Style: Two Column With Callout",
"description": "Comparison page plus a reinforced bottom takeaway.",
"blocks": [
{
"address": "1/1",
"block_style": "media-bullet-list",
"eyebrow": "Visual pairing",
"title": "Media Bullet List",
"image_src": "/images/e3-comparison/e3pro-slide04-img03.png",
"image_alt": "E3 product example",
"content": [
"Combines explanatory bullets with a visual reference.",
"Useful for product profile, before/after, or feature walkthrough pages.",
"The image should support the bullets instead of competing with them."
]
},
{
"address": "1/2",
"block_style": "comparison-table",
"title": "Compact Comparison",
"columns": [
"Trait",
"Use it when",
"Avoid it when"
],
"header_tones": [
"default",
"primary",
"accent"
],
"rows": [
{
"cells": [
"Two-column + callout",
"You need both comparison and a strong takeaway.",
"The bottom callout would just restate obvious content."
]
},
{
"cells": [
"Best fit",
"Decision pages, tradeoff pages, training recommendations.",
"Dense technical pages with no single takeaway."
]
}
]
},
{
"address": "footer",
"block_style": "callout",
"title": "Callout Rule",
"tone": "warning",
"content": "Reserve the bottom callout for the one decision, warning, or takeaway the presenter should repeat aloud."
}
]
},
{
"page_id": "P7.matrix",
"page_style": "four-block-matrix",
"variant": "basic",
"title": "Page Style: Matrix Layout",
"description": "Four equally weighted content regions under one page title.",
"blocks": [
{
"address": "1/1",
"block_style": "bullet-list",
"title": "Quadrant A",
"content": [
"Use the matrix when all quadrants matter.",
"Do not force matrix layout onto weak content.",
"Each quadrant should stay independently readable."
]
},
{
"address": "1/2",
"block_style": "numbered-list",
"title": "Quadrant B",
"content": [
"Define the role of each quadrant.",
"Keep text volume balanced.",
"Treat the page as one composed system."
]
},
{
"address": "2/1",
"block_style": "venn-chart",
"title": "Quadrant C",
"content": [
"Page style",
"Block style",
"Content data"
]
},
{
"address": "2/2",
"block_style": "comparison-table",
"title": "Quadrant D",
"columns": [
"Item",
"Value"
],
"rows": [
{
"cells": [
"Best use",
"Taxonomies, framework maps, grouped evidence."
]
},
{
"cells": [
"Common failure",
"One quadrant becomes the real page and the others become filler."
]
}
]
}
]
},
{
"page_id": "P8.text_metrics",
"page_style": "four-block-matrix",
"variant": "basic",
"title": "Block Styles: Text And Metrics",
"description": "Reusable blocks for narrative, sequence, emphasis, and KPI-style content.",
"blocks": [
{
"address": "1/1",
"block_style": "bullet-list",
"title": "Bullet List",
"content": [
"Fast scannable points",
"Works for framing and summary",
"Avoid overlong bullets"
]
},
{
"address": "1/2",
"block_style": "numbered-list",
"title": "Numbered List",
"content": [
"Use when order matters",
"Procedures read better as sequence",
"Do not fake sequence when none exists"
]
},
{
"address": "2/1",
"block_style": "callout",
"title": "Callout",
"tone": "success",
"content": "Callouts are for one strong note, warning, or recommendation. They lose value when used as generic body text containers."
},
{
"address": "2/2",
"block_style": "comparison-table",
"title": "Metric Snapshot",
"columns": [
"Signal",
"Value"
],
"rows": [
{
"cells": [
"Blocks shown",
"4"
]
},
{
"cells": [
"Primary use",
"Text + KPI"
]
},
{
"cells": [
"Promotion status",
"Reusable"
]
}
]
}
]
},
{
"page_id": "P9.tables_comparison",
"page_style": "two-column",
"variant": "basic",
"title": "Block Styles: Tables And Comparison",
"description": "Structured data blocks for lookup and side-by-side judgment.",
"blocks": [
{
"address": "1/1",
"block_style": "comparison-table",
"title": "Key-Value Table Shape",
"columns": [
"Key",
"Value"
],
"rows": [
{
"cells": [
"Role",
"Compact field/value reference."
]
},
{
"cells": [
"Best use",
"Definitions, structured metadata, implementation facts."
]
},
{
"cells": [
"Risk",
"Too many rows becomes spreadsheet-like and slow to present."
]
}
]
},
{
"address": "1/2",
"block_style": "comparison-table",
"title": "Comparison Table",
"columns": [
"Block",
"Strength",
"Weakness"
],
"header_tones": [
"default",
"primary",
"accent"
],
"rows": [
{
"cells": [
"Key-value table",
"Precise lookup surface",
"Weak for tradeoff storytelling"
]
},
{
"cells": [
"Comparison table",
"Good for tradeoffs and side-by-side judgment",
"Needs disciplined cell length"
]
},
{
"cells": [
"Metric cards",
"Fast signal for KPIs",
"Not enough for nuanced explanation"
]
}
]
}
]
},
{
"page_id": "P10.visual_content",
"page_style": "two-column",
"variant": "basic",
"title": "Block Styles: Visual Content",
"description": "Image-driven reference blocks.",
"blocks": [
{
"address": "1/1",
"block_style": "image-gallery",
"title": "Image Gallery",
"lead": "Gallery blocks work when the page is primarily about visual comparison or visual proof.",
"images": [
{
"src": "/images/e3-comparison/e3pro-slide04-img03.png",
"alt": "Gallery image 1"
},
{
"src": "/images/e3-comparison/e3pro-slide04-img04.png",
"alt": "Gallery image 2"
},
{
"src": "/images/e3-comparison/e3pro-slide05-img02.jpg",
"alt": "Gallery image 3"
},
{
"src": "/images/e3-comparison/e3pro-slide06-img02.jpg",
"alt": "Gallery image 4"
}
],
"columns": 2
},
{
"address": "1/2",
"block_style": "media-bullet-list",
"eyebrow": "Block pairing",
"title": "Media Bullet List",
"image_src": "/images/e3-comparison/e3h-pro.png",
"image_alt": "Media bullet list example",
"content": [
"Pairs one image with a readable list of takeaways.",
"Useful for feature explanation, product framing, and visual walkthroughs.",
"More focused than a gallery and easier to narrate live."
]
}
]
},
{
"page_id": "P12.diagrams",
"page_style": "two-column",
"variant": "basic",
"title": "Diagram Examples: Venn And Flow",
"description": "Reusable diagram patterns for overlap and directed architecture views.",
"blocks": [
{
"address": "1/1",
"block_style": "venn-chart",
"title": "Venn Overlap",
"content": [
"Page style",
"Block style",
"Content data"
]
},
{
"address": "1/2",
"block_style": "flow-diagram",
"title": "Promotion Flow",
"layout": "horizontal",
"footer_note": "The unified demo deck exists to prove patterns and show the canonical examples after they stabilize.",
"width": 760,
"height": 380,
"nodes": [
{
"id": "idea",
"label": "Idea",
"kind": "default",
"row": 1
},
{
"id": "demo",
"label": "Deck Demo",
"kind": "primary",
"row": 1
},
{
"id": "promote",
"label": "Reusable Layer",
"kind": "accent",
"row": 2
},
{
"id": "ship",
"label": "Production Deck",
"kind": "output",
"row": 2
}
],
"edges": [
{
"from": "idea",
"to": "demo",
"kind": "signal"
},
{
"from": "demo",
"to": "promote",
"label": "Validate",
"kind": "integrated"
},
{
"from": "promote",
"to": "ship",
"label": "Adopt",
"kind": "mechanical"
}
]
}
]
},
{
"page_id": "P13.line-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Line Chart",
"description": "Reusable line chart block powered by Recharts. Demonstrates multi-series line chart with custom colors.",
"blocks": [
{
"address": "1/1",
"block_style": "line-chart",
"title": "Multi-Series Line Chart",
"description": "Page views and revenue over 5 months.",
"data": [
{
"name": "Jan",
"pv": 4000,
"amt": 2400
},
{
"name": "Feb",
"pv": 3000,
"amt": 1398
},
{
"name": "Mar",
"pv": 2000,
"amt": 9800
},
{
"name": "Apr",
"pv": 2780,
"amt": 3908
},
{
"name": "May",
"pv": 1890,
"amt": 4800
}
],
"xAxisKey": "name",
"lines": [
{
"dataKey": "pv",
"name": "Page Views",
"color": "#667eea"
},
{
"dataKey": "amt",
"name": "Revenue ($)",
"color": "#ff6b6b"
}
],
"height": 350,
"variant": "dark"
}
]
},
{
"page_id": "P14.bar-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Bar Chart",
"description": "Reusable bar chart block. Supports vertical/horizontal layout and multi-series grouping.",
"blocks": [
{
"address": "1/1",
"block_style": "bar-chart",
"title": "Horizontal Bar Chart",
"description": "Revenue by product category.",
"data": [
{
"name": "Product A",
"revenue": 4000
},
{
"name": "Product B",
"revenue": 3000
},
{
"name": "Product C",
"revenue": 2000
},
{
"name": "Product D",
"revenue": 2780
},
{
"name": "Product E",
"revenue": 1890
}
],
"xAxisKey": "name",
"bars": [
{
"dataKey": "revenue",
"name": "Revenue ($)",
"color": "#4CAF50"
}
],
"layout": "horizontal",
"height": 350,
"variant": "dark"
}
]
},
{
"page_id": "P15.pie-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Pie Chart",
"description": "Reusable pie chart block. Supports custom colors, inner radius (donut), and dark variant.",
"blocks": [
{
"address": "1/1",
"block_style": "pie-chart",
"title": "Market Share",
"description": "Simulated market share by vendor.",
"data": [
{
"name": "Vendor A",
"value": 400
},
{
"name": "Vendor B",
"value": 300
},
{
"name": "Vendor C",
"value": 200
},
{
"name": "Vendor D",
"value": 100
}
],
"colors": [
"#667eea",
"#ff6b6b",
"#4CAF50",
"#ffa726"
],
"innerRadius": 40,
"outerRadius": 100,
"height": 350,
"variant": "dark"
}
]
},
{
"page_id": "P16.area-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Area Chart",
"description": "Reusable area chart block. Supports stacked areas and gradient fills.",
"blocks": [
{
"address": "1/1",
"block_style": "area-chart",
"title": "Stacked Area Chart",
"description": "Revenue streams over 5 months.",
"data": [
{
"name": "Jan",
"streamA": 4000,
"streamB": 2400
},
{
"name": "Feb",
"streamA": 3000,
"streamB": 1398
},
{
"name": "Mar",
"streamA": 2000,
"streamB": 9800
},
{
"name": "Apr",
"streamA": 2780,
"streamB": 3908
},
{
"name": "May",
"streamA": 1890,
"streamB": 4800
}
],
"xAxisKey": "name",
"areas": [
{
"dataKey": "streamA",
"name": "Stream A",
"color": "#667eea",
"fillOpacity": 0.6
},
{
"dataKey": "streamB",
"name": "Stream B",
"color": "#ff6b6b",
"fillOpacity": 0.6
}
],
"stacked": true,
"height": 350,
"variant": "dark"
}
]
},
{
"page_id": "P17.scatter-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Scatter Chart",
"description": "Reusable scatter chart block. Supports multiple series and axis labeling.",
"blocks": [
{
"address": "1/1",
"block_style": "scatter-chart",
"title": "Scatter Plot: X vs Y",
"description": "Simulated scatter data with two series.",
"data": [
{
"x": 10,
"y": 20,
"z": 5
},
{
"x": 30,
"y": 40,
"z": 10
},
{
"x": 50,
"y": 60,
"z": 15
},
{
"x": 70,
"y": 80,
"z": 20
},
{
"x": 90,
"y": 100,
"z": 25
}
],
"xAxisKey": "x",
"yAxisKey": "y",
"series": [
{
"dataKey": "z",
"name": "Size (z)",
"color": "#667eea"
}
],
"height": 350,
"variant": "dark"
}
]
},
{
"page_id": "P18.radar-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Radar Chart",
"description": "Reusable radar (spider) chart block. Compares multiple series across axes.",
"blocks": [
{
"address": "1/1",
"block_style": "radar-chart",
"title": "Product Comparison: Radar Chart",
"description": "Comparing Product A vs Product B across 6 metrics.",
"data": [
{
"metric": "Speed",
"A": 80,
"B": 90
},
{
"metric": "Power",
"A": 90,
"B": 70
},
{
"metric": "Range",
"A": 70,
"B": 85
},
{
"metric": "Efficiency",
"A": 85,
"B": 75
},
{
"metric": "Cost",
"A": 60,
"B": 80
},
{
"metric": "Reliability",
"A": 90,
"B": 70
}
],
"metrics": [
"Speed",
"Power",
"Range",
"Efficiency",
"Cost",
"Reliability"
],
"radars": [
{
"dataKey": "A",
"name": "Product A",
"color": "#667eea"
},
{
"dataKey": "B",
"name": "Product B",
"color": "#ff6b6b"
}
],
"height": 350,
"variant": "dark"
}
]
},
{
"page_id": "P19.venn-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Venn Chart",
"description": "Reusable Venn diagram block. Supports 2-set and 3-set overlap.",
"blocks": [
{
"address": "1/1",
"block_style": "venn-chart",
"title": "3-Set Venn Diagram",
"content": [
"Page Style",
"Block Style",
"Content Data"
]
}
]
},
{
"page_id": "P20.gantt-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Gantt Chart",
"description": "Reusable Gantt chart block powered by @svar-ui/react-gantt.",
"blocks": [
{
"address": "1/1",
"block_style": "gantt-chart",
"title": "Project Schedule (Gantt)",
"tasks": [
{
"id": "1",
"text": "Research & Design",
"start": "2026-06-01",
"end": "2026-06-05",
"progress": 100
},
{
"id": "2",
"text": "Prototype",
"start": "2026-06-03",
"end": "2026-06-10",
"progress": 75,
"parent": "1"
},
{
"id": "3",
"text": "Testing",
"start": "2026-06-08",
"end": "2026-06-15",
"progress": 40
},
{
"id": "4",
"text": "Release",
"start": "2026-06-13",
"end": "2026-06-20",
"progress": 10
}
],
"height": 400,
"themeClass": "wx-willow-dark-theme",
"readonly": true
}
]
}
]
}