# Loops homepage design spec (free) - Site: loops.so - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Loops. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Loops's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Centered product-led hero **Evidence provenance:** Desktop capture: 1440 × 900 at scrollY 0, matched to `desktop`. Phone capture: 390 × 844 at scrollY 0, matched to `phone`. Positions are viewport pixels; colors and typography use the supplied computed measurements where available. The rendered phone capture resolves details, such as the visible wordmark, that are not represented in the extracted element rows. **CRAFT ARCHETYPE:** product-UI-led ## The big idea Center a restrained, two-action introduction above a broad product interface preview. On desktop, a large serif heading leads into one line of muted supporting text and a compact action row; a horizontal strip of small marks separates the actions from the preview. The interface—not decorative imagery—provides the hero’s visual weight. Preserve the unusually generous vertical gap before the marks and preview. ## Layers At 1440px, the heading box is x=194, y=88, 1052 × 60px; supporting copy is x=380, y=156, 680 × 24px. The two 44px-high actions start at y=200, at x=587 and x=736, measuring 129 × 44px and 118 × 44px. The marks begin around y=235. The framed product preview begins around x=182, y=265 and is approximately 660px wide. Keep its pale surface, thin edge, rounded corners, and fine interface detail. An assistant-style panel overlays the preview’s lower-left region; a separate compact booking control sits near the desktop lower-right edge. These are distinct observed elements, not content to reproduce. ## Type Use a literary serif for the heading at 56px/60.48px, weight 400, tracking −1.12px. Supporting sans text is 16px/24px with −0.16px tracking. The main action label is 15px/20px, weight 500; the secondary label is 14px/21px. Center the headline and action group. ## Colour Use near-black `rgb(28, 32, 36)`, supporting gray `rgb(96, 100, 108)`, and near-white `rgb(252, 252, 253)` for the observed text and control contrast. Keep page and preview surfaces near-white. The main action is dark-filled with a 10px radius; the secondary remains visually quiet. ## States and motion The secondary action reports 0.18s color/background and 0.22s shadow/transform transitions. Hover appearance and preview animation are unknown. ## Phone at 390px At 390 × 844, the visible header occupies y=0–50. The two-line, centered heading is x=24, y=80, 342 × 78px, at 36px/38.88px with −0.54px tracking. Supporting copy is absent from this captured composition. The two 44px actions share one row at y=190, x=62 and x=211. Marks begin around y=258 and continue horizontally, with the rightmost content clipped by the viewport rather than wrapped. The preview begins around x=24, y=313 and is about 342px wide. Its assistant overlay is x=40, y=334, 310 × 270px; the underlying interface is visible beneath it. A floating booking control is x=158, y=772, 216 × 52px, partly at the bottom edge. Do not infer permanent hiding from this single view. ## Do NOT copy or add Do not reproduce source wording, marks, product labels, brand identity, or floating-control copy. Do not invent claims or preview behavior. ## Checks you can run At desktop, check the 56px heading, 16px support, 44px actions, and preview placement near y=265. At 390px, check the 50px header, 342 × 78px heading, 44px action row, horizontal mark clipping, and the measured overlay and floating-control bounds. --- # Asymmetric desktop navigation with compact phone header **Evidence provenance:** Desktop capture: 1440 × 900 at scrollY 0, matched to `desktop`; phone capture: 390 × 844 at scrollY 0, matched to `phone`. Desktop navigation positions and account-control styles are from the supplied computed measurements. The phone pixels visibly show a wordmark and menu glyph; do not treat source identity or wording as reusable content. **CRAFT ARCHETYPE:** type-led ## The big idea Use an asymmetric desktop arrangement: a small mark and short vertical utility-link stack at the upper left, balanced by two account actions at the upper right. This is not a full-width horizontal link bar. At phone width, the desktop link clusters give way to a shallow, full-width header with a wordmark on the left and a circular menu control on the right. The captured menu is closed; its open state is not evidenced. ## Layers At 1440px, the left mark’s link box is x=57, y=37, 27 × 23px. Utility-link boxes begin at x=58 and y=78, 112, and 144; their measured widths are 45px, 44px, and 33px. The right account controls start at y=28: the light control is x=1207, 70 × 40px; the dark control is x=1293, 101 × 40px. Their right inset is 46px, with a 16px gap. Both use 8px radii and 8px 14px padding. At 390px, the header spans x=0–390 and y=0–50. The circular menu button is x=326, y=3, 44 × 44px—20px from the right edge. The phone pixels show the wordmark at upper left; desktop utility links and account controls are not visible in this composition. ## Type Utility navigation uses a neutral sans at 14px/21px, weight 400, tracking −0.28px. Account labels use 14px/20px, weight 500, tracking −0.14px. Keep the utility links restrained and the account actions compact; avoid enlarging navigation into a second headline. ## Colour Utility text is `rgb(96, 100, 108)` and account text is `rgb(28, 32, 36)`. The light account surface and dark-action label are near-white `rgb(252, 252, 253)`. The mobile header is `rgb(249, 249, 251)`; the menu button surface is near-white. ## States and motion Account controls report 0.18s background, border, and color transitions, plus 0.22s shadow and transform transitions. Utility hover is unknown. The menu’s open state and motion are unknown; do not infer a drawer from its icon. ## Do NOT copy or add Do not reuse the source mark, wordmark, link labels, or destinations. Do not add sticky behavior, a desktop menu icon, or unseen menu contents. ## Checks you can run At 1440px, verify the left mark begins near x=57, utility links near x=58, and account actions at x=1207 and x=1293 with 40px height. Check 8px radii and a 46px right inset. At 390px, check a 50px header and a 44px circular control at x=326, y=3; keep desktop link and account clusters out of the captured phone composition. --- # Branching workflow interface **Evidence provenance:** Below-hero desktop capture: 1440 × 900 at scrollY 900, matched to `below-900`. The screenshot shows the workflow section and its connected canvas below the hero. Supplied computed measurements describe a 700px main content column, heading and supporting paragraph, toolbar controls, and repeated workflow nodes. Screen positions in the capture establish the overall composition; node dimensions and typography come from the measured rows. This describes the visible product interaction, not its unobserved outcomes. **CRAFT ARCHETYPE:** product-UI-led ## The big idea Frame a branching workflow as a single product demonstration. A short editorial introduction sits above a pale, dotted canvas with a narrow toolbar, compact controls, and connected task cards. The canvas reads as a sequence that branches, rather than as a marketing feature grid. Keep the connectors light and the cards legible without adding ornamental UI. ## Layers The content column measures 700px and begins at x=370 in the supplied layout measurements. Its heading is 25.28px with 29.072px line-height; the muted paragraph is 16.8px/28.56px in a 57px box. In the below-hero screenshot, the heading and paragraph sit above the canvas, which begins around x=263 and is approximately 500px wide in the visible composition. The toolbar includes two adjacent mode controls measured at 99 × 31px and 90 × 31px, plus a selector of 188 × 36px. The canvas uses a subtle dotted field. Repeated task cards are 160 × 54px with 10px corners, 8px 10px padding, and an 8px internal gap. Cards stack vertically before spreading into a three-way branch; fine connector lines make the relationship explicit. The lower canvas continues beyond the 900px viewport. ## Type Use a serif for the section heading and a neutral sans for explanatory and interface text. Node primary labels measure 12.32px/14.168px at weight 650; secondary labels are 10.56px/13.2px at weight 450 and muted. Keep toolbar labels larger than card metadata but visually subordinate to the section heading. ## Colour Use near-black `rgb(28, 32, 36)` for primary text, muted gray `rgb(96, 100, 108)` for support, and near-white `rgb(252, 252, 253)` for card surfaces. Maintain faint canvas dots, subtle borders, and restrained shadows. Exact active-control color is not reliably established. ## States and motion Node controls report 0.14s border, shadow, and transform transitions. A 0.26s node entrance animation with staggered delays is present in computed measurements. Trigger and easing are unknown; mode and selector outcomes are unobserved. ## Do NOT copy or add Do not reuse source labels, node text, product identity, or claims. Do not invent connector editing, selector results, or a phone canvas arrangement. ## Checks you can run At desktop, verify the 700px column, 25.28px heading, 16.8px paragraph, 160 × 54px cards, 10px radius, and 8px internal gap. Check that the visible canvas is a connected branching interface on a pale dotted field, not a grid of promotional cards.