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

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

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:

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

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.

README.md Unescape Escape

StratumIOps Branding Assets

Directory Structure