{{Project Name}} - Web Agent Style Guide Template

Generated with JAEGIS Enhanced Validation & Research

[[LLM: VALIDATION CHECKPOINT - Review shared context from web agent requirements and validate all style guidelines. Integrate web research findings for current web agent design standards and accessibility best practices.]]

Executive Summary

[[LLM: RESEARCH INTEGRATION - Include current web agent style best practices and validated design frameworks. All style guidelines must be supported by current web accessibility standards and user experience research.]]

Style Guidelines

[[LLM: VALIDATION CHECKPOINT - All web agent style guidelines must be validated for accessibility, usability, and current web standards. Include research-backed web design methodologies and user experience principles.]] Guide Type: Web Agent Visual Design System Temporal Intelligence: Automatic date adaptation using new Date().toISOString().split('T')[0]

Style Guide Header Template

📋 Style Guide Overview

# Web Agent Style Guide - {web_agent_name}

**Agent ID**: {web_agent_id}  
**Agent Name**: {web_agent_name}  
**Style Guide Version**: {style_guide_version}  
**Created**: {creation_date}  
**Last Updated**: {current_date} at {current_time}  
**Generated By**: Web Agent Creator (Web Agent Creation & UI Generation Specialist)  
**Brand Alignment**: {brand_alignment}  
**Design System**: {design_system}  

## Style Guide Purpose

**Visual Identity**: {visual_identity_purpose}  
**Brand Consistency**: {brand_consistency_goals}  
**User Experience**: {user_experience_objectives}  
**Accessibility**: {accessibility_standards}  
**Scalability**: {scalability_considerations}  

### 🎯 **Design System Metrics**
- **Component Count**: {component_count}
- **Color Palette Size**: {color_palette_size}
- **Typography Scales**: {typography_scales}
- **Accessibility Level**: {accessibility_level}
- **Responsive Breakpoints**: {responsive_breakpoints}
- **Animation Complexity**: {animation_complexity}/10

Brand Identity & Visual Foundation Template

🎨 Brand Identity & Personality

## Brand Identity & Visual Foundation

### 🌟 **Brand Personality & Voice**
#### **Brand Characteristics**
- **Primary Personality**: {primary_personality}
- **Secondary Traits**: {secondary_traits}
- **Brand Voice**: {brand_voice}
- **Tone of Communication**: {communication_tone}
- **Visual Mood**: {visual_mood}
- **User Perception Goals**: {perception_goals}

#### **Brand Values & Principles**
- **Core Values**: {core_values}
- **Design Principles**: {design_principles}
- **User-Centered Focus**: {user_centered_approach}
- **Accessibility Commitment**: {accessibility_commitment}
- **Innovation Approach**: {innovation_approach}
- **Quality Standards**: {quality_standards}

#### **Competitive Positioning**
- **Market Position**: {market_position}
- **Differentiation Strategy**: {differentiation_strategy}
- **Visual Differentiation**: {visual_differentiation}
- **User Experience Edge**: {ux_advantage}
- **Technology Leadership**: {technology_leadership}

### 🎯 **Logo & Brand Mark Guidelines**
#### **Primary Logo Usage**
- **Logo Variations**: {logo_variations}
- **Minimum Size**: {logo_minimum_size}
- **Clear Space**: {logo_clear_space}
- **Placement Guidelines**: {logo_placement}
- **Usage Restrictions**: {logo_restrictions}

#### **Logo Color Variations**
| Logo Version | Use Case | Background | File Format | Accessibility |
|--------------|----------|------------|-------------|---------------|
| {logo_primary} | {primary_use_case} | {primary_background} | {primary_format} | {primary_accessibility} |
| {logo_secondary} | {secondary_use_case} | {secondary_background} | {secondary_format} | {secondary_accessibility} |
| {logo_monochrome} | {mono_use_case} | {mono_background} | {mono_format} | {mono_accessibility} |
| {logo_reversed} | {reversed_use_case} | {reversed_background} | {reversed_format} | {reversed_accessibility} |

#### **Brand Mark Applications**
- **Favicon**: {favicon_specifications}
- **App Icons**: {app_icon_specifications}
- **Social Media**: {social_media_specifications}
- **Print Applications**: {print_specifications}
- **Merchandise**: {merchandise_specifications}

