abyssVpn/desgin/professional_vpn_system/DESIGN.md

---
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.