jramos
bf3d01becf
Documented complete design system including color palette, layout structure, component specifications, typography, visual effects, and accessibility standards. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
295 lines
8.9 KiB
Markdown
295 lines
8.9 KiB
Markdown
# 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)
|