Replay OG card

Replay OG card, dark-mode, technical, dark

Preview image. Unlock full-res

Dark split OG card with a bold white headline left and a faux code editor with a scrub bar and play cursor right, over a deep navy gradient.

Summary

A dark developer-tool OG card splitting an oversized two-line headline against a stylized code-editor panel with a blue scrub bar and play cursor. The defining detail is the timeline scrubber that literalizes the "time travel debugger" pitch.

Visual description

Deep navy background with a subtle lighter glow upper-right and faint maroon swirls. Top-left: a magenta double-triangle play logo and the white "Replay" wordmark. Below, a large white sans-serif headline "Your time travel debugger" over two lines, then muted sub-copy "Record and replay web applications with familiar browser dev tools." The right half holds a dark rounded editor: a code pane with numbered monospace lines (canvas/getContext JavaScript, one line highlighted), an adjacent panel with a thin white spline curve, and a bright cyan progress bar along the bottom ending at a white arrow cursor.

Key takeaway

Turning the product's core metaphor into a single visual: the cyan scrubber with the cursor mid-drag makes "time travel" instantly legible. The magenta logo and cyan bar are the only saturated marks against navy, so both read clearly.

Reuse notes

Good template for a debugging, replay, or observability dev tool. Works only on dark, and depends on a believable code/editor mock. Keep the accent count to two so the timeline stays the focal point.

More like this