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 cards and enclosing frames. Use spacing, type, thin rules, and state color for hierarchy.
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.

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.
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.
Let glow support state recognition. Do not leave every element glowing continuously.

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.

2.7 KiB Raw Blame History