fegger
08794eae05
Adds a comprehensive `BRAND_GUIDELINES.md` file detailing brand assets, color palettes, and typography. This commit also introduces multiple SVG assets for various logo usages (icon, horizontal, dark mode), updates the main `layout.tsx` metadata, and adds the necessary component files (`LogoIcon.tsx`, `LogoHorizontal.tsx`, etc.) to support these new assets.
77 lines
2.2 KiB
Markdown
77 lines
2.2 KiB
Markdown
# 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 |
|