diff --git a/BRAND_GUIDELINES.md b/BRAND_GUIDELINES.md new file mode 100644 index 0000000..cfd690d --- /dev/null +++ b/BRAND_GUIDELINES.md @@ -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) + + +// Horizontal header logo + + +// Custom sizing + +``` + +## 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 | diff --git a/apps/mobile/assets/logo.svg b/apps/mobile/assets/logo.svg new file mode 100644 index 0000000..02e3a31 --- /dev/null +++ b/apps/mobile/assets/logo.svg @@ -0,0 +1,58 @@ + + TimeToLeave app icon + An icon-only TimeToLeave mark: a violet and magenta melting clock on a dark rounded-square background, flowing into a right arrow. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/public/timetoleave_app_icon.png b/apps/web/public/timetoleave_app_icon.png new file mode 100644 index 0000000..11640f0 Binary files /dev/null and b/apps/web/public/timetoleave_app_icon.png differ diff --git a/apps/web/public/timetoleave_logo.png b/apps/web/public/timetoleave_logo.png new file mode 100644 index 0000000..27be385 Binary files /dev/null and b/apps/web/public/timetoleave_logo.png differ diff --git a/apps/web/src/app/icon.svg b/apps/web/src/app/icon.svg new file mode 100644 index 0000000..02e3a31 --- /dev/null +++ b/apps/web/src/app/icon.svg @@ -0,0 +1,58 @@ + + TimeToLeave app icon + An icon-only TimeToLeave mark: a violet and magenta melting clock on a dark rounded-square background, flowing into a right arrow. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 17464d2..8e18e1b 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -7,8 +7,13 @@ import Navbar from "@/app/layout/Navbar"; import ReminderEngine from "@/app/layout/ReminderEngine"; export const metadata: Metadata = { - title: "TimeToLeave", - description: "Plan your train journeys and compare with bicycle routing", + "TimeToLeave — Smart Departure Planner" + description: + "Plan your train journeys, sync with your calendar, and know exactly when to leave for your appointments.", + icons: { + icon: "/icon.svg", + apple: "/icon.svg", + }, }; export default function RootLayout({ diff --git a/apps/web/src/app/layout/Header.tsx b/apps/web/src/app/layout/Header.tsx index 88e20df..dc56826 100644 --- a/apps/web/src/app/layout/Header.tsx +++ b/apps/web/src/app/layout/Header.tsx @@ -7,6 +7,8 @@ import ReminderSettingsPanel from "@/app/ui/ReminderSettingsPanel"; import { useServerHealth } from "@/hooks/useServerHealth"; import { useEventsStore } from "@/hooks/useEventsStore"; import { useTheme } from "@/hooks/useTheme"; +import Link from "next/link"; +import LogoHorizontal from "@/app/ui/LogoHorizontal"; type HeaderProps = { className?: string; @@ -24,9 +26,9 @@ const Header: React.FC = ({ className = "" }) => {
-

- ÖBB Planner -

+ + +
diff --git a/apps/web/src/app/opengraph-image.svg b/apps/web/src/app/opengraph-image.svg new file mode 100644 index 0000000..fdb721f --- /dev/null +++ b/apps/web/src/app/opengraph-image.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Fire-exit running person at date-window position */} + + + + + + + + + + + + + + + + Time + + + To + + + Leave + + + + + Smart Departure Planner + + + + + Never miss your train again. ⏱️ 🚆 🚲 + + diff --git a/apps/web/src/app/timetoleave_app_icon.svg b/apps/web/src/app/timetoleave_app_icon.svg new file mode 100644 index 0000000..02e3a31 --- /dev/null +++ b/apps/web/src/app/timetoleave_app_icon.svg @@ -0,0 +1,58 @@ + + TimeToLeave app icon + An icon-only TimeToLeave mark: a violet and magenta melting clock on a dark rounded-square background, flowing into a right arrow. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/app/timetoleave_dark_logo.svg b/apps/web/src/app/timetoleave_dark_logo.svg new file mode 100644 index 0000000..10acede --- /dev/null +++ b/apps/web/src/app/timetoleave_dark_logo.svg @@ -0,0 +1,69 @@ + + TimeToLeave dark melting clock logo + A dark-background TimeToLeave logo with a violet and magenta melting clock flowing into an arrow, plus a wordmark. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Time + To + Leave + + diff --git a/apps/web/src/app/ui/LogoHorizontal.tsx b/apps/web/src/app/ui/LogoHorizontal.tsx new file mode 100644 index 0000000..7e1c52f --- /dev/null +++ b/apps/web/src/app/ui/LogoHorizontal.tsx @@ -0,0 +1,111 @@ +export default function LogoHorizontal({ + height = 40, + className = "", +}: { + height?: number; + className?: string; +}) { + const width = height * 4.5; + return ( + + + + + + + + + + + + + {/* Icon on the left */} + + + + {[0, 60, 120, 180, 240, 300].map((angle, i) => ( + + ))} + + + + + + + + + {/* Text on the right */} + + Time + + + To + + + Leave + + + ); +} diff --git a/apps/web/src/app/ui/LogoIcon.tsx b/apps/web/src/app/ui/LogoIcon.tsx new file mode 100644 index 0000000..894ac70 --- /dev/null +++ b/apps/web/src/app/ui/LogoIcon.tsx @@ -0,0 +1,123 @@ +export default function LogoIcon({ + size = 48, + className = "", +}: { + size?: number; + className?: string; +}) { + return ( + + + + + + + + + + + + + + + + {[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map( + (angle, i) => ( + + ) + )} + + + + + + + + + + + + + {/* Fire-exit: running person through open door */} + + + + + + + + + + + + + + + ); +} diff --git a/apps/web/src/app/ui/logos.ts b/apps/web/src/app/ui/logos.ts new file mode 100644 index 0000000..3e9ab80 --- /dev/null +++ b/apps/web/src/app/ui/logos.ts @@ -0,0 +1,2 @@ +export { default as LogoIcon } from "./LogoIcon"; +export { default as LogoHorizontal } from "./LogoHorizontal";