Deck Demo¶
deck-demo is the single canonical example deck for reusable presentation patterns in oves-decks.
It replaces the previous split between oves-deck-demo and deck-feature-tests.
Intent Data¶
{
"deck_id": "deck-demo",
"title": "Deck Demo",
"summary": "Unified reference-and-validation deck for page styles, block styles, charting examples, and diagrams.",
"author": "OVES Deck System",
"version": "0.2.0",
"status": "draft",
"visibility": "internal",
"asset_type": "react",
"source_system": "oves-decks",
"owner": "OVES Product Team",
"launch_url": "/decks/deck-demo",
"updated_at": "2026-04-11T00:00:00Z",
"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": "P2.how_to_use",
"page_style": "single-block",
"variant": "basic",
"title": "How To Use This Deck",
"description": "The single canonical example-and-validation deck for reusable patterns.",
"blocks": [
{
"address": "1/1",
"block_style": "bullet-list",
"title": "Unified Role",
"content": [
"Use this deck as the single canonical example set for reusable presentation patterns.",
"Use it to prove new ideas before promotion and to show stable examples after promotion.",
"Keep page titles explicit so maintainers can find the exact pattern being tested or referenced."
]
}
]
},
{
"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": "P11.charting",
"page_style": "two-column",
"variant": "basic",
"title": "Charting Examples: Schedule And Radar",
"description": "In-deck charting examples used while the chart contract is still under evaluation.",
"blocks": [
{
"address": "1/1",
"block_style": "gantt-chart",
"title": "Gantt-Style Schedule",
"content": [
"Intent drafting",
"Runtime implementation",
"Visual tuning",
"Promotion review"
]
},
{
"address": "1/2",
"block_style": "spider-chart",
"title": "Spider/Radar Comparison",
"content": [
"Clarity",
"Density",
"Reuse",
"Speed",
"Visual punch"
]
}
]
},
{
"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"
}
]
}
]
}
]
}
Purpose¶
Provide one deck that does both jobs:
- acts as the canonical reference set for reusable page and block patterns
- acts as the proving-ground deck for validating new patterns before promotion
Audience¶
Internal deck authors and maintainers who need one place to:
- find the current recommended examples
- test and review new presentation patterns
- understand how patterns move into reusable layers
Runtime¶
- Live deck:
/decks/deck-demo - React/Spectacle deck app:
src/decks/deck-demo/DeckDemo.tsx
Current Coverage¶
This deck currently includes:
- page styles
- block styles
- charting examples
- diagrams
Page Sequence¶
How To Use This DeckCoverage MapPage Style: Single BlockPage Style: Two ColumnPage Style: Two Column With CalloutPage Style: Matrix LayoutBlock Styles: Text And MetricsBlock Styles: Tables And ComparisonBlock Styles: Visual ContentCharting Examples: Schedule And RadarDiagram Examples: Venn And Flow
Working Rule¶
Use deck-demo as the single validation-and-reference deck.
When a pattern is accepted:
- decide the correct permanent layer
- promote it into that reusable layer
- keep
deck-democonsuming the promoted standard instead of owning one-off logic forever
Promotion Targets¶
- system-wide design in
src/shared/design-system/ - deck-wide standard in
src/deck-templates/ - page layout standard in
src/page-templates/ - block design standard in
src/blocks/ - intent/default or workflow rule in
docs/