magholmes/cool-style

¿Qué hace cool-style?

Destilado de un análisis minucioso de cientos de sitios web independientes: sitios personales, net art, fundiciones tipográficas, archivos, estudios, herramientas pequeñas, diarios, guardados por personas que coleccionan los mejores rincones de la web (references/method.md). Nada de esto es un informe de tendencias. Es lo que esos sitios realmente hacen, contado.

Una plantilla responde a "¿cómo se ve un sitio web?" Cada uno de estos sitios responde "¿de qué trata este sitio?" y luego deja que la respuesta decida el diseño, la tipografía, el color y la única cosa que se mueve.

El canon abarca desde lo tosco hasta lo exigente: un santuario de Neocities con un fondo de GIF con mosaicos y una fundición tipográfica diseñada al píxel están ambos incluidos. Ambos son cool. Lo que falta es el término medio: el sitio que podría tratar sobre cualquier cosa.

Antes de empezar

1. Encuentra la idea primero (siguiente sección). Sin diseño, sin paleta, sin tipografía hasta que puedas expresar la idea en una oración.
2. Elige un arquetipo de la tabla inferior y, para una construcción nueva, comienza desde su iniciador: node ${CLAUDE_SKILL_DIR}/scripts/new.mjs <archetype> <dir>.
3. Mira ejemplos reales. node ${CLAUDE_SKILL_DIR}/scripts/examples.mjs <tag or word> imprime sitios estudiados que hacen un movimiento, los mejores primero (--tags lista el vocabulario; --random 5 para un impulso).
4. Si hay otro estilo de casa vigente (ej. magnus-style), este gana en tokens (rostros, colores, tiempos). Usa esta habilidad para la idea, la estructura y los movimientos.

Encuentra la idea

Pregunta (a ti mismo, o a la persona — una pregunta a la vez):

1. ¿Qué es, en una oración simple? No para qué sirve. "Un registro de cada canción que escuchó un micrófono en un poste de luz." "Notas de una revista con energía solar."
2. ¿A qué se parece? El objeto, lugar o sistema que ya se asemeja: un calendario, una tienda con horario, una hoja de cálculo, un jardín, una radio, un ex libris, un anillo, un escritorio. Esto se convierte en el contenedor (Ley 1).
3. ¿Qué es verdad sobre él que una plantilla ocultaría? Su peso, su edad, sus horas, sus datos, el clima donde se hizo, la cantidad de cosas que contiene, quién lo hizo.
4. ¿Qué es lo único que se mueve o cambia? Elige uno. El tiempo, una lectura, el puntero del visitante, el azar, otros visitantes.
5. ¿Qué haría que alguien enviara el enlace a un amigo? Ese es el movimiento característico. Todo lo demás se vuelve más silencioso para que pueda ser visto.

Escribe las respuestas al principio del proyecto (un comentario en index.html está bien). Si una respuesta es "nada", el sitio no está listo para el diseño — necesita contenido.

Las doce leyes

