Prompt file imported from shahidhustles/cypher-vuln (.github/prompts/ui-design.prompt.md). Copyright stays with the author.

CYPHER Design System: "Cipher Control"

Name: ui-design
Author: shahidhustles

This document defines the visual language for CYPHER. It is based on a "Classified Mission Control" aesthetic—dark, monospaced, high-contrast, and data-dense.

Core Philosophy:

Aesthetic: "Hollywood Hacker" meets "Military Dashboard".
Function: High-density data presentation.
Vibe: Serious, urgent, precise.

1. 🎨 Color Palette

We use a strictly limited palette to maintain the "terminal" feel.

Backgrounds

Void Black: #000000 (Main App Background)
Radar Dark: #0A0A0A (Card/Panel Backgrounds)
Scanline: #111111 (Table Stripes/Subtle highlights)

Borders & Separators

Dim Border: #333333 (Standard container borders)
Active Border: #FFFFFF (Selected/Focused elements)

Accents (Functional)

🟢 Success / Online: #00FF94 (Bright Neon Green) -> Use for: Valid, Safe, Completed, Low Severity.
🟠 Warning / Busy: #FF9900 (Amber/Orange) -> Use for: Scanning, Medium Severity, Metrics.
🔴 Critical / Alert: #FF3333 (Bright Red) -> Use for: High/Critical Severity, Attack Detected, Errors.
🔵 System / Info: #00CCFF (Cyan) -> Use for: AI Metadata, Neutral Info, Encryption.

Text

Primary: #EEEEEE (Off-white - pure white is too harsh for large text blocks)
Secondary: #888888 (Muted gray for labels)
Terminal: #00FF94 (For console logs/commands)

2. 🔠 Typography

Font Family: JetBrains Mono, Fira Code, or Geist Mono (Standard Google Font).

Rule: 95% of UI text should be Monospace. Sans-serif is forbidden for data.

Styles:

H1 / Page Titles: Uppercase, Tracking-Widest (Letter spacing +2px).
Labels (Table Headers, Metrics): Uppercase, Text-xs, Text-Gray-500.
Values: Normal Case, Text-White.

3. 🧩 UI Components & Patterns

A. The "HUD" Container (Cards)

Every major section is enclosed in a bordered container with specific markers.

Border: 1px solid #333.
Corner Brackets: Absolute positioned "L" shapes at the 4 corners of the container.
- Visual: border-l border-t (white, 2px width, 8px length).
Header: A small label in the top-left, often outside the border or embedded in the border.

B. Section Headers

Visual: Vertical Accent Bar on the left.
Code: border-l-2 border-orange-500 pl-3 uppercase tracking-wider text-sm font-bold.
Example: | GLOBAL MISSION METRICS

C. Buttons (Tactical)

Style: Outline only. No solid backgrounds for primary buttons unless active.
Normal: Border #333, Text #888.
Hover: Border #FFF, Text #FFF, Background #111.
Active/Submit: Border Green/Orange, Text Green/Orange, Glow Effect.
Shape: Sharp corners (0px border-radius).

D. Progress Bars (Segmented)

Do not use smooth loading bars. Use "blocks" or "segments".

Style: [||||||||||.....]
Implementation: A flex container with 20 small divs. Active divs have bg-green-500, inactive have bg-gray-800.

E. Status Indicators

Glowing Dot: An 8px circle with a CSS drop-shadow (glow).
- Green Glow: box-shadow: 0 0 10px #00FF94
Text: Always Uppercase next to the dot.
- ● SYSTEM ONLINE

4. 📐 Layout Grid (The Bento Box)

The interface is strictly gridded. Use CSS Grid.

Gap: Tiny gaps (16px/1rem).
Structure:
- Sidebar: Slim icon rail (left).
- Main Stage: Large central interactive area (Map/Scanner Output).
- Right Panel: Auxiliary data (Logs/AI Chat).

