Ably

How it works

hero:

Full-width dark background with centered headline (4–5xl weight), subheading, and dual CTA buttons positioned above a horizontal magenta-bordered screenshot that spans ~70% width.

layout:

Vertical stack of alternating single-column and two-column sections; magenta-bordered content cards (screenshots, feature blocks) appear as 60/40 or 50/50 splits; footer collapses to 4-column grid of small-text link groups.

type:

Large sans-serif headline (~3xl–5xl) in bold weight paired with smaller body copy (~sm–md) in regular weight; monospace numerals and stats (uptime figures) for technical credibility; tight tracking on headlines.

colors:

Near-black background (dominant 90%+) with magenta/hot pink used exclusively as a 3–4px border frame around key visuals and accent elements, creating high contrast focal points; white typography for hierarchy.

distinctive:

Magenta rectangular border frame applied consistently to product screenshots and UI mockups, functioning as both visual rhythm device and depth indicator without filling interior space.