Color System & Palette Template

🌈 Comprehensive Color System

## Color System & Visual Hierarchy

### 🎨 **Primary Color Palette**
#### **Brand Colors**
```css
/* Primary Brand Colors */
--primary-50: {primary_50};     /* Lightest tint */
--primary-100: {primary_100};   /* Light tint */
--primary-200: {primary_200};   /* Medium light */
--primary-300: {primary_300};   /* Medium */
--primary-400: {primary_400};   /* Medium dark */
--primary-500: {primary_500};   /* Base primary */
--primary-600: {primary_600};   /* Dark */
--primary-700: {primary_700};   /* Darker */
--primary-800: {primary_800};   /* Very dark */
--primary-900: {primary_900};   /* Darkest shade */

/* Secondary Brand Colors */
--secondary-50: {secondary_50};
--secondary-100: {secondary_100};
--secondary-200: {secondary_200};
--secondary-300: {secondary_300};
--secondary-400: {secondary_400};
--secondary-500: {secondary_500};
--secondary-600: {secondary_600};
--secondary-700: {secondary_700};
--secondary-800: {secondary_800};
--secondary-900: {secondary_900};

Functional Color Palette

/* Semantic Colors */
--success-light: {success_light};
--success-base: {success_base};
--success-dark: {success_dark};

--warning-light: {warning_light};
--warning-base: {warning_base};
--warning-dark: {warning_dark};

--error-light: {error_light};
--error-base: {error_base};
--error-dark: {error_dark};

--info-light: {info_light};
--info-base: {info_base};
--info-dark: {info_dark};

Neutral Color System

/* Neutral Grays */
--gray-50: {gray_50};      /* Background light */
--gray-100: {gray_100};    /* Background */
--gray-200: {gray_200};    /* Border light */
--gray-300: {gray_300};    /* Border */
--gray-400: {gray_400};    /* Placeholder */
--gray-500: {gray_500};    /* Text secondary */
--gray-600: {gray_600};    /* Text primary */
--gray-700: {gray_700};    /* Text dark */
--gray-800: {gray_800};    /* Text darker */
--gray-900: {gray_900};    /* Text darkest */

📊 Color Usage Guidelines

Color Category

Primary Use

Secondary Use

Accessibility

Contrast Ratio

Primary

{primary_use}

{primary_secondary}

{primary_accessibility}

{primary_contrast}

Secondary

{secondary_use}

{secondary_secondary}

{secondary_accessibility}

{secondary_contrast}

Success

{success_use}

{success_secondary}

{success_accessibility}

{success_contrast}

Warning

{warning_use}

{warning_secondary}

{warning_accessibility}

{warning_contrast}

Error

{error_use}

{error_secondary}

{error_accessibility}

{error_contrast}

Neutral

{neutral_use}

{neutral_secondary}

{neutral_accessibility}

{neutral_contrast}

🌓 Dark Mode & Theme Variations

Dark Theme Color Adaptations

/* Dark Theme Colors */
[data-theme="dark"] {
  --background-primary: {dark_bg_primary};
  --background-secondary: {dark_bg_secondary};
  --text-primary: {dark_text_primary};
  --text-secondary: {dark_text_secondary};
  --border-primary: {dark_border_primary};
  --border-secondary: {dark_border_secondary};
}

High Contrast Theme

/* High Contrast Theme */
[data-theme="high-contrast"] {
  --background-primary: {hc_bg_primary};
  --text-primary: {hc_text_primary};
  --border-primary: {hc_border_primary};
  --focus-indicator: {hc_focus_indicator};
}


## Typography System Template

### 📝 **Typography Hierarchy & Specifications**
```markdown
## Typography System & Hierarchy

### 🔤 **Font Family Selection**
#### **Primary Typeface**
- **Font Family**: {primary_font_family}
- **Font Source**: {primary_font_source}
- **License**: {primary_font_license}
- **Fallback Stack**: {primary_font_fallback}
- **Character Support**: {primary_character_support}
- **Performance**: {primary_font_performance}

#### **Secondary Typeface**
- **Font Family**: {secondary_font_family}
- **Font Source**: {secondary_font_source}
- **License**: {secondary_font_license}
- **Fallback Stack**: {secondary_font_fallback}
- **Use Cases**: {secondary_font_use_cases}

