Loops — serif email-platform landing page with retro color rails

---
version: alpha
name: Loops — serif email-platform landing page with retro color rails
colors:
  surface: '#f9f9f8'
  ink: '#21201c'
  accent: '#fc5200'
  primary: '#21201c'
typography:
  primary:
    fontFamily: Newsreader
    fontSize: 44px
    fontWeight: 500
    lineHeight: 47.52px
    letterSpacing: -0.88px
  body:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.2px
  control:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 40px
---

## Overview

An off-white SaaS landing page combining Newsreader serif headlines, black pill actions, animated product demonstrations and a continuous orange-to-rust border that winds through the long page.

Source: https://loops.so/. Captured 2026-10-09T06:24:54.317302+00:00. This guide describes the observed page, not an official brand specification.

## Colors

Observed surface and computed-style palette: surface: #f9f9f8; ink: #21201c; accent: #fc5200; primary: #21201c. Keep the documented accents distinct from neutral copy and form surfaces. Decorative artwork contains additional tones not represented by these core tokens.

## Typography

The primary sampled text uses Newsreader, "Newsreader Placeholder", serif at 44px/47.52px, weight 500, with -0.88px tracking. The body sample uses Inter, "Inter Placeholder", sans-serif at 20px/28px. These are measured element styles, not a universal brand scale. The matching mobile primary sample uses 44px/47.52px.

## Layout

Use a left-aligned opening with generous margins, a compact logo/navigation row, paired primary and demo actions, and a horizontal customer-logo strip. Give the large product demonstration a softly rounded browser frame. Continue down a narrower explanatory rail with workflow, theme, analytics, developer, integration and deliverability demonstrations, then two attributed customer quotations. Wrap the pale content in thick orange, amber and rust tracks that turn around the first demo and finish in a rust-colored footer.

The main screenshot records a 1440px-wide desktop page with a document height of 7379px. Mobile evidence is the opening 390×844px viewport, not a complete mobile-page audit.

The mobile opening keeps the 44px serif title but wraps it onto two lines, collapses navigation to a circular menu control, and stacks the product and assistant demos. The edge stripes disappear from the opening mobile view. The logo strip is horizontally clipped as a source presentation choice, not missing imagery.

## Elevation & Depth

Soft gray shadows and thin borders distinguish simulated browser windows and floating assistant panels from the warm-white canvas. The colored perimeter is a decorative continuous rail rather than separate cards. Exact shadow blur and motion easing were not measured.

## Shapes

The sampled action has a computed corner radius of 40px and padding 10px 20px. Treat additional spacing or breakpoint choices as adaptation decisions, not measured source constants.

## Components

The demo changes state automatically; the screenshot records one moment, not an executed customer workflow. The booking widget was collapsed through its real control before capture. No demo booking or account action was submitted.

## Do's and Don'ts

- Do preserve the documented hierarchy and observed mobile content order.
- Do keep field labels, source attribution and alternative actions visibly associated with their content.
- Do treat prices, metrics and testimonials as dated source content, not verified results.
- Don't infer unseen interaction states, successful authentication or application behavior.
- Don't reproduce low-contrast text without checking accessibility in the new implementation.