UI redesign: Graphite — flat surfaces, real contrast, no more neon

[patrickdundas]

UI redesign: "Graphite" — flat surfaces, real contrast, no more neon

The old UI was muddy, low-contrast, and dated. This PR replaces the dark-neumorphism + neon-cyan theme with a flat graphite system, concentrated almost entirely in theme/token primitives so the diff stays reviewable and upstream syncs stay cheap.

All screenshots below are real renders of a local instance seeded with 30 days of demo data (4 trackers, one in a warned/HnR state).

What was wrong (measured, not vibes)

Problem	Before	After
Timestamps, torrent-table cells (10px mono)	#475569 on #282a36 = 1.88:1	#858991 on #1c1d1f = 4.81:1
Description text, labels (text-tertiary)	#64748b = 3.02:1	#9b9fa5 = 6.34:1
Secondary text	#94a3b8 = 5.55:1	#bec1c6 = 9.34:1
Card vs page separation	None — card bg == page bg (#282a36 both); separation done only by neumorphism.io double shadows	Page #121315, cards #1c1d1f + solid 1px hairline borders
Borders	8% alpha (near-invisible)	Solid #313337 / emphasis #4a4d53
Accent	Neon cyan #00d4ff + glow box-shadows + pulse-glow animations	Muted steel blue #67a5d9, glows removed everywhere
Chart "Downloaded" series	getComplementaryColor() hue-rotation → clashing magenta against green trackers	Semantic download orange (with a hue-collision fallback for warm tracker colors)
Type	Space Mono (typewriter), 10px dense cells	JetBrains Mono, dense tier bumped to 11px
Radii	8–24px bubbly	6–12px

Before

Directions considered

The token layer was first refactored so every color/radius/shadow flows through runtime --tt-* CSS vars (zero visual change). That made it possible to render each candidate direction against the real running app — these are actual screenshots, not mocks:

	Direction	Rendered
A (shipped)	Graphite — pure neutral grays, flat bordered cards, muted steel-blue accent, color reserved for warn/danger/success
B	Slate — visibly blue-gray surfaces, softer/rounder elevation, keeps a teal accent
C	Porcelain — the same Graphite structure rendered light (what a follow-system light mode would look like)

A was chosen because it matches the taste you've picked before (Graphite palette, exception-based status color, dense-data legibility first). Because of the token indirection, switching to B or C later is a ~40-line value swap in globals.css :root plus the CHART_THEME hexes — say the word.

After

What changed

• globals.css — :root --tt-* token block (new palette), nm-* utilities redefined as flat hairline ring + subtle shadow (names kept, so hover:/active: variants and all ~140 call sites work unchanged), card-accent corner-glow → 1px tracker-tinted ring, pulse-glow made opacity-only, --text-2xs 10→11px, new nm-focus utility.
• Inputs got a real focus ring (focus:nm-focus) — the old focus:nm-inset was a no-op (WCAG 2.4.7 failure, pre-existing but masked by the recessed-well look).
• Primary buttons are now filled accent with dark text — previously the primary CTA was visually identical to a disabled button.
• Card.tsx — removed drop-shadow glow hazes; dead glow/glowColor props removed; TrackerStatusBanner now signals attention with tinted background + border (exception-based color doing its actual job).
• Glow sweep: StatCard, ProgressBar, RankProgress, DownloadClientStatusWidget, BackToTop (which still hand-copied the old neumorphic shadow values), and ~20 chart files (colored shadowBlur/shadowColor).
• CHART_THEME (charts/lib/theme.ts) — full palette swap; surface repointed to the card color (it's used as seam/background inside cards — it was the page color, which was fine only while page==card); tooltip dot glow removed; hover emphasis no longer dims bars/donut slices.
• Fonts: Space Mono → JetBrains Mono (--font-mono unchanged).
• Logo SVG gradient: neon cyan→lime retargeted to steel-blue→gray. This is the one brand-asset change — trivially revertable if you want the original back (git checkout origin/main -- public/img/trackerTracker_logo*.svg).
• DEFAULT_TRACKER_COLOR and the coordinator fallback: #00d4ff → #67a5d9 (new trackers no longer default to neon cyan).

Deliberately left alone

• src/lib/adapters/**, .github/workflows/**, package.json overrides, .trivyignore — other workstream.
• src/lib/db/schema.ts tracker-color default (still #00d4ff) — changing a column default invites migration churn for a cosmetic default; the JS-side default covers the UI path.
• Per-tracker user-chosen colors (your saturated greens/reds) — that's data, not theme.
• Duplicate y-axis tick labels on some charts (e.g. "3.1, 3.1, 3.0, 3.0") — pre-existing formatter precision issue, separate fix.
• The "Download Clients" settings tab label wrapping — pre-existing.
• nm-* class names now describe an aesthetic that no longer exists — a mechanical rename is a good follow-up PR, kept out of this one to keep the diff reviewable.
• The seeded/demo instance, screenshots, and audit tooling live outside the repo except docs/ui-redesign/ (the images embedded here).

Decisions for you

1. Direction: A is shipped; B (slate) and C (light) are rendered above and cheap to switch to.
2. Logo: kept the mark, swapped the neon gradient stops. Revert or keep?
3. Follow-system light mode: the token indirection makes it a contained follow-up (light :root block + prefers-color-scheme + a chart-theme resolver). Want it?

🤖 Generated with Claude Code

[github-actions]

Knip Code Analysis

Found 9 total issues

Category	Count
Unused Dependencies	1
Unused Dev Dependencies	3
Unused Exports	5

View details

Run pnpm knip locally to see the full report.

Use pnpm knip:filter pattern to filter results by file path.

---

Use /** @public */ JSDoc tags to mark intentionally exported symbols.

[github-actions]

🚫 Security audit failed

Critical Failures

Check	File	Details
External fetch calls have timeouts	src/lib/adapters/btn.ts:69	fetch() call without a timeout signal — add signal: AbortSignal.timeout(ms)

Warnings

Check	File	Details
No swallowed errors in catch blocks	src/lib/adapters/iptorrents.ts:108	catch block swallows error without logging or re-throwing
No swallowed errors in catch blocks	src/lib/adapters/iptorrents.ts:114	catch block swallows error without logging or re-throwing
No swallowed errors in catch blocks	src/lib/adapters/iptorrents.ts:175	catch block swallows error without logging or re-throwing
No swallowed errors in catch blocks	src/lib/adapters/iptorrents.ts:181	catch block swallows error without logging or re-throwing

Passed (36/38)

• ✅ Auth enforcement on protected routes (per-handler)
• ✅ No dangerous functions (eval, innerHTML, etc.)
• ✅ No hardcoded secrets in source
• ✅ Security headers in next.config.ts
• ✅ Cookie security (httpOnly, sameSite, secure)
• ✅ No sensitive fields in API responses
• ✅ No .env files committed to repo
• ✅ No raw SQL in API routes
• ✅ No fetch/redirect with unvalidated URLs in routes
• ✅ Timing-safe comparison for secret values
• ✅ No raw SQL migration files (schema-first only)
• ✅ Docker container runs as non-root user
• ✅ Public routes match proxy allowlist
• ✅ File delete operations have path traversal defense
• ✅ Password hashing uses Argon2 (not SHA-256/bcrypt)
• ✅ Encrypted columns written via encrypt()
• ✅ TOTP 2FA flow integrity
• ✅ Emergency lockdown flow integrity
• ✅ Scrub & delete (nuke) flow integrity
• ✅ Backup restore flow integrity
• ✅ Login flow integrity
• ✅ Auth result checked before proceeding
• ✅ Backup password inputs bounded before key derivation
• ✅ Webhook delivery fetch uses redirect: "error"
• ✅ SESSION_SECRET minimum-length guard in auth/crypto modules
• ✅ Notification URL validators include SSRF protection
• ✅ Dockerfile does not COPY sensitive files
• ✅ No secret env vars in client components
• ✅ Adapter Cookie headers guard against injection
• ✅ Adapter files do not log credential values
• ✅ No console.log in API routes
• ✅ No TODO/FIXME in security-critical files
• ✅ JSON.parse wrapped in try-catch
• ✅ Request body size validation on upload routes
• ✅ BigInt fields use string serialization
• ✅ No raw error messages in API responses

---

Summary: 36/38 checks passed
— 1 critical failure(s)
— 1 warning(s)

See scripts/security-audit.ts for check definitions and SECURITY.md for the full security architecture.