Implement dark-first design system with Geist typography (#28)
Co-authored-by: Julian Tabel <juliantabel.jt@gmail.com> Co-committed-by: Julian Tabel <juliantabel.jt@gmail.com>
This commit was merged in pull request #28.
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
---
|
||||
# nuzlocke-tracker-9c8d
|
||||
title: Rebrand to Another Nuzlocke Tracker (ANT)
|
||||
status: in-progress
|
||||
status: completed
|
||||
type: task
|
||||
priority: normal
|
||||
created_at: 2026-02-10T14:46:09Z
|
||||
updated_at: 2026-02-17T19:08:18Z
|
||||
updated_at: 2026-02-17T19:17:22Z
|
||||
---
|
||||
|
||||
Adopt the new branding: **Another Nuzlocke Tracker**, abbreviated **ANT**.
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
# nuzlocke-tracker-dpw7
|
||||
title: Modernize website design and look-and-feel
|
||||
status: in-progress
|
||||
type: feature
|
||||
priority: normal
|
||||
created_at: 2026-02-17T19:16:39Z
|
||||
updated_at: 2026-02-17T19:45:49Z
|
||||
---
|
||||
|
||||
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
|
||||
- [ ] 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
|
||||
- [ ] Verify mobile layout and touch targets
|
||||
- [ ] Verify accessibility (contrast ratios, focus indicators)
|
||||
|
||||
## 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)
|
||||
Reference in New Issue
Block a user