#### **Monospace Typeface**
- **Font Family**: {monospace_font_family}
- **Font Source**: {monospace_font_source}
- **Use Cases**: {monospace_use_cases}
- **Fallback Stack**: {monospace_fallback}

### 📏 **Typography Scale & Hierarchy**
#### **Heading Hierarchy**
```css
/* Heading Styles */
.heading-1 {
  font-size: {h1_font_size};
  font-weight: {h1_font_weight};
  line-height: {h1_line_height};
  letter-spacing: {h1_letter_spacing};
  margin-bottom: {h1_margin_bottom};
}

.heading-2 {
  font-size: {h2_font_size};
  font-weight: {h2_font_weight};
  line-height: {h2_line_height};
  letter-spacing: {h2_letter_spacing};
  margin-bottom: {h2_margin_bottom};
}

.heading-3 {
  font-size: {h3_font_size};
  font-weight: {h3_font_weight};
  line-height: {h3_line_height};
  letter-spacing: {h3_letter_spacing};
  margin-bottom: {h3_margin_bottom};
}

.heading-4 {
  font-size: {h4_font_size};
  font-weight: {h4_font_weight};
  line-height: {h4_line_height};
  letter-spacing: {h4_letter_spacing};
  margin-bottom: {h4_margin_bottom};
}

Body Text Styles

/* Body Text Styles */
.body-large {
  font-size: {body_large_size};
  font-weight: {body_large_weight};
  line-height: {body_large_line_height};
  letter-spacing: {body_large_spacing};
}

.body-medium {
  font-size: {body_medium_size};
  font-weight: {body_medium_weight};
  line-height: {body_medium_line_height};
  letter-spacing: {body_medium_spacing};
}

.body-small {
  font-size: {body_small_size};
  font-weight: {body_small_weight};
  line-height: {body_small_line_height};
  letter-spacing: {body_small_spacing};
}

Specialized Text Styles

Text Style

Font Size

Font Weight

Line Height

Use Case

Accessibility

Caption

{caption_size}

{caption_weight}

{caption_height}

{caption_use}

{caption_accessibility}

Label

{label_size}

{label_weight}

{label_height}

{label_use}

{label_accessibility}

Button

{button_size}

{button_weight}

{button_height}

{button_use}

{button_accessibility}

Link

{link_size}

{link_weight}

{link_height}

{link_use}

{link_accessibility}

Code

{code_size}

{code_weight}

{code_height}

{code_use}

{code_accessibility}

📱 Responsive Typography

Breakpoint-Specific Typography

/* Mobile Typography */
@media (max-width: 768px) {
  .heading-1 { font-size: {h1_mobile_size}; }
  .heading-2 { font-size: {h2_mobile_size}; }
  .body-large { font-size: {body_large_mobile_size}; }
}

/* Tablet Typography */
@media (min-width: 769px) and (max-width: 1024px) {
  .heading-1 { font-size: {h1_tablet_size}; }
  .heading-2 { font-size: {h2_tablet_size}; }
  .body-large { font-size: {body_large_tablet_size}; }
}

/* Desktop Typography */
@media (min-width: 1025px) {
  .heading-1 { font-size: {h1_desktop_size}; }
  .heading-2 { font-size: {h2_desktop_size}; }
  .body-large { font-size: {body_large_desktop_size}; }
}


## Component Design System Template

### 🧩 **UI Component Specifications**
```markdown
## Component Design System & Guidelines

