🎨 Logo Variations
Full Logo (Static)
secretumvault-logo.svg
Standard full logo. Best for dark backgrounds.
secretumvault-logo-s.svg
Simplified variant. Good for light backgrounds.
secretumvault-logo-bn.svg
Black/night variant. For dark backgrounds.
Horizontal Logo
secretumvault-logo-h.svg
Perfect for headers and horizontal layouts. Minimum width: 240px.
Animated Logo Interactive
secretumvault-quantum-vault.svg
Full animated version with orbiting electrons and pulsing core. Great for loading states and interactive sections.
⚛️ Icon Variations
secretumvault-icon.svg
Standard vault icon. Scalable from 16px to 512px. Use for UI elements and buttons.
secretumvault-icon-s.svg
Simplified vault icon. Minimal design for small sizes and simple use cases.
favicon.svg
Favicon for browser tabs. Optimized for 16px and 32px sizes.
🎨 Color Palette
Primary Colors
Primary backgrounds, depth
Secondary surfaces
Accents, interactive
Premium, security
Secondary Colors
Gradients, quantum
Rust references, CTAs
Text on dark
📖 Usage Examples
Web Header
Horizontal Logo
Icon in Navigation
Favicon
Background Compatibility
✓ Dark Background
Use on #0A1929, #1A2744, or black backgrounds.
✓ Light Background
Use on white, #F5F5F5, or light gray backgrounds.
📏 Specifications & Guidelines
Sizing Guidelines
| Asset | Minimum Size | Recommended Sizes | Usage |
|---|---|---|---|
| Full Logo | 120px | 120px, 240px, 360px | Hero sections, documentation headers |
| Horizontal Logo | 240px | 240px, 320px, 480px | Website headers, navigation |
| Icon | 32px | 32px, 48px, 64px, 128px | UI buttons, navigation, badges |
| Icon (Simplified) | 16px | 16px, 24px, 32px | Small UI elements, compact interfaces |
| Favicon | 16px | 16px, 32px | Browser tabs |
Spacing Guidelines
Maintain clear space around logos equal to half the logo height on all sides:
clear_space = logo_height / 2
Example: 120px logo → 60px clear space on all sides
File Format Guidelines
| Format | Best For | Advantages | When to Use |
|---|---|---|---|
| SVG | Web, scalable | Infinitely scalable, small file size, animatable | All web use, recommended default |
| PNG | Raster export | Transparency support, compatibility | Print, legacy systems |
| WebP | Modern web | Smaller than PNG, better compression | Performance-critical applications |
Accessibility
Always include meaningful alt text:
✓ alt="SecretumVault security vault logo"
✓ alt="Quantum encryption icon"
✗ alt="logo.svg"
✗ alt="image"
Animation Guidelines
| File | Animation | Duration | Use Case |
|---|---|---|---|
| secretumvault-quantum-vault.svg | Rotating orbits, pulsing core | 8s-20s loops | Loading states, interactive sections |
| All other files | None (static) | — | Standard branding, performance |
Performance Tips
- ✓ Use SVG for web (best scalability and performance)
- ✓ Inline SVG for critical logos to avoid extra HTTP requests
- ✓ Use animated version only when necessary
- ✓ Lazy-load non-critical images
- ✓ Optimize SVGs before deployment (remove unused code)
📚 Documentation
README.md
Directory structure and asset inventory. Quick reference for what files are available.
BRAND-GUIDELINES.md
Complete brand identity standards, color palette, typography, and usage rules.
how-to-use.md
Practical implementation guide with code examples and integration patterns.