Libro de estilo

• Documento de marca · WK-ESTILO-001 · desde 2026-08-30

La cara visual de Wordkers. Un sistema, no una colección de gustos: colores, tonos y su porqué, para que todo lo que hacemos se reconozca como de la misma casa — y para que quien mantiene (Chance) sepa a qué homogeneizar.

La idea: «tierra y tallado en piedra»

Wordkers es una casa de letras —diccionarios, morfología, el verbo, la palabra madre—: un producto humanístico, de página e imprenta, no una app de tecnología. La piel cuenta esa misma historia.

• El fondo es tierra: un crema tostado cálido. El suelo, el entorno.
• El texto es piedra tallada: el oscuro. La inscripción.

No es tierra más un color: es un solo color cálido y todos sus tonos, del papel (claro) a la piedra (oscuro). Uno y todos a la vez.

Tres razones por las que corresponde:

1. Contenido sobre forma. Dos tonos, sin más. Menos color, más letra: la página no compite con lo que dice.
2. Conecta con Roma. La letra tallada en piedra —la capital romana— es la raíz misma del alfabeto latino. Para una casa de la lengua que además recupera el latín, no es decoración: es el origen de la letra.
3. Va por delante. En 2007 elegimos el morado cuando estaba abandonado. Hoy el morado es el default saturado de todo lo que huele a IA. La tierra tostada es el color que hoy nadie mira: el mismo instinto, un ciclo después.

La paleta

Todos los valores viven en una sola hoja, **https://cdn.wordkers.com/wk-estilo.css**, como variables CSS --wk-*. Enlázala antes del CSS propio de cada web y usa las variables — nunca hex sueltos.

Neutros cálidos, nunca grises fríos. El error a evitar es un negro o un gris azulado: desentona contra el cálido. Hasta el «negro» del título es un umbra que pertenece a la tierra.

Claro y oscuro

El mismo color, bajado de tono. En oscuro el fondo es una tierra casi negra (#17140f) y la tinta, un tostado claro (#ece6da); el acento sube a #d6a468. La hoja resuelve los dos modos sola (respeta prefers-color-scheme y el toggle data-theme).

El logo

Hereda la paleta: dos versiones por contraste, tostado muy oscuro (#5a3616) sobre fondos claros y tostado claro (#e8ca9c) sobre oscuro. Se implementa como una sola silueta enmascarada teñida por --wk-logo: una pieza, dos contrastes, imposible que se desincronicen del tema.

Los dos rasterizados viven en el CDN para lo que no es CSS (favicon, redes, imprenta): https://cdn.wordkers.com/wordkers-icon-dark.png (muy oscuro) y …-light.png (claro). Favicon de la casa = el oscuro (ver «Qué pieza para qué», abajo).

Nada de «w» naranja: el logo también dejó el naranja atrás.

Qué pieza para qué

(Añadido el 2026-10-11 18:55, E-547.) Todo sale de brand y se sirve en cdn.wordkers.com con la misma ruta que tiene en brand. Las piezas derivadas (favicon, og-image, variantes del sello) no se dibujan: las genera herramientas/generar.mjs desde los svg fuente, y npm test comprueba que regenerarlas da los mismos bytes.

Lo que va en el <head> de cada web:

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="https://cdn.wordkers.com/logos/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://cdn.wordkers.com/logos/apple-touch-icon.png">
<meta property="og:image" content="https://cdn.wordkers.com/redes/og-image-wordkers.png">
<meta property="og:image:width" content="1200"><meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

**/favicon.ico tiene que existir en cada web** (TX-164: muchos navegadores y buscadores lo piden ahí aunque haya <link>), pero no se guarda copia en el repo de la web:

• Si la web se construye (un dist/ o public/ que hace deploy.sh), el build lo trae: curl -fsS https://cdn.wordkers.com/favicon.ico -o dist/favicon.ico. Igual con cualquier otra pieza que la web quiera servir desde su origen (la «w» de las herramientas de oficina).
• Si la web publica su carpeta tal cual (sin build), la copia tiene que estar: la pone un programa desde brand y figura en herramientas/copias-vigiladas.tsv con su porqué. El inventario (herramientas/inventario.py) avisa si deja de ser igual a la de brand.

Las dos webs de homenaje conservan sus iconos: el conjugador el suyo (servido en su /favicon.ico) y el libro del verbo en sus páginas (su portada, que va con el estilo de la casa, lleva el de la casa). Aclarado es marca aparte, con dominio propio: sus fuentes svg están también en brand (logos/aclarado-*.svg).

Cómo se pide una variante nueva

1. Se pide como tarea (TX) de brand diciendo para qué es (dónde va, a qué tamaño, sobre qué fondo), no cómo dibujarla.
2. Se resuelve en código: una entrada nueva en herramientas/generar.mjs que la derive de una fuente (un cambio de color sale de la tabla de wk-estilo.css; un tamaño, de pintar a otro ancho). Nada dibujado a mano que no salga del svg.
3. npm run generar la crea y actualiza herramientas/huellas.json; npm test tiene que salir 0.
4. ./deploy/sync-to-cdn.sh la lleva al CDN (si es una carpeta nueva, también a la lista blanca de webs/menu/deploy.sh).
5. Se apunta en la tabla de arriba, con fecha y hora.

El diseño del sello, la «w» y los colores no cambian por esta vía: eso es una decisión de Eduardo y se toca en la fuente.

El acento es un interruptor

Hoy el acento es tostado: la casa es monocroma, sin naranja ni azul. Pero --wk-accent queda como el único interruptor: si algún día se quiere «encender» un color, se cambia ahí y cambia en toda la casa de un solo gesto. Apagado por defecto; a la espera.

Señales (el color con un trabajo)

La casa es monocroma, pero hay un sitio donde el color significa y por eso se permite: las señales. Acierto/fallo en los juegos, validación de formularios. Son los únicos colores no-tostado, y viven también en la hoja: --wk-good (#3f8f4e, correcto) y --wk-bad (#bb4a34, rojo ladrillo, error). En tonos cálidos, para convivir con la tierra. No son marca: son información.

Nota: Molinarium (el latín) ya usaba de origen colores de tierra —crema y terracota— sin haberlo formalizado. La paleta de la casa no lo inventa: termina lo que la web más romana ya insinuaba.

Pigmentos de tierra (wayfinding por categoría)

El otro sitio donde el color hace un trabajo: orientar. En el escaparate de APIs (y en labs) cada familia tiene su color, para reconocerla de un vistazo. En la casa monocroma eso se resuelve sin arcoíris: cada familia recibe un pigmento natural distinto pero cálido, todos de la misma tierra. Guían la vista y siguen siendo coherentes. Viven en la hoja como --wk-cat-*.

Excepciones de homenaje

Dos webs no siguen este libro, a propósito, como homenaje al pasado: el libro del verbo (con su mauve) y el conjugador (onoma). No son incoherencias: no se tocan ni se «corrigen».