Skip to content

Background Generation Prompts

Prompt templates for hero sections, slides, documents, and marketing backgrounds with parameterized design system integration

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


Design System Configuration

# CONFIGURATION BLOCK - Inherits from readme.md
# Reference: /00-foundation/brand/generative-prompts/readme.md

parent_config: "./readme.md"

background_defaults:
  inherit_from: "sbk_design_config"

  # Override or extend as needed
  asset_category: "BACKGROUND"

  # Default token references (resolve from parent)
  tokens:
    primary_color: "{{primary}}"
    primary_dark: "{{primary_dark}}"
    primary_light: "{{primary_light}}"
    background_color: "{{background}}"
    surface_color: "{{surface}}"
    text_primary: "{{text_primary}}"
    text_secondary: "{{text_secondary}}"
    border_color: "{{border}}"
    accent_color: "{{accent}}"

  # Grid system reference (from parent grid_frame_systems)
  grid_system: "{{layout.grid_system}}"
  frame_style: "{{layout.frame_style}}"
  frame_opacity: "{{layout.frame_opacity}}"

  # Background-specific settings
  texture_opacity: "{{visual.texture_opacity}}"
  gradient_style: "{{visual.gradient_style}}"

Background Philosophy

SBK backgrounds must: - Support, never compete with content - Create atmosphere of trust and expertise - Maintain consistency across touchpoints - Enable readability for overlaid text - Integrate with active variant design system

Background Anti-Patterns

Never generate backgrounds that: - Compete with foreground content - Use busy or distracting patterns - Rely on stock photo cliches (handshakes, keyboards) - Feel cold, sterile, or generic corporate - Use harsh gradients or neon colors - Contradict the active variant's mood keywords


Variant-Specific Background Treatments

Trusted Advisor (Default)

variant_id: "trusted_advisor"
background_treatment:
  color_base: "{{cool_white}}"              # #f8fafc
  gradient_direction: "135deg"
  gradient_stops:
    - "{{sbk_navy}} 0%"                     # #0f172a
    - "{{sbk_blue}} 50%"                    # #2563eb
    - "{{sbk_sky}} 100%"                    # #0ea5e9
  texture: "subtle-paper-grain"
  texture_opacity: 0.03
  grid_system: "subtle_grid"
  frame_style: "frame_solid"
  frame_opacity: 0.1
  corner_style: "rounded (8px)"

  mood_keywords:
    - established
    - reliable
    - sophisticated
    - grounded

  composition_rules:
    - "Centered balance with 60-40 asymmetric interest"
    - "Strategic negative space"
    - "Soft ambient gradients"
    - "Subtle geometric precision"

Modern Partner

variant_id: "modern_partner"
background_treatment:
  color_base: "{{warm_cream}}"              # #faf5f0
  gradient_direction: "135deg"
  gradient_stops:
    - "{{teal_600}} 0%"                     # #0d9488
    - "{{cyan_600}} 100%"                   # #0891b2
  texture: "organic-flow"
  texture_opacity: 0.02
  grid_system: "minimal_grid"
  frame_style: "frame_solid"
  frame_opacity: 0.08
  corner_style: "rounded-large (12px)"

  mood_keywords:
    - approachable
    - collaborative
    - progressive
    - warm

  composition_rules:
    - "Flowing asymmetric layouts"
    - "Welcoming negative space"
    - "Watercolor soft edges"
    - "Natural material references"

Bold Challenger

variant_id: "bold_challenger"
background_treatment:
  color_base: "{{white}}"                   # #ffffff
  gradient_direction: "none"
  gradient_stops: null                      # No gradients
  texture: "sharp-geometric"
  texture_opacity: 0
  grid_system: "structured_grid"
  frame_style: "frame_solid"
  frame_opacity: 0.2
  corner_style: "sharp (6px max)"

  mood_keywords:
    - bold
    - different
    - confident
    - disruptive

  composition_rules:
    - "Dynamic tension layouts"
    - "Strategic color blocking"
    - "High contrast elements"
    - "Edge-anchored compositions"

