Design engineering · 01 · Sistema

El sistema con el que está hecho este sitio

Tokens en Figma Variables con modo claro y oscuro, exportados a CSS y a componentes React. Esta página se arma con los mismos archivos que usa el sitio: si un token cambia, la documentación cambia con él.

Primitivos: 21
Semánticos × 2 modos: 15
Estilos de texto: 18
Componentes: 7

IActiva Inspeccionar, arriba a la derecha: cada componente de esta página dice de qué está hecho, y con Alt mides la distancia entre dos elementos.

De Figma al navegador

Figma es la fuente de los valores y el repo es la fuente de la verdad. Entre los dos hay dos scripts y ningún paso manual.

1
Figma Variables
Variables y estilos de texto
Cuatro colecciones: primitivos, semánticos con modos Light y Dark, espacio y forma, y movimiento. La tipografía vive en estilos de texto.
2
Exportación
design/tokens/figma-export.json
Las variables tal como salen de Figma, versionadas en el repo para que cada cambio quede en el historial.
3
Tokens DTCG
scripts/figma-to-dtcg.mjs
Convierte cada variable al formato estándar de tokens y conserva los alias: un semántico sigue apuntando a su primitivo.
4
CSS
scripts/build-tokens.mjs
Style Dictionary escribe tokens.css: primitivos como variables, semánticos con light-dark() y clases de texto con tamaños fluidos.
5
Componentes
src/components
Solo leen tokens semánticos. Un color escrito a mano en un componente es un error, no un atajo.

Un token de punta a punta

En Figma: color/text/accentLight → blue/500 · Dark → blue/300
En DTCG: "$value": "{color.blue.500}"
En CSS: --color-text-accent: light-dark(var(--color-blue-500), var(--color-blue-300));
En la pantalla: Ver el sistema →Ver el sistema →

Color

Una paleta corta: papel y tinta para el modo claro, noche y nieve para el oscuro, y un solo azul de acento. Los componentes nunca la usan directo; pasan por los semánticos.

Primitivos

paper

0#fbfaf7
50#f4f1ea
100#e9e4da

ink

300#b8b3a9
500#66635c
700#3b3a36
900#151513
a10#1515131a
a20#15151333

night

800#1f2226
900#15171a
950#0d0e10

snow

100#f1efea
300#b9b7b1
500#8e8c87
a10#f1efea1a
a20#f1efea33

blue

100#e4e8ff
300#8197ff
500#2a4deb
900#1a2459

Semánticos

Cada semántico tiene un valor por modo. El sitio sigue el modo del sistema operativo hasta que eliges uno con el botón Tema. 15 de 15 semánticos apuntan a un primitivo en los dos modos. Ninguno tiene un valor propio.

Token	Claro	Oscuro
`bg-canvas`	`paper.50`	`night.950`
`bg-surface`	`paper.0`	`night.900`
`bg-sunken`	`paper.100`	`night.800`
`bg-inverse`	`ink.900`	`snow.100`
`bg-accent`	`blue.500`	`blue.300`
`bg-accent-subtle`	`blue.100`	`blue.900`
`bg-artifact`	`paper.0`	`paper.0`
`text-primary`	Aa`ink.900`	Aa`snow.100`
`text-secondary`	Aa`ink.700`	Aa`snow.300`
`text-tertiary`	Aa`ink.500`	Aa`snow.500`
`text-inverse`	Aa`paper.0`	Aa`night.950`
`text-accent`	Aa`blue.500`	Aa`blue.300`
`line-grid`	`ink.a10`	`snow.a10`
`line-strong`	`ink.a20`	`snow.a20`
`line-accent`	`blue.500`	`blue.300`

Contraste

Las combinaciones de texto y fondo que el sitio usa, calculadas con los valores reales de cada modo. La más baja es 4,7:1; el mínimo AA para texto es 4,5:1.

