Marca

Especificación

0. Sobre esta especificación

Esta página es a la vez la especificación y una muestra de ella. Los colores, los tipos y los componentes de la primera mitad se leen de la propia hoja de estilos del sitio cuando el sitio se genera, así que no pueden alejarse del código: si la página nombra un token que la hoja de estilos ya no tiene, el build falla.

Las reglas de abajo son las lecciones del diseño del sitio, escritas para que el próximo cambio parta de ellas en lugar de redescubrirlas.

• Debe es una regla que el sitio cumple hoy. Un cambio que rompe una cambia primero la regla, aquí.
• Debería es lo predeterminado. Salir de ahí pide un motivo.
• Laguna marca un lugar donde el sitio todavía no cumple su propia regla.

Cómo mejora. Cada regla tiene un código (P1, C2…) y, cuando vino de un error o de una decisión, un origen. Una regla entra cuando un patrón se repite o un error enseña una, y sale cuando deja de ganarse el lugar. Cada revisión sube la versión y añade una línea al historial (§ 12). Las lagunas conocidas (§ 11) son donde empieza la próxima revisión.

1. Principios

• P1. Encontrar antes de inventar. Una identidad debe buscarse en lo que ya existe antes de proponerse. El amarillo sol (hsl(42 95% 50%)), Jost y Fira Code vinieron todos del primer sitio de Leon, de 2022. Origen: una primera propuesta, tipográfica y terracota, se hizo sin mirar, y se reemplazó el mismo día.
• P2. Una idea, llevada a todas partes. El sitio tiene una sola imagen: un girasol hecho de datos, con orden en el centro y entropía en el borde, información organizada contra el ruido. Cada motivo es una forma menor de ella: la marca, el favicon, los puntos de tema, el amarillo bajo los enlaces. Un motivo nuevo debe leerse como parte de esa idea, o no entra.
• P3. Un concepto simple, hecho con cuidado. La profundidad va al comportamiento, no a más elementos. Leon, sobre el primer girasol: “looking nice for a simple concept.”
• P4. Cada lector recibe un sitio entero. Sin JavaScript, sin movimiento, sin las fuentes web, el sitio debe seguir completo. La mejora solo añade.
• P5. Nada sale del dominio. Ninguna fuente, script ni analítica de terceros. Las fuentes vienen de Fontsource, empaquetadas en el build.
• P6. El contenido sobrevive al diseño. Los textos son Markdown puro en content/, fuera del código. El diseño nunca debe necesitar marcado dentro de un texto; el sitio ya fue Gatsby y Next.js, y los textos tienen que sobrevivir al próximo cambio de herramienta.
• P7. El origen es parte del diseño. Cada texto dice en qué idioma lo escribió Leon y de dónde vino. La nota de traducción es un elemento diseñado, no letra pequeña.
• P8. Probado, no juzgado. Una afirmación de diseño se comprueba con algo que puede fallar: el contraste se calcula (la tabla de arriba), la animación se mide (S7), los enlaces se cuentan después de cada build.

2. Color

La paleta tiene diez colores con nombre; los componentes usan roles. Un tema es solo un cambio de roles.