### ⚡ **Button Component System**
#### **Button Variants & States**
```css
/* Primary Button */
.button-primary {
  background-color: {button_primary_bg};
  color: {button_primary_text};
  border: {button_primary_border};
  border-radius: {button_border_radius};
  padding: {button_padding};
  font-size: {button_font_size};
  font-weight: {button_font_weight};
  transition: {button_transition};
}

.button-primary:hover {
  background-color: {button_primary_hover_bg};
  transform: {button_hover_transform};
}

.button-primary:focus {
  outline: {button_focus_outline};
  box-shadow: {button_focus_shadow};
}

.button-primary:disabled {
  background-color: {button_disabled_bg};
  color: {button_disabled_text};
  cursor: not-allowed;
}

Button Size Variations

Button Size

Padding

Font Size

Min Height

Use Case

Accessibility

Small

{button_small_padding}

{button_small_font}

{button_small_height}

{button_small_use}

{button_small_a11y}

Medium

{button_medium_padding}

{button_medium_font}

{button_medium_height}

{button_medium_use}

{button_medium_a11y}

Large

{button_large_padding}

{button_large_font}

{button_large_height}

{button_large_use}

{button_large_a11y}

📝 Form Component System

Input Field Specifications

/* Text Input */
.input-field {
  border: {input_border};
  border-radius: {input_border_radius};
  padding: {input_padding};
  font-size: {input_font_size};
  background-color: {input_background};
  color: {input_text_color};
  transition: {input_transition};
}

.input-field:focus {
  border-color: {input_focus_border};
  box-shadow: {input_focus_shadow};
  outline: none;
}

.input-field:invalid {
  border-color: {input_error_border};
}

.input-field:disabled {
  background-color: {input_disabled_bg};
  color: {input_disabled_text};
}

Form Validation & Error States

Success State: {success_state_styling}
Error State: {error_state_styling}
Warning State: {warning_state_styling}
Loading State: {loading_state_styling}
Disabled State: {disabled_state_styling}

💬 Chat Interface Components

Message Bubble Specifications

/* User Message */
.message-user {
  background-color: {user_message_bg};
  color: {user_message_text};
  border-radius: {message_border_radius};
  padding: {message_padding};
  margin: {message_margin};
  max-width: {message_max_width};
  align-self: flex-end;
}

/* Agent Message */
.message-agent {
  background-color: {agent_message_bg};
  color: {agent_message_text};
  border-radius: {message_border_radius};
  padding: {message_padding};
  margin: {message_margin};
  max-width: {message_max_width};
  align-self: flex-start;
}

/* System Message */
.message-system {
  background-color: {system_message_bg};
  color: {system_message_text};
  border-radius: {message_border_radius};
  padding: {message_padding};
  text-align: center;
  font-style: italic;
}

Chat Interface Layout

Chat Container: {chat_container_specs}
Message List: {message_list_specs}
Input Area: {input_area_specs}
Typing Indicator: {typing_indicator_specs}
Scroll Behavior: {scroll_behavior_specs}


## Animation & Interaction Guidelines Template

### 🎬 **Animation System & Motion Design**
```markdown
## Animation & Interaction Guidelines

### ⚡ **Animation Principles & Timing**
#### **Motion Design Philosophy**
- **Animation Purpose**: {animation_purpose}
- **Motion Principles**: {motion_principles}
- **Timing Functions**: {timing_functions}
- **Duration Guidelines**: {duration_guidelines}
- **Accessibility Considerations**: {motion_accessibility}

#### **Standard Animation Durations**
```css
/* Animation Timing Variables */
:root {
  --duration-instant: {duration_instant};
  --duration-fast: {duration_fast};
  --duration-medium: {duration_medium};
  --duration-slow: {duration_slow};
  --duration-slower: {duration_slower};
  
  --easing-ease-in: {easing_ease_in};
  --easing-ease-out: {easing_ease_out};
  --easing-ease-in-out: {easing_ease_in_out};
  --easing-bounce: {easing_bounce};
}

Interaction Feedback Animations

Hover Effects: {hover_animation_specs}
Click Feedback: {click_animation_specs}
Focus Indicators: {focus_animation_specs}
Loading States: {loading_animation_specs}
Transition Effects: {transition_animation_specs}

🎯 Responsive Behavior Guidelines

Breakpoint System

/* Responsive Breakpoints */
:root {
  --breakpoint-xs: {breakpoint_xs};
  --breakpoint-sm: {breakpoint_sm};
  --breakpoint-md: {breakpoint_md};
  --breakpoint-lg: {breakpoint_lg};
  --breakpoint-xl: {breakpoint_xl};
  --breakpoint-xxl: {breakpoint_xxl};
}

Layout Adaptation Rules

Mobile Layout: {mobile_layout_rules}
Tablet Layout: {tablet_layout_rules}
Desktop Layout: {desktop_layout_rules}
Large Screen Layout: {large_screen_layout_rules}
Content Prioritization: {content_prioritization_rules}


## Automated Generation Variables

### 🔧 **Template Variables**
```yaml
Template_Variables:
  style_guide_metadata:
    - {web_agent_id}: Unique web agent identifier
    - {web_agent_name}: Human-readable web agent name
    - {style_guide_version}: Style guide version number
    - {creation_date}: Style guide creation date
    - {current_date}: Current date (YYYY-MM-DD)
    - {current_time}: Current time (HH:MM:SS)
  
  brand_identity:
    - {brand_alignment}: Brand alignment strategy
    - {visual_identity}: Visual identity approach
    - {brand_personality}: Brand personality definition
    - {design_principles}: Core design principles
    - {competitive_positioning}: Market positioning
  
  color_system:
    - {primary_colors}: Primary color palette
    - {secondary_colors}: Secondary color palette
    - {functional_colors}: Semantic color system
    - {neutral_colors}: Neutral color system
    - {accessibility_compliance}: Color accessibility standards
  
  typography_system:
    - {font_families}: Selected font families
    - {typography_scale}: Typography hierarchy
    - {responsive_typography}: Responsive text scaling
    - {accessibility_features}: Typography accessibility
    - {performance_optimization}: Font loading optimization
  
  component_system:
    - {component_specifications}: UI component definitions
    - {interaction_patterns}: Interaction design patterns
    - {animation_guidelines}: Animation and motion design
    - {responsive_behavior}: Responsive design rules
    - {accessibility_integration}: Component accessibility
  
  temporal_variables:
    - {current_date}: Auto-generated current date
    - {style_guide_timeline}: Style guide development timeline
    - {update_schedule}: Style guide update schedule
    - {version_history}: Version history tracking

