240 lines
8.9 KiB
Markdown
240 lines
8.9 KiB
Markdown
# 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.**
|