Filosofía de Branding

El branding en el ecosistema Sxnnyside es intencional, consistente y escalable. No responde a tendencias visuales pasajeras ni busca impresionar mediante novedad superficial.

Identidad sobre Tendencias

Las decisiones de diseño priorizan la construcción de una identidad reconocible y duradera por encima de adoptar estilos temporales.

Reconocimiento sobre Novedad

La coherencia visual permite que cada producto del ecosistema sea identificable sin necesidad de rediseñar constantemente.

Estructura sobre Improvisación

El sistema de diseño está construido mediante reglas claras que eliminan decisiones arbitrarias y garantizan escalabilidad.

Cada elemento visual —desde el color hasta la tipografía— cumple una función específica dentro del sistema. El branding no se improvisa: se estructura, se documenta y se mantiene.

Paleta de Colores

El sistema de color de Sxnnyside está dividido en dos familias con roles claramente diferenciados: Brand Colors para estructura e identidad, y Vibrant Colors para dinamismo y énfasis.

Brand Colors establece la fundación: una base púrpura profunda (sx-purple-900) y acentos estratégicos como amarillo (sx-yellow) para acciones críticas. Estos colores son estables, consistentes y semánticamente fijos.

Vibrant Colors introduce variedad controlada: familias completas de cyan, magenta, lilac, electric y crimson que se usan dinámicamente en chips, tags, bordes, manchas difuminadas y elementos decorativos. Estos colores no son arbitrarios: se asignan contextualmente para crear jerarquía visual y evitar monotonía.

Brand Colors (Estructura)

sx-purple-900 #170421

Fundación visual. Backgrounds principales y superficies base.

sx-purple-800 #2e0859

Capas intermedias. Usado en gradientes y transiciones de profundidad.

sx-yellow #c49a00

Color de acción primario. CTAs, énfasis crítico y títulos principales.

Vibrant Colors (Dinamismo)

Uso dinámico: Los Vibrant Colors se asignan contextualmente en chips, tags, bordes de cards, manchas difuminadas y elementos decorativos.

Familias disponibles:

  • ▸ sx-cyan-bright — Tecnología, datos
  • ▸ sx-magenta-bright — Creatividad, interacción
  • ▸ sx-lilac-glow — Identidad secundaria
  • ▸ sx-electric-bright — Energía, contraste
  • ▸ sx-crimson-bright — Urgencia, atención

Colores de Ramas (Identidad)

Cada rama del ecosistema tiene un color único que aparece en sus contextos específicos. Estos colores NO se usan globalmente sino solo cuando se hace referencia explícita a la rama.

sx-ghost

GhostBox Music

sx-devil

Devil Doll Ent.

sx-scholar

Scholarships

sx-red

Crown Red

Principio fundamental: Brand Colors establece estructura. Vibrant Colors introduce dinamismo. Branch Colors comunica identidad de rama. Cada color tiene un rol específico y se usa intencionalmente, nunca arbitrariamente.

Sistema Tipográfico

La tipografía principal del ecosistema es Playfair Display, una serif de alto contraste diseñada para legibilidad y presencia visual.

La elección de una serif en un ecosistema técnico es intencional: establece contraste entre estructura y expresión.

Estructura

  • • Código
  • • Sistemas
  • • Datos
  • • Lógica

Uso de monospace y sans-serif para elementos técnicos.

Expresión

  • • Identidad
  • • Narrativa
  • • Presencia
  • • Carácter

Uso de Playfair Display para títulos y elementos de marca.

Jerarquía Tipográfica

Títulos Principales (H1)

font-playfair text-5xl md:text-7xl font-bold

Establecen identidad y jerarquía máxima.

Subtítulos (H2)

font-playfair text-3xl md:text-4xl font-bold

Organizan contenido y mantienen presencia visual.

Texto de Cuerpo

text-lg text-white/90 leading-relaxed

Sans-serif del sistema. Legibilidad y rendimiento.

Peso y espaciado: La tipografía usa pesos intencionales (regular, semibold, bold) y espaciado generoso (leading-relaxed) para garantizar legibilidad sin sacrificar densidad de información.

Tecnologías de Frontend

