|
| 1 | +```markdown |
| 2 | +# Design System Document |
| 3 | + |
| 4 | +## 1. Overview & Creative North Star: "The Neon Terminal" |
| 5 | + |
| 6 | +This design system is a high-performance visual framework built to mirror the raw speed and technical precision of a high-end download manager. Our Creative North Star is **"The Neon Terminal"**—an aesthetic that bridges the gap between a 1980s mainframe and a futuristic cyber-deck. |
| 7 | + |
| 8 | +We reject the "softness" of modern SaaS. Here, we embrace **intentional sharpness**, **high-contrast glowing surfaces**, and **asymmetric editorial layouts**. By utilizing a 0px border radius across the entire system, we create a sense of structural rigidity and technical "un-designed" authenticity. The UI is not just a portal; it is a high-performance instrument. |
| 9 | + |
| 10 | +--- |
| 11 | + |
| 12 | +## 2. Colors & The Spectral Void |
| 13 | + |
| 14 | +The palette is rooted in a `surface-dim` (#110924) that simulates the infinite depth of a CRT monitor. |
| 15 | + |
| 16 | +### The Palette |
| 17 | +* **Primary (Neon Cyan):** `#c1fffe` (Primary) / `#00ffff` (Container). Use for critical success states and primary CTAs. |
| 18 | +* **Secondary (Neon Magenta):** `#ff51fa` (Secondary) / `#a900a9` (Container). Use for accents, "hot" download areas, and high-impact hero elements. |
| 19 | +* **Tertiary (Acid Lime):** `#e9ffba`. Reserved for technical highlights and "Completed" statuses. |
| 20 | + |
| 21 | +### The "No-Line" Rule |
| 22 | +Traditional 1px solid borders are strictly prohibited for sectioning. Boundaries must be defined through background color shifts. For instance, a `surface-container-low` section should sit against a `surface` background to define its edge. |
| 23 | + |
| 24 | +### Surface Hierarchy & Nesting |
| 25 | +Treat the UI as a series of technical modules. |
| 26 | +* **Level 0 (Background):** `surface` (#110924). |
| 27 | +* **Level 1 (Sectioning):** `surface-container-low`. |
| 28 | +* **Level 2 (Cards/Modules):** `surface-container-high`. |
| 29 | +Each inner container should use a slightly higher tier to define importance through tonal depth rather than structural lines. |
| 30 | + |
| 31 | +### The "Glass & Gradient" Rule |
| 32 | +To elevate the "Synthwave" feel, floating elements (like tooltips or platform selection chips) must utilize **Glassmorphism**. Use `secondary-container` at 20% opacity with a `20px` backdrop-blur. For hero CTAs, apply a linear gradient from `primary` to `primary-dim` at a 135-degree angle to provide visual "soul." |
| 33 | + |
| 34 | +--- |
| 35 | + |
| 36 | +## 3. Typography: Editorial Tech |
| 37 | + |
| 38 | +We use a high-contrast pairing to balance marketing impact with technical density. |
| 39 | + |
| 40 | +* **Display & Headlines (Space Grotesk):** This is our "Impact" layer. Use `display-lg` (3.5rem) for hero sections with tight letter-spacing (-0.02em). It conveys the "Surge" brand's speed and modern edge. |
| 41 | +* **Technical & Body (Fira Code):** Every piece of metadata, download speed, and body paragraph must be rendered in Fira Code. This reinforces the "Terminal" identity and provides a monospace rhythm that feels deliberate and engineered. |
| 42 | + |
| 43 | +--- |
| 44 | + |
| 45 | +## 4. Elevation & Depth: Tonal Layering |
| 46 | + |
| 47 | +We do not use standard material shadows. Depth is achieved through **Tonal Layering** and **Light Leaks**. |
| 48 | + |
| 49 | +* **The Layering Principle:** Stack `surface-container-lowest` cards on a `surface-container-low` section. This creates a soft, natural lift without the need for an artificial shadow. |
| 50 | +* **Ambient Glows:** When a "floating" effect is required, shadows must be replaced with "Glows." Use the `primary` or `secondary` token at 10% opacity with a large blur (40px+) to simulate the light emission of a neon tube. |
| 51 | +* **The "Ghost Border" Fallback:** If a container requires definition against a complex background, use a **Ghost Border**: `outline-variant` at 15% opacity. |
| 52 | +* **Scanline Overlay:** Apply a global fixed-position PNG overlay of horizontal scanlines at 3% opacity to the entire viewport to ground the digital experience in "Retro-Tech" reality. |
| 53 | + |
| 54 | +--- |
| 55 | + |
| 56 | +## 5. Components |
| 57 | + |
| 58 | +### High-Impact Hero Section |
| 59 | +* **Layout:** Asymmetric. Use `display-lg` text aligned left, with a `secondary` glowing "S" logo element overlapping the text container. |
| 60 | +* **Visual:** Background should utilize a subtle gradient transition from `surface` to `surface-bright`. |
| 61 | + |
| 62 | +### Feature Grids (Technical Specs) |
| 63 | +* **Card Style:** `surface-container-highest` background, 0px border radius. |
| 64 | +* **Header:** `label-md` in `tertiary` (Acid Lime) to mimic terminal code comments (e.g., `// MULTI-THREADED_ENGINE`). |
| 65 | +* **Spacing:** Use `spacing-6` (2rem) for internal padding. |
| 66 | + |
| 67 | +### Download Cards (Multi-Platform) |
| 68 | +* **Variants:** |
| 69 | + * *Prebuilt (Primary):* Solid `primary-container` background with `on-primary` text. |
| 70 | + * *AUR/Homebrew (Secondary):* Ghost Border (`outline-variant` at 20%) with `Fira Code` mono-text. |
| 71 | +* **Forbid Dividers:** Do not use lines between "Version" and "Size" info. Use `spacing-4` (1.4rem) of horizontal gap to create separation. |
| 72 | + |
| 73 | +### Buttons |
| 74 | +* **Primary:** Sharp 0px corners, `primary-container` fill. On hover, add a `primary` outer glow (15px blur). |
| 75 | +* **Tertiary (Support/Social):** No background. Underline text using a 2px `secondary` border-bottom with a `4px` offset. |
| 76 | + |
| 77 | +### Input Fields (Terminal Style) |
| 78 | +* **Style:** `surface-container-lowest` fill, `outline` bottom-border only (2px). |
| 79 | +* **Active State:** Border shifts to `primary` with a subtle `primary` glow. |
| 80 | + |
| 81 | +--- |
| 82 | + |
| 83 | +## 6. Do's and Don'ts |
| 84 | + |
| 85 | +### Do: |
| 86 | +* **Use Monospace for Numbers:** Always use Fira Code for download speeds, file sizes, and percentages. |
| 87 | +* **Embrace Asymmetry:** Offset grid items by `spacing-2` to create a "glitch" in the visual order. |
| 88 | +* **Keep it Sharp:** Ensure every corner is 0px. Even a 2px radius breaks the "Terminal" immersion. |
| 89 | + |
| 90 | +### Don't: |
| 91 | +* **Don't use Grey:** If you need a neutral, use `surface-variant` or `on-surface-variant` (tinted purples). True grey feels "default" and "cheap." |
| 92 | +* **Don't use Standard Shadows:** Avoid dark, muddy shadows. If an element needs to pop, give it a Neon Glow or a Tonal Shift. |
| 93 | +* **Don't use Dividers:** Never use a 1px line to separate list items. Use background-color alternating (zebra striping) with `surface-container-low` and `surface-container-high`. |
| 94 | + |
| 95 | +--- |
| 96 | + |
| 97 | +## 7. Accessibility Note |
| 98 | +While the "High-Contrast" synthwave look is prioritized, ensure all `on-surface` text meets WCAG AA standards against their respective `surface` containers. Use `error_dim` (#d7383b) for critical alerts to ensure visibility against the deep purple void.``` |
0 commit comments