UI Component Design Prompts¶

Comprehensive prompt templates for web, mobile, and application UI elements with parameterized design system integration

Created: February 2026 Tool: Nano Banana Pro / Design System Related: Framework Overview | Design System

Design System Configuration¶

# PARENT CONFIGURATION REFERENCE
# This file inherits tokens and variants from: ./readme.md
# All {{token}} references resolve to active variant values

parent_config:
  source: "./readme.md"
  schema_version: "2.0"
  inheritance:
    - color_primitives
    - typography_tokens
    - spacing_tokens
    - sizing_tokens
    - grid_tokens
    - shadow_tokens
    - motion_tokens
    - frame_tokens

# UI COMPONENT CONFIGURATION
ui_component_config:
  active_variant: "{{active_configuration.variant}}"
  grid_system: "{{active_configuration.grid_system}}"
  frame_style: "{{active_configuration.frame_style}}"
  dark_mode: "{{active_configuration.dark_mode}}"
  accessibility_level: "{{active_configuration.accessibility_level}}"

  # Component-specific overrides
  component_defaults:
    border_radius: "{{sizing_tokens.radius_lg}}"
    shadow: "{{shadow_tokens.shadow_md}}"
    transition: "{{motion_tokens.duration_normal}} {{motion_tokens.ease_out}}"
    focus_ring_width: "2px"
    focus_ring_offset: "2px"
    focus_ring_color: "{{active_variant.colors.primary}}"

UI Design Philosophy¶

SBK UI components must: - Feel trustworthy and enterprise-ready - Be accessible meeting WCAG 2.1 AA minimum - Work across devices with responsive design - Maintain consistency throughout the experience - Enable action with clear interaction patterns - Respect variant tokens for design system coherence

Variant-Specific Component Styling¶

Token Placeholders Reference¶

# Universal token placeholders for all components
# These resolve based on active_variant from parent config

color_tokens:
  primary: "{{active_variant.colors.primary}}"
  primary_dark: "{{active_variant.colors.primary_dark}}"
  primary_light: "{{active_variant.colors.primary_light}}"
  secondary: "{{active_variant.colors.secondary}}"
  accent: "{{active_variant.colors.accent}}"
  background: "{{active_variant.colors.background}}"
  surface: "{{active_variant.colors.surface}}"
  surface_elevated: "{{active_variant.colors.surface_elevated}}"
  text_primary: "{{active_variant.colors.text_primary}}"
  text_secondary: "{{active_variant.colors.text_secondary}}"
  text_muted: "{{active_variant.colors.text_muted}}"
  border: "{{active_variant.colors.border}}"
  border_strong: "{{active_variant.colors.border_strong}}"
  success: "{{active_variant.colors.success}}"
  warning: "{{active_variant.colors.warning}}"
  error: "{{active_variant.colors.error}}"
  info: "{{active_variant.colors.info}}"

typography_tokens:
  font_primary: "{{typography_tokens.font_primary}}"
  font_display: "{{typography_tokens.font_display}}"
  font_mono: "{{typography_tokens.font_mono}}"
  heading_font: "{{active_variant.typography.heading_font}}"
  body_font: "{{active_variant.typography.body_font}}"
  heading_weight: "{{active_variant.typography.heading_weight}}"
  body_weight: "{{active_variant.typography.body_weight}}"
  heading_tracking: "{{active_variant.typography.heading_tracking}}"
  body_tracking: "{{active_variant.typography.body_tracking}}"

spacing_tokens:
  space_1: "{{spacing_tokens.space_1}}"    # 4px
  space_2: "{{spacing_tokens.space_2}}"    # 8px
  space_3: "{{spacing_tokens.space_3}}"    # 12px
  space_4: "{{spacing_tokens.space_4}}"    # 16px
  space_6: "{{spacing_tokens.space_6}}"    # 24px
  space_8: "{{spacing_tokens.space_8}}"    # 32px

radius_tokens:
  radius_sm: "{{sizing_tokens.radius_sm}}"   # 2px
  radius_md: "{{sizing_tokens.radius_md}}"   # 6px
  radius_lg: "{{sizing_tokens.radius_lg}}"   # 8px
  radius_xl: "{{sizing_tokens.radius_xl}}"   # 12px
  radius_2xl: "{{sizing_tokens.radius_2xl}}" # 16px
  radius_full: "{{sizing_tokens.radius_full}}"

shadow_tokens:
  shadow_sm: "{{shadow_tokens.shadow_sm}}"
  shadow_md: "{{shadow_tokens.shadow_md}}"
  shadow_lg: "{{shadow_tokens.shadow_lg}}"
  shadow_xl: "{{shadow_tokens.shadow_xl}}"
  glow_sm: "{{shadow_tokens.glow_sm}}"
  glow_md: "{{shadow_tokens.glow_md}}"
  glow_lg: "{{shadow_tokens.glow_lg}}"

Variant: trusted_advisor (Default)¶

Professional stability for established client relationships.

trusted_advisor_components:
  button:
    primary_bg: "#2563eb"           # sbk_blue
    primary_hover: "#1d4ed8"
    primary_active: "#1e40af"
    border_radius: "{{radius_lg}}"  # 8px
    shadow: "{{shadow_md}}"

  card:
    background: "#ffffff"
    border: "1px solid #e2e8f0"
    border_radius: "{{radius_lg}}"
    shadow: "{{shadow_md}}"

  input:
    border: "1px solid #e2e8f0"
    focus_ring: "#2563eb"
    border_radius: "{{radius_md}}"

  characteristics:
    corners: "gently rounded"
    shadows: "subtle elevation"
    borders: "light, clean"
    mood: "established, reliable, sophisticated"