Cyber Shield (CrowdStrike-Inspired)

variant_id: "cyber_shield"
background_treatment:
  color_base: "{{dark_bg_primary}}"         # #0a0a0b
  dark_mode: true
  gradient_direction: "180deg"
  gradient_stops:
    - "{{dark_surface}} 0%"                 # #1c1c1f
    - "{{dark_bg_primary}} 100%"            # #0a0a0b
  texture: "scan-lines"
  texture_opacity: 0.02
  grid_system: "cyber_grid"
  frame_style: "frame_glow"
  frame_opacity: 0.4
  glow_color: "{{red_600}}"                 # #dc2626
  glow_radius: "8px"
  corner_style: "bracketed"

  mood_keywords:
    - protective
    - vigilant
    - technical
    - operational

  composition_rules:
    - "Command center density"
    - "Data-rich layouts"
    - "Corner brackets on containers"
    - "Scan line overlays"
    - "Red glow on key intersections"

  special_elements:
    corner_brackets: true
    scan_lines: true
    hex_grid_overlay: true
    threat_node_indicators: true

Sentinel Guard (SentinelOne-Inspired)

variant_id: "sentinel_guard"
background_treatment:
  color_base: "{{dark_bg_primary}}"         # #0a0a0b
  dark_mode: true
  gradient_direction: "135deg"
  gradient_stops:
    - "{{purple_600}} 0%"                   # #9333ea
    - "{{violet_600}} 50%"                  # #7c3aed
    - "{{fuchsia_500}} 100%"                # #d946ef
  texture: "neural-network"
  texture_opacity: 0.03
  grid_system: "dashboard_grid"
  frame_style: "frame_gradient"
  frame_opacity: 0.3
  glow_color: "{{purple_500}}"              # #a855f7
  glow_radius: "16px"
  corner_style: "rounded (8px)"

  mood_keywords:
    - intelligent
    - autonomous
    - predictive
    - futuristic

  composition_rules:
    - "Flowing tech aesthetic"
    - "Organic data flow patterns"
    - "Neural network textures"
    - "Purple/violet gradient glows"

  special_elements:
    neural_patterns: true
    flowing_data_lines: true
    ai_node_indicators: true

Clean Developer (Stripe-Inspired)

variant_id: "clean_developer"
background_treatment:
  color_base: "{{white}}"                   # #ffffff
  dark_mode: false
  gradient_direction: "135deg"
  gradient_stops:
    - "{{indigo_600}} 0%"                   # #4f46e5
    - "{{violet_600}} 100%"                 # #7c3aed
  texture: "none"
  texture_opacity: 0
  grid_system: "minimal_grid"
  frame_style: "frame_solid"
  frame_opacity: 0.1
  corner_style: "rounded (8px)"

  mood_keywords:
    - clean
    - precise
    - developer-friendly
    - minimal

  composition_rules:
    - "Generous whitespace"
    - "Precise alignment"
    - "Mathematical spacing"
    - "Pure clean surfaces"

  special_elements:
    code_block_styling: true
    syntax_highlight_accents: true

Creative Clay (Clay-Inspired)

variant_id: "creative_clay"
background_treatment:
  color_base: "{{cool_white}}"              # #f8fafc
  dark_mode: false
  gradient_direction: "multi-stop"
  gradient_stops:
    - "{{orange_500}} blob1"                # #f97316
    - "{{amber_500}} blob2"                 # #f59e0b
    - "{{sbk_sky}} blob3"                   # #0ea5e9
  texture: "noise-grain"
  texture_opacity: 0.015
  grid_system: "editorial_grid"
  frame_style: "frame_solid"
  frame_opacity: 0.08
  corner_style: "pill (16px+)"

  mood_keywords:
    - distinctive
    - creative
    - memorable
    - bold

  composition_rules:
    - "Bold asymmetric layouts"
    - "Alternating light/dark sections"
    - "Organic blob gradient overlays"
    - "Oversized display typography"

  special_elements:
    blob_shapes: true
    blob_opacity: 0.1
    blob_blur: "40px"
    section_alternation: true
    floating_3d_elements: true

