Loops homepage, decoded: a serif heading and a visible flow

This is iter0's independent analysis of the Loops homepage as we captured it on 2 Oct 2026, at a 1440px desktop width and a 390px phone width. It is not affiliated with, endorsed by or written with Loops. Everything below comes from a design spec we already hold for the page: its measurements, its layout and what the capture did and did not show. There are no screenshots, logos or marketing copy from Loops here, and a live site can change at any time.

A centred 56px serif heading, a muted one-line paragraph and two 44px actions lead into a strip of small marks and a framed product preview. The preview has a pale surface, thin edge and rounded corners, with an assistant-style panel laid over its lower left and a small booking control near the lower right. The spec notes an unusually generous vertical gap before the marks and preview, and says to preserve it.

Unlike most sites, the desktop navigation is asymmetric. A small mark and a short vertical stack of three utility links sit at the upper left, and two account actions, a light and a dark one with 8px radii, sit at the upper right. It is explicitly not a full-width horizontal bar. On a phone, it becomes a shallow header with a wordmark and a circular 44px menu button.

The signature shows a branching workflow as a demonstration. A short serif heading and muted paragraph sit above a pale dotted canvas with a narrow toolbar (two mode controls and a selector) and connected task cards of 160px by 54px with 10px corners. Cards stack vertically and then split into a three-way branch with fine connector lines. It looks like a flow, not a feature grid.

A literary serif for headings (56px with 60px line height, tight tracking) and a neutral sans for the rest, at 16px with a slight negative tracking. Colours are near-black rgb(28,32,36), grey rgb(96,100,108) and near-white rgb(252,252,253). Node labels are 12px at weight 650 with 10.5px muted secondary lines.

At 390px the header is 50px, the heading is 36px on two centred lines, the supporting copy is absent from the captured composition, and the two 44px actions share a row. Marks run horizontally and the rightmost is clipped. The preview begins around y=313, about 342px wide, with a floating booking control at the bottom edge.

The active-control colour is not reliably established, the phone menu's open state is not shown, and the spec warns against concluding that the supporting copy is permanently hidden on phones from a single view.

When your product is a sequence, draw the sequence: a stack of cards that fans out says 'branching' faster than a paragraph. A serif headline also gives an email product a warmer voice than a standard sans.

We keep a longer craft spec for this page: hero, navigation and signature component, with the measured sizes, a list of what not to copy and checks you can run. It is free to download as a Markdown file, and you can use it as a pattern guide for your own site. It describes layout and proportion, so use your own name, wording and imagery. If you want a site built around the same pattern, give the spec to iter0 and it will build you an original page from it.