stratumiops/assets/en/stratumiops-branding-guide.md

# StratumIOps: Branding Guide

## 1. Brand Identity

### Name

| Element | Value |
|----------|-------|
| **Full name** | StratumIOps |
| **Pronunciation** | "Stratum-I-Ops" |
| **Abbreviation** | SIO (internal use) |
| **Domain** | stratumiops.dev |

### Meaning

```text
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

```text
┌────────────────────────────────────────────────────────┐
│                                                        │
│    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   ← Layer 1         │
│                    │                                   │
│                    │  ← Connection                     │
│                    ▼                                   │
│    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓●▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   ← Layer 2 + Node  │
│                    │                   (cyan)          │
│                    │  ← Connection                     │
│                    ▼                                   │
│    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   ← Layer 3         │
│                                                        │
└────────────────────────────────────────────────────────┘
```

### Clear Space

```text
┌─────────────────────────────────────┐
│                                     │
│   ┌─┬───────────────────────┬─┐     │
│   │ │                       │ │     │
│   │ │    ═══════════════    │ │     │
│   │ │    ═══════●═══════    │ │     │
│   │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

```css
/* 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

```css
: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

```css
/* 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

```css
.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

```css
.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

```text
┌─────────────────────────────────────────────────────────┐
│  [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

```text
❌ 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*