Logo Variants
Animated and static brand identities
Icon Variants
Scalable icons with dynamic elements
Monochrome Variants
Black and white versions for print and accessibility
Scalability Test
Icon clarity at different sizes - from favicon to app icons
Color Palette
Core brand colors with semantic meaning
Typography
Font family, weights, and usage guidelines
#6366F1
Usage Guidelines
Best practices for brand consistency
📐 Logo Sizing
Use horizontal variants for banners and headers. Vertical variants work best for posters and vertical layouts. Maintain minimum 20px clear space around all logos. Never distort, rotate, or modify the aspect ratio.
🎨 Color Usage
Primary Indigo (#6366F1) is the main brand color. Cyan (#22D3EE) highlights active states and processor elements. Use gradients for visual depth. Dark variants use white elements for optimal dark mode visibility.
🔤 Typography
Use Inter font family from Google Fonts. Weight 800 for display/hero text, 700 for headings, 600 for subheadings, 400 for body text, and 500 for UI elements. Courier New monospace for code and filenames. Line height 1.3-1.7 for readability.
⚡ Animations
Animated variants include particle flows and pulsing equalizer bars. Use animated versions for digital applications with animation support. Static variants ensure compatibility with print and static contexts.
🌓 Dark Mode
Dark variants (-dark-h, -dark-v) are optimized for dark backgrounds with enhanced glow effects. Use mono-white variants for pure black backgrounds. Ensure WCAG AA contrast compliance.
📱 Digital Applications
All assets are SVG format for infinite scalability. Use favicon variants (16×16, 32×32) for browser tabs. Social square variants (1080×1080) are optimized for profile pictures and thumbnails.
🖨️ 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. Export to high-resolution PNG/PDF when needed.
♿ Accessibility
All color combinations meet WCAG AA standards. Monochrome variants ensure colorblind accessibility. Always provide alt-text: "StratumIOps - Intelligent Infrastructure Operations".
🔧 Technical Usage
SVG files preserve animations and are infinitely scalable. Icons use 512×512 base dimensions for optimal rendering at all sizes. Favicons are pre-optimized for browser rendering.
Variant Comparison
Complete overview of all 18 asset variations
| Category | Variant | Dimensions | Features | Best For | Filename |
|---|---|---|---|---|---|
| Logos | Horizontal | 1200×300px | Animated | Banners, headers | stratumiops-h.svg |
| Vertical | 400×520px | Animated | Posters, vertical UI | stratumiops-v.svg |
|
| Horizontal Static | 1200×300px | Static bars | Print, documents | stratumiops-h-static.svg |
|
| Vertical Static | 400×520px | Static bars | Print, documents | stratumiops-v-static.svg |
|
| Dark Horizontal | 1200×300px | Dark BG, glow | Dark mode UI | stratumiops-dark-h.svg |
|
| Dark Vertical | 400×520px | Dark BG, glow | Dark mode UI | stratumiops-dark-v.svg |
|
| Icons | Main Icon | 512×512px | Animated particles | App icons, UI | stratumiops-icon.svg |
| Static Icon | 512×512px | Static | Print, static UI | stratumiops-icon-static.svg |
|
| Dark Icon | 512×512px | Dark BG, particles | Dark mode apps | stratumiops-icon-dark.svg |
|
| Dark Static Icon | 512×512px | Dark BG, static | Dark mode print | stratumiops-icon-dark-static.svg |
|
| Monochrome | Black Horizontal | 1200×300px | Black only | Print, docs | stratumiops-mono-black-h.svg |
| Black Vertical | 400×520px | Black only | Print, docs | stratumiops-mono-black-v.svg |
|
| White Horizontal | 1200×300px | White only | Dark backgrounds | stratumiops-mono-white-h.svg |
|
| White Vertical | 400×520px | White only | Dark backgrounds | stratumiops-mono-white-v.svg |
|
| Social | Social Square Dark | 1080×1080px | Dark background | Social profiles | stratumiops-social-square-dark.svg |
| Social Square Light | 1080×1080px | Light background | Social profiles | stratumiops-social-square-light.svg |
|
| Favicon 16 | 16×16px | Simplified | Browser tabs | stratumiops-favicon-16.svg |
|
| Favicon 32 | 32×32px | Simplified | Browser tabs | stratumiops-favicon-32.svg |
Social Media Assets
Optimized for social platforms and favicons