Update branding guidelines and assets

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.
2026-05-11 22:59:03 +02:00
parent dc5b40ff6e
commit 08794eae05
13 changed files with 641 additions and 5 deletions
@@ -0,0 +1,76 @@
+# 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 |