# Tokens semánticos y gráficos sin dependencias: cómo se asienta una base visual

El color pasa solo por tokens semánticos, seis paletas predefinidas se combinan con colores base y de tema, y cada gráfico se dibuja como SVG.

> Runlume ofrece funciones de plataforma, aplicaciones empresariales independientes y servicios profesionales que pueden combinarse según las necesidades. Funciones, cuotas y alcance dependen del plan o acuerdo de servicio. Las aplicaciones empresariales pueden elegirse por separado; la colaboración sigue las integraciones y autorizaciones configuradas.

Página original: https://runlume.app/es/blog/admin-design-tokens-and-charts

Guías para desarrolladores · Tema y color / Componentes / Accesibilidad

Publicado：2026-09-17 · Autor：Equipo de Runlume

La deriva visual de un panel casi nunca viene de un cambio grande, sino de valores de color, espaciados y componentes de un solo uso repartidos por el código: el mismo «éxito» aparece en tres verdes distintos y cambiar de tema obliga a tocar decenas de archivos.

admin-design empieza por los tokens y las estructuras, y solo después habla de páginas.

## El color describe el propósito, no el valor

El color pasa solo por clases de utilidad semánticas: `bg-card`, `text-muted-foreground`, `text-success`, `border-destructive`. Cambiar de tema cambia tokens, no código de negocio.

Las paletas funcionan en dos capas: seis predefinidas (teal, blue, forest, violet, amber, graphite y personalizada) fijan el tono general, mientras los colores base (neutral, stone, zinc y otros) y los colores de tema entre dieciocho matices lo ajustan. Los modos claro y oscuro guardan elecciones separadas.

La accesibilidad no es un añadido: tamaño y peso de texto, alto contraste, apoyo a la visión del color, reducción de movimiento y enlaces subrayados están en ajustes. Las preferencias quedan en el navegador y nunca entran en los datos de negocio.

## Todos los gráficos son SVG dibujado a mano

Líneas, barras, anillos, mini barras, barras horizontales, mapas de calor, radar, embudo y Gantt comparten un mismo juego de colores semánticos, siguen los modos claro y oscuro y llevan `role="img"` con una `aria-label` que explica qué muestra el gráfico.

El precio de cero dependencias es mantener coordenadas y escalas. La recompensa es el control sobre el tamaño del paquete, las auditorías y la coherencia del tema: no hay un segundo sistema de color que sincronizar.

## La galería es la superficie de aceptación

Nueve categorías de componentes viven en nueve páginas y cada control tiene una ubicación real. Modificar un componente exige actualizar antes su ejemplo en la galería; una capacidad nueva se entrega como ejemplo, ubicación real y prueba. La documentación no puede separarse de la implementación y la revisión tiene un único lugar con el que comparar.

## Páginas relacionadas

- [Plataforma](https://runlume.app/es/platform)
- [Aplicaciones empresariales](https://runlume.app/es/apps)
- [Desarrolladores](https://runlume.app/es/developers)
- [Acerca de Runlume](https://runlume.app/es/about)