# TimeToLeave Brand Guidelines

## Logo

The TimeToLeave logo features a **melting clock** flowing into a right-pointing departure arrow, symbolizing "it's time to go" — time literally dripping away as you head out the door.

### Meaning
- **Melting clock** = Time awareness, urgency, fluidity — like Dali's persistence of memory
- **Violet→Magenta gradient** = Creativity, energy, modernity
- **Hot pink arrow** (#FF2D8D) = Departure, leaving, forward motion
- **Dark background** = Premium, sleek, focused

## Colors

### Primary Gradient
| Name | Hex | Usage |
|------|-----|-------|
| Violet | `#8B5CF6` | Gradient start |
| Magenta | `#B23CFF` | Gradient mid |
| Pink | `#D946EF` | Gradient end |
| Hot Pink | `#FF2D8D` | Accents, arrows, "To" in wordmark |

### Text
| Name | Hex | Usage |
|------|-----|-------|
| Off-White | `#F4F1EA` | Primary text on dark backgrounds |

### Background
| Name | Hex | Usage |
|------|-----|-------|
| Deep Space | `#03030A` | Outer background |
| Night | `#090816` | Inner background |
| Twilight | `#17112A` | Highlights, glows |

### 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:** Inter, Poppins, Montserrat, Avenir Next, Arial, sans-serif
- **Weights:** 800 for headlines, 700 for headings, 600 for semibold, 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 `timetoleave_dark_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/web/src/app/timetoleave_dark_logo.svg` | Master SVG with full wordmark |