nuzlocke-tracker/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md

title, status, type, priority, created_at, updated_at

title	status	type	priority	created_at	updated_at
Modernize website design and look-and-feel	in-progress	feature	normal	2026-02-17T19:16:39Z	2026-02-17T21:04:45Z

Overhaul the UI to a dark-first, techy aesthetic with a cohesive brand identity derived from the ANT steel ant logo.

Design direction

Dark & techy — dark-first surfaces, subtle glow/accent effects, code-editor-influenced aesthetic. Think GitHub dark, Discord, or Linear dark mode. Light mode becomes the secondary theme.

1. Brand palette + Tailwind theme

Define custom Tailwind v4 theme tokens in index.css using @theme:

• Surfaces: dark navy/charcoal base (#0f1117, #161b22, #1c2128) with layered elevation (darker = further back, lighter = elevated)
• Accent: steel blue from the logo (#395E73, #7EB0CE) as the primary interactive color
• Text: off-white primary (#e6edf3), muted gray secondary (#7d8590)
• Status colors: keep green/red/blue semantics but shift to darker, more saturated variants that work on dark surfaces
• Borders: subtle (rgba(255,255,255,0.08)) instead of gray-200/700

Replace ad-hoc Tailwind color classes throughout all components with theme tokens.

2. Typography

Self-host Geist (or Inter/JetBrains Mono pairing):

• Geist Sans for UI text (headings, labels, body)
• Geist Mono for data-heavy elements (stats numbers, encounter rates, levels)
• Set up via @font-face in index.css, configure in Tailwind @theme
• Establish clear size/weight hierarchy: page titles (2xl bold), section headers (lg semibold), body (sm regular), labels (xs medium)

3. Navigation redesign

• Add the ant SVG logo mark next to "ANT" in the nav
• Active route indicator (accent-colored underline or background highlight)
• Subtle bottom border glow or gradient accent line
• Slightly translucent/backdrop-blur nav background for depth
• Better mobile menu transitions (slide or fade instead of instant toggle)

4. Home page hero

• Full-width dark gradient hero section with the ant logo as a subtle watermark/background element
• Tagline with stronger typography hierarchy
• Stats summary (total runs, completion rate) as glowing stat pills if the user has data
• CTA button with accent glow/gradient

5. Cards & surfaces

• Dark elevated cards (bg-[#161b22]) with subtle border (border-white/[0.06])
• Hover state: slight border brightness increase + subtle shadow glow in accent color
• Active/selected states with accent border
• Pokemon cards: dark backgrounds make sprites pop better, accent ring on hover
• Stat cards: accent-colored left border or top gradient
• Modals: dark overlay with backdrop-blur, card-style modal surface

6. Status indicators & badges

• Status badges: more vibrant on dark backgrounds (alive=emerald glow, dead=red glow, caught=blue)
• Type badges: use the established Pokemon type colors but tuned for dark surfaces
• Encounter method badges: same treatment
• Pulse animation on active run indicators

7. Micro-interactions

• Smooth transitions on all interactive elements (transition-all duration-150)
• Hover lift on cards (hover:-translate-y-0.5)
• Button press feedback (active:scale-[0.98])
• Loading spinners in accent color
• Skeleton loading states for data-heavy pages

8. Dark/light mode

• Dark is the default and primary design target
• Light mode: invert surfaces to white/gray-50, keep accent colors, adjust contrast
• Toggle in nav (sun/moon icon)
• Persist preference in localStorage, respect prefers-color-scheme

Checklist

• Define Tailwind v4 @theme tokens (colors, fonts, spacing) in index.css
• Self-host Geist font family, configure in theme
• Redesign nav bar (logo mark, active states, backdrop blur, dark surface)
• Redesign home page hero section
• Update card/surface styles globally (Layout, PokemonCard, StatCard, GameCard)
• Update all page-level backgrounds and containers
• Update modal styles (EncounterModal, StatusChangeModal, etc.)
• Update badge/indicator styles (TypeBadge, RuleBadges, EncounterMethodBadge)
• Add dark/light mode toggle to nav
• Polish hover states and transitions across all interactive elements
• Add automated Playwright accessibility and mobile layout tests
• Verify accessibility (contrast ratios, focus indicators)
• Verify mobile layout and touch targets

Automated verification approach

Add a Playwright test suite that covers both accessibility and mobile layout:

Accessibility (axe-core + Playwright)

• Install @axe-core/playwright as a dev dependency
• Write a test that visits each major page and runs axe-core
• Pages to cover: Home, RunList, RunDashboard, RunEncounters, Stats, NewRun, GenlockeList, GenlockeDetail, NewGenlocke, admin pages
• Check for: color contrast (WCAG AA), missing ARIA labels, heading hierarchy, focus indicators, form label associations
• Run as part of CI

Mobile layout (Playwright viewports)

• Test each major page at 3 viewport sizes: mobile (375x667), tablet (768x1024), desktop (1280x800)
• Assert no horizontal overflow (document.documentElement.scrollWidth <= window.innerWidth)
• Assert touch targets are at least 44x44px (axe-core target-size rule)
• Screenshot each page at each viewport for visual review

Implementation

• Add test file: frontend/e2e/accessibility.spec.ts
• Add Playwright config if not present
• Add test:a11y script to package.json

Constraints

• Tailwind-only (no additional CSS frameworks or component libraries)
• Self-hosted fonts only (no Google Fonts CDN)
• Maintain accessibility (WCAG AA contrast ratios, visible focus indicators)
• No performance regression (fonts loaded with font-display: swap, no layout shift)