ScubaGPT Visual Style Guide

Overview

The ScubaGPT chatbot visual design is based on the scubagpt.com website, featuring a clean, modern, and professional aesthetic optimized for readability and user engagement.

Design Philosophy

• Clean & Minimal: Lots of white space, clear hierarchy
• Professional: Suitable for diving professionals and enthusiasts
• Readable: High contrast, generous spacing, clear typography
• Modern: Contemporary UI patterns with subtle animations

Color Palette

Primary Colors

Color	Hex	Usage
Primary Blue	#0095ff	User messages, primary actions, links
Primary Blue Dark	#0077cc	Hover states for primary elements
Primary Blue Light	#33adff	Focus states, highlights
Accent Red	#e63946	Header accent bar, important highlights

Neutral Colors

Color	Hex	Usage
Black	#000000	Primary text
Dark Gray	#666666	Secondary text, subtle elements
White	#ffffff	Backgrounds, user message text
Light Gray	#f5f5f5	Bot message backgrounds, input backgrounds
Border Gray	#dddddd	Borders, dividers

Semantic Colors

Color	Hex	Usage
Error Red	#dc2626	Error messages
Error Background	#fef2f2	Error message backgrounds

Typography

Font Family

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Rationale: System font stack ensures optimal readability and performance across all platforms.

Font Sizes & Weights

Element	Size	Weight	Usage
Header Title	20px	400	Main “SCUBAGPT” title
Header Subtitle	14px	400 (italic)	“The Scuba Diver’s ChatBot”
Body Text	15px	400	Message content, input
Small Text	14px	400	Suggestions, secondary info
Tiny Text	12px	400	Sources, metadata
Headings	16px	600	Welcome message headings

Line Height

• Body Text: 1.6 (optimal for readability)
• Compact Text: 1.5 (headers, buttons)

Layout & Spacing

Border Radius

Element	Radius	Notes
Message Bubbles	18px	Main corners
Message Tail	6px	Bottom corner (user right, bot left)
Input Field	24px	Pill-shaped for modern look
Buttons (Small)	6px	Header buttons
Buttons (Round)	50%	Send button, toggle button
Suggestions	24px	Pill-shaped

Padding & Spacing

Element	Padding	Notes
Messages Container	24px	All sides
Message Bubble	14px 18px	Vertical, Horizontal
Input Area	20px	All sides
Header	16px 20px	Vertical, Horizontal
Message Gap	20px	Between messages

Components

Header

Design:

