.es-glassFocal glass
Translucent ink, blur and shine. For the masthead, menus and highlights, never on dozens of cards at once.
The group's Liquid Glass, in your platform's color
A Nuxt starter with light and dark themes, three languages and the whole brand in a single block of tokens. Swap the palette in one place and all the glass follows.
The surfaces
The base system in three treatments: focal glass, flat card and lens.
.es-cardFlat card
The same ink without blur, for dense lists that cannot afford the compositor budget.
.es-lensLens and chip
Small controls in layered glass and short labels over translucent ink.
Code panel
A dark surface fixed in both themes, derived from the brand's deep field. The example shows a palette swap.
app/assets/css/main.css
:root {
--brand-1: #2e7d46;
--brand-2: #9ccb3b;
--brand-deep: #06210f;
--brand-link: #3f9e63;
}Palettes ready in main.css:
echosistemaagronewscomplaintcommerceintelligence
The brand tokens
All the CSS derives from these tokens. Swapping the palette means swapping this block, and nothing else.
| Token | Role |
|---|---|
--brand-1 | Primary brand color: structure, gradients and table headers. |
--brand-2 | Accent color: inline code, text selection and the background blobs. |
--brand-deep | The deep field: derives backgrounds, text and shadows in both themes. |
--brand-link | Links, focus rings and the light end of the gradient. |
--brand-gradient | The brand gradient, a single one, used on the primary button and the hero highlight. |