Compare commits

..

3 Commits

4 changed files with 57 additions and 26 deletions
+1 -1
View File
@@ -70,7 +70,7 @@ templates/
└─ gpx-manager.html.twig ← extends base; admin UI for GPX file management └─ gpx-manager.html.twig ← extends base; admin UI for GPX file management
``` ```
Partials live in `templates/partials/`. Key partials: `entry-card.html.twig` (feed card), `map-init.html.twig` (shared MapLibre bootstrap). Partials live in `templates/partials/`. Currently one partial: `base.html.twig` (the site shell extended by all page templates).
--- ---
+34
View File
@@ -0,0 +1,34 @@
# Design System — Light Mode Color Palette
Light-mode counterpart to `design-system.md`. Only color tokens differ between themes — typography, spacing, radius, shadows, and layout are identical.
---
## Color palette
| Token | Light | Dark | Usage |
|---|---|---|---|
| `--color-paper` | `#F7F5F2` | `#1A1814` | Page background |
| `--color-canvas` | `#FFFFFF` | `#22201B` | Card surfaces, form backgrounds |
| `--color-ink` | `#17171A` | `#EDE8DF` | Primary text |
| `--color-ink-2` | `#4A4850` | `#B8B0A4` | Body text — muted |
| `--color-ink-muted` | `#9896A0` | `#90887E` | Labels, timestamps, captions |
| `--color-border` | `#E8E6E3` | `#2E2B25` | Standard dividers |
| `--color-border-soft` | `#F0EDEA` | `#252219` | Subtle dividers |
| `--color-accent` | `#1F6B5A` | `#2E9880` | Teal — brand color, links, CTAs |
| `--color-accent-hover` | `#185647` | `#287A68` | Hover/pressed teal |
| `--color-accent-light` | `#EBF5F2` | `#1A2E29` | Pale teal tint backgrounds |
| `--color-accent-on` | `#FFFFFF` | `#FFFFFF` | Text on accent surfaces |
| `--color-surface-raised` | ⚠️ not specified | `#2A2720` | Elevated surfaces: tooltips, hover |
| `--color-ink-inverse` | ⚠️ not specified | `#17171A` | Text on accent-coloured buttons |
### Notes on accent values
The dark accent is `#2E9880` — a lightened version of the original `#1F6B5A` to maintain contrast against near-black backgrounds.
### Gaps to resolve
Two tokens were added during dark-theme implementation without light counterparts:
- **`--color-surface-raised`**: dark is `#2A2720` (slightly above canvas). Light equivalent would be a warm off-white slightly darker than `--color-canvas` (`#FFFFFF`).
- **`--color-ink-inverse`**: dark is `#17171A` (dark text on the bright `#2E9880` accent). Light equivalent would likely be `#FFFFFF` (white text on the dark `#1F6B5A` accent) — same as `--color-accent-on`.
+21 -24
View File
@@ -1,7 +1,7 @@
# Into the East — Design Spec # Into the East — Design Spec
**Date:** 2026-06-18 **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 ## 2. Color System
### Palette ### Palette (dark theme — as implemented)
| Token | Hex | Usage | | Token | Hex | Usage |
|---|---|---| |---|---|---|
| `--color-ink` | `#17171A` | Primary text (near-black with cool undertone, like ink) | | `--color-paper` | `#1A1814` | Page background — warm near-black |
| `--color-ink-2` | `#4A4850` | Secondary text, body paragraphs | | `--color-canvas` | `#22201B` | Card surfaces, form backgrounds |
| `--color-ink-muted` | `#9896A0` | Labels, timestamps, captions, placeholder text | | `--color-ink` | `#EDE8DF` | Primary text — warm cream |
| `--color-paper` | `#F7F5F2` | Page background (warm paper white, not blue-white) | | `--color-ink-2` | `#B8B0A4` | Body text — muted warm |
| `--color-canvas` | `#FFFFFF` | Card backgrounds, modals, form surfaces | | `--color-ink-muted` | `#90887E` | Labels, timestamps, captions |
| `--color-border` | `#E8E6E3` | Standard dividers, card borders | | `--color-border` | `#2E2B25` | Standard dividers |
| `--color-border-soft` | `#F0EDEA` | Subtle section dividers | | `--color-border-soft` | `#252219` | Subtle dividers |
| `--color-accent` | `#1F6B5A` | Deep teal — brand color, links, CTAs, active states | | `--color-accent` | `#2E9880` | Teal — lightened for dark-background contrast |
| `--color-accent-hover` | `#185647` | Darkened accent for hover/pressed states | | `--color-accent-hover` | `#287A68` | Hover/pressed teal |
| `--color-accent-light` | `#EBF5F2` | Pale teal for highlight backgrounds | | `--color-accent-light` | `#1A2E29` | Pale teal tint backgrounds |
| `--color-accent-on` | `#FFFFFF` | Text on accent-colored surfaces | | `--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 ### Rationale for accent color
Deep teal `#1F6B5A` was chosen over: 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.
- 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.
--- ---
@@ -267,7 +264,7 @@ UX changes from current:
### 5.7 Map Page ### 5.7 Map Page
Minimal changes — the map itself is good. Style improvements: 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` - Markers: keep current circle style, update color to `--color-accent`
- Feed mini-map wrapper: match `--radius-md`, `--border` - 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 ### 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 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 3. First entry card: full-bleed hero photo with date/location overlay — immediate emotional pull
4. Scroll through chronological entries 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 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" 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 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:** **Key principles:**
- One-thumb operation for all critical actions on mobile - One-thumb operation for all critical actions on mobile
@@ -329,7 +326,7 @@ Minimal changes — the map itself is good. Style improvements:
### Performance ### Performance
- Google Fonts: loaded with `preconnect` hints - Google Fonts: loaded with `preconnect` hints
- Images: `loading="lazy"` on all non-above-fold images (already in place) - 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 - 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 | | JS | Vanilla JS — unchanged | Current JS is well-structured, scope doesn't justify a framework |
| Icons | Unicode + emoji (current) | No dependency, works everywhere | | Icons | Unicode + emoji (current) | No dependency, works everywhere |
| Fonts | Google Fonts via CDN | Two fonts, display-swap, negligible impact | | 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 | | 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. **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.
@@ -1,7 +1,7 @@
# Entry Enrichment — Design Spec # Entry Enrichment — Design Spec
**Date:** 2026-06-21 **Date:** 2026-06-21
**Status:** Approved **Status:** Done
## Overview ## Overview