Neo Brutalism · Synthwave · Terminal
Manual de marca [v2.3]

Cristian Tala_

La identidad visual de un founder que opera con código. Neones sobre negro profundo, monospace estructural, contraste duro. Esta página es el brand que documenta.

cristiantala.com JetBrains Mono + Inter #39ff14 · #00d4ff · #7a00df v2.3 · 29-oct-2026
01
Design language

Neo Brutalism Synthwave Terminal

Tres capas que se combinan. Cada una aporta un gesto; juntas hacen la marca reconocible al instante.

Synthwave

Neones (verde / cyan / morado) sobre negro profundo. Glow morado radial. Grid de perspectiva tenue.

Terminal

Monospace estructural. Kickers con //. Cursor _ en el wordmark. Sintaxis de código ([2026], →).

Neo-brutalism

Contraste duro. Highlight-box verde sobre texto clave. Bordes de color en cards. Cero degradados decorativos en la tipografía.

Regla maestra. Todo asset nuevo (banner, cover, carrusel, ad, redes) sale de acá. Para texto-sobre-fondo → pipeline HTML → Browserless con estos tokens. NUNCA inventar colores ni fuentes. El anclaje de consistencia entre canales es la foto real de Cristian (la misma en todos) + estos tokens.
02
Tipografía

JetBrains Mono + Inter

La voz estructural es JetBrains Mono — es lo que hace que la marca se lea "founder que opera con código". Inter carga la prosa.

Headings · wordmark · kickers · meta — JetBrains Mono Bold
Tecnología, startups e inversión_
Prosa · body — Inter Regular
Vendí mi startup por US$23 millones después de noches sin dormir preguntándome cómo pagar sueldos. La marca se construye sobre experiencia empírica, no sobre teoría de pitch deck.
Code — JetBrains Mono Regular
--font-mono: 'JetBrains Mono', monospace;
--font-body: 'Inter', -apple-system, sans-serif;
--color-green: #39ff14;
RolFuentePeso
Headings / wordmark / kickers / metaJetBrains MonoBold 700–800
Prosa / bodyInterRegular 400
Énfasis en prosaInterSemi-Bold 600
CodeJetBrains MonoRegular 400

Alternativas de print: Montserrat Bold (headings), Open Sans (body).

03
Paleta · tokens exactos de la web

Color

Tokens extraídos verbatim de cristiantala-blog/src/styles/global.css. Tocá un swatch para copiar su hex.

--color-green
Verde Eléctrico
#39ff14
Primario. Headings, CTAs, highlight-box, cursor. AAA 14.8:1.
--color-cyan
Cyan Neón
#00d4ff
Secundario. Links, acentos, badges. AAA 10.2:1.
--color-purple
Púrpura Glow
#7a00df
Glow del hero + grid de perspectiva. Nuevo vs v1.
--color-magenta
Magenta Accent
#ff006e
Alertas / badges. Uso escaso.
--color-bg
Negro Profundo
#0a0a1a
Fondo principal dark.
--color-surface
Surface
#1a1a2e
Cards, superficies de lectura.
--color-inset
Púrpura Grid
#1a0a2e
Code blocks, fondos alternativos.
--color-text
Blanco
#ffffff
Texto sobre dark. AAA 19.3:1.
--color-text-body
Body
#dbdbe5
Prosa. 9.5:1.
--color-muted
Gris Claro
#b0b0b0
Texto secundario, captions.

Accesibilidad

CombinaciónRatioWCAG
Blanco sobre Negro Profundo19.3:1AAA
Verde Eléctrico sobre Negro Profundo14.5:1AAA
Cyan sobre Negro Profundo11.1:1AAA
Body #dbdbe5 sobre Negro Profundo14.3:1AAA
Verde Eléctrico sobre Blanco1.4:1No usar

Borde de cards por color (uso brutalist): verde / cyan / magenta según categoría.

// Paleta clara — documentos y print

Cuando el fondo se invierte, el verde cede el rol al morado

El wordmark ya se usaba sobre claro (texto Negro Profundo + cursor verde). Esta paleta extiende esa regla al resto del sistema para cartas, propuestas, contratos y todo lo que alguien vaya a imprimir o archivar. No agrega colores nuevos: reasigna roles entre los que ya existen.

