Image folders
All public assets live under `public/`. Images go in `public/images/`.
public/images/ ├── hero/hero.jpg # Main hero product shot ├── product/device.jpg # Device close-up ├── sms/screenshot.jpg # Real SMS screenshot └── og/og-image.jpg # Open Graph / Twitter card
Wiring images into the site
1. Add the file to the folder above.
2. Confirm path in `src/constants/images.ts`.
3. Pass to `ImageSlot` or `next/image`:
import { IMAGES } from "@/constants/images";
import ImageSlot from "@/components/ui/ImageSlot";
<ImageSlot src={IMAGES.hero} alt="LifeTap device" />`ImageSlot` shows a dashed placeholder if the file is missing.
Brand colors (CSS variables)
| Token | Hex | Use |
|---|---|---|
| `--cream` | `#faf8f4` | Background |
| `--charcoal` | `#111111` | Text |
| `--amber` | `#e27b3c` | Primary accent |
| `--highlight-green` | `#d4edba` | Ditto-style marker |
| `--highlight-yellow` | `#ffe8a3` | Ditto-style marker |
Favicon
Replace `src/app/favicon.ico` with a LifeTap icon (32×32 or multi-size `.ico`).
OG image
Add `public/images/og/og-image.jpg` (1200×630), then wire in `src/app/layout.tsx` metadata when ready.