• C1. Roles, no colores. Los componentes deben usar los tokens de rol (--bg, --ink, --muted…). Los nombres de la paleta solo aparecen dentro de las definiciones de rol y en el par de la marca (C3).
• C2. El amarillo sol es luz, no tinta. Sobre fondo claro el amarillo nunca debe llevar texto: ahí llega a 1,8:1. Es superficie: la franja del encabezado, el resaltador bajo los enlaces, el anillo de foco, las viñetas. En el tema oscuro, donde llega a 9,7:1, se vuelve el color del nombre.
• C3. El par de la marca es fijo. Marrón sobre sol (8,8:1) es igual en los dos temas: el hover de los enlaces, el enlace para saltar, la insignia de ensayo.
• C4. El ocre es para cosas grandes. El ocre llega a 3,6:1 sobre el fondo claro: puede colorear numerales, viñetas, títulos al pasar el puntero y otras marcas grandes o decorativas, nunca texto corrido.
• C5. El oscuro es cálido. El tema oscuro es marrón, nunca gris neutro ni negro, y su texto es crema, nunca blanco puro. El fondo claro es blanco cálido por la misma razón.
• C6. Los temas guardan su color. Significado es sol, modelado es ocre, organización es musgo, fundamentos es el segundo marrón (marrón claro en el oscuro), carrera es salvia, cada uno un token --topic-*. Un tema tiene el mismo punto en todas partes. El punto siempre está junto a su etiqueta, así que no necesita 3:1, pero debe seguir visible: al menos 1,5:1 sobre su superficie, medido en la tabla de contraste. Origen: el punto de fundamentos estaba a 1,3:1 sobre los chips oscuros, y un CSS muerto escondía el anillo que debía salvarlo.
• C7. El contraste se calcula. Los pares de texto deben llegar a WCAG AA (4,5:1) en los dos temas; el texto grande y las marcas, a 3:1. La tabla de arriba se calcula a partir de la hoja de estilos en cada build.
• C8. El girasol sigue al tema. Sus colores vienen de --dot-1 a --dot-4, resueltos en vivo por un elemento sonda oculto (un canvas no lee light-dark()), así que cambiar de tema lo recolorea sin recargar.
• C9. Una línea por rol. Cada rol se define una vez, como light-dark(<claro>, <oscuro>); un tema no es más que color-scheme. Origen: la v0.1 escribía cada valor oscuro dos veces, una para el sistema y otra para el selector. Costo: light-dark() necesita un navegador de 2024 en adelante; uno más antiguo cae en sus colores predeterminados, sin gracia pero legible (P4).

3. Tipos

• T1. Dos voces. Jost es la voz humana: la lectura, los títulos, el nombre. Fira Code es la voz de los datos: fechas, etiquetas, insignias, metadatos, código. Lo que describe un texto (su fecha, su tipo, su idioma) va en mono; el texto mismo, en Jost.
• T2. Las etiquetas son mono, peso 500, en mayúsculas, con espaciado de 0,06em, en --step--1, en --muted.
• T3. La escala. El cuerpo es --step-0 (1,1875rem) con interlineado 1,65. Los títulos van con interlineado 1,1 y espaciado de -0,02em. El tamaño de exhibición, fluido, --step-3, es del nombre en la portada; los títulos de página usan --step-2.
• T4. Ancho de línea. El texto corrido debe quedarse dentro de --measure (40rem). Las páginas de índice usan 48rem; solo la portada usa --wide (68rem).
• T5. Las secciones en prosa empiezan con un § de sol. Un texto no tiene H1 en el cuerpo: la página muestra el título.

4. Diseño y espacio

• L1. Un solo envoltorio. .wrap, hasta --wide, con --gutter (1,25rem) a cada lado.
• L2. Tres puntos de quiebre, en rem, para seguir el tamaño de fuente del lector: 34rem (teléfono: las listas pasan a una columna, el encabezado se apila), 44rem (la portada pasa a una columna, el sol encima del texto), 52rem (las dos columnas de la portada pasan a una).
• L3. Ritmo. Márgenes, rellenos y separaciones deberían venir de la escala --space-1 a --space-6 (0,5, 1, 1,5, 2,5, 3,5, 5rem). Las secciones quedan a --space-5 entre sí; los elementos de un grupo, de --space-2 a --space-3. Un valor fuera de la escala pide un motivo; los que quedaron de antes de la escala entran en ella cuando se toque su regla.
• L4. Franjas. El encabezado es la superficie de la portada (amarillo en el claro, marrón en el oscuro). El pie es marrón oscuro en los dos temas y lleva el lema en sol.

5. Motivos y componentes

