Manual de Marca v2 — Cristian Tala · Neo Brutalism Synthwave Terminal

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;

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).

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ón	Ratio	WCAG
Blanco sobre Negro Profundo	`19.3:1`	AAA
Verde Eléctrico sobre Negro Profundo	`14.8:1`	AAA
Cyan sobre Negro Profundo	`10.2:1`	AAA
Body `#dbdbe5` sobre Negro Profundo	`9.5:1`	AAA
Verde Eléctrico sobre Blanco	`1.8:1`	No usar

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

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.

No hacer

Modelo generativo para texto: come tildes, look impredecible.
AI-gen sobre la foto real de Cristian — es el anclaje de consistencia.
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

Superficie	Tamaño	Notas
Banner YouTube	`2560×1440`	Zona segura 1546×423 · `generators/make_banner.py`
Banner LinkedIn	`1584×396`	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

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.

Automatización 17 jun 2026

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.

QUIERO NAVEGAR VARIANTE CYAN Ver todos los posts →

.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.

Quiero también las novedades de Ecosistema Startup.

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.

⬇profile-800×800.jpg 800×800 · YouTube / master ⬇profile-400×400.jpg 400×400 · LinkedIn / X ⬇instagram-profile-320×320.jpg 320×320 · Instagram ⬇profile-200×200.jpg 200×200 · genérico ⬇thumbnail-150×150.jpg 150×150 · thumbnail ⬇photo-master.jpg foto master (fuente)

headers por red

Regla de oro: el perfil ya muestra tu nombre — el banner va la propuesta de valor, no el nombre. Texto dentro de la zona segura (centro).

⬇ Descargar los 4 (tar.gz)

watermark / firma

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

⬇watermark-ct-2026.png PNG transparente

logos

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

⬇logo-horizontal-2026.png horizontal · PNG ⬇cts-centrado-v8-dark.png centrado · dark ⬇cts-centrado-v8-light.png centrado · light ⬇cts-centrado-v8-transparent.png centrado · transparente ⬇favicon-cristian-tala-2026.png favicon →Ver todos los SVG índice vectorial

10

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

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.

Cristian Tala_

Neo Brutalism Synthwave Terminal

Synthwave

Terminal

Neo-brutalism

JetBrains Mono + Inter

Color

Accesibilidad

Cristian Tala_

Lo que hace la marca reconocible

Kicker //

Cursor _

Highlight-box verde

Glow morado hero

Grid de perspectiva

Sintaxis de código

Cómo se hacen los assets

Hacer

No hacer

Superficies y tamaños

El sistema de cristiantala.com

Navegando Sin Un Mapa

Assets listos para usar

Qué cambió vs el manual v1

Kicker `//`

Cursor `_`