Ejemplos de DESIGN.md
Archivos DESIGN.md reales extraídos de sitios web públicos. Cada uno recoge los colores, la tipografía, el espaciado y los componentes de un sitio en el formato que leen los agentes de programación con IA. Abre una tarjeta para verlo y cópialo en tu repositorio.
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.
Airbnb
El sistema de diseño de Airbnb se basa en una única fuente variable propietaria (Airbnb Cereal VF), una paleta de neutros casi monocromática anclada en el carbón profundo (#222222) y en grises claros, con el rosa coral distintivo de la marca, "Rausch" (#ff385c), reservado exclusivamente para los CTA principales y el logotipo. El diseño es una cuadrícula responsiva de tarjetas con fotografía, con proporciones generosas de imagen y texto, esquinas redondeadas de 20px en las tarjetas y un sistema de sombras ambientales de varias capas que crea una profundidad sutil sin contrastes marcados. La barra de búsqueda es un contenedor destacado con forma de píldora que unifica la acción principal del usuario.
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.
Apple
Tokens de diseño extraídos mediante análisis de frecuencia de CSSOM, sin interpretación de un LLM.
Dribbble
El sistema de diseño de Dribbble se basa en un azul marino casi negro (#0d0c22) combinado con una superficie blanca nítida, con un acento rosa intenso característico (#ea4c89) que se usa con moderación para el énfasis editorial y los elementos interactivos destacados. Todo el sistema tipográfico utiliza exclusivamente Mona Sans en todos los pesos, y crea la jerarquía solo mediante el peso y el tamaño. Los botones con forma de píldora (border-radius: 1e+07px) y las tarjetas redondeadas (radio de 12px) definen el lenguaje geométrico. El diseño es espacioso, con una cuadrícula base de 8px, y la elevación se logra con sombras suaves en lugar de capas pesadas.
Duolingo - The world’s most popular way to learn
Tokens de diseño extraídos mediante un análisis de frecuencia sobre el CSSOM, sin interpretación de un LLM.
Figma
Figma usa un sistema monocromático en blanco y negro muy sobrio, anclado en su fuente variable propietaria figmaSans. El diseño está guiado por la tipografía: títulos de gran tamaño, de 88px/56px, con un interletraje negativo y ajustado, que contrastan con un texto de cuerpo ligero de peso 330. Los CTA usan formas de píldora totalmente redondeadas (border-radius: 9999px) en negro sólido con texto blanco. El diseño se basa en una cuadrícula con un ancho máximo de contenido de 1440px, un relleno vertical generoso de 80px por sección y un lienzo blanco limpio. La profundidad es mínima: las sombras son superposiciones sutiles basadas en oklch. Un acento lavanda o morado (#cb9fd2) aparece en el banner del pie de página. En conjunto, la estética es segura, tipográficamente sofisticada y centrada en la marca.
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).
IKEA
IKEA es una marca de referencia global, y la página de inicio de su sitio utiliza un sistema de diseño audaz y plano, con el icónico amarillo IKEA (#ffdb00) como superficie principal para las acciones y el azul IKEA (#0058a3) como acento del logotipo de la marca. Todo el sistema tipográfico se basa en una única tipografía personalizada, Noto IKEA, con los pesos 400 y 700 y una escala muy definida que va desde 14px en el texto de cuerpo hasta 51px en los titulares de impacto. La elevación se transmite únicamente mediante el contraste de color y la estructura del diseño, sin sombras. El diseño utiliza un contenedor con un ancho máximo de 90rem y un espacio de cuadrícula de 1.5rem en escritorio, además de un token de radio de borde constante de 8px aplicado a los elementos interactivos. El fondo blanco roto (#fffefb) aporta calidez frente al texto #111111, de tono casi negro, lo que crea una experiencia de lectura de alto contraste y accesible.
Klarna
El sistema de diseño de Klarna presenta un azul marino oscuro y sofisticado como color principal (#0b051d), con colores de acento brillantes que incluyen su rosa característico (#ffa8cd). El sistema utiliza fuentes personalizadas de Klarna junto con fuentes del sistema, enfatiza las esquinas redondeadas (32px es la más común) y mantiene un alto contraste para garantizar la accesibilidad. El diseño equilibra profesionalidad y cercanía mediante espaciados generosos y una jerarquía tipográfica clara.
Linear
El sistema de diseño de Linear es un producto de interfaz densa, orientado primero al modo oscuro y pensado para equipos de ingeniería. La paleta de superficies se apoya en negros casi puros (#08090a, #0f1011) con grises oscuros en capas para diferenciar la barra lateral, las tarjetas y los paneles. La tipografía es exclusivamente Inter Variable, con un interletraje negativo y preciso en los tamaños de titular, y Berkeley Mono para el código en línea. El lenguaje de radios es deliberadamente pequeño (predominan los de 2 a 6 px), y las formas de píldora se reservan para insignias y chips de estado. La elevación se expresa mediante bordes interiores sutiles de 1 px y sombras difusas de baja opacidad, en lugar de capas dramáticas. El color principal de la llamada a la acción es el índigo característico de Linear (#5e6ad2), que se usa en el botón de registro y en los enlaces clave.
Magentix Studio
Magentix Studio viste a un estudio de productos centrado en la IA con una estética editorial, propia de una galería de arte.
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.
Notion
La página de inicio de marketing de Notion combina una sección principal en azul marino profundo (#02093a) con un cuerpo de fondo claro (#f6f5f4), y usa una tipografía personalizada (NotionInter) en todos los roles de texto. El diseño emplea una cuadrícula de 12 columnas con canaletas de 28px y un lenguaje de radios doble: 8px para las tarjetas y 9999px para las píldoras. Para los elementos flotantes de la interfaz, utiliza un sistema de sombras progresivas de varias capas. El azul de marca (#2537b1) impulsa los CTA y los destacados de acento, mientras que una escala de grises semántica (de gray-200 a gray-900) estructura toda la jerarquía de texto y superficies.
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.
PayPal
PayPal de homepage en neerlandés usa un diseño audaz y orientado al consumidor, con una sección principal de un azul cielo vivo (#60cdff) y tipografía de títulos negra ultra gruesa (PayPal Pro w900). La navegación es blanca con texto negro y dos botones de llamada a la acción bien diferenciados: un botón con contorno "Inloggen" y otro relleno en negro "Rekening openen". En la parte superior hay un banner de anuncios azul marino oscuro. En conjunto, el lenguaje es de alto contraste, con bordes muy redondeados tipo píldora y una identidad guiada por su tipografía de marca, transmitiendo confianza y accesibilidad para un público amplio de servicios financieros de consumo.
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.
Shopify
La página de inicio de marketing de Shopify utiliza un vídeo de cabecera a pantalla completa de gran dramatismo, con un fondo casi negro (#02090a) que contrasta con fuerza con la barra de navegación blanca situada encima. El color de acento principal es un verde menta vibrante (#36f4a4), empleado con moderación para destacados y estados interactivos. La tipografía se reparte entre NeueHaasGrotesk, para los títulos de impacto y editoriales, e Inter-Variable, para el texto de interfaz y el cuerpo. Los botones de llamada a la acción tienen forma de píldora totalmente redondeada (border-radius: 9999px). En conjunto, el sistema transmite seguridad, alto contraste y aspiración, y está pensado para convertir a los visitantes en comerciantes.
Snapchat
Snapchat en la web usa un tema claro de alto contraste, anclado en su amarillo de marca #FFFC00 icónico, superficies principales casi negras (#121314) y un fondo de página blanco y limpio. El diseño combina Avenir Next (principal) con Graphik (secundaria) para lograr una jerarquía tipográfica amigable pero estructurada. Los elementos de interacción —botones, píldoras y etiquetas— usan radios totalmente redondeados (100px), mientras que los campos de entrada usan un radio sutil de 5px. La navegación es una píldora flotante con una sombra suave. El contenido se presenta en tarjetas de medios grandes con texto blanco superpuesto, lo que crea una disposición inmersiva centrada en la vista previa de la app. La densidad general es moderada, con espaciado generoso y una jerarquía visual clara que une las convenciones de la comunicación de marketing y de la interfaz de producto.
Stripe
Stripe, el sitio de marketing de la página principal, usa un sistema de diseño muy controlado (HDS, Stripe Design System) basado en la fuente variable "sohne-var" en pesos ligeros (300–400), una paleta de marca que va del azul marino profundo al índigo, anclada en #533afd (Stripe Indigo), y un característico degradado espectral a sangre completa en el encabezado. Los componentes tienen radios bajos (4–6 px), sombras planas o mínimas y se estructuran en torno a una cuadrícula base de 8 px. El tono general es autoritario pero cercano: infraestructura financiera comunicada mediante una tipografía segura de sí misma y un uso contenido del color.
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.
The Onion
The Onion es un sistema de diseño de un periódico satírico digitalizado: titulares góticos condensados y en negrita, en negro, con un acento verde bosque (#006b3a) distintivo que se usa en etiquetas de sección, insignias de tendencias y CTAs, todo sobre un lienzo blanco y gris claro sobrio. La tipografía es la herramienta de diseño principal: las grotescas condensadas y semicondensadas de Adobe Fonts (tablet-gothic, rocky-condensed) dominan los titulares, mientras que utopia-std-caption se encarga del texto de cuerpo. La composición es densa en información, con cuadrículas de tarjetas ajustadas, separadores de artículos con borde inferior y radios de borde casi nulos en los elementos estructurales. La elevación es mínima: solo algunas sombras sutiles en superposiciones.
Uber
El lenguaje de diseño de Uber combina un minimalismo limpio con ilustraciones vibrantes para crear una plataforma de transporte cercana pero profesional. La base en blanco y negro, de gran contraste, aporta claridad y legibilidad, mientras que las ilustraciones principales en color añaden calidez y conexión humana. La tipografía se apoya en la familia personalizada UberMove para mantener la coherencia de marca, con espacios generosos que dan aire a la interfaz en todo momento.
WIRED
WIRED es un sistema de diseño monocromo de alto contraste, con un enfoque editorial, construido sobre un sistema tipográfico propio (Breve Text, WIRED Mono, WiredDisplay y Apercu) y una paleta cromática casi nula. El negro (#000000) domina con 2961 apariciones y da cuerpo al texto, los bordes, los iconos y los estados interactivos. El blanco (#ffffff) es la superficie principal. El color de acento se usa con moderación: solo #057dbc aparece como azul de marca en los botones de suscripción. El diseño sigue una cuadrícula editorial estructurada en varias columnas, con un espaciado base ajustado de 8px, superficies planas sin sombras y radios de borde mínimos (4px como estándar). La tipografía es el principal elemento diferenciador: el cuerpo editorial usa Breve Text a 19px, las etiquetas de sección usan WIRED Mono en mayúsculas con interletrado amplio, y los titulares de gran tamaño usan WiredDisplay. La estética general es autoritaria, densa en información y orientada ante todo a la lectura.
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.