```
### Static Background with Logo
```html
```
---
## File Formats
### Primary Format: SVG
All official logos are provided as Scalable Vector Graphics (SVG):
**Advantages:**
- Resolution-independent scaling
- Animated elements support
- Reduced file size
- Full browser support
**Usage:** Web, digital displays, high-quality print output
### Export Guidelines for Other Formats
If exporting to raster formats (PNG, JPG):
- **PNG:** Recommended for web (supports transparency)
- Minimum 2x resolution for Retina displays
- Optimize with tools like TinyPNG or ImageOptim
- **PDF:** For print distribution (maintains vector quality)
- **JPG:** Not recommended (no transparency, quality loss)
### Export Settings
When exporting from SVG:
- **Minimum DPI:** 300 for print
- **Color Space:** sRGB for web, CMYK for commercial print
- **Transparency:** Preserve alpha channel for PNG
- **Optimization:** Remove metadata, optimize paths
---
## Social Media Specifications
| Platform | Format | Recommended Size | Logo Variant |
|----------|--------|------------------|--------------|
| Twitter | Square | 400×400px | Icon or Vertical |
| LinkedIn | Square | 400×400px | Icon or Vertical |
| GitHub | Square | 200×200px | Icon |
| Facebook | Square | 1200×1200px | Icon or Vertical |
| Email Signature | Horizontal | 400×120px | Horizontal Static |
---
## Print Implementation
- Use `secretumvault-logo-s.svg` (static version)
- Export to PDF for best print quality
- Ensure minimum size of 1 inch (25.4mm)
- Verify color accuracy with print vendor
- Use CMYK color profile for commercial printing
- Maintain clear space in print layouts
### Export for Print
If exporting SVG to raster for print:
- Minimum 300 DPI
- Maintain aspect ratio
- Use PNG with transparency or PDF
- Recommended tools: Inkscape, Adobe Illustrator, or online converters
---
## Design System Integration
### Quantum Vault Visual Language
The SecretumVault logo employs a quantum theme that reflects the post-quantum cryptography foundation:
- **Vault Imagery:** Security and protection
- **Circular Orbital Pattern:** Quantum mechanics and atomic structure
- **Rotating Elements:** Continuous motion and dynamism
- **Cyan Accent:** Innovation and cutting-edge technology
- **Gold Accents:** Value and trust
### Design Token Usage
```css
/* Color Tokens */
--sv-primary: #1a2744;
--sv-secondary: #2a3f6a;
--sv-cyan: #00d9ff;
--sv-gold: #ffd700;
--sv-purple: #8b5cf6;
/* Typography Tokens */
--font-primary: 'Space Grotesk', sans-serif;
--font-weight-regular: 400;
--font-weight-semi-bold: 600;
--font-weight-bold: 700;
```
---
## Asset Locations
All branding assets are located in the project:
```
secretumvault/
├── assets/
│ ├── logos/
│ ├── icons/
│ └── branding/
│ ├── secretumvault-logo.svg (animated vertical)
│ ├── secretumvault-logo-s.svg (static vertical)
│ ├── secretumvault-logo-h.svg (animated horizontal)
│ ├── secretumvault-logo-h-s.svg (static horizontal)
│ ├── secretumvault-icon.svg (animated icon)
│ ├── secretumvault-icon-s.svg (static icon)
│ ├── secretumvault-logo-bn.svg (B&W logo)
│ ├── secretumvault-icon-bn.svg (B&W icon)
│ ├── index.html (interactive asset gallery)
│ └── BRAND-GUIDELINES.md (this file)
└── docs/
└── BRAND-GUIDELINES.md (comprehensive documentation)
```
---
## Interactive Asset Gallery
An interactive gallery with dark/light mode toggle, copy-to-clipboard functionality, and detailed specifications is available in `assets/branding/index.html`. This gallery displays all logo variants, color palettes, typography samples, and scalability tests.
To view the gallery:
1. Open `assets/branding/index.html` in a web browser
2. Toggle between dark and light modes
3. Click color codes to copy to clipboard
4. View logos at different sizes and devices
---
## Version History
| Version | Date | Changes |
|---------|------|---------|
| 1.0 | 2025-12-22 | Initial brand guidelines consolidating logo systems, color palettes, typography, usage guidelines, integration examples, and practical implementation guidance |
---
## Questions & Support
For branding questions or asset requests, refer to:
- Interactive Asset Gallery: `assets/branding/index.html`
- Project Architecture: `docs/secretumvault-complete-architecture.md`
- Asset Gallery: Open in browser for dark/light mode toggles and copy-to-clipboard functionality
---
**SecretumVault** — Post-quantum cryptographic secrets management for modern infrastructure
Made with ❤️ • Built in Rust
