← back to the gallery

Tatem: misty email-product hero followed by monochrome interaction demonstrations

Tier
inspiration
Roles
hero, explainer, feature, capability, closing, footer
Feel
dark, premium, minimal, saas, cold
Motion
pan, reveal, kinetic
Source
public-site
Site
https://tatem.com/
Licence
Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
Captured
2026-10-06
Captures
frames: https://images.refero.design/styles/refero.design/video/f1a0cc80-91f8-489c-be58-d24ffb29f6a7.mp4
both: https://tatem.com/

What it does

A pale blue-grey hero introduces the email product beside a diagonally tilted inbox interface. Below it, the page becomes black and uses dark rectangular demonstration stages for inbox organization, writing, speed, appearance and shortcuts. Animated dots, keyboard patterns and text states serve as abstract illustrations of the features.

Section roster

1. Misty blue-grey introduction and tilted inbox. 2. Split-inbox demonstration. 3. Text-editor demonstration. 4. Speed and design stages. 5. Keyboard shortcuts and automation panels. 6. Signup invitation and compact footer.

Why it works

The atmospheric opening gives way to a disciplined monochrome explanation. Each feature receives one bounded demonstration stage, making abstract interaction qualities easier to compare without showing a dense application screen throughout.

Source and capture notes

Refero [style page](https://styles.refero.design/style/cb6e4ab0-b8fe-45b0-bd22-6339b073e26d) and [recorded video](https://images.refero.design/styles/refero.design/video/f1a0cc80-91f8-489c-be58-d24ffb29f6a7.mp4); [live site](https://tatem.com/) checked on 2026-10-06. The recording is a point-in-time reference; current site content may differ. Descriptions distinguish the recording from the current page where they differ. Layout and motion notes come from sampled recording frames and automated live captures; interactive controls were not comprehensively tested.