dokril/harbor-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Refine VPN client design guidance for mode-aware motion
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 11s
Details
Build and Deploy Gateway / deploy (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-11 16:51:41 +03:00
parent 0bf7d2ee30
commit 4b326c5e99
3 changed files with 56 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
.codex/skills/design-vpn-client-ui/references/visual-language.md
View File

@@ -23,6 +23,8 @@ Design for a macOS user glancing at a small VPN control surface in a quiet deskt
- Preserve a generous invisible hit area around icon-only controls.
- Center proxy address and protocol actions with the power column.
- Treat one-pixel optical misalignment as a defect when controls sit beside uppercase labels.
- Center the semantic brand or label independently from optional action icons. Place secondary icons beside it without letting their width move the centered content.
- Layer mutually exclusive status text in one fixed slot and crossfade between layers. Never replace text in normal flow when its length can move the interface.
## Typography
@@ -35,10 +37,19 @@ Design for a macOS user glancing at a small VPN control surface in a quiet deskt
## Color and light
- Preserve green-tinted dark and light neutrals through the existing OKLCH variables.
- Inactive power stays neutral gray even on hover; active power becomes green.
- Use green for active VPN, selected server underline, progress, copy success, refresh success, and focus.
- Prefer localized `drop-shadow`, `text-shadow`, or a soft radial light layer over filled green containers.
- Treat mode color as a system-wide state, not a logo-only decoration: Connect uses its blue-green token and Gateway uses its orange token for power, glow, selected rows, progress, copy/refresh feedback, focus, and mode-relevant labels.
- Inactive power stays neutral gray even on hover. Warning and destructive actions remain semantic red rather than inheriting the mode accent.
- Prefer localized `drop-shadow`, `text-shadow`, or a soft radial light layer over filled accent containers.
- Let glow support state recognition. Do not leave every element glowing continuously.
- Give Connect and Gateway distinct favicons and brand marks using the same mode palette.
- When Gateway carries traffic, fade, desaturate, and disable the local subscription/server block: it remains understandable context but must not look active or actionable.
## Interactive surfaces
- Use one fast translucent cloud treatment for explanatory tooltips. Place the cloud above its target with strong enough contrast to survive busy content beneath it.
- Keep a tooltip as a sibling of the animated icon/button it describes. A tooltip must never rotate, glow, blur, scale, or move with the control.
- Use inline confirmation for destructive subscription removal. Explain that VPN stops and proxy-dependent applications lose connectivity until a new subscription is configured.
- Animate physical icon parts when their function suggests it, such as lifting a trash lid on hover, while keeping hit areas and nearby text fixed.
## Data presentation