m038/intotheeast-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update reference docs to match implementation (dark theme, MapLibre, /dailies)

Browse Source
This commit is contained in:
Mischa
2026-06-21 14:34:45 +02:00
parent 4be7a52fd8
commit 11167e9a65
3 changed files with 390 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/reference/design-system.md
+21 -24
View File
@@ -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.