Layers and dialogs gallery | Cosmos Design System by SIMT

C15 C26 M07 C19 · Mobile app, Web app

Default · illustrative

ANATOMY

State matrix · static HTML, readable without JavaScript
State	Looks like	Does
`default`	Opaque surface, legible label, essential boundary	Real enabled semantics
`pressed`	Inset tone; no movement of layout	Equivalent to hover for touch and keyboard
`pending`	Stable label and small progress mark	Busy, duplicate guard; cancel if operation allows
`error`	Danger icon, explicit text and retry	Preserve safe inputs; error related to source
`offline`	Dimmed live surfaces and an offline notice with what is still available	Cached content stays readable; recovery names the retry

Four stills of the same transition. Playback repeats it; the stills explain it on their own.

C15 C19 · Web page, Web app, Mobile app

Default · illustrative

ANATOMY

State matrix · static HTML, readable without JavaScript
State	Looks like	Does
`default`	Opaque surface, legible label, essential boundary	Real enabled semantics
`pending`	Stable label and small progress mark	Busy, duplicate guard; cancel if operation allows
`disabled`	Muted label, disabled semantics, adjacent reason if useful	No opacity reduction of all ancestor content
`error`	Danger icon, explicit text and retry	Preserve safe inputs; error related to source
`confirmed`	Success check and specific confirmation	Retain durable result in the surface

Four stills of the same transition. Playback repeats it; the stills explain it on their own.

A02 C26 C10 · Web page, Web app, Mobile app

Default · illustrative

ANATOMY

State matrix · static HTML, readable without JavaScript
State	Looks like	Does
`default`	Opaque surface, legible label, essential boundary	Real enabled semantics
`pressed`	Inset tone; no movement of layout	Equivalent to hover for touch and keyboard
`selected`	Check, leading marker or tonal boundary; rim light may accompany, never replace it	Selected / pressed / current state as appropriate
`pending`	Stable label and small progress mark	Busy, duplicate guard; cancel if operation allows
`offline`	Dimmed live surfaces and an offline notice with what is still available	Cached content stays readable; recovery names the retry

Four stills of the same transition. Playback repeats it; the stills explain it on their own.

A04 C27 C26 · Web page, Web app, Mobile app

Default · illustrative

ANATOMY

State matrix · static HTML, readable without JavaScript
State	Looks like	Does
`default`	Opaque surface, legible label, essential boundary	Real enabled semantics
`pending`	Stable label and small progress mark	Busy, duplicate guard; cancel if operation allows
`stale`	Muted surface and an age label beside the value	The value stays readable and carries its age; never a pulse
`offline`	Dimmed live surfaces and an offline notice with what is still available	Cached content stays readable; recovery names the retry

Four stills of the same transition. Playback repeats it; the stills explain it on their own.