455 lines
14 KiB
Markdown
455 lines
14 KiB
Markdown
|
# 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*
|