15 ejemplos de design systems y qué aprender de cada uno

Hay cientos de design systems públicos, pero no todos enseñan lo mismo. Esta lista no es otro directorio: de cada sistema te contamos qué hace excepcionalmente bien y qué merece la pena copiar cuando construyas el tuyo. Si buscas el directorio completo, está en nuestra colección de más de 170 design systems.

# 1. Material Design (Google)

m3.material.io — El design system más influyente de la historia: definió cómo media industria entiende elevación, movimiento y theming. Material 3 introdujo el color dinámico (paletas generadas desde el fondo de pantalla del usuario).

Qué copiar: la documentación de tokens y su sistema de theming. Nadie explica mejor cómo derivar una paleta completa desde decisiones semánticas.

# 2. Carbon (IBM)

carbondesignsystem.com — El referente en productos enterprise y datos densos. Open source, con implementaciones en React, Angular, Vue y web components.

Qué copiar: sus criterios de accesibilidad por componente. Cada pieza documenta cómo debe comportarse con teclado y lector de pantalla, no como anexo sino como parte de la especificación.

# 3. Polaris (Shopify)

polaris.shopify.com — Diseñado para que miles de desarrolladores externos construyan apps que se sientan parte de Shopify.

Qué copiar: las guías de contenido. Polaris documenta cómo escribir cada texto de la interfaz (botones, errores, vacíos) con ejemplos de bien/mal. El copy es parte del sistema, no una ocurrencia posterior.

# 4. Spectrum (Adobe)

spectrum.adobe.com — Da coherencia a decenas de aplicaciones profesionales muy distintas entre sí (Photoshop, Acrobat, Express).

Qué copiar: cómo documenta las opciones de internacionalización y los estados de cada componente. Su nivel de detalle en variantes es de los más altos que existen.

# 5. GOV.UK Design System (Gobierno británico)

design-system.service.gov.uk — El estándar de los servicios públicos digitales. Cada patrón está respaldado por investigación con usuarios reales.

Qué copiar: los patrones de flujo completos (“pedir una dirección”, “confirmar una identidad”) y la sección de investigación que acompaña cada componente explicando por qué es como es.

# 6. Fluent (Microsoft)

fluent2.microsoft.design — El sistema que unifica Windows, Office y Teams, con soporte multiplataforma real (web, Windows, iOS, Android).

Qué copiar: cómo gestiona un ecosistema gigante de productos con necesidades contradictorias sin romperse.

# 7. Human Interface Guidelines (Apple)

developer.apple.com/design — Más directrices que biblioteca de componentes, pero es la referencia sobre diseño de plataforma: cómo diseñar para iOS, macOS o visionOS respetando sus convenciones.

Qué copiar: la claridad al explicar principios de interacción. Además, su sección de visionOS es hoy la mejor referencia pública de diseño espacial (lo tratamos en design systems para XR).

# 8. Lightning (Salesforce)

lightningdesignsystem.com — Pionero: el equipo de Salesforce inventó el término “design tokens”.

Qué copiar: la arquitectura de tokens, naturalmente. Es el sistema que demostró que las decisiones de diseño podían viajar como datos entre plataformas.

# 9. Primer (GitHub)

primer.style — El sistema con el que está construido GitHub. Excelente equilibrio entre pragmatismo y detalle.

Qué copiar: sus guías de interfaces densas en datos y los patrones de accesibilidad aplicados a componentes complejos.

# 10. Atlassian Design System (Atlassian)

atlassian.design — Da servicio a Jira, Confluence, Trello y compañía.

Qué copiar: la integración entre principios de marca (“audaz, optimista y práctico”) y decisiones concretas de componentes. Pocas veces la personalidad de marca baja tan bien hasta el botón.

# 11. Orbit (Kiwi.com)

orbit.kiwi — Especializado en productos de viajes, open source.

Qué copiar: es el mejor ejemplo de design system de una empresa mediana: alcance realista, documentación cuidada y componentes específicos de dominio (itinerarios, precios).

# 12. Backpack (Skyscanner)

skyscanner.design — Sistema basado en principios de atomic design.

Qué copiar: la aplicación práctica de la metodología de atomic design sin caer en el dogmatismo.

# 13. Garden (Zendesk)

garden.zendesk.com — Sistema para productos de atención al cliente.

Qué copiar: su enfoque de “componentes cultivados”: documentan el ciclo de vida de cada pieza, de experimental a estable a deprecada. Gobernanza visible.

# 14. U.S. Web Design System (Gobierno de EE. UU.)

designsystem.digital.gov — Utilizado por cientos de agencias federales.

Qué copiar: la documentación de implementación para equipos heterogéneos con niveles técnicos muy distintos, y sus criterios de accesibilidad (Section 508) integrados de serie.

# 15. Base Web (Uber)

base.uber.com — El sistema de Uber, agnóstico de dispositivo y muy orientado a theming.

Qué copiar: su API de sobreescritura (overrides) en los componentes React: flexibilidad sin abandonar el sistema.

# Qué tienen en común los mejores

Después de analizar estos quince (y los más de 170 de la colección), los patrones se repiten:

1. Documentan el porqué, no solo el qué: principios, investigación y criterios de decisión.
2. Tratan la accesibilidad como especificación, no como buena intención.
3. Los tokens son la base: todos separan decisiones (datos) de implementaciones (componentes).
4. Gobernanza visible: estados de madurez, changelogs y proceso de contribución públicos.
5. El contenido es parte del sistema: los mejores documentan cómo escribir, no solo cómo pintar.

¿Quieres construir el tuyo aplicando estas lecciones? Sigue la guía para crear un design system paso a paso y apóyate en las herramientas de nuestra página de recursos.