63 lines
4.6 KiB
Markdown
63 lines
4.6 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.
|
|
- 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 the shared full-screen critical confirmation popup for destructive actions and unsaved-data exits. Keep the centered surface flat, with hierarchy from blur, spacing, type, and staged motion rather than borders or rounded cards.
|
|
- 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.
|