# StratumIOps: Guía de Branding

## 1. Identidad de Marca

### Nombre

| Elemento | Valor |
|----------|-------|
| **Nombre completo** | StratumIOps |
| **Pronunciación** | "Stratum-I-Ops" |
| **Abreviación** | SIO (uso interno) |
| **Dominio** | stratumiops.dev |

### Significado

```text
STRATUMIOPS  +  I  +  Ops
   │        │      │
   │        │      └── Operations: automatización, DevOps, flujos
   │        │
   │        └── Intelligence: IA, agentes inteligentes, decisiones
   │
   └── Layers: capas de arquitectura, stack completo
```

### Eslogan Principal

> **"Intelligent layers. Automated operations."**

### Eslóganes Alternativos

| Contexto | Eslogan |
|----------|---------|
| Técnico | "Stack intelligence. Automate everything." |
| Flujo | "From knowledge to deployment. Automated." |
| Beneficios | "Build smarter. Deploy faster." |
| Enterprise | "The full-stack operations platform." |

---

## 2. Logo

### Concepto

El logo representa:
- **Tres capas horizontales**: Arquitectura en niveles (Stratum)
- **Nodo central brillante**: Inteligencia conectando las capas (I)
- **Líneas de conexión**: Flujo de datos y operaciones (Ops)

### Versiones Disponibles

| Archivo | Uso |
|---------|-----|
| `stratumiops-logo.svg` | Principal, fondo claro |
| `stratumiops-logo-dark.svg` | Fondo oscuro con background |
| `stratumiops-logo-minimal.svg` | Versión simplificada |
| `stratumiops-logo-monochrome.svg` | Un solo color |
| `stratumiops-logo-horizontal.svg` | Con wordmark |

### Construcción del Logo

```text
┌────────────────────────────────────────────────────────┐
│                                                        │
│    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   ← Capa 1         │
│                    │                                   │
│                    │  ← Conexión                       │
│                    ▼                                   │
│    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓●▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   ← Capa 2 + Nodo  │
│                    │                   (cyan)          │
│                    │  ← Conexión                       │
│                    ▼                                   │
│    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   ← Capa 3         │
│                                                        │
└────────────────────────────────────────────────────────┘
```

### Área de Protección

```text
┌─────────────────────────────────────┐
│                                     │
│   ┌─┬───────────────────────┬─┐     │
│   │ │                       │ │     │
│   │ │    ═══════════════    │ │     │
│   │ │    ═══════●═══════    │ │     │
│   │X│    ═══════════════    │X│     │ X = altura del nodo
│   │ │                       │ │     │
│   └─┴───────────────────────┴─┘     │
│                                     │
└─────────────────────────────────────┘

Espacio mínimo alrededor del logo = 1X (altura del nodo central)
```

### Tamaños Mínimos

| Contexto | Tamaño mínimo |
|----------|---------------|
| Digital (pantalla) | 32px altura |
| Impreso | 12mm altura |
| Favicon | 16x16px (usar versión simplificada) |

---

## 3. Paleta de Colores

### Colores Primarios

| Nombre | Hex | RGB | Uso |
|--------|-----|-----|-----|
| **Indigo 500** | `#6366F1` | 99, 102, 241 | Logo principal, CTAs primarios |
| **Indigo 600** | `#4F46E5` | 79, 70, 229 | Hover states, variante oscura |
| **Indigo 400** | `#818CF8` | 129, 140, 248 | Fondos claros, highlights |

### Colores Secundarios (Accent)

| Nombre | Hex | RGB | Uso |
|--------|-----|-----|-----|
| **Cyan 400** | `#22D3EE` | 34, 211, 238 | Nodo inteligente, accents |
| **Cyan 500** | `#06B6D4` | 6, 182, 212 | Highlights, iconos |
| **Cyan 300** | `#67E8F9` | 103, 232, 249 | Glow effects |

### Colores Neutrales

| Nombre | Hex | RGB | Uso |
|--------|-----|-----|-----|
| **Slate 900** | `#0F172A` | 15, 23, 42 | Texto principal, fondos dark |
| **Slate 700** | `#334155` | 51, 65, 85 | Texto secundario |
| **Slate 400** | `#94A3B8` | 148, 163, 184 | Texto terciario, placeholders |
| **Slate 200** | `#E2E8F0` | 226, 232, 240 | Bordes, divisores |
| **Slate 50** | `#F8FAFC` | 248, 250, 252 | Fondos claros |

### Colores Semánticos

| Nombre | Hex | Uso |
|--------|-----|-----|
| **Success** | `#22C55E` | Confirmaciones, estados OK |
| **Warning** | `#F59E0B` | Alertas, precauciones |
| **Error** | `#EF4444` | Errores, estados críticos |
| **Info** | `#3B82F6` | Información, tooltips |

### Gradientes

```css
/* Gradiente principal del logo */
.gradient-primary {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
}

/* Gradiente del nodo inteligente */
.gradient-node {
  background: radial-gradient(circle, #22D3EE 0%, #06B6D4 100%);
}

/* Gradiente para fondos hero */
.gradient-hero {
  background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
}

/* Gradiente accent */
.gradient-accent {
  background: linear-gradient(90deg, #6366F1 0%, #22D3EE 100%);
}
```

---

## 4. Tipografía

### Fuente Principal: Inter

| Peso | Uso |
|------|-----|
| **Inter Bold (700)** | Headings, títulos principales |
| **Inter SemiBold (600)** | Subtítulos, énfasis |
| **Inter Medium (500)** | Labels, navegación |
| **Inter Regular (400)** | Cuerpo de texto |

### Fuente Código: JetBrains Mono

