stratumiops/assets/branding/README.md

# StratumIOps Branding Assets

Complete branding system for StratumIOps - Intelligent Infrastructure Operations platform.

## Directory Structure

```text
branding/
├── README.md                              # This file
├── index.html                             # Quick reference showcase
└── stratumiops-assets-showcase.html       # Comprehensive assets catalog
```

## Quick Start

Open either HTML file in your browser to view the interactive branding showcase:

- **`index.html`** - Compact version with dark/light mode toggle
- **`stratumiops-assets-showcase.html`** - Full-featured showcase with navigation, statistics, comparison tables, and detailed guidelines

## Asset Categories

### Logo Variants (8 total)

All logos are available in the `../logos/` directory:

| Variant | Dimensions | Features | Use Case |
|---------|------------|----------|----------|
| `stratumiops-h.svg` | 1200×300px | Animated | Banners, headers |
| `stratumiops-v.svg` | 400×520px | Animated | Posters, vertical UI |
| `stratumiops-h-static.svg` | 1200×300px | Static bars | Print, documents |
| `stratumiops-v-static.svg` | 400×520px | Static bars | Print, documents |
| `stratumiops-dark-h.svg` | 1200×300px | Dark BG, glow | Dark mode UI |
| `stratumiops-dark-v.svg` | 400×520px | Dark BG, glow | Dark mode UI |

### Icon Variants (4 total)

All icons feature layered architecture with central processor design:

| Variant | Dimensions | Features | Use Case |
|---------|------------|----------|----------|
| `stratumiops-icon.svg` | 512×512px | Animated particles | App icons, UI |
| `stratumiops-icon-static.svg` | 512×512px | Static | Print, static UI |
| `stratumiops-icon-dark.svg` | 512×512px | Dark BG, particles | Dark mode apps |
| `stratumiops-icon-dark-static.svg` | 512×512px | Dark BG, static | Dark mode print |

### Monochrome Variants (4 total)

Black and white versions for print and accessibility:

| Variant | Dimensions | Use Case |
|---------|------------|----------|
| `stratumiops-mono-black-h.svg` | 1200×300px | Print, documents (light BG) |
| `stratumiops-mono-black-v.svg` | 400×520px | Print, documents (light BG) |
| `stratumiops-mono-white-h.svg` | 1200×300px | Dark backgrounds |
| `stratumiops-mono-white-v.svg` | 400×520px | Dark backgrounds |

### Social & Favicons (4 total)

Optimized for social platforms and browser tabs:

| Variant | Dimensions | Use Case |
|---------|------------|----------|
| `stratumiops-social-square-dark.svg` | 1080×1080px | Social profiles (dark) |
| `stratumiops-social-square-light.svg` | 1080×1080px | Social profiles (light) |
| `stratumiops-favicon-16.svg` | 16×16px | Browser tabs |
| `stratumiops-favicon-32.svg` | 32×32px | Browser tabs |

## Color Palette

Core brand colors with semantic meaning:

- **Primary Indigo** (`#6366F1`) - Main brand identity, primary actions
- **Secondary Indigo** (`#4F46E5`) - Gradients, depth, secondary elements
- **Cyan Accent** (`#22D3EE`) - Highlights, active states, energy
- **Cyan Dark** (`#06B6D4`) - Processor core, technical elements
- **Slate** (`#64748b`) - Secondary text, borders, subtle elements
- **Dark Background** (`#0F172A`) - Dark mode UI, backgrounds

## Usage Guidelines

### Logo Sizing

- Use horizontal variants for banners, headers, and wide layouts
- Use vertical variants for posters, splash screens, and tall layouts
- Maintain minimum 20px clear space around all logos
- Never distort, rotate, or modify the aspect ratio
- Prefer animated variants for digital applications with animation support

### Color Usage

