Setup de tokens de color — Explainer de Alcance

Qué significa y por qué importa

Qué incluye SessDev

• Ingestión de la paleta finalizada vía un handoff estructurado (variables de Figma, JSON o una lista documentada de hex) con un nombre por color, rol y par dark/light.
• Scaffolding de tokens base (valores hex crudos keyados por nombre de color de marca) y la organización de archivos que mantiene la paleta en una única fuente de verdad.
• Aliases semánticos (surface, text, text-muted, border, accent, accent-hi, danger, success, warning) que los componentes referencian por intención en lugar de por nombre de color crudo.
• Cableado de la paleta en el config de Tailwind bajo theme.extend.colors para que utilities como text-text-muted y bg-surface compilen correctamente.
• Emisión de la misma paleta como custom properties CSS en :root (y selector dark-mode cuando esté en alcance) para que los valores sean alcanzables desde contextos no-Tailwind (rich text de CMS, widgets embebidos).
• Variantes dark y light para cada alias semántico cuando el cliente provee una paleta pareada — el mismo alias resuelve al valor correcto según el tema activo.
• Binding de la librería de componentes existente a los aliases semánticos para que los swaps visuales posteriores (rebrand, campaña de sub-marca) requieran editar solo el archivo de tokens.
• 1 pasada de validación: regla de lint o codemod que marca valores hex hardcodeados fuera del archivo de tokens, y QA visual de que cada componente renderiza contra los temas light y dark.
• Documento de handoff listando cada token, su valor crudo, su alias semántico y el procedimiento para actualizar un valor sin tocar código de componentes.

Qué queda excluido

• Autoría de la paleta en sí — elegir tonos, escoger primarios, definir significado de color de marca.
• Consultoría de teoría de color, reglas de armonía, esquemas complementarios o análogos, psicología del color.
• Research de marca, auditorías de color competitivas, análisis de color por categoría o cualquier trabajo de paleta basado en research.
• Research de contraste WCAG, cómputo de ratio de contraste para pares texto/fondo arbitrarios, ajustes de paleta basados en accesibilidad.
• Auditoría de accesibilidad de la UI final, simulación de daltonismo, testing de baja visión o cualquier certificación formal de a11y.
• Research de marketing sobre color, A/B testing de elecciones de color, experimentos de paleta orientados a conversión.
• Análisis competitivo o benchmarking de categoría sobre colores de marca.
• Diseño de paletas de visualización de datos — escalas secuenciales, divergentes o categóricas para gráficos y dashboards.
• Diseño de gradientes, autoría de color-stops o composición de gradientes en movimiento. El cableado de un gradiente provisto está en alcance; diseñarlo no.
• Paleta de ilustración, dirección de color de hero-art o autoría de color de visuales de soporte.
• Autoría del sistema de color de marca — reglas de uso, grids do/don't, documentación de brand guidelines alrededor del color.

Riesgos si no se define correctamente

• Fallo de contraste WCAG en el sitio en vivo

  Una paleta que se ve hermosa en un moodboard puede fallar WCAG AA en body text contra el surface elegido. SessDev cablea lo que el cliente provee; si el research de contraste no se hizo, el sitio en vivo puede salir con texto ilegible para un porcentaje de usuarios. El research de contraste está fuera de alcance y pertenece al equipo de diseño.

• Brand drift vía hex hardcodeado

  Cuando ingenieros apurados hardcodean valores hex dentro de componentes en lugar de usar tokens, cada rebrand se vuelve un search-and-replace manual sobre cientos de archivos. La regla de lint en alcance lo marca en CI, pero solo si la regla permanece habilitada. El retainer Care la mantiene aplicada.

• Hex hardcodeado bypaseando el sistema de tokens

  Librerías de terceros, snippets copy-paste e imports de stylesheets pueden colar colores hardcodeados en el bundle. Sobreviven temas (dark mode se rompe), sobreviven rebrands (campañas de sub-marca filtran la paleta vieja) y rompen consistencia. La validación agarra la primera tanda; la disciplina continua previene la siguiente.

• Regresión de dark mode tras editar un token

  Editar un único token base sin chequear la cadena de alias dark-mode puede flipear una surface entera a un color ilegible. La capa de aliases semánticos en alcance aisla a los componentes de esto — siempre que cada alias tenga un par dark/light documentado en el handoff.

• Token sprawl e inconsistencia de naming

  Sin una convención de naming, el archivo de tokens acumula 40 grises casi idénticos y tres rojos de danger distintos. El handoff define un esquema de naming fijo; la desviación de ese esquema es lo que el retainer Care agarra en PR review.

• Paleta incompleta en el handoff

  Si la paleta provista cubre colores de marca pero no colores de estado (danger, success, warning, info) o surface neutrales, SessDev rellena el gap desde un default documentado. Ese default es scaffolding de ingeniería intencional — no brand design — y debe ser revisado por el equipo de diseño antes del launch.

• Theme bleed entre sub-marcas

  Cuando sub-marcas o skins de campaña se atornillan a la capa de tokens sin aislamiento, los tokens de un tema sobreescriben a otro en producción. El archivo de tokens en alcance soporta un tema primario limpiamente; la orquestación multi-tema es un item de alcance separado bajo el retainer Care.

Ítems de alcance relacionados

• brand_asset_injectionLos assets de marca cargan la paleta en forma de píxeles; los tokens la cargan en CSS. Ambos se envían juntos desde el mismo handoff de marca.
• typography_integrationTokens y tipografía son las dos mitades del sistema visual. Mismo principio de exclusión: integración, no autoría.
• icon_library_integrationLos iconos consumen tokens de color para currentColor y styling de stroke.
• ui_animation_implementationLos acentos de motion reusan tokens de accent y estado para estados de hover, focus y transición.
• media_infrastructurePlaceholders de imagen y estados de skeleton referencian tokens de surface y surface-muted definidos aquí.
• technical_seoLa metadata theme-color expuesta a navegadores y OSes se deriva del token primario de marca definido aquí.

Preguntas frecuentes

¿SessDev puede diseñar nuestra paleta de color?

No. La autoría de paleta es un entregable de la disciplina de diseño y está explícitamente fuera de alcance. SessDev cablea la paleta finalizada que tu equipo de diseño o estudio externo entregue.

¿Hacen chequeos de contraste WCAG sobre nuestra paleta?

No. El research de contraste y el cómputo de ratios WCAG son actividades de diseño de accesibilidad y viven con tu equipo de diseño. SessDev cablea lo que el equipo valida y provee.

¿Dark mode está incluido?

La capa de tokens soporta una paleta pareada dark/light cuando el cliente la provee. La autoría de la paleta dark-mode en sí es trabajo de diseño y está excluida. El cableado está incluido.

¿Los tokens garantizan accesibilidad?

No. Los tokens son cableado. La accesibilidad es función de qué valores elige tu equipo de diseño y cómo los componentes los componen. SessDev no corre una auditoría formal de a11y como parte de este item de alcance.

¿Escriben las brand guidelines de color?

No. La autoría del sistema de marca — reglas de uso, grids do/don't, documentos de brand guidelines — es trabajo de estudio de diseño. SessDev envía la capa de ingeniería que esas guidelines describen cómo usar.