cve-dashboard/DESIGN_SYSTEM.md

CVE Intelligence Dashboard - Design System Reference

🎨 Color Palette

Primary Colors

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

Accent & Status Colors

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

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

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)

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

/* 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

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)

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

/* 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

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

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

Font Sizes & Weights

/* 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)

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

/* 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

/* 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

/* 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

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

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)

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

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)