Variant: modern_partner¶

Collaborative warmth for progressive partnerships.

modern_partner_components:
  button:
    primary_bg: "#0d9488"           # teal_600
    primary_hover: "#0f766e"
    primary_active: "#115e59"
    border_radius: "{{radius_xl}}"  # 12px
    shadow: "{{shadow_lg}}"

  card:
    background: "#ffffff"
    border: "1px solid #e2e8f0"
    border_radius: "{{radius_xl}}"
    shadow: "{{shadow_lg}}"

  input:
    border: "1px solid #e2e8f0"
    focus_ring: "#0d9488"
    border_radius: "{{radius_lg}}"

  characteristics:
    corners: "generously rounded"
    shadows: "soft, welcoming"
    borders: "subtle, warm"
    mood: "approachable, collaborative, progressive"

Variant: bold_challenger¶

Confident disruption for differentiation.

bold_challenger_components:
  button:
    primary_bg: "#0f172a"           # slate_900
    primary_hover: "#1e293b"
    primary_active: "#020617"
    accent_bg: "#ea580c"            # orange_600
    border_radius: "{{radius_md}}"  # 6px
    shadow: "{{shadow_xl}}"

  card:
    background: "#ffffff"
    border: "2px solid #0f172a"
    border_radius: "{{radius_md}}"
    shadow: "{{shadow_xl}}"

  input:
    border: "2px solid #0f172a"
    focus_ring: "#ea580c"
    border_radius: "{{radius_sm}}"

  characteristics:
    corners: "sharp, minimal radius"
    shadows: "dramatic, impactful"
    borders: "bold, defined"
    mood: "bold, different, confident, decisive"

Variant: cyber_shield¶

Security-first aesthetic for threat protection messaging.

cyber_shield_components:
  button:
    primary_bg: "#dc2626"           # red_600
    primary_hover: "#b91c1c"
    primary_active: "#991b1b"
    border_radius: "{{radius_sm}}"  # 2px
    shadow: "none"
    glow: "0 0 16px rgba(220, 38, 38, 0.3)"

  card:
    background: "#111113"           # dark_bg_secondary
    border: "1px solid #27272a"
    border_radius: "{{radius_sm}}"
    glow: "0 0 8px rgba(220, 38, 38, 0.2)"
    scan_lines: true
    corner_brackets: true

  input:
    background: "#0a0a0b"
    border: "1px solid #27272a"
    focus_ring: "#dc2626"
    focus_glow: "0 0 8px rgba(220, 38, 38, 0.4)"
    border_radius: "{{radius_sm}}"

  data_display:
    font: "{{font_mono}}"
    text_color: "#fafafa"
    accent_color: "#dc2626"
    grid_overlay: true

  characteristics:
    corners: "sharp with bracket overlays"
    shadows: "red glow effects"
    borders: "glowing, technical"
    mood: "protective, vigilant, operational"
    dark_mode: true

  recommended_use:
    - "Security dashboards"
    - "Threat monitoring interfaces"
    - "SOC command centers"
    - "Incident response UIs"
    - "Vulnerability scanners"
    - "Real-time alert systems"

Variant: sentinel_guard¶

AI-powered defense aesthetic for autonomous protection.

sentinel_guard_components:
  button:
    primary_bg: "#9333ea"           # purple_600
    primary_hover: "#7e22ce"
    primary_active: "#6b21a8"
    border_radius: "{{radius_lg}}"
    shadow: "{{shadow_lg}}"
    glow: "0 0 16px rgba(147, 51, 234, 0.3)"
    gradient: "linear-gradient(135deg, #9333ea, #7c3aed)"

  card:
    background: "#111113"
    border: "1px solid rgba(147, 51, 234, 0.3)"
    border_radius: "{{radius_lg}}"
    gradient_border: true
    glow: "0 0 24px rgba(147, 51, 234, 0.15)"

  input:
    background: "#0a0a0b"
    border: "1px solid #27272a"
    focus_ring: "#9333ea"
    focus_glow: "0 0 12px rgba(147, 51, 234, 0.3)"
    border_radius: "{{radius_lg}}"

  data_display:
    gradient_text: true
    neural_patterns: true
    flowing_animations: true

  characteristics:
    corners: "rounded with gradient borders"
    shadows: "purple/violet glows"
    borders: "gradient, luminous"
    mood: "intelligent, autonomous, predictive"
    dark_mode: true

  recommended_use:
    - "AI/ML security dashboards"
    - "Autonomous threat detection"
    - "Predictive analytics UIs"
    - "EDR/XDR interfaces"
    - "Security automation consoles"

Variant: clean_developer¶

Developer-focused clarity for technical excellence.