Las herramientas frontend elegidas reflejan los mismos valores que el branding: control, predictibilidad y escalabilidad.

Astro

Framework Principal

Astro fue elegido por su enfoque static-first y su capacidad de generar sitios con rendimiento predecible sin comprometer funcionalidad.

Rendimiento

Envía HTML estático por defecto. JavaScript solo cuando es necesario.

Predictibilidad

Renderizado en build time. Sin sorpresas en producción.

Control

Hydration selectiva. Decisión explícita sobre interactividad.

Astro permite mantener una arquitectura clara y predecible, alineada con el enfoque de control e intencionalidad del ecosistema.

TailwindCSS

Sistema de Diseño

TailwindCSS no es solo una herramienta de estilos: es un sistema de diseño que se hace cumplir mediante restricciones.

▸
Eliminación de CSS arbitrario: No existe CSS global no estructurado. Todo pasa por el sistema de utilidades.
▸
Consistencia forzada: Los tokens de diseño (colores, espaciado, tipografía) son únicos y compartidos.
▸
Escalabilidad predecible: Agregar componentes no introduce deuda de CSS ni conflictos de especificidad.

Tailwind convierte el diseño en infraestructura: un conjunto de reglas compartidas que garantizan coherencia sin necesidad de vigilancia manual.

Three.js

Visualización 3D (Casos Específicos)

Three.js se utiliza exclusivamente en contextos donde la visualización 3D cumple una función inmersiva y estructural, no decorativa.

Su uso se limita a:

  • • Visualización del ecosistema (sistema planetario).
  • • Representación espacial de arquitecturas complejas.
  • • Experiencias donde la profundidad y navegación 3D aportan valor funcional.

Restricción: Three.js nunca se usa como efecto decorativo ni para simular movimiento que puede resolverse con CSS. Su presencia debe justificarse funcionalmente.

Estilo Visual

El lenguaje visual de Sxnnyside no se limita a colores y tipografía: es un sistema de profundidad atmosférica que combina capas translúcidas, manchas de color difuminadas, gradientes sutiles y glassmorphism controlado para crear interfaces que comunican jerarquía sin ruido visual.

El sitio evita fondos planos. Cada sección importante está rodeada por blurred color stains (manchas de color difuminadas) posicionadas absolutamente, con opacidad baja y blur extremo. Estas manchas no son decorativas: definen zonas atmosféricas que separan visualmente bloques de contenido sin recurrir a bordes duros.

Los Vibrant Colors se usan específicamente en estas manchas difuminadas (bg-sx-cyan-bright/8 blur-3xl), en bordes de cards dinámicas, y en chips contextuales. La técnica es consistente: low opacity + high blur + absolute positioning.

Manchas Difuminadas

Círculos gigantes con blur-3xl y opacidad 6-12%. Se posicionan absolutamente fuera del contenedor para crear profundidad atmosférica sin obstruir texto.

Ejemplo de manchas en acción

Glassmorphism Estructural

Las cards usan bg-white/5 backdrop-blur-sm combinado con bordes translúcidos. No es decoración: es separación visual mediante capas.

Card glassmorphism

Gradientes Sutiles

Los gradientes nunca son agresivos. Se usan from-sx-purple-900 to-sx-purple-800 para crear transiciones de profundidad suaves en backgrounds de secciones.

Gradiente aplicado

Capas Z-Index

El contenido siempre usa relative z-10 para elevarse sobre las manchas difuminadas. Las manchas usan pointer-events-none para no interferir.

Capa de contenido elevada

Profundidad Atmosférica

El sitio evita fondos uniformes. Cada hero, cada sección principal, y cada transición importante incluye múltiples manchas difuminadas que crean capas de profundidad perceptual.

Esta técnica permite que el fondo "respire" sin distraer del contenido. Las manchas nunca compiten visualmente con el texto: su opacidad baja (6-12%) y su desenfoque extremo (blur-3xl) las convierte en elementos de ambiente, no de información.

Filosofía de Movimiento