⚡ Automatic Date Integration

// Automatic date generation for style guides
const currentDate = new Date().toISOString().split('T')[0]; // 2025-07-13
const currentTime = new Date().toTimeString().split(' ')[0]; // HH:MM:SS
const styleGuideTimestamp = `${currentDate} ${currentTime}`;

This comprehensive web agent style guide template provides Web Agent Creator with a structured, automated approach to documenting visual design systems with brand consistency, accessibility compliance, and responsive design principles, ensuring complete design coherence and implementation guidance for all web agent development activities across the JAEGIS ecosystem.

Previous{{Project Name}} - Version Changelog Template NextConfiguration for Web Agents

Last updated 4 months ago

Good evening

hashtagExecutive Summary

hashtagStyle Guidelines

hashtagStyle Guide Header Template

hashtag📋 Style Guide Overview

hashtagBrand Identity & Visual Foundation Template

hashtag🎨 Brand Identity & Personality

hashtagColor System & Palette Template

hashtag🌈 Comprehensive Color System

hashtagFunctional Color Palette

hashtagNeutral Color System

hashtag📊 Color Usage Guidelines

hashtag🌓 Dark Mode & Theme Variations

hashtagDark Theme Color Adaptations

hashtagHigh Contrast Theme

hashtagBody Text Styles

hashtagSpecialized Text Styles

hashtag📱 Responsive Typography

hashtagBreakpoint-Specific Typography

hashtagButton Size Variations

hashtag📝 Form Component System

hashtagInput Field Specifications

hashtagForm Validation & Error States

hashtag💬 Chat Interface Components

hashtagMessage Bubble Specifications

hashtagChat Interface Layout

hashtagInteraction Feedback Animations

hashtag🎯 Responsive Behavior Guidelines

hashtagBreakpoint System

hashtagLayout Adaptation Rules

hashtag⚡ Automatic Date Integration

Executive Summary

Style Guidelines

Style Guide Header Template

📋 Style Guide Overview

Brand Identity & Visual Foundation Template

🎨 Brand Identity & Personality

Color System & Palette Template

🌈 Comprehensive Color System

Functional Color Palette

Neutral Color System

📊 Color Usage Guidelines

🌓 Dark Mode & Theme Variations

Dark Theme Color Adaptations

High Contrast Theme

Body Text Styles

Specialized Text Styles

📱 Responsive Typography

Breakpoint-Specific Typography

Button Size Variations

📝 Form Component System

Input Field Specifications

Form Validation & Error States

💬 Chat Interface Components

Message Bubble Specifications

Chat Interface Layout

Interaction Feedback Animations

🎯 Responsive Behavior Guidelines

Breakpoint System

Layout Adaptation Rules

⚡ Automatic Date Integration