Diagram Generation Prompts

Prompt templates for process flows, architecture diagrams, and infographics

Created: February 2026 Tool: Nano Banana Pro Related: Framework Overview | Visual Identity

---

Design System Configuration

This file inherits from the parameterized design system defined in readme.md. All token placeholders resolve based on the active configuration.

# DIAGRAM ASSET CONFIGURATION
# Inherits: ./readme.md → Global Design Tokens + Active Variant

diagram_config:
  schema_version: "2.0"
  asset_category: "diagrams"

  # Primary variant for technical diagrams
  primary_variant: "blueprint_technical"

  # Fallback variants by diagram type
  variant_mapping:
    architecture: "blueprint_technical"
    network: "blueprint_technical"
    flowchart: "clean_developer"
    process: "trusted_advisor"
    infographic: "creative_clay"
    security: "cyber_shield"
    service_pillar: "trusted_advisor"
    data_visualization: "clean_developer"

  # Grid system for diagram layouts
  layout:
    grid_system: "technical_grid"
    frame_style: "frame_dashed"
    frame_opacity: 0.15

  # Default specifications
  defaults:
    aspect_ratio: "{{layout_tokens.aspect_video}}"  # 16:9
    background: "{{color_primitives.white}}"
    line_weight: "{{sizing_tokens.border_2}}"
    corner_radius: "{{sizing_tokens.radius_lg}}"
    spacing_unit: "{{spacing_tokens.space_4}}"

---

Variant-Specific Diagram Styling

Blueprint Technical (PRIMARY for Technical Diagrams)

Engineering annotation style with dimension lines and CAD aesthetics.

