abyssVpn/desgin/professional_vpn_system/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Professional VPN System	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #f8f9ff #d7dae2 #f8f9ff #ffffff #f1f3fc #ebeef6 #e5e8f0 #dfe2eb #181c22 #424655 #2d3137 #eef1f9 #737687 #c3c6d8 #0053db #0050d6 #ffffff #2a6af9 #fefcff #b4c5ff #006e16 #ffffff #6bfd6a #007317 #9e3e00 #ffffff #c64f00 #fffbff #ba1a1a #ffffff #ffdad6 #93000a #dbe1ff #b4c5ff #00174b #003ea8 #72ff70 #4ee253 #002203 #00530e #ffdbcc #ffb695 #351000 #7b2e00 #f8f9ff #181c22 #dfe2eb	display h1 h2 body-lg body-md label-md label-sm caption fontFamily fontSize fontWeight lineHeight letterSpacing Inter 32px 600 40px -0.02em fontFamily fontSize fontWeight lineHeight Inter 24px 600 32px fontFamily fontSize fontWeight lineHeight Inter 20px 600 28px fontFamily fontSize fontWeight lineHeight Inter 16px 400 24px fontFamily fontSize fontWeight lineHeight Inter 14px 400 22px fontFamily fontSize fontWeight lineHeight Inter 14px 500 20px fontFamily fontSize fontWeight lineHeight Inter 12px 500 18px fontFamily fontSize fontWeight lineHeight Inter 12px 400 18px	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	xs sm md lg xl xxl 4px 8px 16px 24px 32px 48px

Brand & Style

The brand personality of the design system is anchored in Enterprise-grade Reliability and Transparent Utility. It is designed to feel less like a "utility tool" and more like a high-performance "productivity workspace." The interface must evoke a sense of calm, security, and effortless control, moving away from the aggressive aesthetics of consumer VPNs toward a sophisticated, collaborative atmosphere.

The design style is a blend of Corporate Modern and Minimalism. It prioritizes clarity through generous whitespace, high-contrast functional elements, and a structured information architecture. The emotional response should be one of "silent protection"—the software remains unobtrusive in the workflow while remaining instantly legible when interaction is required.

Colors

The color system is built around "Feishu Blue" (#3370FF) to represent intelligence and stability. The palette utilizes a clean, high-brightness white base to maintain the "workspace" feel, supported by a sophisticated range of cool grays.

• Primary Blue: Used for primary actions, active states, and branding.
• Semantic Connectivity: The system uses a strict traffic-light logic for connection status. The "Connected" state uses a vibrant green (#00B42A), while "Disconnected" uses a crisp red (#F53F3F).
• Surface Grays: The background uses a slightly off-white gray (#F5F6F7) to reduce eye strain, while cards and primary containers use pure white to pop from the background.
• Text Contrast: Text colors are tiered to ensure deep legibility, with the primary text using a near-black gray (#1F2329) rather than pure black.

Typography

The typography system utilizes Inter for its exceptional legibility on digital screens and its neutral, systematic character. The hierarchy is designed to highlight connectivity status and server locations at a glance.

• Display & Headlines: Used for connection status (e.g., "Connected") and primary headers. Tightened letter spacing is used for larger sizes to maintain a professional, compact feel.
• Body Text: Standardized at 14px for the majority of UI interactions to align with enterprise software standards.
• Labels: Medium weights (500) are used for interactive UI elements like button text and navigation items to distinguish them from static body content.
• Data Mono (Optional): While Inter is the primary font, numerical data like IP addresses or latency (ms) should prioritize clarity and alignment.

Layout & Spacing

The layout follows a Fixed-Fluid Hybrid model typical of professional desktop clients. A fixed-width left sidebar handles navigation, while the main content area utilizes a fluid grid that expands to fill the window.

• The 8px Rhythm: All margins, paddings, and component heights must be increments of 8px (or 4px for tight internal component spacing).
• Whitespace: Emphasize generous internal padding within cards (24px) to create the "Lark" workspace feel, ensuring the UI never feels cramped even when displaying complex technical data.
• Alignment: Content is generally left-aligned to mimic document reading patterns, with the exception of the "Connect" toggle which may be centered for focus.

Elevation & Depth

This design system uses Tonal Layering supplemented by Ambient Shadows to establish hierarchy.

• Base Layer: The application background is the lowest level (#F5F6F7), acting as the canvas.
• Surface Layer: Main content areas and sidebar segments use pure white or slightly darker grays to distinguish functional zones.
• Shadows: Use extremely soft, diffused shadows to lift cards from the background. Shadows should have a large blur (16px+) and very low opacity (4-8%), utilizing a slight blue tint (#1F2329 with 0.05 opacity) rather than pure black to maintain a clean aesthetic.
• Interactions: On hover, buttons and interactive cards should transition with a subtle elevation increase or a soft inner-glow to provide tactile feedback without visual clutter.

Shapes

The shape language is defined by "Soft Geometry." Rounded corners are used consistently to make the enterprise tool feel approachable and modern.

• Standard Components: Buttons, input fields, and server list items use an 8px radius.
• Container Elements: Main content cards and the central connection module use a 12px radius to anchor the visual experience.
• Circular Elements: Toggle switches and status indicators (dots) use full "pill" rounding.
• Borders: Use thin (1px) borders in soft grays (#DEE0E3) instead of heavy shadows to define boundaries, maintaining a flat, professional look.

Components

Components in this design system follow a minimalist, high-functionality philosophy:

• Buttons:
  • Primary: Solid #3370FF with white text; 8px corners.
  • Secondary: Ghost style with 1px border (#DEE0E3) and primary text.
  • Connectivity Toggle: A large, distinct button or switch that changes color significantly (Green vs Red) based on state.
• Input Fields: Flat design with a subtle light gray background (#F5F6F7). On focus, the border transitions to Primary Blue with a soft 2px glow.
• Lists (Server Selection): Clean rows with 14px typography. Include a thin-stroke country flag or icon, name, and a signal strength indicator (3-4 vertical bars).
• Chips/Badges: Small, rounded-pill shapes used for protocol labels (e.g., "WireGuard", "OpenVPN") using low-saturation background tints of the primary blue.
• Cards: Used to group connection details (IP, Duration, Data Used). Cards should have a 12px radius and a very subtle shadow to differentiate them from the background.
• Icons: Use thin-stroke (1.5px) linear icons. Icons should be monochrome (Secondary Text color) unless they represent a specific active status.