syntaxis/assets/QUICK_START.md

🚀 QUICK START - SYNTAXIS Branding Showcase

⚡ Apertura Rápida

Opción 1: Directamente desde Terminal

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

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

# O simplemente arrastra el archivo al navegador

Opción 2: Desde el Navegador

1. Abre tu navegador favorito
2. Presiona Ctrl+O (Windows/Linux) o Cmd+O (Mac)
3. Busca el archivo en: /Users/Akasha/Development/syntaxis/assets/syntaxis-branding-showcase.html
4. ¡Listo! 🎉

Opción 3: Servidor Local (Recomendado)

# Navega a la carpeta
cd /Users/Akasha/Development/syntaxis/imgs

# Inicia servidor Python
python3 -m http.server 8000

# O con Node.js (si lo tienes instalado)
npx http-server

# Abre en tu navegador
http://localhost:8000/syntaxis-branding-showcase.html

🎯 Lo Primero Que Verás

1. Header con controles:

   • Selector de variantes (Todas / Estáticas / Animadas)
   • Botón de modo oscuro/claro

2. Logos (14 variantes):

   • 7 estáticas + 7 animadas
   • Click en "Abrir en Nueva Pestaña" para ver cada una
   • Información de dimensiones y uso

3. Colores (5 colores principales):

   • HEX, RGB y CMYK
   • Balanced Gray ✨ actualizado
   • Uso y significado de cada color

4. Tipografía (3 familias):

   • Inter, Source Sans Pro, JetBrains Mono
   • Ejemplos en vivo
   • Font stacks listos para copiar

💡 Funciones Principales

🎨 Selector de Variantes

┌─────────────────────────────┐
│ Variante: [Todas ▼]         │
│ - Todas (estáticas + anim.) │
│ - Solo Estáticas            │
│ - Solo Animadas             │
└─────────────────────────────┘

Los logos se filtran automáticamente.

🌙 Modo Oscuro

Botón: [🌙 Modo Oscuro]

• Alterna entre claro y oscuro
• Se guarda en tu navegador
• Contraste accesible en ambos modos

📱 Logos - Click para Abrir

Cada logo tiene un botón:

[Abrir en Nueva Pestaña]

Se abre en una pestaña nueva para verlo completo.

🎨 Colores - Formatos Múltiples

HEX:  #2C5F8E
RGB:  44, 95, 142
CMYK: 69%, 33%, 0%, 44%

¡Copia directamente a tu código!

📋 Checklist de Uso

• Abre syntaxis-branding-showcase.html
• Prueba el selector de variantes
• Alterna entre modo claro y oscuro
• Abre 2-3 logos en nuevas pestañas
• Copia un código HEX de color
• Nota la información de tipografía

🎬 Casos de Uso Rápidos

Necesito un Logo para...

Necesidad	Selecciona	Click en
Favicon	Todas → Icon	"Abrir en Nueva Pestaña"
Splash screen	Animadas → Icon Animated	"Abrir en Nueva Pestaña"
Header web	Todas → Horizontal	"Abrir en Nueva Pestaña"
Impresión B&N	Todas → Mono Light/Dark	"Abrir en Nueva Pestaña"
Loading spinner	Animadas → Loading	"Abrir en Nueva Pestaña"

Necesito un Color para...

Busca en la sección de Colores:

• Botones: SYNTAXIS Blue (#2C5F8E)
• Texto: Balanced Gray (#757773)
• Acentos: Arrangement Gold (#D97706)
• Éxito: System Green (#059669)
• Features IA: Order Purple (#7C3AED)

Necesito Font Stack para...

Busca en Sistema Tipográfico:

• Encabezados: Inter
• Cuerpo: Source Sans Pro
• Código: JetBrains Mono

⌨️ Atajos de Teclado

Atajo	Acción
Esc	Cierra modal (si está abierto)
Cmd/Ctrl+P	Imprime / Guarda como PDF
Cmd/Ctrl+F	Busca en la página

🔍 Búsqueda Rápida

Usa Cmd+F (Mac) o Ctrl+F (Windows/Linux) para buscar:

• animated - Logos animados
• static - Logos estáticos
• #2C5F8E - Color azul
• #757773 - Color gris (nuevo)
• Inter - Tipografía headlines

📱 Mobile & Tablet

Funciona perfectamente en:

• ✅ iPad en landscape
• ✅ Tablet Android
• ✅ Mobile (se adapta a una columna)

Accesos desde mobile:

1. Abre el archivo en tu navegador
2. O copia la URL si lo tienes servido (localhost)
3. Todo es interactivo y responsivo

⚙️ Solución de Problemas

"No se ven los logos"

1. Verifica que los archivos estén en las carpetas correctas:
   • syntaxis_logo_staic_files/ (logos estáticos)
   • syntax_logos_anim/ (logos animados)
2. Si cambió la estructura, abre DevTools (F12) y revisa errores

"El modo oscuro no se guarda"

1. Asegúrate de permitir localStorage en tu navegador
2. Intenta en una ventana normal (no incógnito)

"Las fuentes se ven diferentes"

1. Es normal si no las tienes locales - se cargan desde Google Fonts
2. Necesita conexión a internet para la primera carga
3. Después se cachean en tu navegador

📚 Documentación Completa

Para más detalles, lee:

• SYNTAXIS_BRANDING_SHOWCASE_README.md - Documentación completa
• SYNTAXIS_BRAND_IDENTITY.md - Identidad de marca
• SYNTAXIS_VISUAL_IDENTITY.md - Sistema visual detallado

🎨 Pro Tips

Para Diseñadores

1. Abre modo oscuro para inspiración nocturna 🌙
2. Toma screenshots de colores para paletas
3. Abre animadas para ver movimiento en vivo

Para Developers

1. Copia HEX directo a CSS
2. Usa RGB con opacity: rgba(44, 95, 142, 0.5)
3. Font stacks listos para producción

Para Marketing

1. Descarga logos clicando "Abrir en Nueva Pestaña"
2. Toma screenshot de la página para compartir
3. Usa CMYK para impresión

🚀 Siguiente Paso

¿Necesitas agregar un nuevo logo?

1. Guárdalo en la carpeta correspondiente
2. Abre syntaxis-branding-showcase.html en editor
3. Busca const LOGOS y añade el nuevo
4. Recarga la página - ¡listo!

---

Enjoy! 🎉

SYNTAXIS | Systematic Orchestration, Perfectly Arranged