--color-bg-light
Blanco
#ffffff
Fondo principal en claro.
--color-surface-light
Surface Claro
#f4f4f8
Cards, blockquotes, superficies.
--color-text-light
Negro Profundo
#0a0a1a
Texto principal sobre claro. 19,6:1.
--color-muted-light
Gris Medio
#5a5a6a
Texto secundario y captions. 6,8:1.
--color-accent-light
Púrpura Glow
#7a00df
Primario en claro: headings, kickers, bordes. 7,3:1.
--color-accent2-light
Cyan Profundo
#006080
Secundario: subtítulos y links. 7,0:1.
Color del brandSobre blancoSirve para
Verde Eléctrico #39ff141.4:1Nada. No se lee
Cyan Neón #00d4ff1.8:1Nada. No se lee
Magenta #ff006e3.8:1Solo títulos grandes
Púrpura Glow #7a00df7.3:1Texto y headings

El Púrpura Glow es el único neón que sobrevive al fondo claro, y ya es del brand: es el glow del hero. Por eso hereda el rol primario cuando se invierte el fondo. El verde no desaparece: se queda en el cursor _ del wordmark y en detalles gráficos chicos, nunca en texto de lectura. La highlight-box verde sí se puede usar, porque ahí el verde es el fondo y el texto va en Negro Profundo.

Dark para web, landings, covers, carruseles, ads, slides y video. Claro para cartas, ofertas, propuestas, contratos y cualquier documento que se imprima, se archive o se reenvíe a un tercero.

// Aplicado — una carta real
Cristian Tala_
// CARTA DE OFERTA
Community Lead
Cecilia Ramírez Leigh · 10 de septiembre de 2026
LAS TRES ZONAS DEL DÍA 90
ResultadoQué pasa
US$2.513 o másPasamos el gate y seguimos
US$1.250 a US$2.513No llegamos, pero hay tracción
Bajo US$1.250Cortamos
Si una pieza no tiene una pregunta concreta al final, está mal construida y no debe publicarse.

El gate se mide contra tu número, no contra el mío.

Cágala, Aprende, Repite · cristiantala.com

Todo lo que aparece acá es del sistema: el wordmark con su cursor verde, el kicker // en morado, el H2 en Púrpura Glow, el subtítulo en Cyan Profundo, la card con borde de acento, y la highlight-box verde, que sí funciona en claro porque el verde es el fondo y el texto va en Negro Profundo. Lo único que cambió de rol es el color de los headings.

04
Wordmark + monograma

Cristian Tala_

JetBrains Mono Bold con el cursor _ en Verde Eléctrico. Es la evolución del híbrido manuscrita+geométrica del manual v1, ya retirado.

Cristian Tala_
Sobre dark
Texto blanco (o cyan) + cursor verde.
Cristian Tala_
Sobre claro
Texto Negro Profundo + cursor verde.
ct_
Monograma ct_
Favicon / watermark de video / avatar chico. Badge cuadrado, borde + glow verde.
Constraints. Mínimo 120px de ancho. Sin rotación, distorsión ni efectos sobre el logo. El monograma es la versión reducida del wordmark para superficies chicas (fuente generators/make_watermark.py · render assets/ctala-watermark-150.png).
05
Mecánicas firma

Lo que hace la marca reconocible

Seis gestos. Cada asset de marca usa al menos uno; los buenos combinan dos o tres sin saturar.

Mecánica 01
Blog de un founder

Kicker //

Etiqueta de sección en JetBrains Mono uppercase, verde, letter-spacing alto.

Mecánica 02
Cristian Tala_

Cursor _

Al final del wordmark y de títulos terminal. Verde, parpadeo opcional.

Mecánica 03
criterio empírico

Highlight-box verde

Palabra clave con bg #39ff14 y texto negro. Un highlight por bloque, no más.

Mecánica 04

Glow morado hero

Radial rgba(122,0,223,.28) arriba-izq + cyan tenue opuesto.

Mecánica 05

Grid de perspectiva

Líneas rgba(122,0,223,.18) de 64px, masked hacia arriba.

Mecánica 06
[2026] → ship

Sintaxis de código

[2026], →, brackets, en meta y títulos donde sume.

06
Producción

Cómo se hacen los assets

Hacer

  • Texto-sobre-fondo (banner, cover, quote-card, stat-card, carrusel, ad estático): HTML/CSS → Browserless → PNG con estos tokens. Tildes perfectas, control de px, ~$0, reusable.
  • Composición rica (escena, mockup): modelo generativo state-of-art.
  • Misma foto real de Cristian en todos los canales.
  • Excepción v2.2 · ads de la cuenta personal: se generan completos con IA, con el prompt base y la revisión de la sección Ads. La cara solo desde la foto real como referencia.

