|
|
|
@@ -1,7 +1,7 @@
|
|
|
|
|
# Into the East — Design Spec
|
|
|
|
|
|
|
|
|
|
**Date:** 2026-06-18
|
|
|
|
|
**Status:** Approved for implementation
|
|
|
|
|
**Status:** Implemented — dark theme (see `design-system-light.md` for the original light-mode palette)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
@@ -29,30 +29,27 @@
|
|
|
|
|
|
|
|
|
|
## 2. Color System
|
|
|
|
|
|
|
|
|
|
### Palette
|
|
|
|
|
### Palette (dark theme — as implemented)
|
|
|
|
|
|
|
|
|
|
| Token | Hex | Usage |
|
|
|
|
|
|---|---|---|
|
|
|
|
|
| `--color-ink` | `#17171A` | Primary text (near-black with cool undertone, like ink) |
|
|
|
|
|
| `--color-ink-2` | `#4A4850` | Secondary text, body paragraphs |
|
|
|
|
|
| `--color-ink-muted` | `#9896A0` | Labels, timestamps, captions, placeholder text |
|
|
|
|
|
| `--color-paper` | `#F7F5F2` | Page background (warm paper white, not blue-white) |
|
|
|
|
|
| `--color-canvas` | `#FFFFFF` | Card backgrounds, modals, form surfaces |
|
|
|
|
|
| `--color-border` | `#E8E6E3` | Standard dividers, card borders |
|
|
|
|
|
| `--color-border-soft` | `#F0EDEA` | Subtle section dividers |
|
|
|
|
|
| `--color-accent` | `#1F6B5A` | Deep teal — brand color, links, CTAs, active states |
|
|
|
|
|
| `--color-accent-hover` | `#185647` | Darkened accent for hover/pressed states |
|
|
|
|
|
| `--color-accent-light` | `#EBF5F2` | Pale teal for highlight backgrounds |
|
|
|
|
|
| `--color-accent-on` | `#FFFFFF` | Text on accent-colored surfaces |
|
|
|
|
|
| `--color-paper` | `#1A1814` | Page background — warm near-black |
|
|
|
|
|
| `--color-canvas` | `#22201B` | Card surfaces, form backgrounds |
|
|
|
|
|
| `--color-ink` | `#EDE8DF` | Primary text — warm cream |
|
|
|
|
|
| `--color-ink-2` | `#B8B0A4` | Body text — muted warm |
|
|
|
|
|
| `--color-ink-muted` | `#90887E` | Labels, timestamps, captions |
|
|
|
|
|
| `--color-border` | `#2E2B25` | Standard dividers |
|
|
|
|
|
| `--color-border-soft` | `#252219` | Subtle dividers |
|
|
|
|
|
| `--color-accent` | `#2E9880` | Teal — lightened for dark-background contrast |
|
|
|
|
|
| `--color-accent-hover` | `#287A68` | Hover/pressed teal |
|
|
|
|
|
| `--color-accent-light` | `#1A2E29` | Pale teal tint backgrounds |
|
|
|
|
|
| `--color-accent-on` | `#FFFFFF` | Text on accent surfaces |
|
|
|
|
|
| `--color-surface-raised` | `#2A2720` | Elevated surfaces: tooltips, hover |
|
|
|
|
|
| `--color-ink-inverse` | `#17171A` | Text on accent-coloured buttons |
|
|
|
|
|
|
|
|
|
|
### Rationale for accent color
|
|
|
|
|
|
|
|
|
|
Deep teal `#1F6B5A` was chosen over:
|
|
|
|
|
- Blue (#0066cc current): too generic, too tech
|
|
|
|
|
- Orange/saffron: clichéd for "Asia" travel design
|
|
|
|
|
- Terracotta/cream: the most common default for lifestyle/travel blogs
|
|
|
|
|
|
|
|
|
|
Teal evokes bamboo, celadon porcelain, ancient jade, the color of temple gardens — all without being literal or kitsch. It works cleanly against both the warm paper background and white card surfaces.
|
|
|
|
|
Teal was chosen for its associations with bamboo, celadon porcelain, ancient jade, and temple gardens — without being literal or kitsch. On the dark palette, the original `#1F6B5A` was too low-contrast; it was lightened to `#2E9880` to maintain readable contrast against the warm near-black backgrounds. See `design-system-light.md` for the original light-palette values.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
@@ -267,7 +264,7 @@ UX changes from current:
|
|
|
|
|
### 5.7 Map Page
|
|
|
|
|
|
|
|
|
|
Minimal changes — the map itself is good. Style improvements:
|
|
|
|
|
- Leaflet popups: match the new design (DM Sans, `--radius-md`, `--shadow-md`)
|
|
|
|
|
- MapLibre popups: match the new design (DM Sans, `--radius-md`, `--shadow-md`)
|
|
|
|
|
- Markers: keep current circle style, update color to `--color-accent`
|
|
|
|
|
- Feed mini-map wrapper: match `--radius-md`, `--border`
|
|
|
|
|
|
|
|
|
@@ -277,7 +274,7 @@ Minimal changes — the map itself is good. Style improvements:
|
|
|
|
|
|
|
|
|
|
### 6.1 Reader — First Visit
|
|
|
|
|
|
|
|
|
|
1. Land on `/tracker` (journal feed)
|
|
|
|
|
1. Land on `/dailies` (journal feed)
|
|
|
|
|
2. See mini-map above fold (if entries exist) — route tells the geographic story at a glance
|
|
|
|
|
3. First entry card: full-bleed hero photo with date/location overlay — immediate emotional pull
|
|
|
|
|
4. Scroll through chronological entries
|
|
|
|
@@ -304,7 +301,7 @@ Minimal changes — the map itself is good. Style improvements:
|
|
|
|
|
7. **Location**: tap "📍 Get Location" → GPS fires → status shows "Kyoto, Japan · 34.985, 135.758" in one line
|
|
|
|
|
8. **Weather**: tap "🌤 Get Weather" (works only if location was captured) → status shows "Partly cloudy · 22°C"
|
|
|
|
|
9. **City/Country**: auto-populated from GPS is a nice-to-have for v2; in v1 type manually if needed
|
|
|
|
|
10. Tap "Post Entry" → success message → 2-second pause → redirect to /tracker (new entry visible at top)
|
|
|
|
|
10. Tap "Post Entry" → success message → 2-second pause → redirect to /dailies (new entry visible at top)
|
|
|
|
|
|
|
|
|
|
**Key principles:**
|
|
|
|
|
- One-thumb operation for all critical actions on mobile
|
|
|
|
@@ -329,7 +326,7 @@ Minimal changes — the map itself is good. Style improvements:
|
|
|
|
|
### Performance
|
|
|
|
|
- Google Fonts: loaded with `preconnect` hints
|
|
|
|
|
- Images: `loading="lazy"` on all non-above-fold images (already in place)
|
|
|
|
|
- Leaflet: loaded from CDN, only on pages that need it
|
|
|
|
|
- MapLibre: loaded from CDN, only on pages that need it
|
|
|
|
|
- No new JS frameworks — vanilla JS throughout
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
@@ -345,7 +342,7 @@ Minimal changes — the map itself is good. Style improvements:
|
|
|
|
|
| JS | Vanilla JS — unchanged | Current JS is well-structured, scope doesn't justify a framework |
|
|
|
|
|
| Icons | Unicode + emoji (current) | No dependency, works everywhere |
|
|
|
|
|
| Fonts | Google Fonts via CDN | Two fonts, display-swap, negligible impact |
|
|
|
|
|
| Maps | Leaflet.js (current) | Already in use, no reason to change |
|
|
|
|
|
| Maps | MapLibre GL JS | Replaced Leaflet; all 3 map templates use it |
|
|
|
|
|
| Build | None — no build pipeline | Grav's asset pipeline handles minification if needed |
|
|
|
|
|
|
|
|
|
|
**No Alpine.js, no TypeScript, no Tailwind.** The site has clean vanilla JS and CSS today; a redesign is about visual quality, not framework migration. Introducing a build pipeline on a 3-week timeline is a distraction.
|
|
|
|
|
m038