Blueprint Technical

variant_id: "blueprint_technical"
background_treatment:
  color_base: "{{sbk_navy}}"                # #0f172a (Deep blueprint blue)
  dark_mode: false
  gradient_direction: "none"
  gradient_stops: null
  texture: "engineering-grid"
  texture_opacity: 0.15
  grid_system: "technical_grid"
  frame_style: "frame_dashed"
  frame_opacity: 0.3
  corner_style: "corner-marks"

  mood_keywords:
    - technical
    - precise
    - engineered
    - detailed
    - authoritative

  composition_rules:
    - "Engineering drawing aesthetic"
    - "Precise measurement annotations"
    - "Technical grid overlay"
    - "Corner registration marks"
    - "Ruler tick marks along edges"

  # SPECIAL NOTES: Blueprint Technical Variant
  # This variant emulates traditional engineering drawings and blueprints.
  # Key visual elements include:
  special_elements:
    measurement_marks: true               # Ruler-style tick marks
    ruler_ticks:
      edge_placement: "all"               # top, bottom, left, right
      major_interval: "100px"             # Major tick every 100px
      minor_interval: "20px"              # Minor tick every 20px
      tick_color: "{{slate_300}}"         # #cbd5e1
      tick_opacity: 0.4
    corner_registration: true             # Registration marks in corners
    grid_labels: true                     # A-1, B-2 style grid references
    dimension_lines: true                 # Dimension annotation lines
    center_marks: true                    # Center point indicators
    fold_lines: false                     # Optional fold indicators

  typography:
    primary_font: "{{font_mono}}"          # Monospace for technical feel
    label_style: "uppercase"
    label_tracking: "{{tracking_wider}}"

  colors:
    background: "#0f172a"                  # Deep blueprint blue
    grid_lines: "#3b82f6"                  # Lighter blue grid
    text: "#f8fafc"                        # White text
    annotations: "#94a3b8"                 # Slate for annotations
    measurement_marks: "#cbd5e1"           # Light slate for rulers

Grid/Frame System Integration

Grid System Reference

All backgrounds inherit grid systems from the parent readme.md. Reference these by token:

grid_systems:
  minimal_grid:
    token: "{{grid_frame_systems.minimal_grid}}"
    description: "No visible grid, pure content focus"
    use_cases:
      - "Modern Partner hero backgrounds"
      - "Clean Developer content sections"
      - "Minimal aesthetic contexts"

  subtle_grid:
    token: "{{grid_frame_systems.subtle_grid}}"
    description: "Barely visible structure for sophisticated layouts"
    use_cases:
      - "Trusted Advisor hero backgrounds"
      - "Corporate presentation slides"
      - "Professional document backgrounds"

  structured_grid:
    token: "{{grid_frame_systems.structured_grid}}"
    description: "Clear structure for data-heavy layouts"
    use_cases:
      - "Bold Challenger backgrounds"
      - "Feature comparison sections"
      - "Data-rich slide backgrounds"

  technical_grid:
    token: "{{grid_frame_systems.technical_grid}}"
    description: "Blueprint/technical drawing aesthetic"
    use_cases:
      - "Blueprint Technical backgrounds"
      - "Technical documentation"
      - "Engineering/architecture content"
      - "Process diagrams"

  editorial_grid:
    token: "{{grid_frame_systems.editorial_grid}}"
    description: "Magazine/editorial layout structure"
    use_cases:
      - "Creative Clay backgrounds"
      - "Long-form content sections"
      - "Magazine-style layouts"

  dashboard_grid:
    token: "{{grid_frame_systems.dashboard_grid}}"
    description: "Card-based dashboard layouts"
    use_cases:
      - "Sentinel Guard backgrounds"
      - "Analytics dashboard sections"
      - "Multi-metric displays"

  cyber_grid:
    token: "{{grid_frame_systems.cyber_grid}}"
    description: "Security/cyber operations aesthetic"
    use_cases:
      - "Cyber Shield backgrounds"
      - "Security operations displays"
      - "Threat monitoring interfaces"