No hacer

  • Modelo generativo para texto: come tildes, look impredecible.
  • Generar la cara de Cristian sin su foto real de referencia, o cambiar sus rasgos.
  • Flux Schnell / SDXL como default (era el método v1, desactualizado).
  • Inventar colores o fuentes fuera de estos tokens.
07
Aplicación por canal · normalización

Superficies y tamaños

SuperficieTamañoNotas
Banner YouTube2560×1440Zona segura 1546×423 · plantillas/banners-perfil/
Banners LinkedIn · X · Facebook1584×396 · 1500×500 · 1640×624Misma plantilla, otro tamaño
Avatar (todos)foto realLa misma en todos · no regenerar
Covers de curso1460×752Color por categoría · COURSE-COVERS-STANDARD.md
Carruseles / quote-cards1080×1080 / 1080×1350Mismo motor HTML → Browserless
Specs completas + zonas seguras de las 6 redes (LinkedIn / YouTube / IG / X / FB / TikTok) en PLATFORM-SPECS.md, incluida la regla de no-repetir-nombre.
08
Componentes · sistema vivo del sitio

El sistema de cristiantala.com

Los tokens y las mecánicas se materializan en estos componentes. Cada uno es un demo vivo (HTML real, valores CSS exactos del sitio Astro), no una descripción. Si vas a construir una superficie nueva, ensamblá estas piezas — no inventes.

.t-label El // label que encabeza cada sección del sitio.
posts recientes
.kicker Badge-pill de categoría. Etiqueta corta sobre una card o un post.
IA y Automatización
.b-card · .b-card--cyan · .b-card--magenta La card base del sitio. Sombra dura offset (sin blur) — el gesto neo-brutalist. El acento de color agrupa por tipo de contenido.
b-card
b-card--cyan
b-card--magenta
.feat-card (strip de activos) La fila de 4 feature-cards de la home: título mono + tag-pill + descripción xs.
Benchmark IAmensual

Comparativa de modelos, cada mes.

Libros2 publicados

Lo aprendido, sin filtro.

Podcasts2 shows

Conversaciones largas.

Comunidadgratis

Cágala, Aprende, Repite.

.b-card.b-card--cyan (post card) Item del grid de posts recientes: categoría cyan + fecha, título, excerpt a 2 líneas.
Self-hosted todo: n8n, Listmonk, NocoDB

US$20/mes contra US$500+ en SaaS. Cómo armé el stack que corre mi operación entera con un solo VPS y cero vendor lock-in que me ate las manos.

.btn-green · .btn-cyan · .btn-card CTA primario verde (texto negro sobre verde). Variante cyan. Botón secundario tipo card.
.b-card (CtaForm · newsletter) Caja de captura de email: heading + sub + input + botón verde + checkbox cross-sell (accent verde).

Navegando Sin Un Mapa

El newsletter de un founder que opera con código. Lunes, sin relleno.
photo-frame (sombra dura) El tratamiento oficial de fotos/retratos en superficies del sitio: borde verde tenue + sombra dura offset.
foto real
de Cristian
border: 1px solid rgba(57,255,20,0.5)
border-radius: 2px
box-shadow: 6px 6px 0 0 rgba(57,255,20,0.35)
↳ la foto real nunca es AI-gen
footer pattern Wordmark bicolor + 3 columnas de navegación, cada una encabezada por un .t-label.
.mark-green · .mark-cyan Resaltador plumón inline (texto negro sobre verde/cyan). Es la misma mecánica que el highlight-box .hl del manual — una palabra clave por bloque.

El criterio es empírico, no teórico — y el resultado se mide en números, no en opiniones.

09
Descargables

Assets listos para usar

Avatar, headers por red, watermark y logos. Todo vive junto al manual (mismo origen), así que la descarga es directa.

foto de avatar

Foto real de Cristian. Nunca AI-generada. Centrada para crop circular — todas las redes la muestran en círculo.

headers por red

Estándar 29-oct-2026 (plantillas/banners-perfil/): «IA aplicada a negocios que ya venden» + el Kit + «Link abajo». El perfil ya muestra tu nombre: el banner lleva la propuesta de valor. Texto dentro de la zona segura.

⬇ Descargar los 4 (tar.gz)
watermark / firma

Esquina inferior-derecha en covers/reels, ~150px, opacidad 70-85%.

logos

