Files
familysync/.planning/phases/17-ui-optimization-polish/17-02-SUMMARY.md
T
Lucas Berger d917157c63 docs(17-02): complete branding assets plan summary
Records approved brand decisions for plan 17-04:
- logo art approved (family-house redesign)
- brand accent #e8915a (warm amber)
- --brand-logo-border-radius: 0
2026-06-18 12:43:45 -04:00

7.8 KiB

phase, plan, subsystem, tags, requires, provides, affects, tech-stack, key-files, key-decisions, patterns-established, requirements-completed, duration, completed, status
phase plan subsystem tags requires provides affects tech-stack key-files key-decisions patterns-established requirements-completed duration completed status
17-ui-optimization-polish 02 ui
pwa
icons
branding
svg
vite-pwa
assets-generator
logo
Approved FamilySync logo SVG (warm peach gradient bg, amber roof, bold white walls, heart finial, three family figures)
Full PWA icon/favicon set derived from approved logo: favicon.svg, favicon.ico, icon-192.png, icon-512.png, icon-maskable-512.png (512x512 safe-zone), apple-touch-icon.png (180x180)
@vite-pwa/assets-generator devDependency + pwa:icons script in apps/pwa
Brand accent decision: --color-member-0 → #e8915a (warm amber)
Brand logo border-radius decision: --brand-logo-border-radius: 0 (SVG draws its own shape)
17-04
added patterns
@vite-pwa/assets-generator@1.0.2 (devDependency in apps/pwa)
sharp (transitive, for PNG rasterisation)
sharp-ico (transitive, for ICO encoding)
pwa-assets.config.ts: minimal2023Preset, images: ['public/logo.svg'], no overrideManifestIcons
pnpm pwa:icons regenerates the full set from logo.svg on demand
created modified
apps/pwa/pwa-assets.config.ts — @vite-pwa/assets-generator config (minimal-2023 preset)
apps/pwa/public/logo.svg — approved brand mark (hand-authored, warm/family-house)
apps/pwa/public/favicon.svg — copy of logo.svg for SVG favicon
apps/pwa/public/favicon.ico — 48px ICO from generator (967 B)
apps/pwa/public/icon-192.png — 192x192 standard PWA icon
apps/pwa/public/icon-512.png — 512x512 full-bleed PWA icon
apps/pwa/public/icon-maskable-512.png — 512x512 maskable with safe-zone padding
apps/pwa/public/apple-touch-icon.png — 180x180 Apple touch icon
apps/pwa/package.json — added @vite-pwa/assets-generator devDep + pwa:icons script
Logo approved: higher-contrast family-house SVG with warm peach gradient background, amber gradient roof, bold white house body, heart finial, two parent figures (rose + blue) flanking a child figure (gold)
Brand accent approved: --color-member-0 → #e8915a (warm amber) — apply in tokens.css, index.html theme-color, vite.config.ts theme_color in plan 17-04
--brand-logo-border-radius: 0 — SVG draws its own rounded-square background (rx=104); no additional CSS clip needed; apply in plan 17-04
Generator preset: minimal2023Preset without overrideManifestIcons — vite.config.ts manifest maintained by hand (plan 17-04)
favicon.svg is an exact copy of logo.svg; modern browsers prefer SVG favicon over ICO
Icon regeneration: cd apps/pwa && pnpm pwa:icons — always runs from apps/pwa to resolve pwa-assets.config.ts paths correctly
Asset source of truth: apps/pwa/public/logo.svg — all derived assets regenerated from it
D-03
D-04
35min 2026-06-18 complete

Phase 17 Plan 02: Branding Assets Summary

Approved FamilySync family-house logo SVG committed with full 7-asset PWA icon set derived via @vite-pwa/assets-generator minimal-2023 preset; brand accent #e8915a and --brand-logo-border-radius: 0 recorded for plan 17-04

Performance

  • Duration: ~35 min (including human checkpoint for logo approval)
  • Started: 2026-06-18T12:00:00Z
  • Completed: 2026-06-18T12:45:00Z
  • Tasks: 3 (Tasks 1+2 auto, Task 3 human checkpoint, continuation applied approved art)
  • Files modified: 9

