Sistemas de diseño de herramientas para desarrolladores
Sistemas de diseño extraídos de sitios web de herramientas para desarrolladores e infraestructura: hosting, bases de datos, APIs, IDEs y productos DevOps. Muchos se apoyan en superficies oscuras, acentos monoespaciados y bloques de código tratados como componentes de primera clase, con una tipografía compacta y técnica.
3 ejemplos de DESIGN.md en esta categoría, de Neon, Railway y Supabase. Extraídos de las páginas públicas de cada sitio, no son guías de marca oficiales. ¿Es tu primera vez con el formato? Lee qué es un DESIGN.md.
Neon
El sistema de diseño de Neon es una marca para desarrolladores que parte del modo oscuro: un lienzo casi negro (#000000, #18191b) con un verde neón vibrante como color primario (#00e599) y un verde medio de apoyo (#34d59a). El sistema tipográfico combina Inter (interfaz y texto corrido) con GeistMono (código y datos), ambas con un interletrado negativo ajustado. El espaciado sigue una cuadrícula base de 4px. El radio de borde es uniformemente mínimo, de 4px. La elevación se logra mediante el contraste de los bordes en lugar de sombras, con una única sombra difusa ambiental que se usa con moderación. La sección principal presenta un fondo animado de visualización de datos a sancho completo, que refuerza la identidad de marca centrada en bases de datos e infraestructura.
Railway
El sistema de diseño de Railway es una interfaz de plataforma para desarrolladores con un enfoque oscuro, anclada en superficies azul marino casi negras (#13111c, #0b0b0f), texto blanco roto de alto contraste (#f7f7f8) y un distintivo color de marca morado (#853bce / #553f83). El hero utiliza IBM Plex Serif para dar peso editorial, mientras que Inter se encarga de todo el texto de la interfaz y JetBrains Mono / SF Mono se reserva para los contextos de código. La elevación se logra mediante bordes con resplandor blanco interior (rgba(255,255,255,0.2) 1.5px inset) en lugar de sombras proyectadas, lo que da a la interfaz una estética de paneles de cristal. El sistema de espaciado se basa en múltiplos de 4px, con un ritmo marcado de 8/12/16/24/32. Los radios de borde son ajustados, con 4px como valor dominante y 8px y 16px aplicados de forma selectiva en tarjetas y contenedores del hero.
Supabase
Supabase utiliza un sistema de diseño con prioridad al modo oscuro, anclado en un fondo casi negro y profundo (oklch ~0.19) con un acento verde vivo de marca (#3ecf8e / #3fcf8e). La disposición se organiza en una cuadrícula responsiva de tarjetas de funciones. Manrope se usa para los títulos de presentación e Inter para el texto de cuerpo y la interfaz, mientras que Source Code Pro se encarga de todos los contextos monoespaciados y de código. El sistema de color se basa en propiedades personalizadas de oklch con nombres semánticos. Las tarjetas tienen un radio de 12px con un tratamiento de borde sutil, los botones usan un radio de 6–8px, y la densidad general es moderada, con una cuadrícula base de espaciado de 8px.
¿No ves el sitio que necesitas?
Pega cualquier URL y obtén un DESIGN.md de cualquier web. Colores, tipografía, espaciado y tokens, listos para tu flujo de trabajo con IA.