ICD Foundation Brand Guidelines
Visual identity, design system, and component specifications for consistent brand representation
Logo & Identity
Primary Logo
The ICD Foundation logo represents collaboration and innovation in defense technology. Maintain clear space equal to the height of the “I” character around all sides.
Logo on Dark
When placed on dark backgrounds, ensure sufficient contrast. The logo should always be clearly visible and legible.
Logo Usage Guidelines
- • Minimum size: 50px width for digital, 0.5” for print
- • Do not rotate, skew, or distort the logo
- • Do not change logo colors or add effects
- • Maintain aspect ratio when scaling
Color Palette
Primary Colors
Primary 50
#f5f3ff
RGB: 245, 243, 255
Primary 100
#ede9fe
RGB: 237, 233, 254
Primary 200
#ddd6fe
RGB: 221, 214, 254
Primary 300
#c4b5fd
RGB: 196, 181, 253
Primary 400
#a78bfa
RGB: 167, 139, 250
Primary 500
#8b5cf6
RGB: 139, 92, 246
Primary 600
#7c3aed
RGB: 124, 58, 237
Primary 700
#6d28d9
RGB: 109, 40, 217
Primary 800
#5b21b6
RGB: 91, 33, 182
Primary 900
#4c1d95
RGB: 76, 29, 149
Primary 950
#2e1065
RGB: 46, 16, 101
Accent Colors
ICD Gold
#F59E0B
RGB: 245, 158, 11
Primary CTA buttons, success states
ICD Green
#059669
RGB: 5, 150, 105
Secondary CTAs, positive indicators
ICD Blue
#2563EB
RGB: 37, 99, 235
Information, links
ICD Red
#DC2626
RGB: 220, 38, 38
Errors, urgent actions
Neutral Colors
Neutral 50
#fafafa
Neutral 100
#f5f5f5
Neutral 200
#e5e5e5
Neutral 300
#d4d4d4
Neutral 400
#a3a3a3
Neutral 500
#737373
Neutral 600
#525252
Neutral 700
#404040
Neutral 800
#262626
Neutral 900
#171717
Typography
Playfair Display
Aa Bb Cc
Headlines & Display Text
The quick brown fox jumps over the lazy dog
Used for headings, hero text, and high-impact display elements
Source Sans 3
Aa Bb Cc
Body Text & UI Elements
The quick brown fox jumps over the lazy dog
Used for body text, navigation, buttons, and general UI copy
Type Scale
Iconography
ExternalLink
External links, new window
Download
Download actions, exports
FileText
Documents, text files
BookOpen
Documentation, guides
Shield
Security, protection
Users
Community, collaboration
Cpu
Technology, processing
Database
Data, storage
ChevronRight
Navigation, expansion
CheckCircle
Success, completion
AlertCircle
Warnings, important info
Info
Information, help
Building2
Organizations, enterprise
Target
Goals, objectives
Lightbulb
Ideas, innovation
Zap
Speed, performance
Icon Guidelines
Icons are from Lucide React (MIT License). Use consistent sizing (w-4 h-4 for inline, w-5 h-5 for buttons, w-6 h-6 for features). Maintain consistent stroke width and style throughout the interface.
Component Library
Button
1 of 8
Interactive elements for user actions
Variants:
Sizes:
Design Principles
Accessibility First
WCAG AA compliance with high contrast ratios. Text on dark backgrounds uses white/95 opacity. All interactive elements have clear focus states and keyboard navigation.
Performance Optimized
Static generation, optimized images, lazy loading, and code splitting ensure fast load times. Tailwind CSS for minimal CSS bundle size.
User Centered
Clear information hierarchy, consistent navigation patterns, and responsive design for all devices. Mobile-first approach with progressive enhancement.
Brand Resources
Download brand guidelines and assets for consistent implementation