14 KiB
14 KiB
SecretumVault Branding Guidelines
Overview
SecretumVault is a post-quantum cryptographic secrets management system designed for modern cloud infrastructure. The brand identity reflects security, innovation, and technical sophistication through a cohesive visual system combining vault imagery with quantum-inspired elements. This guide covers logo systems, color palettes, typography, usage guidelines, and practical integration examples.
Logo System
Available Logo Variants
SecretumVault provides multiple logo variants to accommodate different use cases and layouts:
| Variant | File | ViewBox | Best For | Features |
|---|---|---|---|---|
| Vertical Animated | secretumvault-logo.svg |
200×280 px | Hero sections, interactive displays | Rotating orbits, pulsing core |
| Vertical Static | secretumvault-logo-s.svg |
200×280 px | Print, documentation, static layouts | No animations, full color |
| Horizontal Animated | secretumvault-logo-h.svg |
400×120 px | Navigation bars, headers | Rotating orbits, space-efficient |
| Horizontal Static | secretumvault-logo-h-s.svg |
400×120 px | Print headers, static layouts | No animations, horizontal format |
| Animated Icon | secretumvault-icon.svg |
200×200 px | App icons, favicons, UI elements | Full animations, square format |
| Static Icon | secretumvault-icon-s.svg |
200×200 px | Favicon, print, badges | No animations, square format |
| B&W Logo | secretumvault-logo-bn.svg |
200×200 px | Print (grayscale), restricted color | Single color, monochrome |
| B&W Icon | secretumvault-icon-bn.svg |
200×200 px | Print, B&W documents | Single color, monochrome |
Logo Composition
The vault icon consists of:
- Outer Ring (Dashed): Cyan glow with rotating animation (20s cycle)
- Inner Circle: Gradient fill (deep vault → primary → secondary)
- Central Node: Quantum cyan core with pulsing effect (5.2px → 6.5px → 5.2px, 2s cycle)
- Orbital Electrons: Four cyan dots rotating around the core (8s clockwise)
- Secondary Orbit: Four purple dots at diagonal positions (12s counterclockwise)
- Vault Handle: Gold-accented bar and circular ring overlay
- Text: "SecretumVault" in Space Grotesk Bold, Quantum Cyan (#00D9FF)
Sizing & Clear Space
Minimum Sizes:
- Logo (full): 120px wide minimum
- Icon only: 32px minimum
- Favicon: 16px or 32px
Clear Space: Maintain clear space around the logo equal to half the logo height on all sides. For a 120px logo, maintain 60px clear space on all sides.
Icon System
Icon Scalability
Icons maintain clarity and recognizability across all sizes:
| Size | Use Case |
|---|---|
| 16px | Favicon, small UI elements |
| 24px | Toolbar icons, small badges |
| 32px | Standard app icons, navigation |
| 48px | Medium app icons, avatar sizes |
| 64px | Large app icons, decorative elements |
| 128px | Application splash screens |
| 256px | High-resolution favicons |
| 512px | Marketing, high-DPI displays |
When to Use Each Variant
Full Logo (secretumvault-logo.svg, secretumvault-logo-s.svg)
- Hero sections and landing pages
- Marketing materials and presentations
- Documentation headers
- Standalone brand applications
Horizontal Logo (secretumvault-logo-h.svg)
- Header/navbar branding
- Horizontal banner designs
- Social media headers
- Documentation breadcrumbs
- Minimum width: 240px
Icon Only (secretumvault-icon.svg, secretumvault-icon-s.svg)
- UI navigation and buttons
- Favicons and application icons
- Small badges and labels
- Quick reference elements
- Available at all standard icon sizes
Color Palette
Primary Colors
| Name | Hex | RGB | Use |
|---|---|---|---|
| Deep Vault | #0a1929 | rgb(10, 25, 41) | Background, dark areas |
| Primary | #1a2744 | rgb(26, 39, 68) | Main logo fill, primary UI |
| Secondary | #2a3f6a | rgb(42, 63, 106) | Secondary fills, gradients |
| Quantum Cyan | #00d9ff | rgb(0, 217, 255) | Accents, highlights, text |
Accent Colors
| Name | Hex | RGB | Use |
|---|---|---|---|
| Gold Accent | #ffd700 | rgb(255, 215, 0) | Vault handle, emphasis |
| Purple Accent | #8b5cf6 | rgb(139, 92, 246) | Secondary orbit, decorative |
Color Usage Guidelines
- Quantum Cyan (#00D9FF): Primary interactive elements, links, highlights
- Gold (#ffd700): Call-to-action buttons, important features
- Purple (#8b5cf6): Secondary information, decorative elements
- Primary Blue (#1a2744): Logo fill, main backgrounds
- Secondary Blue (#2a3f6a): Gradients, borders, secondary backgrounds
Background Compatibility
Dark Backgrounds ✅
- Quantum Deep: #0A1929
- Quantum Blue: #1A2744
- Black: #000000
Use: secretumvault-logo.svg, secretumvault-logo-bn.svg, or secretumvault-icon.svg
Light Backgrounds ✅
- White: #FFFFFF
- Off-white: #F5F5F5
- Light gray: #E8E8E8
Use: secretumvault-logo-s.svg or secretumvault-logo-bn.svg
Avoid ❌
- Patterned backgrounds
- Complex images
- Colors with insufficient contrast
Accessibility
- Maintain sufficient contrast for text (WCAG AA minimum 4.5:1 for regular text)
- Avoid color-only differentiation; use patterns or text labels
- Test color combinations with color-blind friendly tools
Typography
Primary Typeface: Space Grotesk
- Font Family: Space Grotesk
- Category: Sans Serif
- Weights: 400 (Regular), 600 (Semi-Bold), 700 (Bold)
- Source: Google Fonts
- License: Open Source (Open Font License)
Google Fonts Import
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
CSS Usage
font-family: 'Space Grotesk', sans-serif;
Typography Hierarchy
| Element | Font | Weight | Size | Use |
|---|---|---|---|---|
| Logo Text | Space Grotesk | 700 | 32-48px | Logo wordmark |
| Heading 1 | Space Grotesk | 700 | 3rem | Page titles |
| Heading 2 | Space Grotesk | 700 | 1.8rem | Section headers |
| Heading 3 | Space Grotesk | 600 | 1.2rem | Subsection headers |
| Body Text | System Sans | 400 | 1rem | Documentation, content |
| Code | Monospace | 400 | 0.85-0.9rem | Code blocks |
Logo Text Color
- Light Mode: #1A2744 (Deep Primary)
- Dark Mode: #00D9FF (Quantum Cyan)
Animation Guidelines
When to Use Animated Logos
- Hero sections with user attention
- Loading indicators
- Interactive UI elements
- Marketing videos
- Promotional materials
When to Use Static Logos
- Navigation bars
- Footers
- Print materials
- Emails
- Documents
- Favicons
- Small UI elements
Animated Logo Specifications
| Animation | Duration | Direction | Range/Loop |
|---|---|---|---|
| Outer Ring Rotation | 20s | Clockwise | 0° → 360°, infinite |
| Central Core Pulsing | 2s | - | 5.2px → 6.5px → 5.2px, infinite |
| Orbital Electrons | 8s | Clockwise | 360° rotation, infinite |
| Secondary Orbit | 12s | Counterclockwise | 360° rotation, infinite |
Usage Guidelines
DO ✓
- Use complete logos with proper text and icon
- Maintain clear space around logos (20px minimum)
- Use appropriate variant for the medium (animated for web, static for print)
- Scale logos proportionally
- Use provided SVG files for vector graphics
- Apply logos on contrasting backgrounds for visibility
- Use recommended color combinations
- Test logos across different screen sizes and devices
- Use descriptive alt text:
alt="SecretumVault logo"oralt="Vault security icon"
DON'T ✗
- Distort or skew the logo (non-proportional scaling)
- Change logo colors without explicit approval
- Add effects (shadows, glows) beyond original design
- Rotate logos at unusual angles
- Use logo on cluttered backgrounds
- Mix animated and static versions together
- Rasterize SVGs without maintaining resolution
- Remove or modify individual logo elements
- Use logo without adequate clear space
- Apply logos too small (below minimum size)
- Use vague alt text:
alt="logo.svg"oralt="image"
Integration Examples
Web Header
<header>
<img src="/assets/logos/secretumvault-logo-h.svg"
alt="SecretumVault"
width="240" height="72">
</header>
Favicon
<link rel="icon" type="image/svg+xml" href="/assets/icons/secretumvault-icon.svg">
Documentation Header
<div style="background: #0A1929; padding: 2rem;">
<img src="/assets/logos/secretumvault-logo.svg"
alt="SecretumVault"
width="200" height="280">
</div>
UI Navigation
<nav>
<img src="/assets/icons/secretumvault-icon.svg"
alt="SecretumVault"
width="32" height="32">
</nav>
Hero Section (Animated)
<div style="background: #0A1929; text-align: center; padding: 4rem 2rem;">
<img src="/assets/logos/secretumvault-logo.svg"
alt="SecretumVault Logo"
width="280" height="280">
</div>
Static Background with Logo
<section style="background: #FFFFFF; padding: 3rem;">
<img src="/assets/logos/secretumvault-logo-s.svg"
alt="SecretumVault"
width="200" height="280">
</section>
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 |
|---|---|---|---|
| Square | 400×400px | Icon or Vertical | |
| Square | 400×400px | Icon or Vertical | |
| GitHub | Square | 200×200px | Icon |
| 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
/* 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:
- Open
assets/branding/index.htmlin a web browser - Toggle between dark and light modes
- Click color codes to copy to clipboard
- 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