chore: imgs logos and branding

2025-12-23 00:02:41 +00:00 · 2025-12-23 00:02:41 +00:00 · 56a5a21aa9
commit 56a5a21aa9
parent 4ad131e2ad
17 changed files with 6821 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -4,7 +4,7 @@
  <img src="imgs/secretumvault-logo-h.svg" alt="SecretumVault Logo" width="600" />
 </div>

-**Post-quantum cryptographic secrets management system for modern cloud infrastructure**
+**Post-quantum cryptographic secrets vault for modern infrastructure**

 SecretumVault is a Rust-native secrets vault combining post-quantum cryptography (ML-KEM-768, ML-DSA-65) with classical crypto, multiple secrets engines, cedar-based policy authorization, and flexible storage backends.

--- a/docs/BRAND-GUIDELINES.md
+++ b/docs/BRAND-GUIDELINES.md
@ -0,0 +1,462 @@
+<div style="text-align: center; margin: 40px 0;">
+    <img src="../imgs/secretumvault-logo.svg" alt="SecretumVault Logo" width="280" height="280" style="max-width: 100%; height: auto;">
+</div>
+
+# 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
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
+```
+
+#### CSS Usage
+
+```css
+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"` or `alt="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"` or `alt="image"`
+
+---
+
+## Integration Examples
+
+### Web Header
+
+```html
+<header>
+    <img src="/imgs/secretumvault-logo-h.svg"
+         alt="SecretumVault"
+         width="240" height="72">
+</header>
+```
+
+### Favicon
+
+```html
+<link rel="icon" type="image/svg+xml" href="/imgs/secretumvault-icon.svg">
+```
+
+### Documentation Header
+
+```html
+<div style="background: #0A1929; padding: 2rem;">
+    <img src="/imgs/secretumvault-logo.svg"
+         alt="SecretumVault"
+         width="200" height="280">
+</div>
+```
+
+### UI Navigation
+
+```html
+<nav>
+    <img src="/imgs/secretumvault-icon.svg"
+         alt="SecretumVault"
+         width="32" height="32">
+</nav>
+```
+
+### Hero Section (Animated)
+
+```html
+<div style="background: #0A1929; text-align: center; padding: 4rem 2rem;">
+    <img src="/imgs/secretumvault-logo.svg"
+         alt="SecretumVault Logo"
+         width="280" height="280">
+</div>
+```
+
+### Static Background with Logo
+
+```html
+<section style="background: #FFFFFF; padding: 3rem;">
+    <img src="/imgs/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 |
+|----------|--------|------------------|--------------|
+| 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/
+├── imgs/
+│   ├── 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 `imgs/index.html`. This gallery displays all logo variants, color palettes, typography samples, and scalability tests.
+
+To view the gallery:
+1. Open `imgs/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: `imgs/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
--- a/imgs/BRAND-GUIDELINES.md
+++ b/imgs/BRAND-GUIDELINES.md
@ -0,0 +1,462 @@
+<div style="text-align: center; margin: 40px 0;">
+    <img src="secretumvault-logo.svg" alt="SecretumVault Logo" width="280" height="280" style="max-width: 100%; height: auto;">
+</div>
+
+# 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
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
+```
+
+#### CSS Usage
+
+```css
+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"` or `alt="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"` or `alt="image"`
+
+---
+
+## Integration Examples
+
+### Web Header
+
+```html
+<header>
+    <img src="/imgs/secretumvault-logo-h.svg"
+         alt="SecretumVault"
+         width="240" height="72">
+</header>
+```
+
+### Favicon
+
+```html
+<link rel="icon" type="image/svg+xml" href="/imgs/secretumvault-icon.svg">
+```
+
+### Documentation Header
+
+```html
+<div style="background: #0A1929; padding: 2rem;">
+    <img src="/imgs/secretumvault-logo.svg"
+         alt="SecretumVault"
+         width="200" height="280">
+</div>
+```
+
+### UI Navigation
+
+```html
+<nav>
+    <img src="/imgs/secretumvault-icon.svg"
+         alt="SecretumVault"
+         width="32" height="32">
+</nav>
+```
+
+### Hero Section (Animated)
+
+```html
+<div style="background: #0A1929; text-align: center; padding: 4rem 2rem;">
+    <img src="/imgs/secretumvault-logo.svg"
+         alt="SecretumVault Logo"
+         width="280" height="280">
+</div>
+```
+
+### Static Background with Logo
+
+```html
+<section style="background: #FFFFFF; padding: 3rem;">
+    <img src="/imgs/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 |
+|----------|--------|------------------|--------------|
+| 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/
+├── imgs/
+│   ├── 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 `imgs/index.html`. This gallery displays all logo variants, color palettes, typography samples, and scalability tests.
+
+To view the gallery:
+1. Open `imgs/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: `imgs/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
--- a/imgs/README.md
+++ b/imgs/README.md
@ -0,0 +1,57 @@
+# SecretumVault Branding Assets
+
+This directory contains all visual branding assets for SecretumVault, including logos, icons, and brand guidelines.
+
+## Asset Structure
+
+### Logo Variations
+
+| File | Usage | Background |
+|------|-------|-----------|
+| `secretumvault-quantum-vault.svg` | Original animated logo | Any (animated) |
+| `secretumvault-logo.svg` | Full logo (static) | Dark/Deep (#0A1929, #1A2744) |
+| `secretumvault-logo-s.svg` | Simplified logo | Light backgrounds |
+| `secretumvault-logo-bn.svg` | Logo for dark backgrounds | Dark/Black backgrounds |
+| `secretumvault-logo-h.svg` | Horizontal logo with text | Hero sections, headers |
+
+### Icons
+
+| File | Usage | Size |
+|------|-------|------|
+| `secretumvault-icon.svg` | Standard vault icon | 32px+ |
+| `secretumvault-icon-s.svg` | Simplified vault icon | 16px+ |
+| `favicon.svg` | Website favicon | 16px, 32px |
+
+## Naming Convention
+
+Asset naming follows this pattern:
+```
+secretumvault-[variant]-[style].svg
+```
+
+- **Variant**: logo, icon
+- **Style**: h (horizontal), s (simplified/silver), bn (black/night)
+- No suffix: standard/full version
+
+## Color Palette
+
+| Name | Hex | Usage |
+|------|-----|-------|
+| Quantum Deep | #0A1929 | Primary backgrounds |
+| Quantum Blue | #1A2744 | Secondary surfaces |
+| Quantum Cyan | #00D9FF | Accent, interactive elements |
+| Vault Gold | #FFD700 | Premium elements, security icons |
+| Quantum Violet | #8B5CF6 | Quantum gradients |
+
+## Documentation
+
+- **BRAND-GUIDELINES.md** — Complete brand identity standards and usage rules
+- **how-to-use.md** — Practical guide to using assets in projects
+
+## Font
+
+**Space Grotesk** — Modern sans-serif used for text elements (not included, install separately)
+
+## License
+
+These assets are part of SecretumVault project documentation. Use according to project licensing terms.
--- a/imgs/favicon.svg
+++ b/imgs/favicon.svg
@ -0,0 +1,32 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="faviconGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#1a2744"/>
+            <stop offset="100%" style="stop-color:#0a1929"/>
+        </linearGradient>
+        <linearGradient id="faviconGold" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#ffd700"/>
+            <stop offset="100%" style="stop-color:#b8860b"/>
+        </linearGradient>
+    </defs>
+
+    <!-- Background -->
+    <rect width="32" height="32" fill="#0a1929"/>
+
+    <!-- Vault circle -->
+    <circle cx="16" cy="16" r="14" fill="none" stroke="url(#faviconGrad)" stroke-width="1.5"/>
+    <circle cx="16" cy="16" r="11" fill="url(#faviconGrad)" stroke="#2a3f6a" stroke-width="1"/>
+
+    <!-- Core -->
+    <circle cx="16" cy="16" r="2" fill="#00d9ff"/>
+
+    <!-- Electrons -->
+    <circle cx="16" cy="10" r="1" fill="#00d9ff"/>
+    <circle cx="22" cy="16" r="1" fill="#00d9ff"/>
+    <circle cx="16" cy="22" r="1" fill="#00d9ff"/>
+    <circle cx="10" cy="16" r="1" fill="#00d9ff"/>
+
+    <!-- Lock -->
+    <rect x="15" y="12" width="2" height="8" rx="1" fill="url(#faviconGold)"/>
+    <circle cx="16" cy="16" r="4" fill="none" stroke="url(#faviconGold)" stroke-width="0.8"/>
+</svg>
--- a/imgs/index.html
+++ b/imgs/index.html
--- a/imgs/logo.svg
+++ b/imgs/logo.svg
@ -0,0 +1,71 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="vaultGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#1a2744"/>
+            <stop offset="50%" style="stop-color:#2a3f6a"/>
+            <stop offset="100%" style="stop-color:#0a1929"/>
+        </linearGradient>
+        <linearGradient id="goldAccent" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#ffd700"/>
+            <stop offset="100%" style="stop-color:#b8860b"/>
+        </linearGradient>
+        <linearGradient id="cyanGlow" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#00d9ff"/>
+            <stop offset="100%" style="stop-color:#0099cc"/>
+        </linearGradient>
+        <filter id="glow">
+            <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+            <feMerge>
+                <feMergeNode in="coloredBlur"/>
+                <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+        </filter>
+    </defs>
+    
+    <!-- Outer vault ring -->
+    <circle cx="100" cy="100" r="85" fill="none" stroke="url(#vaultGrad)" stroke-width="8"/>
+    <circle cx="100" cy="100" r="85" fill="none" stroke="url(#cyanGlow)" stroke-width="1" stroke-dasharray="8 12" opacity="0.6">
+        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="20s" repeatCount="indefinite"/>
+    </circle>
+    
+    <!-- Inner vault door -->
+    <circle cx="100" cy="100" r="65" fill="url(#vaultGrad)" stroke="#2a3f6a" stroke-width="3"/>
+    
+    <!-- Quantum lattice pattern -->
+    <g filter="url(#glow)" opacity="0.8">
+        <!-- Central node -->
+        <circle cx="100" cy="100" r="8" fill="url(#cyanGlow)">
+            <animate attributeName="r" values="8;10;8" dur="2s" repeatCount="indefinite"/>
+        </circle>
+        
+        <!-- Orbital electrons -->
+        <g>
+            <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="8s" repeatCount="indefinite"/>
+            <circle cx="100" cy="60" r="4" fill="#00d9ff"/>
+            <circle cx="140" cy="100" r="4" fill="#00d9ff"/>
+            <circle cx="100" cy="140" r="4" fill="#00d9ff"/>
+            <circle cx="60" cy="100" r="4" fill="#00d9ff"/>
+        </g>
+        
+        <!-- Secondary orbit -->
+        <g>
+            <animateTransform attributeName="transform" type="rotate" from="360 100 100" to="0 100 100" dur="12s" repeatCount="indefinite"/>
+            <circle cx="128" cy="72" r="3" fill="#8b5cf6"/>
+            <circle cx="128" cy="128" r="3" fill="#8b5cf6"/>
+            <circle cx="72" cy="128" r="3" fill="#8b5cf6"/>
+            <circle cx="72" cy="72" r="3" fill="#8b5cf6"/>
+        </g>
+        
+        <!-- Connection lines -->
+        <path d="M100 92 L100 60 M108 100 L140 100 M100 108 L100 140 M92 100 L60 100" 
+              stroke="#00d9ff" stroke-width="1" opacity="0.5"/>
+    </g>
+    
+    <!-- Vault handle -->
+    <rect x="97" y="80" width="6" height="40" rx="5" fill="url(#goldAccent)"/>
+    <circle cx="100" cy="100" r="20" fill="none" stroke="url(#goldAccent)" stroke-width="4"/>
+    
+    <!-- S letter stylized -->
+    <text x="100" y="108" font-family="Georgia, serif" font-size="0" font-weight="600" 
+          fill="url(#goldAccent)" text-anchor="middle">S</text>
+</svg>
--- a/imgs/secretumvault-assets-showcase.html
+++ b/imgs/secretumvault-assets-showcase.html
--- a/imgs/secretumvault-assets-showcase.html.backup
+++ b/imgs/secretumvault-assets-showcase.html.backup
--- a/imgs/secretumvault-icon-bn.svg
+++ b/imgs/secretumvault-icon-bn.svg
@ -0,0 +1,34 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="vaultGrad_icon_bn" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#ffffff"/>
+            <stop offset="50%" style="stop-color:#e6e6e6"/>
+            <stop offset="100%" style="stop-color:#cccccc"/>
+        </linearGradient>
+        <linearGradient id="goldAccent_icon_bn" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#c0a000"/>
+            <stop offset="100%" style="stop-color:#8b6914"/>
+        </linearGradient>
+        <linearGradient id="cyanGlow_icon_bn" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#0088aa"/>
+            <stop offset="100%" style="stop-color:#005577"/>
+        </linearGradient>
+    </defs>
+
+    <!-- Outer ring -->
+    <circle cx="100" cy="100" r="95" fill="none" stroke="url(#vaultGrad_icon_bn)" stroke-width="6"/>
+
+    <!-- Inner door -->
+    <circle cx="100" cy="100" r="75" fill="url(#vaultGrad_icon_bn)" stroke="#b3b3b3" stroke-width="2.5"/>
+
+    <!-- Core elements -->
+    <circle cx="100" cy="100" r="10" fill="url(#cyanGlow_icon_bn)"/>
+    <circle cx="100" cy="65" r="5" fill="#0088aa"/>
+    <circle cx="135" cy="100" r="5" fill="#0088aa"/>
+    <circle cx="100" cy="135" r="5" fill="#0088aa"/>
+    <circle cx="65" cy="100" r="5" fill="#0088aa"/>
+
+    <!-- Vault mechanism -->
+    <rect x="97" y="75" width="6" height="50" rx="3" fill="url(#goldAccent_icon_bn)"/>
+    <circle cx="100" cy="100" r="25" fill="none" stroke="url(#goldAccent_icon_bn)" stroke-width="3"/>
+</svg>
--- a/imgs/secretumvault-icon-s.svg
+++ b/imgs/secretumvault-icon-s.svg
@ -0,0 +1,50 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="vaultGrad_s" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#1a2744"/>
+            <stop offset="50%" style="stop-color:#2a3f6a"/>
+            <stop offset="100%" style="stop-color:#0a1929"/>
+        </linearGradient>
+        <linearGradient id="goldAccent_s" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#ffd700"/>
+            <stop offset="100%" style="stop-color:#b8860b"/>
+        </linearGradient>
+        <linearGradient id="cyanGlow_s" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#00d9ff"/>
+            <stop offset="100%" style="stop-color:#0099cc"/>
+        </linearGradient>
+    </defs>
+
+    <!-- Outer vault ring -->
+    <circle cx="100" cy="100" r="55.25" fill="none" stroke="url(#vaultGrad_s)" stroke-width="5.2"/>
+    <circle cx="100" cy="100" r="55.25" fill="none" stroke="url(#cyanGlow_s)" stroke-width="0.65" stroke-dasharray="8 12" opacity="0.6"/>
+
+    <!-- Inner vault door -->
+    <circle cx="100" cy="100" r="42.25" fill="url(#vaultGrad_s)" stroke="#2a3f6a" stroke-width="1.95"/>
+
+    <!-- Quantum lattice pattern (static) -->
+    <g opacity="0.8">
+        <!-- Central node -->
+        <circle cx="100" cy="100" r="5.2" fill="url(#cyanGlow_s)"/>
+
+        <!-- Orbital electrons -->
+        <circle cx="100" cy="74" r="2.6" fill="#00d9ff"/>
+        <circle cx="126" cy="100" r="2.6" fill="#00d9ff"/>
+        <circle cx="100" cy="126" r="2.6" fill="#00d9ff"/>
+        <circle cx="74" cy="100" r="2.6" fill="#00d9ff"/>
+
+        <!-- Secondary orbit -->
+        <circle cx="120.7" cy="81.8" r="1.95" fill="#8b5cf6"/>
+        <circle cx="120.7" cy="118.2" r="1.95" fill="#8b5cf6"/>
+        <circle cx="79.3" cy="118.2" r="1.95" fill="#8b5cf6"/>
+        <circle cx="79.3" cy="81.8" r="1.95" fill="#8b5cf6"/>
+
+        <!-- Connection lines -->
+        <path d="M100 94.8 L100 74 M105.2 100 L126 100 M100 105.2 L100 126 M94.8 100 L74 100"
+              stroke="#00d9ff" stroke-width="0.65" opacity="0.5"/>
+    </g>
+
+    <!-- Vault handle -->
+    <rect x="98.1" y="87" width="3.9" height="26" rx="3.25" fill="url(#goldAccent_s)"/>
+    <circle cx="100" cy="100" r="13" fill="none" stroke="url(#goldAccent_s)" stroke-width="2.6"/>
+</svg>
--- a/imgs/secretumvault-icon.svg
+++ b/imgs/secretumvault-icon.svg
@ -0,0 +1,67 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="vaultGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#1a2744"/>
+            <stop offset="50%" style="stop-color:#2a3f6a"/>
+            <stop offset="100%" style="stop-color:#0a1929"/>
+        </linearGradient>
+        <linearGradient id="goldAccent" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#ffd700"/>
+            <stop offset="100%" style="stop-color:#b8860b"/>
+        </linearGradient>
+        <linearGradient id="cyanGlow" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#00d9ff"/>
+            <stop offset="100%" style="stop-color:#0099cc"/>
+        </linearGradient>
+        <filter id="glow">
+            <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+            <feMerge>
+                <feMergeNode in="coloredBlur"/>
+                <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+        </filter>
+    </defs>
+
+    <!-- Outer vault ring -->
+    <circle cx="100" cy="100" r="55.25" fill="none" stroke="url(#vaultGrad)" stroke-width="5.2"/>
+    <circle cx="100" cy="100" r="55.25" fill="none" stroke="url(#cyanGlow)" stroke-width="0.65" stroke-dasharray="8 12" opacity="0.6">
+        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="20s" repeatCount="indefinite"/>
+    </circle>
+
+    <!-- Inner vault door -->
+    <circle cx="100" cy="100" r="42.25" fill="url(#vaultGrad)" stroke="#2a3f6a" stroke-width="1.95"/>
+
+    <!-- Quantum lattice pattern -->
+    <g filter="url(#glow)" opacity="0.8">
+        <!-- Central node -->
+        <circle cx="100" cy="100" r="5.2" fill="url(#cyanGlow)">
+            <animate attributeName="r" values="5.2;6.5;5.2" dur="2s" repeatCount="indefinite"/>
+        </circle>
+
+        <!-- Orbital electrons -->
+        <g>
+            <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="8s" repeatCount="indefinite"/>
+            <circle cx="100" cy="74" r="2.6" fill="#00d9ff"/>
+            <circle cx="126" cy="100" r="2.6" fill="#00d9ff"/>
+            <circle cx="100" cy="126" r="2.6" fill="#00d9ff"/>
+            <circle cx="74" cy="100" r="2.6" fill="#00d9ff"/>
+        </g>
+
+        <!-- Secondary orbit -->
+        <g>
+            <animateTransform attributeName="transform" type="rotate" from="360 100 100" to="0 100 100" dur="12s" repeatCount="indefinite"/>
+            <circle cx="120.7" cy="81.8" r="1.95" fill="#8b5cf6"/>
+            <circle cx="120.7" cy="118.2" r="1.95" fill="#8b5cf6"/>
+            <circle cx="79.3" cy="118.2" r="1.95" fill="#8b5cf6"/>
+            <circle cx="79.3" cy="81.8" r="1.95" fill="#8b5cf6"/>
+        </g>
+
+        <!-- Connection lines -->
+        <path d="M100 94.8 L100 74 M105.2 100 L126 100 M100 105.2 L100 126 M94.8 100 L74 100"
+              stroke="#00d9ff" stroke-width="0.65" opacity="0.5"/>
+    </g>
+
+    <!-- Vault handle -->
+    <rect x="98.1" y="87" width="3.9" height="26" rx="3.25" fill="url(#goldAccent)"/>
+    <circle cx="100" cy="100" r="13" fill="none" stroke="url(#goldAccent)" stroke-width="2.6"/>
+</svg>
--- a/imgs/secretumvault-logo-bn.svg
+++ b/imgs/secretumvault-logo-bn.svg
@ -0,0 +1,40 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="vaultGrad_bn" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#ffffff"/>
+            <stop offset="50%" style="stop-color:#e6e6e6"/>
+            <stop offset="100%" style="stop-color:#cccccc"/>
+        </linearGradient>
+        <linearGradient id="goldAccent_bn" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#c0a000"/>
+            <stop offset="100%" style="stop-color:#8b6914"/>
+        </linearGradient>
+        <linearGradient id="cyanGlow_bn" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#0088aa"/>
+            <stop offset="100%" style="stop-color:#005577"/>
+        </linearGradient>
+    </defs>
+
+    <!-- Outer vault ring -->
+    <circle cx="100" cy="100" r="85" fill="none" stroke="url(#vaultGrad_bn)" stroke-width="8"/>
+
+    <!-- Inner vault door -->
+    <circle cx="100" cy="100" r="65" fill="url(#vaultGrad_bn)" stroke="#b3b3b3" stroke-width="3"/>
+
+    <!-- Quantum elements -->
+    <circle cx="100" cy="100" r="8" fill="url(#cyanGlow_bn)"/>
+    <circle cx="100" cy="60" r="4" fill="#0088aa"/>
+    <circle cx="140" cy="100" r="4" fill="#0088aa"/>
+    <circle cx="100" cy="140" r="4" fill="#0088aa"/>
+    <circle cx="60" cy="100" r="4" fill="#0088aa"/>
+
+    <!-- Secondary orbit -->
+    <circle cx="128" cy="72" r="3" fill="#6b4fa0"/>
+    <circle cx="128" cy="128" r="3" fill="#6b4fa0"/>
+    <circle cx="72" cy="128" r="3" fill="#6b4fa0"/>
+    <circle cx="72" cy="72" r="3" fill="#6b4fa0"/>
+
+    <!-- Vault handle -->
+    <rect x="97" y="80" width="6" height="40" rx="5" fill="url(#goldAccent_bn)"/>
+    <circle cx="100" cy="100" r="20" fill="none" stroke="url(#goldAccent_bn)" stroke-width="4"/>
+</svg>
--- a/imgs/secretumvault-logo-h-s.svg
+++ b/imgs/secretumvault-logo-h-s.svg
@ -0,0 +1,56 @@
+<svg viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="vaultGrad_hs" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#1a2744"/>
+            <stop offset="50%" style="stop-color:#2a3f6a"/>
+            <stop offset="100%" style="stop-color:#0a1929"/>
+        </linearGradient>
+        <linearGradient id="goldAccent_hs" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#ffd700"/>
+            <stop offset="100%" style="stop-color:#b8860b"/>
+        </linearGradient>
+        <linearGradient id="cyanGlow_hs" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#00d9ff"/>
+            <stop offset="100%" style="stop-color:#0099cc"/>
+        </linearGradient>
+        <filter id="glow_hs">
+            <feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
+            <feMerge>
+                <feMergeNode in="coloredBlur"/>
+                <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+        </filter>
+    </defs>
+
+    <!-- Vault icon (left side) -->
+    <g>
+        <circle cx="60" cy="60" r="31.5" fill="none" stroke="url(#vaultGrad_hs)" stroke-width="3.5"/>
+        <circle cx="60" cy="60" r="31.5" fill="none" stroke="url(#cyanGlow_hs)" stroke-width="0.5" stroke-dasharray="5 7" opacity="0.6"/>
+        <circle cx="60" cy="60" r="24.5" fill="url(#vaultGrad_hs)" stroke="#2a3f6a" stroke-width="1.4"/>
+
+        <g filter="url(#glow_hs)" opacity="0.8">
+            <circle cx="60" cy="60" r="3.5" fill="url(#cyanGlow_hs)"/>
+            <g>
+                <circle cx="60" cy="42.6" r="1.75" fill="#00d9ff"/>
+                <circle cx="77.4" cy="60" r="1.75" fill="#00d9ff"/>
+                <circle cx="60" cy="77.4" r="1.75" fill="#00d9ff"/>
+                <circle cx="42.6" cy="60" r="1.75" fill="#00d9ff"/>
+            </g>
+            <g>
+                <circle cx="73" cy="49" r="1.2" fill="#8b5cf6"/>
+                <circle cx="73" cy="71" r="1.2" fill="#8b5cf6"/>
+                <circle cx="47" cy="71" r="1.2" fill="#8b5cf6"/>
+                <circle cx="47" cy="49" r="1.2" fill="#8b5cf6"/>
+            </g>
+        </g>
+
+        <rect x="59" y="51" width="2.8" height="16.8" rx="1.4" fill="url(#goldAccent_hs)"/>
+        <circle cx="60" cy="60" r="9.1" fill="none" stroke="url(#goldAccent_hs)" stroke-width="1.75"/>
+    </g>
+
+    <!-- Text: SecretumVault -->
+    <text x="105" y="72" font-family="'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif" font-size="32" font-weight="700" fill="#00D9FF">SecretumVault</text>
+
+    <!-- Quantum accent line -->
+    <line x1="105" y1="82" x2="380" y2="82" stroke="url(#cyanGlow_hs)" stroke-width="2"/>
+</svg>
--- a/imgs/secretumvault-logo-s.svg
+++ b/imgs/secretumvault-logo-s.svg
@ -33,6 +33,12 @@
        <circle cx="100" cy="91" r="2.6" fill="#00d9ff"/>
        <circle cx="74" cy="65" r="2.6" fill="#00d9ff"/>

+        <!-- Secondary orbit -->
+        <circle cx="120.7" cy="46.8" r="1.95" fill="#8b5cf6"/>
+        <circle cx="120.7" cy="83.2" r="1.95" fill="#8b5cf6"/>
+        <circle cx="79.3" cy="83.2" r="1.95" fill="#8b5cf6"/>
+        <circle cx="79.3" cy="46.8" r="1.95" fill="#8b5cf6"/>
+
        <!-- Connection lines -->
        <path d="M100 59.8 L100 39 M105.2 65 L126 65 M100 70.2 L100 91 M94.8 65 L74 65"
              stroke="#00d9ff" stroke-width="0.65" opacity="0.5"/>
--- a/imgs/secretumvault-quantum-vault.svg
+++ b/imgs/secretumvault-quantum-vault.svg
@ -0,0 +1,63 @@
+<svg viewBox="0 0 200 280" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="vaultGrad_q" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#1a2744"/>
+            <stop offset="50%" style="stop-color:#2a3f6a"/>
+            <stop offset="100%" style="stop-color:#0a1929"/>
+        </linearGradient>
+        <linearGradient id="goldAccent_q" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#ffd700"/>
+            <stop offset="100%" style="stop-color:#b8860b"/>
+        </linearGradient>
+        <linearGradient id="cyanGlow_q" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#00d9ff"/>
+            <stop offset="100%" style="stop-color:#0099cc"/>
+        </linearGradient>
+    </defs>
+
+    <!-- Outer vault ring -->
+    <circle cx="100" cy="65" r="55.25" fill="none" stroke="url(#vaultGrad_q)" stroke-width="5.2"/>
+    <circle cx="100" cy="65" r="55.25" fill="none" stroke="url(#cyanGlow_q)" stroke-width="0.65" stroke-dasharray="8 12" opacity="0.6">
+        <animateTransform attributeName="transform" type="rotate" from="0 100 65" to="360 100 65" dur="20s" repeatCount="indefinite"/>
+    </circle>
+
+    <!-- Inner vault door -->
+    <circle cx="100" cy="65" r="42.25" fill="url(#vaultGrad_q)" stroke="#2a3f6a" stroke-width="1.95"/>
+
+    <!-- Quantum lattice pattern (animated with full secondary orbit) -->
+    <g opacity="0.8">
+        <!-- Central node -->
+        <circle cx="100" cy="65" r="5.2" fill="url(#cyanGlow_q)">
+            <animate attributeName="r" values="5.2;6.5;5.2" dur="2s" repeatCount="indefinite"/>
+        </circle>
+
+        <!-- Orbital electrons -->
+        <g>
+            <animateTransform attributeName="transform" type="rotate" from="0 100 65" to="360 100 65" dur="8s" repeatCount="indefinite"/>
+            <circle cx="100" cy="39" r="2.6" fill="#00d9ff"/>
+            <circle cx="126" cy="65" r="2.6" fill="#00d9ff"/>
+            <circle cx="100" cy="91" r="2.6" fill="#00d9ff"/>
+            <circle cx="74" cy="65" r="2.6" fill="#00d9ff"/>
+        </g>
+
+        <!-- Secondary orbit -->
+        <g>
+            <animateTransform attributeName="transform" type="rotate" from="360 100 65" to="0 100 65" dur="12s" repeatCount="indefinite"/>
+            <circle cx="120.7" cy="46.8" r="1.95" fill="#8b5cf6"/>
+            <circle cx="120.7" cy="83.2" r="1.95" fill="#8b5cf6"/>
+            <circle cx="79.3" cy="83.2" r="1.95" fill="#8b5cf6"/>
+            <circle cx="79.3" cy="46.8" r="1.95" fill="#8b5cf6"/>
+        </g>
+
+        <!-- Connection lines -->
+        <path d="M100 59.8 L100 39 M105.2 65 L126 65 M100 70.2 L100 91 M94.8 65 L74 65"
+              stroke="#00d9ff" stroke-width="0.65" opacity="0.5"/>
+    </g>
+
+    <!-- Vault handle -->
+    <rect x="98.1" y="52" width="3.9" height="26" rx="3.25" fill="url(#goldAccent_q)"/>
+    <circle cx="100" cy="65" r="13" fill="none" stroke="url(#goldAccent_q)" stroke-width="2.6"/>
+
+    <!-- Text: SecretumVault -->
+    <text x="100" y="155" font-family="'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif" font-size="28" font-weight="700" fill="#00D9FF" text-anchor="middle">SecretumVault</text>
+</svg>
--- a/imgs/secretumvault_ascii.txt
+++ b/imgs/secretumvault_ascii.txt
@ -0,0 +1,8 @@
+╔═╗┌─┐┌─┐┬─┐┌─┐┌┬┐┬ ┬┌┬┐╦  ╦┌─┐┬ ┬┬  ┌┬┐
+╚═╗├┤ │  ├┬┘├┤  │ │ ││││╚╗╔╝├─┤│ ││   │
+╚═╝└─┘└─┘┴└─└─┘ ┴ └─┘┴ ┴ ╚╝ ┴ ┴└─┘┴─┘ ┴
+╔══════════════════════════════════════╗
+║  Post-quantum cryptographic secrets  ║
+║  vault for modern infrastructures    ║
+║           secretumvault.dev          ║
+╚══════════════════════════════════════╝