StratumIOps: Branding Guide
1. Brand Identity
Name
| Element |
Value |
| Full name |
StratumIOps |
| Pronunciation |
"Stratum-I-Ops" |
| Abbreviation |
SIO (internal use) |
| Domain |
stratumiops.dev |
Meaning
STRATUMIOPS + I + Ops
│ │ │
│ │ └── Operations: automation, DevOps, workflows
│ │
│ └── Intelligence: AI, intelligent agents, decisions
│
└── Layers: architecture layers, full stack
Main Tagline
"Intelligent layers. Automated operations."
Alternative Taglines
| Context |
Tagline |
| Technical |
"Stack intelligence. Automate everything." |
| Flow |
"From knowledge to deployment. Automated." |
| Benefits |
"Build smarter. Deploy faster." |
| Enterprise |
"The full-stack operations platform." |
2. Logo
Concept
The logo represents:
- Three horizontal layers: Tiered architecture (Stratum)
- Bright central node: Intelligence connecting the layers (I)
- Connection lines: Data flow and operations (Ops)
Available Versions
| File |
Use |
stratumiops-logo.svg |
Primary, light background |
stratumiops-logo-dark.svg |
Dark background with background |
stratumiops-logo-minimal.svg |
Simplified version |
stratumiops-logo-monochrome.svg |
Single color |
stratumiops-logo-horizontal.svg |
With wordmark |
Logo Construction
┌────────────────────────────────────────────────────────┐
│ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ← Layer 1 │
│ │ │
│ │ ← Connection │
│ ▼ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓●▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ← Layer 2 + Node │
│ │ (cyan) │
│ │ ← Connection │
│ ▼ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ← Layer 3 │
│ │
└────────────────────────────────────────────────────────┘
Clear Space
┌─────────────────────────────────────┐
│ │
│ ┌─┬───────────────────────┬─┐ │
│ │ │ │ │ │
│ │ │ ═══════════════ │ │ │
│ │ │ ═══════●═══════ │ │ │
│ │X│ ═══════════════ │X│ │ X = node height
│ │ │ │ │ │
│ └─┴───────────────────────┴─┘ │
│ │
└─────────────────────────────────────┘
Minimum space around logo = 1X (central node height)
Minimum Sizes
| Context |
Minimum size |
| Digital (screen) |
32px height |
| Print |
12mm height |
| Favicon |
16x16px (use simplified version) |
3. Color Palette
Primary Colors
| Name |
Hex |
RGB |
Use |
| Indigo 500 |
#6366F1 |
99, 102, 241 |
Primary logo, primary CTAs |
| Indigo 600 |
#4F46E5 |
79, 70, 229 |
Hover states, dark variant |
| Indigo 400 |
#818CF8 |
129, 140, 248 |
Light backgrounds, highlights |
Secondary Colors (Accent)
| Name |
Hex |
RGB |
Use |
| Cyan 400 |
#22D3EE |
34, 211, 238 |
Intelligent node, accents |
| Cyan 500 |
#06B6D4 |
6, 182, 212 |
Highlights, icons |
| Cyan 300 |
#67E8F9 |
103, 232, 249 |
Glow effects |
Neutral Colors
| Name |
Hex |
RGB |
Use |
| Slate 900 |
#0F172A |
15, 23, 42 |
Primary text, dark backgrounds |
| Slate 700 |
#334155 |
51, 65, 85 |
Secondary text |
| Slate 400 |
#94A3B8 |
148, 163, 184 |
Tertiary text, placeholders |
| Slate 200 |
#E2E8F0 |
226, 232, 240 |
Borders, dividers |
| Slate 50 |
#F8FAFC |
248, 250, 252 |
Light backgrounds |
Semantic Colors
| Name |
Hex |
Use |
| Success |
#22C55E |
Confirmations, OK states |
| Warning |
#F59E0B |
Alerts, cautions |
| Error |
#EF4444 |
Errors, critical states |
| Info |
#3B82F6 |
Information, tooltips |
Gradients
/* Primary logo gradient */
.gradient-primary {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
}
/* Intelligent node gradient */
.gradient-node {
background: radial-gradient(circle, #22D3EE 0%, #06B6D4 100%);
}
/* Hero background gradient */
.gradient-hero {
background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
}
/* Accent gradient */
.gradient-accent {
background: linear-gradient(90deg, #6366F1 0%, #22D3EE 100%);
}
4. Typography
Primary Font: Inter
| Weight |
Use |
| Inter Bold (700) |
Headings, main titles |
| Inter SemiBold (600) |
Subtitles, emphasis |
| Inter Medium (500) |
Labels, navigation |
| Inter Regular (400) |
Body text |
Code Font: JetBrains Mono
| Weight |
Use |
| JetBrains Mono Regular |
Code, terminal, snippets |
| JetBrains Mono Bold |
Highlighted code |
Typographic Scale
| Name |
Size |
Line Height |
Use |
| Display |
48px / 3rem |
1.1 |
Hero headlines |
| H1 |
36px / 2.25rem |
1.2 |
Page titles |
| H2 |
30px / 1.875rem |
1.25 |
Main sections |
| H3 |
24px / 1.5rem |
1.3 |
Subsections |
| H4 |
20px / 1.25rem |
1.4 |
Cards, minor titles |
| Body Large |
18px / 1.125rem |
1.6 |
Lead text |
| Body |
16px / 1rem |
1.6 |
Main text |
| Body Small |
14px / 0.875rem |
1.5 |
Captions, metadata |
| Code |
14px / 0.875rem |
1.6 |
Inline code |
CSS Variables
:root {
/* Font families */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Font sizes */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
}
5. Iconography
Style
- Type: Outline icons (line, not filled)
- Stroke width: 1.5px - 2px
- Corner radius: Consistent with logo (rounded)
- Base size: 24x24px
- Recommended set: Lucide Icons, Heroicons (outline)
Product Icons
| Product |
Suggested Icon |
| StratumIOps/knowledge |
book-open + brain |
| StratumIOps/orchestrate |
workflow + bot |
| StratumIOps/interact |
form-input + terminal |
| StratumIOps/provision |
server + cloud |
6. UI Components
Buttons
/* Primary */
.btn-primary {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border-radius: 8px;
padding: 12px 24px;
font-weight: 600;
}
.btn-primary:hover {
background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
}
/* Secondary */
.btn-secondary {
background: transparent;
color: #6366F1;
border: 2px solid #6366F1;
border-radius: 8px;
}
/* Ghost */
.btn-ghost {
background: transparent;
color: #6366F1;
}
Cards
.card {
background: white;
border-radius: 12px;
border: 1px solid #E2E8F0;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-dark {
background: #1E293B;
border: 1px solid #334155;
}
Inputs
.input {
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 12px 16px;
font-size: 16px;
}
.input:focus {
border-color: #6366F1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
7. Applications
Website
┌─────────────────────────────────────────────────────────┐
│ [Logo] Products Pricing Docs Blog [Sign In] │
├─────────────────────────────────────────────────────────┤
│ │
│ StratumIOps │
│ │
│ Intelligent layers. │
│ Automated operations. │
│ │
│ [Get Started] [View Demo] │
│ │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │Knowledge│ │Orchestr.│ │ Interact│ │Provision│ │
│ │ ════ │ │ ════ │ │ ════ │ │ ════ │ │
│ │ ═●═ │ │ ═●═ │ │ ═●═ │ │ ═●═ │ │
│ │ ════ │ │ ════ │ │ ════ │ │ ════ │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
Documentation
- Background: Slate 50 (#F8FAFC)
- Sidebar: White with Slate 200 border
- Code blocks: Slate 900 with syntax highlighting
- Headers: Indigo 600
Presentations
- Dark template: Slate 900 background, white text
- Light template: White background, Slate 900 text
- Accent on all slides: Cyan for highlights
8. Incorrect Usage
Don't Do This
❌ Change logo colors
❌ Rotate the logo
❌ Add effects (shadows, extra outlines)
❌ Stretch or compress disproportionately
❌ Use on backgrounds that reduce contrast
❌ Separate the node from the layers
❌ Change wordmark typography
❌ Use full version when space is very small
Allowed Backgrounds
| Background |
Logo Version |
| White / Light |
Primary logo (colors) |
| Slate 900 / Black |
Dark version logo |
| Indigo (brand color) |
White monochromatic logo |
| Photographs |
Only if sufficient contrast |
9. Voice and Tone
Brand Personality
| Attribute |
Description |
| Intelligent |
We know the space, we speak with technical authority |
| Direct |
No beating around the bush, straight to the point |
| Accessible |
Technical but not intimidating |
| Reliable |
Enterprise-ready, serious, professional |
| Innovative |
Rust, Nickel, native AI - we're ahead |
Copy Examples
Yes:
- "Deploy infrastructure with type-safe confidence."
- "Your agents learn. Your costs drop."
- "Knowledge that your AI actually uses."
No:
- "Revolutionary AI-powered paradigm shift!" (hype)
- "Super easy to use!" (vague)
- "The best platform ever!" (empty superlatives)
10. Digital Assets
Logo Files
.coder/
├── 2026-01-22-stratumiops-logo.svg # Primary
├── 2026-01-22-stratumiops-logo-dark.svg # Dark background
├── 2026-01-22-stratumiops-logo-minimal.svg # Simplified
├── 2026-01-22-stratumiops-logo-monochrome.svg # Single color
└── 2026-01-22-stratumiops-logo-horizontal.svg # With wordmark
Required Exports
/brand/
├── logo/
│ ├── svg/ # All SVGs
│ ├── png/ # 64, 128, 256, 512, 1024px
│ ├── favicon/ # ico, png 16/32/48
│ └── social/ # Open Graph, Twitter cards
├── colors/
│ └── palette.css # CSS variables
├── fonts/
│ └── README.md # Links to Inter and JetBrains Mono
└── templates/
├── presentation/ # Slide templates
└── documents/ # Letterhead, etc.
11. Contact and Resources
| Resource |
URL |
| Website |
stratumiops.dev |
| Docs |
docs.stratumiops.dev |
| GitHub |
github.com/stratumiops |
| Twitter/X |
@stratumiops |
| Discord |
discord.gg/stratumiops |
Branding Guide v1.0
Document generated: 2026-01-22
Project: StratumIOps
