Qué es un primitivo

En el ejercicio del módulo 1 hiciste inventario de los valores de tu diseño. Ese inventario está desordenado: tiene casi duplicados y valores que aparecen una única vez. En este módulo lo conviertes en primitivos: un conjunto pequeño de valores, ordenados en escalas. En esta lección verás qué es un primitivo, cómo se nombra y qué principios siguen las escalas.

En esta página

• Primitivos y semánticos
• El nombre dice qué valor es
• Qué es una escala
• Dos formas de numerar el color
• Los primitivos de DesignToken101
• En Figma
• Lo que te llevas

Primitivos y semánticos

La especificación DTCG no habla de capas. Define tokens, grupos y referencias, y dice que los grupos sirven para organizar: cada sistema los estructura según su propio modelo (Format Module: Groups).

Los sistemas de diseño publicados que usamos de referencia sí separan dos capas. En el Simple Design System (SDS) de Figma, por ejemplo, --sds-color-green-500 es un color de la paleta, y --sds-color-background-positive-default es el fondo de un mensaje de éxito, que apunta a ese color (SDS: theme.css).

El nombre dice qué valor es

Un primitivo se nombra con tres niveles: categoría / paleta / paso.

Las escalas que no son de color tienen una sola paleta, así que ese nivel no se escribe.

El motivo: un mismo primitivo puede servir para varios roles. En DesignToken101, emerald es a la vez el color de marca y el color de éxito. Si la paleta se llamara brand, el token de éxito apuntaría a brand/700, y el nombre no diría lo que es.

Otros sistemas lo hacen de otra manera. El SDS de Figma tiene una paleta primitiva llamada brand junto a otras nombradas por su tono, como green o red (SDS: theme.css). Las dos opciones funcionan; la nuestra tiene un coste: si la marca cambiara a un azul, habría que renombrar la paleta. Los tokens semánticos conservarían su nombre; cambiaría el primitivo al que apuntan.

Qué es una escala

Una escala es un conjunto ordenado de pasos de una misma categoría. Los sistemas que hemos consultado comparten cuatro principios:

1. Pocas opciones, bien elegidas. Una escala corta obliga a decidir. Tailwind CSS es la excepción: p-17 es válido, porque cada utilidad multiplica la variable --spacing por el número que escribas (Tailwind CSS: Padding). Con Tailwind, la disciplina tiene que venir de tus tokens. Es el criterio de toda la web: un sistema tan grande como lo que resuelve.
2. El número dice algo. En el SDS, space-100 mide 4 px y space-400 mide 16 px: el número es proporcional al valor (SDS: theme.css). En Atlassian, el número es un porcentaje de su base de 8 px: space.200 mide 16 px (Atlassian: Spacing).
3. Múltiplos de 100, con cero inicial para las fracciones. Así caben pasos intermedios sin decimales: 050 es la mitad de 100 y 150 está entre 100 y 200. Lo usan el SDS y Atlassian (mismas fuentes).
4. Los negativos van en su propio nivel. space/negative/100 en vez de space/-100. Lo hacen el SDS y Atlassian (mismas fuentes).

Dos formas de numerar el color

En el color, el número del paso puede significar cosas distintas:

Radix garantiza que sus pasos de texto contrasten con su fondo, pero lo mide con APCA, no con la fórmula de contraste de WCAG 2.2 que usa este curso (misma fuente). La fórmula de WCAG la verás en Escalas de color y en el módulo Accesibilidad (Contraste de texto).

Los primitivos de DesignToken101

En total, 97 variables en la colección Primitives de Figma. Otros primitivos viven en código, porque Figma no puede guardarlos como necesitamos; los repasamos en La colección completa.

En Figma

Los primitivos van en su propia colección, con un solo modo: un primitivo no cambia con el tema ni con el ancho de pantalla. Los modos van en las colecciones semánticas, que verás en el módulo Modos y temas (Un eje por colección).

Para crear la colección (Figma: Create and manage variables):

1. Abre la vista de variables.
2. Crea una colección nueva (More options → Create collection) y llámala Primitives.
3. Cambia el nombre de su modo. En DesignToken101 se llama Value.

Las variables las crearás en las lecciones siguientes, una escala cada vez. Al crear cada una, decidirás también si se publica y a qué propiedades se puede aplicar.

{
  "color": {
    "emerald": {
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2, 0.8, 0.6],
          "alpha": 1,
          "hex": "#33CC99"
        },
        "$extensions": {
          "com.figma.hiddenFromPublishing": true,
          "com.figma.codeSyntax": { "WEB": "var(--t101-color-emerald-500)" }
        }
      }
    }
  }
}

Fuentes

• Design Tokens Format Module 2025.10: Groups
• Figma: Simple Design System, theme.css
• Figma: Create and manage variables and collections
• Figma: Hide styles, components, and variables when publishing
• Tailwind CSS: Colors
• Tailwind CSS: Padding
• Radix Colors: Understanding the scale
• Atlassian Design System: Spacing