Initial commit: abyssVpn project

- Tauri desktop app (apps/desktop)
- Python Django API service (services/api)
- Deployment scripts and docs

desgin/professional_vpn_system/DESIGN.md

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