| Peso | Uso |
|------|-----|
| **JetBrains Mono Regular** | Código, terminal, snippets |
| **JetBrains Mono Bold** | Código destacado |

### Escala Tipográfica

| Nombre | Tamaño | Line Height | Uso |
|--------|--------|-------------|-----|
| **Display** | 48px / 3rem | 1.1 | Hero headlines |
| **H1** | 36px / 2.25rem | 1.2 | Títulos de página |
| **H2** | 30px / 1.875rem | 1.25 | Secciones principales |
| **H3** | 24px / 1.5rem | 1.3 | Subsecciones |
| **H4** | 20px / 1.25rem | 1.4 | Cards, títulos menores |
| **Body Large** | 18px / 1.125rem | 1.6 | Lead text |
| **Body** | 16px / 1rem | 1.6 | Texto principal |
| **Body Small** | 14px / 0.875rem | 1.5 | Captions, metadata |
| **Code** | 14px / 0.875rem | 1.6 | Código inline |

### 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. Iconografía

### Estilo

- **Tipo**: Outline icons (línea, no filled)
- **Stroke width**: 1.5px - 2px
- **Corner radius**: Consistente con el logo (redondeado)
- **Tamaño base**: 24x24px
- **Set recomendado**: Lucide Icons, Heroicons (outline)

### Iconos del Producto

| Producto | Icono Sugerido |
|----------|----------------|
| StratumIOps/knowledge | `book-open` + `brain` |
| StratumIOps/orchestrate | `workflow` + `bot` |
| StratumIOps/interact | `form-input` + `terminal` |
| StratumIOps/provision | `server` + `cloud` |

---

## 6. Componentes UI

### Botones

```css
/* Primario */
.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%);
}

/* Secundario */
.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. Aplicaciones

### Website

```text
┌─────────────────────────────────────────────────────────┐
│  [Logo]  Products  Pricing  Docs  Blog     [Sign In]    │
├─────────────────────────────────────────────────────────┤
│                                                         │
│          StratumIOps                                    │
│                                                         │
│    Intelligent layers.                                  │
│    Automated operations.                                │
│                                                         │
│    [Get Started]  [View Demo]                           │
│                                                         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│    ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐   │
│    │Knowledge│  │Orchestr.│  │ Interact│  │Provision│   │
│    │  ════   │  │  ════   │  │  ════   │  │  ════   │   │
│    │  ═●═    │  │  ═●═    │  │  ═●═    │  │  ═●═    │   │
│    │  ════   │  │  ════   │  │  ════   │  │  ════   │   │
│    └─────────┘  └─────────┘  └─────────┘  └─────────┘   │
│                                                         │
└─────────────────────────────────────────────────────────┘
```

### Documentación

- Fondo: Slate 50 (#F8FAFC)
- Sidebar: White con borde Slate 200
- Code blocks: Slate 900 con syntax highlighting
- Headers: Indigo 600

### Presentaciones

- Template dark: Slate 900 fondo, texto blanco
- Template light: White fondo, texto Slate 900
- Accent en todos los slides: Cyan para highlights

---

## 8. Uso Incorrecto

### No Hacer

```text
❌ Cambiar los colores del logo
❌ Rotar el logo
❌ Añadir efectos (sombras, outlines extra)
❌ Estirar o comprimir desproporcionadamente
❌ Usar sobre fondos que reduzcan contraste
❌ Separar el nodo de las capas
❌ Cambiar la tipografía del wordmark
❌ Usar versión completa cuando el espacio es muy pequeño
```

### Fondos Permitidos

| Fondo | Versión del Logo |
|-------|------------------|
| Blanco / Claro | Logo principal (colores) |
| Slate 900 / Negro | Logo dark version |
| Indigo (brand color) | Logo monocromático blanco |
| Fotografías | Solo si hay suficiente contraste |

---

## 9. Tono de Voz

### Personalidad de Marca

| Atributo | Descripción |
|----------|-------------|
| **Inteligente** | Conocemos el espacio, hablamos con autoridad técnica |
| **Directo** | Sin rodeos, vamos al grano |
| **Accesible** | Técnico pero no intimidante |
| **Confiable** | Enterprise-ready, serio, profesional |
| **Innovador** | Rust, Nickel, IA nativa - estamos adelante |

### Ejemplos de Copy

**Sí**:
- "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!" (vago)
- "The best platform ever!" (superlativos vacíos)

---

## 10. Assets Digitales

### Archivos de Logo

```
.coder/
├── 2026-01-22-stratumiops-logo.svg           # Principal
├── 2026-01-22-stratumiops-logo-dark.svg      # Fondo oscuro
├── 2026-01-22-stratumiops-logo-minimal.svg   # Simplificado
├── 2026-01-22-stratumiops-logo-monochrome.svg # Un color
└── 2026-01-22-stratumiops-logo-horizontal.svg # Con wordmark
```

### Exportaciones Necesarias

```
/brand/
├── logo/
│   ├── svg/          # Todos los SVG
│   ├── png/          # 64, 128, 256, 512, 1024px
│   ├── favicon/      # ico, png 16/32/48
│   └── social/       # Open Graph, Twitter cards
├── colors/
│   └── palette.css   # Variables CSS
├── fonts/
│   └── README.md     # Links a Inter y JetBrains Mono
└── templates/
    ├── presentation/ # Slides templates
    └── documents/    # Letterhead, etc.
```

---

## 11. Contacto y Recursos

| Recurso | URL |
|---------|-----|
| Website | stratumiops.dev |
| Docs | docs.stratumiops.dev |
| GitHub | github.com/stratumiops |
| Twitter/X | @stratumiops |
| Discord | discord.gg/stratumiops |

---

*Guía de Branding v1.0*
*Documento generado: 2026-01-22*
*Proyecto: StratumIOps*