16 · Palette

16 — Palette

Versión: 0.1 Última actualización: 2026-04-24

Filosofía

Los colores están inspirados en arquitectura y arte mexicano moderno — Barragán, Tamayo, papel picado, talavera — pero ejecutados con la precisión de un design system contemporáneo.

Premisa: color cálido sobre base neutra, con acentos saturados que sirvan jerarquía. NUNCA neón. NUNCA pure black (#000). NUNCA pure white (#fff). Todo tiene sesgo cálido.

Dark mode (default — mejor para focus time largo)

Base (fondos)

Nombre	Hex	Uso
`ink`	`#1a1511`	Background principal. Obsidiana cálida, no puro negro.
`ink-2`	`#24201a`	Background de cards, elevated surfaces
`ink-3`	`#2f2a22`	Background de inputs, code blocks, tooltips
`border-warm`	`#3a2f25`	Borders sutiles, líneas divisorias

Texto

Nombre	Hex	Uso
`text-primary`	`#f4ecdf`	Cal rosada clara — text body
`text-secondary`	`#c5b29c`	Para metadata, labels, captions
`text-muted`	`#8a7a6a`	Para placeholder, deshabilitado
`text-inverted`	`#1a1511`	Text sobre backgrounds claros (botones)

Acentos (la alma de la marca)

Nombre	Hex	Inspiración	Uso
`terracotta`	`#d67a3c`	Tejas, barro	Primary accent. CTAs, focus, marca
`añil`	`#6a7ab5`	Azul Barragán, talavera	Secondary. Links, info, progreso
`nopal`	`#8aa06a`	Verde nopal, agave	Tertiary. Success, nature
`cempazúchil`	`#f5b85a`	Flor de muertos	Highlight, warning atenuado
`oxblood`	`#a14a3e`	Rojo talavera profundo	Error, urgent

Light mode (toggle optional, para lectura larga)

Base

Nombre	Hex	Uso
`paper`	`#f4ecdf`	Background principal — cal rosada
`paper-2`	`#e8dcc9`	Cards, secondary
`paper-3`	`#d4c5b0`	Inputs, code blocks
`border-cream`	`#b8a78e`	Borders

Texto

Nombre	Hex	Uso
`ink`	`#1a1511`	Text primary
`ink-2`	`#4a3d33`	Secondary
`ink-muted`	`#7a6d5f`	Muted

Acentos (ligeramente más profundos que dark mode — más densidad para contraste)

Nombre	Hex	Uso
`terracotta`	`#b85c2e`	Primary
`añil`	`#2a3a6b`	Secondary
`nopal`	`#5c6b47`	Tertiary
`cempazúchil`	`#e5a44a`	Highlight
`oxblood`	`#8b3a3a`	Error

Combinaciones canónicas

Jerarquía principal

bg: ink (#1a1511)
text: text-primary (#f4ecdf)
accent: terracotta (#d67a3c)
secondary-accent: añil (#6a7ab5)

CTA principal

Background: terracotta #d67a3c
Text: ink #1a1511 (oscuro sobre naranja cálido)
Hover: brightness 110% o slight glow cálido (NO neon)

CTA secundaria

Background: transparent
Border: añil #6a7ab5
Text: añil #6a7ab5
Hover: background añil con 10% opacity

Estados semánticos (en brand, NO en verde/amarillo/rojo default)

Estado	Color	Uso
Success	`nopal #8aa06a`	✓ entregado, completado
Info	`añil #6a7ab5`	ℹ progreso, neutro
Warning	`cempazúchil #f5b85a`	⚠ atención
Error	`oxblood #a14a3e`	✕ falló

Chapter themes (re-mapeados de Dirección C)

Cada chapter sigue teniendo tema visual, pero ahora en la paleta del brand, no genéricos:

Chapter topic	Theme	Accent	Gradient sutil (solo en header)
Ecosystem / overview	`terracotta`	`#d67a3c`	`from-[#1a1511] via-[#2a1f18] to-[#1a1511]` con hint de terracotta
Architecture / structure	`añil`	`#6a7ab5`	igual pero con hint de añil
Skills / customization	`cempazúchil`	`#f5b85a`	con hint marigold
Automation / hooks	`nopal`	`#8aa06a`	con hint verde
AI concepts / agents	`oxblood`	`#a14a3e`	con hint rojo profundo
CLI / terminal	`text-secondary`	`#c5b29c`	monocromo cálido

Regla crítica: los gradients NO son glow — son sugerencias muy sutiles (5-10% tint max). El fondo principal sigue siendo ink.

Anti-palette — colores que NO usamos

Estos son los tells de “AI default” que explícitamente rechazamos:

Color	Hex aprox	Por qué no
Violet neón	`#8b5cf6`, `#a78bfa`	Default de Tailwind/Vercel/Linear. Dice “generated by AI”.
Purple gradient	`#a855f7 → #ec4899`	Usado en TODO startup de AI. Muerto.
Pink neon	`#f472b6`	Reel glitch, demasiado trendy 2023-2024
Cyan glow	`#22d3ee`	Cyberpunk default, vacío de contenido
Pure green #00ff00	`#00ff00`	Matrix cliché
Discord blurple	`#5865f2`	Corporate gaming
Pure black	`#000000`	Demasiado crudo, sin textura
Pure white	`#ffffff`	Hospital, frío
Glassmorphism bg	`rgba(255,255,255,0.1)` con blur	Overused 2021-2023

Cuándo se permite excepción

Syntax highlighting en code blocks — usa el colorscheme estándar del lenguaje (no tiene que ser brand). Pero elegir tema warm (Tokyo Night Warm, One Light, Solarized) antes que tema cool (Dracula, Atom One Dark Cool).

Uso práctico — ejemplo de página

Hero section (landing de lesson):

bg: ink (#1a1511)
h1: text-primary (#f4ecdf), font Fraunces 64px
subtitle: text-secondary (#c5b29c), font Work Sans 20px
accent underline: terracotta (#d67a3c), 3px
cta primary: terracotta bg, ink text

Chapter card:

bg: ink-2 (#24201a)
border: border-warm (#3a2f25), 1px
theme accent stripe: [chapter theme color], 4px left border
title: text-primary, Fraunces 20px
meta: text-secondary, Work Sans 12px monospace

Code block:

bg: ink-3 (#2f2a22)
text: text-primary
syntax: Tokyo Night Warm theme
file-header: text-secondary background ink-2

Verification

Para cada decisión de color, preguntar:

¿Está en esta lista? Si no, ¿por qué?
¿Satura el espacio? La paleta es cálida pero minimal — NO todo es terracotta.
¿Estoy usando más de 2 acentos en la misma vista? Generalmente no. Máx 2 + neutros.
¿El contraste cumple WCAG AA? Especialmente text-primary sobre ink, text-secondary sobre ink.