clean_developer_components:
  button:
    primary_bg: "#4f46e5"           # indigo_600
    primary_hover: "#4338ca"
    primary_active: "#3730a3"
    border_radius: "{{radius_lg}}"
    shadow: "{{shadow_sm}}"

  card:
    background: "#ffffff"
    border: "1px solid #e2e8f0"
    border_radius: "{{radius_lg}}"
    shadow: "{{shadow_sm}}"

  code_block:
    background: "#f1f5f9"           # slate_100
    border: "1px solid #e2e8f0"
    border_radius: "{{radius_lg}}"
    font: "{{font_mono}}"
    syntax_highlighting: true

  input:
    border: "1px solid #e2e8f0"
    focus_ring: "#4f46e5"
    border_radius: "{{radius_lg}}"

  characteristics:
    corners: "consistently rounded"
    shadows: "minimal, subtle"
    borders: "clean, precise"
    mood: "clean, precise, developer-friendly"
    whitespace: "generous"

  recommended_use:
    - "Developer portals"
    - "API documentation"
    - "Code editors"
    - "Developer tools"
    - "Technical dashboards"
    - "SDK interfaces"
    - "CLI GUIs"

Variant: creative_clay¶

Unique creative expression with distinctive character.

creative_clay_components:
  button:
    primary_bg: "#0f172a"           # slate_900
    primary_hover: "#1e293b"
    accent_bg: "#f97316"            # orange_500
    border_radius: "{{radius_full}}"  # pill shape
    shadow: "{{shadow_xl}}"

  card:
    background: "#ffffff"
    border: "none"
    border_radius: "{{radius_2xl}}"
    shadow: "{{shadow_xl}}"
    blob_backgrounds: true

  input:
    border: "1px solid #e2e8f0"
    focus_ring: "#f97316"
    border_radius: "{{radius_xl}}"

  special_elements:
    blob_shapes: true
    gradient_text: true
    floating_elements: true
    section_contrast: true

  characteristics:
    corners: "very rounded, pill shapes"
    shadows: "dramatic, layered"
    borders: "minimal to none"
    mood: "distinctive, creative, memorable"

  recommended_use:
    - "Marketing landing pages"
    - "Creative agency tools"
    - "Brand showcase UIs"
    - "Portfolio builders"
    - "Interactive presentations"

Variant: blueprint_technical¶

Technical/engineering UI with annotation components.

