Temas y guías de estilo
Cómo funciona el tema del proyecto, cómo cambiarlo sin riesgo y por qué los colores no deben editarse pantalla por pantalla.
Última actualización:
Cada proyecto tiene un tema: un conjunto de design tokens para colores, tipografía, radios y espaciados. Las pantallas referencian esos tokens en lugar de valores fijos, y eso es lo que hace que veinte pantallas parezcan un solo producto.
Cambiar unos cuantos colores
Solo pídelo:
Haz que el color principal sea #1B4DFF. El fondo es demasiado frío; caliéntalo.
Esto fusiona un cambio pequeño en el tema existente y deja el resto intacto. Es gratis y se aplica en todas partes a la vez.
Construir un look completamente nuevo
Para un cambio de raíz —un rediseño, pasar a oscuro, una marca nueva— pide exactamente eso:
Dale a todo el proyecto un tema oscuro. Rediseña esto con nuestra marca nueva: verde profundo como principal, fondo crema, titulares con serifa.
Eso construye un conjunto de tokens completamente nuevo en lugar de parchear el anterior.
Acotar un cambio
Por defecto, los cambios de tema son para todo el proyecto. Para limitar uno a una sola pantalla, dilo:
Solo en la landing page, haz el fondo de la cabecera negro.
El contraste se comprueba
Los temas se validan buscando combinaciones de color legibles antes de aplicarse, así que no deberías acabar con texto oscuro sobre fondo oscuro. Si quieres a propósito un tratamiento de bajo contraste, dilo, pero espera que el sistema empuje hacia la legibilidad.
Generar una guía de estilo
Pide una guía de estilo y obtendrás una pantalla renderizada con la paleta, la escala tipográfica y los componentes principales: útil como artefacto de entrega y como comprobación de que el sistema es coherente.
Errores habituales
- Editar un color en una sola pantalla. Funciona, y después la siguiente pantalla generada no encaja. Usa el tema.
- Pedir «modo oscuro» mientras estás en modo edición sobre un elemento. Esa vía puede fijar colores en el código en lugar de rehacer el tema. Pídelo en el chat, a nivel de proyecto.
- Dar por hecho que si la herramienta de temas dice que ha funcionado, se ha renderizado. Mira el lienzo. Si las pantallas no se han movido, consulta Mi guía de estilo no se aplicó.
Preguntas frecuentes
- ¿Cambiar el tema cuesta créditos?
- No. Crear o actualizar un tema es gratis. Solo cuesta créditos generar las pantallas en sí.
- ¿Puede una pantalla tener un tema distinto?
- Sí: pide que el cambio se limite a esa pantalla. Por defecto, un cambio de tema se aplica a todo el proyecto, que suele ser lo que quieres.
¿Te ha resultado útil este artículo?
Artículos relacionados
Fuentes y tipografía
Elegir tipografías, usar Google Fonts y qué hacer cuando un cambio de tipografía no aparece.
Editar una pantalla
Las tres formas de cambiar un diseño —chat, modo edición y temas— y cuándo cada una es la herramienta adecuada.
Mi guía de estilo o mi tema no se aplicó
Las pantallas se renderizan sin estilos o ignoran un cambio de tema: qué comprobar y qué enviarnos.