Cinco herramientas para desarrolladores que se muestran.

Oxide Computer

Oxide vende un rack de servidores y lo presenta como en un manual: la imagen lleva un rótulo, «Fig. 1 Oxide Cloud Computer», y una línea fina la une a una terminal con tres pestañas (CLI, API, Console), las tres maneras de manejarlo. El título es una frase que entiende quien compra: on-prem que se siente como la nube pública.

El verde es uno solo y está en todo lo que es de Oxide: el logo, las luces del rack, el botón de contacto. Nada más tiene color.

La idea: elige un lenguaje que tu público ya conoce (aquí, el de la documentación técnica) y úsalo en serio, con rótulos y figuras, no como adorno.

Zed

Zed pone sus dos productos lado a lado, cada uno con su color (rojo para Delta, azul para Zed), su logo, una línea que dice qué es y el año en que nació. Debajo, el editor entero: la lista de proyectos, una conversación con el agente sobre un cambio en sum_tree.rs y el diff en rojo y verde.

Ese editor no es una imagen: el texto de la conversación y del código está en el HTML de la página. Se puede leer y seleccionar, y lo leen los buscadores.

La idea: si tu producto es una interfaz, muéstrala con contenido verosímil y específico, no con barras grises de relleno. El detalle convence más que el eslogan.

Fly.io

Fly.io usa lila y violeta, los colores que en cualquier otra web serían la primera sospecha. Aquí no lo son, porque lo que ocupa la pantalla son ilustraciones dibujadas a mano y con humor: islas flotantes bajo cúpulas, globos, un cohete, un cubo con cara. Nadie las confunde con las de otra empresa.

El título va en serif, con la segunda línea en cursiva, y debajo hay una sola frase con lo que obtienes. Otro detalle, en el HTML: un aviso para los agentes de IA que les pide volver a pedir la página en Markdown y les señala su llms.txt.

La idea: el color no es lo que hace genérica una web; lo es no tener nada propio encima. Una ilustración hecha para ti cambia todo lo que la rodea.

Ghostty

Ghostty es un emulador de terminal y su portada es una terminal: una ventana con el fantasma del logo dibujado con caracteres, como se dibuja en una consola. Debajo, una frase con lo que es (rápido, multiplataforma, con interfaz nativa y aceleración por GPU) y dos botones, descargar y documentación.

La idea: haz que la portada sea una muestra del producto. Si tu herramienta dibuja texto, dibuja con texto; si hace gráficos, que el hero sea un gráfico.

htmx

htmx es la más austera de las cinco: logo, un recuadro de noticias y texto. Pero el recuadro dice algo concreto (salió htmx 4.0, no está marcado como latest en NPM para que quien usa 2.x no actualice por error, y lo marcarán en algún momento de 2027) y, un poco más abajo, la página trae la etiqueta <script> para copiar y un botón de ejemplo con hx-post.

La idea: para un público técnico, el código que funciona es la mejor imagen. Una portada que deja probar el producto en diez segundos no necesita hero.

Lo que comparten las cinco

• El producto va primero. Una terminal, un editor, un rack, un fragmento de código: algo que solo puede ser de ellos.
• Texto específico. sum_tree.rs, «Fig. 1», htmx 4.0 y 2027 en lugar de «la plataforma para equipos modernos».
• Un color con trabajo. El verde de Oxide, el rojo y el azul de Zed, el azul de htmx: cada uno marca algo, no decora.
• Una decisión propia de tipografía: la monoespaciada de Oxide, la serif con cursiva de Fly.io, la cursiva monoespaciada de Zed.

Si tu web también es de software y oscura, el Slop Score te dice si cae en «Modo oscuro con texto gris apagado» o en «Glow de color en cajas y botones», los dos atajos del rubro. Y si quieres resolver la letra como Oxide o Fly.io, empieza por otra fuente para los títulos.