# Design System

Explora 7 herramientas de Design System desde el navegador. El procesamiento se realiza en servidores de Elysia Tools; el texto no se guarda y los archivos subidos se eliminan tras 6 horas.

> Página canónica: https://elysiatools.com/es/tags/design-system

## Descripción general

Las herramientas de Design System te ayudan a trabajar con recursos y flujos relacionados con sistemas de diseño desde una interfaz web, sin instalar software.

## Preguntas frecuentes

### ¿Qué puedo hacer con las herramientas de Design System?

Puedes explorar y utilizar 7 herramientas relacionadas con Design System desde el navegador para trabajar con tus recursos y flujos de diseño.

### ¿Necesito instalar algún programa?

No. Puedes acceder a las herramientas desde el navegador, sin instalar software.

### ¿Cómo se gestionan mis datos?

La interfaz se utiliza en el navegador, pero el procesamiento se realiza en los servidores de Elysia Tools. Los textos no se almacenan y los archivos subidos se eliminan automáticamente después de 6 horas.

## Herramientas

- [Comprobador de contraste de paleta accesible](https://elysiatools.com/es/tools/accessible-color-palette-contrast-checker): Audita combinaciones de color segun WCAG 2.1 AA y AAA y propone ajustes
- [Calculadora clamp de tipografia fluida CSS](https://elysiatools.com/es/tools/css-fluid-typography-clamp-calc): Introduce viewport y tamaños mínimos y máximos para obtener clamp(), CSS copiable y datos de vista previa
- [Extractor de tokens de tema ECharts](https://elysiatools.com/es/tools/echarts-theme-token-extractor): Extrae design tokens — colores, números, tamaños de fuente y cadenas — de un JSON de tema ECharts y expórtalos directamente a tu design system. Pega un objeto de tema (el que registras y pasas a echarts.init(dom, themeName)) y la herramienta recorre cada hoja, etiquetando cada color (con normalización opcional nombrado/rgb → hex), número de espaciado, tamaño de fuente y cadena, para luego emitir variables CSS limpias, una configuración theme.extend de Tailwind, tokens.json de Style Dictionary o variables SCSS. Tiende el puente entre un tema de visualización ECharts y los tokens de diseño Figma/CSS/Tailwind sin copiar cada valor a mano.
- [Exportador de Tokens de Figma](https://elysiatools.com/es/tools/figma-tokens-export): Pega un JSON de variables de Figma / Tokens Studio y exporta a Tailwind, variables CSS shadcn, Style Dictionary o SCSS. Conserva tokens de color, espaciado y fuente con inferencia de tipos.
- [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-design-tokens): Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos
- [Sincronizador de paleta Tailwind](https://elysiatools.com/es/tools/tailwind-color-palette-sync): Introduce HEX, elige esquema de nombres (escala 50–950 / nombre único / anidamiento) y genera el fragmento theme.extend.colors de tailwind.config.ts con niveles WCAG AA/AAA por color. Modo oscuro opcional.
- [Laboratorio de Emparejamiento de Fuentes Web](https://elysiatools.com/es/tools/webfont-pairing-lab): Previsualiza un emparejamiento de Google Fonts de titular + cuerpo con controles de peso e interlínea, y copia un snippet CSS @import + variables listo para pegar. Registro curado de 22 fuentes y 7 presets.

## Contenido relacionado

- [CSS](https://elysiatools.com/es/tags/css): Explore 48 herramientas de CSS desde el navegador. Procese texto y archivos en nuestros servidores; el texto no se guarda y los archivos se eliminan tras 6 horas.
- [HTML/CSS](https://elysiatools.com/es/tags/html): Explore 86 herramientas de HTML, CSS y DOM desde el navegador. El procesamiento se realiza en servidores; el texto no se guarda y los archivos se eliminan tras 6 horas.
- [Color](https://elysiatools.com/es/tags/color): Explore 214 herramientas de color para trabajar con valores HEX, RGB, HSL y paletas desde el navegador, sin instalar software.
- [Paleta de colores](https://elysiatools.com/es/tags/color-palette): Explora 10 herramientas para trabajar con paletas de colores desde el navegador. El texto no se guarda y los archivos subidos se eliminan tras 6 horas.
- [Variables CSS](https://elysiatools.com/es/tags/css-variables): Explora 8 herramientas para trabajar con Variables CSS desde el navegador. El texto no se guarda y los archivos subidos se eliminan tras 6 horas.
- [Design Tokens](https://elysiatools.com/es/tags/design-tokens): Explore 5 herramientas de Design Tokens desde el navegador. El procesamiento se realiza en servidores de Elysia Tools; el texto no se guarda y los archivos se eliminan tras 6 horas.