Pattern Generation Prompts¶
Prompt templates for repeating patterns, textures, and decorative elements using the parameterized design system
Created: February 2026 Tool: Nano Banana Pro Related: Framework Overview | Visual Identity
Design System Configuration¶
# PATTERN ASSET CONFIGURATION
# Inherits from: ./readme.md (Global Design System Tokens)
# Active configuration propagates automatically from parent
pattern_configuration:
inherits: "./readme.md#active_configuration"
# Token References (resolved from active variant)
tokens:
primary_color: "{{active_variant.colors.primary}}"
secondary_color: "{{active_variant.colors.secondary}}"
accent_color: "{{active_variant.colors.accent}}"
background_color: "{{active_variant.colors.background}}"
surface_color: "{{active_variant.colors.surface}}"
border_color: "{{active_variant.colors.border}}"
text_primary: "{{active_variant.colors.text_primary}}"
# Grid & Frame References
grid_system: "{{layout.grid_system}}"
frame_style: "{{layout.frame_style}}"
frame_opacity: "{{layout.frame_opacity}}"
# Visual Style References
border_radius: "{{active_variant.visual.border_radius}}"
texture: "{{active_variant.visual.texture}}"
texture_opacity: "{{active_variant.visual.texture_opacity}}"
# Pattern-Specific Settings
pattern_defaults:
seamless: true
svg_preferred: true
base_opacity: 0.1
blend_mode: "multiply"
Pattern Philosophy¶
SBK patterns must: - Reinforce, never distract from content - Feel intentional not decorative for decoration's sake - Work at multiple scales from subtle texture to bold accent - Remain timeless avoiding trendy pattern styles - Respect active variant visual language and mood
Pattern Anti-Patterns¶
Never generate patterns that: - Overwhelm or compete with content - Feel arbitrary or without purpose - Are too literal (circuits, binary, code) - Date themselves with trendy styles - Clash with other brand elements - Violate active variant's anti-patterns list
Variant-Specific Pattern Styles¶
Trusted Advisor Patterns¶
variant_pattern_style:
id: "trusted_advisor"
pattern_mood:
- refined
- understated
- professional
- established
preferred_patterns:
- network_grid
- dot_grid
- paper_grain
- subtle_linen
pattern_characteristics:
line_weight: "1-2px"
opacity_range: "5-20%"
density: "low-medium"
rhythm: "regular with subtle variation"
color_usage: "monochrome, tinted with {{primary_color}}"
avoid_patterns:
- high_contrast_geometric
- scan_lines
- aggressive_angular
- neon_glow
Modern Partner Patterns¶
variant_pattern_style:
id: "modern_partner"
pattern_mood:
- organic
- flowing
- warm
- collaborative
preferred_patterns:
- wave_lines
- gradient_orbs
- organic_dots
- flowing_mesh
pattern_characteristics:
line_weight: "1-3px"
opacity_range: "5-25%"
density: "low"
rhythm: "organic, flowing"
color_usage: "warm teal/cyan gradients"
avoid_patterns:
- rigid_grid
- sharp_geometric
- technical_grid
- corner_brackets
Bold Challenger Patterns¶
variant_pattern_style:
id: "bold_challenger"
pattern_mood:
- bold
- decisive
- high_contrast
- distinctive
preferred_patterns:
- angular_mesh
- sharp_geometric
- block_pattern
- asymmetric_grid
pattern_characteristics:
line_weight: "2-4px"
opacity_range: "15-40%"
density: "medium-high"
rhythm: "dynamic tension"
color_usage: "charcoal with orange accent"
avoid_patterns:
- soft_gradients
- organic_flow
- subtle_textures
- rounded_patterns
Cyber Shield Patterns¶
variant_pattern_style:
id: "cyber_shield"
pattern_mood:
- technical
- operational
- vigilant
- threat_aware
preferred_patterns:
- hex_grid
- scan_lines
- data_grid
- threat_mesh
- corner_bracket_overlay
pattern_characteristics:
line_weight: "1px"
opacity_range: "10-40%"
density: "high"
rhythm: "precise, grid-locked"
color_usage: "dark base with {{accent_color}} glow"
glow_enabled: true
glow_color: "{{red_600}}"
glow_radius: "8px"
avoid_patterns:
- soft_textures
- organic_flow
- warm_patterns
- paper_grain
Sentinel Guard Patterns¶
variant_pattern_style:
id: "sentinel_guard"
pattern_mood:
- intelligent
- flowing_tech
- protective
- futuristic
preferred_patterns:
- neural_network
- flowing_data_streams
- gradient_mesh
- orb_clusters
pattern_characteristics:
line_weight: "1-2px"
opacity_range: "10-30%"
density: "medium"
rhythm: "organic-tech hybrid"
color_usage: "purple/violet gradients"
glow_enabled: true
glow_color: "{{purple_500}}"
glow_radius: "16px"
avoid_patterns:
- sharp_angular
- rigid_grid
- high_contrast
- red_accents
Clean Developer Patterns¶
variant_pattern_style:
id: "clean_developer"
pattern_mood:
- minimal
- precise
- clean
- functional
preferred_patterns:
- minimal_dot_grid
- subtle_line_grid
- code_block_pattern
- invisible_structure
pattern_characteristics:
line_weight: "1px"
opacity_range: "3-10%"
density: "very low"
rhythm: "mathematical precision"
color_usage: "monochrome indigo tint"
avoid_patterns:
- heavy_textures
- decorative_elements
- organic_patterns
- glow_effects
Creative Clay Patterns¶
variant_pattern_style:
id: "creative_clay"
pattern_mood:
- distinctive
- playful_professional
- bold
- memorable
preferred_patterns:
- blob_shapes
- noise_grain
- organic_mesh
- gradient_blobs
pattern_characteristics:
line_weight: "variable (1-4px)"
opacity_range: "10-30%"
density: "statement zones"
rhythm: "bold asymmetric"
color_usage: "multi-color accent blobs"
blob_enabled: true
blob_colors: ["{{orange_500}}", "{{amber_500}}", "{{sbk_sky}}"]
avoid_patterns:
- rigid_grid
- technical_aesthetic
- scan_lines
- corner_brackets
Blueprint Technical Patterns¶
variant_pattern_style:
id: "blueprint_technical"
pattern_mood:
- engineering
- precise
- technical_drawing
- architectural
preferred_patterns:
- blueprint_grid
- dimension_lines
- cross_hatch
- corner_registration
- technical_annotation
pattern_characteristics:
line_weight: "0.5-1px"
opacity_range: "20-50%"
density: "high"
rhythm: "engineering precision"
color_usage: "cyan/blue on dark blue-gray"
special_elements:
corner_marks: true
grid_labels: true
dimension_arrows: true
cross_hatching: true
fold_marks: true
avoid_patterns:
- organic_flow
- soft_gradients
- blob_shapes
- decorative_elements
Grid System Patterns¶
Seven available grid systems from the design system, each with pattern implications:
Minimal Grid Pattern¶
[ASSET: PATTERN - MINIMAL GRID]
Grid System: {{grid_tokens.minimal_grid}}
[SUBJECT]
No visible grid structure—pure whitespace relationships.
Content-focused negative space.
Alignment through implied structure only.
Used where patterns would distract.
[SPECIFICATIONS]
No pattern output—represents absence of visible grid.
Use when active_configuration.grid_system = "minimal_grid"
Subtle Grid Pattern¶
[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}}
[ASSET: PATTERN - SUBTLE GRID]
Grid System: {{grid_tokens.subtle_grid}}
Frame Style: {{frame_tokens.frame_solid}}
Opacity: 5-10%
[SUBJECT]
Barely visible dotted intersection points.
Ultra-fine lines (0.5px) at 5% opacity.
Suggests structure without declaring it.
Background layer for sophisticated layouts.
Monochrome—uses {{border_color}} tinted.
[SPECIFICATIONS]
Seamless tile, 100x100px base.
SVG format for scalability.
Works as overlay at 5-10% opacity.
[AVOID]
Visible seams. Heavy line weights.
Obvious grid appearance. Competing with content.
Structured Grid Pattern¶
[ASSET: PATTERN - STRUCTURED GRID]
Grid System: {{grid_tokens.structured_grid}}
Frame Style: {{frame_tokens.frame_solid}}
Opacity: 10-20%
[SUBJECT]
Clear column dividers with intersection markers.
Solid lines (1px) at {{layout.frame_opacity}} opacity.
Defines content zones explicitly.
Professional, organized appearance.
Color: {{border_color}}
[SPECIFICATIONS]
Seamless tile, 200x200px base.
SVG format preferred.
Works at 10-20% opacity.
[AVOID]
Overly dense grid. Too many subdivisions.
Competing with data content.
Technical Grid Pattern¶
[ASSET: PATTERN - TECHNICAL GRID]
Grid System: {{grid_tokens.technical_grid}}
Frame Style: {{frame_tokens.frame_dashed}}
Opacity: 15-30%
[SUBJECT]
Blueprint-style grid with dashed inner lines.
Corner registration marks at intersections.
Cell labeling zones (A-1, B-2, etc.).
Dotted subdivision lines within cells.
Engineering drawing aesthetic.
Color: {{border_color}} with {{primary_color}} accents.
[SPECIFICATIONS]
Seamless tile, 400x400px base.
SVG format for precision.
Works at 15-30% opacity.
Include corner bracket overlays.
[AVOID]
Soft or organic elements.
Inconsistent line weights.
Missing registration marks.
Editorial Grid Pattern¶
[ASSET: PATTERN - EDITORIAL GRID]
Grid System: {{grid_tokens.editorial_grid}}
Frame Style: {{frame_tokens.frame_double}}
Opacity: 8-15%
[SUBJECT]
Magazine-style column rules.
Double-line outer frame at low opacity.
Vertical column dividers for text flow.
Headline/body zone differentiation.
Sophisticated print-inspired structure.
Color: {{border_color}}
[SPECIFICATIONS]
Non-repeating or large tile (800x600px).
SVG format preferred.
Works at 8-15% opacity.
[AVOID]
Web-style card grids.
Technical/engineering aesthetic.
Dense data layouts.
Dashboard Grid Pattern¶
[ASSET: PATTERN - DASHBOARD GRID]
Grid System: {{grid_tokens.dashboard_grid}}
Frame Style: {{frame_tokens.frame_solid}}
Opacity: 10-15%
[SUBJECT]
Card-based container outlines.
Rounded corners ({{border_radius}}) on each cell.
Gap-defined spacing (no connecting lines).
Individual cell shadows ({{shadow_style}}).
Modern SaaS dashboard aesthetic.
Color: {{surface_color}} with {{border_color}} outlines.
[SPECIFICATIONS]
Component-based (not seamless tile).
SVG format for scalability.
Cell radius: {{radius_lg}}
[AVOID]
Connected grid lines.
Technical/blueprint aesthetic.
Dense information grids.
Cyber Grid Pattern¶
[ASSET: PATTERN - CYBER GRID]
Grid System: {{grid_tokens.cyber_grid}}
Frame Style: {{frame_tokens.frame_glow}}
Opacity: 20-40%
[SUBJECT]
Security operations aesthetic grid.
Scan line texture at 2% opacity.
Corner bracket overlays (「 」style).
Glow on outer frame ({{accent_color}}).
Sector labeling zones.
Threat level indicator zones.
Color: {{border_glow}} with {{accent_color}} glow.
[SPECIFICATIONS]
Seamless tile, 600x600px base.
Include scan line overlay.
Glow radius: {{glow_radius}}
Dark mode optimized.
[AVOID]
Light backgrounds.
Soft or warm aesthetic.
Organic elements.
Rounded corners.
Frame Style Patterns¶
Six available frame styles for pattern borders and structure:
Solid Frame Pattern Elements¶
frame_pattern:
style: "solid"
token_ref: "{{frame_tokens.frame_solid}}"
prompt_block: |
[FRAME: SOLID]
Clean single-line borders.
Weight: {{frame_tokens.frame_solid.weight}}
Opacity: {{frame_tokens.frame_solid.opacity}}
Color: {{border_color}}
Use cases: Cards, containers, form fields, structured layouts.
Variants: trusted_advisor, clean_developer, bold_challenger
Corner treatment: Sharp or rounded per {{active_variant.frames.corner_style}}
Dotted Frame Pattern Elements¶
frame_pattern:
style: "dotted"
token_ref: "{{frame_tokens.frame_dotted}}"
prompt_block: |
[FRAME: DOTTED]
Technical/draft aesthetic borders.
Weight: {{frame_tokens.frame_dotted.weight}}
Spacing: {{frame_tokens.frame_dotted.spacing}}
Opacity: {{frame_tokens.frame_dotted.opacity}}
Color: {{border_color}}
Use cases: Technical diagrams, draft states, guidelines, annotations.
Variants: technical_grid, cyber_shield, blueprint_technical
Creates: Technical precision, engineering drawing feel.
Dashed Frame Pattern Elements¶
frame_pattern:
style: "dashed"
token_ref: "{{frame_tokens.frame_dashed}}"
prompt_block: |
[FRAME: DASHED]
Dynamic structure borders.
Weight: {{frame_tokens.frame_dashed.weight}}
Dash: {{frame_tokens.frame_dashed.dash_length}}
Gap: {{frame_tokens.frame_dashed.gap_length}}
Opacity: {{frame_tokens.frame_dashed.opacity}}
Color: {{border_color}}
Use cases: Action areas, selections, dynamic content zones.
Variants: bold_challenger, technical_grid
Suggests: Movement, interactivity, selection states.
Double Frame Pattern Elements¶
frame_pattern:
style: "double"
token_ref: "{{frame_tokens.frame_double}}"
prompt_block: |
[FRAME: DOUBLE]
Premium emphasis borders.
Weight: {{frame_tokens.frame_double.weight}}
Opacity: {{frame_tokens.frame_double.opacity}}
Color: {{border_color}}
Use cases: Certificates, premium content, editorial emphasis.
Variants: editorial_grid, creative_clay
Creates: Premium feel, certificate aesthetic, formal emphasis.
Gradient Frame Pattern Elements¶
frame_pattern:
style: "gradient"
token_ref: "{{frame_tokens.frame_gradient}}"
prompt_block: |
[FRAME: GRADIENT]
Modern dynamic borders.
Weight: {{frame_tokens.frame_gradient.weight}}
From: {{primary_color}}
To: {{accent_color}}
Opacity: {{frame_tokens.frame_gradient.opacity}}
Color: Gradient from {{primary_color}} to {{accent_color}}
Use cases: Featured content, CTAs, highlights, hero elements.
Variants: sentinel_guard, creative_clay
Creates: Modern, dynamic feel with brand color integration.
Glow Frame Pattern Elements¶
frame_pattern:
style: "glow"
token_ref: "{{frame_tokens.frame_glow}}"
prompt_block: |
[FRAME: GLOW]
Tech/cyber aesthetic borders.
Weight: {{frame_tokens.frame_glow.weight}}
Glow Radius: {{frame_tokens.frame_glow.glow_radius}}
Glow Color: {{accent_color}}
Glow Opacity: {{frame_tokens.frame_glow.glow_opacity}}
Use cases: Active states, security alerts, tech emphasis.
Variants: cyber_shield, sentinel_guard
Creates: Cyber operations feel, active/alert states, tech aesthetic.
Blueprint Technical Patterns (Special)¶
CAD Hatching Patterns¶
[SBK BRAND DNA]
Professional technology consulting aesthetic. Engineering precision.
Technical drawing quality. Blueprint authenticity.
[STYLE: BLUEPRINT TECHNICAL]
Color palette: Cyan (#06b6d4) on dark blue-gray (#1e293b).
Mood: Engineering precision, architectural clarity, technical authority.
Grid: Visible technical grid with measurement annotations.
[ASSET: PATTERN - CAD HATCHING]
Cross-hatch patterns for technical drawings and diagrams.
[SUBJECT]
Precision cross-hatching at 45° angles.
Line weight: 0.5px for hatch, 1px for boundaries.
Consistent 4px spacing between hatch lines.
Section indicator hatching (ANSI/ISO standards).
Material-indicating patterns (steel, concrete, insulation).
[HATCHING VARIANTS]
diagonal_45: Single direction at 45°
cross_hatch: Perpendicular 45° intersecting lines
brick: Offset horizontal lines (masonry)
concrete: Random dot stipple pattern
steel: Dense diagonal lines
insulation: Curved wave pattern
earth: Scattered irregular dots
[SPECIFICATIONS]
Seamless tiles, 50x50px minimum.
SVG format for scalability.
Line color: {{cyan_500}}
Background: Transparent or {{slate_800}}
Opacity: 30-50%
[AVOID]
Inconsistent spacing. Uneven line weights.
Non-standard hatching angles.
Decorative variations.
Engineering Annotation Styles¶
[ASSET: PATTERN - ENGINEERING ANNOTATIONS]
Annotation elements for technical diagrams.
[SUBJECT]
Dimension lines with arrow terminators.
Leader lines with callout boxes.
Section cut indicators (A-A, B-B style).
Datum references and symbols.
Tolerance notation zones.
Revision cloud patterns.
[ANNOTATION ELEMENTS]
dimension_line:
line_weight: "0.75px"
arrow_style: "architectural" # or "mechanical"
arrow_size: "8px"
text_offset: "4px"
extension_overshoot: "2px"
leader_line:
line_weight: "0.5px"
elbow_style: "right_angle"
callout_shape: "rectangle" # or "circle", "hexagon"
callout_border: "{{frame_tokens.frame_solid}}"
section_indicator:
line_weight: "1px"
line_style: "chain" # long-short-long pattern
arrow_size: "12px"
label_style: "circle_enclosed"
revision_cloud:
arc_size: "8px"
line_weight: "0.75px"
cloud_style: "continuous_arc"
[SPECIFICATIONS]
Component-based elements (not seamless).
SVG format required.
Color: {{cyan_500}} on {{slate_800}}
[AVOID]
Freehand appearance. Inconsistent sizing.
Non-standard symbol usage.
Dimension Line Patterns¶
[ASSET: PATTERN - DIMENSION LINES]
Standardized dimension notation system.
[SUBJECT]
Linear dimension lines with extension lines.
Angular dimension arcs with degree notation.
Radius and diameter indicators.
Chain dimensions and baseline dimensions.
Ordinate dimensions for coordinate systems.
[DIMENSION TYPES]
linear:
pattern: "extension_line → dimension_line → extension_line"
arrow_style: "filled_arrow" # 30° point
text_position: "above_centered"
angular:
pattern: "arc with arrow terminators"
center_mark: "small_cross"
degree_symbol: true
radius:
pattern: "R + value from arc center"
leader_to_arc: true
diameter:
pattern: "Ø + value through center"
centerline_cross: true
chain:
pattern: "sequential dimensions, shared extension lines"
total_dimension: "optional bracket above"
[SPECIFICATIONS]
Modular component system.
SVG format for precision.
Line weight: 0.5px (extension), 0.75px (dimension)
Color: {{cyan_500}}
Text: {{font_mono}} at {{text_xs}}
[AVOID]
Overlapping dimensions. Crowded notation.
Missing extension line gaps (should have 2px gap from object).
Blueprint Grid Base¶
[ASSET: PATTERN - BLUEPRINT GRID BASE]
Foundational blueprint grid for technical content.
[SUBJECT]
Major grid lines at 100px intervals.
Minor grid lines at 20px intervals.
Micro grid lines at 4px intervals (optional).
Corner registration marks with coordinates.
Grid origin marker (0,0) with axis labels.
Fold marks at standard paper positions.
[GRID HIERARCHY]
major_grid:
spacing: "100px"
line_weight: "1px"
opacity: 0.4
color: "{{cyan_500}}"
minor_grid:
spacing: "20px"
line_weight: "0.5px"
opacity: 0.2
color: "{{cyan_500}}"
micro_grid:
spacing: "4px"
line_weight: "0.25px"
opacity: 0.1
color: "{{cyan_500}}"
[REGISTRATION MARKS]
corner_style: "L-bracket with crosshair"
coordinate_labels: true
label_format: "A1, A2... B1, B2..."
fold_marks: "short perpendicular lines at margins"
[SPECIFICATIONS]
Large seamless tile, 800x800px minimum.
SVG format for infinite scale.
Background: {{slate_800}} or {{slate_900}}
Optimized for dark mode display.
[AVOID]
Uneven grid spacing. Missing registration marks.
Light mode backgrounds. Incorrect coordinate labels.
Geometric Patterns¶
Network Grid¶
[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: {{layout.grid_system}}]
Frame Style: {{layout.frame_style}} at {{layout.frame_opacity}} opacity.
[ASSET: PATTERN - NETWORK GRID]
Seamless repeating pattern suggesting interconnected network.
[SPECIFICATIONS]
Seamless tile, typically 200x200px base.
Works at 5-20% opacity overlay.
SVG preferred for scalability.
Color: {{primary_color}} or {{border_color}}
[SUBJECT]
Geometric grid pattern with nodes at intersections.
Thin lines (1-2px) connecting nodes in grid formation.
Some lines absent creating organic variation.
Nodes slightly larger at key intersections.
Suggests network/connection without being literal.
Monochrome (use with color overlay).
[AVOID]
Literal circuit board. Too regular/robotic.
Too many line weights. Too dense.
Angular Mesh¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - ANGULAR MESH]
Abstract angular repeating pattern.
Best with: bold_challenger, technical_grid variants.
[SUBJECT]
Interconnected triangular mesh.
Varying triangle sizes for organic feel.
Clean, sharp edges.
Some triangles filled with subtle opacity variation.
Mathematical precision with artistic variation.
Color: {{primary_color}}
[SPECIFICATIONS]
Seamless tile, 300x300px base.
Works at 10-30% opacity.
Dot Grid¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - DOT GRID]
Minimal dot grid pattern for subtle texture.
Best with: trusted_advisor, clean_developer, modern_partner variants.
[SUBJECT]
Regular grid of small circles (2-4px).
Consistent spacing (20-40px grid).
Single color (uses overlay for brand color).
Ultra-minimal, almost imperceptible at distance.
Color: {{border_color}}
[SPECIFICATIONS]
Seamless tile, 100x100px base.
Works at 20-50% opacity.
Great for subtle paper texture effect.
Isometric Grid¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - ISOMETRIC]
Isometric perspective grid pattern.
Best with: trusted_advisor, bold_challenger variants.
[SUBJECT]
Isometric cube or diamond grid.
Thin lines creating 3D illusion.
Some cubes appear solid, others wireframe.
Suggests depth and dimension.
Architectural/technical precision feel.
Color: {{border_color}} with {{primary_color}} accents
[SPECIFICATIONS]
Seamless tile, 400x400px base.
Works at 5-15% opacity.
Hexagonal Grid¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - HEXAGONAL]
Honeycomb hexagonal pattern.
Best with: cyber_shield, sentinel_guard variants.
[SUBJECT]
Interlocking hexagonal cells.
Thin line weight (1px).
Some cells filled at low opacity for variation.
Suggests security, protection, efficiency.
Technical but organic rhythm.
Color: {{border_color}} with optional {{accent_color}} highlights
[SPECIFICATIONS]
Seamless tile, 300x260px base (hex proportions).
Works at 10-25% opacity.
Optional glow on select hexagons for cyber variants.
Flow Patterns¶
Wave Lines¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - WAVE LINES]
Flowing horizontal wave pattern.
Best with: modern_partner, sentinel_guard variants.
[SUBJECT]
Parallel wavy lines flowing horizontally.
Gentle sine wave variation.
Lines vary slightly in wave amplitude.
Suggests motion, progress, flow.
Calming, professional movement.
Color: {{primary_color}}
[SPECIFICATIONS]
Seamless horizontal tile, 400x200px base.
Works at 10-25% opacity.
Gradient Orbs¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - GRADIENT ORBS]
Soft gradient circles/orbs pattern.
Best with: modern_partner, sentinel_guard, creative_clay variants.
[SUBJECT]
Scattered large soft circles with gradient.
Gradient from color to transparent (radial).
Various sizes, organic placement.
Overlapping creates depth.
Soft, ambient, atmospheric.
Colors: {{primary_color}}, {{accent_color}}
[SPECIFICATIONS]
Large scale pattern, 800x800px base.
Used at low opacity (5-15%).
Creates ambient glow effect.
Neural Network¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - NEURAL NETWORK]
AI/ML inspired network pattern.
Best with: sentinel_guard, cyber_shield variants.
[SUBJECT]
Layered node clusters at varying depths.
Connecting lines suggesting data flow.
Pulsing node highlights (for animated versions).
Organic spread with technical precision.
Suggests intelligent, adaptive systems.
Color: {{primary_color}} to {{accent_color}} gradient
[SPECIFICATIONS]
Large scale pattern, 600x600px base.
Works at 10-20% opacity.
Glow optional for dark variants.
Texture Overlays¶
Paper Grain¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: TEXTURE - PAPER GRAIN]
Subtle paper texture overlay.
Best with: trusted_advisor, modern_partner variants.
[SUBJECT]
Fine paper grain texture.
Organic, natural variation.
Not too coarse or obvious.
Adds warmth and tangibility to digital.
Color: Neutral gray values
[SPECIFICATIONS]
Seamless tile, 512x512px.
Used at 3-8% opacity.
Multiply or overlay blend mode.
Linen Texture¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: TEXTURE - LINEN]
Fine linen fabric texture.
Best with: trusted_advisor, modern_partner variants.
[SUBJECT]
Cross-hatched linen weave pattern.
Very subtle, barely visible.
Adds sophisticated tactile quality.
Not literal fabric—abstracted.
Color: Neutral gray values
[SPECIFICATIONS]
Seamless tile, 256x256px.
Used at 2-5% opacity.
Noise/Film Grain¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: TEXTURE - NOISE]
Digital noise or film grain overlay.
Best with: creative_clay, bold_challenger variants.
[SUBJECT]
Fine random noise pattern.
Monochrome (gray values).
Film-like quality without being retro.
Reduces flat digital appearance.
Color: Neutral gray values
[SPECIFICATIONS]
Seamless tile, 512x512px.
Used at 2-4% opacity.
Very subtle application.
Scan Lines¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: TEXTURE - SCAN LINES]
CRT/monitor scan line effect.
Best with: cyber_shield variants.
[SUBJECT]
Horizontal lines at 2px intervals.
Alternating opacity (100%, 0%).
Creates subtle screen effect.
Technical, retro-digital aesthetic.
Color: Transparent/black alternating
[SPECIFICATIONS]
Seamless tile, 4x4px base.
Used at 2-5% opacity.
Screen or overlay blend mode.
Accent Patterns¶
Corner Geometric¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - CORNER ACCENT]
Geometric accent for corners of layouts.
[SUBJECT]
Asymmetric geometric composition.
Angular overlapping shapes.
Contained to corner zone (200x200px area).
Fades to transparent.
Strong brand element for layout anchoring.
Color: {{primary_color}}, {{accent_color}}
[SPECIFICATIONS]
Non-repeating, 400x400px with corner focus.
Transparent background (PNG).
Multiple rotations for different corners.
Border Pattern¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - BORDER]
Repeating border or edge pattern.
[SUBJECT]
Thin geometric line pattern.
Works as horizontal or vertical border.
Simple repeating module.
Subtle but intentional.
Color: {{border_color}}
[SPECIFICATIONS]
Seamless horizontal tile, 100x20px.
Works at 50-100% opacity.
Accent application.
Divider Element¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - DIVIDER]
Section divider decorative element.
[SUBJECT]
Horizontal divider with geometric center.
Thin lines extending from central element.
More substantial than simple line.
Marks section transitions elegantly.
Color: {{border_color}} with {{accent_color}} center
[SPECIFICATIONS]
Single element, 600x40px.
Center transparent for overlay on any bg.
Corner Brackets (Cyber)¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - CORNER BRACKETS]
Technical corner bracket overlays.
Best with: cyber_shield, blueprint_technical variants.
[SUBJECT]
「 」style corner brackets.
1px line weight with optional glow.
Positioned at element corners.
Creates targeting/selection aesthetic.
Technical, operational feel.
Color: {{accent_color}} with glow
[SPECIFICATIONS]
Component-based (four corners).
SVG format.
Sizes: Small (16px), Medium (24px), Large (40px).
Service Pillar Patterns¶
Protect Pattern¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - PROTECT]
Pattern suggesting security and protection.
Service Pillar: Protect (Security & Compliance)
[SUBJECT]
Interlocking shield-like geometric forms.
Layered for depth and security feel.
Angular but not aggressive.
Protection without fortress aesthetic.
Color: {{primary_color}} with {{accent_color}}
[SPECIFICATIONS]
Seamless tile, 300x300px.
Service-specific accent use.
Plan Pattern¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - PLAN]
Pattern suggesting strategy and planning.
Service Pillar: Plan (Strategic Advisory)
[SUBJECT]
Interconnected nodes with pathways.
Suggests roadmap or flowchart abstracted.
Directional movement implied.
Strategic, thoughtful.
Color: {{primary_color}}, {{secondary_color}}
[SPECIFICATIONS]
Seamless tile, 400x400px.
Service-specific accent use.
Operate Pattern¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - OPERATE]
Pattern suggesting operations and systems.
Service Pillar: Operate (Managed Services)
[SUBJECT]
Circular and linear elements combined.
Suggests machinery or systems abstracted.
Continuous, reliable motion.
Efficient, optimized feel.
Color: {{primary_color}}, {{secondary_color}}
[SPECIFICATIONS]
Seamless tile, 300x300px.
Service-specific accent use.
Innovate Pattern¶
[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}
[ASSET: PATTERN - INNOVATE]
Pattern suggesting innovation and transformation.
Service Pillar: Innovate (Digital Transformation)
[SUBJECT]
Evolving geometric forms.
Shapes transitioning or transforming.
Forward movement and progress.
Exciting but professional.
Color: {{primary_color}} to {{accent_color}} gradient
[SPECIFICATIONS]
Seamless tile, 400x400px.
Service-specific accent use.
Usage Guidelines¶
Opacity Recommendations by Variant¶
| Variant | Background Use | Accent Use | Grid Overlay |
|---|---|---|---|
| trusted_advisor | 5-15% | 20-40% | 5-10% |
| modern_partner | 5-15% | 20-40% | 0-5% |
| bold_challenger | 15-30% | 40-60% | 15-25% |
| cyber_shield | 10-20% | 30-50% | 20-40% |
| sentinel_guard | 10-20% | 25-45% | 10-20% |
| clean_developer | 3-10% | 15-30% | 3-8% |
| creative_clay | 10-25% | 30-50% | 5-15% |
| blueprint_technical | 20-40% | 40-60% | 30-50% |
Blend Mode by Pattern Type¶
| Pattern Type | Light Background | Dark Background |
|---|---|---|
| Geometric Grid | Multiply | Screen or Normal |
| Texture Overlay | Overlay or Soft Light | Soft Light |
| Flow Patterns | Multiply | Screen |
| Accent Patterns | Normal | Normal |
| Glow Patterns | N/A | Screen or Add |
| Technical Hatching | Multiply | Screen |
Scale by Application¶
| Application | Pattern Scale | Recommended Density |
|---|---|---|
| Hero backgrounds | 150-200% | Low |
| Section backgrounds | 100% | Low-Medium |
| Card backgrounds | 75-100% | Low |
| Mobile | 75-100% | Very Low |
| Technical diagrams | 100% | Medium-High |
| Data visualizations | 100% | Medium |
Quality Checklist¶
Before using any pattern:
- Tiles seamlessly without visible seams
- Works at intended opacity
- Appropriate file format (SVG for geometric, PNG for textures)
- Not competing with content
- Aligns with brand DNA
- Scale appropriate for application
- Performance acceptable (file size)
- Matches active variant style and mood
- Uses correct color tokens from configuration
- Respects grid system setting
- Frame style matches layout.frame_style
- Passes variant anti-pattern check
Last Updated: February 2026 Version: 2.0