Radii & shadows

Shape

Corner radius

Elevation

Shadows

Glass surfaces

Hero context layers

The agent identity, response, and CTA share one backdrop blur, border, fill, and elevation token in both themes. The primary hero statement sits directly on the background without a container.

Glass surfaces

Conversation glass

The translucent user-message surface used on paper-textured conversation cards. Apply .conversation-glass to preserve the approved fill, border highlight, and soft elevation.

Motion

Synchronized hero imagery

Four evenly spaced dotted routes use distinct logo contact points and a single leading circle. The dashed construction front fades in only at contact, moves quickly around the logo, then crossfades into one solid closed outline at 2.5 seconds. Photography flips in after the solid outline appears, and the completed state holds before the typewriter advances.