Accomplishments

  • Installed @vite-pwa/assets-generator@1.0.2 in apps/pwa with pnpm pwa:icons script
  • Hand-authored warm/rounded/at-home FamilySync logo SVG; replaced with operator-approved higher-contrast redesign post-checkpoint
  • Generated complete icon/favicon set (favicon.ico 967 B, maskable 512x512 with safe-zone, apple-touch 180x180, standard 192 and 512 PNGs)
  • Captured three operator brand decisions required by plan 17-04 (logo art, accent hex, border-radius)

Task Commits

Each task was committed atomically:

  1. Task 1: Install @vite-pwa/assets-generator, author logo.svg, add pwa-assets.config.ts - 7db9005 (feat)
  2. Task 2: Generate the full icon/favicon set and validate formats - b364573 (feat)
  3. Task 3 (post-checkpoint continuation): Apply approved logo + regenerate icon set - 4c99470 (feat)

Files Created/Modified

  • apps/pwa/package.json — added @vite-pwa/assets-generator@1.0.2 devDependency + "pwa:icons" script
  • apps/pwa/pwa-assets.config.ts — generator config: minimal2023Preset, images: ['public/logo.svg'], no overrideManifestIcons
  • apps/pwa/public/logo.svg — approved brand mark (1926 B): warm peach gradient bg (rx=104), amber roof gradient, bold white walls, heart finial (#F25C7A), family of three (rose parent + gold child + blue parent)
  • apps/pwa/public/favicon.svg — copy of logo.svg (SVG favicon for modern browsers)
  • apps/pwa/public/favicon.ico — 48px ICO, 967 B (non-trivial; replaces zero-byte stub)
  • apps/pwa/public/icon-192.png — 192x192 standard PWA icon (2869 B)
  • apps/pwa/public/icon-512.png — 512x512 full-bleed PWA icon (12056 B)
  • apps/pwa/public/icon-maskable-512.png — 512x512 maskable icon with safe-zone padding (8627 B; distinct from icon-512.png)
  • apps/pwa/public/apple-touch-icon.png — 180x180 Apple touch icon (1744 B)

Decisions Made

APPROVED BRAND DECISIONS FOR PLAN 17-04

These three decisions were explicitly approved by the operator at the Task 3 checkpoint and MUST be consumed verbatim by plan 17-04:

  1. Logo art: APPROVED — the redesigned higher-contrast family-house SVG is the canonical FamilySync brand mark. No further logo revision needed before plan 17-04 wiring.

  2. Brand accent: #e8915a (warm amber)

    • Apply to tokens.css as --color-member-0: #e8915a
    • Apply to index.html <meta name="theme-color"> as #e8915a
    • Apply to vite.config.ts manifest theme_color as #e8915a
  3. --brand-logo-border-radius: 0

    • The SVG draws its own rounded-square background (rx="104" on the background rect)
    • No additional CSS border-radius clip needed on the <img> element in BrandSlot
    • Apply as --brand-logo-border-radius: 0 in tokens.css

Generator setup decisions

  • minimal2023Preset from @vite-pwa/assets-generator/config — handles safe-zone math for maskable, ICO encoding via sharp-ico, and standard sizes
  • overrideManifestIcons: true was deliberately NOT set — the manifest is maintained by hand in vite.config.ts (plan 17-04 responsibility)
  • favicon.svg is a direct copy of logo.svg; the generator does not produce a separate favicon.svg so the pwa:icons script copies it

Deviations from Plan

None — plan executed exactly as written. The continuation agent applied the operator-approved logo replacement and regenerated all icons atomically after the checkpoint was cleared.

Issues Encountered

  • sharp module not resolvable from worktree root for metadata validation — resolved by using Python's PNG IHDR header parser instead to confirm dimensions (512x512 maskable, 192x192 standard, 180x180 apple-touch). Generator output confirmed valid.

User Setup Required

None — no external service configuration required.

Next Phase Readiness

Plan 17-04 (brand wiring) can proceed immediately. It has all three required inputs:

  • Logo source: apps/pwa/public/logo.svg (committed)
  • Brand accent: #e8915a
  • Logo border-radius: 0

Files 17-04 will wire:

  • apps/pwa/src/styles/tokens.css--color-member-0, --brand-logo-border-radius
  • apps/pwa/index.html<meta name="theme-color">, favicon <link> tags
  • apps/pwa/vite.config.ts — manifest theme_color, icons array
  • apps/pwa/src/components/BrandSlot.tsx — wire <img src="/logo.svg">

Phase: 17-ui-optimization-polish Completed: 2026-06-18