Preview image. Unlock full-res
Dark OG card with a wordmark and big monospace headline plus URL on the left, and overlapping code-editor and data-map windows on the right.
Summary
A dark Observable card with a wordmark and oversized monospace headline (one word in teal) plus the URL on the left, and overlapping code-editor and data-visualization map windows on the right.
Visual description
Near-black background. Top-left shows the Observable target-style logo mark and wordmark. The headline "The best dashboards are built with code." is set large in a monospace face across several left-aligned lines, with the final word "code." highlighted in teal. The site URL "observablehq.com" sits below in gray. The right side layers two macOS-style windows: a rear window titled "U.S. dam locations" showing a dark choropleth map of the United States with a blue-to-yellow legend, and a front window of syntax-highlighted JavaScript (deck.gl-style setProps with GeoJsonLayer and HexagonLayer code, line numbers visible). The two windows overlap to pair code with its rendered output.
Key takeaway
Setting the headline in the same monospace as the product's code, with the keyword "code." accented, makes the medium reinforce the message. Overlapping a code window with the live visualization it produces is the clearest possible proof of "dashboards built with code."
Reuse notes
Ideal for developer tools, notebooks, or data platforms where writing code IS the product. The monospace headline signals "for engineers" but can feel cold for broader audiences. Needs real, legible code and a visually interesting render; works only on dark and benefits from full OG size so the code stays readable.
