.es-glassVidrio focal
Tinta translúcida, blur y brillo. Para el masthead, menús y destacados, nunca en decenas de tarjetas a la vez.
El Liquid Glass del grupo, en el color de tu plataforma
Starter Nuxt con tema claro y oscuro, tres idiomas y la marca entera en un solo bloque de tokens. Cambia la paleta en un lugar y todo el vidrio la sigue.
Las superficies
El sistema base en tres tratamientos: vidrio focal, tarjeta plana y lente.
.es-cardTarjeta plana
La misma tinta sin blur, para listas densas que no pueden pagar el presupuesto del compositor.
.es-lensLente y chip
Controles pequeños en vidrio por capas y etiquetas cortas sobre tinta translúcida.
Panel de código
Superficie oscura fija en ambos temas, derivada del campo profundo de la marca. El ejemplo muestra el cambio de paleta.
app/assets/css/main.css
:root {
--brand-1: #2e7d46;
--brand-2: #9ccb3b;
--brand-deep: #06210f;
--brand-link: #3f9e63;
}Paletas listas en main.css:echosistemaagronewscomplaintcommerceintelligence
Los tokens de marca
Todo el CSS deriva de estos tokens. Cambiar la paleta es cambiar este bloque, y nada más.
| Token | Rol |
|---|---|
--brand-1 | Color primario de la marca: estructura, gradientes y encabezados de tabla. |
--brand-2 | Color de acento: código inline, selección de texto y los blobs del fondo. |
--brand-deep | El campo profundo: deriva fondos, textos y sombras en ambos temas. |
--brand-link | Enlaces, anillos de foco y el extremo claro del gradiente. |
--brand-gradient | El gradiente de la marca, uno solo, usado en el botón primario y en el destacado del hero. |