Tokens de diseño
Los Tokens de Diseño son el vocabulario visual de nuestro producto implementado como clases utilitarias de Tailwind CSS. Son decisiones de diseño convertidas en clases CSS que reemplazan valores hardcodeados y crean un sistema de diseño coherente.
En lugar de esto:
<!-- Usando clases genéricas de Tailwind directamente -->
<h1 class="text-gray-900 text-xl">Título</h1>
<div class="bg-gray-600 border-gray-300">Contenido</div>
<p class="text-red-500">Mensaje de error</p>Usamos esto:
<!-- Usando nuestros tokens semánticos -->
<h1 class="text-text-strong text-title-h5">Título</h1>
<div class="text-text-subtle border-stroke-soft">Contenido</div>
<p class="text-error-base">Mensaje de error</p>¿Por qué son importantes para ti como desarrollador?
Consistencia Automática
Los tokens garantizan que uses los valores correctos sin memorizar códigos hexadecimales o hacer suposiciones.
Cambios Centralizados
Cuando se cambia la referencia de un token semantico, automáticamente se actualiza en toda la aplicación sin tocar tu código.
Categorías de Tokens Semánticos disponibles
Textos neutrales
Controlan la jerarquía visual del contenido escrito.
| Tailwind class | Light mode | Dark mode | Uso principal |
|---|---|---|---|
text-strong | gray-950 | white | Texto principal y títulos. Máximo contraste. |
text-subtle | gray-600 | gray-400 | Texto secundario o descripciones. |
text-soft | gray-400 | gray-500 | Texto de apoyo, notas o placeholders. |
text-disabled | gray-300 | gray-600 | Estados deshabilitados, baja legibilidad. |
text-white | white | gray-950 | - |
Fondos neutrales
Definen las superficies y contextos visuales.
| Tailwind class | Light mode | Dark mode | Uso principal |
|---|---|---|---|
bg-strong | gray-950 | white | Fondos principales con máximo contraste. |
bg-surface | gray-800 | gray-200 | Superficies de componentes o contenedores destacados. |
bg-subtle | gray-300 | gray-600 | Fondos secundarios o áreas de apoyo. |
bg-soft | gray-200 | gray-700 | Fondos suaves, se usan en secciones amplias o backgrounds UI. |
bg-weak | gray-50 | gray-800 | Fondos muy sutiles. |
bg-white | white | gray-950 | - |
Bordes neutrales
Establecen separaciones y definiciones de elementos.
| Tailwind class | Light mode | Dark mode | Uso principal |
|---|---|---|---|
stroke-strong | gray-950 | white | Para crear separaciones fuertes y definir límites importantes |
stroke-subtle | gray-300 | gray-600 | Para separaciones visibles pero no dominantes |
stroke-soft | gray-200 | gray-700 | Para separaciones suaves y delicadas |
Estados semanticos
Comunican estados y acciones específicas con significado universal.
Primario (Marca)
Representan la identidad visual de la marca y se usan para acciones principales, elementos interactivos destacados y comunicar la personalidad del producto.
| Tailwind class | Light mode | Dark mode | Uso principal |
|---|---|---|---|
primary-base | primary-400 | primary-400 | El color principal de la marca, usado para las acciones más importantes. |
primary-dark | primary-500 | primary-500 | Para estados hover o elementos que necesitan destacar más que el primary-base. |
primary-darker | primary-600 | primary-600 | Para estados de interacción activos o elementos que requieren máxima prominencia. |
primary-alpha-24 | primary-alpha-24 | primary-alpha-24 | Para crear fondos con presencia visual significativa del color primario. |
primary-alpha-16 | primary-alpha-16 | primary-alpha-16 | Para fondos que comunican la marca sin ser dominantes. |
primary-alpha-10 | primary-alpha-10 | primary-alpha-10 | Para toques muy ligeros de color primario en fondos. |
Informacion
Transmiten mensajes de ayuda, datos relevantes o estados neutrales que requieren la atención del usuario sin generar urgencia. Usados para tips, notas aclaratorias o notificaciones informativas.
| Tailwind class | Light mode | Dark mode | Uso principal |
|---|---|---|---|
information-base | blue-500 | blue-500 | Color principal informativo |
information-dark | blue-950 | blue-400 | Estados intensos de información |
information-light | blue-200 | blue-alpha-24 | Fondos de tips y ayuda |
information-lighter | blue-50 | blue-alpha-16 | Fondos muy sutiles informativos |
Advertencia
Indican precaución o situaciones que requieren atención antes de continuar. Se utilizan en alertas preventivas, mensajes de confirmación o avisos que no son críticos pero sí importantes.
| Tailwind class | Light mode | Dark mode | Uso principal |
|---|---|---|---|
warning-base | orange-500 | orange-600 | Color principal de advertencia |
warning-dark | orange-950 | primary-400 | Estados intensos de advertencia |
warning-light | orange-200 | orange-alpha-24 | Fondos de tips y ayuda |
warning-lighter | orange-50 | orange-alpha-16 | Fondos muy sutiles de advertencia |
Error
Señalan problemas, bloqueos o estados críticos que necesitan corrección inmediata. Ideales para validaciones de formularios, mensajes de error del sistema o notificaciones de fallo.
| Tailwind class | Light mode | Dark mode | Uso principal |
|---|---|---|---|
error-base | red-500 | red-600 | Color principal de error |
error-dark | red-950 | red-400 | Estados intensos de error |
error-light | red-200 | red-alpha-24 | Fondos de tips y ayuda |
error-lighter | red-50 | red-alpha-16 | Fondos muy sutiles de error |
Exito
Comunican resultados positivos, confirmaciones o procesos completados con éxito. Se aplican en notificaciones de confirmación, mensajes de éxito y validaciones correctas.
| Tailwind class | Light mode | Dark mode | Uso principal |
|---|---|---|---|
success-base | green-500 | green-600 | Color principal de éxito |
success-dark | green-950 | green-400 | Estados intensos de éxito |
success-light | green-200 | green-alpha-24 | Fondos de tips y ayuda |
success-lighter | green-50 | green-alpha-16 | Fondos muy sutiles de éxito |
Inactividad/Ausencia
Representan ausencia, estado inactivo o no disponible. Se aplican en indicadores de presencia, estados de usuario fuera de línea o procesos pausados temporalmente.
| Tailwind class | Light mode | Dark mode | Uso principal |
|---|---|---|---|
idle-base | yellow-500 | yellow-600 | Color principal de inactividad |
idle-dark | yellow-950 | yellow-400 | Estados intensos de inactividad |
idle-light | yellow-200 | yellow-alpha-24 | Fondos de tips y ayuda |
idle-lighter | yellow-50 | yellow-alpha-16 | Fondos muy sutiles de inactividad |
Feature (Novedades/Caracteristicas)
| Tailwind class | Light mode | Dark mode | Uso principal |
|---|---|---|---|
feature-base | purple-500 | purple-500 | Color principal de novedades/caracteristicas |
feature-dark | purple-950 | purple-400 | Estados intensos de novedades/caracteristicas |
feature-light | purple-200 | purple-alpha-24 | Fondos de tips y ayuda |
feature-lighter | purple-50 | purple-alpha-16 | Fondos muy sutiles de novedades/caracteristicas |