# UI Redesign Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Redesign the Into the East travel blog UI using the design spec in `user/docs/design/design-spec.md` — introducing DM Serif Display + DM Sans fonts, a deep teal design system, full-bleed entry card photos, and polished mobile UX across all pages.
**Architecture:** Pure CSS + HTML/Twig changes on top of existing Grav CMS stack. New `tokens.css` file holds all design tokens as CSS custom properties. Existing `style.css` is rewritten to use those tokens. No new JS frameworks, no build pipeline.
**Tech Stack:** Grav CMS (PHP/Twig), Vanilla CSS (custom properties), Vanilla JS, Google Fonts CDN (DM Serif Display + DM Sans), Leaflet.js (unchanged)
## Global Constraints
- **No JS framework** — all interactivity stays vanilla JS
- **No build pipeline** — CSS ships as plain files loaded by Grav
- **No new Grav plugins** — only modify existing theme + content files
- **Grav file paths:** theme is at `user/themes/intotheeast/`, pages at `user/pages/`
- **Design tokens source of truth:** `user/themes/intotheeast/css/tokens.css`
- **Accent color:** `#1F6B5A` (deep teal) — used everywhere `#0066cc` is today
- **Font stack display:** `'DM Serif Display', Georgia, serif`
- **Font stack UI:** `'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif`
- **All interactive elements:** `min-height: 44px`
- **Content max-width:** `720px`
- **Only edit files inside `user/`** — never touch the Grav core
- **Verify in browser at each task:** `http://100.96.115.96:8081`
---
### Task 1: Design tokens file + font loading
**Files:**
- Create: `user/themes/intotheeast/css/tokens.css`
- Modify: `user/themes/intotheeast/templates/partials/base.html.twig` (add font preconnect + tokens import)
**Interfaces:**
- Produces: all CSS custom properties consumed by Tasks 2–8
- [ ] **Step 1: Create tokens.css**
Create `user/themes/intotheeast/css/tokens.css` with this exact content:
```css
:root {
/* ── Colors ─────────────────────────────────────────────── */
--color-ink: #17171A;
--color-ink-2: #4A4850;
--color-ink-muted: #9896A0;
--color-paper: #F7F5F2;
--color-canvas: #FFFFFF;
--color-border: #E8E6E3;
--color-border-soft: #F0EDEA;
--color-accent: #1F6B5A;
--color-accent-hover: #185647;
--color-accent-light: #EBF5F2;
--color-accent-on: #FFFFFF;
/* ── Fonts ───────────────────────────────────────────────── */
--font-display: 'DM Serif Display', Georgia, serif;
--font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
/* ── Type scale ──────────────────────────────────────────── */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.125rem;
--text-lg: 1.375rem;
--text-xl: 1.75rem;
--text-2xl: 2.25rem;
--text-3xl: 3rem;
/* ── Leading ─────────────────────────────────────────────── */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.65;
/* ── Spacing (4px grid) ──────────────────────────────────── */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
/* ── Radius ──────────────────────────────────────────────── */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
/* ── Shadows ─────────────────────────────────────────────── */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.14);
/* ── Layout ──────────────────────────────────────────────── */
--content-width: 720px;
--site-header-height: 60px;
}
```
- [ ] **Step 2: Add font loading + tokens import to base.html.twig**
In `user/themes/intotheeast/templates/partials/base.html.twig`, replace the `` block with:
```twig
{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}
```
- [ ] **Step 3: Verify fonts load**
Open `http://100.96.115.96:8081/tracker` in the browser. Open DevTools → Network → filter "fonts.gstatic.com". Both `DM_Sans` and `DM_Serif_Display` should appear in the network log. If not, check the `` href in page source.
- [ ] **Step 4: Commit**
```bash
cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user
git add themes/intotheeast/css/tokens.css themes/intotheeast/templates/partials/base.html.twig
git commit -m "feat: add design tokens and DM font loading"
```
---
### Task 2: Rewrite global styles with design tokens
**Files:**
- Modify: `user/themes/intotheeast/css/style.css` — global reset and base styles only (header, nav, body, site-main). Per-component CSS is updated in Tasks 3–8.
**Interfaces:**
- Consumes: all tokens from `tokens.css`
- Produces: base body/typography/layout styles consumed by all templates
- [ ] **Step 1: Replace the top section of style.css**
Open `user/themes/intotheeast/css/style.css`. Replace from line 1 through the end of the `.site-main` block (approximately lines 1–41) with:
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-ui);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-ink);
background: var(--color-paper);
-webkit-font-smoothing: antialiased;
}
.site-main {
max-width: var(--content-width);
margin: 0 auto;
padding: var(--space-8) var(--space-5);
}
@media (min-width: 520px) {
.site-main { padding: var(--space-10) var(--space-6); }
}
```
- [ ] **Step 2: Update the login form section to use tokens**
Find the `/* ── Login form ──` section and update input/button colors from hardcoded to tokens. Replace the `.login-form` block with:
```css
.login-form { max-width: 400px; margin: var(--space-8) auto; padding: 0 var(--space-4); }
.login-form .form-field { margin-bottom: var(--space-5); }
.login-form .form-label label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); }
.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="email"] {
width: 100%;
font-family: var(--font-ui);
font-size: var(--text-base);
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
min-height: 44px;
background: var(--color-canvas);
color: var(--color-ink);
}
.login-form input:focus {
outline: 2px solid var(--color-accent);
outline-offset: 1px;
border-color: var(--color-accent);
}
.login-form .form-actions { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.login-form .button {
display: block; width: 100%; text-align: center;
padding: 0.85rem 1rem; min-height: 44px;
border-radius: var(--radius-md); font-size: var(--text-base);
font-family: var(--font-ui); font-weight: 600;
cursor: pointer; border: none;
}
.login-form .button.primary { background: var(--color-accent); color: var(--color-accent-on); }
.login-form .button.primary:hover { background: var(--color-accent-hover); }
.login-form .button.secondary { background: #f0f0f0; color: #333; text-decoration: none; line-height: 44px; padding: 0 1rem; }
.login-form .rememberme { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
```
- [ ] **Step 3: Verify base styles apply**
Open `http://100.96.115.96:8081`. Confirm:
- Page background is warm paper white (not pure white)
- Body text uses DM Sans
- No visual regressions on login page
- [ ] **Step 4: Commit**
```bash
cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user
git add themes/intotheeast/css/style.css
git commit -m "feat: update global styles to use design tokens"
```
---
### Task 3: Site header redesign
**Files:**
- Modify: `user/themes/intotheeast/templates/partials/base.html.twig` (header HTML)
- Modify: `user/themes/intotheeast/css/style.css` (header CSS section)
**Interfaces:**
- Consumes: `--font-display`, `--color-accent`, `--color-border`, `--color-ink-2`
- Produces: site header used by all pages
- [ ] **Step 1: Update header HTML in base.html.twig**
Replace the existing `