#7 - feat: booking UI design polish — typography, layout, motion, touch targets - ldraney/gcal-scheduler

forgejo_admin commented

2026-03-15 03:47:21 +00:00

Contributor

Lineage

todo-booking-ui-polish (no plan ancestry — plan-pal-e-posts was deleted; inline plan from session)

Repo

forgejo_admin/gcal-scheduler

User Story

As a LinkedIn visitor clicking the booking CTA
I want a polished, distinctive booking page that feels premium
So that the page reflects the quality of Pal-E Agency and converts visitors to bookings

Context

The booking page (static/index.html) was built by a dev agent without the /frontend-design skill applied. A design critique against the impeccable guidelines found 7 violations (Inter font, all-centered layout, rounded card wrapper, rounded-corner icon, no motion, monotonous spacing, non-clickable logo) and 14 actionable gaps (touch targets, easing, timing, font fallbacks, placeholder contrast, skeleton screen, safe area, hover detection, spacing tokens). The page is functional — E2E tested with 3 successful bookings — but needs to be unforgettable, not just functional.

File Targets

Files the agent should modify:

static/index.html — the only file (all CSS, HTML, JS in one file)

Files the agent should NOT touch:

main.py — FastAPI backend, API contract unchanged
k8s/ — deployment manifests
.woodpecker.yaml — CI pipeline

Acceptance Criteria

Inter replaced with Libre Franklin (body font), DM Serif Display kept for headings
Fallback font metrics added (size-adjust, ascent-override) to reduce CLS
Modular type scale tokens defined (--step-0 through --step-3)
Semantic spacing tokens defined (--space-xs through --space-2xl) with varied rhythm
Hero text left-aligned (heading + description), not centered
Booking card wrapper removed (no rounded rect with shadow), sections breathe on page with subtle dividers
Brand mark is a clickable link to https://www.linkedin.com/in/lucasdraney/ with target="_blank" rel="noopener"
Brand icon is a typographic letterform (no rounded-corner container box)
Slots fade in by day group with 50ms stagger on page load
Form slides up smoothly on slot selection (transform + opacity, 300ms)
Success checkmark draws in, details fade up
All motion gated behind prefers-reduced-motion: no-preference
cubic-bezier(0.25, 1, 0.5, 1) (ease-out-quart) replaces generic ease
Transition timing 120-150ms (not 180ms)
All touch targets ≥ 44px (slot buttons, form inputs, submit button)
Inline SVG favicon added (P lettermark in rust color)
Placeholder text contrast meets WCAG AA 3:1
@media (hover: hover) used for hover-only effects
Two-column form layout on desktop (slot summary left, form right)
Existing booking flow still works (API contract: /api/availability, /api/book)
All ARIA annotations preserved (skip link, aria-pressed, role="alert", aria-live)
prefers-reduced-motion support preserved

Test Expectations

Manual: navigate to page, slots load, select slot, fill form, submit, see "You're Booked"
Manual: verify staggered slot animation on page load
Manual: verify prefers-reduced-motion disables animations
Manual: verify brand mark links to LinkedIn in new tab
Manual: verify no console errors (including no favicon 404)
Manual: verify touch targets ≥ 44px on mobile viewport
Run command: N/A (static HTML, no test framework)

Constraints

Static HTML/CSS/JS only — no frameworks, no build tools
Must not break the existing booking flow (API contract unchanged)
File stays at static/index.html (FastAPI serves it at /)
Preserve all existing a11y work (:focus-visible, ARIA, skip link, prefers-reduced-motion)
Keep all 8 interactive states (default, hover, focus, active, disabled, loading, error, success)

Checklist

PR opened
No unrelated changes
Screenshots at mobile/tablet/desktop viewports

pal-e-agency — parent project (LinkedIn/booking CTA pipeline)

