Manual de marca · Mission Control

BRAND
GUIDELINES

El sistema de diseño "Mission Control" es el lenguaje visual único de MoluscoTV en todos los reportes, dashboards y herramientas internas: fondo negro real, rojo como único acento, tipografía Bebas Neue + Space Mono y una estética de terminal — hard-edged, densa en datos, sin decoración innecesaria. Esta guía está construida con el sistema real: cada componente de abajo es código en vivo, no una ilustración.

Uso interno de Mission Control. Cualquier página nueva del ecosistema MoluscoTV debe reutilizar estos tokens y componentes verbatim — no crear una paleta, tipografía o estilo de tarjeta nuevos.
Fondo
Negro real
Acento
Rojo único
Display
Bebas Neue
Mono
Space Mono
Esquinas
Sin redondear
01 · Identidad

NAVEGACIÓN Y MARCA

Toda página del ecosistema abre con la misma barra de navegación: el nombre de marca con un punto rojo pulsante, y enlaces de navegación en mono uppercase que se vuelven rojos al pasar el cursor.

Nombre de marca

El texto de marca en el nav es MOLUSCOTV / MISSION CONTROL por defecto. Puede sustituirse por un sub-brand cuando la página pertenece a otra unidad (ej. ASANA × MOLUSCOTV para la herramienta de producción), siempre manteniendo el punto pulsante y Bebas Neue.

El punto pulsante

Un círculo de 9px en rojo con sombra difusa (box-shadow: 0 0 10px var(--red)) y animación de pulso de 1.8s. Es la única animación permitida en todo el sistema — funciona como indicador de "en vivo" de Mission Control.

La navegación es sticky (se mantiene fija arriba al hacer scroll) con fondo negro semitransparente y blur — nunca opaca al 100% ni sólida.
02 · Paleta de color

ONCE TOKENS, UN SOLO ACENTO

El rojo es el único color de acento en todo el sistema. El verde existe solamente para señalar valores positivos (deltas al alza, estados "bien"). Nunca se introduce un segundo color de marca.

--black
#000000
Fondo base de toda página
--panel
#0b0b0b
Fondo de cards, blocks, notas
--panel-2
#111111
Fondo de thumbs, tracks de barra
--line
#242424
Bordes hairline en todo el sistema
--red
#EE1111
Único acento — texto, bordes, números clave
--red-dim
#7a0c0c
Bordes rojos secundarios, tags
--white
#f5f5f5
Texto principal, titulares
--gray
#9a9a9a
Texto secundario, eyebrows en tablas
--gray-dim
#5c5c5c
Texto terciario, notas neutrales
--green
#2ecc71
Solo para deltas positivos / estado "bien"
--grid-line
rgba(255,255,255,.035)
Grid de 80px sobre el fondo negro

Regla de oro: si una pantalla necesita un segundo color para "destacar algo más", la respuesta correcta casi siempre es usar más espacio en blanco o jerarquía tipográfica — no un color nuevo.

03 · Tipografía

DOS FUENTES, TRES ROLES

Cargar siempre con: family=Bebas+Neue&family=Space+Mono:wght@400;700

Bebas Neue
Titulares, números grandes, nombres de card
RECUPERAR DISTRIBUCIÓN
Space Mono
Eyebrows, nav, tags, datos/métricas, timestamps
01 · Score de viralidad — MoluscoTV
Arial / Helvetica
Cuerpo de texto, párrafos, listas
El contenido funciona cuando YouTube lo muestra; el problema está en conseguir más impresiones y convertir esas vistas en suscriptores recurrentes.
Nunca mezclar una cuarta familia tipográfica. Los números de métricas (vistas, CTR, dólares) siempre van en Space Mono, incluso dentro de párrafos en Arial.
05 · Principios de diseño

CINCO REGLAS QUE NO SE ROMPEN

01

Negro real, nunca gris oscuro

El fondo es #000000 puro con un grid de 80px casi invisible (opacidad 0.035) — no un "dark mode" gris azulado.

02

Rojo como único acento

Ningún segundo color de marca. El verde solo aparece para deltas positivos, nunca como decoración.

03

Esquinas sin redondear

Cero border-radius en cards, paneles y botones. Los únicos círculos permitidos son el punto del nav y los puntos pequeños de tags/bullets.

04

Bordes hairline + acento izquierdo

Todo panel lleva un borde de 1px en --line. El rojo aparece como barra de 3px a la izquierda (vía ::before), no como contorno completo.

05

Densidad de datos sobre decoración

Sin sombras suaves, sin gradientes fuera de los especificados, sin iconos decorativos. Cada reporte se lee como un documento de terminal — denso, directo, numerado.

06 · Espaciado y breakpoints

LA ESCALA QUE YA USA EL SITIO

Ningún reporte define su propio espaciado desde cero — reutiliza esta escala, extraída de las páginas reales en producción.

