Visual language

Scene and character

Design for a macOS user glancing at a small VPN control surface in a quiet desktop environment. The UI should feel soft, precise, dependable, and slightly terminal-like, not like a network administration dashboard.

Composition

Make one primary action dominant: the VPN power icon.
Keep the power control centered on the viewport's vertical axis, not merely centered inside a left column.
Build the left flow vertically: power icon, stable connection copy, proxy address, copy actions.
Place subscription identity, usage, expiry, and servers in a compact column to the right.
Collapse to one centered column on narrow screens.
Avoid enclosing frames, borders, and divider lines. Use spacing, type, subtle surface changes, light, depth, and state color for hierarchy.
Do not introduce popups or modals without an explicit user request. Prefer inline disclosure or a non-modal side layer when supporting content must coexist with the main control surface.
Keep server rows vertical and narrow. Underlines should be only slightly wider than the server label and ping.

Geometry and alignment

Reserve identical height for mutually exclusive content such as timer versus connection hint.
Give copy buttons fixed width. Overlay temporary feedback instead of replacing text in normal flow.
Align icons and labels in the same flex row. Do not position an icon by guessed absolute offsets.
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

Prefer the existing JetBrains Mono / SF Mono stack for the client surface.
Use uppercase, tracked, muted micro-labels for metadata.
Use stronger weight and size for the subscription domain and connection state.
Use tabular numerals for timers and changing numeric data.
Avoid display fonts, oversized headings, and mixed type families.

Color and light

Preserve green-tinted dark and light neutrals through the existing OKLCH variables.
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.
Keep advanced client editors flat inside their side layer: rows, notes, selectors, and actions should not become nested cards, bordered fields, or raised buttons. Use spacing, type, focus light, and state color for hierarchy.

Data presentation

Show subscription domain, not the credential-like full URL.
Show used traffic and total limit as the primary statistic.
Omit upload/download breakdown when provider support is absent or ambiguous.
Show expiry as both date and remaining days, with correct Russian forms.
If there is no total, say без лимита and omit the progress bar.
Hide unavailable rows instead of showing empty placeholders or zeros that imply real measurements.

4.6 KiB Raw Blame History