Frame Style Reference

frame_styles:
  frame_solid:
    token: "{{frame_tokens.frame_solid}}"
    css: "border: 1px solid {{border_color}}"

  frame_dotted:
    token: "{{frame_tokens.frame_dotted}}"
    css: "border: 1px dotted {{border_color}}; spacing: 4px"

  frame_dashed:
    token: "{{frame_tokens.frame_dashed}}"
    css: "border: 1px dashed {{border_color}}; dash: 8px; gap: 4px"

  frame_double:
    token: "{{frame_tokens.frame_double}}"
    css: "border: 3px double {{border_color}}"

  frame_gradient:
    token: "{{frame_tokens.frame_gradient}}"
    css: "border: 2px solid; border-image: linear-gradient(135deg, {{primary}}, {{accent}}) 1"

  frame_glow:
    token: "{{frame_tokens.frame_glow}}"
    css: "border: 1px solid {{glow_color}}; box-shadow: 0 0 {{glow_radius}} {{glow_color}}40"

Website Hero Backgrounds

Hero: Abstract Geometric

[SBK BRAND DNA]
Professional technology consulting aesthetic. Trustworthy, expert, understated.
Clean geometric precision with subtle organic warmth.
Strategic negative space. Timeless quality over trends.

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

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

[ASSET: HERO BACKGROUND]
Full-width hero section background for website homepage.
Must accommodate headline text overlay in left 60% of composition.

[CONTEXT: WEB HERO]
Desktop: 1920x1080 minimum, scales to 4K.
Mobile consideration: Left-side content focus.
RGB optimized, WebP output.

[SPECIFICATIONS]
3840x2160px, 144dpi, WebP/PNG output.
Text overlay safe zone: Left 60%, top 40%.

[SUBJECT]
Abstract geometric composition using interconnected angular planes.
Layered depth through overlapping translucent shapes.
Color gradient from {{primary_dark}} bottom-right to {{background}} top-left.
Subtle ambient glow at key geometric intersections.
Clean composition with strategic negative space.
Implies precision, network, connection without being literal.
Grid overlay: {{layout.grid_system}} at {{layout.frame_opacity}} opacity.
Texture: {{visual.texture}} at {{visual.texture_opacity}} opacity.

[AVOID]
Literal tech imagery. Binary code. Circuit boards.
Stock photo overlays. Busy or cluttered composition.
Harsh color transitions. Pure white areas.
{{active_variant.mood.anti_patterns}}

Hero: Gradient Wave

[SBK BRAND DNA]
Professional technology consulting aesthetic.

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

[GRID: {{layout.grid_system}}]
Frame style: {{layout.frame_style}} at {{layout.frame_opacity}} opacity.

[ASSET: HERO BACKGROUND]
Flowing abstract gradient background.

[SUBJECT]
Smooth flowing wave forms using {{primary}} and {{secondary}} colors.
Organic curves suggesting movement and progress.
Gradient from {{primary_dark}} through {{primary}} to {{background}}.
Subtle texture overlay ({{visual.texture}} at {{visual.texture_opacity}} opacity).
Ethereal, calming, professional atmosphere.
Grid integration: {{layout.grid_system}} subtle overlay.

[AVOID]
Sharp edges. Neon colors. Busy wave patterns.
Too many color transitions. 80s/90s gradient aesthetic.
{{active_variant.mood.anti_patterns}}

Hero: Minimal Abstract