variant_blueprint_technical:
  id: "blueprint_technical"
  name: "Blueprint Technical"
  description: "Engineering annotation style, dimension lines, CAD aesthetics"
  recommended_for:
    - architecture diagrams
    - network diagrams
    - system topology
    - infrastructure layouts
    - technical specifications

  # Color Semantic Mapping
  colors:
    primary: "{{color_primitives.sbk_navy}}"       # #0f172a
    secondary: "{{color_primitives.sbk_blue}}"    # #2563eb
    accent: "{{color_primitives.sbk_sky}}"        # #0ea5e9
    background: "{{color_primitives.cool_white}}" # #f8fafc
    grid_line: "{{color_primitives.slate_300}}"   # #cbd5e1
    annotation: "{{color_primitives.slate_600}}"  # #475569
    dimension: "{{color_primitives.slate_500}}"   # #64748b
    highlight: "{{color_primitives.sbk_sky}}"     # #0ea5e9

  # Visual Style
  visual:
    line_style: "technical"
    line_weight: "{{sizing_tokens.border_1}}"
    dimension_lines: true
    corner_marks: true
    grid_visible: true
    grid_opacity: 0.08
    annotation_style: "engineering"
    hatching_patterns: true

  # Typography
  typography:
    label_font: "{{typography_tokens.font_mono}}"
    label_size: "{{typography_tokens.text_xs}}"
    label_weight: "{{typography_tokens.weight_medium}}"
    annotation_style: "all-caps"
    dimension_font: "{{typography_tokens.font_mono}}"

  # Frame Settings
  frames:
    outer_frame: "{{frame_tokens.frame_solid}}"
    outer_weight: "{{sizing_tokens.border_2}}"
    corner_brackets: true
    title_block: true
    scale_indicator: true
    revision_block: true

  prompt_prefix: |
    [STYLE: BLUEPRINT TECHNICAL]
    Color palette: Navy (#0f172a) primary with sky blue (#0ea5e9) accents on cool white (#f8fafc).
    Aesthetic: Engineering blueprint, CAD drawing, technical specification document.
    Grid: Visible technical grid at 8% opacity with corner marks.
    Lines: Clean 1-2px weight, precise endpoints, dimension annotations.
    Labels: Monospace font, all-caps for annotations, technical notation.
    Frame: Solid outer border with corner brackets and title block.
    Avoid: Organic shapes, gradients, decorative elements, casual styling.

Trusted Advisor (Process Flows)

variant_diagram_trusted_advisor:
  inherits: "variant_trusted_advisor"  # From readme.md
  diagram_overrides:
    line_style: "clean"
    connection_style: "orthogonal"
    node_shape: "rounded-rectangle"
    arrow_style: "simple-chevron"

  colors:
    node_fill: "{{color_primitives.white}}"
    node_border: "{{color_primitives.sbk_blue}}"
    connector: "{{color_primitives.slate_400}}"
    label: "{{color_primitives.slate_700}}"

  prompt_prefix: |
    [STYLE: TRUSTED ADVISOR - DIAGRAM]
    Color palette: Deep blues (#2563eb, #0f172a) with clean white nodes.
    Aesthetic: Professional, clear, established expertise.
    Nodes: White fill with blue borders, rounded corners (8px).
    Connectors: Clean orthogonal lines, simple chevron arrows.
    Labels: Inter font, sentence case, centered in nodes.
    Grid: Subtle structural lines at 10% opacity.

Modern Partner (Collaborative Flows)

variant_diagram_modern_partner:
  inherits: "variant_modern_partner"  # From readme.md
  diagram_overrides:
    line_style: "flowing"
    connection_style: "curved"
    node_shape: "pill"
    arrow_style: "soft-arrow"

  colors:
    node_fill: "{{color_primitives.white}}"
    node_border: "{{color_primitives.teal_600}}"
    connector: "{{color_primitives.cyan_500}}"
    label: "{{color_primitives.slate_700}}"

  prompt_prefix: |
    [STYLE: MODERN PARTNER - DIAGRAM]
    Color palette: Teal (#0d9488) with cyan (#06b6d4) accents on warm cream.
    Aesthetic: Approachable, collaborative, human-centered.
    Nodes: White fill with teal borders, generously rounded (12px+).
    Connectors: Flowing curved lines, soft arrow heads.
    Labels: Cal Sans display font, friendly tone.
    Grid: Minimal to none, organic flow preferred.

Bold Challenger (Impact Diagrams)

variant_diagram_bold_challenger:
  inherits: "variant_bold_challenger"  # From readme.md
  diagram_overrides:
    line_style: "bold"
    connection_style: "direct"
    node_shape: "sharp-rectangle"
    arrow_style: "bold-arrow"

  colors:
    node_fill: "{{color_primitives.slate_900}}"
    node_border: "{{color_primitives.orange_600}}"
    connector: "{{color_primitives.slate_700}}"
    label: "{{color_primitives.white}}"
    accent_label: "{{color_primitives.orange_500}}"

  prompt_prefix: |
    [STYLE: BOLD CHALLENGER - DIAGRAM]
    Color palette: Charcoal (#0f172a) with burnt orange (#ea580c) accents.
    Aesthetic: Bold, distinctive, high-impact, memorable.
    Nodes: Dark charcoal fill with orange accent borders, sharp corners.
    Connectors: Direct bold lines, strong arrow heads.
    Labels: White text on dark, orange for emphasis.
    Grid: Structured with clear dividing lines.

Cyber Shield (Security Diagrams)

variant_diagram_cyber_shield:
  inherits: "variant_cyber_shield"  # From readme.md
  diagram_overrides:
    line_style: "tactical"
    connection_style: "angular"
    node_shape: "hexagonal"
    arrow_style: "data-flow"
    glow_enabled: true

  colors:
    node_fill: "{{color_primitives.dark_bg_secondary}}"
    node_border: "{{color_primitives.red_600}}"
    node_glow: "{{color_primitives.red_500}}"
    connector: "{{color_primitives.slate_600}}"
    data_flow: "{{color_primitives.red_500}}"
    label: "{{color_primitives.dark_text_primary}}"

  prompt_prefix: |
    [STYLE: CYBER SHIELD - DIAGRAM]
    Color palette: Deep black (#0a0a0b) with threat red (#dc2626) glows.
    Dark mode: Always. Security operations aesthetic.
    Nodes: Dark surface with red glow borders, hexagonal shapes for key nodes.
    Connectors: Angular tactical lines, data flow indicators with direction.
    Labels: White monospace for technical, red for alerts/threats.
    Grid: Visible cyber grid with corner brackets and scan lines.
    Glow: Red accent glows on active/threat nodes.

Sentinel Guard (AI/Autonomous Diagrams)

variant_diagram_sentinel_guard:
  inherits: "variant_sentinel_guard"  # From readme.md
  diagram_overrides:
    line_style: "neural"
    connection_style: "flowing-angular"
    node_shape: "rounded-hexagon"
    arrow_style: "pulse"
    gradient_borders: true

  colors:
    node_fill: "{{color_primitives.dark_bg_secondary}}"
    node_border_start: "{{color_primitives.purple_600}}"
    node_border_end: "{{color_primitives.fuchsia_500}}"
    connector: "{{color_primitives.purple_400}}"
    label: "{{color_primitives.dark_text_primary}}"

  prompt_prefix: |
    [STYLE: SENTINEL GUARD - DIAGRAM]
    Color palette: Purple (#9333ea) to violet (#7c3aed) gradients on black.
    Dark mode: AI-powered security aesthetic.
    Nodes: Dark surface with gradient purple borders, soft glow.
    Connectors: Flowing lines suggesting neural network, pulse animations.
    Labels: Modern display font, medium weight.
    Grid: Card-based dashboard layouts with glowing edges.

Clean Developer (Technical Documentation)

variant_diagram_clean_developer:
  inherits: "variant_clean_developer"  # From readme.md
  diagram_overrides:
    line_style: "precise"
    connection_style: "orthogonal"
    node_shape: "rounded-rectangle"
    arrow_style: "minimal"
    code_blocks: true

  colors:
    node_fill: "{{color_primitives.slate_50}}"
    node_border: "{{color_primitives.indigo_600}}"
    connector: "{{color_primitives.slate_400}}"
    label: "{{color_primitives.slate_900}}"
    code_bg: "{{color_primitives.slate_100}}"

  prompt_prefix: |
    [STYLE: CLEAN DEVELOPER - DIAGRAM]
    Color palette: Indigo (#4f46e5) with violet accents on pure white.
    Aesthetic: Developer documentation quality, technical precision.
    Nodes: Light gray fill with indigo borders, code blocks where relevant.
    Connectors: Clean orthogonal lines, minimal arrow heads.
    Labels: Clear hierarchy, monospace for technical terms.
    Grid: Invisible but precise mathematical spacing.

Creative Clay (Infographic Style)

variant_diagram_creative_clay:
  inherits: "variant_creative_clay"  # From readme.md
  diagram_overrides:
    line_style: "playful"
    connection_style: "organic"
    node_shape: "blob"
    arrow_style: "hand-drawn"
    illustrations: true

  colors:
    node_fill: "{{color_primitives.white}}"
    node_border: "{{color_primitives.slate_900}}"
    accent_1: "{{color_primitives.orange_500}}"
    accent_2: "{{color_primitives.amber_500}}"
    accent_3: "{{color_primitives.sbk_sky}}"
    label: "{{color_primitives.slate_900}}"

  prompt_prefix: |
    [STYLE: CREATIVE CLAY - DIAGRAM]
    Color palette: Charcoal (#0f172a) with orange (#f97316) and amber accents.
    Aesthetic: Distinctive, creative, memorable infographic style.
    Nodes: White with bold borders, organic blob shapes for emphasis.
    Connectors: Organic flowing lines, playful but professional.
    Labels: Bold display typography, tight tracking.
    Special: 3D clay-style icons, floating elements, gradient backgrounds.

---

Grid System Integration for Diagrams

Technical Grid (Default for Diagrams)

diagram_grid_technical:
  inherits: "grid_frame_systems.technical_grid"  # From readme.md

  specifications:
    columns: "{{grid_tokens.columns_12}}"
    gutter: "{{grid_tokens.gap_md}}"
    margin: "{{spacing_tokens.space_8}}"

  visual:
    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

  annotation:
    dimension_lines: true
    grid_labels: "A-1, A-2, B-1, B-2..."
    scale_indicator: "bottom-right"

# ASCII Reference
# ┌─ ─ ─ ─ ─ ─ ─ ─ ─┬─ ─ ─ ─ ─ ─ ─ ─ ─┬─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┐
# │ ┌─┐             │                 │                     ┌─┐ │
# │ └─┘   A-1       │       A-2       │         A-3         └─┘ │
# │ · · · · · · · · │ · · · · · · · · │ · · · · · · · · · · · · │
# ├─ ─ ─ ─ ─ ─ ─ ─ ─┼─ ─ ─ ─ ─ ─ ─ ─ ─┼─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┤
# │ ┌─┐             │                 │                     ┌─┐ │
# │ └─┘   B-1       │       B-2       │         B-3         └─┘ │
# └─ ─ ─ ─ ─ ─ ─ ─ ─┴─ ─ ─ ─ ─ ─ ─ ─ ─┴─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┘

Structured Grid (Architecture Diagrams)

diagram_grid_structured:
  inherits: "grid_frame_systems.structured_grid"

  specifications:
    columns: "{{grid_tokens.columns_6}}"
    gutter: "{{grid_tokens.gap_lg}}"
    margin: "{{spacing_tokens.space_6}}"

  visual:
    outer_frame: "{{frame_tokens.frame_solid}}"
    outer_opacity: 0.2
    inner_dividers: "{{frame_tokens.frame_solid}}"
    inner_opacity: 0.1
    layer_separation: true

Cyber Grid (Security Diagrams)

diagram_grid_cyber:
  inherits: "grid_frame_systems.cyber_grid"

  specifications:
    columns: "{{grid_tokens.columns_12}}"
    gutter: "{{grid_tokens.gap_sm}}"
    margin: "{{spacing_tokens.space_4}}"

  visual:
    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
    glow_color: "{{color_primitives.red_600}}"

---

Token Placeholders Reference

Color Tokens for Diagrams

diagram_color_tokens:
  # Primary diagram colors (resolve from active variant)
  "{{diagram.node_fill}}": "Node background color"
  "{{diagram.node_border}}": "Node border color"
  "{{diagram.connector}}": "Connection line color"
  "{{diagram.label}}": "Text label color"
  "{{diagram.accent}}": "Highlight/emphasis color"
  "{{diagram.grid}}": "Grid line color"

  # Global color primitives (from readme.md)
  "{{color_primitives.sbk_blue}}": "#2563eb"
  "{{color_primitives.sbk_navy}}": "#0f172a"
  "{{color_primitives.sbk_sky}}": "#0ea5e9"
  "{{color_primitives.white}}": "#ffffff"
  "{{color_primitives.cool_white}}": "#f8fafc"
  "{{color_primitives.slate_*}}": "Slate scale 50-950"

Typography Tokens for Diagrams

diagram_typography_tokens:
  # Font stacks
  "{{typography_tokens.font_primary}}": "Inter, SF Pro Display, sans-serif"
  "{{typography_tokens.font_mono}}": "JetBrains Mono, SF Mono, monospace"
  "{{typography_tokens.font_display}}": "Cal Sans, Inter, sans-serif"

  # Sizes
  "{{typography_tokens.text_xs}}": "0.75rem (12px) - annotations"
  "{{typography_tokens.text_sm}}": "0.875rem (14px) - labels"
  "{{typography_tokens.text_base}}": "1rem (16px) - body text"
  "{{typography_tokens.text_lg}}": "1.125rem (18px) - headings"

  # Weights
  "{{typography_tokens.weight_medium}}": "500 - labels"
  "{{typography_tokens.weight_semibold}}": "600 - headings"

Spacing Tokens for Diagrams

diagram_spacing_tokens:
  # Node spacing
  "{{spacing_tokens.space_2}}": "0.5rem (8px) - icon padding"
  "{{spacing_tokens.space_4}}": "1rem (16px) - node padding"
  "{{spacing_tokens.space_6}}": "1.5rem (24px) - label margins"
  "{{spacing_tokens.space_8}}": "2rem (32px) - node gaps"
  "{{spacing_tokens.space_12}}": "3rem (48px) - section gaps"

  # Grid gaps
  "{{grid_tokens.gap_sm}}": "1rem - tight layouts"
  "{{grid_tokens.gap_md}}": "1.5rem - standard layouts"
  "{{grid_tokens.gap_lg}}": "2rem - spacious layouts"

  # Border radius
  "{{sizing_tokens.radius_sm}}": "0.125rem (2px) - sharp"
  "{{sizing_tokens.radius_md}}": "0.375rem (6px) - subtle"
  "{{sizing_tokens.radius_lg}}": "0.5rem (8px) - default"
  "{{sizing_tokens.radius_xl}}": "0.75rem (12px) - rounded"

---

Diagram Type Recommendations

Architecture Diagrams

Recommended Variant: blueprint_technical

architecture_diagram:
  variant: "blueprint_technical"
  grid: "diagram_grid_structured"

  characteristics:
    - Layered horizontal bands for tiers
    - Clear separation of concerns
    - Technical annotation style
    - Dimension lines for scale
    - Corner marks for precision

  node_styles:
    components: "rounded-rectangle with icon"
    databases: "cylinder"
    services: "hexagon"
    users: "person icon"
    external: "dashed border"

  prompt_addition: |
    Architecture diagram with layered tiers.
    Blueprint technical style with dimension lines.
    Use {{diagram_grid_structured}} layout.

Network Diagrams

Recommended Variant: blueprint_technical or cyber_shield

network_diagram:
  variant_options:
    general: "blueprint_technical"
    security_focused: "cyber_shield"
  grid: "diagram_grid_technical"

  characteristics:
    - Clear topology visualization
    - Labeled connections with protocols
    - Direction arrows for data flow
    - Grouping with dashed borders

  node_styles:
    servers: "rectangle with server icon"
    firewalls: "shield shape"
    routers: "diamond"
    endpoints: "circle"
    cloud: "cloud shape"

  prompt_addition: |
    Network topology with clear node hierarchy.
    Label connections with protocol/port info.
    Use directional arrows for data flow.

Flowchart Diagrams

Recommended Variant: clean_developer or trusted_advisor

flowchart_diagram:
  variant_options:
    technical: "clean_developer"
    business: "trusted_advisor"
  grid: "diagram_grid_structured"

  characteristics:
    - Standard flowchart notation
    - Clear decision points
    - Consistent flow direction
    - Proper terminator shapes

  node_styles:
    start_end: "rounded-rectangle or oval"
    process: "rectangle"
    decision: "diamond"
    input_output: "parallelogram"
    connector: "circle"

  prompt_addition: |
    Standard flowchart with consistent notation.
    Diamond shapes for decision points.
    Clear yes/no labels on decision branches.

Process Flow Diagrams

Recommended Variant: trusted_advisor

process_flow_diagram:
  variant: "trusted_advisor"
  grid: "diagram_grid_structured"

  characteristics:
    - Linear or cyclical flow
    - Step numbering
    - Icon integration
    - Phase grouping

  node_styles:
    step: "rounded-rectangle with number"
    milestone: "circle on timeline"
    phase: "grouped container"

Security/Threat Diagrams

Recommended Variant: cyber_shield

security_diagram:
  variant: "cyber_shield"
  grid: "diagram_grid_cyber"

  characteristics:
    - Dark mode always
    - Red glow for threats
    - Hexagonal nodes for key systems
    - Scan line texture
    - Corner brackets

  node_styles:
    threat: "hexagon with red glow"
    protection: "shield shape"
    system: "rectangle with status"
    data_flow: "animated line"

Infographics

Recommended Variant: creative_clay

infographic_diagram:
  variant: "creative_clay"
  grid: "editorial_grid"

  characteristics:
    - Bold visual hierarchy
    - Large statistics
    - Organic shapes
    - Color accents
    - Icon illustrations

---

Diagram Philosophy

SBK diagrams must: - Clarify, never confuse complex concepts - Maintain brand consistency in visual style - Be professional and polished not sketchy or casual - Support the narrative of trust and expertise - Use design system tokens for consistency

Diagram Anti-Patterns

Never generate diagrams that: - Are cluttered or visually overwhelming - Use inconsistent visual language - Feel amateur or hastily made - Include unnecessary decoration - Sacrifice clarity for style - Ignore the active variant styling - Mix variant aesthetics inappropriately

---

Process Flow Diagrams

Linear Process Flow

[SBK BRAND DNA]
Professional technology consulting aesthetic. Clean geometric precision.
Strategic negative space. Timeless quality over trends.

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

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

[ASSET: DIAGRAM - LINEAR PROCESS]
Step-by-step process visualization.

[SPECIFICATIONS]
Aspect ratio: {{layout_tokens.aspect_video}}.
Background: {{diagram.background}}.
Line weight: {{sizing_tokens.border_2}}.

[SUBJECT]
Horizontal linear flow diagram.
3-5 steps connected by directional arrows.
Each step: Rounded rectangle with icon and label.
Steps use {{diagram.node_border}}, arrows use {{diagram.connector}}.
Clean connecting lines, not ornate.
Numbers or icons indicate sequence.
Spacing: {{spacing_tokens.space_8}} between elements.

[STYLE DETAILS]
- Step boxes: Rounded corners ({{sizing_tokens.radius_lg}})
- Arrow style: Simple, clean, single-weight line with chevron head
- Icons: Outlined style, consistent weight
- Labels: {{typography_tokens.font_primary}}, sentence case
- Spacing: Equal between all steps

[AVOID]
3D effects. Gradients in boxes. Clipart icons.
Busy connecting lines. Drop shadows.
Inconsistent element sizes.

Cyclical Process

[ASSET: DIAGRAM - CYCLE]
Continuous or iterative process visualization.

[SUBJECT]
Circular arrangement of process steps.
4-6 steps arranged around central concept.
Curved arrows showing continuous flow.
Central element: Core concept or result.
Each step: Consistent shape and style.
Clockwise flow implied.

[STYLE DETAILS]
- Outer ring: Steps with icons in {{diagram.node_fill}}
- Arrows: Curved, following ring direction in {{diagram.connector}}
- Center: Larger element in {{diagram.accent}} for core concept
- Typography: {{typography_tokens.font_primary}} at {{typography_tokens.text_sm}}

[AVOID]
Overly complex multi-ring diagrams.
Too many steps (max 6). 3D perspective.

Timeline Process

[ASSET: DIAGRAM - TIMELINE]
Chronological or milestone visualization.

[SUBJECT]
Horizontal timeline with milestone markers.
Clear start and end points.
Milestones positioned along line.
Each milestone: Icon, date/phase, description.
Progress implied from left to right.

[STYLE DETAILS]
- Timeline: Thick line ({{sizing_tokens.border_4}}) in {{diagram.node_border}}
- Milestones: Circles on line, alternating above/below
- Content: Cards connected to circles with {{diagram.connector}}
- Dates: {{typography_tokens.text_xs}} in {{color_primitives.slate_500}}
- Labels: {{typography_tokens.font_primary}} at {{typography_tokens.text_sm}}

[AVOID]
Vertical timelines (unless specifically needed).
Too many milestones (max 7). Cramped spacing.

---

Architecture Diagrams

System Architecture (Blueprint Technical)

[SBK BRAND DNA]
Professional technology consulting aesthetic. Clean geometric precision.
Strategic negative space. Timeless quality over trends.

[STYLE: BLUEPRINT TECHNICAL]
Color palette: Navy (#0f172a) primary with sky blue (#0ea5e9) accents.
Aesthetic: Engineering blueprint, CAD drawing, technical specification.
Grid: Visible technical grid at 8% opacity with corner marks.
Lines: Clean 1-2px weight, precise endpoints, dimension annotations.
Labels: Monospace font, all-caps for annotations.

[GRID: TECHNICAL GRID]
Visible technical grid with corner brackets and dimension lines.
Frame style: Solid outer border with corner marks.

[ASSET: DIAGRAM - ARCHITECTURE]
Technical system or infrastructure visualization.

[SPECIFICATIONS]
Aspect ratio: {{layout_tokens.aspect_video}}.
Background: {{color_primitives.cool_white}}.
Include title block with revision info.

[SUBJECT]
Layered architecture diagram.
Clear separation of concerns/layers.
Components connected by labeled lines.
Standard architecture notation adapted to blueprint style.
Cloud, server, database, user iconography.
Dimension lines indicating scale relationships.

[STYLE DETAILS]
- Layers: Horizontal bands with dashed separators
- Components: {{sizing_tokens.radius_md}} corners with icons
- Connections: Thin lines ({{sizing_tokens.border_1}}) with labels
- Groups: Subtle background differentiation (5% opacity)
- Icons: Outlined, consistent stroke weight
- Annotations: {{typography_tokens.font_mono}}, ALL CAPS
- Corner marks: Technical precision indicators

[SPECIFICATIONS]
Can be more technical—target audience understands.
Still clean and professional, not sketchy.

[AVOID]
Generic cloud clipart. Too many crossing lines.
Inconsistent icon styles. Cramped layouts.
Organic or casual line styles.

Network Diagram (Blueprint Technical)

[ASSET: DIAGRAM - NETWORK]
Network topology or integration visualization.

[STYLE: BLUEPRINT TECHNICAL]
Engineering annotation style with dimension lines and CAD aesthetics.

[SUBJECT]
Nodes representing systems/services.
Lines showing connections/data flow.
Clear hierarchy or topology.
Labels identifying each node with technical notation.
Direction arrows where relevant.
Protocol/port annotations on connections.

[STYLE DETAILS]
- Nodes: {{sizing_tokens.radius_lg}} shapes with outlined icons
- Lines: Clean, {{sizing_tokens.border_1}} weight, labeled
- Groupings: Dashed borders for network segments
- External vs internal: Visual differentiation via fill opacity
- Annotations: {{typography_tokens.font_mono}}, technical notation
- Dimension: Scale indicators for network distances

[AVOID]
Literal server rack imagery. Too many nodes.
Spaghetti connections. Inconsistent notation.

Network Diagram (Cyber Shield)

[ASSET: DIAGRAM - NETWORK - SECURITY]
Security-focused network visualization.

[STYLE: CYBER SHIELD]
Color palette: Deep black (#0a0a0b) with threat red (#dc2626) glows.
Dark mode: Always. Security operations aesthetic.

[GRID: CYBER GRID]
Visible technical grid with corner brackets and scan lines.

[SUBJECT]
Network topology with security focus.
Threat indicators with red glow.
Firewall and protection layers emphasized.
Data flow direction clearly marked.
Status indicators on each node.

[STYLE DETAILS]
- Nodes: Dark surface ({{color_primitives.dark_bg_secondary}}) with glow borders
- Threat nodes: Red glow ({{color_primitives.red_600}})
- Protected nodes: Green subtle glow
- Lines: Tactical angular connections
- Status: LED-style indicators on nodes
- Background: Scan line texture at 2% opacity
- Corner brackets on outer frame

[AVOID]
Light backgrounds. Soft casual aesthetics.
Generic networking icons. Cluttered layouts.

---

Service Pillar Diagrams

Four Pillars Overview

[ASSET: DIAGRAM - PILLARS]
SBK four service pillar visualization.

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

[SUBJECT]
Four equal elements representing:
- Protect (Security & Compliance) - Shield icon
- Plan (Strategic Advisory) - Compass icon
- Operate (Managed Services) - Settings icon
- Innovate (Digital Transformation) - Lightbulb icon

Arrangement: Horizontal row or 2x2 grid.
Each pillar: Icon + label + brief description.
Visual connection showing integrated offering.
Central element possible: "SBK Consulting" or client.

[STYLE DETAILS]
- Each pillar: Distinct icon, same visual treatment
- Colors: Can use pillar-specific accent or all {{diagram.node_border}}
- Connecting lines: Show relationship/integration in {{diagram.connector}}
- Equal emphasis: No pillar more prominent
- Icons: Outlined style at {{sizing_tokens.border_2}} weight
- Typography: {{typography_tokens.font_primary}} at {{typography_tokens.text_lg}}

[AVOID]
Literal pillar/column imagery. Cheesy metaphors.
Unequal sizing. Inconsistent icon styles.

Service Relationship

[ASSET: DIAGRAM - SERVICE RELATIONSHIP]
How services relate to client outcomes.

[SUBJECT]
Client at center, services radiating out.
Or: Client journey with services along path.
Shows how services combine for outcomes.
Outcome/value emphasis at endpoint.

[STYLE DETAILS]
- Client: Central, emphasized position with {{diagram.accent}}
- Services: Surrounding with connecting lines in {{diagram.connector}}
- Outcomes: Clear endpoint or result with {{diagram.accent}}
- Flow: Logical progression visible
- Spacing: {{spacing_tokens.space_12}} between major elements

[AVOID]
Overly complex relationships. Venn diagrams.
Cluttered connection lines.

---

Infographic Elements

Comparison Chart

[ASSET: INFOGRAPHIC - COMPARISON]
Side-by-side or feature comparison visualization.

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

[SUBJECT]
Two or more options compared.
Attributes listed with visual indicators.
Clear differentiation between options.
SBK position emphasized if relevant.

[STYLE DETAILS]
- Columns: Each option in separate column
- Rows: Comparison attributes with {{spacing_tokens.space_4}} padding
- Indicators: Checkmarks, X marks, or value bars
- Emphasis: Highlight preferred/SBK option with {{diagram.accent}}
- Borders: {{sizing_tokens.border_1}} in {{color_primitives.slate_200}}
- Typography: {{typography_tokens.font_primary}}

[AVOID]
Too many comparison points (max 8).
Biased visual representation.

Statistics Highlight

[ASSET: INFOGRAPHIC - STATS]
Key statistics or metrics visualization.

[SUBJECT]
3-4 key statistics prominently displayed.
Large numbers with context labels.
Icons or visual elements supporting data.
Cohesive layout grouping stats.

[STYLE DETAILS]
- Numbers: {{typography_tokens.text_5xl}}, {{typography_tokens.weight_bold}}, {{diagram.accent}}
- Labels: {{typography_tokens.text_sm}}, {{color_primitives.slate_600}}
- Icons: Supporting, not dominant, outlined style
- Layout: Horizontal row or 2x2 grid
- Spacing: {{spacing_tokens.space_8}} between stat groups

[AVOID]
Too many stats (max 4). Clipart.
Misleading visual proportions.

Value Proposition Visual

[ASSET: INFOGRAPHIC - VALUE PROP]
SBK value proposition visualization.

[SUBJECT]
Core differentiator message visualized.
"Vendor-neutral" or "Zero conflicts" theme.
Before/after or problem/solution structure.
Clear benefit emphasis.

[STYLE DETAILS]
- Structure: Problem -> Solution -> Outcome
- Visual metaphor: Simple, not cliched
- Text: Minimal, impactful
- Brand: Clear SBK presence
- Accent: Key benefits in {{diagram.accent}}

[AVOID]
Overused metaphors (puzzle pieces, bridges).
Too text-heavy.

---

Data Visualizations

Bar/Column Chart

[ASSET: DATA VIZ - BAR CHART]
Comparative data visualization.

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

[SUBJECT]
Clean bar or column chart.
Clear axis labels and values.
Brand colors for bars.
Minimal gridlines.

[STYLE DETAILS]
- Bars: {{diagram.node_border}} primary, {{color_primitives.slate_400}} secondary
- Axes: Thin lines ({{sizing_tokens.border_1}}), minimal
- Labels: {{typography_tokens.font_primary}} at {{typography_tokens.text_sm}}
- Legend: If needed, integrated cleanly
- Grid lines: 5% opacity, horizontal only

[AVOID]
3D bars. Excessive gridlines.
Gradient fills. Too many data series.

Donut/Pie Chart

[ASSET: DATA VIZ - DONUT]
Proportional data visualization.

[SUBJECT]
Donut chart (preferred over solid pie).
Max 5 segments.
Labels outside or in center.
Brand color palette.

[STYLE DETAILS]
- Segments: {{diagram.node_border}} + complementary {{color_primitives.slate_*}} scale
- Labels: Connected with thin lines ({{sizing_tokens.border_1}})
- Center: Optional summary stat in {{typography_tokens.text_3xl}}
- Legend: Below or beside
- Spacing: {{sizing_tokens.space_1}} gap between segments

[AVOID]
Too many segments. 3D. Explosion effects.

---

Icon Integration

Consistent Icon Style

All diagrams should use icons with: - Outlined style (not filled) - {{sizing_tokens.border_2}} stroke weight (1.5-2px) - Rounded corners ({{sizing_tokens.radius_sm}}) - Consistent sizing within diagram - Source: Lucide Icons recommended

Icon Categories for Diagrams

Category	Icon Examples	Token Color
Security	Shield, Lock, Key	{{diagram.accent}}
Strategy	Compass, Map, Target	{{diagram.node_border}}
Operations	Settings, Server, Cloud	{{diagram.node_border}}
Innovation	Lightbulb, Rocket, Zap	{{diagram.accent}}
Users	User, Users, Building	{{diagram.label}}
Data	Database, HardDrive, FileText	{{diagram.node_border}}
Process	ArrowRight, RefreshCw, GitBranch	{{diagram.connector}}
Success	CheckCircle, Award, ThumbsUp	{{color_primitives.green_600}}

---

Quality Checklist

Before using any diagram:

Brand Alignment

• Uses correct variant from design system
• Colors resolve from token placeholders
• Typography matches variant specification
• Grid system appropriate for diagram type

Technical Quality

• Clear visual hierarchy
• Consistent element styling
• Readable at intended size
• Not cluttered or overwhelming
• Proper spacing using token values

Accuracy

• Accurate representation of concept
• Labels are correct and complete
• Flow direction is logical
• Connections represent real relationships

Accessibility

• Color not only differentiator
• Sufficient contrast (WCAG AA minimum)
• Text readable at intended size
• Alternative text considerations

Variant Compliance

• No anti-pattern elements present
• Maintains variant-specific aesthetic
• Grid/frame style matches configuration
• Doesn't feel like stock imagery

---

Last Updated: February 2026 Version: 2.0 (Parameterized Design System)