### Lineage `todo-booking-ui-polish` (no plan ancestry — `plan-pal-e-posts` was deleted; inline plan from session) ### Repo `forgejo_admin/gcal-scheduler` ### User Story As a LinkedIn visitor clicking the booking CTA I want a polished, distinctive booking page that feels premium So that the page reflects the quality of Pal-E Agency and converts visitors to bookings ### Context The booking page (`static/index.html`) was built by a dev agent without the `/frontend-design` skill applied. A design critique against the impeccable guidelines found 7 violations (Inter font, all-centered layout, rounded card wrapper, rounded-corner icon, no motion, monotonous spacing, non-clickable logo) and 14 actionable gaps (touch targets, easing, timing, font fallbacks, placeholder contrast, skeleton screen, safe area, hover detection, spacing tokens). The page is functional — E2E tested with 3 successful bookings — but needs to be unforgettable, not just functional. ### File Targets Files the agent should modify: - `static/index.html` — the only file (all CSS, HTML, JS in one file) Files the agent should NOT touch: - `main.py` — FastAPI backend, API contract unchanged - `k8s/` — deployment manifests - `.woodpecker.yaml` — CI pipeline ### Acceptance Criteria - [ ] Inter replaced with Libre Franklin (body font), DM Serif Display kept for headings - [ ] Fallback font metrics added (`size-adjust`, `ascent-override`) to reduce CLS - [ ] Modular type scale tokens defined (`--step-0` through `--step-3`) - [ ] Semantic spacing tokens defined (`--space-xs` through `--space-2xl`) with varied rhythm - [ ] Hero text left-aligned (heading + description), not centered - [ ] Booking card wrapper removed (no rounded rect with shadow), sections breathe on page with subtle dividers - [ ] Brand mark is a clickable link to `https://www.linkedin.com/in/lucasdraney/` with `target="_blank" rel="noopener"` - [ ] Brand icon is a typographic letterform (no rounded-corner container box) - [ ] Slots fade in by day group with 50ms stagger on page load - [ ] Form slides up smoothly on slot selection (transform + opacity, 300ms) - [ ] Success checkmark draws in, details fade up - [ ] All motion gated behind `prefers-reduced-motion: no-preference` - [ ] `cubic-bezier(0.25, 1, 0.5, 1)` (ease-out-quart) replaces generic `ease` - [ ] Transition timing 120-150ms (not 180ms) - [ ] All touch targets ≥ 44px (slot buttons, form inputs, submit button) - [ ] Inline SVG favicon added (P lettermark in rust color) - [ ] Placeholder text contrast meets WCAG AA 3:1 - [ ] `@media (hover: hover)` used for hover-only effects - [ ] Two-column form layout on desktop (slot summary left, form right) - [ ] Existing booking flow still works (API contract: `/api/availability`, `/api/book`) - [ ] All ARIA annotations preserved (skip link, aria-pressed, role="alert", aria-live) - [ ] `prefers-reduced-motion` support preserved ### Test Expectations - [ ] Manual: navigate to page, slots load, select slot, fill form, submit, see "You're Booked" - [ ] Manual: verify staggered slot animation on page load - [ ] Manual: verify `prefers-reduced-motion` disables animations - [ ] Manual: verify brand mark links to LinkedIn in new tab - [ ] Manual: verify no console errors (including no favicon 404) - [ ] Manual: verify touch targets ≥ 44px on mobile viewport - Run command: N/A (static HTML, no test framework) ### Constraints - Static HTML/CSS/JS only — no frameworks, no build tools - Must not break the existing booking flow (API contract unchanged) - File stays at `static/index.html` (FastAPI serves it at `/`) - Preserve all existing a11y work (`:focus-visible`, ARIA, skip link, `prefers-reduced-motion`) - Keep all 8 interactive states (default, hover, focus, active, disabled, loading, error, success) ### Checklist - [ ] PR opened - [ ] No unrelated changes - [ ] Screenshots at mobile/tablet/desktop viewports ### Related - `pal-e-agency` — parent project (LinkedIn/booking CTA pipeline)