Texto sobre fondo	Claro	Oscuro
`text-primary / bg-canvas`	Aa16,2:1 AAA	Aa16,8:1 AAA
`text-primary / bg-surface`	Aa17,5:1 AAA	Aa15,6:1 AAA
`text-primary / bg-sunken`	Aa14,4:1 AAA	Aa13,9:1 AAA
`text-secondary / bg-canvas`	Aa10,1:1 AAA	Aa9,6:1 AAA
`text-secondary / bg-surface`	Aa10,9:1 AAA	Aa9,0:1 AAA
`text-secondary / bg-sunken`	Aa9,0:1 AAA	Aa8,0:1 AAA
`text-tertiary / bg-canvas`	Aa5,3:1 AA	Aa5,7:1 AA
`text-tertiary / bg-surface`	Aa5,7:1 AA	Aa5,3:1 AA
`text-tertiary / bg-sunken`	Aa4,7:1 AA	Aa4,8:1 AA
`text-accent / bg-canvas`	Aa5,5:1 AA	Aa7,2:1 AAA
`text-accent / bg-surface`	Aa6,0:1 AA	Aa6,7:1 AA
`text-accent / bg-sunken`	Aa4,9:1 AA	Aa5,9:1 AA
`text-inverse / bg-accent`	Aa6,0:1 AA	Aa7,2:1 AAA
`text-inverse / bg-inverse`	Aa17,5:1 AAA	Aa16,8:1 AAA
`text-accent / bg-accent-subtle`	Aa5,1:1 AA	Aa5,4:1 AA

Tipografía

Satoshi para leer y Geist Mono para etiquetar. Los estilos de 32 px o más crecen con la pantalla: el tamaño indicado es el máximo.

t-display-xlSatoshi 500 · 112/0.95 · -0.03emHero del home
Un sistema antes que mil excepciones
t-display-lSatoshi 500 · 96/0.95 · -0.03emTítulo de caso y CTA de contacto
Un sistema antes que mil excepciones
t-display-mSatoshi 500 · 72/1 · -0.02emSiguiente caso
Un sistema antes que mil excepciones
t-heading-xlSatoshi 500 · 64/1 · -0.02emCifras destacadas
Un sistema antes que mil excepciones
t-heading-lSatoshi 500 · 48/1.05 · -0.015emTítulo de sección o de caso en lista
Un sistema antes que mil excepciones
t-heading-mSatoshi 500 · 40/1.1 · -0.01emIntro de sección, pregunta guía
Un sistema antes que mil excepciones
t-heading-sSatoshi 500 · 32/1.15 · -0.01emPrincipios
Un sistema antes que mil excepciones
t-titleSatoshi 500 · 22/1.25 · -0.005emTítulo de card
Sistemas para productos que no paran de evolucionar
t-leadSatoshi 400 · 20/1.45Bajada de hero
Sistemas para productos que no paran de evolucionar
t-body-lSatoshi 400 · 18/1.55Texto de caso
Sistemas para productos que no paran de evolucionar
t-body-mSatoshi 400 · 16/1.5Texto general
Sistemas para productos que no paran de evolucionar
t-body-m-strongSatoshi 500 · 16/1.5Botones, links
Sistemas para productos que no paran de evolucionar
t-body-sSatoshi 400 · 14/1.45Navegación, metadatos
Sistemas para productos que no paran de evolucionar
t-body-s-strongSatoshi 500 · 14/1.45Énfasis pequeño
Sistemas para productos que no paran de evolucionar
t-body-xsSatoshi 400 · 13/1.4Chips
Sistemas para productos que no paran de evolucionar
t-body-xs-strongSatoshi 500 · 13/1.4Pills
Sistemas para productos que no paran de evolucionar
t-quoteSatoshi 400 · 28/1.25 · -0.005emCitas y testimonios
Sistemas para productos que no paran de evolucionar
t-label-monoGeist Mono 400 · 12/1.2 · 0.06emEtiquetas en mayúsculas
Sistemas para productos que no paran de evolucionar

Espacio y forma

Una escala de 4 px. Los saltos crecen a medida que el espacio separa cosas más grandes: 4 entre un ícono y su texto, 96 entre secciones.