- Primary Indigo (#6366F1) is the main brand color for all primary actions
- Cyan (#22D3EE) highlights active states and the central processor element
- Use gradients (Primary to Secondary Indigo, or Primary to Cyan) for visual depth
- Dark variants use enhanced glow effects for optimal dark mode visibility
- Monochrome variants ensure accessibility in all contexts

### Animations

- Animated variants include:
  - Flowing particle paths between layers
  - Pulsing equalizer bars in the central processor
  - Synchronized glow effects
- Use static variants for print, emails, or contexts without animation support
- Animations are preserved in SVG format and scale responsively

### Dark Mode

- Dark variants (`-dark-h`, `-dark-v`, `-icon-dark`) optimized for dark backgrounds
- Enhanced glow and lighter stroke weights for visibility
- Mono-white variants for pure black backgrounds
- Ensure WCAG AA contrast compliance in all implementations

### Digital Applications

- All assets are SVG format for infinite scalability
- Use favicon variants (16×16, 32×32) for browser tabs and bookmarks
- Social square variants (1080×1080) are optimized for profile pictures
- Icons (512×512) work for app icons, PWA icons, and large UI elements
- Export to PNG at 2x or 3x resolution for high-DPI displays when needed

### Print Production

- Use static variants for print materials to ensure consistent output
- Monochrome black variants work for single-color prints
- Test on actual materials before production
- Ensure minimum 1/4" clear space around all logos
- Export to high-resolution PDF or PNG (300 DPI minimum) when needed

### Social Media

- Use `stratumiops-social-square-dark.svg` for dark-themed profiles
- Use `stratumiops-social-square-light.svg` for light-themed profiles
- Horizontal variants work for banners and cover images
- Always export at 2x scale for retina/high-DPI displays
- Provide alt-text: "StratumIOps - Intelligent Infrastructure Operations"

### Accessibility

- All color combinations meet WCAG AA contrast standards
- Monochrome variants ensure colorblind accessibility
- Use descriptive alt-text for all logo images
- Animated variants do not flash or strobe (safe for photosensitivity)
- Dark/light variants provide optimal visibility in all contexts

## Asset Features

✨ **Interactive HTML Showcases**

- Dark/light mode toggle with localStorage persistence
- Responsive grid layouts for all screen sizes
- One-click filename copy to clipboard
- Sticky navigation with smooth scrolling (showcase version)
- Color palette visualization with HEX codes
- Comprehensive comparison tables

🎨 **SVG Animations**

- Flowing particle paths between infrastructure layers
- Pulsing equalizer bars in central processor
- Smooth glow effects on layers and I/O points
- Synchronized animations across all elements

📊 **Format & Scalability**

- All assets in SVG format
- Infinite scalability without quality loss
- Animations preserved across all sizes
- Print-ready static and monochrome variants
- Favicon variants optimized for browser rendering

## File Sizes

- Logo variants: ~4-6KB each (animated), ~3-4KB (static)
- Icon variants: ~3-5KB each (animated), ~2-3KB (static)
- Monochrome variants: ~2-3KB each
- Social/Favicon variants: ~1-3KB each
- HTML showcases: index.html (~18KB), showcase (~30KB)

## Technical Specifications

### SVG Features

- Linear gradients for depth and visual interest
- SMIL animations for particle flows and pulsing effects
- Optimized viewBox dimensions for each variant
- Clean, minimal markup for fast loading

### Design Elements

- **Layers**: Three horizontal bars representing infrastructure strata
- **Flows**: Curved paths showing data flow between layers
- **Processor**: Central rectangle with internal elements (equalizer bars)
- **I/O Points**: Circles marking input/output connections
- **Particles**: Animated circles flowing along connection paths

## Version Information

- **Last Updated:** 2026-01-22
- **Version:** 1.0
- **Format:** SVG + HTML5
- **Compatibility:** All modern browsers
- **Total Assets:** 18 (8 logos, 4 icons, 4 mono, 2 social, 2 favicons)

## Brand Identity

**StratumIOps** represents:

- 🏗️ Layered infrastructure architecture
- ⚡ Intelligent automation and operations
- 🔄 Data flows across system boundaries
- 🎛️ Central processing and orchestration
- 🌐 Modern, animated visual identity
- 🔧 DevOps, GitOps, and infrastructure as code

## Design Philosophy

The StratumIOps visual identity communicates:

1. **Layered Architecture**: Three horizontal bars represent infrastructure layers (compute, storage, network)
2. **Data Flow**: Curved connection paths show information flow between layers
3. **Central Processing**: The processor element represents orchestration and intelligence
4. **Technical Precision**: Clean lines, geometric shapes, and systematic organization
5. **Energy and Motion**: Animations convey active processing and continuous operation

## Related Assets

- Logo variants: `/assets/logos/stratumiops-*.svg`
- Icon variants: `/assets/logos/stratumiops-icon*.svg`
- Monochrome variants: `/assets/logos/stratumiops-mono-*.svg`
- Social/Favicon variants: `/assets/logos/stratumiops-social-*.svg`, `/assets/logos/stratumiops-favicon-*.svg`

## Contact & Updates

For asset requests, updates, or branding questions, refer to the StratumIOps project documentation.

---

**All assets in the StratumIOps branding system are optimized for scalability, accessibility, and brand consistency across digital and print media.**