Design Tokens

Los Design Tokens son los ajustes centrales que determinan la apariencia de todo tu sitio web. Incluyen: • Colores – Primario, secundario, acento, fondo, texto • Tipografías – Fuente de títulos y fuente de cuerpo • Espaciado – Distancias entre secciones • Radio de borde – Qué tan redondeados son los botones y tarjetas • Sombras – Estilo de sombra predeterminado para tarjetas y elementos Cuando cambias un design token, todo el sitio se actualiza automáticamente. No necesitas ajustar cada bloque individualmente.

Ve a Diseño → Colores. Verás los siguientes campos de color: • Primario – El color principal de tu marca (botones, enlaces, acentos) • Secundario – Un segundo color de acento • Acento – Color de resaltado adicional • Fondo – El color de fondo de la página • Superficie – Color de fondo para tarjetas y secciones • Texto – Color de texto predeterminado • Texto atenuado – Color para subtextos y marcadores de posición Haz clic en un campo de color para abrir el selector. Puedes introducir un código HEX o seleccionar un color visualmente.

Activa Dark Mode mediante el interruptor en la parte inferior del panel de Colores. Puedes establecer colores separados para el modo oscuro: • Primario (oscuro) – A menudo una variante más clara de tu color primario • Fondo (oscuro) – Fondo oscuro (ej. #1a1a2e) • Texto (oscuro) – Color de texto claro para legibilidad Cuando dark mode está activado, los visitantes ven un botón sol/luna en tu sitio. Su preferencia se recuerda.

Ve a Diseño → Tipografías. Puedes configurar dos fuentes: • Fuente de títulos – Se usa para todos los encabezados (H1 a H6) • Fuente de cuerpo – Se usa para párrafos y otros textos Elige entre cientos de Google Fonts. Escribe el nombre de la fuente para buscar. La fuente se carga automáticamente en tu sitio web.

Ve a Diseño → Espaciado. Aquí configuras las distancias predeterminadas: • Espaciado de sección – Espacio vertical entre secciones (ej. 64px, 80px, 96px) • Padding de contenido – Espacio interior dentro de las secciones Estos valores se aplican como predeterminados para todas las secciones. Puedes sobrescribir por bloque a través del inspector.

Ve a Diseño → Radio de borde. Esto determina qué tan redondeados son los elementos: • Ninguno (0px) – Esquinas afiladas, aspecto corporativo • Pequeño (4-8px) – Sutilmente redondeado • Medio (12-16px) – Moderno y amigable • Grande (24px+) – Muy redondeado, juguetón El radio de borde se aplica a botones, tarjetas, campos de entrada e imágenes.

Ve a Diseño → Sombras. Las sombras añaden profundidad a tarjetas y elementos. Elige un preset: • Ninguna – Diseño plano, sin sombra • Sutil – Sombra ligera, moderna • Media – Sombra clara, las tarjetas se elevan • Fuerte – Sombra pronunciada, mucha profundidad El ajuste de sombra se aplica a todos los elementos tipo tarjeta en tu sitio.

Haz clic en 'Guardar' para guardar tus design tokens. Los cambios son inmediatamente visibles en tu sitio en producción. • Restablecer todo – Restablece todos los tokens a valores predeterminados • Bloquear – Bloquea colores individuales para que no se sobrescriban durante la generación IA o importación de plantillas Nota: Los design tokens se guardan por sitio. Cada sitio tiene su propio conjunto de tokens.