Espacio

space-14
space-28
space-312
space-416
space-520
space-624
space-832
space-1040
space-1248
space-1664
space-2080
space-2496
space-30120

Radio

radius-sm6
radius-md12
radius-lg16
radius-full999

Trazo

stroke-default1
stroke-accent2

Movimiento

Duraciones y curvas también son tokens. Con movimiento reducido, todas las duraciones pasan a 0 y el sitio aparece sin animar.

Tienes activado el movimiento reducido: las barras saltan al final sin animarse.

Duración · con ease-standard

instant 100ms
fast 160ms
base 240ms
slow 480ms
deliberate 800ms

Curva · en duration-deliberate

standard cubic-bezier(0.2, 0, 0, 1)
out cubic-bezier(0.16, 1, 0.3, 1)
in-out cubic-bezier(0.65, 0, 0.35, 1)

Componentes

Cada componente tiene el mismo nombre en Figma y en código. En Figma solo existen las variantes; hover, foco y deshabilitado los resuelve CSS.

Pill
Propiedades en Figma: Variant=Outline|Accent, Size=M|S
Etiquetas y controles compactos. Los que hacen algo son botones; los que informan, texto.
iOS y AndroidEntregadoiOS y AndroidEntregado
Button
Propiedades en Figma: Variant=Primary|Secondary|Ghost
Hover, foco y deshabilitado los resuelve CSS; en Figma solo existen las variantes.
Decisión · 2026-10-05Variante y estado separados: en Figma solo hay variantes y los estados los resuelve CSS, así las combinaciones no se multiplican.
Ver product design Ver design engineering
Case row
Propiedades en Figma: Media=Right|Left
Etiqueta, título y tres pills: rol, plataforma y estado del proyecto.
01 / Trico · 2025–2026
Convertir la actualización tributaria en un hábito diario
- Único product designer
- iOS y Android
- Entregado
Ver caso →
Card
Propiedades en Figma: State=Default|Hover
Etiqueta, título, cuerpo y enlace. Toda la tarjeta es clicable; el foco se ve en el borde.
01 · Sistema
Design system del portafolio
Tokens en Figma Variables con modos claro y oscuro, exportados a CSS y componentes React.
02 · Exploración
Glup, de Figma a React Native
App de hidratación con registro sin conexión, Supabase y burbujas animadas con física en Skia.
Próximamente
Section header
Propiedades en Figma: Label, Meta, Show meta
Etiqueta numerada en mono y un dato opcional a la derecha.
06 — Componentes
Encabezado de sección

El encabezado y el pie de página también son componentes del sistema: están arriba y abajo de esta página.

Reglas del sistema

Pocas reglas, pero sin excepciones. Cada una dice cómo se cumple.

ReglaDos modos con nombre, Light y Dark, cada uno con su propia paleta.
Cómo se cumpleEl oscuro usa noche y nieve en vez de invertir el claro. La tabla de semánticos muestra los dos lado a lado.
ReglaTodo token semántico apunta a un primitivo.
Cómo se cumpleEl build del sitio se detiene si un alias apunta a un primitivo que no existe.
ReglaNingún componente usa un color suelto.
Cómo se cumpleLos componentes solo leen tokens semánticos; por eso el mismo código funciona en los dos modos.
ReglaEn Figma, los componentes solo tienen variantes.
Cómo se cumpleHover, foco y deshabilitado los resuelve CSS, así las combinaciones no se multiplican en el archivo.
ReglaTodo texto pasa AA en los dos modos.
Cómo se cumpleEl contraste de esta página se calcula en cada build con los valores reales de cada modo.

De Figma al navegador

Color

Primitivos

Semánticos

Contraste

Tipografía

Espacio y forma

Espacio

Radio

Trazo

Movimiento

Componentes

Pill

Button

Case row

Convertir la actualización tributaria en un hábito diario

Card

Design system del portafolio

Glup, de Figma a React Native

Section header

06 — Componentes

Reglas del sistema