• K1. La marca es un disco de sol con el centro oscuro: el girasol a dieciséis píxeles. El favicon es el mismo disco sobre marrón.
• K2. Los enlaces son un resaltador: una franja de --mark bajo el tercio inferior del texto. Al pasar el puntero se llena de sol y el texto se vuelve marrón (C3). La navegación y los títulos prescinden de la franja: la navegación subraya, los títulos cambian de color.
• K3. El foco es un anillo de sol de 3px, a 3px de distancia, en todo lo que recibe foco.
• K4. Las insignias (tipo, borrador) son mono, 0,68rem, en mayúsculas, con radio de 4px. Ensayo es el par de la marca; nota es discreta (fondo de chip, filete); borrador es musgo con blanco.
• K5. Los chips (temas, el índice de conceptos) son píldoras sobre --chip-bg, con el punto del tema cuando representan un tema.
• K6. Los guijarros (las tres creencias de la portada, la tarjeta de la comunidad) son --chip-bg con un radio irregular, un guijarro y no una caja, numerados en ocre mono. Bajo el puntero, el guijarro sube 4px y se inclina menos de un grado. Origen: 0.4; hasta entonces, una tarjeta con radio de 12px.
• K7. El selector de idioma muestra los idiomas en que existe la página, el actual invertido. Nunca ofrece un idioma que la página no tiene.
• K8. El selector de tema son tres íconos (sistema, claro, oscuro), con aria-pressed en el actual.
• K9. Divisores. Un filete de 1px en --rule entre elementos de lista. En la prosa, una barra corta de sol de 4px.
• K10. El personaje es Leon en una caricatura 3D suave (generada con Gemini a partir de sus fotos, recortada en WebP con transparencia por scripts/cutout.py). Una escena por idea del sitio, nunca solo adorno: el héroe está de pie frente al girasol, cada creencia tiene su escena sobre una mancha suave (sol, salvia, sol). Toda escena tiene un texto alternativo de verdad, en cada idioma. Las escenas flotan despacio (6 a 7 s, 6px) y se quedan quietas con reducir movimiento. Origen: 0.4, cuando Leon publicó su propia imagen (2026-11-03).
• K11. Las colinas cierran una sección: una curva suave, dibujada una vez, del color de lo que viene después (el héroe hacia --bg, la página hacia --footer-bg). Decorativas, aria-hidden.

6. El girasol

La gravedad como conciencia, reuniendo datos (Leon). Unas 900 semillas en una esfera de Fibonacci, vista desde un polo que se inclina hacia el lector, girando despacio. En reposo, el núcleo es denso y el borde se dispersa como datos sueltos que flotan bajo el título. Cuando el puntero se acerca al centro, las semillas caen a su lugar con masa: aceleran, se pasan un poco, giran en espiral y se asientan, y las espirales de Fibonacci (21 y 34) aparecen como líneas finas. Respira, y una ola de luz corre del polo al borde cada pocos segundos.

• S1. El movimiento significa algo. El orden sigue a la atención: solo el puntero cerca del centro ordena los datos. El movimiento no debe ser solo adorno.
• S2. Tiempo, no cuadros. El suavizado y la física deben ser funciones del tiempo transcurrido (1 − e^(−k·dt)), y la física corre en pasos de como mucho 1/120 s, para que el sol se comporte igual a 30, 60 o 120 Hz. Origen: el suavizado por cuadro era un error; el sol corría más rápido en pantallas más rápidas.
• S3. Pausar cuando no se ve. El bucle se detiene mientras el canvas está fuera de la pantalla.
• S4. Tres niveles. Sin JavaScript: un SVG plano de 560 puntos, generado en el build, en el mismo lugar. Con movimiento reducido: un cuadro quieto de la versión 3D. Si no, el canvas vivo, apareciendo poco a poco sobre el SVG.
• S5. Ubicado por el CSS. La posición y el tamaño vienen de --sun-x, --sun-y y --sun-d en el contenedor; el script los lee a través del SVG plano, así que el diseño se queda en la hoja de estilos.
• S6. Ajustado en un solo lugar. Los parámetros (N, CAP, TILT, SPIN, NEAR, FAR, BREATH, WAVE) están al principio del script, con nombre y comentario.
• S7. Medido, no mirado. La animación se prueba simulando el puntero y contando cuadros. Origen: el panel del navegador de la app a veces informa movimiento reducido, y deja de animar cuando su ventana está fuera de la pantalla; mirarlo no probaba nada.

7. Tema

• M1. Tres estados: sistema (el predeterminado), claro, oscuro. La elección vive en el navegador del lector (localStorage, clave theme) y se vuelve data-theme en el <html>, que solo fija el color-scheme (C9).
• M2. Sin parpadeo. Un script en línea en el <head> restaura la elección antes del primer dibujo.
• M3. Todo cambia de tema a través de los roles, incluidos el girasol y el theme-color del navegador; las metaetiquetas leen --hero-bg de la hoja de estilos en el build.

8. Idioma y voz

