🎨 Design Tokens - PIT v3¶

🎯 Sistema de Tokens del Design System¶

Los Design Tokens son los valores fundamentales que definen el sistema de diseño de PIT v3. Estos tokens aseguran consistencia visual y facilitan el mantenimiento del sistema.

🎨 Tokens de Color¶

Paleta Maya Tradicional¶

:root {
    --maya-red: #D32F2F;    /* Fuego, energía, pasión */
    --maya-blue: #1976D2;   /* Agua, cielo, espiritualidad */
    --maya-yellow: #F57C00; /* Sol, luz, sabiduría */
    --maya-white: #FAFAFA;  /* Aire, pureza, claridad */
    --maya-black: #212121;  /* Tierra, misterio, profundidad */
}

Aplicación Dinámica por Kin¶

Kin 107 (Mano) → Panel azul con texto blanco
Kin 176 (Guerrero) → Panel amarillo con texto negro
Contraste automático → Siempre legible

🔤 Tokens Tipográficos¶

Jerarquía de Fuentes¶

/* Kin Number - Elemento principal */
.kin-number {
    font-family: var(--font-mono);
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
}

/* Kin Name - Identificación */
.kin-name {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Detail Label - Información secundaria */
.detail-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

📏 Tokens de Espaciado¶

Sistema de Espaciado¶

:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
}

🎯 Tokens de Componentes¶

Botones¶

.btn {
    background: var(--maya-red);
    color: var(--maya-white);
    border: none;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

Cards¶

.component-card {
    background: var(--maya-white);
    color: var(--maya-black);
    border: 1px solid var(--maya-red);
    padding: var(--space-6);
}

🔄 Tokens de Animación¶

Transiciones¶

:root {
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
}

📱 Tokens Responsivos¶

Breakpoints¶

:root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

🎨 Uso de Tokens¶

En CSS¶

.my-component {
    background: var(--maya-blue);
    color: var(--maya-white);
    padding: var(--space-4);
    font-size: var(--font-size-base);
    transition: var(--transition-normal);
}

En JavaScript¶

const tokens = {
    colors: {
        mayaRed: '#D32F2F',
        mayaBlue: '#1976D2',
        mayaYellow: '#F57C00'
    },
    spacing: {
        sm: '8px',
        md: '16px',
        lg: '24px'
    }
};

🚀 Beneficios de los Tokens¶

Consistencia¶

✅ Valores unificados - Todos los componentes usan los mismos tokens
✅ Cambios centralizados - Modificar un token afecta todo el sistema
✅ Escalabilidad - Fácil agregar nuevos tokens

Mantenimiento¶

✅ Actualizaciones rápidas - Cambiar un token actualiza todo
✅ Debugging fácil - Identificar problemas de diseño
✅ Documentación viva - Tokens como documentación

Colaboración¶

✅ Lenguaje común - Desarrolladores y diseñadores hablan el mismo idioma
✅ Estándares claros - Valores definidos y documentados
✅ Evolución controlada - Cambios versionados y documentados

Los Design Tokens son la base del sistema de diseño de PIT v3, asegurando consistencia y facilitando el mantenimiento del sistema visual.