Infographic Design Prompts

Comprehensive prompt templates for educational, statistical, process, and comparison infographics

Created: February 2026 Tool: Nano Banana Pro / Infographic Studio Related: Framework Overview | Data Visualization | Illustrations

---

Design System Configuration

# INFOGRAPHIC DESIGN SYSTEM CONFIGURATION
# Inherits from: ./readme.md (SBK Generative Prompts Framework v2.0)

infographic_config:
  schema_version: "2.0"
  parent_config: "./readme.md"

  # Active variant (inherited from parent or override here)
  active_variant: "{{active_configuration.variant}}"

  # Grid system for infographics
  grid_system: "{{active_configuration.layout.grid_system}}"

  # Frame style for containers and sections
  frame_style: "{{active_configuration.layout.frame_style}}"

  # Mode settings
  dark_mode: "{{active_configuration.mode.dark_mode}}"

  # Infographic-specific overrides
  infographic_defaults:
    grid_system: "structured_grid"
    frame_style: "frame_solid"
    section_spacing: "{{spacing_tokens.space_12}}"
    content_density: "balanced"

Token Reference

All infographic assets use the following parameterized tokens from the parent design system:

Token Path	Description	Example Resolution
{{colors.primary}}	Primary brand color	#2563eb (trusted_advisor)
{{colors.accent}}	Accent/highlight color	#0ea5e9 (trusted_advisor)
{{colors.background}}	Canvas background	#f8fafc (trusted_advisor)
{{colors.text_primary}}	Primary text color	#0f172a (trusted_advisor)
{{colors.border}}	Border/divider color	#e2e8f0 (trusted_advisor)
{{typography.heading_font}}	Heading font stack	Inter, SF Pro Display
{{typography.body_font}}	Body font stack	Inter, SF Pro Display
{{typography.heading_weight}}	Heading font weight	600 (semibold)
{{sizing_tokens.radius_lg}}	Border radius	0.5rem (8px)
{{shadow_tokens.shadow_md}}	Card shadow	Standard medium shadow

---

Infographic Philosophy

SBK infographics must: - Simplify complex information into digestible visuals - Tell a clear story with logical flow - Maintain accuracy while being visually engaging - Provide value that encourages sharing - Represent data honestly without manipulation

Infographic Anti-Patterns

Never create: - Misleading data visualizations - Information overload without hierarchy - Decorative elements that obscure meaning - Unsourced statistics or claims - Poor contrast or unreadable text

---

Variant Recommendations by Infographic Type

Different infographic types benefit from specific design system variants:

variant_recommendations:
  statistical:
    primary: "trusted_advisor"
    alternative: "clean_developer"
    grid: "structured_grid"
    frame: "frame_solid"
    rationale: "Data credibility requires professional, authoritative aesthetic"

  process:
    primary: "modern_partner"
    alternative: "clean_developer"
    grid: "minimal_grid"
    frame: "frame_solid"
    rationale: "Flow and collaboration emphasized through warm, progressive styling"

  comparison:
    primary: "bold_challenger"
    alternative: "trusted_advisor"
    grid: "structured_grid"
    frame: "frame_solid"
    rationale: "Clear differentiation benefits from high-contrast, decisive styling"

  timeline:
    primary: "trusted_advisor"
    alternative: "creative_clay"
    grid: "editorial_grid"
    frame: "frame_solid"
    rationale: "Historical narratives need stable, established visual language"

  educational:
    primary: "clean_developer"
    alternative: "modern_partner"
    grid: "subtle_grid"
    frame: "frame_solid"
    rationale: "Learning content requires clarity and developer-like precision"

  geographic:
    primary: "cyber_shield"
    alternative: "trusted_advisor"
    grid: "dashboard_grid"
    frame: "frame_glow"
    rationale: "Threat maps and regional data benefit from security-focused aesthetic"

  technical:
    primary: "blueprint_technical"
    alternative: "cyber_shield"
    grid: "technical_grid"
    frame: "frame_dashed"
    rationale: "Engineering diagrams require CAD-inspired precision and annotation style"

---

Grid System Reference

Select the appropriate grid system based on content type and density:

grid_systems_for_infographics:
  minimal_grid:
    description: "No visible grid, pure content focus"
    use_cases: ["simple educational", "single-concept explainers", "quote graphics"]
    outer_frame: false
    inner_dividers: false
    cell_borders: false

  subtle_grid:
    description: "Barely visible structure for sophisticated layouts"
    use_cases: ["educational content", "tip sheets", "how-to guides"]
    outer_frame: "{{frame_tokens.frame_solid}}"
    outer_opacity: 0.1
    inner_dividers: "{{frame_tokens.frame_dotted}}"
    inner_opacity: 0.05

  structured_grid:
    description: "Clear structure for data-heavy layouts"
    use_cases: ["statistical infographics", "comparison charts", "multi-section reports"]
    outer_frame: "{{frame_tokens.frame_solid}}"
    outer_opacity: 0.2
    inner_dividers: "{{frame_tokens.frame_solid}}"
    inner_opacity: 0.1

  technical_grid:
    description: "Blueprint/technical drawing aesthetic"
    use_cases: ["architecture diagrams", "technical specifications", "engineering content"]
    outer_frame: "{{frame_tokens.frame_solid}}"
    outer_opacity: 0.3
    inner_dividers: "{{frame_tokens.frame_dashed}}"
    inner_opacity: 0.15
    cell_borders: "{{frame_tokens.frame_dotted}}"
    cell_opacity: 0.1
    corner_marks: true
    ruler_ticks: true
    dimension_lines: true

  editorial_grid:
    description: "Magazine/editorial layout structure"
    use_cases: ["timeline infographics", "narrative content", "feature stories"]
    outer_frame: "{{frame_tokens.frame_double}}"
    outer_opacity: 0.15
    inner_dividers: "{{frame_tokens.frame_solid}}"
    inner_opacity: 0.08
    column_rules: true

  dashboard_grid:
    description: "Card-based dashboard layouts"
    use_cases: ["geographic data", "multi-metric displays", "KPI summaries"]
    outer_frame: false
    inner_dividers: false
    cell_borders: "{{frame_tokens.frame_solid}}"
    cell_opacity: 0.12
    cell_radius: "{{sizing_tokens.radius_lg}}"

  cyber_grid:
    description: "Security/cyber operations aesthetic"
    use_cases: ["threat data", "security metrics", "incident timelines"]
    outer_frame: "{{frame_tokens.frame_glow}}"
    outer_opacity: 0.4
    inner_dividers: "{{frame_tokens.frame_solid}}"
    inner_opacity: 0.1
    scan_lines: true
    corner_brackets: true

---

Frame Style Options

Frame styles define the visual treatment of containers and sections:

frame_styles:
  solid:
    style: "solid"
    weight: "1px"
    color: "{{colors.border}}"
    opacity: 1.0
    description: "Clean solid lines for professional structure"
    css: "border: 1px solid {{colors.border}}"

  dotted:
    style: "dotted"
    weight: "1px"
    spacing: "4px"
    color: "{{colors.border}}"
    opacity: 0.6
    description: "Subtle dotted lines for technical/draft feel"
    css: "border: 1px dotted {{colors.border}}"

  dashed:
    style: "dashed"
    weight: "1px"
    dash_length: "8px"
    gap_length: "4px"
    color: "{{colors.border}}"
    opacity: 0.7
    description: "Dashed lines for dynamic structure"
    css: "border: 1px dashed {{colors.border}}"

  double:
    style: "double"
    weight: "3px"
    color: "{{colors.border}}"
    opacity: 1.0
    description: "Double lines for emphasis and premium feel"
    css: "border: 3px double {{colors.border}}"

  gradient:
    style: "gradient"
    weight: "2px"
    from: "{{colors.primary}}"
    to: "{{colors.accent}}"
    opacity: 0.8
    description: "Gradient borders for modern/dynamic feel"
    css: "border: 2px solid; border-image: linear-gradient(135deg, {{colors.primary}}, {{colors.accent}}) 1"

  glow:
    style: "solid"
    weight: "1px"
    glow_radius: "8px"
    glow_color: "{{colors.accent}}"
    glow_opacity: 0.3
    description: "Subtle glow effect for tech/cyber aesthetic"
    css: "border: 1px solid {{colors.accent}}; box-shadow: 0 0 8px {{colors.accent}}40"

