Escala

La escala de nuestro theming se determina a partir de la combinación de valores de espaciado y tipografía.

Espaciado

El theming de espaciado se divide en tres grandes categorías:

• Container

• Content

• Component

Haciendo una analogía en relación a nuestras librerías de componentes UI, podríamos alinear las categorías según sus usos de la siguiente manera:

• Container: espaciado utilizado principalmente en Organismos.

• Content: espaciado utilizado principalmente en Moleculas.

• Component: espaciado utilizado principalmente en Átomos.

Eso significa que el tipo de componente acota la escala de espaciado que tenemos disponible, de modo que podemos empezar a identificar y definir patrones más fácilmente.

Dentro de cada categoría, a su vez, hay diferentes subcategorías:

• Inset: espaciado interno del componente (padding).

• Stack: espaciado vertical entre componentes apilados (margin-top, margin-bottom)

• Inline: espaciado horizontal entre componentes alineados (margin-left, margin-right)

En el caso del espaciado horizontal (stack), separamos los componentes, en la medida de lo posible, utilizando las variables de espaciado en el margin-top. De este modo nos aseguramos que el componente siguiente es el que determina su relación con el anterior y no al revés (por ejemplo, un título no va a empujar de la misma manera si lo que le sigue es un párrafo o un CTA).

Tipografía

La tipografía es un aspecto clave del theming. No sólo es importante elegir qué familia tipográfica va a utilizar nuestro producto, sino que también hay que hacer un ejercicio de definición de las propiedades que van a tener los diferentes elementos tipográficos a nivel de escala: tamaño, interlineado y peso (font-size, line-height y font-weight).

Haciendo combinaciones específicas de estas tres propiedades y asignándoselas a usos concretos en la interfaz obtenemos algo como esto:

Title-medium

Token	Alias (ref.)	Valor
--family-font-title-medium	font.family.01	'Montserrat'
--size-font-title-medium	size.font.03	16px
--size-line-height-title-medium	size.lineHeight.03	24px
--weight-font-title-medium	weight.font.02	400
--style-font-title-medium	style.font.01	normal

De esta manera, un estilo de texto concreto es una agrupación de tokens que se pueden utilizar directamente como clase de CSS o estilo de texto en Figma.