TokenValorUso
Gap chico8–10pxEntre elementos inline (dot + texto, chips)
Gap medio14–18pxEntre cards de un grid, entre filas de picks
Padding de card18–28pxInterior de card, story, rblock, nblock
Padding de sección60–70px vertical · 28px lateralTodo <section> del sitio
Ancho de contenedor1100–1180pxmax-width de header.hero y section
Breakpoints
≤ 560px
Picks pasa de 3–4 columnas a 1.
≤ 700px
Rule y story-meta pasan de 2 columnas a 1.
≤ 720px
Cards de portada (index) pasan de 2 columnas a 1.
≤ 800px
Feature y dodont pasan de 2 columnas a 1.
≤ 900px
Grid-2 / grid-3 / grid-4 colapsan a 1 columna.
No inventar un breakpoint nuevo salvo que un componente nuevo lo requiera explícitamente — reutilizar estos cinco cubre prácticamente todo el sitio.
07 · Estados de interacción

HOVER, FOCUS Y DISABLED

El sistema define hover de forma consistente en todo enlace y card. El estado focus visible para navegación por teclado todavía no está formalizado — ver nota abajo.

Nav link · hover
Color pasa de --gray a --red, aparece borde inferior rojo.
a.card · hover
Borde completo pasa a --red, fondo aclara a #111.
story-links a · hover
Fondo se llena con rojo al 10% de opacidad.
tbody tr · hover
Fondo se llena con rojo al 4% de opacidad.
Transición
0.15s en color/border-color/background — nunca más lenta, nunca con easing decorativo.
Pendiente de accesibilidad

Ningún componente define hoy un estado :focus-visible explícito para navegación por teclado. Recomiendo agregar un outline de 2px en --red con 2px de offset a nav a, a.card y story-links a antes de considerar el sistema completo.

08 · Galería de componentes

CADA PIEZA, EN VIVO

Estos son los mismos componentes que se usan en los reportes reales del sitio — copiar las clases verbatim, no reinventar estilos nuevos.

Tag + status strip
Ejemplo de tag
Vistas
534,433
CTR
8.0%
Veredicto
7/10
Tabla + deltas
MétricaAnteriorRecienteCambio
Visualizaciones524,150534,433+2.0%
Impresiones4,814,6314,530,155−5.9%
CTR7.4%8.0%+0.6 puntos
Cards + grid

Card estándar

Fondo --panel, borde --line, barra roja de 3px a la izquierda vía ::before.

Card "good"

Misma estructura con la barra izquierda en verde para señalar un estado positivo.

Callout
Conclusión principal

El texto clave va en negrita roja dentro de un panel con degradado sutil de rojo y borde --red-dim.

Steps (numerados)
01

Título del paso

Descripción breve de la acción recomendada.

02

Segundo paso

Cada paso usa un número grande en Bebas Neue rojo.

Sequence (cadena de proceso)
Idea→ Producción→ Publicación→ Resultado
Vidlist (lista de items con valor)
Tempo con Bad Bunny71,995
Los Pokémones amenazan a Molusco61,877
Feature (miniatura + stats)
TÍTULO DE EJEMPLO

CANDIDATO A MINIATURA

Bloque para recomendar cambios de miniatura con estadísticas al lado.

Rules (condición → acción)
CTR < 6.5%
Cambiar o probar miniatura.
CTR > 8%
No tocar mientras reciba impresiones.
Priority (lista de acción ordenada)
01

Primera acción de la semana.

02

Segunda acción de la semana.

Story (ficha de tema/noticia)
01Título del tema

Cuerpo de la historia con ángulo editorial, título sugerido de YouTube y miniatura.

Picks (pares de etiqueta/valor)
Impresiones
Al menos 4.8M
CTR
8% o más
Chips
Molusco UrbanoNoticias PREntrevistas
Note
Panel neutral (borde gris, no rojo) para verificaciones y aclaraciones — no para el mensaje principal de la sección.
Cards de portada (index)
Categoría · Fecha

TÍTULO DEL REPORTE

Descripción corta de una o dos líneas del contenido de la página.
Categoría · Fecha

OTRO REPORTE

Mismo patrón: eyebrow rojo, título Bebas Neue, descripción gris.
09 · Plantilla de miniaturas

LA ZONA SEGURA DE UN THUMBNAIL

Es el output visual más repetido del canal — conecta directo con las reglas de CTR ya usadas en los reportes de audiencia.

ROSTRO / SUJETO
TEXTO — 2 A 4 PALABRAS
Zona punteada exterior: margen de seguridad. Caja central: rostro o sujeto principal. Franja inferior: única zona de texto.

Checklist antes de publicar

  • Un solo rostro o sujeto protagonista, nunca 4–5 caras compitiendo.
  • Texto de 2 a 4 palabras máximo, en mayúsculas.
  • No repetir el título completo del video dentro de la miniatura.
  • Una reacción o consecuencia fácil de leer en menos de un segundo.
  • Contraste alto entre sujeto y fondo — nunca ambos oscuros.
