# CVE Intelligence Dashboard - Design System Reference

## 🎨 Color Palette

### Primary Colors
```css
--intel-darkest: #0F172A    /* Slate 900 - Deepest background */
--intel-dark: #1E293B       /* Slate 800 - Card backgrounds */
--intel-medium: #334155     /* Slate 700 - Elevated elements */
```

### Accent & Status Colors
```css
--intel-accent: #0EA5E9    /* Sky Blue - Primary accent, links, interactive elements */
--intel-warning: #F59E0B   /* Amber - Warnings, high severity, open tickets */
--intel-danger: #EF4444    /* Red - Critical severity, destructive actions */
--intel-success: #10B981   /* Emerald - Success states, low severity, confirmations */
```

### Text Colors
```css
--text-primary: #F8FAFC    /* Slate 50 - Primary text */
--text-secondary: #E2E8F0  /* Slate 200 - Secondary text */
--text-tertiary: #CBD5E1   /* Slate 300 - Labels, metadata */
--text-muted: #94A3B8      /* Slate 400 - Placeholders, disabled */
```

### Severity Badge Colors
| Severity | Border | Background | Text | Glow Dot |
|----------|--------|------------|------|----------|
| **Critical** | `#EF4444` | `rgba(239, 68, 68, 0.25)` | `#FCA5A5` | `#EF4444` |
| **High** | `#F59E0B` | `rgba(245, 158, 11, 0.25)` | `#FCD34D` | `#F59E0B` |
| **Medium** | `#0EA5E9` | `rgba(14, 165, 233, 0.25)` | `#7DD3FC` | `#0EA5E9` |
| **Low** | `#10B981` | `rgba(16, 185, 129, 0.25)` | `#6EE7B7` | `#10B981` |

## 📐 Layout Structure

### Three-Column Grid Layout
```
┌─────────────────────────────────────────────────────────────┐
│                    HEADER & STATS BAR                       │
│  CVE INTEL  |  [Stats: Total, Entries, Tickets, Critical] │
├──────────────┬─────────────────────────┬────────────────────┤
│              │                         │                    │
│  LEFT PANEL  │     CENTER PANEL        │   RIGHT PANEL     │
│  (3 cols)    │     (6 cols)            │   (3 cols)        │
│              │                         │                    │
│  Knowledge   │  Quick CVE Lookup       │   Calendar        │
│  Base        │  Search & Filters       │   Widget          │
│  - Wiki      │  CVE Results List       │                   │
│  - Docs      │  - Expandable cards     │   Open Tickets    │
│  - Policies  │  - Vendor entries       │   - Compact list  │
│  - Guides    │  - Documents            │   - Quick stats   │
│              │  - JIRA tickets         │                   │
│              │                         │                    │
└──────────────┴─────────────────────────┴────────────────────┘
```

### Responsive Breakpoints
- **Desktop (lg+)**: 3-column layout (3-6-3 grid)
- **Tablet/Mobile**: Stacked single column

## 🎯 Component Specifications

### Stat Cards
```css
Background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9))
Border: 2px solid [accent-color]
Border Radius: 0.5rem
Padding: 1rem
Top Accent Line: 2px gradient, 0 0 8px glow
Shadow: 0 4px 16px rgba(0, 0, 0, 0.5)
Hover: translateY(-2px), enhanced shadow
```

### Intel Cards (Main Content)
```css
Background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9))
Border: 2px solid rgba(14, 165, 233, 0.4)
Shadow: 0 8px 24px rgba(0, 0, 0, 0.6), subtle glow
Hover: Enhanced border (0.5 opacity), lift effect
```

### Buttons
```css
/* Primary */
Background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.1))
Border: 1px solid #0EA5E9
Color: #38BDF8
Text Shadow: 0 0 6px rgba(14, 165, 233, 0.2)

/* Hover State */
Background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(14, 165, 233, 0.2))
Shadow: 0 0 20px rgba(14, 165, 233, 0.25)
Transform: translateY(-1px)
Ripple Effect: 300px radial on click
```

### Input Fields
```css
Background: rgba(30, 41, 59, 0.6)
Border: 1px solid rgba(14, 165, 233, 0.25)
Font: 'JetBrains Mono', monospace
Focus: border #0EA5E9, ring 2px rgba(14, 165, 233, 0.15)
```

### Badges (Status/Severity)
```css
Display: inline-flex
Align Items: center
Gap: 0.5rem
Border: 2px solid [severity-color]
Border Radius: 0.375rem
Padding: 0.375rem 0.875rem
Font: 'JetBrains Mono', 0.75rem, 700, uppercase
Letter Spacing: 0.5px
Glow Dot: 8px circle with pulse animation
```

## ✨ Interactions & Animations

### Hover Effects
- **Cards**: `translateY(-2px)`, enhanced border, subtle glow
- **Buttons**: Radial ripple expand (300px), slight lift
- **List Items**: Border color shift, background lighten

