SecretumVault — Branding Assets Showcase

🎨 Logo Variations

Full Logo (Static)

secretumvault-logo.svg

Standard full logo. Best for dark backgrounds.

Min: 120px

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

32px

48px

64px

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

Quantum Deep

#0A1929

Primary backgrounds, depth

Quantum Blue

#1A2744

Secondary surfaces

Quantum Cyan

#00D9FF

Accents, interactive

Vault Gold

#FFD700

Premium, security

Secondary Colors

Quantum Violet

#8B5CF6

Gradients, quantum

Rust Orange

#CE412B

Rust references, CTAs

Vault Silver

#C0C0C0

Text on dark

📖 Usage Examples

Web Header

Horizontal Logo

Perfect for website headers and navigation. Minimum width: 240px.

Icon in Navigation

Use 32px-48px sizes for UI navigation. Scale maintains clarity.

Favicon

Optimized for browser tabs. Use 16px or 32px variants.

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.