Cuatro design systems públicos que vale la pena estudiar, qué publica cada uno y un generador en vivo que convierte tus elecciones de color, tipografía y esquinas en una guía de estilo de una página con CSS.
Un design system es el conjunto compartido de tokens, componentes y reglas de uso con el que construye un equipo; una guía de estilo web es su forma más pequeña, una página de colores, tipografía y componentes básicos. Estudia sistemas públicos como USWDS, GOV.UK, Carbon y Atlassian, y después usa el generador de abajo para crear una guía inicial para tu propio sitio.
Qué suele contener un design system
Las listas de design systems enlazan hacia fuera y ahí se quedan. Esta página explica qué tomar de cuatro sistemas públicos bien documentados y luego te da un generador de guía de estilo funcional que dibuja botones, un campo de formulario, una tarjeta y una alerta a partir de tus elecciones y exporta las propiedades personalizadas de CSS correspondientes.
Una guía de estilo recoge reglas visuales: colores, fuentes, uso del logo y tono. Un design system añade los componentes programados, los tokens y la documentación que llevan esas reglas a los productos, y normalmente un proceso para cambiarlas. La mayoría de los sitios pequeños solo necesitan la guía de estilo más un puñado de componentes.
Los sistemas gubernamentales como USWDS y GOV.UK son públicos, explican el porqué de cada decisión y se centran en la accesibilidad. Carbon muestra cómo una gran empresa documenta componentes complejos. Atlassian es un buen modelo para nombrar los tokens según su función.
Varios publican código open source, pero cada uno fija su propia licencia y sus normas de marca, y el aspecto de un gobierno o una empresa en un sitio sin relación puede confundir a los visitantes. Lee la licencia y las normas de marca en el sitio del sistema antes de reutilizar sus componentes o su aspecto.
Empieza con un color de marca, un casi negro para el texto, uno o dos grises para bordes y superficies, y un rojo para los errores. Añade más solo cuando un componente real los necesite.
Cada regla lee una propiedad personalizada, así que cambiar --brand o --radius cambia el estilo de todos los componentes a la vez.
US General Services Administration
Tokens de diseño, componentes con pautas de accesibilidad y de implementación
Escalas de tokens para color, tipografía y unidades de espaciado
UK Government Digital Service
Estilos, componentes y patrones
Patrones para tareas completas, como pedir nombres
IBM
Componentes open source para React y Web Components, basados en la tipografía IBM Plex
Tablas de datos empresariales y diseños densos
Atlassian
Tokens de diseño nombrados por fundamento, propiedad y modificador, como color.text
Un esquema claro de nombres de tokens
Sans del sistema
Serif del sistema
Redondeada
Monoespaciada
Elige un color de marca, una pila de fuentes, un radio de esquina y un paso de espaciado. La hoja y el CSS de abajo se actualizan a la vez.
Color de marca
Pila de fuentes
Radio de esquina: {n}px
Paso de espaciado: {n}px
Texto blanco sobre tu color de marca:
(cumple 4.5:1 para texto normal)
(solo texto grande, necesita 3:1)
(demasiado bajo para texto)
Guardar
Cancelar
Correo electrónico
Título de la tarjeta
Las tarjetas agrupan una idea con su acción.
Introduce una dirección de correo con el formato [email protected]
Copiar CSS
Design systems públicos que vale la pena estudiar
Comprobado en el sitio oficial de cada sistema, octubre de 2026
Sistema
Creado por
Qué publica
Estúdialo para
Empieza gratis · Sin tarjeta de crédito