fegger
eac4f6e216
- Update BRAND_GUIDELINES.md with new melting clock logo concept - Rebrand UI components with new violet-to-pink gradient color scheme - Implement HAFAS authentication headers and GET support in route - Update logo SVGs to match new brand guidelines - Fix HAFAS time format to exclude millisecond padding - Update default station to Mödling Bahnhof - Bump workspace package versions to 1.0.0
2.5 KiB
2.5 KiB
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
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 |