El movimiento refuerza la estructura visual. Las transiciones son rápidas pero no bruscas (200-300ms), y los hover states usan scale-[1.02] + sombras de color para confirmar interactividad sin exagerar.

  • Los hover states escalan ligeramente y agregan sombras de color contextual.
  • Las animaciones de entrada (fade-ins) revelan contenido progresivamente.
  • Los loaders y spinners comunican progreso de forma clara.
  • No se usan animaciones puramente decorativas o que distraen.

Sistema de Iconos

El ecosistema Sxnnyside no utiliza paquetes de iconos externos. Cada icono es dibujado manualmente en SVG, diseñado específicamente para mantener coherencia visual y semántica en todos los productos.

Por qué NO usamos paquetes de iconos

Bibliotecas como SF Symbols, Material Icons, Heroicons o similares introducen ruido visual e inconsistencia estructural.

  • Los paquetes de iconos están diseñados para casos genéricos, no para identidades específicas.
  • Introducen dependencias externas y limitan el control sobre evolución visual.
  • Comprometen la coherencia cuando se mezclan con elementos diseñados internamente.

Control Preciso

Los iconos SVG manuales permiten ajustar cada detalle:

  • • Peso de trazo consistente con el sistema tipográfico.
  • • Esquinas y ángulos alineados con el lenguaje visual.
  • • Dimensiones optimizadas para cada contexto.

Consistencia Semántica

Cada icono responde a la función exacta que debe cumplir:

  • • No hay ambigüedad visual: un icono = una acción.
  • • Los iconos comunican estado y jerarquía mediante color.
  • • La forma es reconocible incluso sin contexto cromático.

Iconos como Infraestructura

Los iconos en Sxnnyside no son decoración: son componentes del sistema de diseño, tratados con el mismo rigor que la paleta de colores o la tipografía.

Escalabilidad

Agregar un nuevo icono no introduce deuda visual. Sigue las mismas reglas estructurales.

Mantenibilidad

Los iconos evolucionan con el sistema. No dependen de actualizaciones de terceros.

Identidad

Cada icono refuerza la identidad visual del ecosistema. Son únicos y reconocibles.

Filosofía Técnica

Los iconos se escriben directamente en HTML como SVG inline, sin importar bibliotecas externas. Utilizan currentColor para heredar color del contexto, respetando la jerarquía cromática del sistema.

Ejemplo de Implementación

<svg class="w-5 h-5 text-sx-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <polyline points="20 6 9 17 4 12" />
</svg>

Icono de confirmación. Minimalista, geométrico, y semánticamente claro.

Vista Previa

Icono renderizado

Cordelia — Personaje Emblema

Cordelia - Personaje Emblema del Ecosistema Sxnnyside

Cordelia es el personaje emblema del ecosistema Sxnnyside. No es una mascota: es un ancla visual y símbolo narrativo que representa identidad, continuidad y presencia.

Origen

Cordelia fue originalmente parte de la saga Psycodead, un proyecto narrativo previo. Con el tiempo evolucionó hasta convertirse en el personaje central que representa visualmente todo el ecosistema Sxnnyside.

Rol en el Ecosistema

  • ▸
    Identidad: Representa visualmente la esencia del proyecto.
  • ▸
    Continuidad: Conecta proyectos y ramas del ecosistema.
  • ▸
    Presencia simbólica: No es decoración ni personificación comercial.

Cordelia no se utiliza como herramienta de marketing: es parte estructural de la narrativa y la identidad visual del ecosistema.

Branding como Sistema

El branding de Sxnnyside no es una capa estética aplicada después del desarrollo: es infraestructura visual que coexiste con la infraestructura técnica.

Infraestructura

El branding está estructurado, documentado y mantenido como cualquier otro componente del sistema.

Lenguaje Compartido

Colores, tipografía y componentes visuales son consistentes en todo el ecosistema.

Compromiso a Largo Plazo

El branding no cambia por tendencias: evoluciona de forma intencional y documentada.

El branding de Sxnnyside conecta tres dimensiones:

→
Software: Estructura, rendimiento, arquitectura.
→
Narrativa: Identidad, continuidad, personajes.
→
Experiencia: Coherencia, predictibilidad, reconocimiento.

Branding no es lo que se ve. Branding es lo que se reconoce.