# TimeToLeave Brand Guidelines

## Logo

The TimeToLeave logo combines a clock face with an arrow pointing to 10:10 (the classic "watch ad" time), symbolizing "it's time to go."

### Meaning
- **Clock face** = Time awareness, countdowns, punctuality
- **Orange→Yellow arrow** = Departure, leaving, urgency
- **Blue→Purple gradient** = Trust, technology, professionalism
- **Exit door** (on full icon) = Leaving, heading out

## Colors

### Primary
| Name | Hex | Usage |
|------|-----|-------|
| System Blue | `#007AFF` | Primary actions, links, active states |
| Indigo | `#5856D6` | Gradients, secondary elements |

### Accent
| Name | Hex | Usage |
|------|-----|-------|
| Orange | `#FF9500` | Warnings, countdowns, arrow accents |
| Gold | `#FFD60A` | Highlights, urgency indicators |

### Status Colors (Countdown)
| Status | Color | Meaning |
|--------|-------|---------|
| Red | `#FF3B30` | Leave now / Late |
| Orange | `#FF9500` | Getting close |
| Yellow | `#FFCC00` | On track |
| Green | `#34C759` | Plenty of time |
| Blue | `#5AC8FA` | Confirmed / Done |

## Typography

- **Primary:** System font stack (`system-ui, -apple-system, sans-serif`)
- **Weights:** 700 for headings, 400 for body, 300 for captions
- **Letter spacing:** -0.02em for headings (tighter, more modern)

## Logo Variants

### Icon Only
Use `LogoIcon` component for favicons, app icons, loading states.

### Horizontal Logo
Use `LogoHorizontal` component for headers, navigation, about pages.

### Full Logo (SVG)
Use `assets/logo.svg` for downloads, print, marketing materials.

## Usage

```tsx
import { LogoIcon, LogoHorizontal } from "@/app/ui/logos";

// Icon only (48px)
<LogoIcon size={48} />

// Horizontal header logo
<LogoHorizontal height={32} />

// Custom sizing
<LogoIcon size={128} className="drop-shadow-lg" />
```

## File Locations

| File | Purpose |
|------|---------|
| `apps/web/src/app/ui/LogoIcon.tsx` | React icon component |
| `apps/web/src/app/ui/LogoHorizontal.tsx` | React horizontal logo |
| `apps/web/src/app/icon.svg` | Web favicon (auto-generated by Next.js) |
| `apps/web/src/app/opengraph-image.svg` | Social sharing image |
| `apps/mobile/assets/logo.svg` | Master SVG for mobile assets |