5. 🕹️ Special Effects (The "Movie Feel")

Scanlines: A CSS overlay with pointer-events: none and a repeating linear gradient to simulate CRT lines.
Blinking Cursor: Standard for terminal inputs. animation: blink 1s step-end infinite.
Glitch: On critical alerts, use a slight CSS text-shadow glitch effect.

6. Iconography

Use Lucide React or Heroicons.
Style: Stroke width 1.5 or 1. Thin, precise lines.

Example Tailwind Utility Class collection

bg-black text-white font-mono
border border-white/20
hover:border-white/60 transition-colors
uppercase tracking-[0.2em] text-xs text-white/50

# CYPHER Design System: "Cipher Control" This document defines the visual language for CYPHER. It is based on a "Classified Mission Control" aesthetic—dark, monospaced, high-contrast, and data-dense. **Core Philosophy:** - **Aesthetic:** "Hollywood Hacker" meets "Military Dashboard". - **Function:** High-density data presentation. - **Vibe:** Serious, urgent, precise. --- ## 1. 🎨 Color Palette We use a strictly limited palette to maintain the "terminal" feel. ### Backgrounds - **Void Black:** `#000000` (Main App Background) - **Radar Dark:** `#0A0A0A` (Card/Panel Backgrounds) - **Scanline:** `#111111` (Table Stripes/Subtle highlights) ### Borders & Separators - **Dim Border:** `#333333` (Standard container borders) - **Active Border:** `#FFFFFF` (Selected/Focused elements) ### Accents (Functional) - **🟢 Success / Online:** `#00FF94` (Bright Neon Green) -> _Use for: Valid, Safe, Completed, Low Severity._ - **🟠 Warning / Busy:** `#FF9900` (Amber/Orange) -> _Use for: Scanning, Medium Severity, Metrics._ - **🔴 Critical / Alert:** `#FF3333` (Bright Red) -> _Use for: High/Critical Severity, Attack Detected, Errors._ - **🔵 System / Info:** `#00CCFF` (Cyan) -> _Use for: AI Metadata, Neutral Info, Encryption._ ### Text - **Primary:** `#EEEEEE` (Off-white - pure white is too harsh for large text blocks) - **Secondary:** `#888888` (Muted gray for labels) - **Terminal:** `#00FF94` (For console logs/commands) --- ## 2. 🔠 Typography **Font Family:** `JetBrains Mono`, `Fira Code`, or `Geist Mono` (Standard Google Font). - _Rule:_ 95% of UI text should be Monospace. Sans-serif is forbidden for data. **Styles:** - **H1 / Page Titles:** `Uppercase`, `Tracking-Widest` (Letter spacing +2px). - **Labels (Table Headers, Metrics):** `Uppercase`, `Text-xs`, `Text-Gray-500`. - **Values:** `Normal Case`, `Text-White`. --- ## 3. 🧩 UI Components & Patterns ### A. The "HUD" Container (Cards) Every major section is enclosed in a bordered container with specific markers. - **Border:** 1px solid `#333`. - **Corner Brackets:** Absolute positioned "L" shapes at the 4 corners of the container. - _Visual:_ `border-l border-t` (white, 2px width, 8px length). - **Header:** A small label in the top-left, often outside the border or embedded in the border. ### B. Section Headers - **Visual:** Vertical Accent Bar on the left. - **Code:** `border-l-2 border-orange-500 pl-3 uppercase tracking-wider text-sm font-bold`. - **Example:** `| GLOBAL MISSION METRICS` ### C. Buttons (Tactical) - **Style:** Outline only. No solid backgrounds for primary buttons unless active. - **Normal:** Border `#333`, Text `#888`. - **Hover:** Border `#FFF`, Text `#FFF`, Background `#111`. - **Active/Submit:** Border `Green/Orange`, Text `Green/Orange`, Glow Effect. - **Shape:** Sharp corners (0px border-radius). ### D. Progress Bars (Segmented) Do not use smooth loading bars. Use "blocks" or "segments". - **Style:** `[||||||||||.....]` - **Implementation:** A flex container with 20 small `div`s. Active divs have `bg-green-500`, inactive have `bg-gray-800`. ### E. Status Indicators - **Glowing Dot:** An 8px circle with a CSS drop-shadow (glow). - _Green Glow:_ `box-shadow: 0 0 10px #00FF94` - **Text:** Always Uppercase next to the dot. - `● SYSTEM ONLINE` --- ## 4. 📐 Layout Grid (The Bento Box) The interface is strictly gridded. Use CSS Grid. - **Gap:** Tiny gaps (16px/1rem). - **Structure:** - **Sidebar:** Slim icon rail (left). - **Main Stage:** Large central interactive area (Map/Scanner Output). - **Right Panel:** Auxiliary data (Logs/AI Chat). --- ## 5. 🕹️ Special Effects (The "Movie Feel") - **Scanlines:** A CSS overlay with `pointer-events: none` and a repeating linear gradient to simulate CRT lines. - **Blinking Cursor:** Standard for terminal inputs. `animation: blink 1s step-end infinite`. - **Glitch:** On critical alerts, use a slight CSS text-shadow glitch effect. --- ## 6. Iconography - Use **Lucide React** or **Heroicons**. - **Style:** Stroke width `1.5` or `1`. Thin, precise lines. --- ### Example Tailwind Utility Class collection - `bg-black text-white font-mono` - `border border-white/20` - `hover:border-white/60 transition-colors` - `uppercase tracking-[0.2em] text-xs text-white/50`