[SBK BRAND DNA]
Clean geometric precision with subtle organic warmth.
Strategic negative space. Confident restraint.

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

[GRID: {{layout.grid_system}}]
Frame style: {{layout.frame_style}} at {{layout.frame_opacity}} opacity.

[ASSET: HERO BACKGROUND]
Ultra-minimal abstract background.

[SUBJECT]
Large-scale geometric forms at edge of composition.
Primarily negative space ({{background}}) with strategic {{accent}} accents.
Single or few geometric elements suggesting precision.
Whisper of depth through subtle shadow ({{shadow_tokens.shadow_sm}}).
Maximum restraint, maximum impact.
Corner style: {{active_variant.frames.corner_style}}.

[AVOID]
Centered compositions. Multiple competing elements.
Too much going on. Dark backgrounds (unless dark_mode variant).
{{active_variant.mood.anti_patterns}}

Section Backgrounds

Feature Section: Light

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

[GRID: {{layout.grid_system}}]

[ASSET: SECTION BACKGROUND LIGHT]
Background for content sections on light theme.

[SUBJECT]
Subtle tonal variation from pure white.
Soft gradient to {{slate_100}} or {{background}}.
Optional: Extremely subtle geometric pattern at 3-5% opacity.
Creates visual separation without color change.
Grid overlay: {{layout.grid_system}} at reduced opacity ({{layout.frame_opacity}} * 0.5).

[SPECIFICATIONS]
Seamless tile or full-section coverage.
Text must remain highly readable ({{text_primary}} on light).

Feature Section: Contrast

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

[GRID: {{layout.grid_system}}]

[ASSET: SECTION BACKGROUND CONTRAST]
Background for differentiated sections (testimonials, CTA).

[SUBJECT]
{{primary_dark}} to {{primary}} subtle gradient.
Rich, deep color that frames white/light text.
Subtle texture ({{visual.texture}}) to prevent flat appearance.
Optional: Abstract geometric element in corner at 10-15% opacity.
Frame style: {{layout.frame_style}} for section borders.

[SPECIFICATIONS]
White text overlay consideration.
WCAG AA contrast minimum.

Presentation Backgrounds

Slide: Title

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

[GRID: {{layout.grid_system}}]

[ASSET: SLIDE BACKGROUND TITLE]
Title slide for presentations and decks.

[CONTEXT: PRESENTATION]
16:9 aspect ratio. Projector visibility consideration.
Content zone: Center and center-left.

[SUBJECT]
Clean gradient background from {{primary_dark}} to {{primary}}.
Or: {{background}} background with geometric accent in corner.
Strategic placement avoiding text zones.
Professional, confident, not busy.
Corner style: {{active_variant.frames.corner_style}}.
Grid overlay: {{layout.grid_system}} subtle presence.

[SPECIFICATIONS]
1920x1080px.
Safe zone for title text (center 60%).

Slide: Content

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

[GRID: {{layout.grid_system}}]

[ASSET: SLIDE BACKGROUND CONTENT]
Standard content slide background.

[SUBJECT]
Near-white ({{slate_50}} or {{background}}) with minimal accent.
Subtle header zone differentiation at top.
Optional: Thin accent bar (4px) at top in {{primary}}.
Maximum focus on content, minimal distraction.
Frame style: {{layout.frame_style}} at {{layout.frame_opacity}} for structure.

[SPECIFICATIONS]
1920x1080px.
Full content area usable.

Slide: Section Divider

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

[GRID: {{layout.grid_system}}]

[ASSET: SLIDE BACKGROUND DIVIDER]
Section divider slides between major topics.

[SUBJECT]
Bold use of {{primary_dark}}.
Large section number or icon in {{primary_light}}.
Strategic asymmetric layout.
Confident break in visual flow.
Grid overlay: {{layout.grid_system}} for structure.
Corner style: {{active_variant.frames.corner_style}}.

