design system V3:
escalando con tokens & IA
design system V3:
escalando con tokens & IA
design system V3:
escalando con tokens
& IA
01
CREHANA
TOKENS
AI
Cómo evolucioné un Design System desde una estandarización básica de UI hacia una infraestructura de diseño escalable, alineada con código y asistida por IA.
Cómo evolucioné un Design System desde una estandarización básica de UI hacia una infraestructura de diseño escalable, alineada con código y asistida por IA.
Rol:
Design System Designer
Rol:
Design System Designer
Empresa:
Crehana, HR Platform
Empresa:
Crehana, HR Platform
Colaboración:
Product Design & Frontend Engineering
Colaboración:
Product Design & Frontend Engineering
Periodo:
2025-2026
Periodo:
2025-2026
Overview
Overview
En 2023, ayudé a evolucionar nuestro Design System para aportar mayor consistencia, accesibilidad y estructura a un producto en crecimiento, tanto en Web como en Mobile.
A medida que el producto evolucionó hacia un modelo Enterprise B2B SaaS, surgieron nuevos desafíos: personalización multimarca, una arquitectura de tokens escalable y una mayor alineación entre Diseño e Ingeniería.
Así nació Design System V3, una evolución enfocada en hacer el sistema más escalable, adaptable y preparado para flujos de trabajo con IA.
En 2023, ayudé a evolucionar nuestro Design System para aportar mayor consistencia, accesibilidad y estructura a un producto en crecimiento, tanto en Web como en Mobile.
A medida que el producto evolucionó hacia un modelo Enterprise B2B SaaS, surgieron nuevos desafíos: personalización multimarca, una arquitectura de tokens escalable y una mayor alineación entre Diseño e Ingeniería.
Así nació Design System V3, una evolución enfocada en hacer el sistema más escalable, adaptable y preparado para flujos de trabajo con IA.
El objetivo
El objetivo
Transformar el Design System de una librería de UI a una infraestructura capaz de soportar:
Múltiples marcas · Múltiples contextos · Múltiples workflows
Transformar el Design System de una librería de UI a una infraestructura capaz de soportar:
Múltiples marcas · Múltiples contextos · Múltiples workflows
From V1 to V3
El sistema no fue reconstruido desde cero.
Evolucionó junto con el producto.
Crear consistencia
V1 — Establecer
La primera versión se enfocó en resolver la fragmentación y estandarizar la UI.
Foundations
Componentes
Accesibilidad
Documentación
Create scalable foundations
V2 — Systematize
El siguiente paso fue pasar de valores individuales de UI a primitivos reutilizables y una relación más estrecha entre Diseño y Frontend.
Tokens primitivos
Escalas de espaciado
Variables
Alineación con Frontend
Make the system adaptable
V3 — Scale
La última evolución introdujo una arquitectura semántica capaz de responder a las necesidades Enterprise y habilitar workflows asistidos por IA.
Semantic architecture
White Labeling
Contextual theming
Markdown documentation
AI-assisted workflows
De V1 a V3
El sistema no fue reconstruido desde cero.
Evolucionó junto con el producto.
Crear consistencia
V1 — Establecer
La primera versión se enfocó en resolver la fragmentación y estandarizar la UI.
Foundations
Componentes
Accesibilidad
Documentación
Crear foundations escalables
V2 — Sistematizar
El siguiente paso fue pasar de valores individuales de UI a primitivos reutilizables y una relación más estrecha entre Diseño y Frontend.
Tokens primitivos
Escalas de espaciado
Variables
Alineación con Frontend
Hacer el sistema adaptable
V3 — Escalar
La última evolución introdujo una arquitectura semántica capaz de responder a las necesidades Enterprise y habilitar workflows asistidos por IA.
Arquitectura semántica
White Labeling
Temas contextuales
Documentación en Markdown
Workflows asistidos por IA
El desafío
El desafío
A medida que el producto maduró, surgieron cuatro nuevos desafíos clave.
A medida que el producto maduró, surgieron cuatro nuevos desafíos clave.
Personalización Enterprise difícil de escalar
Los clientes necesitaban adaptar el dashboard a su identidad visual, pero cada personalización requería ajustes y duplicaciones desde Tecnología, haciendo difícil escalar el modelo White Label.
Personalización Enterprise difícil de escalar
Los clientes necesitaban adaptar el dashboard a su identidad visual, pero cada personalización requería ajustes y duplicaciones desde Tecnología, haciendo difícil escalar el modelo White Label.
Los tokens necesitaban una mayor abstracción
Los componentes no debían depender directamente de valores visuales, sino consumir tokens definidos por su propósito y función.
Los tokens necesitaban una mayor abstracción
Los componentes no debían depender directamente de valores visuales, sino consumir tokens definidos por su propósito y función.
Diseño y código necesitaban un lenguaje común
A medida que el sistema crecía, las inconsistencias entre Figma, documentación e implementación generaban fricción innecesaria durante el handoff.
Diseño y código necesitaban un lenguaje común
A medida que el sistema crecía, las inconsistencias entre Figma, documentación e implementación generaban fricción innecesaria durante el handoff.
La documentación necesitaba ser accionable
Los componentes complejos requerían especificaciones más allá de lo visual: anatomía, espaciado, comportamiento, accesibilidad, markup y reglas de implementación.
La documentación necesitaba ser accionable
Los componentes complejos requerían especificaciones más allá de lo visual: anatomía, espaciado, comportamiento, accesibilidad, markup y reglas de implementación.
La Arquitectura
La Arquitectura
El cambio central en V3 fue introducir una separación clara entre valor y significado.
En lugar de que los componentes consumieran valores directamente, el sistema se estructuró en diferentes capas:
El cambio central en V3 fue introducir una separación clara entre valor y significado.
En lugar de que los componentes consumieran valores directamente, el sistema se estructuró en diferentes capas:
Un lenguaje de tokens centrado
en componentes
Un lenguaje de tokens centrado en componentes
Para que la capa semántica fuera predecible y escalable, establecimos una convención de nombres centrada en los componentes.
En lugar de nombrar los tokens según su valor visual, cada token describe dónde se utiliza, qué controla y, cuando es necesario, a qué variante o estado corresponde.
Para que la capa semántica fuera predecible y escalable, establecimos una convención de nombres centrada en los componentes.
En lugar de nombrar los tokens según su valor visual, cada token describe dónde se utiliza, qué controla y, cuando es necesario, a qué variante o estado corresponde.
Un ejemplo simple
Un ejemplo simple
Tomemos como ejemplo el fondo de un botón primario:
Tomemos como ejemplo el fondo de un botón primario:
button-bg-primary
Descargar reporte
brand-50
El componente no necesita saber qué color específico utilizar. Solo necesita saber que requiere su fondo primario.
Si la marca cambia, el valor asociado al token puede cambiar mientras el componente permanece igual.
El componente no necesita saber qué color específico utilizar. Solo necesita saber que requiere su fondo primario.
Si la marca cambia, el valor asociado al token puede cambiar mientras el componente permanece igual.
Mismo token → Diferente valor → Mismo componente
Mismo token → Diferente valor → Mismo componente
Los tokens describen su propósito, no su apariencia.
Los tokens describen su propósito, no su apariencia.
One System, Multiple Brands
Key Takeaways
and Next Steps
Los clientes Enterprise necesitaban adaptar el producto a su identidad visual sin que cada personalización implicara duplicar componentes o lógica desde Tecnología.
La capa semántica se convirtió en el puente entre el producto y cada marca, permitiendo que los mismos componentes se adapten mediante el mapeo de tokens.
Los clientes Enterprise necesitaban adaptar el producto a su identidad visual sin que cada personalización implicara duplicar componentes o lógica desde Tecnología.
La capa semántica se convirtió en el puente entre el producto y cada marca, permitiendo que los mismos componentes se adapten mediante el mapeo de tokens.
Tokens semánticos
→
Marca A
Marca B
→
Mismos
componentes
→
Mismo
producto
Diseñando componentes para Diseño + Código
The token architecture was paired with component specifications that connected visual decisions with implementation.
The goal was to make the same component understandable from both a design and implementation perspective. I collaborated with Frontend Engineering to align the token taxonomy and reduce ambiguity during handoff.
Anatomy
Contenedor · Contenido · Ícono · Acciones · Estados
Visual rules
Spacing · Radius · Borders · Typography · Tokens
Comportamiento
Hover · Active · Disabled · Web / App
Accesibilidad
ARIA · Markup semántico · Contraste
Diseñando componentes
para Diseño + Código
La arquitectura de tokens se complementó con especificaciones de componentes que conectaban las decisiones visuales con su implementación.
El objetivo era que un mismo componente pudiera entenderse tanto desde la perspectiva de Diseño como de Desarrollo. Trabajé junto al equipo de Frontend para alinear la taxonomía de tokens y reducir ambigüedades durante el handoff.
Anatomía
Contenedor · Contenido · Ícono · Acciones · Estados
Reglas visuales
Espaciado · Radios · Bordes · Tipografía · Tokens
Comportamiento
Hover · Active · Disabled · Web / App
Accesibilidad
Accesibilidad
ARIA · Markup semántico · Contraste
Convirtiendo la documentación en un workflow con IA
Convirtiendo la documentación en un workflow con IA
A medida que el Design System crecía, la documentación se convirtió en parte de la propia infraestructura.
Las foundations y especificaciones de componentes se estructuraron en archivos Markdown y se incorporaron a la librería del Design System en Claude Design.
A medida que el Design System crecía, la documentación se convirtió en parte de la propia infraestructura.
Las foundations y especificaciones de componentes se estructuraron en archivos Markdown y se incorporaron a la librería del Design System en Claude Design.
Design System
→
Markdown
→
Claude Design
→
Product Designer
La documentación proporcionaba un contexto estructurado sobre tokens, componentes, accesibilidad, foundations y reglas de implementación.
Claude Code podía procesar estas especificaciones y utilizarlas como base para workflows orientados a la implementación.
La documentación proporcionaba un contexto estructurado sobre tokens, componentes, accesibilidad, foundations y reglas de implementación.
Claude Code podía procesar estas especificaciones y utilizarlas como base para workflows orientados a la implementación.
Antes
Antes
Buscar → Leer→ Preguntar → Aclarar → Diseñar
Buscar → Leer→ Preguntar → Aclarar → Diseñar
Después
Después
Consultar → Obtener contexto del sistema → Explorar → Revisar
Consultar → Obtener contexto del sistema → Explorar → Revisar
El objetivo no era reemplazar al diseñador, sino hacer que el Design System fuera más fácil de consultar y utilizar.
La IA se convirtió en una interfaz para acceder al Design System.
El objetivo no era reemplazar al diseñador, sino hacer que el Design System fuera más fácil de consultar y utilizar.
La IA se convirtió en una interfaz para acceder al Design System.
Impacto
Impacto
La nueva arquitectura mejoró el sistema tanto a nivel de producto como de equipo.
Escalabilidad Enterprise
Escalabilidad Enterprise
La personalización de marca pasó a gestionarse mediante el mapeo de tokens, reduciendo la necesidad de duplicar componentes para cada identidad.
La personalización de marca pasó a gestionarse mediante el mapeo de tokens, reduciendo la necesidad de duplicar componentes para cada identidad.
Alineación entre Diseño e Ingeniería
Alineación entre Diseño e Ingeniería
UI Patterns: Empty states
Figma, la documentación y la implementación comenzaron a seguir una misma taxonomía funcional.
Figma, la documentación y la implementación comenzaron a seguir una misma taxonomía funcional.
Handoff más rápido
Handoff más rápido
UI Patterns: Empty states
Las especificaciones estructuradas redujeron las consultas técnicas durante la implementación. Proyectos que antes requerían aproximadamente dos semanas de diseño, documentación y handoff pudieron completarse en alrededor de una semana con el nuevo workflow.
Las especificaciones estructuradas redujeron las consultas técnicas durante la implementación. Proyectos que antes requerían aproximadamente dos semanas de diseño, documentación y handoff pudieron completarse en alrededor de una semana con el nuevo workflow.
Infraestructura preparada para IA
Infraestructura preparada para IA
UI Patterns: Empty states
El Design System adquirió una estructura capaz de funcionar como contexto para workflows de Product Design asistidos por IA.
El Design System adquirió una estructura capaz de funcionar como contexto para workflows de Product Design asistidos por IA.
64
64
Tokens primitivos
Tokens primitivos
Tokens primitivos
144
144
Colores semánticos
Colores semánticos
Colores semánticos
43
43
Unidades aplicadas
Unidades aplicadas
Unidades aplicadas
~50%
~50%
Handoff más rápido
Handoff más rápido
Handoff más rápido
El resultado
El resultado
El Design System evolucionó de una colección de patrones de UI estandarizados a una infraestructura compartida que conecta Diseño, componentes, código, documentación e IA.
El mayor cambio no estuvo en la cantidad de variables creadas, sino en construir un sistema donde Diseño e Ingeniería pudieran trabajar bajo una misma lógica, facilitando la escalabilidad del producto.
El Design System evolucionó de una colección de patrones de UI estandarizados a una infraestructura compartida que conecta Diseño, componentes, código, documentación e IA.
El mayor cambio no estuvo en la cantidad de variables creadas, sino en construir un sistema donde Diseño e Ingeniería pudieran trabajar bajo una misma lógica, facilitando la escalabilidad del producto.
Un Design System no es solo una librería de UI. Es una infraestructura para escalar el diseño de producto.
Un Design System no es solo una librería de UI. Es una infraestructura para escalar el diseño de producto.
Did you love
what you saw here?
Did you love
what you saw here?
Drop me a line!
Drop me a line!
Copyright © 2026 Raquel Sedano. All Rights Reserved.
Did you love
what you saw here?
A quick look into my experience, skill set,
and background.
Copyright © 2026 Raquel Sedano. All Rights Reserved.