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
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
┌────────────────────────────────────────────────────────┐
│ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ← Capa 1 │
│ │ │
│ │ ← Conexión │
│ ▼ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓●▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ← Capa 2 + Nodo │
│ │ (cyan) │
│ │ ← Conexión │
│ ▼ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ← Capa 3 │
│ │
└────────────────────────────────────────────────────────┘
Área de Protección
┌─────────────────────────────────────┐
│ │
│ ┌─┬───────────────────────┬─┐ │
│ │ │ │ │ │
│ │ │ ═══════════════ │ │ │
│ │ │ ═══════●═══════ │ │ │
│ │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
/* 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
: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
/* 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
.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. Aplicaciones
Website
┌─────────────────────────────────────────────────────────┐
│ [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
❌ 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
