Token de diseño
Ejemplo: un café de barrio nombra su color principal una sola vez como --brand-primary y lo referencia en todas partes, de modo que cambiar la marca de óxido a oliva se vuelve una edición de una línea en lugar de un buscar-y-reemplazar en decenas de hojas de estilo.
un nombre para una decisión, no para un valor
Una referencia con nombre para una decisión de marca — un color, un tamaño de fuente, un radio de borde, un paso de espaciado — exportada como archivo portable (variables CSS, JSON o una biblioteca de Figma) para que el mismo valor viva en un solo lugar y todas las superficies que lo usan permanezcan sincronizadas.
Por qué importa
Códigos hex regados por una hoja de estilos es como una marca se desincroniza. Los tokens son cómo evitarlo. Cuando la paleta tiene nombre una vez (--brand-primary) y se referencia en todas partes, cambiar óxido por oliva es una línea, no un buscar-y-reemplazar en cuarenta archivos. La Suite de Marca exporta un set inicial de tokens desde cualquier logo.
Preguntas frecuentes
¿Qué es token de diseño?
Token de diseño es una referencia con nombre para una decisión de marca — un color, un tamaño de fuente, un radio de borde, un paso de espaciado — exportada como archivo portable (variables CSS, JSON o una biblioteca de Figma) para que el mismo valor viva en un solo lugar y todas las superficies que lo usan permanezcan sincronizadas.
¿Por qué importa token de diseño para un restaurante?
Códigos hex regados por una hoja de estilos es como una marca se desincroniza. Los tokens son cómo evitarlo. Cuando la paleta tiene nombre una vez (--brand-primary) y se referencia en todas partes, cambiar óxido por oliva es una línea, no un buscar-y-reemplazar en cuarenta archivos. La Suite de Marca exporta un set inicial de tokens desde cualquier logo.
- Identidad de marca — el sistema visible completo alrededor de tu logo
- Composición de logo (lockup) — símbolo + logotipo + lema opcional, como una unidad
- Espacio de resguardo — la zona vacía alrededor del logo
- Paleta de colores — el conjunto curado de colores que le pertenecen a tu marca
- Contraste WCAG AA — contraste de color accesible
- Favicon — el pequeño ícono en la pestaña del navegador
Explora los
149 términos.
Definiciones en lenguaje claro para cada término en tu auditoría, organizadas por categoría.