Files

T

fegger 08794eae05 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

2.2 KiB

Raw Blame History

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

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

2.2 KiB Raw Blame History