Raydar Brand Assets

Official brand assets for the Raydar solar lead management platform.

Logo Files

All logo files are stored in /public/ directory for use throughout the app.

1. Horizontal Logo (Primary)

File: /public/raydar-horizontal.png
Description: Icon + "RAYDAR" text side-by-side
Use cases:

• Main app header (desktop)
• Email signatures
• Marketing materials
• Login/splash screens

Dimensions: ~1400x600px (horizontal lockup)
Background: Transparent
Colors: Coral icon (#FF6B5A) + Dark text (#2C3E50)

2. Icon Only (Secondary)

File: /public/raydar-icon.png
Description: R with radar waves symbol only
Use cases:

• Mobile app header (< 640px screens)
• Favicon (browser tab icon)
• App icons (iOS/Android)
• Social media profile pictures
• Loading spinners
• Compact UI elements

Dimensions: ~600x600px (square)
Background: Transparent
Colors: Coral (#FF6B5A)

3. Vertical Logo (Alternative)

File: /public/raydar-logo.png
Description: Icon stacked above "RAYDAR" text
Use cases:

• Splash screens
• Print materials
• Vertical layouts
• Alternative branding

Dimensions: ~800x1000px (vertical lockup)
Background: Transparent
Colors: Coral icon + Dark text

4. Logo with Background (Archive)

File: /public/raydar-logo.jpg
Description: Original version with white background
Use cases: Reference only, not for active use

Brand Colors

Primary

• Coral Red: #FF6B5A - Main brand color from logo
• Coral Light: #FF8A7A - Hover states, accents
• Coral Dark: #E84A39 - Active states, emphasis

Neutrals (Dark Theme)

• Navy: #1A1D29 - Deepest backgrounds
• Slate 900: #0F172A - Main backgrounds
• Slate 800: #1E293B - Elevated surfaces (cards, modals)
• Slate 700: #334155 - Borders, dividers
• Slate 600: #475569 - Disabled states
• Slate 500: #64748B - Secondary text
• Slate 400: #94A3B8 - Placeholder text
• Slate 300: #CBD5E1 - Primary text on dark
• White: #FFFFFF - Pure white accents

Accent Colors (Status)

• Success: #10B981 (Green)
• Warning: #F59E0B (Amber)
• Error: #EF4444 (Red)
• Info: #3B82F6 (Blue)

Typography

Font Stack

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;

Weights

• Regular: 400
• Medium: 500
• Semibold: 600
• Bold: 700

Logo Usage Guidelines

DO:

✅ Use on dark backgrounds (slate 900/800)
✅ Use on white/light backgrounds with proper spacing
✅ Maintain aspect ratio when resizing
✅ Use horizontal logo in headers (desktop)
✅ Use icon only for small spaces (mobile, favicon)
✅ Keep minimum 24px clear space around logo
✅ Use coral color (#FF6B5A) for brand consistency

DON'T:

❌ Distort or stretch the logo
❌ Change the logo colors (except approved variations)
❌ Add effects (shadows, glows, outlines) to logo files
❌ Place logo on busy backgrounds
❌ Rotate the logo
❌ Use low-resolution versions
❌ Recreate the logo with different fonts

Current Implementation

Header Component (app/page.tsx)

{/* Mobile: Icon only */}
<img 
  src="/raydar-icon.png" 
  alt="Raydar" 
  className="h-9 w-auto object-contain sm:hidden"
/>

{/* Desktop: Horizontal logo */}
<img 
  src="/raydar-horizontal.png" 
  alt="Raydar" 
  className="h-10 w-auto object-contain hidden sm:block"
/>

Favicon (app/layout.tsx)

icons: {
  icon: '/raydar-icon.png',
  apple: '/raydar-icon.png',
}

CSS Classes for Logo Styling

/* Standard logo hover effect */
.logo-hover {
  transform: scale(1);
  transition: transform 300ms ease;
}

.logo-hover:hover {
  transform: scale(1.05);
}

/* Logo drop shadow */
.logo-shadow {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

/* Coral glow effect (use sparingly) */
.logo-glow {
  filter: drop-shadow(0 0 20px rgba(255, 107, 90, 0.3));
}

File Structure

/public/
├── raydar-horizontal.png  (Primary - header logo)
├── raydar-icon.png        (Mobile header, favicon)
├── raydar-logo.png        (Vertical alternative)
└── raydar-logo.jpg        (Archive - with background)

Export Specifications

When creating new logo variations:

For Web:

• Format: PNG (transparent background)
• Resolution: 2x (@2x) for retina displays
• Compression: Optimize with TinyPNG or similar

For Print:

• Format: SVG (vector) or high-res PNG
• Resolution: 300 DPI minimum
• Color space: CMYK for print, RGB for digital

For Social Media:

• Square crop: 1200x1200px (icon only)
• Header: 1500x500px (horizontal logo)
• Profile: 400x400px (icon only)

Brand Voice

Tone: Professional, confident, helpful
Style: Modern SaaS, clean, straightforward
Personality: Tech-forward, reliable, efficient
Not: Flashy, overly casual, corporate-stuffy

Questions?

For brand asset requests or questions:

• Check this file first
• All current logo files in /public/
• Reference DESIGN-SYSTEM.md for color/typography specs