Regla A/B (heredada de los reportes de audiencia)
>300K impresiones · CTR <6.5%
Cambiar o probar miniatura nueva.
CTR entre 6.5% y 8%
Correr una prueba A/B, no un rediseño completo.
CTR > 8%
No tocar mientras siga recibiendo impresiones.
10 · Voz y tono editorial

CUATRO CONTEXTOS, CUATRO TONOS

El mismo canal habla distinto según el formato — la marca visual se mantiene idéntica, pero la voz cambia a propósito.

ContextoTonoEjemplo real
Títulos de agenda noticiosaUrgente, directo, mayúsculas selectivas"180,000 SIN AGUA"
Reportes internos de audienciaAnalítico, cifra primero, sin rodeos"Las impresiones bajaron 5.9%. El CTR subió a 8%."
Media kit / sponsorsProfesional, orientado a beneficio"Formatos digitales con precio y paquetes multiplataforma."
Comunidad / redesConversacional, cercano, pregunta directa"¿A quién le crees?"

SÍ

  • Llevar la cifra o el conflicto al frente de la oración.
  • Usar mayúsculas para UNA sola palabra o frase de impacto, no todo el título.
  • Ajustar el tono al contexto sin romper la identidad visual.

NO

  • Usar el tono de sponsors (formal) en un título de agenda noticiosa.
  • Usar el tono urgente de noticias en copy institucional para anunciantes.
  • Escribir títulos con tres temas distintos compitiendo por atención.
11 · Co-branding

CUANDO ENTRA UN PATROCINADOR

El sitio ya documenta integraciones reales (Xatay Asian Cuisine, Taco Maker & Marco's Pizza) — estas son las reglas que las rigen.

Lo que sí puede cambiar

El logo, colores y assets del patrocinador pueden aparecer dentro de su propio segmento: cintillo de marca, thumbnail del video integrado, o una mención puntual dentro de un rblock/card específico.

Lo que nunca cambia

El chrome de Mission Control — nav, tipografía de reporte, paleta de fondo, estructura de secciones — se mantiene 100% en negro/rojo/Bebas Neue/Space Mono, sin importar qué marca esté integrada.

El reporte que documenta una integración (ej. xatay.html) sigue siendo una página de Mission Control que habla sobre la marca del patrocinador — no una página con la identidad del patrocinador.
12 · Plantillas sociales

MEDIDAS PARA CADA PLATAFORMA

Mismos tokens de color y tipografía, aplicados fuera del sitio.

FormatoMedidaZona segura
Banner de canal YouTube2560×1440pxTexto/logo dentro de 1546×423px centrales
Miniatura de video1280×720pxVer sección 09 · Plantilla de miniaturas
Post de Instagram/X1080×1080pxMargen de 80px en los cuatro lados
Header de X1500×500pxContenido clave dentro de los 1200px centrales
Post de Comunidad1080×1080pxFondo negro, texto blanco/rojo, sin foto de fondo clara
Todo asset social lleva el lockup primario (punto + wordmark) en una esquina, respetando el espacio de protección de la sección 04.
13 · Uso correcto e incorrecto

QUÉ HACER Y QUÉ EVITAR

SÍ

  • Copiar los tokens y clases CSS verbatim desde una página existente del sitio.
  • Numerar cada eyebrow de sección (01 ·, 02 ·, ...).
  • Usar Space Mono para cualquier número o métrica.
  • Mantener el borde izquierdo rojo de 3px como único acento visual de las cards.
  • Dejar el fondo negro real y el grid de 80px en toda página nueva.

NO

  • Introducir un segundo color de marca (azul, morado, dorado, etc.).
  • Redondear esquinas de cards, botones o paneles.
  • Usar sombras suaves, glassmorphism o gradientes fuera de los ya definidos.
  • Mezclar una tercera familia tipográfica.
  • Usar el verde como color decorativo — es exclusivo de estados positivos.
14 · Convención de archivos

NOMBRES Y ESTRUCTURA

Todo archivo del sitio es HTML autocontenido (CSS y JS inline, sin build tooling) y sigue minúsculas con guiones.

Patrones de nombre

  • noticias-DDmes.html — agenda editorial de un día.
  • reporte-semanal-DD-DDmes.html — reporte de audiencia semanal.
  • diagnostico*.html — diagnósticos mensuales/avanzados.
  • index.html — portal, siempre actualizado con la tarjeta más nueva primero.

Al crear una página nueva

  • Copiar el bloque <style> completo desde una página existente.
  • Numerar las secciones y enlazarlas en el nav con anclas #.
  • Agregar la tarjeta correspondiente en index.html.
  • Verificar el render antes de entregar (scroll completo, sin overflow roto).