Guía

Design tokens, explicados con archivos reales

Un design token es una decisión de diseño con nombre: un color, un espaciado, un tamaño de fuente. Se guarda una vez y se usa en todas partes, tanto en la herramienta de diseño como en el código.

Por qué importan los tokens

Sin tokens, el azul de tus botones se escribe en el archivo de diseño, luego otra vez en el CSS y luego otra vez en la app. Si lo cambias, tienes que buscarlo en todas partes. Con tokens, cambias color.brand y todos los sitios que lo usan se actualizan.

Cómo es un archivo de tokens

El W3C Design Tokens Community Group define un formato JSON en el que cada token tiene un $value y un $type.

{
  "color": {
    "brand": { "$value": "#2F5BEA", "$type": "color" },
    "ink":   { "$value": "#121214", "$type": "color" }
  },
  "space": {
    "4": { "$value": "16px", "$type": "dimension" }
  }
}

Las mismas decisiones, convertidas en variables CSS que el navegador puede usar:

:root {
  --color-brand: #2F5BEA;
  --color-ink: #121214;
  --space-4: 16px;
}

Cómo usa Kalka los tokens

  • Una carpeta: cada proyecto tiene una carpeta design-system/ con tokens.json en formato W3C y tokens.css al lado.
  • Usados en el lienzo: cuando eliges un color o un espaciado en el panel de diseño, eliges un token, y el CSS usa la variable.
  • Versionados con Git: un cambio en el color de tu marca es un commit que puedes revisar, como cualquier cambio de código.

Kalka está en desarrollo y es de código abierto. La estructura de carpetas de arriba procede de nuestra especificación de producto.