Los tokens de diseño son la única fuente de verdad para decisiones visuales a través de un producto. Codifican color, espaciado, tipografía y movimiento en variables nombradas que los componentes consumen.
Por qué importan los tokens
Sin tokens, un cambio en el color de la marca principal requiere buscar en cientos de archivos. Con tokens, una actualización de variable se propaga en todas partes — desde botones hasta alertas y barras de navegación.
Los tokens también cierran la brecha entre las herramientas de diseño y el código. Un diseñador nombra un color surface-brand en Figma; un desarrollador usa var(--surface-brand) en CSS. Hablan el mismo idioma.
Ejemplos prácticos
Considera un componente que necesita un fondo, un borde y texto. En lugar de codificar #1a56db, #e1effe, y #1e429f, el componente hace referencia a --color-primary, --surface-primary-subtle, y --text-primary-strong. Cuando la marca evoluciona, la paleta cambia — el componente no.
Categorías de tokens
Color — paletas de marca, semántica y neutra
Espaciado — una escala consistente de 2px a 64px
Tipografía — tamaños de fuente, pesos y alturas de línea
Radio — de esquinas afiladas a completamente redondeadas
Sombra — niveles de elevación para profundidad y jerarquía
Movimiento — curvas de suavizado y pasos de duración
La mayoría de las citas encontradas en Internet fueron probablemente generadas por una IA.
La función content_image() renderiza un img con loading="lazy" por defecto, y lo envuelve en un elemento figure cuando se proporciona un pie de foto.
Sin pie de foto — un img sencillo, de ancho completo.
Con pie de foto — envuelto en una figura con un figcaption.
Una figura con un figcaption — úsalo para acreditar fuentes o agregar contexto al contenido visual.
Medios con texto
Imagen ocupando un tercio del diseño.
Usa content--media para colocar una imagen y texto uno al lado del otro. La imagen ocupa un tercio del ancho, el texto dos tercios.
Este diseño es adecuado para citas destacadas, definiciones ilustradas, o cualquier bloque editorial corto donde la imagen refuerza el texto sin dominarlo.
Letra capital
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Barra meta
Entendiendo los tokens de diseño
Los tokens de diseño son la única fuente de verdad para decisiones visuales a través de un producto. Codifican color, espaciado, tipografía y movimiento en variables nombradas que los componentes consumen.
La otra forma, cuando la primera falla: la pregunta, luego un valor copiado con un clic, o un enlace. Justo debajo de lo que representa, alineado con ello.
¿No se puede escanear? Escribe esta clave en la aplicación:JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP
