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.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.
// 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 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.
// 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
| 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 |
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.
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.
.b-card (CtaForm · newsletter)
Caja de captura de email: heading + sub + input + botón verde + checkbox cross-sell (accent verde).
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.
