O Liquid Glass do grupo, na cor da sua plataforma

Starter Nuxt com tema claro e escuro, três idiomas e a marca inteira num bloco só de tokens. Troque a paleta em um lugar e todo o vidro acompanha.

As superfícies

O sistema base em três tratamentos: vidro focal, cartão plano e lente.

.es-glass

Tinta translúcida, blur e brilho. Para masthead, menus e destaques, nunca em dezenas de cards de uma vez.

.es-card

A mesma tinta sem blur, para listas densas que não podem pagar o orçamento do compositor.

.es-lens

Controles pequenos em vidro por camadas e rótulos curtos sobre tinta translúcida.

Superfície escura fixa nos dois temas, derivada do campo profundo da marca. O exemplo mostra a troca de paleta.

app/assets/css/main.css

:root {
  --brand-1: #2e7d46;
  --brand-2: #9ccb3b;
  --brand-deep: #06210f;
  --brand-link: #3f9e63;
}

Paletas prontas no main.css:

echosistemaagronewscomplaintcommerceintelligence

Todo o CSS deriva destes tokens. Trocar a paleta é trocar este bloco, e nada mais.

Token	Papel
`--brand-1`	Cor primária da marca: estrutura, gradientes e cabeçalhos de tabela.
`--brand-2`	Cor de acento: código inline, seleção de texto e os blobs do fundo.
`--brand-deep`	O campo profundo: deriva fundos, textos e sombras nos dois temas.
`--brand-link`	Links, anéis de foco e a ponta clara do gradiente.
`--brand-gradient`	O gradiente da marca, um só, usado no botão primário e no destaque do hero.