Set completo de firma v8 (centrado/izquierdo · dark/light/transparent · SVG vectorial).

10
Dial de intensidad · v2.2

Cuánta consola ve cada persona

La marca no cambia: cambia el volumen. Antes de diseñar, la pregunta es ¿esta persona ya me conoce? Si sí, Señal. Si está decidiendo si confiar, Cercano. Si va a firmar, pagar o reenviar, Papel. La firma se dosifica, nunca se elimina.

MecánicaSeñalCercanoPapel
Para quién · dóndeQuien ya te sigue · banners, carruseles, YouTube, charlasPrimera visita, futuros miembros · web, landings, newsletterClientes, socios · propuestas, informes, contratos
TemaDarkDark; secciones claras permitidasClaro, portada incluida
TítulosMono displayHasta 6 palabras en mono; más largo, Inter BoldMono siempre, púrpura numerado; subtítulos teal
Kicker //Verde, en cada secciónUno por secciónPortada y cards clave, en púrpura
Highlight verdeUno por bloqueUno por página (el hero)Libre en cifras, precios y frases clave
Verde como textoTítulos y CTASolo CTA y cursorNunca, solo el cursor
Glow · gridSí · síTenue en el hero · noNo · no
CardsBorde neón + sombra duraBorde sutil; una sola destacada con sombra duraCards clave y tablas con borde púrpura y sombra dura púrpura
Jerga técnicaLibreTraducida a resultadoSolo en anexos
Te pasaste de volumen si: alguien no técnico lee el titular dos veces · hay más de dos neones en pantalla · el CTA compite con el glow o un highlight · un párrafo de lectura está en mono · un documento tiene páginas oscuras.
11
Documentos · Papel

Propuestas en claro que no marean

Plantilla estándar de propuestas, cotizaciones, informes y cartas, basada en la propuesta DREI Right Hand (sep-2026). Todo en claro, A4, HTML → PDF.

Cristian Tala_
// PROPUESTA COMERCIAL · [2026]
Cliente Producto_
Qué es y para quién, en una línea.
Recuperar al menos 8 horas semanales.