---

Blueprint Technical Variant

Special configuration for technical/engineering infographics using the blueprint_technical variant:

blueprint_technical_variant:
  id: "blueprint_technical"
  name: "Blueprint Technical"
  description: "Engineering drawing aesthetic with CAD-inspired precision"
  inspiration: "AlignUI design system, technical documentation"

  colors:
    primary: "#1C1C1C"
    accent: "#F05023"
    background: "#FAFAFA"
    grid_lines: "#E5E5E5"
    annotation: "#666666"
    dimension: "#1C1C1C"

  special_elements:
    ruler_ticks:
      enabled: true
      interval: "10px"
      major_tick_height: "8px"
      minor_tick_height: "4px"
      color: "{{colors.grid_lines}}"
      label_font: "{{typography.font_mono}}"
      label_size: "{{typography.text_xs}}"

    dimension_lines:
      enabled: true
      line_weight: "1px"
      line_style: "solid"
      arrow_style: "technical"
      color: "{{colors.dimension}}"
      label_font: "{{typography.font_mono}}"
      label_size: "{{typography.text_sm}}"
      offset_from_object: "16px"

    cad_annotations:
      enabled: true
      callout_style: "leader-line"
      leader_line_weight: "0.5px"
      bubble_style: "circle"
      bubble_size: "24px"
      font: "{{typography.font_mono}}"
      font_size: "{{typography.text_xs}}"
      color: "{{colors.annotation}}"

    corner_marks:
      enabled: true
      size: "12px"
      weight: "1px"
      color: "{{colors.primary}}"

    grid_pattern:
      major_grid: "100px"
      minor_grid: "20px"
      major_opacity: 0.15
      minor_opacity: 0.05
      color: "{{colors.grid_lines}}"

  prompt_prefix: |
    [STYLE: BLUEPRINT TECHNICAL]
    Color palette: Near-black (#1C1C1C) with engineering orange (#F05023) accents on off-white (#FAFAFA).
    Mood: Technical precision, engineering documentation, CAD drawing aesthetic.
    Grid: Visible measurement grid with ruler ticks at edges.
    Annotations: Technical callouts with leader lines and numbered bubbles.
    Dimension lines: Architectural dimension notation for measurements.
    Typography: Monospace for measurements and labels, clean sans for content.
    Corners: Sharp with technical corner marks.
    Lines: Precise, consistent weights (0.5px, 1px, 2px hierarchy).

  use_cases:
    - "Technical architecture diagrams"
    - "System specification documents"
    - "Process engineering flows"
    - "Component breakdowns"
    - "Measurement and sizing guides"
    - "Hardware specifications"
    - "Network topology diagrams"

---

Infographic Types

Statistical Infographic

[SBK BRAND DNA]
Professional technology consulting. Data-driven, trustworthy, illuminating.

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[GRID: {{grid_system}}]
{{grid_frame_systems[grid_system].description}}
Frame style: {{frame_style}} at recommended opacity.

[ASSET: INFOGRAPHIC - STATISTICAL]
Data-heavy information visualization.

[SPECIFICATIONS]
Dimensions:
  - Web: 800-1200px wide, variable height.
  - Print: 8.5x11" or 11x17".
  - Social: Platform-specific (see below).

[STRUCTURE]
Header (10-15%):
  - Compelling title using {{typography.heading_font}} at {{typography.text_4xl}}.
  - Subtitle with context using {{typography.body_font}}.
  - SBK branding with {{colors.primary}}.

Key Stats Section (20-30%):
  - Hero statistics (2-4).
  - Large numbers using {{typography.text_6xl}} with {{typography.heading_weight}}.
  - Context text in {{colors.text_secondary}}.
  - Icons or mini visualizations in {{colors.accent}}.

Data Body (40-50%):
  - Primary visualizations using {{colors.primary}} and {{colors.accent}}.
  - Supporting statistics.
  - Explanatory text in {{typography.body_font}}.
  - Section dividers using {{frame_style}}.

Conclusion (10-15%):
  - Key takeaways highlighted with {{colors.accent}}.
  - CTA or next steps.

Footer (5-10%):
  - Sources in {{typography.text_sm}}.
  - Branding using {{colors.primary}}.
  - Share/download info.

[DATA VISUALIZATION RULES]
Charts: Simple, labeled clearly using {{typography.font_mono}} for data labels.
Numbers: Large for key stats using {{colors.primary}} for emphasis.
Context: Always provide comparison.
Sources: Cite all data in {{colors.text_muted}}.

[EXAMPLE USE CASES]
Industry benchmarks.
Survey results.
Market research findings.
Security threat statistics.
Compliance audit data.

Process Infographic

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[GRID: {{grid_system}}]
{{grid_frame_systems[grid_system].description}}

[ASSET: INFOGRAPHIC - PROCESS]
Step-by-step workflow visualization.

[SPECIFICATIONS]
Layout options:
  - Vertical: Steps flow down.
  - Horizontal: Timeline style.
  - Circular: Cyclical process.
  - Branching: Decision-based flow.

[STRUCTURE]
Start: Clear beginning point marked with {{colors.primary}}.
Steps: Numbered or connected stages using {{frame_style}}.
Details: Sub-information per step in {{colors.text_secondary}}.
End: Clear outcome with {{colors.accent}} highlight.

[DESIGN ELEMENTS]
Connectors: Arrows in {{colors.primary}}, lines in {{colors.border}}.
Icons: Represent each step using brand icon style.
Numbers: Step indicators in {{typography.heading_font}} at {{typography.text_2xl}}.
Color: Progression coding using gradient from {{colors.primary}} to {{colors.accent}}.

[STEP ANATOMY]
Icon: Visual representation sized 48-64px.
Number: Step position in {{typography.heading_weight}}.
Title: Brief action verb in {{typography.text_lg}}.
Description: 1-2 sentences in {{typography.body_font}}.
Duration: Time estimate in {{typography.text_sm}} with {{colors.text_muted}}.

[EXAMPLE USE CASES]
Onboarding process.
Service delivery methodology.
Compliance certification path.
Incident response procedure.
Cloud migration journey.

Comparison Infographic

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[GRID: structured_grid]
Clear structure for comparison layouts with visible dividers.

[ASSET: INFOGRAPHIC - COMPARISON]
Side-by-side or versus visualizations.

[TYPES]
Two-way: A vs. B direct comparison.
Multi-way: 3+ options compared.
Before/After: State transformation.
With/Without: Impact visualization.

[LAYOUT OPTIONS]
Split: Vertical divide using {{frame_style}} at 0.2 opacity.
Table: Grid using {{grid_system}} structure.
Overlapping: Venn-style with {{colors.primary}} and {{colors.accent}}.
Stacked: Sequential comparison with section borders.

[COMPARISON ELEMENTS]
Features: Listed in {{typography.body_font}}.
Ratings: Visual scoring using {{colors.primary}} fill.
Icons: Checkmarks in {{colors.success}}, X's in {{colors.error}}.
Callouts: Key differentiators highlighted with {{colors.accent}}.

[DESIGN RULES]
Equal weight: Fair visual treatment on both sides.
Clear labels: Headers in {{typography.heading_font}}.
Honest: Don't skew toward preferred option.
Scannable: Quick to understand with clear hierarchy.

[EXAMPLE USE CASES]
SBK vs. competitors.
Before/after SBK engagement.
Security frameworks comparison.
Technology stack options.
Build vs. buy decisions.

Timeline Infographic

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[GRID: editorial_grid]
Magazine-style layout with strong vertical rhythm.

[ASSET: INFOGRAPHIC - TIMELINE]
Chronological sequence visualization.

[LAYOUT OPTIONS]
Horizontal: Left to right timeline with {{frame_style}} connectors.
Vertical: Top to bottom scroll.
Alternating: Events zigzag pattern.
Compressed: Focus on key moments with expanded details.

[TIMELINE ELEMENTS]
Axis: Time scale in {{typography.font_mono}} at {{typography.text_sm}}.
Events: Points on timeline marked with {{colors.primary}}.
Connectors: Lines in {{colors.border}} using {{frame_style}}.
Labels: Dates in {{typography.text_sm}}, descriptions in {{typography.body_font}}.

[EVENT ANATOMY]
Date: When it occurred in {{typography.heading_weight}}.
Title: What happened in {{typography.text_lg}}.
Description: Brief explanation in {{colors.text_secondary}}.
Visual: Icon or image sized 32-48px.
Emphasis: Key events larger with {{colors.accent}} highlight.

[TIME SCALES]
Years/decades: Long-term trends.
Months/quarters: Project timelines.
Days/weeks: Sprint or phase view.
Hours: Incident response (use {{variant_cyber_shield}} for these).

[EXAMPLE USE CASES]
Company history.
Project milestones.
Technology evolution.
Client journey map.
Incident timeline.

Educational Infographic

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[GRID: subtle_grid]
Barely visible structure to support learning content.

[ASSET: INFOGRAPHIC - EDUCATIONAL]
Learning and explainer content.

[TYPES]
How-to: Step-by-step instructions.
Explainer: Concept breakdown.
Tips: Quick advice format.
Myths vs. Facts: Misconception correction.
Anatomy: Parts and components.

[STRUCTURE]
Hook: Why should they care? Large text in {{typography.heading_font}}.
Problem: Current state using {{colors.text_secondary}}.
Solution: The information in {{colors.primary}} emphasis.
Proof: Evidence with data callouts.
Action: What to do next with {{colors.accent}} CTA.

[DESIGN APPROACH]
Clear hierarchy: Most important first using {{typography.text_4xl}} to {{typography.text_base}} scale.
Chunked: Digestible sections with {{spacing_tokens.space_8}} between.
Visual: Icons and illustrations in brand style.
Scannable: Headers using {{typography.heading_weight}} and bullet points.

[EDUCATIONAL ELEMENTS]
Icons: Visual concept representation sized 48px.
Callout boxes: Key information with {{colors.background}} fill and {{frame_style}} border.
Numbered lists: Sequential info with {{colors.primary}} numbers.
Comparison: Right vs. wrong using {{colors.success}} and {{colors.error}}.

[EXAMPLE USE CASES]
Cybersecurity best practices.
Compliance requirements explained.
Technology concept explainers.
Risk assessment guides.
Cost optimization tips.

Geographic Infographic

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[GRID: dashboard_grid]
Card-based layout for regional data displays.

[ASSET: INFOGRAPHIC - GEOGRAPHIC]
Location and regional data visualization.

[TYPES]
Heat maps: Intensity by region using gradient from {{colors.success}} to {{colors.error}}.
Dot maps: Event/location markers using {{colors.primary}}.
Flow maps: Movement with {{colors.accent}} directional arrows.
Comparison: Regional differences with color-coded areas.

[MAP ELEMENTS]
Base map: Simplified geography in {{colors.slate_200}}.
Data overlay: Color using {{colors.primary}}, {{colors.accent}}, semantic colors.
Legend: Key in {{typography.text_sm}} with {{frame_style}} container.
Labels: Key locations in {{typography.heading_font}}.

[DESIGN RULES]
Simplify: Essential geography only.
Accessibility: Pattern + color indicators.
Scale: Appropriate zoom level for data density.
Legend: Always include with clear hierarchy.

[EXAMPLE USE CASES]
Client locations.
Threat origin data (use {{variant_cyber_shield}}).
Compliance by region.
Service availability.
Market expansion.

---

Design Elements

Layout Structure

[ASSET: INFOGRAPHIC - LAYOUT]
Compositional frameworks using {{grid_system}}.

[VERTICAL LAYOUTS]
Single column: Scrolling narrative with {{spacing_tokens.space_12}} section spacing.
Two column: Parallel information with {{frame_style}} divider.
Feature + sidebar: Main (66%) + supplementary (33%).

[GRID SYSTEMS]
12-column: Web-friendly using {{grid_tokens.columns_12}}.
Modular: Card-based sections with {{sizing_tokens.radius_lg}} corners.
Asymmetric: Dynamic interest with 60-40 or 70-30 splits.

[VISUAL FLOW]
Z-pattern: Natural eye movement for general audiences.
F-pattern: Scanning optimization for text-heavy content.
Sequential: Numbered progression using {{colors.primary}} indicators.
Hub-spoke: Central concept outward for relationship diagrams.

[SECTION SPACING]
Headers: {{spacing_tokens.space_10}} above.
Between sections: {{spacing_tokens.space_12}}.
Within sections: {{spacing_tokens.space_6}}.
Content grouping: {{spacing_tokens.space_4}}.

Typography

[ASSET: INFOGRAPHIC - TYPOGRAPHY]
Text styling using {{typography}} tokens.

[HIERARCHY]
Main title: {{typography.text_5xl}}, {{typography.heading_weight}}.
Section headers: {{typography.text_3xl}}, {{typography.heading_weight}}.
Subheaders: {{typography.text_xl}}, {{typography.weight_medium}}.
Body text: {{typography.text_base}}, {{typography.body_weight}}.
Data labels: {{typography.text_sm}}, {{typography.font_mono}}.
Captions: {{typography.text_xs}}, {{typography.weight_light}}.

[STATISTICS]
Large numbers: {{typography.text_7xl}}, {{typography.weight_bold}}, {{colors.primary}}.
Units: {{typography.text_3xl}}, {{typography.weight_regular}}, {{colors.text_secondary}}.
Context: {{typography.text_base}}, {{typography.body_weight}}.

[TEXT RULES]
Line length: 45-75 characters.
Line height: {{typography.leading_normal}}.
Contrast: Minimum 4.5:1 per WCAG AA.
Alignment: Left or center based on layout and variant.

[EMPHASIS]
Bold: Key terms using {{typography.weight_bold}}.
Color: Important data in {{colors.accent}}.
Size: Hierarchy indication.
Avoid: All caps for long text.

Color Usage

[ASSET: INFOGRAPHIC - COLOR]
Color strategy using {{colors}} tokens.

[COLOR PURPOSES]
Categorical: Different groups using {{colors.primary}}, {{colors.accent}}, {{colors.secondary}}.
Sequential: Low to high using opacity scale of {{colors.primary}}.
Diverging: Good/bad using {{colors.success}} to {{colors.error}}.
Highlight: Drawing attention with {{colors.accent}}.

[BRAND INTEGRATION]
Primary: {{colors.primary}} for emphasis and key elements.
Secondary: {{colors.secondary}} for supporting data.
Neutral: {{colors.background}}, {{colors.text_primary}}, {{colors.text_secondary}}.
Semantic: {{colors.error}} for negative, {{colors.success}} for positive.

[DATA VISUALIZATION COLORS]
Distinct: Easily differentiated palette.
Accessible: Colorblind-friendly combinations.
Consistent: Same meaning throughout infographic.
Limited: 5-7 colors maximum.

[BACKGROUND COLORS]
Light: {{colors.background}} or {{colors.surface}}.
Section alternation: {{colors.surface_elevated}} for contrast.
Dark sections: {{colors.primary_dark}} for emphasis.

Iconography

[ASSET: INFOGRAPHIC - ICONS]
Icon usage following brand standards.

[PURPOSE]
Quick recognition: Concept at a glance.
Visual interest: Break up text blocks.
Categorization: Group similar items.
Metaphor: Abstract concept representation.

[STYLE REQUIREMENTS]
Consistent: Same icon set throughout.
Simple: Not overly detailed.
Sized: Large enough to read at intended display size.
Colored: {{colors.primary}} or {{colors.accent}} from active variant.

[COMMON ICONS NEEDED]
Security: Shield, lock, key.
Data: Chart, database, cloud.
Process: Arrows, gears, flow.
People: Users, teams, roles.
Warning: Alert, caution, stop.
Success: Check, thumbs up, target.

[SIZE GUIDELINES]
Hero icons: 64-128px.
Section icons: 32-48px.
Inline icons: 16-24px.

Data Visualization

[ASSET: INFOGRAPHIC - DATA VIZ]
Charts and data displays.

[CHART SELECTION]
Comparison: Bar chart using {{colors.primary}} fills.
Trend: Line chart with {{colors.primary}} line, {{colors.accent}} highlights.
Proportion: Pie/donut (use sparingly) with brand color palette.
Distribution: Histogram with {{colors.primary}} bars.
Relationship: Scatter plot with {{colors.primary}} dots.
Part-to-whole: Treemap with semantic color coding.

[DESIGN RULES]
Start at zero: Bar charts especially.
Label clearly: Axes in {{typography.font_mono}}, {{typography.text_sm}}.
Simplify: Remove chartjunk.
Color meaningfully: Not decoratively.
Provide context: Benchmarks using {{frame_style}} indicators.

[ALTERNATIVE VISUALIZATIONS]
Icon arrays: Proportions with repeated icons in {{colors.primary}}.
Progress bars: Completion using {{colors.primary}} fill with {{colors.border}} track.
Gauges: Performance metrics with {{colors.success}}/{{colors.warning}}/{{colors.error}}.
Number callouts: Key statistics in {{typography.text_6xl}}.

[ACCESSIBILITY]
Patterns: In addition to color for differentiation.
Labels: Direct labels, not just legend.
Alt text: Describe the data for screen readers.

---

Size Specifications

Web Infographics

web_sizes:
  blog_embed:
    width: "800-1000px"
    height: "Variable (2000-5000px typical)"
    format: "PNG, SVG for quality"
    grid: "{{grid_system}}"

  landing_page:
    width: "1200px max"
    height: "Fits viewport sections"
    format: "SVG or optimized PNG"
    grid: "{{grid_system}}"

  email_embed:
    width: "600px max"
    height: "Limited, link to full"
    format: "Optimized PNG"
    grid: "structured_grid"

Social Media Infographics

social_sizes:
  linkedin:
    feed: "1200x1200px (1:1) or 1080x1350px (4:5)"
    carousel: "1080x1080px per slide"
    document: "1280x720px (16:9)"

  twitter:
    single: "1200x675px (16:9)"
    summary: "800x800px (1:1)"

  instagram:
    feed: "1080x1080px or 1080x1350px"
    carousel: "1080x1080px per slide"
    stories: "1080x1920px (9:16)"

  facebook:
    post: "1200x630px"
    square: "1080x1080px"

Print Infographics

print_sizes:
  letter: "8.5x11 inches"
  tabloid: "11x17 inches"
  poster: "24x36 inches"
  a4: "210x297mm"
  a3: "297x420mm"

  specifications:
    resolution: "300 dpi minimum"
    color_mode: "CMYK"
    bleed: "0.125 inches"
    format: "PDF/X-1a"

---

Industry-Specific Templates

Cybersecurity Infographics

[CONTEXT: SECURITY INFOGRAPHIC]
Security-focused information design.

[RECOMMENDED VARIANT: cyber_shield]
Use {{variant_cyber_shield.prompt_prefix}} for threat data.
Alternative: {{variant_sentinel_guard}} for AI-focused security.

[GRID SYSTEM: cyber_grid]
Visible technical grid with corner brackets and scan line texture.

[COMMON TOPICS]
Threat landscape overviews.
Attack chain explanations.
Security framework comparisons.
Best practices guides.
Incident statistics.
Compliance requirements.

[VISUAL ELEMENTS]
Icons: Shields in {{colors.primary}}, locks, threat indicators in {{colors.error}}.
Colors: {{colors.error}} for danger, {{colors.success}} for safe.
Diagrams: Attack flows with {{frame_style.glow}}, defense layers.
Statistics: Threat numbers in {{typography.text_6xl}}, breach costs.

[TONE]
Authoritative: Expert perspective.
Balanced: Informative not fear-mongering.
Actionable: What to do about it.

Compliance Infographics

[CONTEXT: COMPLIANCE INFOGRAPHIC]
Regulatory and framework content.

[RECOMMENDED VARIANT: trusted_advisor]
Use {{variant_trusted_advisor.prompt_prefix}} for authority.

[GRID SYSTEM: structured_grid]
Clear data organization for requirements.

[COMMON TOPICS]
Framework overviews (HIPAA, SOC 2, etc.).
Requirement breakdowns.
Certification timelines.
Audit preparation checklists.
Compliance vs. non-compliance.

[VISUAL ELEMENTS]
Checklists: Requirements met using {{colors.success}} checks.
Timelines: Certification journey with {{colors.primary}} milestones.
Comparisons: Framework differences in comparison layout.
Icons: Certificates, audits, requirements in brand icon style.

[TONE]
Clear: Simplifying complexity.
Reassuring: Path to compliance.
Authoritative: Expert guidance.

Cost/ROI Infographics

[CONTEXT: ROI INFOGRAPHIC]
Financial benefit visualization.

[RECOMMENDED VARIANT: bold_challenger]
Use {{variant_bold_challenger.prompt_prefix}} for impact.

[GRID SYSTEM: structured_grid]
Clear comparison structure for financial data.

[COMMON TOPICS]
IT cost breakdowns.
Savings calculations.
ROI projections.
Before/after spend.
Cost avoidance.

[VISUAL ELEMENTS]
Dollar signs: Cost indicators in {{colors.primary}}.
Charts: Spend comparisons using bar charts with {{colors.primary}}/{{colors.accent}}.
Savings: Highlighted reductions with {{colors.success}}.
Calculations: Show the math in {{typography.font_mono}}.

[TONE]
Evidence-based: Real numbers.
Compelling: Clear value story.
Honest: Realistic projections.

---

Production Workflow

Research Phase

research_checklist:
  data_gathering:
    - "Collect all statistics and sources"
    - "Verify data accuracy"
    - "Note data freshness dates"

  competitive_review:
    - "Review similar infographics"
    - "Identify differentiation opportunities"
    - "Note best practices"

  audience_analysis:
    - "Define target audience"
    - "Identify knowledge level"
    - "Determine key questions"

  variant_selection:
    - "Select appropriate design system variant"
    - "Determine grid system based on content type"
    - "Choose frame style for content density"

Design Phase

design_checklist:
  wireframe:
    - "Sketch content hierarchy"
    - "Plan visual flow"
    - "Determine size and format"
    - "Apply {{grid_system}} structure"

  first_draft:
    - "Create rough layout using {{active_variant}}"
    - "Place all content"
    - "Select visualizations"
    - "Apply {{frame_style}} to containers"

  refinement:
    - "Apply {{colors}} from active variant"
    - "Polish typography using {{typography}} tokens"
    - "Finalize color using brand palette"
    - "Add icons and graphics in brand style"

Review Phase

review_checklist:
  content:
    - "Data accuracy verified"
    - "Sources cited properly"
    - "Text proofread"

  design:
    - "Brand consistency with {{active_variant}}"
    - "Visual hierarchy clear"
    - "Accessibility checked (WCAG AA)"
    - "Grid and frame styles consistent"

  technical:
    - "Correct file formats"
    - "Optimized file sizes"
    - "All versions created"

---

Distribution Formats

File Exports

export_formats:
  source:
    format: "AI, Figma, Sketch"
    purpose: "Future editing"
    include: "Design tokens reference"

  web:
    format: "PNG, SVG, WebP"
    optimization: "Compressed for loading"
    color_space: "sRGB"

  print:
    format: "PDF/X-1a"
    specifications: "300dpi, CMYK, bleed"
    color_space: "US Web Coated SWOP v2"

  social:
    format: "PNG, JPEG"
    specifications: "RGB, platform-sized"
    optimization: "Platform-specific compression"

Naming Convention

sbk-infographic-{type}-{topic}-{variant}-{version}-{size}.{ext}

Examples:
sbk-infographic-statistical-cyberthreat-trends-cyber_shield-v2-web.png
sbk-infographic-process-compliance-journey-trusted_advisor-v1-print.pdf
sbk-infographic-comparison-frameworks-bold_challenger-v1-linkedin.png
sbk-infographic-technical-architecture-blueprint_technical-v1-web.svg

---

Quality Checklist

Before publishing any infographic:

Brand Alignment

• Uses correct variant from design system ({{active_variant}})
• Color palette matches variant specification
• Typography follows {{typography}} tokens
• Grid system applied consistently ({{grid_system}})
• Frame style appropriate for content ({{frame_style}})

Content Quality

• All data is accurate and verified
• Sources are cited
• Clear visual hierarchy
• Not misleading or deceptive

Technical Quality

• Text is readable at intended size
• Color contrast meets WCAG AA (4.5:1 minimum)
• Appropriate file formats created
• Optimized for target platform
• Tested on multiple devices

Variant-Specific

• Follows variant mood keywords
• Avoids variant anti-patterns
• Grid system matches recommendation
• Frame style consistent throughout

---

Last Updated: February 2026 Version: 2.0