syntaxis/assets/INDEX.md

📚 SYNTAXIS Branding Assets - Index Completo

Bienvenido al repositorio centralizado de branding de SYNTAXIS. Aquí encontrarás todos los assets, documentación y herramientas necesarios para trabajar con la identidad visual.

🎯 Inicio Rápido

⚡ Abre el Branding Showcase (Lo Primero)

# Desde /Users/Akasha/Development/syntaxis/assets/
open syntaxis-branding-showcase.html

# O con servidor local
cd /Users/Akasha/Development/syntaxis/imgs
python3 -m http.server 8000
# Abre: http://localhost:8000/syntaxis-branding-showcase.html

Es la puerta de entrada a todo el branding. Incluye:

• 14 variantes de logos (7 estáticas + 7 animadas)
• Sistema de colores con HEX, RGB y CMYK
• Tipografía completa
• Filtros y modo claro/oscuro

👉 QUICK_START.md - Instrucciones de apertura rápida

---

📁 Estructura de Carpetas

assets/
│
├── 📄 syntaxis-branding-showcase.html     ⭐ HERRAMIENTA PRINCIPAL
├── 📄 QUICK_START.md                       ⚡ Lee esto primero
├── 📄 INDEX.md                             📚 Este archivo
├── 📄 REFERENCE.txt                        📋 Referencia visual rápida
│
├── 📄 SYNTAXIS_BRANDING_SHOWCASE_README.md 📖 Documentación completa
├── 📄 syntaxis-logo-preview.html          📺 Vista estática (original)
├── 📄 syntaxis-logo-animations-gallery.html 🎬 Galería de animaciones
│
├── 📁 syntaxis_logo_staic_files/
│   ├── SYNTAXIS_LOGO_README.md
│   ├── syntaxis-logo-icon.svg             # Icono principal
│   ├── syntaxis-logo-horizontal.svg       # Logo horizontal completo
│   ├── syntaxis-logo-compact.svg          # Logo sin tagline
│   ├── syntaxis-logo-vertical.svg         # Layout vertical
│   ├── syntaxis-logo-monogram.svg         # Monograma "S"
│   ├── syntaxis-logo-mono-light.svg       # B&N para claros
│   └── syntaxis-logo-mono-dark.svg        # B&N para oscuros
│
├── 📁 syntax_logos_anim/
│   ├── SYNTAXIS_ANIMATED_LOGOS_README.md
│   ├── syntaxis-logo-icon-animated.svg    # Entrada - Ensamblaje
│   ├── syntaxis-logo-icon-construction.svg# Entrada - Construcción
│   ├── syntaxis-logo-horizontal-animated.svg # Logo completo animado
│   ├── syntaxis-logo-icon-pulse.svg       # Loop - Pulso
│   ├── syntaxis-logo-loading.svg          # Loop - Loading spinner
│   ├── syntaxis-logo-icon-ambient.svg     # Loop - Respiración
│   └── syntaxis-logo-icon-hover.svg       # Interactivo - Hover
│
└── 📁 ../difusion/ (Un nivel arriba)
    ├── SYNTAXIS_BRAND_IDENTITY.md         📖 Guía de marca
    └── SYNTAXIS_VISUAL_IDENTITY.md        🎨 Sistema visual

---

🎨 Documentación por Tópico

Para Todos (Comienza Aquí)

Documento	Qué Contiene	Cuándo Leer
QUICK_START.md	Cómo abrir el showcase	Cuando abres por primera vez
syntaxis-branding-showcase.html	Herramienta interactiva	Siempre que necesites assets
SYNTAXIS_BRANDING_SHOWCASE_README.md	Documentación completa	Si necesitas detalles profundos

Para Diseñadores

Documento	Qué Contiene	Cuándo Leer
SYNTAXIS_VISUAL_IDENTITY.md	Sistema visual completo	Referencia de diseño
SYNTAXIS_LOGO_README.md	Logos estáticos detallados	Antes de usar logos
SYNTAXIS_ANIMATED_LOGOS_README.md	Logos animados documentados	Si usas animaciones

Para Desarrolladores

