60ff82b4a2
Phase 0 of the redesign (see DESIGN.md). Establishes the visual
foundation; route restyling + IA reorg follow in subsequent commits.
Design direction (decided with a 3-agent design-team debate):
• Audience: hackers, privacy absolutists, anti-surveillance, Meshtastic
/ off-grid, journalists in hostile environments.
• Aesthetic: "muted tactical terminal" — Mullvad-calm restraint, not
neon cyberpunk cosplay. Monospace as identity. Hard-ish edges.
• Signature color: electric cyan #28C8E8 on neutral near-black #0B0C0E
(chosen over signal-amber and phosphor-green — ages better, reads
"serious infrastructure" without shouting). Verified-green reserved
for proofs only.
Changes:
• app.css: full Tailwind v4 @theme token set — elevation ramp, text
tiers, accent + dim + contrast, semantic colors, Inter + JetBrains
Mono via Google Fonts, tactical radius scale, accent glow, dark
color-scheme, cyan text-selection, thin dark scrollbars, and the
kez-cursor blink keyframe (respects prefers-reduced-motion).
• Wordmark.svelte: `kez▌` mono wordmark with blinking cyan block
cursor — the cursor is the brand mark.
• Avatar.svelte: deterministic 5×5 symmetric identicon from the
ed25519 key, cyan-arc hue. Every KEZ gets a stable face.
• kez-icon.svg: amber key → cyan key-meets-cursor glyph; regenerated
the full PWA icon set + apple-touch-icon from it.
• manifest + index.html theme/background color → #0B0C0E.
• DESIGN.md: the full system + IA plan as source of truth.
Note: existing route components still use light-theme utility classes
and will look inconsistent until restyled in the next phases — that
work lands next (shell/nav → Chats → Identity → Settings → Contacts).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
15 lines
764 B
XML
15 lines
764 B
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<!-- Neutral near-black bg with 20% maskable safe-zone padding. -->
|
|
<rect width="512" height="512" rx="96" ry="96" fill="#0B0C0E"/>
|
|
<!-- Key-as-cursor glyph in KEZ cyan: round bow + shaft that terminates
|
|
in a block cursor instead of teeth — key meets terminal prompt. -->
|
|
<g transform="translate(96 156)" fill="none" stroke="#28C8E8" stroke-width="30" stroke-linecap="round" stroke-linejoin="round">
|
|
<!-- Bow (ring) -->
|
|
<circle cx="84" cy="100" r="66"/>
|
|
<!-- Shaft -->
|
|
<line x1="150" y1="100" x2="286" y2="100"/>
|
|
</g>
|
|
<!-- Block cursor terminator (filled), aligned to the shaft end. -->
|
|
<rect x="286" y="74" width="34" height="52" rx="4" fill="#28C8E8"/>
|
|
</svg>
|