Crosswatch Brand Guidelines

Color Palette

Primary Colors

Electric Blue - Primary brand color

• Hex: #1E88E5
• RGB: rgb(30, 136, 229)
• Use: Primary actions, app bar, main UI elements

Vibrant Coral - Secondary accent

• Hex: #FF6B6B
• RGB: rgb(255, 107, 107)
• Use: Secondary actions, container sets, pause state, highlights

Neon Lime - Success/completion accent

• Hex: #00E676
• RGB: rgb(0, 230, 118)
• Use: Success states, completed exercises, rep-based exercises, timer markers

Dark Theme Colors

Dark Navy - Background

• Hex: #0A1929
• RGB: rgb(10, 25, 41)
• Use: Main background for dark mode

Navy Surface - Surface color

• Hex: #132F4C
• RGB: rgb(19, 47, 76)
• Use: Cards, elevated surfaces in dark mode

Usage Guidelines

Timer States

• Transition/Preparation: Electric Blue #1E88E5
• Active (Time-based): Vibrant Coral #FF6B6B
• Active (Rep-based): Neon Lime #00E676

UI Elements

• Container Sets: Vibrant Coral #FF6B6B
• Individual Exercises: Electric Blue #1E88E5
• Success States: Neon Lime #00E676

Buttons

• Play/Start: Neon Lime #00E676
• Pause: Vibrant Coral #FF6B6B
• Primary Actions: Electric Blue #1E88E5

Logo

Design Concept

The Crosswatch logo features a stylized stopwatch with an integrated "X" representing cross-training and high-intensity workouts.

Elements:

• Circular stopwatch body in Electric Blue gradient
• Stylized "X" in the center using Vibrant Coral
• Timer markers at 12, 3, 6, 9 o'clock positions in Neon Lime
• Crown/button at top for authenticity

Files:

• SVG: assets/branding/logo.svg
• PNG (1024x1024): assets/branding/icon.png

Logo Variations

• Full Logo: Use for splash screens, about pages
• Icon Only: Generated launcher icons for app icon

Typography

Primary Font: System Default (Roboto on Android, SF Pro on iOS)

• Headings: Bold, size 20-24
• Body: Regular, size 14-16
• Captions: Regular, size 12-14

Timer Display: Bold, large (60-80pt) for countdown numbers

Iconography

Icon Style: Material Design Icons

• Use outlined icons for inactive states
• Use filled icons for active/selected states

Common Icons:

• fitness_center - Individual exercises
• folder - Container sets
• timer - Time-based exercises
• repeat - Rep-based exercises
• play_arrow - Start
• pause - Pause
• stop - Stop/Complete

Spacing & Layout

Padding:

• Screen edges: 16px
• Card padding: 16px
• List item padding: 12px vertical, 16px horizontal

Border Radius:

• Cards: 12px
• Buttons: 8px
• Badges: 12px

Elevation:

• Cards (light mode): 2dp
• Cards (dark mode): 4dp
• FAB: 6dp

Accessibility

Color Contrast:

• Text on Electric Blue background: White text (WCAG AA compliant)
• Text on Vibrant Coral background: White text (WCAG AA compliant)
• Text on Neon Lime background: Dark text or white with transparency

Interactive Elements:

• Minimum touch target: 48x48dp
• Clear visual feedback on tap
• Sufficient color contrast for all states

Animation

Duration:

• Fast transitions: 150ms
• Normal transitions: 300ms
• Slow transitions: 500ms

Easing:

• Standard: cubic-bezier(0.4, 0.0, 0.2, 1)
• Deceleration: cubic-bezier(0.0, 0.0, 0.2, 1)
• Acceleration: cubic-bezier(0.4, 0.0, 1, 1)

Implementation

Flutter Theme

Colors are implemented in lib/main.dart using Material 3 ColorScheme:

ColorScheme.fromSeed(
  seedColor: const Color(0xFF1E88E5), // Electric Blue
  secondary: const Color(0xFFFF6B6B), // Vibrant Coral
  tertiary: const Color(0xFF00E676), // Neon Lime
  brightness: Brightness.light, // or Brightness.dark
)

Accessing Theme Colors

Always use theme colors instead of hardcoded values:

// Good
Theme.of(context).colorScheme.primary
Theme.of(context).colorScheme.secondary
Theme.of(context).colorScheme.tertiary

// Bad
Colors.blue
const Color(0xFF1E88E5)

Brand Voice

Tone: Energetic, motivating, direct, supportive Personality: Coach-like, encouraging, performance-focused Language: Active verbs, clear instructions, positive reinforcement

Examples:

• "Let's crush this workout!" ✓
• "You can do it!" ✓
• "Great job completing that round!" ✓
• "Please complete the form." ✗ (too formal)

Platform-Specific Considerations

Android

• Use Material Design 3 components
• Support dark theme based on system settings
• Adaptive icons with transparent background
• Use system navigation gestures

iOS

• Follow Human Interface Guidelines where appropriate
• Support both light and dark modes
• Use SF Symbols for iOS-specific icons
• Respect safe areas and notches

Desktop (Linux/Windows/macOS)

• Larger touch targets for mouse interaction
• Keyboard shortcuts for common actions
• Window chrome follows platform conventions
• Menu bar integration on macOS

---

Version: 1.0
Last Updated: January 2026
Contact: Crosswatch Brand Team