{ "prompt": "# CYPHER Design System: \"Cipher Control\"\n\nThis document defines the visual language for CYPHER. It is based on a \"Classified Mission Control\" aesthetic—dark, monospaced, high-contrast, and data-dense.\n\n**Core Philosophy:**\n\n- **Aesthetic:** \"Hollywood Hacker\" meets \"Military Dashboard\".\n- **Function:** High-density data presentation.\n- **Vibe:** Serious, urgent, precise.\n\n---\n\n## 1. 🎨 Color Palette\n\nWe use a strictly limited palette to maintain the \"terminal\" feel.\n\n### Backgrounds\n\n- **Void Black:** `#000000` (Main App Background)\n- **Radar Dark:** `#0A0A0A` (Card/Panel Backgrounds)\n- **Scanline:** `#111111` (Table Stripes/Subtle highlights)\n\n### Borders & Separators\n\n- **Dim Border:** `#333333` (Standard container borders)\n- **Active Border:** `#FFFFFF` (Selected/Focused elements)\n\n### Accents (Functional)\n\n- **🟢 Success / Online:** `#00FF94` (Bright Neon Green) -> _Use for: Valid, Safe, Completed, Low Severity._\n- **🟠 Warning / Busy:** `#FF9900` (Amber/Orange) -> _Use for: Scanning, Medium Severity, Metrics._\n- **🔴 Critical / Alert:** `#FF3333` (Bright Red) -> _Use for: High/Critical Severity, Attack Detected, Errors._\n- **🔵 System / Info:** `#00CCFF` (Cyan) -> _Use for: AI Metadata, Neutral Info, Encryption._\n\n### Text\n\n- **Primary:** `#EEEEEE` (Off-white - pure white is too harsh for large text blocks)\n- **Secondary:** `#888888` (Muted gray for labels)\n- **Terminal:** `#00FF94` (For console logs/commands)\n\n---\n\n## 2. 🔠 Typography\n\n**Font Family:** `JetBrains Mono`, `Fira Code`, or `Geist Mono` (Standard Google Font).\n\n- _Rule:_ 95% of UI text should be Monospace. Sans-serif is forbidden for data.\n\n**Styles:**\n\n- **H1 / Page Titles:** `Uppercase`, `Tracking-Widest` (Letter spacing +2px).\n- **Labels (Table Headers, Metrics):** `Uppercase`, `Text-xs`, `Text-Gray-500`.\n- **Values:** `Normal Case`, `Text-White`.\n\n---\n\n## 3. 🧩 UI Components & Patterns\n\n### A. The \"HUD\" Container (Cards)\n\nEvery major section is enclosed in a bordered container with specific markers.\n\n- **Border:** 1px solid `#333`.\n- **Corner Brackets:** Absolute positioned \"L\" shapes at the 4 corners of the container.\n - _Visual:_ `border-l border-t` (white, 2px width, 8px length).\n- **Header:** A small label in the top-left, often outside the border or embedded in the border.\n\n### B. Section Headers\n\n- **Visual:** Vertical Accent Bar on the left.\n- **Code:** `border-l-2 border-orange-500 pl-3 uppercase tracking-wider text-sm font-bold`.\n- **Example:** `| GLOBAL MISSION METRICS`\n\n### C. Buttons (Tactical)\n\n- **Style:** Outline only. No solid backgrounds for primary buttons unless active.\n- **Normal:** Border `#333`, Text `#888`.\n- **Hover:** Border `#FFF`, Text `#FFF`, Background `#111`.\n- **Active/Submit:** Border `Green/Orange`, Text `Green/Orange`, Glow Effect.\n- **Shape:** Sharp corners (0px border-radius).\n\n### D. Progress Bars (Segmented)\n\nDo not use smooth loading bars. Use \"blocks\" or \"segments\".\n\n- **Style:** `[||||||||||.....]`\n- **Implementation:** A flex container with 20 small `div`s. Active divs have `bg-green-500`, inactive have `bg-gray-800`.\n\n### E. Status Indicators\n\n- **Glowing Dot:** An 8px circle with a CSS drop-shadow (glow).\n - _Green Glow:_ `box-shadow: 0 0 10px #00FF94`\n- **Text:** Always Uppercase next to the dot.\n - `● SYSTEM ONLINE`\n\n---\n\n## 4. 📐 Layout Grid (The Bento Box)\n\nThe interface is strictly gridded. Use CSS Grid.\n\n- **Gap:** Tiny gaps (16px/1rem).\n- **Structure:**\n - **Sidebar:** Slim icon rail (left).\n - **Main Stage:** Large central interactive area (Map/Scanner Output).\n - **Right Panel:** Auxiliary data (Logs/AI Chat).\n\n---\n\n## 5. 🕹️ Special Effects (The \"Movie Feel\")\n\n- **Scanlines:** A CSS overlay with `pointer-events: none` and a repeating linear gradient to simulate CRT lines.\n- **Blinking Cursor:** Standard for terminal inputs. `animation: blink 1s step-end infinite`.\n- **Glitch:** On critical alerts, use a slight CSS text-shadow glitch effect.\n\n---\n\n## 6. Iconography\n\n- Use **Lucide React** or **Heroicons**.\n- **Style:** Stroke width `1.5` or `1`. Thin, precise lines.\n\n---\n\n### Example Tailwind Utility Class collection\n\n- `bg-black text-white font-mono`\n- `border border-white/20`\n- `hover:border-white/60 transition-colors`\n- `uppercase tracking-[0.2em] text-xs text-white/50`", "variables": [], "notes": "This document defines the visual language for CYPHER. It is based on a \"Classified Mission Control\" aesthetic—dark, monospaced, high-contrast, and data-dense.", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/shahidhustles/cypher-vuln", "path": ".github/prompts/ui-design.prompt.md", "ref": "e12022fc41919e6e4f548a95f919ad0245db9d6d", "url": "https://github.com/shahidhustles/cypher-vuln/blob/e12022fc41919e6e4f548a95f919ad0245db9d6d/.github/prompts/ui-design.prompt.md", "key": "shahidhustles/cypher-vuln/.github/prompts/ui-design.prompt.md" } } }

ui-design

About