• V1. Tres idiomas: inglés en /, portugués en /pt/, español en /es/. Las palabras de la interfaz viven en src/i18n.ts; todo lo demás es contenido.
• V2. La voz de Leon nunca se inventa. Saci organiza, recorta, enlaza y traduce. Las ideas que Saci añade se marcan y se le cuentan a Leon. La primera persona que no es de Leon queda como borrador.
• V3. Cada texto muestra su origen: “Escrito en …” o “Traducido del … con Saci”, y la fuente.
• V4. Las citas de otros quedan por debajo de quince palabras, con el nombre del autor.
• V5. El marco habla claro: frases cortas, sin hype. El sitio defiende los fundamentos frente al hype; sus propias palabras no deben vender.
• V6. Los nombres accesibles hablan el idioma de la página, como cualquier otra palabra del marco: viven en src/i18n.ts.
• V7. Las traducciones acompañan. Esta especificación se escribe en inglés y se traduce con Saci al portugués y al español, un archivo por idioma en src/brand/spec/. Cada archivo declara la versión que dice; una traducción atrasada respecto al original rompe el build, para que ningún lector reciba reglas más viejas que otro.

9. Accesibilidad

• A1. Un enlace para saltar es lo primero que recibe el foco.
• A2. Las regiones y los grupos de controles tienen nombre.
• A3. El contraste sigue a C7; el foco, a K3; el movimiento, a S4.
• A4. Los gráficos decorativos (el girasol, la marca, los puntos de tema) quedan ocultos para las tecnologías de asistencia.
• A5. Los colores forzados (el alto contraste de Windows) reemplazan los fondos, así que los enlaces recuperan el subrayado, e insignias y chips un borde; la marca y los puntos de tema conservan sus colores.
• A6. La impresión es el texto en tinta sobre papel: sin franjas, sin sol, sin controles; el código pasa a tinta y corta la línea.

10. Cómo se toman aquí las decisiones de diseño

• D1. “Sin preferencia” no es carta blanca. Antes de elegir por Leon, mira lo que Leon ya hizo. Origen: la herramienta se eligió antes de leer la historia del sitio; la historia cambió la pregunta.
• D2. La carta blanca sigue siendo una propuesta. “Be creative” (Leon) quiso decir: proponer, mostrar, afinar juntos en pasos pequeños y registrar quién decidió qué.
• D3. Las decisiones viven donde duran: el porqué en la nota del proyecto en la Mente, el cómo en el repositorio, las reglas en esta página.
• D4. La estructura viene del uso. Ningún token, componente ni regla nueva hasta que un patrón se repita.

11. Lagunas conocidas

Donde empieza la v0.5.

• Los colores forzados están escritos, no probados (A5): los navegadores a mano no los simulan. Necesitan una mirada en Windows con un tema de contraste.
• Dos navegaciones comparten un nombre: el selector de idioma y la lista de idiomas del pie se llaman ambos “Idioma”.
• Espacios fuera de la escala (3rem, 2rem, 0,75rem y otros) quedaron de antes de la L3.
• Dos puntos de tema pasan justo sobre los chips claros: significado a 1,6:1 y carrera a 1,9:1, frente a un mínimo de 1,5.
• Las escenas son capturas de 800px de la ventana de Gemini, no los archivos en tamaño completo: sirven en los tamaños usados, se ven suaves en pantallas grandes. El tamaño completo viene por Chrome (K10).
• K10 y K11 aún no tienen muestra en esta página, solo en la portada.

12. Historial

• 0.4 · 2026-11-03. La portada con el personaje sale al aire: la imagen de Leon, por decisión suya. Reglas nuevas K10 (el personaje) y K11 (colinas); las tarjetas de K6 se vuelven guijarros. Las escenas salen del <Image> de Astro (tamaños y srcset).
• 0.3 · 2026-11-02. La página en tres idiomas: las reglas en src/brand/spec/<idioma>.md, las palabras de la página en src/brand/ui.ts, y una comprobación en el build que mantiene las traducciones en la versión del original (V7).
• 0.2 · 2026-11-02. Cerradas las lagunas de la 0.1. Cada rol es una línea light-dark() (C9). Los colores de tema se volvieron tokens; el punto de fundamentos vuelve a verse en el oscuro (C6), y el CSS muerto a su alrededor se fue. Los nombres accesibles se tradujeron (V6). El theme-color lee los tokens (M3). Una escala de espacio (L3, probada sin cambiar ningún valor). Reglas para colores forzados e impresión (A5, A6); la impresión comprobada imprimiendo a PDF.
• 0.1 · 2026-11-02. Primera versión, extraída de las sesiones que construyeron el sitio: la identidad, el girasol, el selector de tema.