secretumvault/docs/BRAND-GUIDELINES.md

<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