Loops — subscriber-slider pricing page

---
version: alpha
name: Loops — subscriber-slider pricing page
colors:
  surface: '#f9f9f8'
  ink: '#21201c'
  accent: '#fc5200'
  primary: '#21201c'
typography:
  primary:
    fontFamily: Newsreader
    fontSize: 40px
    fontWeight: 500
    lineHeight: 44px
    letterSpacing: -0.8px
  body:
    fontFamily: Inter
    fontSize: 16.8px
    fontWeight: 400
    lineHeight: 28.56px
  control:
    fontFamily: ui-sans-serif
    fontSize: 15px
    fontWeight: 600
    lineHeight: 15px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 999px
---

## Overview

A restrained two-column pricing page with serif labels, a subscriber slider, one large plan summary, a muted customer-logo grid and openly displayed FAQ answers.

Source: https://loops.so/pricing. Captured 2026-10-09T06:24:50.741191+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 40px/44px, weight 500, with -0.8px tracking. The body sample uses Inter, "Inter Placeholder", sans-serif at 16.8px/28.56px. These are measured element styles, not a universal brand scale. The matching mobile primary sample uses 36px/39.6px.

## Layout

Place introductory pricing copy in a narrow left column and the subscriber control above a broad right-hand plan card. The captured initial state shows 1,000 subscribers and a free plan. Separate its large numeric heading, plan label, black action and checkmarked inclusions with pale horizontal rules. Follow with a two-row customer-logo grid and a left-heading/right-answer FAQ layout, then the four-column footer.

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

At 390px the introduction moves above the slider and card. The primary action expands to most of the card width, while the subscriber count and price remain side by side. The mobile heading reduces from 40px to 36px. The booking card is collapsed to avoid covering the features.

## Elevation & Depth

An almost invisible gray border and faint shadow define the plan surface; tinted rectangular logo tiles form a secondary rhythm. Black pill actions provide the strongest contrast. Exact shadow blur and motion easing were not measured.

## Shapes

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

## Components

Slider values, pricing labels and limits describe only the captured state. Slider changes, billing behavior and account creation were not tested. FAQ answers are already visible; do not replace them with an assumed accordion.

## 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.