Documento	Información Útil
SYNTAXIS_BRANDING_SHOWCASE_README.md	Códigos HEX, RGB, CMYK
SYNTAXIS_VISUAL_IDENTITY.md	CSS variables listos para copiar
SYNTAXIS_LOGO_README.md	Rutas y dimensiones de SVGs

Para Marketing

Documento	Casos de Uso
SYNTAXIS_BRAND_IDENTITY.md	Taglines, mensajes, valor
SYNTAXIS_VISUAL_IDENTITY.md	Aplicaciones en diferentes medios
Branding Showcase	Vista completa de assets

Para Product Managers

Documento	Información
QUICK_START.md	Resumen ejecutivo rápido
SYNTAXIS_BRANDING_SHOWCASE_README.md	Casos de uso por rol
Branding Showcase	Demostración interactiva

---

🎬 Guías por Caso de Uso

"Necesito un Logo para..."

📱 App Icon / Favicon

1. Abre syntaxis-branding-showcase.html
2. Selecciona "Solo Estáticas"
3. Busca syntaxis-logo-icon.svg
4. Click "Abrir en Nueva Pestaña"
5. Descarga/captura

🌐 Website Header

1. Abre showcase → "Todas"
2. Busca syntaxis-logo-horizontal.svg (estático)
3. O syntaxis-logo-horizontal-animated.svg (con animación)
4. Abre en nueva pestaña

📊 Dashboard / UI Small

1. Showcase → "Solo Estáticas"
2. Usa syntaxis-logo-compact.svg
3. O syntaxis-logo-icon.svg solo para icono

🎬 Splash Screen / Loading

1. Showcase → "Solo Animadas"
2. Usa syntaxis-logo-icon-animated.svg (entra una vez)
3. O syntaxis-logo-loading.svg (spinner continuo)

🖨️ Impresión B&N

1. Showcase → "Solo Estáticas"
2. Usa syntaxis-logo-mono-light.svg (para fondos claros)
3. O syntaxis-logo-mono-dark.svg (para fondos oscuros)

📧 Email Signature

1. Usa syntaxis-logo-compact.svg
2. Usa syntaxis-logo-monogram.svg (más pequeño)
3. Colores en RGB (mejor para email)

---

🎨 Guías por Recurso

Colores SYNTAXIS

Acceso Rápido: Abre showcase → Sección "Paleta de Colores"

SYNTAXIS Blue       #2C5F8E  (RGB: 44, 95, 142)      → Primario
Balanced Gray       #757773  (RGB: 117, 119, 115)   → Secundario ✨
Arrangement Gold    #D97706  (RGB: 217, 119, 6)     → Acento
System Green        #059669  (RGB: 5, 150, 105)     → Éxito
Order Purple        #7C3AED  (RGB: 124, 58, 237)    → IA/Especial

CMYK para Impresión: Ver directamente en showcase (conversiones automáticas)

Tipografía

Acceso Rápido: Showcase → Sección "Sistema Tipográfico"

Encabezados: Inter
Font Stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Weights: 700 (Bold), 600 (Semibold)

Body: Source Sans Pro
Font Stack: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Weights: 400 (Regular), 500 (Medium)

Code: JetBrains Mono
Font Stack: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace
Weights: 400 (Regular)

---

📊 Comparativa de Herramientas

syntaxis-branding-showcase.html

✅ Úsalo para:

• Vista completa de todos los assets
• Búsqueda rápida de colores/logos
• Información de dimensiones y uso
• Acceso a HEX, RGB, CMYK
• Pruebas de modo claro/oscuro

⏱️ Tiempo de apertura: Inmediato (30KB)

syntaxis-logo-preview.html

✅ Úsalo para:

• Inspiración visual de logos estáticos
• Comparativa visual detallada
• Información de escalabilidad
• Guías de uso de logos

📌 Diferencia: Más detallado pero menos interactivo

syntaxis-logo-animations-gallery.html

✅ Úsalo para:

• Ver animaciones en tiempo real
• Jugar con velocidades de animaciones
• Seleccionar animaciones por contexto
• Código de ejemplo para integración

🎬 Diferencia: Enfocado 100% en animaciones

---

🔄 Workflow Recomendado

1️⃣ Primera Vez (5 minutos)

QUICK_START.md → Abre showcase → Explora colores/logos

