---
# nuzlocke-tracker-dpw7
title: Modernize website design and look-and-feel
status: completed
type: feature
priority: normal
created_at: 2026-02-17T19:16:39Z
updated_at: 2026-02-20T19:05:21Z
---

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

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