Sistemas de diseño de IA
Sistemas de diseño extraídos de sitios web de productos, modelos e investigación de IA: asistentes, proveedores de modelos y herramientas de IA. Algunos combinan una tipografía editorial y tranquila con paletas neutras cálidas; otros adoptan el aspecto oscuro y técnico de los productos para desarrolladores.
4 ejemplos de DESIGN.md en esta categoría, de Anthropic, Harvey, Paperclip y xAI. 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.
Anthropic
El sistema de diseño de Anthropic es una identidad sobria y guiada por la tipografía, construida en torno a dos tipografías personalizadas, Anthropic Serif y Anthropic Sans, sobre un fondo marfil cálido (#faf9f5). La paleta es deliberadamente mínima: negro casi puro (#141413) sobre un blanco roto cálido, con tonos piedra apagados para el texto secundario y los bordes. La tipografía serif de gran tamaño sostiene la voz editorial, mientras que una sección de panel oscuro (fondo casi negro con texto marfil) crea un contraste dramático. En conjunto, la estética transmite seriedad intelectual y una misión centrada en la seguridad, mediante amplios espacios en blanco, un fuerte contraste tipográfico y ninguna ornamentación decorativa.
Harvey
La identidad de diseño de Harvey se basa en una tipografía propia de dos familias: HarveySerifFont para transmitir autoridad editorial y HarveySansFont para una claridad funcional. Se combina con una barra de navegación en un negro cálido casi puro (#0f0e0d) y una superficie de contenido en un marfil apagado (#fafaf9). La paleta es deliberadamente monocromática, con una escala de grises cálidos (gray-50 a gray-950) y sin tonos de acento, lo que transmite confianza y sobriedad, apropiadas para trabajos jurídicos de alto riesgo. La elevación se logra mediante el contraste entre superficies, no con sombras. El titular principal usa una serif grande de 72px, que crea autoridad tipográfica inmediata, mientras que el texto de cuerpo y los elementos de interfaz emplean la sans personalizada. El espaciado sigue una cuadrícula base de 8px con tokens de escala con nombre (xs, sm, md, xl, 2xl).
Paperclip
Paperclip es una plataforma de gestión de agentes de IA con un diseño audaz de lienzo oscuro, anclado en un fondo casi negro (#0a0a0a) y un texto principal blanco (#ffffff). El hero se define por una ilustración de degradado multicolor de formas apiladas tipo píldora o cápsula en magenta, violeta, verde azulado, naranja y amarillo, que crea una identidad visual cromática y enérgica sobre el fondo oscuro. La tipografía combina Inter Tight (condensada, titulares gruesos con espaciado entre letras negativo) con Inter (cuerpo y UI) y JetBrains Mono (código y estados). El botón principal de llamada a la acción es una píldora blanca sobre fondo oscuro. Un sistema de estados en verde (#22c55e) señala los estados de agentes y tareas en toda la interfaz del producto. La navegación es mínima y plana, con un borde inferior sutil.
xAI
El sitio de marketing de xAI emplea una paleta de superficies en tonos marfil cálidos, anclada en --color-ivory (#f9f8f6) y --color-white (#ffffff), con #0a0a0a casi negro como color de texto y primer plano dominante. El sistema tipográfico se divide entre universalSansDisplay para los titulares grandes (60–72px, con un interletraje negativo y ajustado), universalSans para el texto de cuerpo y la interfaz, y GeistMono para el código y los contextos de terminal. El lenguaje de radios está dominado por formas de píldora de 9999px en los botones de llamada a la acción y las etiquetas, con 12px y 6px para tarjetas y campos de entrada. La elevación es mínima: las tarjetas usan una sombra suave de múltiples capas, mientras que la mayoría de las superficies son planas. El tono general es técnico y premium: color contenido, espacio en blanco generoso y una fuerte estética de código monoespaciado que transmite credibilidad para desarrolladores.
¿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.