# Design Notes — todo.martin-bierschenk.de v2 > Visual reference: `Todo Calendar Redesign v2.html` > Aesthetic: Minimal Scandinavian / TeuxDeux-style hairline editorial > Goal: a calm, airy, paper-like weekly planner. **Restyle only — no logic, routing, data, sync, or component-API changes.** --- ## 0 · Rules of engagement (read first) 1. **Do not change behaviour.** Keep all existing hooks, server actions, NextAuth wiring, calendar sync, recurring-task logic, drag-and-drop, keyboard shortcuts, and component prop shapes exactly as they are. 2. **Touch JSX + CSS only.** New CSS variables / Tailwind tokens are fine; new state, new effects, new dependencies are not. 3. **One component per commit.** Visual restyles are easy to review (and revert) when scoped. Suggested order: tokens → layout shell → day grid → all-day strip → events → tasks (anyday) → left rail → right settings → header. 4. **Keep existing component file structure** (`WeeklyCalendarView.tsx`, `TaskList.tsx`, `CalendarEventModal.tsx`, etc.). Only edit them. 5. **Where this doc and the HTML mock disagree, the mock wins** for visuals. Where the mock and the existing code disagree on behaviour, the existing code wins. --- ## 1 · Design tokens Add these as CSS custom properties (or extend `tailwind.config.js` `theme.extend`). All other colors should be derived from these. ### Color keep the colors for now **Calendar-source palette** (event chips, muted on purpose — they should not compete with the today-red): | Source | Background | Border-left | Title color | Meta color | |---------------|-------------|-------------|-------------|------------| | Default/work | `#eef2f7` | `#6c87a8` | `#2b3f57` | `#6c87a8` | | Family (`.fam`) | `#fbeef0` | `#b85a6a` | `#5a2530` | `#99536a` | | Finance (`.fin`)| `#f6f0e2` | `#a88a3c` | `#4a3a14` | `#8a6f2a` | | Dev/GitHub (`.dev`) | `#ecf3ed` | `#5a7a4a` | `#2c4527` | `#5a7a4a` | | Note (`.note`) | transparent | none | `var(--ink-2)` | `var(--ink-4)` | **All-day chip palette** (solid pills above the day headers): | Variant | Background | Text | |--------------|-------------|-----------| | Default | `#b8b8b0` | `#fff` | | Family (`.fam`) | `#e88a8a` | `#fff` | | Special (`.special`, anniversaries, milestones) | `#f4d588` | `#6b4f10` | ### Typography - **UI / sans**: `Geist`, fallback `-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif` - **Editorial / serif**: `Fraunces` italic — used **only** for the small quote in the header bar - **Mono / numerals**: `Geist Mono` if needed; otherwise rely on `font-variant-numeric: tabular-nums` for any clock/date/count Body letter-spacing: `-0.005em` baseline. | Role | Size | Weight | LH | Other | |-----------------------|------|--------|-------|-------| | Section h3 | 16px | 600 | 1.2 | | | Day name (`.dn`) | 16px | 600 | 1 | uppercase, `letter-spacing: 0.04em` | | Day name — today | 16px | 700 | 1 | color: `--accent` | | Day date (`.dnum`) | 11px | 400 | 1 | uppercase, `tabular-nums`, color: `--ink-4` | | Header KW (`.wk`) | 13px | 500 | — | `letter-spacing: 0.02em` | | Header quote | 12px | 400 | — | Fraunces italic, `--ink-4` | | Event title | 12px | 500 | 1.25 | | | Event note title | 11.5px | 400 | 1.25 | | | Event meta / time | 10.5px | 400 | — | `tabular-nums` | | All-day chip | 11px | 500 | 1.2 | | | List heading (`h4`) | 12px | 500 | — | uppercase, `letter-spacing: 0.04em` | | List item | 12px | 400 | 1.35 | | | Hour label | 10px | 400 | — | `tabular-nums`, color: `--ink-5` | | Tasks tab | 12px | 500/600 | — | active is 600 | | Tab counter chip | 10.5px | 500 | 1.4 | `tabular-nums` | ### Spacing & geometry - Left rail: **56px** wide, fixed - Right settings drawer: **360px** wide, slides in from the right (`transform: translateX(100%)` → `translateX(0)`, `cubic-bezier(.2,.8,.2,1)` 250ms) - Permanent top header: **36px** tall, white, hairline bottom - Day grid hour-row height: **56px** - Day grid column gap: **20px** - Day grid horizontal padding: **24px** - Border radius: 4px (events), 6px (corner buttons, inputs), 7–8px (list cards, segmented pills), 10px (tasks tab pill container) - All shadows are tiny: `0 1px 2px rgba(0,0,0,.06)` or `0 4px 16px rgba(0,0,0,.06)`. Never bigger. - Hover surfaces: `rgba(0,0,0,.05)` for icons, `rgba(0,0,0,.025)–.04` for text hits ### Motion - All transitions: `120–180ms`, `cubic-bezier(.2,.8,.2,1)` for sliding panels, plain `ease` for hover - The right drawer is the only large transform; everything else is opacity / background swaps --- ## 2 · Layout shell ``` ┌─────────────────────────── header (36px, always visible) ───┐ │ KW 19 | 4–10. Mai 2026 "quote…" │ ├──────┬────────────────────────────────────────────────┬─────┤ │ │ all-day strip │ │ │ left │────────────────────────────────────────────────│ rt │ │ rail │ day-headers row │ drw │ │ 56px │────────────────────────────────────────────────│ 360 │ │ │ day grid (hours × columns) │ px │ │ │────────────────────────────────────────────────│ off │ │ │ tasks (anyday) — warm grey, 6 white list cards │ scr │ └──────┴────────────────────────────────────────────────┴─────┘ ``` - The **toolbar is gone**. Only two floating icon buttons remain: a sidebar-toggle top-left of the header, a search top-right. - The right drawer is hidden by default. A small `18×64px` chevron tab on the right edge toggles it; the gear icon in the left rail also toggles it. --- ## 3 · Component-by-component restyle guide ### 3.1 Top header (`header`) - `position: sticky`/`absolute`, `top: 0`, height 36px, white, hairline bottom - Centered: `KW WW | 4–10. Mai 2026` • faint Fraunces italic quote - Text colors: KW = `--ink-2` 13px/500; quote = `--ink-4` 12px italic; ellipsize at ~480px ### 3.2 Left rail (`lside`) Order, top to bottom: 1. **Date nav cluster** — `« ‹` row, "Heute" pill (uppercase, hairline border), `› »` row 2. Hairline separator 3. **View flyout** — calendar icon; on hover, flyout reveals: Einfach / Kalender / Liste / Kanban / Ziel 4. **Day-count flyout** — grid icon; flyout: 1 / 2 / 3 / 5 / 7 5. **Zeitfenster flyout** — clock icon; flyout: 15m / 20m / 30m / 60m 6. Hairline separator 7. Action icons (vertical stack): plus, calendar-pick, projects, recurring, target, focus 8. Hairline separator 9. Undo, redo, sync, download, print 10. Hairline separator 11. **Light/dark toggle** (single sun/moon icon — toggles, not two icons) 12. **User avatar** at the bottom (`margin-top: auto`) Icons are 16px, currentColor, in 36×36 hit-targets, `border-radius: 8px`, hover background `rgba(0,0,0,.05)`. Active state uses `--accent-soft` background + `--accent` color. Flyouts pop **right** of the rail with a subtle pointer triangle. ### 3.3 All-day strip (`allday`) - Grid: `56px [hour gutter pad] repeat(N, 1fr)`, column gap 20px, padding `10px 24px 0` - Per-day column: `min-height: 56px`, vertical stack of chips, gap 3px - Chips are **solid colored pills** (see palette table). No icons, no date pips inside. - Today's column gets `background: var(--accent-soft)` with extra horizontal padding - Small uppercase label "GANZTAGS" 9px in left gutter ### 3.4 Day headers (`days` + `dayh`) - Grid identical to all-day strip (same column gaps for alignment) - Each header: small **MAI 6** date on top, large **MITTWOCH** weekday name below, both uppercase - 2px solid `--ink` underline below each header - **Today**: weekday in `--accent` red 700, blue-grey `--accent-soft` background, centered, padding 6px 8px, 1px ink underline - **Weekend (Sat/Sun)**: weekday red, underline red ### 3.5 Day grid body (`body`) - **No vertical lines** between days — the column gap (20px) is the separator. This is the TeuxDeux move. - Horizontal hour rules only (`--line` color, 1px), one per hour - Hour labels in the left gutter, 10px, `--ink-5`, right-aligned, sitting on the rule (background-cut) - **Today column** gets `background: var(--accent-soft)` (full height) - **Now-line**: 1px `--accent` red across the today column, with an 8×8 dot on the left and a small time pill (`HH:MM`) on the right with `bg: var(--bg)` for clean cutout ### 3.6 Events (`ev`) Two visual modes: **Timed event card** — coloured background by source, 2px left-border accent, `border-radius: 4px`, `padding: 8px 10px`. Title row has an inline 16px source icon (`.t .src`) before the text. Synced events show a small sync arrow at top-right (`.sync`, opacity .55). Meta line: `HH:MM – HH:MM · Location`. **Note event** (`.ev.note`) — for todos placed at a time but without a duration block: transparent background, no border-left, no rounding, just small inline icon + text. Used for github-source items, key/cake/car category notes, etc. Source icon mapping (16px, currentColor SVG): - `git` — github / dev tasks - `money` — finance / banking - `book` — Legasthenie / Nachhilfe - `home` — Garde / home - `key`, `cake`, `car` — category notes - `bolt` — focus / quick task - `pin`, `info` — generic ### 3.7 Anyday tasks (`tasks`) - Section background: `--tasks-bg` (`#f4f2ee` warm light grey) - 6-up grid of white list cards (`--paper`, 1px `--line`, 8px radius, `min-height: 200px`, padding `12px 12px 8px`) - Card heading: 6px colored dot · uppercase project name · count chip on right - Each item: 9×9 unchecked box (1px `--ink-5`) · text · hairline `--line-soft` underneath - **Tabs above the grid** are a segmented-pill control: - Container: `inline-flex`, `padding: 4px`, `bg: rgba(0,0,0,.05)`, `border-radius: 10px` - Active tab: white pill, weight 600, shadow `0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04)` - Inactive: text `--ink-3`, hover white-50 background - Each tab has a count chip — small grey rounded-rect, tabular-nums ### 3.8 Right settings drawer (`rside`) - 360px white panel, slides in from right edge - Vertical icon-tab strip across the top (settings, globe, link, sync, box, user, palette, spark) - Each row: small label (11px `--ink-3`, weight 500) + input/checkbox/segmented control - Inputs: 1px `--line`, 6px radius, 7px 10px padding, 13px `--ink-2` - Help text under fields: 10px `--ink-4` - Sections separated by full-bleed `--line` `
` - Close `×` top-right; clicking the gear icon in the left rail or the edge tab toggles it ### 3.9 Floating corner buttons - 28×28, 6px radius, `top: 8px` - Left: sidebar-toggle. Right: search. - These sit **on top of** the header bar. --- ## 4 · Iconography All icons are **16px, currentColor, 1.4 stroke-width SVG**, drawn on a 20×20 viewBox, no fill (line-art). Examples: cal, list, kanban, target, grid, clock, search, plus, proj, repeat, bolt, moon, sun, setg, sync, print, user, download, sidebar, chevL/R, eye, undo, redo, refresh, sliders, globe, link, box, palette, spark, info, money, git, book, home, car, key, cake. Hover icons go from `--ink-3` → `--ink`. Active state for view/filter icons goes from `--ink-3` → `--accent` on `--accent-soft` background. --- ## 5 · What to keep from the existing app - All data shapes, server actions, API routes - `next-auth` wiring, middleware - Drag-and-drop calendar event editing - Recurring task logic - Calendar-sync flows (Google etc.) - Keyboard shortcuts - Print view (we can restyle it, but keep the print route) --- ## 6 · Suggested PR breakdown 1. **`feat(design): add tokens`** — CSS variables / tailwind extend, no markup changes 2. **`feat(design): app shell + header + corner buttons`** — top-level layout 3. **`feat(design): left rail`** — collapse old toolbar into rail with flyouts 4. **`feat(design): right settings drawer`** — slide-in panel 5. **`feat(design): day grid`** — hairline rules, no verticals, today wash, day headers 6. **`feat(design): all-day strip`** — solid chip pills 7. **`feat(design): events`** — source-coloured cards + note variant + source icons 8. **`feat(design): anyday tasks`** — segmented tabs + 6-up white cards on warm grey 9. **`chore(design): typography pass`** — Geist + Fraunces, sizes from §1 10. **`chore(design): icon set swap`** — 16px line-art set Each PR small enough to eyeball. After step 9 the app should look like the mock; step 10 is polish. --- ## 7 · Open questions for the engineer - Is Geist already loaded? If not, add it via `next/font` (don't pull from Google Fonts at runtime). - Does the existing `theme` system support multiple accent colors per calendar source, or is that a new concept? If new, hold off on the per-source event colors and ship the today-red + neutral-event scheme first. - Confirm dark mode is in scope — the mock is light-only; tokens for dark would need to be derived in a follow-up. --- *End of notes. When in doubt, open `Todo Calendar Redesign v2.html` in a browser and copy what you see.*