blueprint_technical_components:
  # Technical blueprint aesthetic for engineering interfaces
  id: "blueprint_technical"
  name: "Blueprint Technical"
  description: "Engineering-focused UI with technical drawing aesthetics, annotations, and precise measurements"

  colors:
    primary: "#1e40af"              # Blue-800
    primary_dark: "#0f172a"         # Blue-900
    primary_light: "#3b82f6"        # Blue-500
    secondary: "#475569"            # Slate-600
    accent: "#06b6d4"               # Cyan-500
    background: "#f8fafc"           # Cool white
    surface: "#ffffff"
    grid_color: "#93c5fd"           # Blue-300
    annotation_color: "#dc2626"     # Red-600
    dimension_color: "#475569"      # Slate-600

  button:
    primary_bg: "#1e40af"
    primary_hover: "#0f172a"
    border_radius: "{{radius_sm}}"
    shadow: "none"
    border: "2px solid #1e40af"

  card:
    background: "#ffffff"
    border: "1px solid #93c5fd"
    border_radius: "{{radius_sm}}"
    shadow: "none"
    grid_overlay: true
    corner_marks: true

  annotation_components:
    callout:
      line_style: "solid"
      line_color: "#dc2626"
      marker: "circle"
      font: "{{font_mono}}"
      font_size: "12px"

    dimension_line:
      line_style: "solid"
      line_color: "#475569"
      arrow_style: "technical"
      font: "{{font_mono}}"

    reference_marker:
      shape: "circle"
      fill: "#1e40af"
      text_color: "#ffffff"
      size: "24px"

    section_indicator:
      style: "dashed"
      color: "#06b6d4"
      label_bg: "#ffffff"

  grid_system:
    type: "technical_grid"
    major_lines: "1px solid rgba(147, 197, 253, 0.5)"
    minor_lines: "1px solid rgba(147, 197, 253, 0.2)"
    major_spacing: "40px"
    minor_spacing: "8px"
    axis_labels: true

  input:
    background: "#ffffff"
    border: "1px solid #93c5fd"
    focus_ring: "#1e40af"
    border_radius: "{{radius_sm}}"
    font: "{{font_mono}}"

  data_display:
    table_grid: "visible"
    monospace_numbers: true
    precision_indicators: true
    unit_labels: true

  characteristics:
    corners: "minimal radius, technical precision"
    shadows: "none, flat appearance"
    borders: "visible, blueprint-style"
    grid: "visible technical grid with measurements"
    mood: "precise, technical, engineering-grade"

  typography:
    heading_font: "{{font_primary}}"
    body_font: "{{font_primary}}"
    data_font: "{{font_mono}}"
    heading_weight: "600"
    technical_size: "12px"

  recommended_use:
    - "Technical documentation"
    - "Engineering dashboards"
    - "Architecture diagrams"
    - "System specifications"
    - "CAD-like interfaces"
    - "Measurement tools"
    - "Technical training UIs"
    - "Process documentation"
    - "Schematic viewers"

  prompt_prefix: |
    [STYLE: BLUEPRINT TECHNICAL]
    Color palette: Blueprint blue (#1e40af) with cyan (#06b6d4) accents on white.
    Light mode: Clean technical drawing aesthetic.
    Mood: Precise, engineering-grade, technical documentation quality.
    Grid: Visible technical grid with major/minor lines.
    Annotations: Red callouts (#dc2626), dimension lines, reference markers.
    Typography: Monospace for data, clear sans for labels.
    Corners: Minimal radius for precision.
    Elements: Corner marks, axis labels, measurement indicators.

Grid System Integration¶

Component Grid Alignment¶

grid_integration:
  # Components inherit grid from active variant
  grid_source: "{{active_variant.frames.default_grid}}"

  alignment_rules:
    # Standard component alignment to grid
    buttons:
      align: "grid-column"
      snap_to: "major_lines"
      min_width: "grid_unit * 4"

    cards:
      align: "grid-cell"
      span: "auto | 1 | 2 | 3 | 4 | 6 | 12"
      gutter: "{{grid_tokens.gap_md}}"

    forms:
      label_align: "start"
      input_span: "full | auto"
      group_gap: "{{grid_tokens.gap_sm}}"

    tables:
      header_align: "grid-row"
      cell_padding: "{{spacing_tokens.space_4}}"
      row_border: "{{active_variant.colors.border}}"

# Grid system per variant
variant_grids:
  trusted_advisor:
    grid: "subtle_grid"
    columns: 12
    gutter: "24px"
    margin: "auto"
    max_width: "1280px"

  modern_partner:
    grid: "minimal_grid"
    columns: 12
    gutter: "32px"
    margin: "auto"
    max_width: "1200px"

  bold_challenger:
    grid: "structured_grid"
    columns: 12
    gutter: "24px"
    margin: "0"
    max_width: "100%"

  cyber_shield:
    grid: "cyber_grid"
    columns: 12
    gutter: "16px"
    margin: "16px"
    max_width: "100%"
    frame_visible: true
    corner_brackets: true

  sentinel_guard:
    grid: "dashboard_grid"
    columns: 12
    gutter: "24px"
    margin: "24px"
    max_width: "100%"
    card_radius: "{{radius_lg}}"

  clean_developer:
    grid: "minimal_grid"
    columns: 12
    gutter: "32px"
    margin: "auto"
    max_width: "1024px"

  creative_clay:
    grid: "editorial_grid"
    columns: 12
    gutter: "40px"
    margin: "auto"
    max_width: "1400px"

  blueprint_technical:
    grid: "technical_grid"
    columns: 12
    gutter: "8px"
    margin: "24px"
    max_width: "100%"
    major_grid: "40px"
    minor_grid: "8px"
    axis_visible: true

Responsive Grid Breakpoints¶

responsive_breakpoints:
  sm: "640px"
  md: "768px"
  lg: "1024px"
  xl: "1280px"
  2xl: "1536px"

responsive_grid_behavior:
  mobile:
    breakpoint: "< 640px"
    columns: 4
    gutter: "16px"
    margin: "16px"

  tablet:
    breakpoint: "640px - 1024px"
    columns: 8
    gutter: "24px"
    margin: "24px"

  desktop:
    breakpoint: "> 1024px"
    columns: 12
    gutter: "{{variant_gutter}}"
    margin: "{{variant_margin}}"

Component Recommendations by Variant¶

variant_component_recommendations:
  cyber_shield:
    primary_use: "Security dashboards and threat monitoring"
    recommended_components:
      - "Real-time data tables with monospace fonts"
      - "Alert cards with red glow accents"
      - "Status indicators with severity colors"
      - "Timeline components for incident tracking"
      - "Command palette for quick actions"
      - "Metric cards with threat statistics"
      - "Network topology visualizations"
      - "Log viewers with syntax highlighting"
    avoid:
      - "Rounded, soft components"
      - "Light color schemes"
      - "Decorative illustrations"

  sentinel_guard:
    primary_use: "AI/ML security and autonomous systems"
    recommended_components:
      - "Prediction confidence meters"
      - "Neural network flow diagrams"
      - "Automated response timelines"
      - "ML model status cards"
      - "Gradient-bordered feature cards"
      - "Animated data visualizations"
      - "AI recommendation panels"
    avoid:
      - "Static, rigid layouts"
      - "Sharp, angular components"
      - "Light backgrounds"

  clean_developer:
    primary_use: "Developer tools and documentation"
    recommended_components:
      - "Code blocks with syntax highlighting"
      - "API endpoint cards"
      - "Parameter tables"
      - "Copy-to-clipboard buttons"
      - "Tabbed documentation panels"
      - "Version selectors"
      - "Interactive code examples"
      - "Response previews"
    avoid:
      - "Decorative elements"
      - "Complex animations"
      - "Non-functional visuals"

  blueprint_technical:
    primary_use: "Technical documentation and engineering interfaces"
    recommended_components:
      - "Annotation callouts"
      - "Dimension lines and measurements"
      - "Reference markers (numbered circles)"
      - "Section indicators"
      - "Technical data tables"
      - "Schematic diagram containers"
      - "Specification cards"
      - "Precision input fields"
      - "Unit conversion displays"
      - "Grid-aligned form layouts"
    avoid:
      - "Decorative gradients"
      - "Rounded, soft shapes"
      - "Informal typography"

  trusted_advisor:
    primary_use: "Enterprise dashboards and client portals"
    recommended_components:
      - "Professional data cards"
      - "Executive summary panels"
      - "Compliance status indicators"
      - "Report generation UIs"
      - "Calendar and scheduling components"
    avoid:
      - "Flashy animations"
      - "Aggressive color contrasts"

  modern_partner:
    primary_use: "Collaborative tools and partner portals"
    recommended_components:
      - "Team collaboration cards"
      - "Progress trackers"
      - "Communication threads"
      - "Shared workspace UIs"
    avoid:
      - "Cold, sterile designs"
      - "Sharp, aggressive styling"

  bold_challenger:
    primary_use: "Marketing dashboards and sales tools"
    recommended_components:
      - "High-contrast metric cards"
      - "Competitive comparison tables"
      - "Impact visualizations"
      - "Bold CTA buttons"
    avoid:
      - "Timid color choices"
      - "Generic layouts"

  creative_clay:
    primary_use: "Marketing sites and creative tools"
    recommended_components:
      - "Hero sections with blob backgrounds"
      - "Testimonial carousels"
      - "Feature cards with illustrations"
      - "Interactive showcases"
    avoid:
      - "Boring, template-like designs"
      - "Standard grid layouts"

Button Components¶

Primary Buttons¶

[SBK BRAND DNA]
Professional technology consulting. Action-oriented, trustworthy.

[ASSET: UI - PRIMARY BUTTON]
Main call-to-action button.

[VARIANT TOKENS]
Background: {{active_variant.colors.primary}}
Hover: {{active_variant.colors.primary_dark}}
Active: {{active_variant.colors.primary_dark}}
Text: {{active_variant.colors.text_inverse}} OR white
Border-radius: {{active_variant.visual.border_radius}}
Shadow: {{active_variant.visual.shadow_style}}
Focus-ring: 2px offset, {{active_variant.colors.primary}}

[SPECIFICATIONS]
Height: 40-48px standard, 36px compact, 56px large.
Padding: {{spacing_tokens.space_4}} - {{spacing_tokens.space_6}} horizontal.
Typography: {{typography_tokens.font_primary}} SemiBold, 14-16px.

[STATES]
Default: {{primary}} background, white text.
Hover: {{primary_dark}} background, {{shadow_md}} shadow.
Active/Pressed: {{primary_dark}}, pressed effect.
Disabled: {{text_muted}}, reduced opacity (0.6).
Loading: Spinner replaces or accompanies text.
Focus: 2px offset ring in {{primary}}.

[VARIANTS]
Solid: Filled background, white text.
Outline: Border only, {{primary}} text.
Ghost: No border, {{primary}} text, hover shows bg.

[SIZING]
sm: 32px height, {{space_3}} padding, 13px text
md: 40px height, {{space_4}} padding, 14px text (default)
lg: 48px height, {{space_6}} padding, 16px text
xl: 56px height, {{space_8}} padding, 18px text

[AVOID]
Rounded pill shape (less professional) - EXCEPT creative_clay variant.
Gradients in buttons - EXCEPT sentinel_guard variant.
Too many button styles on one page.

Secondary Buttons¶

[ASSET: UI - SECONDARY BUTTON]
Supporting action buttons.

[VARIANT TOKENS]
Background: {{active_variant.colors.surface}}
Border: {{active_variant.colors.border}}
Text: {{active_variant.colors.text_secondary}}
Border-radius: {{active_variant.visual.border_radius}}

[SPECIFICATIONS]
Same dimensions as primary.
Less visual weight than primary.

[STATES]
Default: {{surface}} bg, {{border}} border, {{text_secondary}} text.
Hover: {{background}} bg, {{border_strong}} border.
Active: Slightly darker bg, pressed effect.
Disabled: Light gray, reduced opacity.
Focus: 2px offset ring.

[USAGE]
Cancel actions.
Secondary paths.
Alternative options.
Less important CTAs.

Icon Buttons¶

[ASSET: UI - ICON BUTTON]
Buttons with icons only or icon + text.

[SPECIFICATIONS]
Icon-only: 32-48px square.
Icon + text: Standard button with icon.
Icon size: 16-20px typically.
Icon position: Left of text (default) or right for arrows.

[STATES]
Same state system as other buttons.
Icon color matches text color.
Icon should have sufficient contrast.

[ACCESSIBILITY]
Icon-only MUST have aria-label.
Tooltip on hover recommended.
Focus state clearly visible.

Form Components¶

Text Input¶

[ASSET: UI - TEXT INPUT]
Single-line text entry field.

[VARIANT TOKENS]
Background: {{active_variant.colors.surface}}
Border: {{active_variant.colors.border}}
Border-focus: {{active_variant.colors.primary}}
Text: {{active_variant.colors.text_primary}}
Placeholder: {{active_variant.colors.text_muted}}
Border-radius: {{active_variant.visual.border_radius}}

[SPECIFICATIONS]
Height: 40-48px.
Border: {{border_1}} solid {{border}}.
Border-radius: {{radius_md}}.
Padding: {{space_3}} - {{space_4}} horizontal.
Typography: {{font_primary}} Regular, 14-16px.

[STATES]
Default: {{border}} border, {{surface}} bg.
Hover: {{border_strong}} border.
Focus: {{primary}} border, subtle glow for cyber variants.
Error: {{error}} border, error message below.
Disabled: {{background}} bg, {{text_muted}} text.
Read-only: Subtle bg, no interaction cues.

[ANATOMY]
Label: Above input, {{font_primary}} Medium, 14px.
Input field: Main interactive area.
Helper text: Below input, {{text_muted}}, 12px.
Error text: Below input, {{error}}, 12px.
Optional indicator: "(optional)" in label.

[ICONS]
Leading icon: 16-20px, left padding.
Trailing icon: 16-20px, right padding.
Clear button: X icon on filled fields.
Show/hide: For password fields.

Textarea¶

[ASSET: UI - TEXTAREA]
Multi-line text entry.

[SPECIFICATIONS]
Min-height: 80-120px.
Same border/focus styling as text input.
Resize: vertical only (recommended).

[STATES]
Same as text input.
Character counter optional.

[ANATOMY]
Label above.
Resizable indicator (corner).
Character limit display.

Select/Dropdown¶

[ASSET: UI - SELECT]
Single selection dropdown.

[VARIANT TOKENS]
Background: {{active_variant.colors.surface}}
Border: {{active_variant.colors.border}}
Dropdown-shadow: {{active_variant.visual.shadow_style}}
Border-radius: {{active_variant.visual.border_radius}}

[SPECIFICATIONS]
Trigger: Same height/styling as text input.
Dropdown: {{radius_lg}} radius, {{shadow_lg}}, max-height with scroll.
Option height: 36-40px.

[STATES]
Closed: Shows selected value.
Open: Dropdown visible, option highlighted.
Hover: Option bg changes to {{background}}.
Selected: Checkmark or {{primary}} bg highlight.
Disabled: {{text_muted}}.

[ANATOMY]
Label above.
Trigger with chevron.
Dropdown menu.
Options with optional icons.
Dividers for grouping.
Search bar for long lists.

Checkbox¶

[ASSET: UI - CHECKBOX]
Boolean selection.

[VARIANT TOKENS]
Checked-bg: {{active_variant.colors.primary}}
Border: {{active_variant.colors.border_strong}}
Check-color: white

[SPECIFICATIONS]
Box size: 16-20px.
Border-radius: {{radius_sm}}.
Typography: 14px label.

[STATES]
Unchecked: {{border_strong}} border only.
Checked: {{primary}} bg, white checkmark.
Indeterminate: {{primary}} bg, dash.
Hover: Slight bg on label area.
Disabled: {{text_muted}}, reduced opacity.
Focus: Ring around checkbox.

[LAYOUT]
Checkbox left, label right.
Description text below label optional.
Group spacing: {{space_3}} - {{space_4}} vertical.

Radio Button¶

[ASSET: UI - RADIO]
Single selection from options.

[VARIANT TOKENS]
Selected-fill: {{active_variant.colors.primary}}
Border: {{active_variant.colors.border_strong}}

[SPECIFICATIONS]
Circle size: 16-20px.
Border: 2px.
Typography: 14px label.

[STATES]
Unselected: {{border_strong}} border only.
Selected: Border + filled inner circle ({{primary}}).
Hover: Slight bg on label area.
Disabled: {{text_muted}}.
Focus: Ring around circle.

[LAYOUT]
Vertical group preferred.
Spacing: {{space_3}} - {{space_4}} between options.
Label right of circle.

Toggle/Switch¶

[ASSET: UI - TOGGLE]
On/off toggle switch.

[VARIANT TOKENS]
Track-off: {{active_variant.colors.border_strong}}
Track-on: {{active_variant.colors.primary}}
Knob: white

[SPECIFICATIONS]
Track: 40-48px wide, 20-24px height.
Knob: 16-20px circle.
Border-radius: Full (pill shape).

[STATES]
Off: {{border_strong}} track, white knob left.
On: {{primary}} track, white knob right.
Hover: Subtle track color shift.
Disabled: Low contrast, no interaction.
Focus: Ring around track.

[ANIMATION]
Knob slides {{duration_normal}} {{ease_out}}.
Color transition with knob.

Card Components¶

Basic Card¶

[ASSET: UI - CARD]
Content container card.

[VARIANT TOKENS]
Background: {{active_variant.colors.surface}}
Border: {{active_variant.colors.border}}
Shadow: {{active_variant.visual.shadow_style}}
Border-radius: {{active_variant.visual.border_radius}}

[SPECIFICATIONS]
Border-radius: {{radius_lg}} - {{radius_xl}}.
Border: {{border_1}} solid {{border}} (optional).
Shadow: {{shadow_md}}.
Padding: {{space_4}} - {{space_6}}.
Background: {{surface}}.

[VARIANTS]
Flat: No shadow, border only.
Elevated: {{shadow_md}}.
Interactive: Hover lifts slightly.
Bordered: {{primary}} border accent.
Glowing: For cyber_shield/sentinel_guard variants.

[ANATOMY]
Header: Title, subtitle, actions.
Media: Image, video, chart.
Body: Main content area.
Footer: Actions, metadata.

[HOVER STATE (interactive)]
Shadow increases to {{shadow_lg}}.
Slight lift (-2px transform).
Border or accent appears.

Pricing Card¶

[ASSET: UI - PRICING CARD]
Service tier pricing display.

[SPECIFICATIONS]
Min-width: 280px.
Standard card styling per variant.
Emphasis on featured tier.

[ANATOMY]
Tier name: Bold, top.
Price: Large, prominent.
Billing period: Smaller, {{text_muted}}.
Features: Bulleted list.
CTA button: Bottom.

[VARIANTS]
Standard: Normal styling.
Featured: {{primary}} header, {{shadow_lg}}, "Popular" badge.

[AVOID]
Too many tiers (3-4 max).
Cluttered features lists.
Hidden pricing.

Testimonial Card¶

[ASSET: UI - TESTIMONIAL CARD]
Customer quote display.

[SPECIFICATIONS]
Standard card styling per variant.
Quote prominent.

[ANATOMY]
Quote text: Large, italic or normal.
Avatar: 48-64px circle.
Name: Bold.
Title/Company: {{text_muted}}.
Optional: Star rating.

[LAYOUT]
Quote first, attribution below.
Avatar can be inline with attribution.

Header/Navbar¶

[ASSET: UI - HEADER]
Main site navigation header.

[VARIANT TOKENS]
Background: {{active_variant.colors.surface}} or transparent
Border-bottom: {{active_variant.colors.border}}
Text: {{active_variant.colors.text_primary}}

[SPECIFICATIONS]
Height: 64-80px.
Position: Sticky top.
Z-index: {{z_sticky}} (200+).

[ANATOMY]
Logo: Left position.
Navigation: Center or right.
Actions: Right (CTA, user menu).
Mobile: Hamburger menu.

[STATES]
Default: Transparent or solid per variant.
Scrolled: May change bg, add {{shadow_sm}}.
Mobile: Collapses to hamburger.

[AVOID]
Too many nav items (5-7 max).
Tiny click targets.
Hover-only dropdowns (mobile issue).

[ASSET: UI - SIDEBAR]
Vertical navigation sidebar.

[VARIANT TOKENS]
Background: {{active_variant.colors.surface}}
Border: {{active_variant.colors.border}}
Active-bg: {{active_variant.colors.primary}} at 10% opacity
Active-accent: {{active_variant.colors.primary}}

[SPECIFICATIONS]
Width: 240-280px expanded, 64-80px collapsed.
Height: Full viewport.
Position: Fixed left.

[ANATOMY]
Logo/brand: Top.
Navigation groups: Expandable sections.
User info: Bottom.
Collapse toggle: Clear icon.

[STATES]
Expanded: Full width with labels.
Collapsed: Icons only with tooltips.
Item active: {{active-bg}}, {{active-accent}} bar.
Item hover: Subtle bg change.

Breadcrumbs¶

[ASSET: UI - BREADCRUMBS]
Navigation path indicator.

[SPECIFICATIONS]
Typography: 13-14px.
Separator: "/" or ">" or chevron.
Spacing: {{space_2}} between items.

[STATES]
Link: {{primary}}, underline on hover.
Current: Not linked, {{text_primary}}.

[TRUNCATION]
Long paths: Ellipsis middle items.
Mobile: Show current + parent only.

Tabs¶

[ASSET: UI - TABS]
Tabbed content navigation.

[VARIANT TOKENS]
Active-indicator: {{active_variant.colors.primary}}
Text-inactive: {{active_variant.colors.text_secondary}}
Text-active: {{active_variant.colors.text_primary}}

[SPECIFICATIONS]
Tab height: 40-48px.
Typography: 14px medium.
Border-bottom: 2px active indicator in {{primary}}.

[STATES]
Default: {{text_secondary}}.
Hover: Slightly darker.
Active: {{text_primary}}, {{primary}} underline.
Disabled: {{text_muted}}.

[VARIANTS]
Underline: Border bottom indicator.
Pill: Background on active.
Segmented: Connected button-like.

Feedback Components¶

Alert/Notification¶

[ASSET: UI - ALERT]
System feedback messages.

[VARIANT TOKENS]
Info: {{active_variant.colors.info}}
Success: {{active_variant.colors.success}}
Warning: {{active_variant.colors.warning}}
Error: {{active_variant.colors.error}}
Border-radius: {{active_variant.visual.border_radius}}

[SPECIFICATIONS]
Border-radius: {{radius_md}} - {{radius_lg}}.
Padding: {{space_3}} - {{space_4}}.
Border-left: 4px accent (optional).

[VARIANTS]
Info: {{info}} tint, info icon.
Success: {{success}} tint, check icon.
Warning: {{warning}} tint, warning icon.
Error: {{error}} tint, X or alert icon.

[ANATOMY]
Icon: Left, matching variant color.
Title: Bold, optional.
Message: Main content.
Dismiss: X button, optional.
Action: Link or button, optional.

[AVOID]
Too many alerts stacked.
Alerts for non-critical info.

Toast¶

[ASSET: UI - TOAST]
Temporary notification popup.

[SPECIFICATIONS]
Position: Top-right or bottom-right.
Width: 320-400px.
Animation: Slide in {{duration_normal}}, fade out.
Duration: 3-5 seconds default.

[ANATOMY]
Icon: Status indicator.
Message: Brief text.
Action: Optional undo or link.
Dismiss: X button.

[VARIANTS]
Same as alerts (info, success, warning, error).

[BEHAVIOR]
Auto-dismiss: Standard.
Persist: On hover, important messages.
Queue: Stack multiple toasts.

Modal/Dialog¶

[ASSET: UI - MODAL]
Focused overlay dialog.

[VARIANT TOKENS]
Overlay: black at {{opacity_50}}
Background: {{active_variant.colors.surface}}
Border-radius: {{active_variant.visual.border_radius}}
Shadow: {{shadow_2xl}}

[SPECIFICATIONS]
Overlay: Black 50% opacity.
Modal: {{surface}} bg, {{radius_lg}} - {{radius_xl}}, {{shadow_2xl}}.
Width: 400-600px typical.
Max-height: 90vh with scroll.

[ANATOMY]
Header: Title, close button.
Body: Main content.
Footer: Action buttons.

[SIZES]
sm: 400px
md: 500px
lg: 600px
xl: 800px
full: Nearly full screen

[ACCESSIBILITY]
Focus trap within modal.
Escape key closes.
Body scroll locked.
Focus returns on close.

Progress Indicators¶

[ASSET: UI - PROGRESS]
Loading and progress feedback.

[VARIANT TOKENS]
Track: {{active_variant.colors.border}}
Bar: {{active_variant.colors.primary}}
Glow: For cyber/sentinel variants

[VARIANTS]

Linear progress bar:
- Height: 4-8px
- Track: {{border}}
- Bar: {{primary}}
- Determinate or indeterminate

Circular spinner:
- Size: 16-48px
- Stroke: 2-4px
- Color: {{primary}}
- Animation: Rotation

Skeleton loading:
- Matches content shape
- Animated shimmer
- {{background}} placeholder

Step progress:
- Numbered circles
- Connected line
- Completed: {{primary}}, current: {{primary}} outline, upcoming: {{border}}

Data Display¶

Table¶

[ASSET: UI - TABLE]
Data table display.

[VARIANT TOKENS]
Header-bg: {{active_variant.colors.background}}
Row-hover: {{active_variant.colors.background}}
Border: {{active_variant.colors.border}}
Selected-bg: {{active_variant.colors.primary}} at 10%

[SPECIFICATIONS]
Row height: 48-56px.
Header: Sticky, {{heading_weight}}, sortable.
Borders: Horizontal lines ({{border}}).
Font: {{font_mono}} for data in technical variants.

[FEATURES]
Sorting: Column headers clickable.
Selection: Checkbox column.
Actions: Row actions (kebab menu).
Pagination: Bottom, page controls.
Search/filter: Above table.

[STATES]
Hover row: {{row-hover}}.
Selected row: {{selected-bg}}.
Sorted column: Indicator icon.

[RESPONSIVE]
Scroll horizontal.
Priority columns visible.
Card view on mobile (optional).

Stats/Metrics¶

[ASSET: UI - METRIC]
Key statistic display.

[VARIANT TOKENS]
Value-color: {{active_variant.colors.text_primary}}
Label-color: {{active_variant.colors.text_secondary}}
Trend-up: {{active_variant.colors.success}}
Trend-down: {{active_variant.colors.error}}

[SPECIFICATIONS]
Variety of sizes for emphasis.

[ANATOMY]
Label: What metric represents, {{text_secondary}}.
Value: Large, prominent, {{text_primary}}.
Trend: Up/down indicator in {{success}}/{{error}}.
Comparison: vs. period, goal.

[VARIANTS]
Simple: Label + value.
With trend: Arrow + percentage.
With sparkline: Mini chart.
With comparison: vs. target/period.

Annotation Components (blueprint_technical)¶

Callout Annotation¶

[ASSET: UI - CALLOUT ANNOTATION]
Technical callout with leader line.

[SPECIFICATIONS]
Marker: Circle with number, 24px diameter.
Fill: {{primary}} #1e40af.
Text: White, {{font_mono}}, 12px.
Line: 1px solid {{annotation_color}} #dc2626.
Arrow: Technical style, 6px.

[ANATOMY]
Reference marker: Numbered circle at source.
Leader line: Connects marker to annotation.
Annotation box: Text explanation.
Arrow: Points to specific element.

[VARIANTS]
Numbered: Sequential reference markers.
Lettered: A, B, C markers.
Symbolic: Icon-based markers.

Dimension Line¶

[ASSET: UI - DIMENSION LINE]
Measurement indicator for specifications.

[SPECIFICATIONS]
Line: 1px solid {{dimension_color}} #475569.
Arrows: Technical drawing style, both ends.
Text: {{font_mono}}, 12px, centered above line.
Extension lines: 4px beyond endpoints.

[VARIANTS]
Horizontal: Width measurements.
Vertical: Height measurements.
Angular: Angle measurements.
Radius: Arc measurements.

[POSITIONING]
Offset: 20-40px from measured element.
Stacking: 16px between parallel dimensions.

Reference Marker¶

[ASSET: UI - REFERENCE MARKER]
Numbered reference point for cross-referencing.

[SPECIFICATIONS]
Shape: Circle, 24px diameter.
Fill: {{primary}} #1e40af.
Text: White, {{font_mono}}, 12px bold.
Border: None or 2px white for contrast.

[SEQUENCE]
Numeric: 1, 2, 3...
Alphabetic: A, B, C...
Roman: i, ii, iii...

[STATES]
Default: Solid fill.
Active: Glow or larger scale.
Referenced: Highlighted in sidebar/legend.

Accessibility Requirements¶

Focus States¶

focus_requirements:
  visible_indicator: "2px offset ring, {{primary}}"
  no_focus_loss: "Focus must never disappear"
  logical_order: "Tab order matches visual order"
  skip_links: "Skip to main content link"

  variant_adjustments:
    cyber_shield: "Red glow focus indicator"
    sentinel_guard: "Purple glow focus indicator"
    blueprint_technical: "High contrast blue focus"

Color Contrast¶

contrast_requirements:
  text_normal: "4.5:1 minimum (WCAG AA)"
  text_large: "3:1 minimum (18pt+ or 14pt bold)"
  ui_components: "3:1 for interactive elements"
  focus_indicator: "3:1 minimum"

  dark_mode_variants:
    - cyber_shield
    - sentinel_guard
    # Ensure contrast on dark backgrounds

ARIA Guidelines¶

aria_requirements:
  buttons: "Clear label or aria-label"
  inputs: "Associated label element"
  modals: "role=dialog, aria-modal=true"
  alerts: "role=alert for live regions"
  navigation: "role=navigation with aria-label"

  variant_specific:
    blueprint_technical:
      annotations: "aria-describedby for annotated elements"
      dimensions: "aria-label for measurement values"

Quality Checklist¶

Before implementing any UI component:

Last Updated: February 2026 Version: 2.0