• White background
• 3px red accent bar at bottom (#e63946)
• Black text
• Subtle shadow: 0 2px 4px rgba(0, 0, 0, 0.08)

Elements:

• Logo icon (24x24px)
• Title: “SCUBAGPT” (20px, regular)
• Subtitle: “The Scuba Diver’s ChatBot” (14px, italic, gray)
• Action buttons with light gray background
• Close button (subtle gray icon)

Message Bubbles

User Messages (Right-aligned)

• Background: Bright blue (#0095ff)
• Text: White
• Alignment: Right
• Max Width: 80%
• Border Radius: 18px (main), 6px (bottom-right)
• Padding: 14px 18px

Bot Messages (Left-aligned)

• Background: Light gray (#f5f5f5)
• Text: Black
• Alignment: Left
• Max Width: 80%
• Border: 1px solid #dddddd
• Border Radius: 18px (main), 6px (bottom-left)
• Padding: 14px 18px

Welcome Message

Design:

• Styled like a bot message (left-aligned)
• Light gray background with border
• Contains welcome text and suggestion pills
• No icon or heading (clean and minimal)

Input Area

Input Field:

• Background: Light gray (#f5f5f5)
• Border: 1px solid #dddddd
• Border Radius: 24px (pill-shaped)
• Padding: 12px 18px
• Focus State:
• Border: Primary blue
• Background: White
• Shadow: 0 0 0 3px rgba(0, 149, 255, 0.1)

Send Button:

• Shape: Circle (50% border-radius)
• Background: Primary blue
• Size: 44x44px
• Icon: White, 20x20px
• Shadow: 0 2px 8px rgba(0, 149, 255, 0.3)
• Hover: Scale 1.05, darker blue, stronger shadow

Toggle Button (Floating Widget)

• Shape: Circle
• Size: 60x60px
• Background: Primary blue
• Icon: White, 28x28px
• Shadow: 0 4px 16px rgba(0, 149, 255, 0.3)
• Hover: Scale 1.08, darker blue, stronger shadow

Suggestions

• Background: White
• Border: 1px solid #dddddd
• Border Radius: 24px (pill-shaped)
• Padding: 10px 16px
• Font Size: 14px
• Hover:
• Background: Primary blue
• Text: White
• Transform: translateY(-1px)
• Shadow: 0 2px 8px rgba(0, 149, 255, 0.3)

Links

In Bot Messages:

• Color: Primary blue (#0095ff)
• Decoration: None by default
• Hover: 1px border-bottom in primary blue

In User Messages:

• Color: White
• Decoration: 1px border-bottom (50% opacity)
• Hover: Full opacity border

Shadows

Elevation Levels

Level	Shadow	Usage
Low	0 1px 3px rgba(0, 0, 0, 0.08)	Subtle elements
Medium	0 2px 8px rgba(0, 149, 255, 0.3)	Interactive elements
High	0 4px 16px rgba(0, 149, 255, 0.3)	Floating elements
Focus	0 0 0 3px rgba(0, 149, 255, 0.1)	Focus rings

Animations & Transitions

Transition Timing

transition: all 0.2s ease;

Used for:

• Button hovers
• Input focus
• Color changes

Animations

Fade In (Messages)

@keyframes scubagpt-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Duration: 0.3s ease

Typing Indicator

@keyframes scubagpt-typing {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

Duration: 1.4s infinite

Cursor Blink

@keyframes scubagpt-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

Duration: 1s infinite

Hover Effects

Element	Effect
Buttons	Background color change
Send Button	Scale 1.05 + shadow increase
Toggle Button	Scale 1.08 + shadow increase
Suggestions	Background to blue + lift 1px
Links	Border-bottom appears

Dark Mode

Color Adjustments

Element	Light Mode	Dark Mode
Background	#ffffff	#1a1a1a
Secondary BG	#f5f5f5	#2a2a2a
Text	#000000	#ffffff
Text Light	#666666	#999999
Border	#dddddd	#3a3a3a
Bot Message BG	#f5f5f5	#2a2a2a

Note: Primary blue and accent red remain the same in dark mode for brand consistency.

Accessibility

Contrast Ratios

All text meets WCAG AA standards:

• Normal Text: Minimum 4.5:1
• Large Text: Minimum 3:1
• Interactive Elements: Minimum 3:1

Focus States

All interactive elements have visible focus indicators:

• Outline: 2px solid primary blue
• Offset: 2px
• Alternative: 3px shadow ring for inputs

Screen Reader Support

• Semantic HTML structure
• ARIA labels on icon buttons
• Role attributes on dialog elements
• Alt text on images

Reduced Motion

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

Responsive Design

Breakpoints

Breakpoint	Width	Adjustments
Mobile	< 480px	Full-width window, smaller toggle
Tablet	480px – 768px	Standard sizing
Desktop	> 768px	Standard sizing

Mobile Optimizations

• Window: calc(100vw - 20px) width
• Window: calc(100vh - 100px) height
• Toggle: 54x54px (smaller)
• Messages: 90% max-width (more space)

Best Practices

Do’s ✅

• Use system fonts for best performance
• Maintain generous spacing for readability
• Keep animations subtle and purposeful
• Ensure high contrast for text
• Test in both light and dark modes
• Provide hover states for all interactive elements

Don’ts ❌

• Don’t use custom fonts (slows loading)
• Don’t reduce spacing below guidelines
• Don’t use animations longer than 0.3s
• Don’t use low-contrast color combinations
• Don’t forget focus states
• Don’t make clickable areas smaller than 44x44px

Implementation Notes

CSS Variables

All colors and key values are defined as CSS variables in :root:

:root {
    --scubagpt-primary: #0095ff;
    --scubagpt-accent: #e63946;
    --scubagpt-text: #000000;
    /* ... etc */
}

This allows for easy theming and consistency across components.

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• CSS Grid and Flexbox
• CSS Variables
• CSS Animations
• Backdrop filters (optional enhancement)

Performance Considerations

• System fonts (no web font loading)
• CSS animations (GPU-accelerated)
• Minimal box-shadows
• Efficient selectors
• No large background images

Comparison with scubagpt.com

Similarities ✓

• Clean, minimal design
• Bright blue user messages (#0095ff)
• Light gray bot messages (#f5f5f5)
• Red accent bar in header (#e63946)
• Simple typography with system fonts
• Generous spacing and padding
• Rounded message bubbles
• Pill-shaped suggestions

Adaptations for Widget

• Added floating toggle button (not needed on main site)
• Compact header for smaller viewport
• Optimized spacing for widget size
• Added dark mode support
• Enhanced focus states for accessibility
• Mobile-responsive adjustments

Map Components (v1.5.0)

Map Container

Default dimensions: 1024×768px (configurable via shortcode width/height attributes)
Accessibility: role="region", aria-label="Interactive dive site and operator map"

Map Marker Icons

Marker	Color	Shape	Size
Dive Site	Blue (#0077be) with dark stroke (#005a8e)	Circle with diver wave motif	24×24 SVG
Dive Operator	Orange (#e68a00) with dark stroke (#b36b00)	Circle with shop/building motif	24×24 SVG

Map Cluster Markers

Cluster type	Background	Text	Border
Site Cluster	rgba(0, 119, 190, 0.7)	White, bold	2px solid rgba(0, 119, 190, 0.9)
Operator Cluster	rgba(230, 138, 0, 0.7)	White, bold	2px solid rgba(230, 138, 0, 0.9)

Cluster sizing: Small (< 10): 30×30px, Medium (10–99): 40×40px, Large (100+): 50×50px
Shape: Circular with border-radius: 50%

Map Search Control

• Position: Top of map container
• Background: White with border-radius 4px
• Shadow: 0 2px 4px rgba(0,0,0,0.2)
• Input: Full-width text input with 8px padding
• Clear button: Appears when text is present
• Badge: Shows “N of M” filtered count per layer

Map Detail Modal

Overlay: Semi-transparent dark backdrop
Modal panel: White background, max-width 500px, border-radius 8px
Animation: Fade-in on open
Header: Title with close button (×), padding 16px
Body: Scrollable content area with table layout for key-value pairs
Table styling: Alternating row backgrounds, left-aligned keys in bold
Description block: Full-width paragraph below the table
Nearby sites list: Bulleted list when applicable (operators)
Footer: Copy button for clipboard export
Accessibility: role="dialog", aria-modal="true", aria-labelledby, Escape to close, focus trapping

Map Layer Control

Leaflet layer control is overridden to match the ScubaGPT style:

• White background with subtle shadow
• Checkboxes for “Dive Sites” and “Dive Operators” layers
• Standard Leaflet positioning (top-right)

Version History

• v1.5.0 (2026-04-19): Map and streaming visual components
• Added dual-layer map styling (site/operator markers, clusters, search, modals)
• Added streaming processing indicator and spinner
• Added image upload, voice input, and offline banner styles
• Added dark mode, print styles, and prefers-reduced-motion support
• v1.2.0 (2026-01-13): Adopted scubagpt.com visual style
• Updated color palette to match site
• Changed header to white with red accent bar
• Updated message bubble styling
• Refined typography and spacing
• Added subtitle to header
• Improved hover and focus states

---

This style guide ensures visual consistency across the ScubaGPT chatbot and maintains alignment with the scubagpt.com brand identity.