chore: imgs logos and branding
This commit is contained in:
Jesús Pérez
parent
4ad131e2ad
commit
56a5a21aa9
GPG Key ID:
9F243E355E0BC939
@ -4,7 +4,7 @@
|
|||||||
<img src="imgs/secretumvault-logo-h.svg" alt="SecretumVault Logo" width="600" />
|
<img src="imgs/secretumvault-logo-h.svg" alt="SecretumVault Logo" width="600" />
|
||||||
</div>
|
</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.
|
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.
|
||||||
|
|
||||||
|
|||||||
462
docs/BRAND-GUIDELINES.md
Normal file
462
docs/BRAND-GUIDELINES.md
Normal file
@ -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
|
||||||
462
imgs/BRAND-GUIDELINES.md
Normal file
462
imgs/BRAND-GUIDELINES.md
Normal file
@ -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
|
||||||
57
imgs/README.md
Normal file
57
imgs/README.md
Normal file
@ -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.
|
||||||
32
imgs/favicon.svg
Normal file
32
imgs/favicon.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
1590
imgs/index.html
Normal file
1590
imgs/index.html
Normal file
File diff suppressed because it is too large
Load Diff
71
imgs/logo.svg
Normal file
71
imgs/logo.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
1869
imgs/secretumvault-assets-showcase.html
Normal file
1869
imgs/secretumvault-assets-showcase.html
Normal file
File diff suppressed because it is too large
Load Diff
1953
imgs/secretumvault-assets-showcase.html.backup
Normal file
1953
imgs/secretumvault-assets-showcase.html.backup
Normal file
File diff suppressed because it is too large
Load Diff
34
imgs/secretumvault-icon-bn.svg
Normal file
34
imgs/secretumvault-icon-bn.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
50
imgs/secretumvault-icon-s.svg
Normal file
50
imgs/secretumvault-icon-s.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
67
imgs/secretumvault-icon.svg
Normal file
67
imgs/secretumvault-icon.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
40
imgs/secretumvault-logo-bn.svg
Normal file
40
imgs/secretumvault-logo-bn.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
56
imgs/secretumvault-logo-h-s.svg
Normal file
56
imgs/secretumvault-logo-h-s.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -33,6 +33,12 @@
|
|||||||
<circle cx="100" cy="91" 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"/>
|
<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 -->
|
<!-- Connection lines -->
|
||||||
<path d="M100 59.8 L100 39 M105.2 65 L126 65 M100 70.2 L100 91 M94.8 65 L74 65"
|
<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"/>
|
stroke="#00d9ff" stroke-width="0.65" opacity="0.5"/>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.5 KiB |
63
imgs/secretumvault-quantum-vault.svg
Normal file
63
imgs/secretumvault-quantum-vault.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
8
imgs/secretumvault_ascii.txt
Normal file
8
imgs/secretumvault_ascii.txt
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
╔═╗┌─┐┌─┐┬─┐┌─┐┌┬┐┬ ┬┌┬┐╦ ╦┌─┐┬ ┬┬ ┌┬┐
|
||||||
|
╚═╗├┤ │ ├┬┘├┤ │ │ ││││╚╗╔╝├─┤│ ││ │
|
||||||
|
╚═╝└─┘└─┘┴└─└─┘ ┴ └─┘┴ ┴ ╚╝ ┴ ┴└─┘┴─┘ ┴
|
||||||
|
╔══════════════════════════════════════╗
|
||||||
|
║ Post-quantum cryptographic secrets ║
|
||||||
|
║ vault for modern infrastructures ║
|
||||||
|
║ secretumvault.dev ║
|
||||||
|
╚══════════════════════════════════════╝
|
||||||
Loading…
x
Reference in New Issue
Block a user