51 lines
2.9 KiB
Markdown
51 lines
2.9 KiB
Markdown
# 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.
|
|
|
|
## 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.
|