Hacer

  • Portada en claro con barra tricolor (púrpura · teal #006080 · verde, 4:2:1).
  • Títulos mono púrpura numerados; subtítulos mono teal; cuerpo Inter.
  • Tabla con encabezado púrpura sólido y sombra dura; precio recomendado en card púrpura, alternativa en teal.
  • Fuentes en cards con barra teal y [n] en mono púrpura.

No hacer

  • Páginas oscuras ni portada en dark.
  • El logo manuscrito antiguo (retirado).
  • Texto en verde o cyan neón sobre blanco.
  • Prosa en mono.
12
Ads de la cuenta personal

Una idea por pieza

Para anuncios que firma Cristian (nivel Señal). Si la pieza la firma CAR, manda el manual de CAR y car-ads-creator, aunque se pague desde la cuenta personal.

ZonaQué va
LockupLogo del producto + tagline en mono, siempre igual en la serie
HookMáximo 8 palabras, una frase clave en verde
BajadaOpcional, palabra clave en cyan
PruebaFoto, mockup de lo que recibes, checklist o antes/después
CTAVerde sólido en píldora (único lugar con píldora), en español y con el precio vigente
Revisión antes de publicar: letras y tildes · todo en español, también el CTA · precio igual al vigente · nunca «gratis» y precio juntos · un solo CTA · legible al 25% de zoom · sin logos de terceros como decoración · sin personas inventadas presentadas como comunidad. Tamaños: 1080×1080, 1080×1350, 1080×1920.
13
Redes sociales · v2.2

Perfil, banners y posts

Medidas completas en PLATFORM-SPECS.md. El avatar es siempre la misma foto real; el banner lleva la propuesta de valor, nunca el nombre.

Desde el 29-oct-2026: todo lo que sale en las cuentas de Cristian va con la marca Tala, aunque hable de CAR. CAR solo firma lo que es de la comunidad (Skool, WhatsApp de la lista, landing del Kit, IG de CAR, apertura); Ecosistema Startup tiene su propia marca. Nunca dos marcas en una misma pieza.
RedAvatarBannerZona segura
LinkedIn640×6401584×396Centro ~1100×300; nada abajo a la izquierda (~568×264)
YouTube800×8002560×14401546×423 centrados
Instagram1080×1080—La grilla es el banner; recorta a 3:4
X400×4001500×500Mitad superior-central
Facebook1080×1080820×312 (al doble)640×312 centrados
Posts: 1080×1350 (feed y carruseles) · 1080×1080 · 1080×1920 (nada en los 250px de arriba ni en los 340px de abajo) · miniaturas 1280×720 · blog 1216×640. Plantillas: portada de carrusel, cita y dato, en dark o claro, con el wordmark en el pie y un solo highlight.
favicon ct_ 512 favicon ct_ 180 favicon ct_ 32 favicon ct_ 16 Favicons ct_ · 512 · 180 · 32 · 16 (+ favicon.ico)
14
Video vertical · v2.3

Capa de texto y outro

Reels, Shorts y TikTok en 1080×1920. La capa de texto sale de car-video-studio/standards/repurpose/estilos/tala.yaml: titular en caja #1a1a2e con borde verde de 2px y radio 16, JetBrains Mono 800 en mayúsculas, subtítulos en Inter 800 con la palabra activa en fondo verde. Zona útil de los tres: x 80–916, y 270–1470.

Outro
Formato3 s · 30 fps · sin audio · se pega con concat
Texto// IA y emprendimiento · CRISTIAN TALA_ (solo el cursor en verde) · «El Kit para empezar con IA» · «Link en mi perfil →». Sin «gratis» ni precio.
MovimientoDesde el cuadro 0: la grilla avanza, un barrido verde baja y el wordmark entra con glitch. El outro también se ve cuando el video se repite.
Fuenteplantillas/outro-video-vertical/ (HyperFrames 0.8.81 + MP4); copia de trabajo en car-video-studio/templates/outro-tala/
15
Historias de Instagram · v2.3

Cuatro tipos, una familia

Plantillas 1080×1920 en plantillas/historias-instagram/ (HTML editable + render.py), según la clase de historias de Skool Scaling. Máximo 2 líneas grandes, JetBrains Mono en el titular e Inter en la prosa, una frase clave en verde y las zonas de los stickers vacías.

Tráfico 1/3
Tráfico 1/3 · problema
Tráfico 2/3
Tráfico 2/3 · mini solución
Tráfico 3/3
Tráfico 3/3 · CTA al link
Posicionamiento
Posicionamiento
Conexión
Conexión
Encuesta
Encuesta
TipoPara quéCTA
Tráfico (2–3)Problema → mini solución → linkSticker de link en y 1150–1350
PosicionamientoRomper una creenciaSin CTA
ConexiónDetrás de escena, foto real del díaSin CTA
EncuestaUna pregunta que se votaSticker de encuesta en y 910–1340
Zonas: nada importante en los 270px de arriba ni en los 340px de abajo; texto entre x 72 y x 1008. Magenta solo para el dolor o lo que se descarta. Una secuencia por día y un tema por secuencia.
16
Voz

La voz vive en humanize-ctala

Este manual no define la voz: vive en humanize-ctala, MENTOR_SIN_FILTRO y brand-guidelines-2026. Lo único propio del diseño: titulares cortos y jerga según el dial.

17
Changelog de marca

Qué cambió vs el manual v1

La web (cristiantala.com en Astro) es la referencia viva; este doc es la fuente canónica. v2 formaliza lo que ya se consolidó ahí.

Nombre del estilo
Synthwave / Retro-Futurista→Neo Brutalism Synthwave Terminal
Wordmark
manuscrita + geométrica→Cristian Tala_ terminal mono
Headings
Inter (v1)→JetBrains Mono Bold confirmado
Paleta
+#7a00df glow · +#1a1a2e surface · +#dbdbe5 body · +--color-border
Mecánicas
formalizadas las firmas (// · _ · highlight-box · glow · grid · card borders)
Producción
Flux / SDXL→HTML → Browserless para texto; generativo solo para composición rica
v2.2 · 19-oct-2026
Dial de intensidad · regla de títulos · documentos en Papel · estándar de ads · redes sociales · favicons ct_ · voz en humanize-ctala · logo manuscrito y favicon TS retirados
v2.3 · 29-oct-2026
Todo lo de las cuentas propias va con Tala y nunca dos marcas en una pieza · banners de perfil nuevos (IA aplicada a negocios que ya venden + el Kit) · outro de video vertical con movimiento desde el cuadro 0 · plantillas de historias de Instagram (tráfico, posicionamiento, conexión, encuesta)
Pendiente de propagar. Regenerar el HTML vivo en R2 desde este doc · actualizar landings/brand.json (font → JetBrains Mono headings) · actualizar la memoria reference_brand_ctala.