EchoSistema Template
Showcase index

Start

Actions

Forms

Navigation

Authentication

Feedback

Content

Feedback

Alerts in eight tones, native modals and the two ways of saying something is on its way.

Alerts

Notices in eight tones, the same palette as the intents: the four semantic status ones and the four named tonal ones.

InformationA neutral notice, for context or news that asks for no action.
SuccessThe operation finished as expected; nothing left to do.
WarningSomething needs your review before you continue.
ErrorThe operation failed; check the data and try again.
CautionThe attention yellow, one step below orange: read before moving on.
Steel blueThe MIV's steel blue as a named tone, for an institutional note without urgency.
Navy blueThe group's deep field as a notice; the accent lightens in the dark theme so it does not vanish.
DarkThe dark neutral, for the notice that asks for no color at all.

Closeable and timed

closeable adds the close button; timeout closes the notice on its own, with the countdown running along the bottom edge. Hovering it or focusing inside pauses the clock: a notice that vanishes mid-read fails exactly the person who stopped to read it.

You can close thisA notice the reader dismisses once it has been read.
Gone in 8 secondsThe bar below counts the time; hover to pause.
Timed and closeableLeaves on its own in 12 seconds, or sooner if the reader closes it.

Modals

The native dialog on an opaque theme surface: trapped focus, Esc closes, the page behind locks and the background blurs into illegibility so the modal is the only focus; clicking outside does not close. The modal takes the same intents as the buttons: the edge wedge, like the alerts, and the primary action follow the tone.

.es-dialog

.es-dialog--sm … .es-dialog--xxl

.es-dialog + .es-i--*

Blocking and skeletons

The two ways of saying something is on its way: the veil covering a ready region and the smear standing in for what has not arrived.

<echo-block>

Click the button to see the region covered. While the veil is up the content is inert: Tab does not enter it.

.es-skeleton

<echo-loader>

The whole-page veil: it covers the work area with the brand in the middle while the API read is still out. In the panel it spares the side menu and the top bar.

Toasts

The notice that floats over the page, queued by a global composable. The announcement region stays mounted even when empty: one that only appears with the message often goes unread.

useToast().push()

position + align

·

The position lives in global state, so anywhere in the app can ask where the notice shows up.

timeout: 0

With a zero timeout the notice stays until someone closes it; the default fades after 4.5 seconds.

Spinners

Always aria-hidden: what announces loading is the region aria-busy, and a spinner announced on its own does not say what is happening.

.es-spinner

.es-spinner + .es-i--*

Entrance animations

Seven entrances in the spirit of animate.style, written on this system’s tokens instead of pulled in as a dependency.

an entrance animation runs once; whoever arrives mid-page never sees it
.es-anim-fade
.es-anim-fade-up
.es-anim-fade-down
.es-anim-fade-start
.es-anim-fade-end
.es-anim-zoom
.es-anim-pop

The whole library is 90 animations and around 70 kB, and a site of the group uses four or five, always the same ones. Worse than the weight: they carry their own durations and curves, and a 1s entrance beside a menu that opens in 0.16s does not read as the same product. The delay classes (es-anim-delay-1 to 5) stagger a list with no script at all. With reduced motion on, the element is born in its final state: the information stays, the movement does not.

<article class="es-card es-anim-fade-up es-anim-delay-2">…</article>

About this modal

The structure follows the instruction: a header with the title and a close button, a body that scrolls when it needs to and a footer with the primary action on the right.

Long content

The paragraphs below repeat on purpose: the body scrolls inside the dialog, header and footer stay fixed and the page behind does not move.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

Width scale --md

This modal only swaps the size class; the paragraphs below repeat so the body scrolls internally at any width.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

Confirm the action

The wedge and the primary button inherit the chosen intent. In a truly destructive action the button verb is explicit, Delete rather than OK, and the intent is danger.

primary

For AI agents

This page’s specification

A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.

Download: Feedback Download the full guide Read in the browser

/agents/feedback.md

EchoSistema Template

The visual foundation of the EchoSistema group's platform sites.

© 2026 EchoSistema S.A. · EchoSistema standard template