Styles

A practical visual system for opaque surfaces, clear attention and restrained movement.

Color

Use the black and red identity, semantic color roles and approved contrast pairs.

Set clear interface and reading text with the bundled families and type scale.

Apply the radius, spacing and target-size scales to controls and surfaces.

Distinguish opaque layers and focused windows with depth and restrained glow.

Time immediate shell feedback and respect reduced motion.

Explore the portal transition, capability tiers and static alternatives.

Connect Elm’s semantic state to layered tokens and CSS presentation.

Use the folded W, diamond and utility icons with clear accessible names.