pal-e-docs
Project not found.

Phase 7b: Keycloak Theme — Match App Design

phase-mcd-tracker-7b-keycloak-theme Phase

phase
Project
Goal: Custom Keycloak login/register theme matching the MCD Tracker design system — Atkinson Hyperlegible, design tokens, light theme, mobile-first.
Owner: Dev agent + Lucas (visual approval)
Repo: Keycloak theme deployment (pal-e-platform or dedicated theme repo)
Depends on: Phase 7 (app deployed, auth flow working)

Scope

  • Create a custom Keycloak theme for the mcd-tracker realm
  • Login page: match signin.html playground mockup (logo, form fields, colors)
  • Registration page: match register.html playground mockup
  • Password reset page: same design language
  • Error pages: branded, not default Keycloak red
  • Use app.css design tokens: --color-bg: #fafafa, --color-primary: #0366d6, Atkinson Hyperlegible font
  • Mobile-first: must look good on 390px viewport
  • Deploy theme to Keycloak (volume mount or realm import)

Deliverables

  • pending
  • plan-mcd-tracker — parent plan
  • phase-mcd-tracker-7-sveltekit — parent phase
  • project-capacitor-mobile — auth flow documentation