1. Haz que la forma actúe el tema. Los sitios más fuertes usan la propia forma del tema como contenedor. Un ensayo sobre olas se desplaza infinitamente, cada párrafo sube y vuelve (#214). Una guía de conjuntos de datos de aprendizaje automático se presenta como una hoja de cálculo (#481). Una historia de interfaces se sienta en una ventana Mac reconstruida de 1984 (#501). Un registro de música de vigilancia es un LCD de dos colores (#76). El archivo de una tira cómica diaria es un calendario anual (#21). Prueba: ¿podría este diseño contener un tema diferente sin cambios? Entonces es una plantilla.
2. Una idea, llevada a través de cada capa. La metáfora alcanza la navegación, los encabezados, las imágenes, incluso el peso de la página. Our Networks (#232) imprime su mapa del sitio como un comando tree, dibuja su portátil en ASCII y pesa 39 KB. A menudo, toda la idea es un mecanismo barato, completamente comprometido: 36 mosaicos CSS que ocultan un poema (#228), espaciado de letras impulsado por un día de datos de viento (#669).
3. Un sitio web es un lugar, no un folleto. Habitaciones, escritorios, pueblos, jardines, estanterías, cafés con horario de apertura (#828), radios, quioscos. La navegación se convierte en mobiliario: un letrero (#197), un anillo (#203), una estantería (#652), una cebolla que se pela (#789). Incluso el dominio es un nombre de lugar: aproximadamente 1 de cada 6 usa un TLD expresivo (.world, .garden, .cafe, .town, .computer, .zone).
4. Mantén una tinta. Un color sobre un fondo, y el trabajo proporciona todos los demás colores. Una cuarta parte de los sitios usa tres colores hexadecimales o menos; después de los grises, los colores más usados en todo el canon son el puro #ffff00, #ff0000 y #0000ff. Toma el acento del tema: el rojo de la cubierta del libro que se archiva (#3). → colour.md
5. Tipografía con una razón — o la del navegador, a propósito. El 69% aloja una fuente propia (Neue Haas, ABC Diatype, Monument Grotesk, Space Mono lideran); el 23% usa solo fuentes del sistema y el 9% no declara ninguna — Times y azul predeterminado como postura. Monoespaciado aparece en el 55% de las pilas. Las fuentes de plantilla están casi ausentes (Inter o Geist en ~4%). Las fuentes más declaradas de los ejemplares son Arial, Times y Helvetica. La escala es contraste: la mitad baja a 11px o menos, una cuarta parte supera los 100px, un tercio usa cuatro tamaños o menos. → type.md
6. El índice es la página de inicio. Las listas, tablas, calendarios y conteos superan a los héroes y tarjetas. Reglas (finas, punteadas) en lugar de cajas; cada elemento en las mismas ranuras; metadatos reales como columnas; conteos junto a categorías; marcas de tiempo; pesos de archivo. Una oficina de arquitectura como una hoja de cálculo (#535), datos de emisiones con una franja de cielo por fila (#522), puntuaciones como texto de dibujo de cajas (#288).
7. Dilo en una oración. La interfaz escrita como prosa: la descripción es la navegación (#316, #282, #530), una biografía con logotipos en lugar de nombres (#856), un jeroglífico donde los dibujos representan sustantivos (#547), una página completa como una oración con el registro como su última cláusula (#783). La voz es específica, humana, a menudo en minúsculas, a veces divertida, siempre honesta — una hora de cierre tachada (#828), un titular que advierte que la página es lenta (#504). → voice.md
8. Deja que una cosa esté viva. La mayoría de los sitios estudiados (86%) hacen algo — pero generalmente una cosa: la hora colorea el fondo, el clima establece un gradiente (#832), los cuadros de una cámara web se puntúan como un instrumento (#12), las letras se desplazan con el viento (#669), los visitantes aparecen como animales anónimos (#95), el sitio cierra por la noche. Un reloj necesita una razón (¿el tiempo de quién? ¿hasta qué?). → recipes.md
9. Los valores predeterminados y los objetos prestados son material. Controles de formulario nativos como estrofas de un poema (#123), un frameset como diseño (#616), un portal ISP de los 2000 para un álbum (#631), un reproductor multimedia de 2005 para una banda (#116), Clippy como banner de cookies (#179). Citar un género le da al sitio una voz gratis. La tosquedad se lee como intención solo cuando la idea es aguda.
10. Recompensa a los curiosos. Algo para el puntero, el paciente y la multitud de "ver fuente": revelaciones al pasar el cursor, palabras que se desvanecen hasta que las tocas (#360), un filtro de piscina de bolas (#479), una lente que arrastras (#254), notas en los comentarios HTML (#283), una página diferente en cada visita. Nunca escondas lo esencial allí.
11. Pequeño, estático, vinculado — construido para durar. Aproximadamente un tercio de los sitios guardados ya están muertos, rediseñados o amurallados. Las páginas simples autocontenidas (a menudo en GitHub Pages) sobrevivieron; los shells de JavaScript, los hosts retirados y los dominios caducados murieron primero. El peso medio de primera parte es de ~250 KB y una cuarta parte está por debajo de 50 KB. Enlaza hacia afuera: una cuarta parte lleva diez o más enlaces salientes en la primera página: amigos, anillos web, directorios, fuentes.
12. Cool, y amable. Los puntos ciegos del canon: solo el 17% honra el movimiento reducido, la cobertura media de texto alternativo es del 17%, el 56% elimina los contornos de enfoque, el 18% bloquea el zoom, la mitad establece el texto en 11px o menos. Haz cada movimiento con su protección (never.md, recipes.md). Lo cool que excluye a las personas es solo ruido.

Elige un arquetipo

El contenedor es la primera decisión. Descripciones completas, movimientos definitorios, ejemplares y trampas: references/archetypes.md.

arquetipo	el sitio web es…	para	iniciador	mira
notebook	un cuaderno mantenido en público	ensayos, diarios, registros de investigación, fanzines	notebook	#34 #124 #214 #362
index	un catálogo, un libro mayor, una base de datos	portafolios, archivos, colecciones	index	#3 #522 #535 #288
sentence	una oración en la que puedes hacer clic	estudios, biografías, manifiestos, pequeñas organizaciones	sentence	#316 #282 #530 #783 #856
poster	una pantalla, una palabra, una tinta	estudios, sellos, eventos, lanzamientos	poster	#7 #776 #201 #599
room	un lugar con cosas dentro	sitios personales, tiendas, colecciones	room	#9 #277 #92 #793
almanac	un calendario, un reloj, una estación	diarios, horarios, trabajo fechado	almanac	#21 #128 #243 #718
atlas	un mapa, un jardín, una red	páginas de enlaces, directorios, investigación	atlas	#81 #139 #578 #284
instrument	algo que tocas	muestras tipográficas, juguetes, herramientas, generadores	poster + recipes	#254 #615 #622 #353
broadcast	una transmisión en vivo del mundo	cámaras web, radios, datos, sensores	almanac + recipes	#12 #76 #51 #832
costume	una interfaz prestada de otra época	música, archivos, parodias, lanzamientos	—	#501 #116 #631 #61
exhibition	un número, un espectáculo, un objeto para girar	diarios, exposiciones de grado, catálogos	index	#263 #838 #677 #865
specimen	la tipografía es la interfaz	fundiciones, lettering, proyectos tipográficos	poster	#776 #195 #254 #352
commons	hecho por sus visitantes	libros de visitas, antologías, comunidades	notebook	#654 #423 #92 #249
shrine	una carta de amor a la vieja web	sitios de fans, collages, páginas personales	room	#586 #265 #441 #751

Los arquetipos se combinan (un almanaque que también es un commons), pero uno lidera.

Haz movimientos, no decoración

Un movimiento es una decisión que puedes nombrar ("la navegación es la oración", "el fondo sigue la hora"). La decoración es cualquier cosa que no puedas nombrar. references/moves.md enumera más de 70 movimientos por dimensión: idea, estructura, tipografía, color, imagen, interacción, tiempo, voz, detalles — cada uno con los sitios que lo hacen.

• Un movimiento característico, llevado hasta el final (Ley 2). Dos o tres movimientos de apoyo, más silenciosos. Todo lo demás simple. Los sitios estudiados rara vez acumulan más.
• Prefiere movimientos que provengan del contenido (el clima donde estás, la cantidad de cosas, la forma del tema) sobre movimientos que provengan de una biblioteca.
• Un movimiento que funcionaría de manera idéntica en cualquier sitio es decoración.

Flujo de trabajo

1. Idea. Responde las cinco preguntas. Escribe la oración al principio de index.html.
2. Contenedor. Elige el arquetipo; scripts/new.mjs si empiezas desde cero. Construye la estructura primero en HTML simple — los iniciadores muestran el nivel de marcado (listas reales, tablas, <time>, <details>).
3. Contenido antes que estilo. Pon las palabras reales, las imágenes reales (texto alternativo escrito ahora), los conteos y fechas reales. Los sitios cool son 80% contenido.
4. Tipografía y tinta. Elige un rostro con una razón (o el del sistema, a propósito) y una tinta sobre un fondo. Cuatro tamaños o menos, uno de ellos muy grande si el arquetipo lo requiere. type.md, colour.md.
5. El movimiento característico. Constrúyelo adecuadamente desde recipes.md — con la ruta del teclado, la ruta táctil y la variante de movimiento reducido.
6. Detalles. Favicon, título, color de selección, un colofón, última actualización, enlaces salientes, un 404 que se mantenga en el personaje. moves.md § detalles.
7. Auditoría. node ${CLAUDE_SKILL_DIR}/scripts/audit.mjs <dir> — arregla cada error; trata las advertencias como preguntas. En CI: la GitHub Action cool-check (README).
8. Míralo. Escritorio, un teléfono de 390px, solo teclado, movimiento reducido activado, red lenta. Luego la pregunta que importa: ¿alguien enviaría este enlace a un amigo? ¿Qué dirían que es?

Lista de verificación

• La idea cabe en una oración y el diseño no podría contener un tema diferente sin cambios.
• Un movimiento característico, hecho hasta el final; movimientos de apoyo más silenciosos; ninguna decoración que no puedas nombrar.
• Una tinta sobre un fondo (o una paleta que el contenido proporciona); el color significa algo.
• Tipografía: un rostro con una razón o el del sistema a propósito; ≤ 4 tamaños; el texto pequeño aún con tinta completa.
• Las palabras son reales, específicas y en una voz humana; sin verbos de folleto, sin título de andamio.
• Algo es verdadero y está vivo (tiempo, datos, conteo, lugar) — o la quietud es deliberada.
• Enlaces salientes. Un favicon propio. Un colofón o un "acerca de" que suene a persona.
• Teclado: cada movimiento accesible; foco visible. Táctil: nada depende del hover. Movimiento reducido: existe una variante estática.
• Cada imagen tiene texto alternativo (o alt="" si es decoración). El zoom funciona. lang está configurado.
• Ligero: HTML+CSS+JS de primera parte por debajo de ~250 KB a menos que la idea necesite más; funciona (o dice algo) sin JavaScript.
• audit.mjs pasa sin errores.

Referencias

archivo	lee cuando
references/canon.md	quieras la evidencia: qué tienen en común los sitios, en números
references/archetypes.md	elijas o desarrolles el contenedor
references/moves.md	elijas los movimientos característico y de apoyo
references/recipes.md	construyas un movimiento — 30 fragmentos listos para copiar con sus protecciones
references/type.md	elijas rostros, tamaños y el trabajo de la tipografía
references/colour.md	elijas la tinta, el fondo, y cuándo el color se mueve
references/voice.md	escribas títulos, navegación, biografías, páginas de acerca de, colofones, errores
references/never.md	revises: señales de plantilla y los propios malos hábitos del canon
references/catalogue.md	navegues los sitios más fuertes por arquetipo
references/method.md	de dónde viene esto y qué seguridad tener
data/sites.json	las notas de cada sitio (consulta con scripts/examples.mjs)