### Animations
```css
/* Pulse Glow (for dots) */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

/* Scan Line */
@keyframes scan {
  0%, 100% { transform: translateY(-100%); opacity: 0; }
  50% { transform: translateY(2000%); opacity: 0.5; }
}

/* Spin (loading) */
@keyframes spin {
  to { transform: rotate(360deg); }
}
```

### Transitions
```css
Standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
Fast: all 0.2s ease
Ripple: width/height 0.5s
```

## 🔤 Typography

### Font Families
```css
Primary (UI): 'Outfit', system-ui, sans-serif
Monospace (Data/Code): 'JetBrains Mono', monospace
```

### Font Sizes & Weights
```css
/* Headings */
h1: 2.5rem (40px), 700, monospace
h2: 1.125rem (18px), 600, uppercase, tracking-wider
h3: 1.125rem (18px), 600

/* Body */
Body: 0.875rem (14px), 400
Small: 0.75rem (12px), 400
Labels: 0.75rem (12px), 500, uppercase, tracking-wider
```

### Text Shadows (Headings)
```css
Accent Headings: 0 0 16px rgba(14, 165, 233, 0.3), 0 0 32px rgba(14, 165, 233, 0.15)
Badge Text: 0 0 8px rgba([color], 0.5)
```

## 🎨 Visual Effects

### Shadows
```css
/* Card Elevations */
Level 1: 0 2px 6px rgba(0, 0, 0, 0.3)
Level 2: 0 4px 12px rgba(0, 0, 0, 0.4)
Level 3: 0 8px 24px rgba(0, 0, 0, 0.6)

/* Glows */
Subtle: 0 0 12px rgba([color], 0.12)
Medium: 0 0 20px rgba([color], 0.15)
Strong: 0 0 28px rgba([color], 0.25)

/* Inset Highlights */
Top: inset 0 1px 0 rgba(14, 165, 233, 0.15)
Recessed: inset 0 2px 4px rgba(0, 0, 0, 0.3)
```

### Border Styles
```css
/* Standard Cards */
Border: 1.5-2px solid rgba(14, 165, 233, 0.3-0.4)

/* Accent Panels */
Left Border: 3px solid [accent-color]

/* Vendor/Nested Cards */
Border: 1px solid rgba(14, 165, 233, 0.25)
```

### Gradients
```css
/* Backgrounds */
Card: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9))
Nested: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9))

/* Accent Lines */
Top Bar: linear-gradient(90deg, transparent, [color], transparent)

/* Grid Background */
linear-gradient(rgba(14, 165, 233, 0.025) 1px, transparent 1px)
Size: 20px × 20px
```

## 🧩 Specific Component Patterns

### Wiki/Knowledge Base Entry
```css
Background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.75))
Border: 1px solid rgba(16, 185, 129, 0.25)
Padding: 0.75rem
Cursor: pointer
Hover: border-color shift to rgba(16, 185, 129, 0.4)
```

### Calendar Widget
```css
Day Cells:
  - Text: white, font-mono, 0.75rem
  - Hover: bg rgba(14, 165, 233, 0.2)
  - Current Day: bg rgba(14, 165, 233, 0.3), border 1px #0EA5E9
  - Other Month: text rgba(148, 163, 184, 0.5)
```

### Ticket Cards (Compact)
```css
Background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.75))
Border: 1px solid rgba(245, 158, 11, 0.25)
Padding: 0.5rem
Status Badge: Reduced size (0.65rem, 0.25rem padding)
Glow Dot: 6px diameter
```

### CVE Expandable Cards
```css
Header: Clickable, cursor pointer
Collapsed: Show summary (severity, vendor count, doc count)
Expanded: Full description, metadata, vendor entries
Chevron: Rotate -90deg (collapsed) to 0deg (expanded)
Vendor Cards: Nested with reduced opacity borders
```

## 📱 Accessibility

### Contrast Ratios
- Primary text on dark: 18.5:1 (AAA)
- Secondary text on dark: 12.3:1 (AAA)
- Accent colors: All meet WCAG AA minimum

### Interactive States
- Focus rings: 2px solid accent color
- Hover: Visible border/background changes
- Active: Transform feedback

### Typography
- Minimum size: 12px (0.75rem)
- Line height: 1.5 for body text
- Letter spacing: Generous for uppercase labels

## 🎯 Design Principles

1. **Professional Sophistication**: Modern enterprise feel, not arcade
2. **Tactical Intelligence**: Purpose-driven, information-dense
3. **Refined Depth**: Layers and elevation without harsh neon
4. **Purposeful Color**: Accent colors convey meaning (status, severity)
5. **Smooth Interactions**: Polished micro-interactions and transitions
6. **Monospace Data**: Technical data uses JetBrains Mono for clarity
7. **Generous Spacing**: Breathing room prevents overwhelming density

---

**Last Updated**: February 10, 2026
**Version**: 2.0 (Modern Professional Redesign)