Data Visualization Prompts¶
Comprehensive prompt templates for charts, graphs, dashboards, and infographics with parameterized design system integration
Created: February 2026 Tool: Nano Banana Pro / Data Viz Tools Related: Framework Overview | Design System
Design System Configuration¶
# DATA VISUALIZATION CONFIGURATION
# Inherits from: ./readme.md (Parameterized Design System)
# Reference parent configuration for global tokens and variant definitions
dataviz_config:
schema_version: "2.0"
parent_config: "./readme.md"
# Primary variants for data visualization
primary_variants:
technical_data: "blueprint_technical" # Engineering charts, CAD-style displays
security_metrics: "cyber_shield" # Security dashboards, threat monitoring
executive_reporting: "trusted_advisor" # C-suite presentations, board reports
developer_tools: "clean_developer" # Developer dashboards, API metrics
client_facing: "modern_partner" # Client reports, collaborative analysis
sales_performance: "bold_challenger" # Sales dashboards, competitive metrics
ai_analytics: "sentinel_guard" # AI/ML dashboards, predictive analytics
creative_reports: "creative_clay" # Marketing analytics, creative performance
# Default chart configuration
defaults:
min_height: "{{space_64}}" # 256px minimum
grid_lines: "{{border}}"
axis_color: "{{text_secondary}}"
label_font: "{{font_primary}}"
data_font: "{{font_mono}}"
animation_duration: "{{duration_slow}}"
tooltip_delay: "{{duration_fast}}"
Variant: Blueprint Technical (PRIMARY for Technical Data Viz)¶
Engineering-grade data visualization with CAD-inspired precision.
variant_blueprint_technical:
id: "blueprint_technical"
name: "Blueprint Technical"
description: "Engineering charts, CAD-style data displays, technical specifications"
primary_use: "Technical data visualization, engineering metrics, specification displays"
# Color Semantic Mapping
colors:
primary: "{{sbk_blue}}" # #2563eb
primary_dark: "{{sbk_navy}}" # #0f172a
primary_light: "{{sbk_sky}}" # #0ea5e9
secondary: "{{slate_700}}" # #334155
accent: "{{cyan_500}}" # #06b6d4
background: "{{slate_50}}" # #f8fafc
surface: "{{white}}" # #ffffff
grid_primary: "{{slate_300}}" # #cbd5e1
grid_secondary: "{{slate_200}}" # #e2e8f0
text_primary: "{{slate_800}}" # #1e293b
text_secondary: "{{slate_600}}" # #475569
text_muted: "{{slate_400}}" # #94a3b8
annotation: "{{orange_600}}" # #ea580c
dimension_lines: "{{slate_500}}" # #64748b
success: "{{green_600}}" # #16a34a
warning: "{{amber_500}}" # #f59e0b
error: "{{red_600}}" # #dc2626
info: "{{sbk_blue}}" # #2563eb
# Data Series Palette
data_series:
series_1: "{{sbk_blue}}" # #2563eb - Primary metric
series_2: "{{cyan_600}}" # #0891b2 - Secondary metric
series_3: "{{slate_600}}" # #475569 - Tertiary metric
series_4: "{{teal_600}}" # #0d9488 - Quaternary metric
series_5: "{{indigo_600}}" # #4f46e5 - Fifth metric
series_6: "{{orange_600}}" # #ea580c - Annotation/highlight
comparison: "{{slate_400}}" # Baseline/comparison values
target: "{{green_600}}" # Target lines
threshold_warning: "{{amber_500}}" # Warning threshold
threshold_critical: "{{red_600}}" # Critical threshold
# Typography Style
typography:
heading_font: "{{font_mono}}"
body_font: "{{font_primary}}"
data_font: "{{font_mono}}"
heading_weight: "{{weight_semibold}}"
body_weight: "{{weight_regular}}"
data_weight: "{{weight_medium}}"
heading_tracking: "{{tracking_wide}}"
data_tracking: "{{tracking_normal}}"
axis_size: "{{text_xs}}"
label_size: "{{text_sm}}"
title_size: "{{text_lg}}"
# Grid System Integration
grid_system:
type: "technical_grid"
outer_frame: "frame_solid"
outer_opacity: 0.3
inner_dividers: "frame_dashed"
inner_opacity: 0.15
cell_borders: "frame_dotted"
cell_opacity: 0.1
corner_marks: true
dimension_indicators: true
reference_grid: true
grid_intervals: [10, 50, 100]
# Visual Style
visual:
border_radius: "{{radius_sm}}" # Sharp, technical corners
shadow_style: "shadow_xs"
line_weight: "2px"
point_size: "6px"
gridline_weight: "1px"
axis_weight: "1px"
annotation_style: "callout-with-leader"
dimension_style: "engineering-notation"
# Chart-Specific Styling
chart_styles:
bar:
bar_width: "65%"
gap: "35%"
corner_radius: "0"
hatch_patterns: true
line:
line_weight: "2px"
point_style: "cross"
point_size: "8px"
area_opacity: 0.1
scatter:
point_style: "cross-hair"
point_size: "10px"
quadrant_lines: true
gauge:
arc_style: "270deg"
tick_marks: true
subdivisions: 10
heatmap:
cell_borders: true
value_display: true
cell_gap: "1px"
# Prompt Prefix
prompt_prefix: |
[STYLE: BLUEPRINT TECHNICAL]
Color palette: Blue (#2563eb) with cyan (#0891b2) technical accents on light gray (#f8fafc).
Mood: Engineering precision, CAD-like clarity, technical documentation quality.
Grid: Visible technical grid with corner marks and dimension indicators.
Typography: Monospace for data values, clean sans for labels.
Lines: Precise, consistent weight, dashed for secondary elements.
Annotations: Leader lines with callout boxes, engineering notation.
Corners: Sharp or minimal radius for technical aesthetic.
Data points: Cross or cross-hair markers, not circles.
Variant: Cyber Shield (PRIMARY for Security Metrics)¶
Security operations center aesthetic for threat monitoring dashboards.
variant_cyber_shield_dataviz:
id: "cyber_shield"
name: "Cyber Shield Data Viz"
description: "Security metrics dashboards, threat monitoring, SOC displays"
primary_use: "Security dashboards, threat intelligence, compliance monitoring"
inherits: "cyber_shield" # From readme.md
# Data Series Palette (Security-optimized)
data_series:
series_1: "{{red_500}}" # #ef4444 - Active threats
series_2: "{{sbk_sky}}" # #0ea5e9 - Monitored assets
series_3: "{{green_500}}" # #22c55e - Protected/clean
series_4: "{{amber_500}}" # #f59e0b - Warnings
series_5: "{{purple_500}}" # #a855f7 - Anomalies
series_6: "{{cyan_500}}" # #06b6d4 - Information
threat_critical: "{{threat_red}}" # #991b1b - Critical threats
threat_high: "{{red_600}}" # #dc2626 - High severity
threat_medium: "{{amber_500}}" # #f59e0b - Medium severity
threat_low: "{{green_500}}" # #22c55e - Low severity
baseline: "{{slate_600}}" # Normal operation baseline
anomaly: "{{purple_500}}" # Anomaly detection
# Grid System Integration
grid_system:
type: "cyber_grid"
outer_frame: "frame_glow"
outer_opacity: 0.4
inner_dividers: "frame_solid"
inner_opacity: 0.1
scan_lines: true
corner_brackets: true
glow_color: "{{red_600}}"
glow_radius: "8px"
# Chart-Specific Styling
chart_styles:
bar:
bar_width: "70%"
gap: "30%"
corner_radius: "2px"
glow_on_critical: true
line:
line_weight: "2px"
point_style: "diamond"
point_size: "6px"
area_opacity: 0.15
glow_effect: true
gauge:
arc_style: "180deg"
threat_zones: true
zone_colors: ["{{green_500}}", "{{amber_500}}", "{{red_600}}"]
glow_on_critical: true
heatmap:
cell_borders: true
glow_high_values: true
cell_gap: "2px"
kpi:
glow_effect: true
pulse_on_alert: true
bracket_style: true
# Real-time Elements
realtime_styling:
refresh_indicator: true
timestamp_display: "monospace"
pulse_animation: "threat-pulse"
scan_effect: true
status_glow: true
# Prompt Prefix
prompt_prefix: |
[STYLE: CYBER SHIELD DATA VIZ]
Color palette: Deep black (#0a0a0b) with threat red (#dc2626) and status greens.
Dark mode: Always. Security operations center aesthetic.
Grid: Cyber grid with corner brackets, scan line overlay at 2%.
Glow: Red glow on critical values, subtle glow on interactive elements.
Typography: Monospace for all data values, terminal aesthetic.
Real-time: Include refresh indicators, timestamp displays.
Status colors: Red=critical, Amber=warning, Green=normal, Cyan=info.
Corners: Sharp with bracket overlays at chart corners.
Data Visualization Philosophy¶
SBK data visualizations must: - Tell a story with clear narrative - Be accurate never misleading - Be accessible to non-technical audiences - Support decisions with actionable insights - Maintain brand consistency through variant system
Visualization Anti-Patterns¶
Never create: - 3D charts (distorts perception) - Pie charts with >5 segments - Dual Y-axes (confusing) - Truncated axes without indication - Chart junk (unnecessary decoration) - Rainbow color schemes
Color Palettes by Variant¶
Trusted Advisor (Executive Reporting)¶
palette_trusted_advisor:
variant: "trusted_advisor"
sequential:
light_to_dark:
- "{{slate_100}}" # #f1f5f9
- "{{slate_300}}" # #cbd5e1
- "{{sbk_blue}}" # #2563eb
- "{{sbk_navy}}" # #0f172a
- "{{slate_900}}" # #0f172a
usage: "Single metric intensity, executive heatmaps"
diverging:
negative_to_positive:
- "{{red_600}}" # #dc2626 (negative)
- "{{red_300}}" # #fca5a5
- "{{slate_100}}" # neutral
- "{{green_300}}" # #86efac
- "{{green_600}}" # #16a34a (positive)
usage: "Performance vs target, variance analysis"
categorical:
series:
- "{{sbk_blue}}" # #2563eb - Primary
- "{{slate_600}}" # #475569 - Secondary
- "{{teal_600}}" # #0d9488 - Tertiary
- "{{indigo_600}}" # #4f46e5 - Fourth
- "{{orange_600}}" # #ea580c - Fifth/Highlight
usage: "Category comparison, series differentiation"
max_categories: 5
Modern Partner (Client-Facing)¶
palette_modern_partner:
variant: "modern_partner"
sequential:
light_to_dark:
- "{{teal_100}}" # Light teal
- "{{teal_300}}" # Medium teal
- "{{teal_500}}" # #14b8a6
- "{{teal_600}}" # #0d9488
- "{{teal_700}}" # Dark teal
usage: "Collaborative metrics, progress indicators"
diverging:
negative_to_positive:
- "{{red_500}}" # #ef4444
- "{{red_200}}" # Light red
- "{{warm_cream}}" # #faf5f0 neutral
- "{{teal_200}}" # Light teal
- "{{teal_600}}" # #0d9488
usage: "Before/after comparisons, improvement metrics"
categorical:
series:
- "{{teal_600}}" # #0d9488 - Primary
- "{{cyan_600}}" # #0891b2 - Secondary
- "{{sbk_blue}}" # #2563eb - Tertiary
- "{{violet_500}}" # #8b5cf6 - Fourth
- "{{amber_500}}" # #f59e0b - Fifth
usage: "Client segments, collaborative analysis"
max_categories: 5
Bold Challenger (Sales Performance)¶
palette_bold_challenger:
variant: "bold_challenger"
sequential:
light_to_dark:
- "{{slate_200}}" # #e2e8f0
- "{{slate_400}}" # #94a3b8
- "{{slate_600}}" # #475569
- "{{slate_800}}" # #1e293b
- "{{slate_900}}" # #0f172a
usage: "Intensity metrics, market penetration"
diverging:
negative_to_positive:
- "{{red_600}}" # #dc2626
- "{{red_300}}" # Light red
- "{{white}}" # #ffffff neutral
- "{{orange_300}}" # Light orange
- "{{orange_600}}" # #ea580c (positive = aggressive)
usage: "Competitive position, win/loss analysis"
categorical:
series:
- "{{slate_900}}" # #0f172a - Primary
- "{{orange_600}}" # #ea580c - Highlight
- "{{slate_600}}" # #475569 - Secondary
- "{{slate_400}}" # #94a3b8 - Tertiary
- "{{orange_400}}" # Light accent
usage: "Sales comparison, competitive metrics"
max_categories: 5
Cyber Shield (Security Metrics)¶
palette_cyber_shield:
variant: "cyber_shield"
sequential:
threat_scale:
- "{{green_500}}" # #22c55e - Safe
- "{{green_400}}" # Light green
- "{{amber_400}}" # Warning
- "{{red_500}}" # #ef4444 - Threat
- "{{threat_dark}}" # #7f1d1d - Critical
usage: "Threat level indicators, risk heatmaps"
diverging:
security_status:
- "{{red_600}}" # #dc2626 - Compromised
- "{{red_400}}" # High risk
- "{{slate_600}}" # #475569 - Unknown
- "{{green_400}}" # Monitored
- "{{green_500}}" # #22c55e - Secure
usage: "Security posture, compliance status"
categorical:
series:
- "{{red_500}}" # #ef4444 - Threats
- "{{sbk_sky}}" # #0ea5e9 - Assets
- "{{green_500}}" # #22c55e - Protected
- "{{amber_500}}" # #f59e0b - Warnings
- "{{purple_500}}" # #a855f7 - Anomalies
usage: "Security categories, event types"
max_categories: 5
Sentinel Guard (AI Analytics)¶
palette_sentinel_guard:
variant: "sentinel_guard"
sequential:
ai_confidence:
- "{{purple_200}}" # Low confidence
- "{{purple_400}}" # Medium-low
- "{{purple_500}}" # #a855f7 - Medium
- "{{purple_600}}" # #9333ea - High
- "{{purple_700}}" # Very high
usage: "ML confidence scores, prediction strength"
diverging:
prediction_accuracy:
- "{{red_500}}" # #ef4444 - Underpredict
- "{{red_300}}" # Light red
- "{{purple_400}}" # Neutral/expected
- "{{green_300}}" # Light green
- "{{green_500}}" # #22c55e - Overpredict
usage: "Model accuracy, prediction variance"
categorical:
series:
- "{{purple_600}}" # #9333ea - Primary
- "{{violet_600}}" # #7c3aed - Secondary
- "{{fuchsia_500}}" # #d946ef - Tertiary
- "{{sbk_sky}}" # #0ea5e9 - Fourth
- "{{green_500}}" # #22c55e - Fifth
usage: "AI model comparison, algorithm metrics"
max_categories: 5
Clean Developer (Developer Tools)¶
palette_clean_developer:
variant: "clean_developer"
sequential:
code_coverage:
- "{{slate_100}}" # #f1f5f9 - None
- "{{indigo_200}}" # Low
- "{{indigo_400}}" # Medium
- "{{indigo_600}}" # #4f46e5 - High
- "{{indigo_700}}" # Complete
usage: "Code coverage, test metrics"
diverging:
performance:
- "{{red_500}}" # #ef4444 - Degraded
- "{{red_300}}" # Light red
- "{{slate_100}}" # #f1f5f9 - Baseline
- "{{green_300}}" # Light green
- "{{green_600}}" # #16a34a - Improved
usage: "Performance benchmarks, latency comparison"
categorical:
series:
- "{{indigo_600}}" # #4f46e5 - Primary
- "{{violet_600}}" # #7c3aed - Secondary
- "{{cyan_500}}" # #06b6d4 - Tertiary
- "{{slate_600}}" # #475569 - Fourth
- "{{amber_500}}" # #f59e0b - Fifth/Warning
usage: "API metrics, service comparison"
max_categories: 5
Blueprint Technical (Technical Data Viz)¶
palette_blueprint_technical:
variant: "blueprint_technical"
sequential:
engineering_scale:
- "{{slate_100}}" # #f1f5f9 - Minimum
- "{{slate_300}}" # #cbd5e1
- "{{sbk_blue}}" # #2563eb - Nominal
- "{{cyan_600}}" # #0891b2
- "{{sbk_navy}}" # #0f172a - Maximum
usage: "Engineering tolerances, specification ranges"
diverging:
variance:
- "{{red_600}}" # #dc2626 - Out of spec (low)
- "{{amber_400}}" # Warning (low)
- "{{slate_200}}" # #e2e8f0 - Nominal
- "{{amber_400}}" # Warning (high)
- "{{red_600}}" # Out of spec (high)
usage: "Tolerance analysis, specification compliance"
categorical:
series:
- "{{sbk_blue}}" # #2563eb - Primary
- "{{cyan_600}}" # #0891b2 - Secondary
- "{{slate_600}}" # #475569 - Tertiary
- "{{teal_600}}" # #0d9488 - Fourth
- "{{orange_600}}" # #ea580c - Annotation
usage: "System components, measurement categories"
max_categories: 5
Creative Clay (Creative Reports)¶
palette_creative_clay:
variant: "creative_clay"
sequential:
engagement_scale:
- "{{slate_200}}" # #e2e8f0 - Low
- "{{slate_400}}" # Medium-low
- "{{orange_400}}" # Medium
- "{{orange_500}}" # #f97316 - High
- "{{orange_600}}" # #ea580c - Very high
usage: "Engagement metrics, creative performance"
diverging:
sentiment:
- "{{red_500}}" # #ef4444 - Negative
- "{{red_300}}" # Light negative
- "{{cool_white}}" # #f8fafc - Neutral
- "{{amber_300}}" # Light positive
- "{{amber_500}}" # #f59e0b - Positive
usage: "Sentiment analysis, brand perception"
categorical:
series:
- "{{slate_900}}" # #0f172a - Primary
- "{{orange_500}}" # #f97316 - Accent
- "{{amber_500}}" # #f59e0b - Secondary accent
- "{{sbk_sky}}" # #0ea5e9 - Cool accent
- "{{slate_500}}" # #64748b - Neutral
usage: "Campaign comparison, creative metrics"
max_categories: 5
Chart Types with Token Integration¶
Bar Chart¶
[SBK BRAND DNA]
Professional technology consulting aesthetic. Clear, accurate, insightful.
[ASSET: CHART - BAR]
Standard bar chart for category comparison.
[CONFIGURATION]
variant: "{{active_variant}}"
grid_system: "{{grid_system}}"
frame_style: "{{frame_style}}"
[SPECIFICATIONS]
Orientation: Vertical (default) or Horizontal.
Bar width: 60-70% of available space.
Gap: 30-40% of bar width.
Min height: {{space_64}}.
[STYLING]
Primary data: {{data_series.series_1}}.
Secondary: {{data_series.series_2}}.
Tertiary: {{data_series.series_3}}.
Background: {{colors.background}}.
Gridlines: Horizontal only, {{colors.grid_secondary}}.
Axis: {{sizing_tokens.border_1}}, {{colors.text_secondary}}.
Border radius: {{visual.border_radius}}.
[TYPOGRAPHY]
Title: {{typography.heading_font}}, {{typography.title_size}}, {{typography.heading_weight}}.
Axis labels: {{typography.body_font}}, {{typography.axis_size}}.
Data labels: {{typography.data_font}}, {{typography.label_size}}.
[VARIANTS]
Grouped: Multiple series side-by-side.
Stacked: Parts of whole per category.
Stacked 100%: Proportional comparison.
[INTERACTION]
Hover: Tooltip with value and label.
Click: Optional drill-down.
Animation: {{motion_tokens.duration_slow}}, {{motion_tokens.ease_out}}.
[AVOID]
3D bars. Rounded tops (distorts).
Too many categories (>12).
Missing axis labels.
Line Chart¶
[ASSET: CHART - LINE]
Time series and trend visualization.
[CONFIGURATION]
variant: "{{active_variant}}"
grid_system: "{{grid_system}}"
[SPECIFICATIONS]
Line weight: {{chart_styles.line.line_weight}}.
Point markers: {{chart_styles.line.point_size}} diameter.
Point style: {{chart_styles.line.point_style}}.
Min height: {{space_64}}.
[STYLING]
Lines: {{data_series}} colors, distinguishable.
Points: Visible at each data point.
Area fill: Optional, {{chart_styles.line.area_opacity}} opacity.
Gridlines: {{colors.grid_secondary}}, horizontal and/or vertical.
[VARIANTS]
Basic line: Single or multi-series.
Area: Filled below line.
Stacked area: Multiple series stacked.
Sparkline: Minimal, inline chart.
[ANNOTATIONS]
Trend lines: Dashed, {{colors.text_muted}}.
Event markers: Vertical lines with labels.
Goal lines: Horizontal reference, {{data_series.target}}.
[AVOID]
Too many lines (>5 series).
Missing legends.
Inconsistent time intervals.
Pie/Donut Chart¶
[ASSET: CHART - PIE/DONUT]
Part-to-whole relationships.
[CONFIGURATION]
variant: "{{active_variant}}"
[SPECIFICATIONS]
Donut preferred over pie.
Donut hole: 50-60% of radius.
Max segments: 5 (use "Other" for rest).
[STYLING]
Colors: {{categorical.series}}.
Labels: Outside with connector lines.
Percentage: Display in label or on hover.
Border: {{sizing_tokens.border_1}} {{colors.surface}}.
[LAYOUT]
Chart: Center or left.
Legend: Right or below.
Key metric: Center of donut, {{typography.heading_font}}.
[AVOID]
3D pie charts.
Too many segments.
Similar colors adjacent.
Starting at non-12 o'clock.
Metric/KPI Card¶
[ASSET: CHART - KPI CARD]
Single metric display.
[CONFIGURATION]
variant: "{{active_variant}}"
grid_system: "{{grid_system}}"
frame_style: "{{frame_style}}"
[SPECIFICATIONS]
Card dimensions: Flexible, maintain ratio.
Metric size: Large, prominent.
Shadow: {{visual.shadow_style}}.
Border radius: {{visual.border_radius}}.
[ANATOMY]
Metric label: {{typography.body_font}}, {{text_secondary}}.
Value: {{typography.data_font}}, {{text_4xl}}, {{colors.text_primary}}.
Trend indicator: Arrow or percentage.
Comparison: vs. period or target.
Sparkline: Optional mini trend.
[VARIANTS]
Simple: Label + value.
With trend: Value + direction + %change.
With sparkline: Value + mini chart.
With gauge: Value + circular progress.
With target: Value vs. goal.
[STYLING]
Up trend: {{colors.success}}.
Down trend: {{colors.error}} or {{colors.success}} if lower is better.
Neutral: {{colors.text_muted}}.
Background: {{colors.surface}}.
Border: {{sizing_tokens.border_1}} {{colors.border}}.
Gauge Chart¶
[ASSET: CHART - GAUGE]
Progress toward goal or range indicator.
[CONFIGURATION]
variant: "{{active_variant}}"
[SPECIFICATIONS]
Arc: {{chart_styles.gauge.arc_style}}.
Thickness: 20-40px.
Pointer: Optional needle or filled arc.
Tick marks: {{chart_styles.gauge.tick_marks}}.
[ZONES]
Red zone: {{colors.error}} - Below threshold.
Yellow zone: {{colors.warning}} - Approaching target.
Green zone: {{colors.success}} - At or above target.
Or: Single color with progress using {{colors.primary}}.
[ANATOMY]
Current value: Center, {{typography.data_font}}, large.
Target: Indicated on scale.
Range labels: Min and max.
[AVOID]
Full 360 degrees gauges (hard to read).
Too many zones.
Missing context.
Scatter Plot¶
[ASSET: CHART - SCATTER]
Correlation and distribution.
[CONFIGURATION]
variant: "{{active_variant}}"
grid_system: "{{grid_system}}"
[SPECIFICATIONS]
Point size: {{chart_styles.scatter.point_size}}.
Point style: {{chart_styles.scatter.point_style}}.
Min dimensions: 400x400px.
[STYLING]
Points: {{data_series.series_1}} default.
Categories: {{categorical.series}} for different groups.
Quadrants: Light {{colors.surface}} zones.
Trend line: Dashed, with R squared if relevant.
[ANNOTATIONS]
Trend line: Shows correlation.
Quadrant labels: Named zones.
Outlier callouts: Notable points labeled.
[AVOID]
Overplotting (too many points overlapping).
Missing axis labels.
Unlabeled quadrants.
Heatmap¶
[ASSET: CHART - HEATMAP]
Two-dimensional intensity mapping.
[CONFIGURATION]
variant: "{{active_variant}}"
grid_system: "{{grid_system}}"
[SPECIFICATIONS]
Cell aspect ratio: Square or near-square.
Color scale: {{sequential}} palette.
Cell borders: {{chart_styles.heatmap.cell_borders}}.
Cell gap: {{chart_styles.heatmap.cell_gap}}.
[STYLING]
Color: Sequential palette from {{colors.background}} to {{colors.primary}}.
Borders: {{sizing_tokens.border_1}} {{colors.surface}}.
Labels: Cell values if space permits, {{typography.data_font}}.
[VARIANTS]
Calendar heatmap: Date-based activity.
Correlation matrix: Variable relationships.
Comparison heatmap: Category x Category.
[LEGEND]
Position: Right or bottom.
Continuous scale shown.
Min/max labels.
Dashboard Compositions¶
Executive Dashboard¶
[ASSET: DASHBOARD - EXECUTIVE]
High-level performance overview.
[CONFIGURATION]
variant: "trusted_advisor"
grid_system: "dashboard_grid"
frame_style: "frame_solid"
[LAYOUT]
KPI cards: Top row, 4-6 metrics.
Primary chart: Large, center focus.
Secondary charts: 2-3 supporting.
Time filter: Top right.
[CONTENT]
Focus on outcomes.
Trend context (vs. period).
Exception highlighting.
Drill-down capability.
[STYLING]
Background: {{colors.background}}.
Cards: {{colors.surface}} with {{shadow_tokens.shadow_md}}.
Spacing: {{spacing_tokens.space_6}} between cards.
Border radius: {{sizing_tokens.radius_lg}}.
Security Operations Dashboard¶
[ASSET: DASHBOARD - SECURITY]
Real-time security monitoring.
[CONFIGURATION]
variant: "cyber_shield"
grid_system: "cyber_grid"
frame_style: "frame_glow"
[LAYOUT]
Threat level: Top, prominent gauge.
Active alerts: Left panel with priority.
Asset status: Grid of monitored systems.
Event timeline: Bottom, scrolling.
[CONTENT]
Real-time threat indicators.
Severity-coded status.
Actionable alert details.
Response time metrics.
[STYLING]
Background: {{colors.background}}.
Glow effects: {{frame_tokens.frame_glow}}.
Scan lines: 2% opacity overlay.
Corner brackets: All primary panels.
Status pulse: Animation on critical items.
Technical Metrics Dashboard¶
[ASSET: DASHBOARD - TECHNICAL]
Engineering and performance monitoring.
[CONFIGURATION]
variant: "blueprint_technical"
grid_system: "technical_grid"
frame_style: "frame_dashed"
[LAYOUT]
System diagram: Top, schematic view.
Metrics grid: 3x3 key measurements.
Trend charts: Below, time-series.
Specification table: Right sidebar.
[CONTENT]
Engineering tolerances.
System performance metrics.
Trend analysis with baselines.
Specification compliance status.
[STYLING]
Background: {{colors.background}}.
Grid overlay: Technical grid at 15% opacity.
Corner marks: On all chart panels.
Typography: Monospace for all values.
Dimension lines: Between related metrics.
Operational Dashboard¶
[ASSET: DASHBOARD - OPERATIONAL]
Real-time operational monitoring.
[CONFIGURATION]
variant: "{{active_variant}}"
grid_system: "dashboard_grid"
[LAYOUT]
Status indicators: Top.
Real-time metrics: Prominent.
Activity feeds: Side.
Alert panel: Visible but not dominant.
[CONTENT]
Current state emphasis.
Threshold indicators.
Recent activity.
Quick actions.
[STYLING]
Functional over aesthetic.
Clear status colors using {{colors.success}}, {{colors.warning}}, {{colors.error}}.
Refresh indicators.
Analytical Dashboard¶
[ASSET: DASHBOARD - ANALYTICAL]
Deep-dive analysis view.
[CONFIGURATION]
variant: "clean_developer"
grid_system: "minimal_grid"
[LAYOUT]
Filters: Left sidebar or top.
Charts: Multiple, interconnected.
Detail tables: Below charts.
Export controls: Available.
[CONTENT]
Multiple dimensions.
Interactive filtering.
Drill-down paths.
Data tables.
[FEATURES]
Cross-filtering.
Dimension switching.
Date range selection.
Comparison periods.
Infographic Elements¶
Process Flow Visualization¶
[ASSET: INFOGRAPHIC - PROCESS]
Step-by-step process visualization.
[CONFIGURATION]
variant: "{{active_variant}}"
grid_system: "{{grid_system}}"
[SPECIFICATIONS]
Horizontal or vertical layout.
3-7 steps optimal.
[STYLING]
Step containers: {{visual.border_radius}}, {{colors.surface}}.
Connectors: Arrows in {{colors.primary}} or lines in {{colors.border}}.
Numbers: {{colors.primary}}, {{typography.heading_font}}.
Icons: {{colors.primary}}, reinforce each step.
[CONTENT]
Step title: {{typography.heading_weight}}, short.
Description: 1-2 sentences, {{typography.body_font}}.
Icon: Visual reinforcement.
Metrics: Optional per-step.
Comparison Infographic¶
[ASSET: INFOGRAPHIC - COMPARISON]
Before/after or option comparison.
[CONFIGURATION]
variant: "{{active_variant}}"
[SPECIFICATIONS]
Side-by-side or sequential layout.
Clear differentiation.
[VARIANTS]
Before/After: Transformation story.
Option A vs B: Decision support.
Current vs Target: Gap analysis.
Us vs Them: Competitive comparison.
[STYLING]
Clear visual separation.
Consistent metrics compared.
Winner/better clearly indicated using {{colors.success}}.
Negative using {{colors.error}}.
Statistics Infographic¶
[ASSET: INFOGRAPHIC - STATS]
Key statistics showcase.
[CONFIGURATION]
variant: "{{active_variant}}"
[SPECIFICATIONS]
3-5 key statistics.
Hierarchy of importance.
[ANATOMY]
Large numbers: Primary focus, {{typography.data_font}}, {{text_5xl}}.
Context labels: {{colors.text_secondary}}.
Icons: {{colors.primary}}, visual reinforcement.
Source: Citation if applicable, {{text_xs}}.
[LAYOUT]
Row or grid.
Visual flow left-to-right or top-to-bottom.
Most important first.
Industry-Specific Visualizations¶
Security/Compliance¶
[CONTEXT: SECURITY DATA VIZ]
Security metrics and compliance status.
[CONFIGURATION]
variant: "cyber_shield"
grid_system: "cyber_grid"
[COMMON CHARTS]
Risk matrix: Heatmap of likelihood x impact.
Compliance score: Gauge or percentage.
Vulnerability trends: Line over time.
Remediation progress: Stacked bar.
Threat breakdown: Donut by category.
[COLOR CONSIDERATIONS]
Severity scale: {{palette_cyber_shield.sequential.threat_scale}}.
Status colors: {{palette_cyber_shield.categorical.series}}.
Accessible alternatives required.
Do not rely on color alone.
IT Operations¶
[CONTEXT: IT OPERATIONS DATA VIZ]
Infrastructure and operations metrics.
[CONFIGURATION]
variant: "blueprint_technical"
grid_system: "technical_grid"
[COMMON CHARTS]
System uptime: Percentage gauge.
Ticket volume: Bar over time.
Response times: Line chart.
Capacity utilization: Stacked area.
Incident breakdown: Donut.
[REAL-TIME ELEMENTS]
Auto-refresh indicators.
Time-based filters.
Live status colors using {{colors.success}}, {{colors.warning}}, {{colors.error}}.
Financial¶
[CONTEXT: FINANCIAL DATA VIZ]
Budget, cost, and ROI visualization.
[CONFIGURATION]
variant: "trusted_advisor"
grid_system: "subtle_grid"
[COMMON CHARTS]
Budget vs actual: Grouped bar.
Cost breakdown: Waterfall or donut.
Trend analysis: Line with forecast.
ROI projection: Area with scenarios.
Savings identification: Bar with highlight.
[CONSIDERATIONS]
Currency formatting.
Fiscal year alignment.
Variance highlighting using {{palette_trusted_advisor.diverging}}.
Accessibility for Data Viz¶
Color Independence¶
accessibility_requirements:
patterns: "Use patterns in addition to color"
labels: "Direct labels over legends when possible"
contrast: "Sufficient contrast between elements"
alt_text: "Comprehensive descriptions for screen readers"
# Contrast ratios (WCAG 2.1)
text_contrast: "4.5:1 minimum for normal text"
large_text_contrast: "3:1 minimum for large text (18px+)"
ui_contrast: "3:1 minimum for UI components"
Accessible Alternatives¶
alternative_formats:
data_tables: "Provide underlying data in table format"
descriptions: "Text summary of key insights"
sonification: "Audio representation option"
export: "CSV/Excel download available"
Animation Guidelines¶
Chart Animations¶
animation_guidelines:
entrance:
type: "Progressive reveal"
duration: "{{motion_tokens.duration_slower}}"
easing: "{{motion_tokens.ease_out}}"
stagger: "{{motion_tokens.duration_fast}} between elements"
transitions:
type: "Smooth morph"
duration: "{{motion_tokens.duration_slow}}"
easing: "{{motion_tokens.ease_in_out}}"
interactions:
hover: "{{motion_tokens.duration_instant}}"
tooltip: "{{motion_tokens.duration_normal}} delay, {{motion_tokens.duration_fast}} show"
respect_preferences:
prefers_reduced_motion: "Disable or simplify"
Quality Checklist¶
Before publishing any data visualization:
- Data is accurate and verified
- Chart type appropriate for data
- Clear title and axis labels
- Legend included if needed
- Source cited
- Accessible (color + pattern, alt text)
- Responsive or appropriate sizing
- Brand variant correctly applied
- Token references resolve correctly
- Grid system appropriate for context
- No misleading elements
- Key insight clearly communicated
Connection to Templates¶
Reference: Templates
template_integration:
reports:
executive_summary:
variant: "trusted_advisor"
charts: "KPI cards + trend chart"
detailed_findings:
variant: "blueprint_technical"
charts: "Multiple chart types"
security_report:
variant: "cyber_shield"
charts: "Threat dashboards + compliance gauges"
appendix: "Data tables with source"
presentations:
single_chart_slide: "One chart, one insight"
dashboard_slide: "Multiple metrics"
comparison_slide: "Before/after or A vs B"
proposals:
current_state:
variant: "bold_challenger"
charts: "Pain point visualization"
solution_impact: "Projected improvement"
investment: "Cost breakdown"
Last Updated: February 2026 Version: 2.0