2️⃣ Necesito un Asset (2 minutos)

Abre showcase → Filtra por tipo → Abre en nueva pestaña

3️⃣ Necesito Información Técnica (5 minutos)

Lee documentación relevante (según rol) → Copia códigos

4️⃣ Implementación Profunda (15+ minutos)

Lee SYNTAXIS_VISUAL_IDENTITY.md → CSS variables → Integra en código

---

💡 Tips Profesionales

Para Diseñadores ✏️

• Tip 1: Modo oscuro en showcase para inspiración nocturna 🌙
• Tip 2: Toma screenshots de colores para exportar a Figma
• Tip 3: Abre animadas en nuevas pestañas para ver en loops

Para Developers 💻

• Tip 1: Copia HEX directamente a CSS/SCSS
• Tip 2: Usa RGB con opacity: rgba(44, 95, 142, 0.5)
• Tip 3: Font stacks listos para producción (ya están optimizados)

Para Marketing 📢

• Tip 1: Descarga logos mediante "Abrir en Nueva Pestaña"
• Tip 2: Toma screenshot de página completa para compartir
• Tip 3: Usa CMYK para impresión profesional

Para Everyone 🎯

• Tip 1: Usa Ctrl/Cmd+F para buscar rápido
• Tip 2: Modo oscuro se guarda automáticamente
• Tip 3: Responsive en mobile - úsalo en tablet también

---

🆘 Troubleshooting

Problema	Solución
"No se ven logos"	Verifica que syntaxis_logo_staic_files/ y syntax_logos_anim/ existan
"Fuentes se ven diferentes"	Normal - carga desde Google Fonts. Primera vez necesita internet
"No puedo abrir logos"	Abre directamente desde terminal o arrastra a navegador
"Modo oscuro no se guarda"	Permite localStorage en configuración del navegador
"¿Dónde está el X color?"	Abre showcase → busca con Cmd/Ctrl+F

---

🚀 Próximas Mejoras Planeadas

• Exportar kit completo como ZIP
• Convertidor de colores (Hex ↔ RGB ↔ CMYK)
• Comparador de logos lado a lado
• Descarga de PDF con guías de marca
• Integración con Figma/Sketch links
• Sistema de etiquetas (tags) para búsqueda
• Animaciones de transición entre variantes

---

📞 Información de Contacto

• Email: hello@syntaxis.dev
• Website: syntaxis.dev
• Repositorio: github.com/syntaxis-rs

---

📋 Checklist de Exploración

Cuando abras por primera vez, intenta:

• Abre syntaxis-branding-showcase.html
• Explora todos los logos estáticos
• Mira logos animados en acción
• Cambia a modo oscuro y vuelve a claro
• Copia un código HEX de color
• Nota los valores CMYK para impresión
• Revisa los font stacks de tipografía
• Abre 2-3 logos en nuevas pestañas
• Prueba desde mobile (si tienes acceso)

---

🎨 Resumen Visual

┌─────────────────────────────────────────────────────┐
│  🎨 SYNTAXIS BRANDING ASSETS                        │
├─────────────────────────────────────────────────────┤
│                                                     │
│  ⭐ Comienza aquí:                                  │
│  → QUICK_START.md                                  │
│  → syntaxis-branding-showcase.html                 │
│                                                     │
│  📚 Documentación:                                  │
│  → SYNTAXIS_VISUAL_IDENTITY.md                    │
│  → SYNTAXIS_BRAND_IDENTITY.md                     │
│                                                     │
│  🎬 Logos:                                          │
│  → 7 Estáticos + 7 Animados                        │
│  → Monocromáticos + Colores                        │
│                                                     │
│  🎨 Colores:                                        │
│  → 5 Primarios + Extended Palette                  │
│  → HEX, RGB, CMYK incluidos                        │
│                                                     │
│  📝 Tipografía:                                     │
│  → Inter, Source Sans Pro, JetBrains Mono         │
│  → Font stacks listos para producción              │
│                                                     │
└─────────────────────────────────────────────────────┘

---

SYNTAXIS | Systematic Orchestration, Perfectly Arranged

Última actualización: 15 Nov 2024 Version: 1.0 - Complete Branding Suite