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.
Tres capas que se combinan. Cada una aporta un gesto; juntas hacen la marca reconocible al instante.
Neones (verde / cyan / morado) sobre negro profundo. Glow morado radial. Grid de perspectiva tenue.
Monospace estructural. Kickers con //. Cursor _ en el wordmark. Sintaxis de código ([2026], →).
Contraste duro. Highlight-box verde sobre texto clave. Bordes de color en cards. Cero degradados decorativos en la tipografía.
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.
--font-mono: 'JetBrains Mono', monospace; --font-body: 'Inter', -apple-system, sans-serif; --color-green: #39ff14;
| Rol | Fuente | Peso |
|---|---|---|
| Headings / wordmark / kickers / meta | JetBrains Mono | Bold 700–800 |
| Prosa / body | Inter | Regular 400 |
| Énfasis en prosa | Inter | Semi-Bold 600 |
| Code | JetBrains Mono | Regular 400 |
Alternativas de print: Montserrat Bold (headings), Open Sans (body).
Tokens extraídos verbatim de cristiantala-blog/src/styles/global.css. Tocá un swatch para copiar su hex.
| Combinación | Ratio | WCAG |
|---|---|---|
| Blanco sobre Negro Profundo | 19.3:1 | AAA |
| Verde Eléctrico sobre Negro Profundo | 14.5:1 | AAA |
| Cyan sobre Negro Profundo | 11.1:1 | AAA |
Body #dbdbe5 sobre Negro Profundo | 14.3:1 | AAA |
| Verde Eléctrico sobre Blanco | 1.4:1 | No usar |
Borde de cards por color (uso brutalist): verde / cyan / magenta según categoría.
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 del brand | Sobre blanco | Sirve para |
|---|---|---|
Verde Eléctrico #39ff14 | 1.4:1 | Nada. No se lee |
Cyan Neón #00d4ff | 1.8:1 | Nada. No se lee |
Magenta #ff006e | 3.8:1 | Solo títulos grandes |
Púrpura Glow #7a00df | 7.3:1 | Texto 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.
| Resultado | Qué pasa |
|---|---|
| US$2.513 o más | Pasamos el gate y seguimos |
| US$1.250 a US$2.513 | No llegamos, pero hay tracción |
| Bajo US$1.250 | Cortamos |
El gate se mide contra tu número, no contra el mío.
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.
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.
generators/make_watermark.py · render assets/ctala-watermark-150.png).
Seis gestos. Cada asset de marca usa al menos uno; los buenos combinan dos o tres sin saturar.
//Etiqueta de sección en JetBrains Mono uppercase, verde, letter-spacing alto.
_Al final del wordmark y de títulos terminal. Verde, parpadeo opcional.
Palabra clave con bg #39ff14 y texto negro. Un highlight por bloque, no más.
Radial rgba(122,0,223,.28) arriba-izq + cyan tenue opuesto.
Líneas rgba(122,0,223,.18) de 64px, masked hacia arriba.
[2026], →, brackets, en meta y títulos donde sume.
| Superficie | Tamaño | Notas |
|---|---|---|
| Banner YouTube | 2560×1440 | Zona segura 1546×423 · plantillas/banners-perfil/ |
| Banners LinkedIn · X · Facebook | 1584×396 · 1500×500 · 1640×624 | Misma plantilla, otro tamaño |
| Avatar (todos) | foto real | La misma en todos · no regenerar |
| Covers de curso | 1460×752 | Color por categoría · COURSE-COVERS-STANDARD.md |
| Carruseles / quote-cards | 1080×1080 / 1080×1350 | Mismo motor HTML → Browserless |
PLATFORM-SPECS.md, incluida la regla de no-repetir-nombre.
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.
// label que encabeza cada sección del sitio.
Comparativa de modelos, cada mes.
Lo aprendido, sin filtro.
Conversaciones largas.
Cágala, Aprende, Repite.
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.
.t-label.
.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.
Avatar, headers por red, watermark y logos. Todo vive junto al manual (mismo origen), así que la descarga es directa.
Foto real de Cristian. Nunca AI-generada. Centrada para crop circular — todas las redes la muestran en círculo.
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.
Esquina inferior-derecha en covers/reels, ~150px, opacidad 70-85%.
Set completo de firma v8 (centrado/izquierdo · dark/light/transparent · SVG vectorial).
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ánica | Señal | Cercano | Papel |
|---|---|---|---|
| Para quién · dónde | Quien ya te sigue · banners, carruseles, YouTube, charlas | Primera visita, futuros miembros · web, landings, newsletter | Clientes, socios · propuestas, informes, contratos |
| Tema | Dark | Dark; secciones claras permitidas | Claro, portada incluida |
| Títulos | Mono display | Hasta 6 palabras en mono; más largo, Inter Bold | Mono siempre, púrpura numerado; subtítulos teal |
Kicker // | Verde, en cada sección | Uno por sección | Portada y cards clave, en púrpura |
| Highlight verde | Uno por bloque | Uno por página (el hero) | Libre en cifras, precios y frases clave |
| Verde como texto | Títulos y CTA | Solo CTA y cursor | Nunca, solo el cursor |
| Glow · grid | Sí · sí | Tenue en el hero · no | No · no |
| Cards | Borde neón + sombra dura | Borde sutil; una sola destacada con sombra dura | Cards clave y tablas con borde púrpura y sombra dura púrpura |
| Jerga técnica | Libre | Traducida a resultado | Solo en anexos |
Plantilla estándar de propuestas, cotizaciones, informes y cartas, basada en la propuesta DREI Right Hand (sep-2026). Todo en claro, A4, HTML → PDF.
#006080 · verde, 4:2:1).[n] en mono púrpura.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.
| Zona | Qué va |
|---|---|
| Lockup | Logo del producto + tagline en mono, siempre igual en la serie |
| Hook | Máximo 8 palabras, una frase clave en verde |
| Bajada | Opcional, palabra clave en cyan |
| Prueba | Foto, mockup de lo que recibes, checklist o antes/después |
| CTA | Verde sólido en píldora (único lugar con píldora), en español y con el precio vigente |
Medidas completas en PLATFORM-SPECS.md. El avatar es siempre la misma foto real; el banner lleva la propuesta de valor, nunca el nombre.
| Red | Avatar | Banner | Zona segura |
|---|---|---|---|
| 640×640 | 1584×396 | Centro ~1100×300; nada abajo a la izquierda (~568×264) | |
| YouTube | 800×800 | 2560×1440 | 1546×423 centrados |
| 1080×1080 | — | La grilla es el banner; recorta a 3:4 | |
| X | 400×400 | 1500×500 | Mitad superior-central |
| 1080×1080 | 820×312 (al doble) | 640×312 centrados |
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 | |
|---|---|
| Formato | 3 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. |
| Movimiento | Desde 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. |
| Fuente | plantillas/outro-video-vertical/ (HyperFrames 0.8.81 + MP4); copia de trabajo en car-video-studio/templates/outro-tala/ |
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.






| Tipo | Para qué | CTA |
|---|---|---|
| Tráfico (2–3) | Problema → mini solución → link | Sticker de link en y 1150–1350 |
| Posicionamiento | Romper una creencia | Sin CTA |
| Conexión | Detrás de escena, foto real del día | Sin CTA |
| Encuesta | Una pregunta que se vota | Sticker de encuesta en y 910–1340 |
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.
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í.
landings/brand.json (font → JetBrains Mono headings) · actualizar la memoria
reference_brand_ctala.