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
85 lines
2.5 KiB
Markdown
85 lines
2.5 KiB
Markdown
# 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 |
|