[SPECIFICATIONS]
1920x1080px.
Title text in {{text_inverse}}, center or left-aligned.

Document Backgrounds

Letterhead Background

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

[GRID: {{layout.grid_system}}]

[ASSET: DOCUMENT LETTERHEAD]
Subtle background for official correspondence.

[SUBJECT]
Near-white with extremely subtle watermark.
Optional: Light geometric element in corner at 5% opacity.
Clean, professional, minimal.
Focus entirely on letter content.
Frame style: {{layout.frame_style}} for margin guides (non-printing).

[SPECIFICATIONS]
8.5x11" (letter) or A4.
300dpi for print.
Leave margins clear for text.

Report Cover

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

[GRID: {{layout.grid_system}}]

[ASSET: DOCUMENT COVER]
Cover page for reports and proposals.

[SUBJECT]
Bold use of brand colors ({{primary}}, {{primary_dark}}).
Abstract geometric composition.
Clear zone for title text.
Professional gravitas without stuffiness.
Texture: {{visual.texture}} at {{visual.texture_opacity}}.
Corner style: {{active_variant.frames.corner_style}}.

[SPECIFICATIONS]
8.5x11" or A4.
300dpi.
Title safe zone: Upper third.

Certificate Background

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

[GRID: {{layout.grid_system}}]

[ASSET: DOCUMENT CERTIFICATE]
Background for certificates and credentials.

[SUBJECT]
Elegant subtle pattern.
Hint of security/official aesthetic without being cliched.
Border or frame element using {{layout.frame_style}}.
Warm but professional.
Grid: {{layout.grid_system}} for alignment guides.

[SPECIFICATIONS]
8.5x11" landscape orientation.
300dpi.
Central content zone clear.

Email Backgrounds

Email Header

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

[ASSET: EMAIL HEADER]
Header graphic for email campaigns.

[SUBJECT]
Clean gradient ({{primary_dark}} to {{primary}}) or subtle pattern.
Logo placement zone (left or center).
Professional but not heavy.
Quick load consideration.
Background color: {{background}}.

[SPECIFICATIONS]
600x200px.
Compressed file size (<100KB).
Works on white email body.
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: EMAIL FOOTER]
Footer graphic for email campaigns.

[SUBJECT]
Subtle continuation of header theme.
Much lighter than header.
Supports contact info and social links.
Accent color: {{accent}} for links.

[SPECIFICATIONS]
600x100px.
Very compressed file size.

Social Media Backgrounds

LinkedIn Banner

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

[GRID: {{layout.grid_system}}]

[ASSET: LINKEDIN BANNER]
Company page and personal profile banner.

[SUBJECT]
Professional abstract composition.
Consider profile photo circular crop overlap.
Subtle brand elements ({{primary}}, {{accent}}), not overwhelming.
Supports optional headline text.
Texture: {{visual.texture}} at {{visual.texture_opacity}}.

[SPECIFICATIONS]
1584x396px (company page).
1128x191px (personal).
Left side text safe.

Twitter/X Header

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

[GRID: {{layout.grid_system}}]

[ASSET: TWITTER HEADER]
Profile header image.

[SUBJECT]
Wider, more panoramic composition.
Bold but professional using {{primary}} and {{accent}}.
Works with white profile/follow buttons.
Grid overlay: {{layout.grid_system}} subtle.

[SPECIFICATIONS]
1500x500px.
Central focus, edges may crop.

Blueprint Technical: Special Prompt Templates

Blueprint Technical: Hero Background

[SBK BRAND DNA]
Professional technology consulting aesthetic with engineering precision.
Technical authority through blueprint-style visual language.

