Illustration Design Prompts¶
Comprehensive prompt templates for custom illustrations, spot graphics, and visual storytelling with parameterized design system integration
Created: February 2026 Tool: Nano Banana Pro / Illustration Suite Related: Framework Overview | Icons | Diagrams
Design System Configuration¶
# ILLUSTRATION CONFIGURATION BLOCK
# Inherits from: ./readme.md (Global Design Tokens)
# Override these values to switch illustration style system-wide
illustration_config:
schema_version: "2.0"
parent_config: "./readme.md"
# Active variant determines all illustration styles
active_variant: "{{active_configuration.variant}}"
# Illustration-specific overrides
illustration_defaults:
line_style: "{{variant.illustration.line_style}}"
fill_approach: "{{variant.illustration.fill_approach}}"
complexity_level: "{{variant.illustration.complexity}}"
depth_style: "{{variant.illustration.depth}}"
# Accessibility
accessibility:
level: "{{active_configuration.accessibility_level}}"
high_contrast_mode: false
reduced_motion: "{{active_configuration.animation_reduced}}"
Variant-Specific Illustration Styles¶
Illustration Style: Trusted Advisor¶
variant_illustration_trusted_advisor:
id: "trusted_advisor"
name: "Trusted Advisor Illustrations"
description: "Professional stability, established expertise, conservative confidence"
# Color Palette
colors:
primary_fill: "{{sbk_blue}}" # #2563eb
secondary_fill: "{{slate_600}}" # #475569
accent: "{{sbk_sky}}" # #0ea5e9
stroke_primary: "{{slate_700}}" # #334155
stroke_secondary: "{{slate_400}}" # #94a3b8
background: "{{cool_white}}" # #f8fafc
surface: "{{white}}" # #ffffff
shadow: "rgba(15, 23, 42, 0.10)" # slate_900 @ 10%
highlight: "{{sbk_sky}}" # #0ea5e9 @ 20%
# Line Weights
line_weights:
primary: "2-3px"
secondary: "1.5px"
detail: "1px"
emphasis: "3-4px"
outline: "2px"
# Corner Treatments
corners:
style: "rounded"
radius: "{{radius_lg}}" # 8px
inner_radius: "{{radius_md}}" # 6px
description: "Gently rounded, approachable but professional"
# Fill & Depth
fill_style:
approach: "flat-with-subtle-gradient"
gradient_angle: "135deg"
gradient_strength: "10-15%"
texture: "subtle-paper-grain"
texture_opacity: 0.03
depth_style:
approach: "2.5D-isometric"
shadow_offset: "4px"
shadow_blur: "8px"
shadow_opacity: 0.10
layering: "subtle-depth-planes"
# Mood & Composition
mood:
- established
- reliable
- sophisticated
- grounded
- trustworthy
composition:
balance: "centered-60-40"
whitespace: 0.40
density: "comfortable"
focal_point: "clear-single"
prompt_prefix: |
[ILLUSTRATION STYLE: TRUSTED ADVISOR]
Color palette: Deep blues (#2563eb) with slate grays (#475569) and sky accents (#0ea5e9).
Line weight: 2-3px primary strokes, 1px detail lines, rounded caps and joins.
Corners: Gently rounded (8px radius equivalent).
Fill: Flat color with subtle 135deg gradients (10-15% depth).
Depth: 2.5D isometric perspective with soft layering.
Texture: Subtle paper grain at 3% opacity.
Mood: Established, reliable, sophisticated, trustworthy.
Avoid: Flashy gradients, aggressive angles, trendy effects.
Illustration Style: Modern Partner¶
variant_illustration_modern_partner:
id: "modern_partner"
name: "Modern Partner Illustrations"
description: "Collaborative warmth, progressive approach, human-centered"
# Color Palette
colors:
primary_fill: "{{teal_600}}" # #0d9488
secondary_fill: "{{cyan_600}}" # #0891b2
accent: "{{cyan_500}}" # #06b6d4
stroke_primary: "{{teal_700}}" # #0f766e
stroke_secondary: "{{slate_400}}" # #94a3b8
background: "{{warm_cream}}" # #faf5f0
surface: "{{white}}" # #ffffff
shadow: "rgba(13, 148, 136, 0.08)" # teal_600 @ 8%
highlight: "{{cyan_400}}" # #22d3ee @ 15%
# Line Weights
line_weights:
primary: "2px"
secondary: "1.5px"
detail: "0.75px"
emphasis: "2.5-3px"
outline: "1.5px"
# Corner Treatments
corners:
style: "rounded-large"
radius: "{{radius_xl}}" # 12px
inner_radius: "{{radius_lg}}" # 8px
description: "Generously rounded, welcoming and approachable"
# Fill & Depth
fill_style:
approach: "watercolor-soft"
gradient_angle: "120deg"
gradient_strength: "15-20%"
texture: "organic-flow"
texture_opacity: 0.02
depth_style:
approach: "flat-with-layering"
shadow_offset: "6px"
shadow_blur: "12px"
shadow_opacity: 0.08
layering: "organic-overlap"
# Mood & Composition
mood:
- approachable
- collaborative
- progressive
- human
- warm
composition:
balance: "asymmetric-flowing"
whitespace: 0.45
density: "airy"
focal_point: "natural-draw"
prompt_prefix: |
[ILLUSTRATION STYLE: MODERN PARTNER]
Color palette: Teal (#0d9488) with cyan (#0891b2) on warm cream (#faf5f0).
Line weight: 2px primary strokes, soft rounded caps, organic joins.
Corners: Generously rounded (12px radius equivalent).
Fill: Watercolor-soft gradients, subtle color bleeding at edges.
Depth: Flat with organic layering, soft shadow (8% opacity).
Texture: Organic flow patterns at 2% opacity.
Mood: Approachable, collaborative, progressive, human-centered.
Avoid: Cold precision, rigid geometry, impersonal elements.
Illustration Style: Bold Challenger¶
variant_illustration_bold_challenger:
id: "bold_challenger"
name: "Bold Challenger Illustrations"
description: "Confident disruption, memorable differentiation, strategic boldness"
# Color Palette
colors:
primary_fill: "{{slate_900}}" # #0f172a
secondary_fill: "{{slate_700}}" # #334155
accent: "{{orange_600}}" # #ea580c
accent_bright: "{{orange_500}}" # #f97316
stroke_primary: "{{slate_950}}" # #020617
stroke_secondary: "{{slate_600}}" # #475569
background: "{{white}}" # #ffffff
surface: "{{slate_50}}" # #f8fafc
shadow: "rgba(15, 23, 42, 0.20)" # slate_900 @ 20%
highlight: "{{orange_500}}" # #f97316 @ 25%
# Line Weights
line_weights:
primary: "3-4px"
secondary: "2px"
detail: "1.5px"
emphasis: "4-5px"
outline: "3px"
# Corner Treatments
corners:
style: "sharp"
radius: "{{radius_md}}" # 6px
inner_radius: "{{radius_sm}}" # 2px
description: "Sharp or minimal radius, decisive and bold"
# Fill & Depth
fill_style:
approach: "flat-solid"
gradient_angle: "none"
gradient_strength: 0
texture: "sharp-geometric"
texture_opacity: 0
depth_style:
approach: "hard-shadow"
shadow_offset: "8px"
shadow_blur: "0px"
shadow_opacity: 0.20
layering: "stark-contrast"
# Mood & Composition
mood:
- bold
- different
- confident
- disruptive
- decisive
composition:
balance: "dynamic-tension"
whitespace: 0.35
density: "impactful"
focal_point: "dramatic"
prompt_prefix: |
[ILLUSTRATION STYLE: BOLD CHALLENGER]
Color palette: Charcoal (#0f172a) with burnt orange (#ea580c) on white.
Line weight: 3-4px primary strokes, sharp crisp edges, no softening.
Corners: Sharp or minimal radius (6px max), decisive angles.
Fill: Flat solid colors, no gradients, high contrast.
Depth: Hard offset shadows (8px, 0 blur), stark layering.
Texture: None. Clean geometric precision.
Mood: Bold, different, confident, disruptive, memorable.
Avoid: Soft edges, muted colors, safe compositions.
Illustration Style: Cyber Shield¶
variant_illustration_cyber_shield:
id: "cyber_shield"
name: "Cyber Shield Illustrations"
description: "Security-focused, threat protection, cyber operations aesthetic"
use_case: "Security imagery, threat visualization, SOC dashboards"
# Color Palette
colors:
primary_fill: "{{red_600}}" # #dc2626
secondary_fill: "{{slate_900}}" # #0f172a
accent: "{{red_500}}" # #ef4444
accent_glow: "{{red_400}}" # For glow effects
stroke_primary: "{{red_700}}" # #b91c1c
stroke_secondary: "{{dark_border}}" # #27272a
background: "{{dark_bg_primary}}" # #0a0a0b
surface: "{{dark_bg_secondary}}" # #111113
shadow: "rgba(220, 38, 38, 0.15)" # red_600 @ 15%
glow: "rgba(239, 68, 68, 0.30)" # red_500 @ 30%
# Line Weights
line_weights:
primary: "2px"
secondary: "1px"
detail: "0.5px"
emphasis: "2-3px"
outline: "1.5px"
glow_stroke: "1px with 4px glow radius"
# Corner Treatments
corners:
style: "bracketed"
radius: "{{radius_sm}}" # 2px
inner_radius: "0px"
corner_brackets: true
description: "Sharp with corner brackets, tactical precision"
# Fill & Depth
fill_style:
approach: "dark-gradient"
gradient_angle: "180deg"
gradient_strength: "20-30%"
texture: "scan-lines"
texture_opacity: 0.02
depth_style:
approach: "glow-depth"
shadow_offset: "0px"
shadow_blur: "0px"
glow_radius: "8-16px"
glow_opacity: 0.30
layering: "command-center-z"
# Mood & Composition
mood:
- protective
- vigilant
- technical
- threat-aware
- mission-critical
composition:
balance: "command-center"
whitespace: 0.30
density: "dense-data-rich"
focal_point: "threat-indicator"
prompt_prefix: |
[ILLUSTRATION STYLE: CYBER SHIELD]
Color palette: Threat red (#dc2626) on deep black (#0a0a0b).
DARK MODE: Always. No light backgrounds.
Line weight: 2px primary with glow, 1px detail, 0.5px technical lines.
Corners: Sharp with corner brackets [ ], tactical precision.
Fill: Dark gradients, subtle scan-line texture (2% opacity).
Depth: Glow-based depth (red glow at 30% opacity, 8-16px radius).
Special: Corner brackets on containers, scan-line overlay, data visualization elements.
Mood: Security operations center, threat protection, vigilant defense.
Avoid: Light backgrounds, soft aesthetics, decorative elements.
Illustration Style: Sentinel Guard¶
variant_illustration_sentinel_guard:
id: "sentinel_guard"
name: "Sentinel Guard Illustrations"
description: "AI-powered defense, autonomous protection, intelligent security"
use_case: "AI security, autonomous defense, predictive protection"
# Color Palette
colors:
primary_fill: "{{purple_600}}" # #9333ea
secondary_fill: "{{violet_600}}" # #7c3aed
accent: "{{fuchsia_500}}" # #d946ef
accent_glow: "{{purple_400}}" # For glow effects
stroke_primary: "{{purple_700}}" # #7e22ce
stroke_secondary: "{{dark_border}}" # #27272a
background: "{{dark_bg_primary}}" # #0a0a0b
surface: "{{dark_bg_secondary}}" # #111113
shadow: "rgba(147, 51, 234, 0.12)" # purple_600 @ 12%
glow: "rgba(168, 85, 247, 0.25)" # purple_500 @ 25%
# Line Weights
line_weights:
primary: "2px"
secondary: "1.5px"
detail: "0.75px"
emphasis: "2.5-3px"
outline: "1.5px"
glow_stroke: "1.5px with 6px glow radius"
# Corner Treatments
corners:
style: "rounded-glow"
radius: "{{radius_lg}}" # 8px
inner_radius: "{{radius_md}}" # 6px
gradient_border: true
description: "Rounded with gradient borders and subtle glow"
# Fill & Depth
fill_style:
approach: "gradient-rich"
gradient_angle: "135deg"
gradient_strength: "30-40%"
gradient_stops: 3 # Multi-stop gradients
texture: "neural-network"
texture_opacity: 0.03
depth_style:
approach: "flowing-glow"
shadow_offset: "2px"
shadow_blur: "12px"
glow_radius: "12-20px"
glow_opacity: 0.25
layering: "organic-data-flow"
# Mood & Composition
mood:
- intelligent
- autonomous
- predictive
- advanced
- futuristic
composition:
balance: "flowing-tech"
whitespace: 0.35
density: "balanced"
focal_point: "AI-core"
prompt_prefix: |
[ILLUSTRATION STYLE: SENTINEL GUARD]
Color palette: Purple (#9333ea) to violet (#7c3aed) to fuchsia (#d946ef) on black (#0a0a0b).
DARK MODE: Always. Rich purple/violet gradients.
Line weight: 2px primary with soft glow, flowing organic lines.
Corners: Rounded (8px) with gradient borders.
Fill: Multi-stop gradients (purple-violet-fuchsia), neural network texture (3% opacity).
Depth: Flowing glow depth (purple glow at 25% opacity, 12-20px radius).
Special: Data flow visualizations, neural network patterns, AI-suggestive elements.
Mood: AI-powered security, autonomous protection, intelligent defense.
Avoid: Static compositions, single-color fills, dated tech imagery.
Illustration Style: Clean Developer¶
variant_illustration_clean_developer:
id: "clean_developer"
name: "Clean Developer Illustrations"
description: "Developer-focused clarity, technical excellence, minimal sophistication"
use_case: "Technical documentation, API guides, developer onboarding"
# Color Palette
colors:
primary_fill: "{{indigo_600}}" # #4f46e5
secondary_fill: "{{violet_600}}" # #7c3aed
accent: "{{cyan_500}}" # #06b6d4
stroke_primary: "{{indigo_700}}" # #4338ca
stroke_secondary: "{{slate_400}}" # #94a3b8
background: "{{white}}" # #ffffff
surface: "{{slate_50}}" # #f8fafc
code_bg: "{{slate_100}}" # #f1f5f9
shadow: "rgba(79, 70, 229, 0.06)" # indigo_600 @ 6%
highlight: "{{indigo_500}}" # #6366f1 @ 10%
# Line Weights
line_weights:
primary: "1.5-2px"
secondary: "1px"
detail: "0.5px"
emphasis: "2-2.5px"
outline: "1.5px"
code_border: "1px"
# Corner Treatments
corners:
style: "rounded-consistent"
radius: "{{radius_lg}}" # 8px
inner_radius: "{{radius_md}}" # 6px
code_radius: "{{radius_md}}" # 6px for code blocks
description: "Consistently rounded, precise and clean"
# Fill & Depth
fill_style:
approach: "minimal-gradient"
gradient_angle: "135deg"
gradient_strength: "5-10%"
texture: "none"
texture_opacity: 0
depth_style:
approach: "subtle-shadow"
shadow_offset: "2px"
shadow_blur: "6px"
shadow_opacity: 0.06
layering: "clean-z-stack"
# Mood & Composition
mood:
- clean
- precise
- developer-friendly
- documented
- minimal
composition:
balance: "precise-grid"
whitespace: 0.50
density: "spacious"
focal_point: "clear-logical"
prompt_prefix: |
[ILLUSTRATION STYLE: CLEAN DEVELOPER]
Color palette: Indigo (#4f46e5) with violet (#7c3aed) accents on pure white.
Light mode: Pristine white backgrounds, generous whitespace.
Line weight: 1.5-2px primary strokes, precise consistent weights.
Corners: Consistently rounded (8px), mathematical precision.
Fill: Minimal gradients (5-10%), no texture.
Depth: Very subtle shadows (6% opacity, 6px blur).
Special: Code block styling, monospace elements, grid-based layouts.
Mood: Developer-focused, documentation-quality, technical precision.
Avoid: Decorative elements, heavy textures, busy compositions.
Illustration Style: Creative Clay¶
variant_illustration_creative_clay:
id: "creative_clay"
name: "Creative Clay Illustrations"
description: "Distinctive creativity, unique expression, memorable character"
use_case: "Friendly illustrations, marketing heroes, brand storytelling"
# Color Palette
colors:
primary_fill: "{{slate_900}}" # #0f172a
secondary_fill: "{{slate_700}}" # #334155
accent: "{{orange_500}}" # #f97316
accent_secondary: "{{amber_500}}" # #f59e0b
accent_cool: "{{sbk_sky}}" # #0ea5e9
stroke_primary: "{{slate_800}}" # #1e293b
stroke_secondary: "{{slate_400}}" # #94a3b8
background: "{{cool_white}}" # #f8fafc
surface: "{{white}}" # #ffffff
shadow: "rgba(15, 23, 42, 0.15)" # slate_900 @ 15%
highlight: "{{amber_200}}" # For emphasis
blob_colors:
- "{{orange_500}}"
- "{{amber_500}}"
- "{{sbk_sky}}"
# Line Weights
line_weights:
primary: "2.5-3px"
secondary: "2px"
detail: "1px"
emphasis: "3.5-4px"
outline: "2.5px"
blob_stroke: "0px" # Blobs are fill-only
# Corner Treatments
corners:
style: "pill"
radius: "{{radius_2xl}}" # 16px
inner_radius: "{{radius_xl}}" # 12px
blob_style: "organic-fluid"
description: "Very rounded to pill shapes, organic fluid forms"
# Fill & Depth
fill_style:
approach: "3d-clay"
gradient_angle: "multi-directional"
gradient_strength: "20-30%"
texture: "noise-grain"
texture_opacity: 0.015
clay_shading: true
depth_style:
approach: "dramatic-shadow"
shadow_offset: "12px"
shadow_blur: "24px"
shadow_opacity: 0.15
layering: "bold-overlap"
floating_elements: true
# Mood & Composition
mood:
- distinctive
- creative
- memorable
- bold
- playful-professional
composition:
balance: "bold-asymmetric"
whitespace: 0.45
density: "statement"
focal_point: "hero-element"
# Special Elements
special_elements:
blob_backgrounds:
enabled: true
colors: ["{{accent}}", "{{accent_secondary}}", "{{accent_cool}}"]
opacity: 0.10
blur: "{{blur_2xl}}" # 40px
floating_elements:
enabled: true
animation: "gentle-float"
depth_offset: "10-30px"
clay_style:
material: "soft-matte-clay"
highlight_position: "top-left"
shadow_softness: 0.6
prompt_prefix: |
[ILLUSTRATION STYLE: CREATIVE CLAY]
Color palette: Charcoal (#0f172a) with warm orange (#f97316) and amber (#f59e0b).
Background: Cool white (#f8fafc) with organic blob gradients (10% opacity).
Line weight: 2.5-3px primary, bold confident strokes.
Corners: Very rounded (16px+), pill shapes, organic fluid forms.
Fill: 3D clay-style with soft matte finish, directional lighting.
Depth: Dramatic shadows (15% opacity, 24px blur), floating depth.
Texture: Subtle noise grain at 1.5% opacity.
Special: Blob backgrounds, 3D clay-style characters/objects, floating elements.
Mood: Distinctive, creative, memorable, boldly professional.
Avoid: Generic templates, flat lifeless fills, forgettable compositions.
Illustration Style: Blueprint Technical¶
variant_illustration_blueprint_technical:
id: "blueprint_technical"
name: "Blueprint Technical Illustrations"
description: "Technical engineering precision, documentation-grade, annotation-rich"
use_case: "Technical/engineering illustrations, architecture diagrams, specification drawings"
# Color Palette
colors:
primary_fill: "{{sbk_blue}}" # #2563eb
secondary_fill: "{{slate_600}}" # #475569
accent: "{{cyan_500}}" # #06b6d4
stroke_primary: "{{sbk_navy}}" # #0f172a
stroke_secondary: "{{slate_500}}" # #64748b
background: "{{slate_50}}" # #f8fafc (light blueprint)
surface: "{{white}}" # #ffffff
grid_color: "{{slate_300}}" # #cbd5e1
annotation_color: "{{sbk_blue}}" # #2563eb
dimension_color: "{{slate_600}}" # #475569
callout_bg: "{{white}}" # #ffffff
# Line Weights
line_weights:
primary: "2px"
secondary: "1px"
detail: "0.5px"
emphasis: "2.5px"
outline: "1.5px"
dimension_line: "0.75px"
grid_line: "0.5px"
callout_line: "1px"
# Corner Treatments
corners:
style: "precision"
radius: "{{radius_sm}}" # 2px for technical accuracy
inner_radius: "0px"
callout_radius: "{{radius_md}}" # 6px for callout boxes
description: "Precise technical, minimal radius for accuracy"
# Fill & Depth
fill_style:
approach: "flat-technical"
gradient_angle: "none"
gradient_strength: 0
texture: "technical-grid"
texture_opacity: 0.05
depth_style:
approach: "orthographic"
shadow_offset: "0px"
shadow_blur: "0px"
shadow_opacity: 0
layering: "exploded-view"
# Annotation System
annotations:
style: "engineering"
leader_lines:
style: "angular" # 90-degree bends
weight: "1px"
terminator: "arrow-small"
callout_boxes:
border: "1px solid {{annotation_color}}"
background: "{{callout_bg}}"
padding: "8px 12px"
radius: "{{radius_md}}"
dimension_lines:
style: "double-headed-arrow"
extension_lines: true
text_position: "above-centered"
numbering:
style: "circled"
size: "20px"
fill: "{{annotation_color}}"
text_color: "{{white}}"
# Grid System
grid:
enabled: true
style: "engineering"
major_spacing: "40px"
minor_spacing: "10px"
major_opacity: 0.15
minor_opacity: 0.05
# Mood & Composition
mood:
- precise
- technical
- documented
- systematic
- engineering-grade
composition:
balance: "grid-aligned"
whitespace: 0.35
density: "information-rich"
focal_point: "primary-component"
annotation_zones: "margins-and-callouts"
prompt_prefix: |
[ILLUSTRATION STYLE: BLUEPRINT TECHNICAL]
Color palette: Blueprint blue (#2563eb, #0f172a) with slate grays on light (#f8fafc).
Line weight: 2px primary, 1px secondary, 0.5px detail/grid lines.
Corners: Precise technical (2px radius), engineering accuracy.
Fill: Flat technical fills, no gradients, grid texture (5% opacity).
Depth: Orthographic/isometric projection, exploded view capability.
Grid: Engineering grid (40px major, 10px minor), subtle visibility.
ANNOTATIONS:
- Leader lines with angular (90-degree) bends
- Numbered callouts in blue circles
- Dimension lines with extension lines
- Callout boxes with labels
- Cross-reference markers
Special: Technical accuracy, engineering conventions, specification-ready.
Mood: Precise, technical, documented, systematic, professional.
Avoid: Decorative elements, soft edges, non-orthographic views.
Illustration Philosophy¶
SBK illustrations must: - Clarify complex concepts visually - Feel human despite technical subject matter - Maintain consistency across all touchpoints using {{active_variant}} tokens - Scale appropriately from spot to hero usage - Support accessibility with clear visual hierarchy
Illustration Anti-Patterns¶
Never create: - Clipart or generic stock illustration style - Overly literal depictions (avoid "person with laptop") - Busy, cluttered compositions - Inconsistent line weights or styles (use {{line_weights.primary}}, {{line_weights.secondary}}) - Illustrations that require text to understand
Illustration Styles¶
Primary Style: Confident Clarity¶
[SBK BRAND DNA]
Professional technology consulting. Clear, confident, trustworthy.
[ILLUSTRATION STYLE: CONFIDENT CLARITY]
Primary illustration approach. Inherits from {{active_variant}}.
[CHARACTERISTICS]
Line weight: {{line_weights.primary}} primary, {{line_weights.detail}} detail.
Corners: {{corners.style}} ({{corners.radius}} equivalent).
Fill style: {{fill_style.approach}} with {{fill_style.gradient_strength}} gradient.
Depth: {{depth_style.approach}} or flat with layering.
Complexity: Medium (enough detail to be interesting, not overwhelming).
[COLOR APPROACH]
Primary elements: {{colors.primary_fill}}.
Secondary: {{colors.secondary_fill}}.
Accents: {{colors.accent}}.
Backgrounds: {{colors.background}} or transparent.
Shadows: {{depth_style.shadow_opacity}} opacity.
[LINE STYLE]
Stroke: Rounded caps and joins.
Consistency: Uniform weight within element type.
Detail lines: 50% of primary weight.
[MOOD]
{{mood}} keywords applied.
Approachable but professional.
Confident without being aggressive.
Clear without being simplistic.
Modern without being trendy.
Secondary Style: Abstract Conceptual¶
[ILLUSTRATION STYLE: ABSTRACT CONCEPTUAL]
For complex or abstract concepts. Uses {{active_variant}} color tokens.
[CHARACTERISTICS]
Geometric: Circles, rectangles, flowing curves in {{colors.primary_fill}}, {{colors.accent}}.
Symbolic: Represent ideas, not literal objects.
Minimal: Essential elements only.
Dynamic: Suggests movement or connection.
[USE CASES]
Conceptual headers.
Process visualization.
Value proposition graphics.
Abstract backgrounds.
Tertiary Style: Technical Precision¶
[ILLUSTRATION STYLE: TECHNICAL PRECISION]
For technical documentation and diagrams. See blueprint_technical variant for full specification.
[CHARACTERISTICS]
Clean: Precise geometry.
Labeled: Clear annotations using {{annotations.style}}.
Systematic: Consistent visual language.
Functional: Prioritizes clarity over aesthetics.
[USE CASES]
Architecture diagrams.
Technical documentation.
Process flows.
System visualizations.
Hero Illustrations¶
Landing Page Hero¶
[ASSET: ILLUSTRATION - HERO LANDING]
Large-scale illustration for landing page headers.
Variant: {{active_variant}}
[SPECIFICATIONS]
Dimensions: 1200x800px or 16:9 aspect.
Complexity: Medium-high.
Focal point: Clear visual hierarchy.
[COMPOSITION]
Primary element: Central, 40-50% of canvas.
Supporting elements: Frame primary, guide eye.
Negative space: 30-40% for text overlay areas.
Flow: Left-to-right reading direction.
[STYLE APPLICATION]
Colors: {{colors.primary_fill}}, {{colors.secondary_fill}}, {{colors.accent}}.
Line weights: {{line_weights.primary}} primary, {{line_weights.secondary}} supporting.
Corners: {{corners.style}} at {{corners.radius}}.
Depth: {{depth_style.approach}}, shadow at {{depth_style.shadow_opacity}}.
[SUBJECT APPROACHES]
Shield/Protection: For security services (use cyber_shield or sentinel_guard variants).
Network/Connection: For IT infrastructure.
Growth/Transformation: For strategic services.
Dashboard/Clarity: For visibility services (use clean_developer variant).
[CONTEXT INTEGRATION]
Text overlay area: Left or center-left.
CTA placement consideration: Clear area for buttons.
Responsive: Elements can be cropped or repositioned.
[EXAMPLE PROMPT]
Create hero illustration showing digital transformation journey.
Style: {{active_variant.prompt_prefix}}
Central: Stylized building/organization evolving from legacy to cloud.
Left side: Complex tangled systems in {{colors.secondary_fill}} (muted).
Right side: Organized cloud architecture in {{colors.primary_fill}} (vibrant).
Connecting: Flowing lines in {{colors.accent}} showing transformation path.
Depth: {{depth_style.approach}} perspective.
Include: Subtle security shields, upward growth indicators.
Avoid: Literal computer imagery, generic cloud icons.
Feature Section Hero¶
[ASSET: ILLUSTRATION - HERO FEATURE]
Medium-scale illustration for feature sections.
Variant: {{active_variant}}
[SPECIFICATIONS]
Dimensions: 800x600px or 4:3 aspect.
Complexity: Medium.
Position: Left or right of content.
[STYLE APPLICATION]
Apply {{active_variant.prompt_prefix}}
Line weights: {{line_weights.primary}} primary, {{line_weights.detail}} detail.
Corners: {{corners.radius}}.
Fill: {{fill_style.approach}}.
[SUBJECTS BY SERVICE]
Protect (Security) - Recommended variants: cyber_shield, sentinel_guard:
- Shield formations with dynamic protection rings
- Lock mechanisms with flowing security layers
- Threat detection with alert visualization
Plan (Strategic) - Recommended variants: trusted_advisor, clean_developer:
- Roadmap with milestones and connections
- Compass with strategic direction indicators
- Blueprint with structured planning elements (use blueprint_technical)
Operate (Managed Services) - Recommended variants: trusted_advisor, modern_partner:
- Dashboard with real-time metrics visualization
- Operations center with monitoring elements
- Gears with smooth, efficient operation flow
Innovate (Transformation) - Recommended variants: creative_clay, bold_challenger:
- Rocket with growth trajectory
- Evolution stages with transformation flow
- Light bulb with innovation energy
[AVOID]
Generic business people.
Stock-style handshake imagery.
Overly complex technical details.
Spot Illustrations¶
Icon-Scale Spots¶
[ASSET: ILLUSTRATION - SPOT SMALL]
Small spot illustrations for lists and highlights.
Variant: {{active_variant}}
[SPECIFICATIONS]
Dimensions: 64x64px to 128x128px.
Complexity: Low (2-3 elements max).
Style: Simplified version of {{active_variant}} style.
[STYLE APPLICATION]
Line weight: {{line_weights.secondary}} (reduced for small scale).
Corners: {{corners.radius}} scaled proportionally.
Colors: {{colors.primary_fill}}, {{colors.accent}} only.
No texture at this scale.
[USE CASES]
Feature list bullets.
Benefit highlights.
Navigation accents.
Card decorations.
[DESIGN RULES]
Single focal element.
Minimal detail.
Clear silhouette.
Works at small sizes.
Content Spots¶
[ASSET: ILLUSTRATION - SPOT CONTENT]
Medium spot illustrations for content sections.
Variant: {{active_variant}}
[SPECIFICATIONS]
Dimensions: 200x200px to 400x400px.
Complexity: Medium.
Style: Full {{active_variant}} style.
[STYLE APPLICATION]
Apply full {{active_variant.prompt_prefix}}
Line weights: {{line_weights.primary}} primary, {{line_weights.detail}} detail.
Corners: {{corners.radius}}.
Fill: {{fill_style.approach}}, texture at {{fill_style.texture_opacity}}.
[USE CASES]
Blog post headers.
Section dividers.
Sidebar accents.
Card illustrations.
[SUBJECTS]
Security Concepts (use cyber_shield, sentinel_guard):
- Firewall as protective barrier
- Encryption as secure transport
- Monitoring as watchful guardian
- Compliance as structured framework
Business Concepts (use trusted_advisor, modern_partner):
- Growth as upward trajectory
- Efficiency as streamlined flow
- Collaboration as connected nodes
- Strategy as planned pathway
Friendly/Marketing (use creative_clay):
- Approachable 3D clay-style elements
- Bold distinctive character
- Memorable visual hooks
Decorative Spots¶
[ASSET: ILLUSTRATION - SPOT DECORATIVE]
Abstract decorative elements.
Variant: {{active_variant}}
[SPECIFICATIONS]
Dimensions: Variable.
Complexity: Low.
Style: Abstract/geometric using {{active_variant}} colors.
[TYPES]
Floating shapes: Circles, rounded rectangles in {{colors.accent}}, {{colors.primary_fill}}.
Line accents: Flowing curves in {{colors.secondary_fill}}.
Pattern fragments: Brand pattern sections.
Gradient blobs: Soft transitions using {{colors.accent}} at {{effect_tokens.opacity_10}}.
[CREATIVE CLAY SPECIAL]
When using creative_clay variant:
- Blob backgrounds enabled
- Colors: {{special_elements.blob_backgrounds.colors}}
- Opacity: {{special_elements.blob_backgrounds.opacity}}
- Blur: {{special_elements.blob_backgrounds.blur}}
[USE CASES]
Background decoration.
Section transitions.
Empty space filling.
Visual rhythm creation.
Conceptual Illustrations¶
Process Visualization¶
[ASSET: ILLUSTRATION - PROCESS]
Multi-step process illustration.
Variant: {{active_variant}}
[SPECIFICATIONS]
Orientation: Horizontal preferred.
Steps: 3-5 for clarity.
Connections: Clear flow indicators in {{colors.accent}}.
[STYLE APPLICATION]
Apply {{active_variant.prompt_prefix}}
Step containers: {{corners.radius}}, {{colors.surface}} fill.
Connectors: {{line_weights.secondary}} weight, {{colors.accent}} color.
Numbering: {{colors.primary_fill}} fill with {{colors.surface}} text.
[STRUCTURE]
Each step: Distinct illustration element.
Connectors: Arrows or flowing lines.
Numbering: Optional but helpful.
Labels: Integrated or adjacent.
[PROCESS TYPES]
Onboarding journey.
Assessment methodology.
Implementation phases.
Support escalation.
[BLUEPRINT TECHNICAL VARIANT]
When using blueprint_technical variant:
- Apply {{annotations.style}} annotation system
- Use {{annotations.leader_lines.style}} leader lines
- Include {{annotations.dimension_lines.style}} where appropriate
- Grid overlay at {{grid.major_opacity}} opacity
[STYLE NOTES]
Progressive complexity or simplification.
Color coding for phases using {{colors.accent}}, {{colors.secondary_fill}}.
Consistent element sizing.
Clear start and end points.
Comparison Visualization¶
[ASSET: ILLUSTRATION - COMPARISON]
Before/after or versus illustrations.
Variant: {{active_variant}}
[SPECIFICATIONS]
Layout: Side-by-side or stacked.
Contrast: Clear visual differentiation.
Balance: Equal visual weight.
[STYLE APPLICATION]
Apply {{active_variant.prompt_prefix}}
Before state: Muted colors ({{colors.secondary_fill}} at 60% opacity).
After state: Vibrant colors ({{colors.primary_fill}}, {{colors.accent}}).
Divider: {{line_weights.emphasis}} weight, {{colors.accent}}.
[COMPARISON TYPES]
Before/After:
- Left: Chaotic, complex, problematic (muted {{colors.secondary_fill}}).
- Right: Organized, clear, resolved (vibrant {{colors.primary_fill}}).
- Transformation indicator between in {{colors.accent}}.
With/Without:
- Without SBK: Struggles illustrated in muted tones.
- With SBK: Success illustrated in {{colors.primary_fill}}, {{colors.accent}}.
Competitor vs SBK:
- Generic approach: Sterile, impersonal (grays).
- SBK approach: Engaged, strategic ({{colors.primary_fill}}).
[VISUAL CONTRAST]
Color: Muted vs vibrant using {{active_variant}} palette.
Organization: Chaotic vs structured.
Emotion: Stressed vs confident.
Direction: Stuck vs progressing.
Metaphor Illustrations¶
[ASSET: ILLUSTRATION - METAPHOR]
Abstract concept visualization.
Variant: {{active_variant}}
[SPECIFICATIONS]
Subject: Single metaphorical concept.
Clarity: Metaphor should be intuitive.
Style: Abstract Conceptual using {{active_variant}} tokens.
[STYLE APPLICATION]
Colors: {{colors.primary_fill}} for main element, {{colors.accent}} for energy/action.
Line weights: {{line_weights.emphasis}} for main forms.
Depth: {{depth_style.approach}}.
[EFFECTIVE METAPHORS]
Security (use cyber_shield, sentinel_guard):
- Shield: Protection, defense in {{colors.primary_fill}}
- Fortress: Comprehensive security
- Umbrella: Coverage, safety
- Lock: Access control
- Wall: Barrier protection
Strategy (use trusted_advisor, clean_developer):
- Compass: Direction, guidance
- Map: Planning, navigation
- Bridge: Transition, connection
- Telescope: Vision, foresight
- Lighthouse: Guidance, clarity
Operations (use trusted_advisor, modern_partner):
- Engine: Power, efficiency
- Orchestra: Coordination, harmony
- Dashboard: Visibility, control
- Network: Connection, flow
- Gears: Integration, function
Growth (use creative_clay, bold_challenger):
- Plant/Tree: Organic growth in {{colors.accent}}
- Ladder: Achievement, progression
- Rocket: Rapid advancement
- Mountain: Challenge, summit
- Arrow: Direction, momentum
[AVOID METAPHORS]
Handshake: Overused.
Puzzle pieces: Cliche.
Light bulb: Generic.
Target/bullseye: Overused.
Industry-Specific Illustrations¶
Healthcare¶
[CONTEXT: HEALTHCARE ILLUSTRATIONS]
HIPAA-compliant, trust-focused imagery.
Recommended variants: trusted_advisor, sentinel_guard (for security)
[STYLE APPLICATION]
Apply {{active_variant.prompt_prefix}}
Primary color: {{colors.primary_fill}} for trust.
Accent: {{colors.accent}} for vitality.
Background: {{colors.background}} for cleanliness.
[ELEMENTS TO INCLUDE]
Medical symbols: Stylized, modern in {{colors.primary_fill}}.
Patient data: Abstract representation (never identifiable).
Compliance: Certification badges in {{colors.accent}}.
Security: Protection layers using cyber_shield elements.
[ELEMENTS TO AVOID]
Identifiable patient imagery.
Specific medical procedures.
Distressing health imagery.
Overly clinical aesthetics.
[MOOD]
Calm, reassuring.
Professional, competent.
Secure, protective.
Modern, progressive.
Legal/Professional Services¶
[CONTEXT: LEGAL ILLUSTRATIONS]
Sophisticated, trustworthy imagery.
Recommended variants: trusted_advisor, bold_challenger
[STYLE APPLICATION]
Apply {{active_variant.prompt_prefix}}
Primary: {{colors.primary_fill}} for authority.
Secondary: {{colors.secondary_fill}} for sophistication.
Background: {{colors.surface}} for premium feel.
[ELEMENTS TO INCLUDE]
Document security in {{colors.primary_fill}}.
Confidentiality indicators.
Professional environments.
Structured processes (use blueprint_technical for diagrams).
[ELEMENTS TO AVOID]
Gavels, scales (overused).
Aggressive imagery.
Casual representations.
[MOOD]
Authoritative.
Confidential.
Organized.
Premium.
Financial Services¶
[CONTEXT: FINANCIAL ILLUSTRATIONS]
Trust and security focused.
Recommended variants: trusted_advisor, cyber_shield
[STYLE APPLICATION]
Apply {{active_variant.prompt_prefix}}
Primary: {{colors.primary_fill}} for stability.
Accent: {{colors.success}} for growth indicators.
Security elements: Use cyber_shield variant colors for protection messaging.
[ELEMENTS TO INCLUDE]
Data protection in {{colors.primary_fill}}.
Transaction security.
Regulatory compliance.
Growth indicators in {{colors.success}}.
[ELEMENTS TO AVOID]
Literal money imagery.
Gambling metaphors.
Risk-suggesting imagery.
[MOOD]
Stable, reliable.
Secure, protected.
Growth-oriented.
Professional.
Technology/SaaS¶
[CONTEXT: TECHNOLOGY ILLUSTRATIONS]
Modern, innovative imagery.
Recommended variants: clean_developer, creative_clay, sentinel_guard
[STYLE APPLICATION]
Apply {{active_variant.prompt_prefix}}
For developer audiences: Use clean_developer variant.
For marketing: Use creative_clay variant.
For security products: Use sentinel_guard variant.
[ELEMENTS TO INCLUDE]
Cloud architecture in {{colors.primary_fill}}.
Integration flows using {{colors.accent}} connections.
API connections (clean_developer style).
Development processes.
[ELEMENTS TO AVOID]
Dated technology.
Binary code backgrounds.
Matrix-style aesthetics.
[MOOD]
Innovative.
Scalable.
Connected.
Efficient.
Character Guidelines¶
When to Use Characters¶
[CHARACTER USAGE GUIDELINES]
RECOMMENDED USE (use creative_clay variant):
- Testimonial sections.
- Team/about pages.
- Onboarding flows.
- Educational content.
AVOID FOR:
- Security messaging (impersonal is more trustworthy - use cyber_shield).
- Technical documentation (use clean_developer, blueprint_technical).
- Abstract concepts.
- Hero sections.
Character Style¶
[CHARACTER STYLE GUIDE]
Primary variant for characters: creative_clay
[DEMOGRAPHICS]
Diverse: Various backgrounds, ages, genders.
Professional: Business appropriate attire.
Realistic: Proportional, not cartoonish.
[RENDERING]
Style: {{creative_clay.special_elements.clay_style.material}}.
3D clay aesthetic with soft matte finish.
Highlight position: {{creative_clay.special_elements.clay_style.highlight_position}}.
Shadow softness: {{creative_clay.special_elements.clay_style.shadow_softness}}.
[STYLE APPLICATION]
Fill: {{fill_style.approach}} (3d-clay).
Corners: {{corners.style}} (pill/organic).
Colors: {{colors.primary_fill}} for clothing, {{colors.accent}} for accents.
Expression: Neutral to positive.
Pose: Active, engaged, professional.
[AVOID]
Exaggerated features.
Stereotypical representations.
Overly casual poses.
Distracting details.
Animation Considerations¶
Static-to-Animated¶
[ANIMATION PREPARATION]
Respect {{active_configuration.animation_reduced}} preference.
When creating illustrations, consider:
- Layer separation for animation.
- Clear element boundaries.
- Movement paths defined.
- Timing-appropriate complexity.
[ANIMATION TYPES]
Entrance: Elements appearing/building.
Hover: Subtle response to interaction.
Loop: Continuous subtle motion.
Transition: Between states or concepts.
[VARIANT-SPECIFIC ANIMATION]
creative_clay:
- Floating elements: {{special_elements.floating_elements.animation}}
- Gentle depth shifts on interaction
sentinel_guard:
- Data flow animations
- Pulse effects on key elements
- Neural network subtle movement
cyber_shield:
- Scan line movement
- Alert pulse effects
- Grid flicker on interaction
[TECHNICAL NOTES]
SVG preferred for web animation.
Export layers separately.
Define animation keyframes.
Consider reduced motion preferences (check {{active_configuration.animation_reduced}}).
File Specifications¶
Export Formats¶
export_formats:
web:
format: "SVG (preferred) or PNG"
background: "Transparent"
optimization: "SVGO or TinyPNG"
print:
format: "PDF or EPS"
color_mode: "CMYK"
resolution: "Vector or 300dpi"
presentation:
format: "PNG"
background: "Transparent or white"
resolution: "2x for retina"
Naming Convention¶
sbk-illust-{type}-{variant}-{subject}-v{version}.{ext}
Examples:
sbk-illust-hero-trusted_advisor-security-shield-v2.svg
sbk-illust-spot-cyber_shield-threat-detection-v1.svg
sbk-illust-process-clean_developer-api-flow-4step-v1.svg
sbk-illust-compare-creative_clay-before-after-v1.svg
sbk-illust-tech-blueprint_technical-architecture-v1.svg
Quality Checklist¶
Before finalizing any illustration:
- Consistent with {{active_variant}} style guidelines
- Uses correct color tokens ({{colors.primary_fill}}, {{colors.accent}}, etc.)
- Line weights match specification ({{line_weights.primary}}, {{line_weights.secondary}})
- Corner treatment matches {{corners.style}} at {{corners.radius}}
- Appropriate complexity for intended size
- Clear focal point and hierarchy
- Works with and without color
- Accessible (sufficient contrast per {{accessibility.level}})
- Scalable without quality loss
- Properly layered for animation
- File optimized for delivery
- Named according to convention (includes variant name)
- Documented with usage notes and variant reference
Last Updated: February 2026 Version: 2.0 (Parameterized Design System Integration)