feat: Quiet Confidence UI redesign — teal brand, Geist typography

[Lykhoyda]

Summary

Complete visual overhaul of the Testudo extension UI following Gemini-reviewed "Quiet Confidence" design direction. Addresses feedback that the previous "Cipher Terminal" style felt "dull" and not polished enough for a premium security tool.

Design system

Token	Before	After
Brand	#00e599 phosphor green (flat)	#1a9b8c desaturated teal
Danger	#ff3b5c	#dc2626 (more serious)
Warn	#ffaa2c	#f59e0b
Background	#0c0c14 single surface	4-layer stack: #0a0a0b → #141416 → #1c1c1f → #222226
Text dim	#3e3e55 (2.5:1 contrast, fails WCAG)	#5a5a60 (passes AA)
UI font	Inter + Roboto Mono	Geist + Geist Mono (bundled locally)

Logo

Redesigned from scan-based red raster (30KB) to clean vector SVG in teal (2.3KB). Same nested-hexagon "testudo shell" silhouette preserved. extract-icon.mjs updated to handle pure vector SVG via sharp density rendering.

Surfaces

Removed (felt "edgy"):

• Scan line animations
• Pulse rings on modal header
• Glow shadow effects
• Noise texture overlays
• Radial gradient ambient overlays
• Uppercase mono typography for body text

Added (felt "polished"):

• 3px solid danger strip on warning modal (semantic anchor)
• Flat cards with subtle borders (0.06/0.1/0.14 alpha hierarchy)
• Weight-driven typography hierarchy (Geist 400/500/600)
• iOS Settings-style grouped bordered lists for options
• Linear/Raycast-style sidebar with teal active indicator
• Warning modal title bumped to 22px/600 (visibly heavier than popup 15px)

Per-surface changes

• popup.html — Full CSS rewrite, new tokens, flat hero card, activity list with severity dots
• options.html — Sidebar nav, grouped settings lists, toggles in brand teal
• warning-styles.ts — Geist font, 22px title, 3px danger strip, tightened 24px padding
• blocked.html — Matching design system for phishing block page
• content.ts — Injects Geist into dApp pages (replaces Inter + Roboto Mono)

Typography — single family

Replaced three-family system (Inter + Roboto Mono + Material Symbols) with single Geist family + Geist Mono + Material Symbols (icons only).

• Body: Geist Sans (weights 300-700)
• Data: Geist Mono (weights 400-600)
• Icons: Material Symbols Outlined (unchanged, bundled)

Total font bundle: ~540KB (Material Symbols is 451KB, Geist files are ~88KB combined).

Verification

• 734 unit tests passing (359 extension + 375 core)
• Build clean: 6 bundles in ~120ms
• Lint passes on modified TypeScript files
• Pre-push hook all checks green
• Dist verified — logos and fonts copied correctly

Test plan

• Load extension in Chrome, verify popup opens with new design
• Open options page, verify all tabs (General, Whitelist, History, Advanced) render correctly
• Visit a known-malicious contract in the mock dApp, verify warning modal shows with new 22px title + 3px red strip
• Navigate to a flagged phishing domain, verify block page matches new design
• Test at various DPI scales
• Spot check accessibility with screen reader (Geist renders correctly)

Design review trail

1. v1 Vault Phosphor — Dual accent (jade + amber), Fraunces serif, ambient glows — rejected as "too edgy"
2. v2 Quiet Confidence — Single emerald accent, Geist only — Gemini flagged as "over-corrected on warning modal severity", "#10b981 is generic Tailwind"
3. v3 (this PR) — Teal brand color for distinction, semantic/brand unified, warning modal gets visible severity boost (22px title + 3px red strip), all Gemini tactical fixes applied

🤖 Generated with Claude Code