SBK Generative Prompts Framework¶
Parameterized hierarchical framework for brand-aligned visual asset generation with swappable design system variants
Created: February 2026 Status: Active Tool: Nano Banana Pro / Design System Specification Builder Related: Visual Identity | Design System | Content Library
Design System Token Architecture¶
This framework uses a parameterized token system that propagates changes automatically across all generative prompts. Change tokens here → all assets update accordingly.
┌─────────────────────────────────────────────────────────────────────────────────┐
│ PARAMETERIZED DESIGN SYSTEM ARCHITECTURE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ GLOBAL TOKENS (This File) │ │
│ │ • Color primitives & semantic colors │ │
│ │ • Typography scales & font stacks │ │
│ │ • Spacing & sizing scales │ │
│ │ • Grid & layout tokens │ │
│ │ • Motion & animation tokens │ │
│ │ • Frame & border tokens │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ ▼ INHERITS │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ VARIANT CONFIGURATIONS │ │
│ │ • trusted_advisor (Professional stability) │ │
│ │ • modern_partner (Collaborative warmth) │ │
│ │ • bold_challenger (Confident disruption) │ │
│ │ • cyber_shield (CrowdStrike-inspired security) │ │
│ │ • sentinel_guard (SentinelOne-inspired defense) │ │
│ │ • clean_developer (Stripe-inspired clarity) │ │
│ │ • creative_clay (Clay-inspired uniqueness) │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ ▼ APPLIES TO │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ ASSET CATEGORY PROMPTS │ │
│ │ logos.md | backgrounds.md | patterns.md | banners.md | diagrams.md │ │
│ │ icons.md | photography.md | documents.md | presentations.md │ │
│ │ data-visualization.md | illustrations.md | interactive-elements.md │ │
│ │ video-motion.md | social-media.md | email-assets.md | print.md │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ AI SKILL CONFIGURATION │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ variant: "{{ACTIVE_VARIANT}}" │ │
│ │ grid_system: "{{GRID_STYLE}}" │ │
│ │ frame_style: "{{FRAME_TYPE}}" │ │
│ │ → All prompts automatically use active configuration │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Global Design Tokens¶
Color Primitives¶
color_primitives:
# SBK Brand Core (Never change these)
sbk_blue: "#2563eb"
sbk_navy: "#0f172a"
sbk_sky: "#0ea5e9"
# Neutral Scale
white: "#ffffff"
cool_white: "#f8fafc"
warm_cream: "#faf5f0"
slate_50: "#f8fafc"
slate_100: "#f1f5f9"
slate_200: "#e2e8f0"
slate_300: "#cbd5e1"
slate_400: "#94a3b8"
slate_500: "#64748b"
slate_600: "#475569"
slate_700: "#334155"
slate_800: "#1e293b"
slate_900: "#0f172a"
slate_950: "#020617"
# Extended Palette
teal_500: "#14b8a6"
teal_600: "#0d9488"
cyan_500: "#06b6d4"
cyan_600: "#0891b2"
indigo_500: "#6366f1"
indigo_600: "#4f46e5"
violet_500: "#8b5cf6"
violet_600: "#7c3aed"
purple_500: "#a855f7"
purple_600: "#9333ea"
fuchsia_500: "#d946ef"
orange_500: "#f97316"
orange_600: "#ea580c"
red_500: "#ef4444"
red_600: "#dc2626"
red_700: "#b91c1c"
green_500: "#22c55e"
green_600: "#16a34a"
amber_500: "#f59e0b"
# Security/Alert Colors
security_red: "#dc2626"
security_amber: "#f59e0b"
security_green: "#22c55e"
threat_red: "#991b1b"
threat_dark: "#7f1d1d"
# Dark Mode Primitives
dark_bg_primary: "#0a0a0b"
dark_bg_secondary: "#111113"
dark_bg_tertiary: "#18181b"
dark_surface: "#1c1c1f"
dark_border: "#27272a"
dark_text_primary: "#fafafa"
dark_text_secondary: "#a1a1aa"
Typography Tokens¶
typography_tokens:
# Font Stacks
font_primary: "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
font_display: "'Cal Sans', 'Inter', 'SF Pro Display', sans-serif"
font_mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace"
font_serif: "'Lora', 'Georgia', 'Times New Roman', serif"
# LOGO TYPOGRAPHY SPECIFICATIONS (CRITICAL)
logo_typography:
font_family: "Inter Bold, SF Pro Display Bold, Helvetica Neue Bold"
font_style: "Clean geometric sans-serif"
font_weight: 700 # Bold
letter_separation: "MANDATORY - Each letter S, B, K must be completely separate"
letter_characteristics:
- "Clean geometric construction"
- "Rounded/smooth terminals (not sharp)"
- "Consistent stroke width"
- "Generous letter-spacing"
- "NO connections between letters"
- "NO ligatures"
- "NO overlapping letterforms"
# Type Scale (Perfect Fourth - 1.333)
text_xs: "0.75rem" # 12px
text_sm: "0.875rem" # 14px
text_base: "1rem" # 16px
text_lg: "1.125rem" # 18px
text_xl: "1.25rem" # 20px
text_2xl: "1.5rem" # 24px
text_3xl: "1.875rem" # 30px
text_4xl: "2.25rem" # 36px
text_5xl: "3rem" # 48px
text_6xl: "3.75rem" # 60px
text_7xl: "4.5rem" # 72px
text_8xl: "6rem" # 96px
# Font Weights
weight_light: 300
weight_regular: 400
weight_medium: 500
weight_semibold: 600
weight_bold: 700
weight_extrabold: 800
# Line Heights
leading_none: 1
leading_tight: 1.25
leading_snug: 1.375
leading_normal: 1.5
leading_relaxed: 1.625
leading_loose: 2
# Letter Spacing
tracking_tighter: "-0.05em"
tracking_tight: "-0.025em"
tracking_normal: "0"
tracking_wide: "0.025em"
tracking_wider: "0.05em"
tracking_widest: "0.1em"
Spacing & Sizing Tokens¶
spacing_tokens:
# Base Unit: 4px
space_0: "0"
space_px: "1px"
space_0.5: "0.125rem" # 2px
space_1: "0.25rem" # 4px
space_2: "0.5rem" # 8px
space_3: "0.75rem" # 12px
space_4: "1rem" # 16px
space_5: "1.25rem" # 20px
space_6: "1.5rem" # 24px
space_8: "2rem" # 32px
space_10: "2.5rem" # 40px
space_12: "3rem" # 48px
space_16: "4rem" # 64px
space_20: "5rem" # 80px
space_24: "6rem" # 96px
space_32: "8rem" # 128px
space_40: "10rem" # 160px
space_48: "12rem" # 192px
space_56: "14rem" # 224px
space_64: "16rem" # 256px
sizing_tokens:
# Border Radius
radius_none: "0"
radius_sm: "0.125rem" # 2px
radius_md: "0.375rem" # 6px
radius_lg: "0.5rem" # 8px
radius_xl: "0.75rem" # 12px
radius_2xl: "1rem" # 16px
radius_3xl: "1.5rem" # 24px
radius_full: "9999px"
# Border Widths
border_0: "0"
border_1: "1px"
border_2: "2px"
border_4: "4px"
border_8: "8px"
Grid & Layout Tokens¶
grid_tokens:
# Container Widths
container_sm: "640px"
container_md: "768px"
container_lg: "1024px"
container_xl: "1280px"
container_2xl: "1536px"
container_full: "100%"
# Grid Columns
columns_1: 1
columns_2: 2
columns_3: 3
columns_4: 4
columns_6: 6
columns_12: 12
# Gap Scale
gap_xs: "0.5rem"
gap_sm: "1rem"
gap_md: "1.5rem"
gap_lg: "2rem"
gap_xl: "3rem"
gap_2xl: "4rem"
layout_tokens:
# Aspect Ratios
aspect_square: "1/1"
aspect_video: "16/9"
aspect_portrait: "3/4"
aspect_landscape: "4/3"
aspect_wide: "21/9"
aspect_ultrawide: "32/9"
aspect_story: "9/16"
# Z-Index Scale
z_base: 0
z_dropdown: 100
z_sticky: 200
z_fixed: 300
z_modal: 400
z_popover: 500
z_tooltip: 600
Frame & Border Tokens¶
frame_tokens:
# Frame Styles (for gridded/framed aesthetics)
frame_solid:
style: "solid"
weight: "1px"
opacity: 1.0
description: "Clean solid lines for professional structure"
frame_dotted:
style: "dotted"
weight: "1px"
spacing: "4px"
opacity: 0.6
description: "Subtle dotted lines for technical/draft feel"
frame_dashed:
style: "dashed"
weight: "1px"
dash_length: "8px"
gap_length: "4px"
opacity: 0.7
description: "Dashed lines for dynamic structure"
frame_double:
style: "double"
weight: "3px"
opacity: 1.0
description: "Double lines for emphasis and premium feel"
frame_gradient:
style: "gradient"
weight: "2px"
from: "{{primary_color}}"
to: "{{accent_color}}"
opacity: 0.8
description: "Gradient borders for modern/dynamic feel"
frame_glow:
style: "solid"
weight: "1px"
glow_radius: "8px"
glow_color: "{{accent_color}}"
glow_opacity: 0.3
description: "Subtle glow effect for tech/cyber aesthetic"
grid_frame_systems:
# Grid Layout Frame Systems
minimal_grid:
outer_frame: false
inner_dividers: false
cell_borders: false
description: "No visible grid, pure content focus"
subtle_grid:
outer_frame: "frame_solid"
outer_opacity: 0.1
inner_dividers: "frame_dotted"
inner_opacity: 0.05
cell_borders: false
description: "Barely visible structure for sophisticated layouts"
structured_grid:
outer_frame: "frame_solid"
outer_opacity: 0.2
inner_dividers: "frame_solid"
inner_opacity: 0.1
cell_borders: false
description: "Clear structure for data-heavy layouts"
technical_grid:
outer_frame: "frame_solid"
outer_opacity: 0.3
inner_dividers: "frame_dashed"
inner_opacity: 0.15
cell_borders: "frame_dotted"
cell_opacity: 0.1
corner_marks: true
description: "Blueprint/technical drawing aesthetic"
editorial_grid:
outer_frame: "frame_double"
outer_opacity: 0.15
inner_dividers: "frame_solid"
inner_opacity: 0.08
cell_borders: false
column_rules: true
description: "Magazine/editorial layout structure"
dashboard_grid:
outer_frame: false
inner_dividers: false
cell_borders: "frame_solid"
cell_opacity: 0.12
cell_radius: "radius_lg"
description: "Card-based dashboard layouts"
cyber_grid:
outer_frame: "frame_glow"
outer_opacity: 0.4
inner_dividers: "frame_solid"
inner_opacity: 0.1
scan_lines: true
corner_brackets: true
description: "Security/cyber operations aesthetic"
Motion & Animation Tokens¶
motion_tokens:
# Duration
duration_instant: "0ms"
duration_fast: "100ms"
duration_normal: "200ms"
duration_slow: "300ms"
duration_slower: "500ms"
duration_slowest: "700ms"
# Easing
ease_linear: "linear"
ease_in: "cubic-bezier(0.4, 0, 1, 1)"
ease_out: "cubic-bezier(0, 0, 0.2, 1)"
ease_in_out: "cubic-bezier(0.4, 0, 0.2, 1)"
ease_bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
ease_smooth: "cubic-bezier(0.25, 0.1, 0.25, 1)"
# Animation Presets
animation_fade_in: "fade-in 200ms ease-out"
animation_slide_up: "slide-up 300ms ease-out"
animation_scale_in: "scale-in 200ms ease-out"
animation_pulse: "pulse 2s ease-in-out infinite"
Shadow & Effect Tokens¶
shadow_tokens:
shadow_none: "none"
shadow_xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
shadow_sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
shadow_md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
shadow_lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
shadow_xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
shadow_2xl: "0 25px 50px -12px rgb(0 0 0 / 0.25)"
shadow_inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
# Glow Effects
glow_sm: "0 0 8px"
glow_md: "0 0 16px"
glow_lg: "0 0 24px"
glow_xl: "0 0 40px"
effect_tokens:
# Blur
blur_none: "0"
blur_sm: "4px"
blur_md: "8px"
blur_lg: "16px"
blur_xl: "24px"
blur_2xl: "40px"
# Opacity
opacity_0: 0
opacity_5: 0.05
opacity_10: 0.1
opacity_20: 0.2
opacity_30: 0.3
opacity_40: 0.4
opacity_50: 0.5
opacity_60: 0.6
opacity_70: 0.7
opacity_80: 0.8
opacity_90: 0.9
opacity_100: 1
Design System Variants¶
Active Configuration¶
# AI SKILL CONFIGURATION BLOCK
# Change these values to switch the entire design system
active_configuration:
variant: "trusted_advisor" # Primary style variant
grid_system: "subtle_grid" # Layout grid style
frame_style: "frame_solid" # Border/frame style
dark_mode: false # Light/dark mode toggle
accessibility_level: "AA" # WCAG compliance level
animation_reduced: false # Respect prefers-reduced-motion
Variant: Trusted Advisor (Default)¶
Professional stability for established client relationships.
variant_trusted_advisor:
id: "trusted_advisor"
name: "Trusted Advisor"
description: "Professional stability, established expertise, conservative confidence"
# Color Semantic Mapping
colors:
primary: "{{sbk_blue}}" # #2563eb
primary_dark: "{{sbk_navy}}" # #0f172a
primary_light: "{{sbk_sky}}" # #0ea5e9
secondary: "{{slate_600}}" # #475569
accent: "{{sbk_sky}}" # #0ea5e9
background: "{{cool_white}}" # #f8fafc
surface: "{{white}}" # #ffffff
surface_elevated: "{{white}}" # #ffffff
text_primary: "{{slate_900}}" # #0f172a
text_secondary: "{{slate_600}}" # #475569
text_muted: "{{slate_400}}" # #94a3b8
border: "{{slate_200}}" # #e2e8f0
border_strong: "{{slate_300}}" # #cbd5e1
success: "{{green_600}}" # #16a34a
warning: "{{amber_500}}" # #f59e0b
error: "{{red_600}}" # #dc2626
info: "{{sbk_blue}}" # #2563eb
# Typography Style
typography:
heading_font: "{{font_primary}}"
body_font: "{{font_primary}}"
heading_weight: "{{weight_semibold}}"
body_weight: "{{weight_regular}}"
heading_tracking: "{{tracking_tight}}"
body_tracking: "{{tracking_normal}}"
# Visual Style
visual:
border_radius: "{{radius_lg}}"
shadow_style: "shadow_md"
gradient_style: "linear-gradient(135deg, {{primary}} 0%, {{primary_dark}} 100%)"
texture: "subtle-paper-grain"
texture_opacity: 0.03
# Composition Rules
composition:
layout_balance: "centered"
whitespace_ratio: 0.4
density: "comfortable"
alignment: "center-bias"
# Frame/Grid Settings
frames:
default_grid: "subtle_grid"
frame_color: "{{border}}"
frame_style: "frame_solid"
corner_style: "rounded"
# Mood & Personality
mood:
keywords:
- established
- reliable
- sophisticated
- grounded
- assured
- trustworthy
anti_patterns:
- flashy
- aggressive
- trendy
- playful
- casual
# Prompt Prefix
prompt_prefix: |
[STYLE: TRUSTED ADVISOR]
Color palette: Deep blues (#2563eb, #0f172a) with cool white (#f8fafc) ground.
Mood: Established, reliable, sophisticated, grounded, trustworthy.
Texture: Subtle paper grain (3% opacity) or fine linen micro-texture.
Composition: Centered balance with 60-40 asymmetric interest.
Gradients: Soft ambient, never harsh or neon.
Corners: Gently rounded (8px radius).
Grid: Subtle structural lines at 10% opacity.
Variant: Modern Partner¶
Collaborative warmth for progressive partnerships.
variant_modern_partner:
id: "modern_partner"
name: "Modern Partner"
description: "Collaborative warmth, progressive approach, human-centered technology"
colors:
primary: "{{teal_600}}" # #0d9488
primary_dark: "{{teal_700}}" # #0f766e
primary_light: "{{teal_500}}" # #14b8a6
secondary: "{{cyan_600}}" # #0891b2
accent: "{{cyan_500}}" # #06b6d4
background: "{{warm_cream}}" # #faf5f0
surface: "{{white}}"
surface_elevated: "{{white}}"
text_primary: "{{slate_800}}"
text_secondary: "{{slate_600}}"
text_muted: "{{slate_400}}"
border: "{{slate_200}}"
border_strong: "{{slate_300}}"
success: "{{green_600}}"
warning: "{{amber_500}}"
error: "{{red_600}}"
info: "{{teal_600}}"
typography:
heading_font: "{{font_display}}"
body_font: "{{font_primary}}"
heading_weight: "{{weight_semibold}}"
body_weight: "{{weight_regular}}"
heading_tracking: "{{tracking_tight}}"
body_tracking: "{{tracking_normal}}"
visual:
border_radius: "{{radius_xl}}"
shadow_style: "shadow_lg"
gradient_style: "linear-gradient(135deg, {{primary}} 0%, {{secondary}} 100%)"
texture: "organic-flow"
texture_opacity: 0.02
composition:
layout_balance: "asymmetric"
whitespace_ratio: 0.45
density: "airy"
alignment: "left-flowing"
frames:
default_grid: "minimal_grid"
frame_color: "{{border}}"
frame_style: "frame_solid"
corner_style: "rounded-large"
mood:
keywords:
- approachable
- collaborative
- progressive
- human
- balanced
- warm
anti_patterns:
- cold
- sterile
- aggressive
- impersonal
prompt_prefix: |
[STYLE: MODERN PARTNER]
Color palette: Teal (#0d9488) with cyan (#0891b2) accents on warm cream (#faf5f0).
Mood: Approachable, collaborative, progressive, human-centered.
Texture: Organic flow patterns, watercolor soft edges.
Composition: Flowing asymmetric, welcoming negative space.
Natural material references, never synthetic feel.
Corners: Generously rounded (12px radius).
Grid: Minimal to none, organic layouts preferred.
Variant: Bold Challenger¶
Confident disruption for differentiation.
variant_bold_challenger:
id: "bold_challenger"
name: "Bold Challenger"
description: "Confident disruption, memorable differentiation, strategic boldness"
colors:
primary: "{{slate_900}}" # #0f172a (Rich Charcoal)
primary_dark: "{{slate_950}}" # #020617
primary_light: "{{slate_800}}" # #1e293b
secondary: "{{slate_700}}"
accent: "{{orange_600}}" # #ea580c (Burnt Orange)
accent_bright: "{{orange_500}}" # #f97316
background: "{{white}}" # #ffffff
surface: "{{slate_50}}"
surface_elevated: "{{white}}"
text_primary: "{{slate_900}}"
text_secondary: "{{slate_600}}"
text_muted: "{{slate_400}}"
text_inverse: "{{white}}"
border: "{{slate_200}}"
border_strong: "{{slate_400}}"
success: "{{green_600}}"
warning: "{{amber_500}}"
error: "{{red_600}}"
info: "{{slate_700}}"
typography:
heading_font: "{{font_display}}"
body_font: "{{font_primary}}"
heading_weight: "{{weight_bold}}"
body_weight: "{{weight_regular}}"
heading_tracking: "{{tracking_tighter}}"
body_tracking: "{{tracking_normal}}"
visual:
border_radius: "{{radius_md}}"
shadow_style: "shadow_xl"
gradient_style: "none"
texture: "sharp-geometric"
texture_opacity: 0
composition:
layout_balance: "dynamic-tension"
whitespace_ratio: 0.35
density: "impactful"
alignment: "edge-anchored"
frames:
default_grid: "structured_grid"
frame_color: "{{primary}}"
frame_style: "frame_solid"
corner_style: "sharp"
mood:
keywords:
- bold
- different
- confident
- disruptive
- memorable
- decisive
anti_patterns:
- timid
- generic
- forgettable
- safe
prompt_prefix: |
[STYLE: BOLD CHALLENGER]
Color palette: Charcoal (#0f172a) with burnt orange (#ea580c) accents on white.
Mood: Bold, different, confident, disruptive but professional.
Texture: Sharp geometric patterns, high contrast, no grain.
Composition: Dynamic tension, strategic color blocking.
Memorable and distinctive, never generic.
Corners: Sharp or minimal radius (6px max).
Grid: Structured with clear dividing lines.
Variant: Cyber Shield (CrowdStrike-Inspired)¶
Security-first aesthetic for threat protection messaging.
variant_cyber_shield:
id: "cyber_shield"
name: "Cyber Shield"
description: "Security-focused, threat protection, cyber operations aesthetic"
inspiration: "CrowdStrike visual language"
colors:
primary: "{{red_600}}" # #dc2626 (Threat Red)
primary_dark: "{{threat_dark}}" # #7f1d1d
primary_light: "{{red_500}}" # #ef4444
secondary: "{{slate_900}}" # #0f172a
accent: "{{red_500}}" # #ef4444
accent_glow: "{{red_400}}" # For glow effects
background: "{{dark_bg_primary}}" # #0a0a0b
surface: "{{dark_bg_secondary}}" # #111113
surface_elevated: "{{dark_surface}}" # #1c1c1f
text_primary: "{{dark_text_primary}}" # #fafafa
text_secondary: "{{dark_text_secondary}}" # #a1a1aa
text_muted: "{{slate_500}}"
text_accent: "{{red_500}}"
border: "{{dark_border}}" # #27272a
border_strong: "{{slate_700}}"
border_glow: "{{red_600}}"
success: "{{green_500}}"
warning: "{{amber_500}}"
error: "{{red_500}}"
info: "{{sbk_sky}}"
typography:
heading_font: "{{font_display}}"
body_font: "{{font_primary}}"
heading_weight: "{{weight_bold}}"
body_weight: "{{weight_regular}}"
heading_tracking: "{{tracking_tight}}"
body_tracking: "{{tracking_normal}}"
monospace_usage: "high" # For technical/code displays
visual:
border_radius: "{{radius_sm}}"
shadow_style: "none"
glow_style: "glow_md"
glow_color: "{{primary}}"
gradient_style: "linear-gradient(180deg, {{surface}} 0%, {{background}} 100%)"
texture: "scan-lines"
texture_opacity: 0.02
dark_mode: true
composition:
layout_balance: "command-center"
whitespace_ratio: 0.3
density: "dense"
alignment: "grid-locked"
frames:
default_grid: "cyber_grid"
frame_color: "{{border_glow}}"
frame_style: "frame_glow"
corner_style: "bracketed"
scan_lines: true
corner_brackets: true
mood:
keywords:
- protective
- vigilant
- technical
- threat-aware
- operational
- mission-critical
anti_patterns:
- soft
- casual
- decorative
- playful
prompt_prefix: |
[STYLE: CYBER SHIELD]
Color palette: Deep black (#0a0a0b) with threat red (#dc2626) accents.
Dark mode: Always. No light backgrounds.
Mood: Security operations center, threat protection, vigilant defense.
Texture: Subtle scan lines, technical grid overlays.
Glow: Red accent glows on interactive elements and key data.
Composition: Command center density, data-rich layouts.
Corners: Sharp with bracket overlays at corners.
Grid: Visible technical grid with corner brackets.
Typography: Monospace for data, clean sans for headings.
Variant: Sentinel Guard (SentinelOne-Inspired)¶
AI-powered defense aesthetic for autonomous protection.
variant_sentinel_guard:
id: "sentinel_guard"
name: "Sentinel Guard"
description: "AI-powered defense, autonomous protection, intelligent security"
inspiration: "SentinelOne visual language"
colors:
primary: "{{purple_600}}" # #9333ea
primary_dark: "{{purple_700}}" # #7e22ce
primary_light: "{{purple_500}}" # #a855f7
secondary: "{{violet_600}}" # #7c3aed
accent: "{{fuchsia_500}}" # #d946ef
accent_glow: "{{purple_400}}"
background: "{{dark_bg_primary}}" # #0a0a0b
surface: "{{dark_bg_secondary}}" # #111113
surface_elevated: "{{dark_surface}}"
text_primary: "{{dark_text_primary}}"
text_secondary: "{{dark_text_secondary}}"
text_muted: "{{slate_500}}"
text_accent: "{{purple_400}}"
border: "{{dark_border}}"
border_strong: "{{purple_900}}"
border_glow: "{{purple_500}}"
success: "{{green_500}}"
warning: "{{amber_500}}"
error: "{{red_500}}"
info: "{{purple_400}}"
typography:
heading_font: "{{font_display}}"
body_font: "{{font_primary}}"
heading_weight: "{{weight_semibold}}"
body_weight: "{{weight_regular}}"
heading_tracking: "{{tracking_normal}}"
body_tracking: "{{tracking_normal}}"
visual:
border_radius: "{{radius_lg}}"
shadow_style: "shadow_lg"
glow_style: "glow_lg"
glow_color: "{{primary}}"
gradient_style: "linear-gradient(135deg, {{primary}} 0%, {{secondary}} 50%, {{accent}} 100%)"
texture: "neural-network"
texture_opacity: 0.03
dark_mode: true
composition:
layout_balance: "flowing-tech"
whitespace_ratio: 0.35
density: "balanced"
alignment: "center-flowing"
frames:
default_grid: "dashboard_grid"
frame_color: "{{border_glow}}"
frame_style: "frame_gradient"
corner_style: "rounded"
mood:
keywords:
- intelligent
- autonomous
- predictive
- advanced
- protective
- futuristic
anti_patterns:
- manual
- dated
- reactive
- simple
prompt_prefix: |
[STYLE: SENTINEL GUARD]
Color palette: Deep purple (#9333ea) to violet (#7c3aed) gradients on black (#0a0a0b).
Dark mode: Always. Rich purple/violet accents.
Mood: AI-powered security, autonomous protection, intelligent defense.
Texture: Neural network patterns, flowing data visualizations.
Glow: Purple/violet gradients and soft glows.
Composition: Flowing tech aesthetic, organic data flows.
Corners: Rounded (8px) with gradient borders.
Grid: Card-based dashboard layouts with glowing edges.
Typography: Modern display fonts, medium weight.
Variant: Clean Developer (Stripe-Inspired)¶
Developer-focused clarity for technical excellence.
variant_clean_developer:
id: "clean_developer"
name: "Clean Developer"
description: "Developer-focused clarity, technical excellence, minimal sophistication"
inspiration: "Stripe visual language"
colors:
primary: "{{indigo_600}}" # #4f46e5
primary_dark: "{{indigo_700}}" # #4338ca
primary_light: "{{indigo_500}}" # #6366f1
secondary: "{{violet_600}}" # #7c3aed
accent: "{{cyan_500}}" # #06b6d4
background: "{{white}}" # #ffffff
surface: "{{slate_50}}" # #f8fafc
surface_elevated: "{{white}}"
text_primary: "{{slate_900}}" # #0f172a
text_secondary: "{{slate_600}}" # #475569
text_muted: "{{slate_400}}" # #94a3b8
text_code: "{{slate_800}}"
border: "{{slate_200}}" # #e2e8f0
border_strong: "{{slate_300}}"
code_bg: "{{slate_100}}" # #f1f5f9
success: "{{green_600}}"
warning: "{{amber_500}}"
error: "{{red_600}}"
info: "{{indigo_600}}"
typography:
heading_font: "{{font_primary}}"
body_font: "{{font_primary}}"
code_font: "{{font_mono}}"
heading_weight: "{{weight_semibold}}"
body_weight: "{{weight_regular}}"
heading_tracking: "{{tracking_tight}}"
body_tracking: "{{tracking_normal}}"
monospace_usage: "high"
visual:
border_radius: "{{radius_lg}}"
shadow_style: "shadow_sm"
gradient_style: "linear-gradient(135deg, {{primary}} 0%, {{secondary}} 100%)"
texture: "none"
texture_opacity: 0
composition:
layout_balance: "precise-grid"
whitespace_ratio: 0.5
density: "spacious"
alignment: "left-aligned"
frames:
default_grid: "minimal_grid"
frame_color: "{{border}}"
frame_style: "frame_solid"
corner_style: "rounded"
code_blocks: true
mood:
keywords:
- clean
- precise
- developer-friendly
- documented
- professional
- minimal
anti_patterns:
- cluttered
- decorative
- ambiguous
- flashy
prompt_prefix: |
[STYLE: CLEAN DEVELOPER]
Color palette: Indigo (#4f46e5) with violet (#7c3aed) accents on pure white.
Light mode: Pristine white backgrounds, clean contrast.
Mood: Developer-focused, documentation-quality, technical precision.
Texture: None. Pure clean surfaces.
Code: Prominent monospace typography, syntax-highlighted blocks.
Composition: Generous whitespace, precise alignment, grid-based.
Corners: Consistently rounded (8px).
Grid: Invisible but precise, mathematical spacing.
Typography: Clear hierarchy, readable at all sizes.
Variant: Creative Clay (Clay-Inspired)¶
Unique creative expression with distinctive character.
variant_creative_clay:
id: "creative_clay"
name: "Creative Clay"
description: "Distinctive creativity, unique expression, memorable character"
inspiration: "Clay.com visual language"
colors:
primary: "{{slate_900}}" # #0f172a
primary_dark: "{{slate_950}}" # #020617
secondary: "{{slate_700}}" # #334155
accent: "{{orange_500}}" # #f97316 (Warm accent)
accent_secondary: "{{amber_500}}" # #f59e0b
accent_cool: "{{sbk_sky}}" # #0ea5e9
background: "{{cool_white}}" # #f8fafc
surface: "{{white}}"
surface_elevated: "{{white}}"
surface_dark: "{{slate_900}}" # For contrast sections
text_primary: "{{slate_900}}"
text_secondary: "{{slate_600}}"
text_muted: "{{slate_400}}"
text_inverse: "{{white}}"
border: "{{slate_200}}"
border_strong: "{{slate_300}}"
highlight: "{{amber_200}}" # For emphasis
success: "{{green_600}}"
warning: "{{amber_500}}"
error: "{{red_600}}"
info: "{{sbk_sky}}"
typography:
heading_font: "{{font_display}}"
body_font: "{{font_primary}}"
heading_weight: "{{weight_bold}}"
body_weight: "{{weight_regular}}"
heading_tracking: "{{tracking_tighter}}"
body_tracking: "{{tracking_normal}}"
display_size: "oversized" # Larger than normal headings
visual:
border_radius: "{{radius_2xl}}" # Very rounded
shadow_style: "shadow_xl"
gradient_style: "multi-stop"
texture: "noise-grain"
texture_opacity: 0.015
illustrations: "3d-clay-style"
blob_shapes: true
composition:
layout_balance: "bold-asymmetric"
whitespace_ratio: 0.45
density: "statement"
alignment: "dynamic"
section_contrast: true # Alternating light/dark sections
frames:
default_grid: "editorial_grid"
frame_color: "{{border}}"
frame_style: "frame_solid"
corner_style: "pill"
blob_backgrounds: true
mood:
keywords:
- distinctive
- creative
- memorable
- bold
- playful-professional
- modern
anti_patterns:
- generic
- boring
- template-y
- forgettable
special_elements:
blob_shapes:
enabled: true
colors: ["{{accent}}", "{{accent_secondary}}", "{{accent_cool}}"]
opacity: 0.1
blur: "blur_2xl"
gradient_text:
enabled: true
from: "{{primary}}"
to: "{{accent}}"
floating_elements:
enabled: true
animation: "gentle-float"
section_alternation:
enabled: true
pattern: ["light", "dark", "light", "accent"]
prompt_prefix: |
[STYLE: CREATIVE CLAY]
Color palette: Deep charcoal (#0f172a) with warm orange (#f97316) and amber (#f59e0b) accents.
Background: Cool white (#f8fafc) with blob gradient overlays.
Mood: Distinctive, creative, memorable, boldly professional.
Texture: Subtle noise grain (1.5% opacity), 3D clay-style illustrations.
Shapes: Organic blob backgrounds, pill-shaped buttons, fluid forms.
Composition: Bold asymmetric, alternating light/dark sections.
Corners: Very rounded (16px+), pill shapes for buttons.
Grid: Editorial-style with strong vertical rhythm.
Typography: Oversized display headings, tight tracking.
Special: Floating 3D elements, gradient text on key headlines.
Frame & Grid Style Reference¶
Frame Style Examples¶
frame_examples:
# Solid Frame
solid_example:
css: "border: 1px solid {{border_color}}"
use_cases: ["cards", "containers", "form fields"]
variants: ["trusted_advisor", "clean_developer"]
# Dotted Frame
dotted_example:
css: "border: 1px dotted {{border_color}}"
use_cases: ["technical diagrams", "draft states", "guidelines"]
variants: ["technical_grid", "cyber_shield"]
# Dashed Frame
dashed_example:
css: "border: 1px dashed {{border_color}}"
use_cases: ["dynamic content", "action areas", "selections"]
variants: ["bold_challenger", "technical_grid"]
# Double Frame
double_example:
css: "border: 3px double {{border_color}}"
use_cases: ["premium elements", "certificates", "emphasis"]
variants: ["editorial_grid", "creative_clay"]
# Gradient Frame
gradient_example:
css: "border: 2px solid; border-image: linear-gradient(135deg, {{from}}, {{to}}) 1"
use_cases: ["featured content", "CTAs", "highlights"]
variants: ["sentinel_guard", "creative_clay"]
# Glow Frame
glow_example:
css: "border: 1px solid {{glow_color}}; box-shadow: 0 0 8px {{glow_color}}40"
use_cases: ["active states", "security alerts", "emphasis"]
variants: ["cyber_shield", "sentinel_guard"]
Grid System Visual Reference¶
MINIMAL GRID
┌─────────────────────────────────────────────────────────────┐
│ │
│ Content flows freely │
│ No visible structure │
│ Pure whitespace relationships │
│ │
└─────────────────────────────────────────────────────────────┘
SUBTLE GRID (10% opacity lines)
┌─────────────────────────────────────────────────────────────┐
│ · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · │
│ │
│ Content area with barely visible │
│ dotted grid structure │
│ · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · │
│ │
└─────────────────────────────────────────────────────────────┘
STRUCTURED GRID (20% opacity)
┌─────────────────┬─────────────────┬─────────────────────────┐
│ │ │ │
│ Column 1 │ Column 2 │ Column 3 │
│ │ │ │
├─────────────────┴─────────────────┴─────────────────────────┤
│ │
│ Full-width section below │
│ │
└─────────────────────────────────────────────────────────────┘
TECHNICAL GRID (Blueprint style)
┌─ ─ ─ ─ ─ ─ ─ ─ ─┬─ ─ ─ ─ ─ ─ ─ ─ ─┬─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┐
│ ┌─┐ │ │ ┌─┐ │
│ └─┘ A-1 │ A-2 │ A-3 └─┘ │
│ · · · · · · · · │ · · · · · · · · │ · · · · · · · · · · · · │
├─ ─ ─ ─ ─ ─ ─ ─ ─┼─ ─ ─ ─ ─ ─ ─ ─ ─┼─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┤
│ ┌─┐ │ │ ┌─┐ │
│ └─┘ B-1 │ B-2 │ B-3 └─┘ │
└─ ─ ─ ─ ─ ─ ─ ─ ─┴─ ─ ─ ─ ─ ─ ─ ─ ─┴─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┘
CYBER GRID (Glow + brackets)
╔═══════════════════════════════════════════════════════════════╗
║ ┏━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━━━━━━━━┓ ║
║ ┃ SECTOR-A ┃ ┃ SECTOR-B ┃ ┃ SECTOR-C ┃ ║
║ ┃ ░░░░░░░░ ┃ ┃ ░░░░░░░░ ┃ ┃ ░░░░░░░░ ┃ ║
║ ┗━━━━━━━━━━━━━━━┛ ┗━━━━━━━━━━━━━━━┛ ┗━━━━━━━━━━━━━━━━━━━━━┛ ║
║═══════════════════════════════════════════════════════════════║
║ 「 THREAT LEVEL: ELEVATED 」 ▓▓▓▓▓▓▓▓░░ 78% ║
╚═══════════════════════════════════════════════════════════════╝
DASHBOARD GRID (Card-based)
┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐
│ │ │ │ │ │
│ Metric Card 1 │ │ Metric Card 2 │ │ Metric Card 3 │
│ │ │ │ │ │
└───────────────────┘ └───────────────────┘ └───────────────────┘
┌──────────────────────────────────────────────┐ ┌───────────────┐
│ │ │ │
│ Chart/Graph Area │ │ Side │
│ │ │ Panel │
│ │ │ │
└──────────────────────────────────────────────┘ └───────────────┘
EDITORIAL GRID (Magazine style)
╔═══════════════════════════════════════════════════════════════╗
║ ║
║ HEADLINE AREA ║
║ ║
╠═══════════════════════════╦═══════════════════════════════════╣
║ ║ ║
║ Main column ║ Secondary column ║
║ with primary ║ with supporting ║
║ content flow ║ content and ║
║ ║ pull quotes ║
║ ║ ║
╠═══════════════════════════╩═══════════════════════════════════╣
║ ║
║ Full-width feature section ║
║ ║
╚═══════════════════════════════════════════════════════════════╝
AI Skill Configuration¶
Skill Configuration Schema¶
# This configuration block controls how AI skills apply the design system
sbk_design_config:
# Schema version for compatibility
schema_version: "2.0"
# Active variant selection
active_variant: "trusted_advisor"
# Grid and frame preferences
layout:
grid_system: "subtle_grid"
frame_style: "frame_solid"
frame_opacity: 0.1
# Mode settings
mode:
dark_mode: false
high_contrast: false
reduced_motion: false
# Accessibility
accessibility:
level: "AA" # AA or AAA
color_blind_safe: true
focus_indicators: true
# Output preferences
output:
include_css_vars: true
include_prompt_blocks: true
include_specifications: true
Variant Switching Examples¶
# Quick variant switch configurations
# For security-focused content
security_config:
active_variant: "cyber_shield"
layout:
grid_system: "cyber_grid"
frame_style: "frame_glow"
mode:
dark_mode: true
# For developer documentation
developer_config:
active_variant: "clean_developer"
layout:
grid_system: "minimal_grid"
frame_style: "frame_solid"
mode:
dark_mode: false
# For marketing/creative content
creative_config:
active_variant: "creative_clay"
layout:
grid_system: "editorial_grid"
frame_style: "frame_solid"
mode:
dark_mode: false
# For sales presentations
sales_config:
active_variant: "bold_challenger"
layout:
grid_system: "structured_grid"
frame_style: "frame_solid"
mode:
dark_mode: false
# For compliance/trust content
compliance_config:
active_variant: "trusted_advisor"
layout:
grid_system: "subtle_grid"
frame_style: "frame_solid"
mode:
dark_mode: false
Dynamic Token Resolution¶
# How tokens resolve based on active variant
token_resolution:
# When active_variant = "trusted_advisor"
"{{primary}}": "#2563eb" # sbk_blue
"{{background}}": "#f8fafc" # cool_white
"{{frame_color}}": "#e2e8f0" # slate_200
# When active_variant = "cyber_shield"
"{{primary}}": "#dc2626" # red_600
"{{background}}": "#0a0a0b" # dark_bg_primary
"{{frame_color}}": "#dc2626" # With glow effect
# Usage in prompts
# All {{token}} references automatically resolve to current variant values
Prompt Construction System¶
Universal Prompt Template¶
[SBK BRAND DNA]
Professional technology consulting aesthetic. Trustworthy, expert, understated.
Clean geometric precision with subtle organic warmth.
Strategic negative space. Timeless quality over trends.
Confident restraint—powerful through simplicity.
Not flashy, not generic corporate, not stock photo feel.
[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: {{asset_category}}]
{{category_specific_requirements}}
[CONTEXT: {{use_case}}]
{{use_case_modifier_adjustments}}
[SPECIFICATIONS]
{{technical_requirements}}
[SUBJECT]
{{specific_asset_description}}
[AVOID]
{{anti_patterns_and_exclusions}}
Example: Hero Background with Cyber Shield Variant¶
[SBK BRAND DNA]
Professional technology consulting aesthetic. Trustworthy, expert, understated.
Clean geometric precision with subtle organic warmth.
Strategic negative space. Timeless quality over trends.
Confident restraint—powerful through simplicity.
[STYLE: CYBER SHIELD]
Color palette: Deep black (#0a0a0b) with threat red (#dc2626) accents.
Dark mode: Always. No light backgrounds.
Mood: Security operations center, threat protection, vigilant defense.
Texture: Subtle scan lines, technical grid overlays.
Glow: Red accent glows on interactive elements and key data.
Composition: Command center density, data-rich layouts.
[GRID: CYBER GRID]
Visible technical grid with corner brackets and scan line texture.
Frame style: Glow frame with red accent at 40% glow opacity.
[ASSET: BACKGROUND]
Abstract geometric composition with layered depth.
Security-focused visual language with threat detection motifs.
Data visualization elements suggesting real-time monitoring.
[CONTEXT: WEB HERO - SECURITY SERVICE PAGE]
Full-width hero section background.
Light text overlay zone in left 60%.
RGB optimized, retina-ready.
[SPECIFICATIONS]
3840x2160px, 144dpi, WebP output.
Hero section with content overlay consideration.
Dark mode optimized for low-light viewing.
[SUBJECT]
Abstract dark geometric background with interconnected hexagonal grid
suggesting threat intelligence network. Layered planes of near-black
transitioning to deep charcoal. Subtle red glow on key intersections
indicating threat detection nodes. Technical grid overlay with corner
brackets. Clean, powerful composition with breathing room for overlaid
headline text. Scan line texture at 2% opacity.
[AVOID]
Light backgrounds. Soft or casual aesthetic. Stock photo feel.
Overly complex or busy composition. Bright harsh neon.
Comic-style or cartoonish elements. Generic tech imagery.
Asset Category Index¶
See individual files for detailed prompts:
| Category | File | Description |
|---|---|---|
| Logos & Marks | logos.md | Primary logo, variants, favicons, app icons |
| Backgrounds | backgrounds.md | Hero sections, slides, documents |
| Patterns | patterns.md | Repeating textures, decorative elements |
| Banners | banners.md | Social, email headers, ads |
| Diagrams | diagrams.md | Process flows, architecture, infographics |
| Icons | icons.md | Service icons, UI elements, illustrations |
| Photography | photography.md | AI-enhanced photos, composite imagery |
| Documents | documents.md | Letterheads, covers, certificates |
| Presentations | presentations.md | Slide decks, keynotes |
| Data Visualization | data-visualization.md | Charts, graphs, dashboards |
| Illustrations | illustrations.md | Custom artwork, conceptual imagery |
| Interactive Elements | interactive-elements.md | UI components, animations |
| Video & Motion | video-motion.md | Motion graphics, video assets |
| Social Media | social-media.md | Platform-specific content |
| Email Assets | email-assets.md | Email graphics, signatures |
| Print Collateral | print-collateral.md | Business cards, brochures |
| Infographics | infographics.md | Data stories, visual explainers |
| Audio Branding | audio-branding.md | Sound identity, music |
| 3D & AR Assets | 3d-ar-assets.md | 3D models, AR experiences |
| Environmental Signage | environmental-signage.md | Office, event, exterior signage |
| Templates & Frameworks | templates-frameworks.md | Business documents, proposals |
| Merchandise & Swag | merchandise-swag.md | Branded merchandise |
Technical Specifications Reference¶
Resolution Presets¶
resolution_presets:
# Web
web_standard: { width: 1920, height: 1080, dpi: 72 }
web_retina: { width: 3840, height: 2160, dpi: 144 }
web_4k: { width: 3840, height: 2160, dpi: 72 }
# Social
social_square: { width: 1080, height: 1080, dpi: 72 }
social_portrait: { width: 1080, height: 1350, dpi: 72 }
social_story: { width: 1080, height: 1920, dpi: 72 }
linkedin_banner: { width: 1584, height: 396, dpi: 72 }
twitter_header: { width: 1500, height: 500, dpi: 72 }
facebook_cover: { width: 1200, height: 630, dpi: 72 }
# Email
email_header: { width: 600, height: 200, dpi: 72 }
email_hero: { width: 600, height: 300, dpi: 72 }
# Print
print_letter: { width: 2550, height: 3300, dpi: 300 }
print_a4: { width: 2480, height: 3508, dpi: 300 }
print_tabloid: { width: 3300, height: 5100, dpi: 300 }
business_card: { width: 1050, height: 600, dpi: 300 }
# Presentation
presentation_16x9: { width: 1920, height: 1080, dpi: 72 }
presentation_4x3: { width: 1024, height: 768, dpi: 72 }
# Icons
favicon: { width: 512, height: 512, dpi: 72 }
app_icon: { width: 1024, height: 1024, dpi: 72 }
touch_icon: { width: 180, height: 180, dpi: 72 }
File Format Guidelines¶
format_guidelines:
logos:
primary: "SVG"
raster: "PNG-24 with transparency"
favicon: "ICO, PNG, SVG"
photographs:
web: "WebP (quality 85)"
fallback: "JPEG (quality 90)"
source: "TIFF or PSD"
graphics:
scalable: "SVG"
raster: "PNG-24"
animated: "SVG, Lottie JSON"
documents:
editable: "PSD, AI, FIGMA"
delivery: "PDF/X-1a (print), PDF (digital)"
video:
web: "MP4 (H.264), WebM"
source: "ProRes, MOV"
Color Space Guidelines¶
color_space:
digital:
primary: "sRGB"
display_p3: "For wide-gamut displays"
print:
primary: "CMYK (US Web Coated SWOP v2)"
pantone: "Pantone Matching System for spot colors"
conversion_notes:
- "Always design in RGB, convert to CMYK for print"
- "Verify critical brand colors in both spaces"
- "Rich black for print: C60 M40 Y40 K100"
Quality Assurance Checklist¶
Before using any generated asset:
Brand Alignment¶
- Aligns with brand DNA principles
- Uses correct variant color palette
- Maintains consistent visual language
- Typography matches variant specification
- Grid/frame style appropriate for context
Technical Quality¶
- Correct resolution and dimensions
- Proper file format
- Color space appropriate (RGB/CMYK)
- No compression artifacts
- Proper transparency handling
Functional Requirements¶
- Text overlay zones are functional (if applicable)
- Safe zones respected
- Responsive considerations addressed
- Dark/light mode variants if needed
Accessibility¶
- Color contrast meets WCAG requirements
- Not relying solely on color for information
- Alternative text considerations
- Motion preferences respected
Anti-Pattern Check¶
- No anti-pattern elements present
- Doesn't feel like stock imagery
- Avoids variant-specific anti-patterns
- Maintains SBK distinction
Integration Points¶
Content Library Connection¶
Generated assets integrate with the Content Library system:
- Asset Creation: Use this framework to generate
- Asset Storage: Save to Digital Asset Management (14-templates/)
- Asset Tagging: Apply metadata from this framework
- Asset Usage: Reference in Content Library entries
- Asset Versioning: Track variants and iterations
AI Skill Loading¶
# When loading design system for AI operations:
skill_integration:
load_sequence:
1: "Load active_configuration block"
2: "Resolve variant tokens"
3: "Apply grid/frame preferences"
4: "Load category-specific prompts as needed"
token_inheritance:
global: "Always loaded"
variant: "Based on active_variant"
category: "On-demand per asset type"
caching:
token_cache: true
prompt_cache: true
invalidate_on: "active_configuration change"
Last Updated: February 2026 Version: 2.0 (Parameterized Token System)