[STYLE: BLUEPRINT TECHNICAL]
Color palette: Deep blueprint blue (#0f172a) with white/light annotations.
Mood: Technical, precise, engineered, authoritative.
Typography: Monospace for labels, uppercase with wide tracking.
Special: Engineering drawing aesthetic with measurement marks.

[GRID: TECHNICAL GRID]
Dashed inner dividers, dotted cell borders.
Corner registration marks in all four corners.
Grid labels (A-1, B-2, etc.) for reference.

[ASSET: HERO BACKGROUND - TECHNICAL]
Full-width hero with engineering blueprint aesthetic.

[CONTEXT: TECHNICAL/ENGINEERING CONTENT]
Desktop: 1920x1080 minimum.
Used for technical documentation, architecture overviews.

[SPECIFICATIONS]
3840x2160px, 144dpi, PNG output.
Text overlay safe zone: Left 60%.

[SUBJECT]
Deep blueprint blue (#0f172a) background with technical grid overlay.
Engineering drawing aesthetic:
- Ruler tick marks along all edges (major: 100px, minor: 20px)
- Corner registration marks (crosshair style)
- Dashed grid lines at 15% opacity
- Dotted subdivision lines at 10% opacity
- Grid reference labels (A1, B2, etc.) in corners
- Dimension annotation line style available for content

Subtle geometric technical shapes suggesting:
- System architecture
- Network topology
- Process flow
- Component relationships

Light blue (#3b82f6) for grid lines and annotations.
White (#f8fafc) for primary text areas.
Slate (#94a3b8) for measurement marks and secondary annotations.

[SPECIAL ELEMENTS]
Ruler ticks:
  - Major ticks every 100px equivalent
  - Minor ticks every 20px equivalent
  - Tick color: #cbd5e1 at 40% opacity
  - Edge placement: all four sides

Corner registration:
  - Crosshair style marks
  - 20px arm length
  - 1px stroke weight

Center marks:
  - Optional center point indicators
  - Diamond or crosshair style

[AVOID]
Organic shapes. Soft edges. Warm colors.
Decorative elements. Playful aesthetic.
Stock photo overlays. Literal technical diagrams.

Blueprint Technical: Slide Background

[STYLE: BLUEPRINT TECHNICAL]
Color palette: Deep blueprint blue with technical annotations.

[GRID: TECHNICAL GRID]
Corner marks: Enabled.
Grid labels: Enabled.
Ruler ticks: Edge placement.

[ASSET: SLIDE BACKGROUND - BLUEPRINT]
Presentation slide with blueprint aesthetic.

[SPECIFICATIONS]
1920x1080px.

[SUBJECT]
Blueprint blue (#0f172a) with technical grid overlay.
Ruler tick marks along edges (subtle, 30% opacity).
Corner registration marks for professional technical feel.
Grid reference system for pointing to content areas.
Clean zones for content with subtle grid structure.

Header zone: Top 15% with measurement annotation style.
Content zone: Center 70% with reduced grid visibility.
Footer zone: Bottom 15% for navigation/page numbers.

[ELEMENTS]
- Edge ruler ticks (major/minor intervals)
- Corner registration crosshairs
- Subtle baseline grid for text alignment
- Optional dimension lines for pointing to content

Quality Checklist

Before using any background:

Brand Alignment

  • Aligns with brand DNA principles
  • Uses correct variant ({{active_variant.name}})
  • Colors match variant palette tokens
  • Grid system matches variant default ({{layout.grid_system}})
  • Frame style appropriate ({{layout.frame_style}})
  • Texture matches variant specification

Technical Quality

  • Text overlay zones are functional
  • Contrast meets accessibility requirements (WCAG {{accessibility.level}})
  • File size appropriate for use case
  • Scales well across device sizes
  • Resolution/DPI correct for output

Variant Compliance

  • Mood keywords reflected in composition
  • Anti-patterns avoided
  • Special elements included if variant requires
  • Corner style matches variant specification
  • Dark/light mode correct for variant

Token Verification

  • All {{token}} placeholders resolved correctly
  • Colors inherit from active variant
  • Grid/frame settings inherited from parent config
  • Texture opacity matches variant setting

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