---
title: "Loops design system"
variant: extended
source: https://loops.so/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/loops-so)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Loops · Design System

> Warm editorial calm meets crisp SaaS product UI.

**Theme:** light · **Industry:** saas · **Source:** https://loops.so/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Loops pairs a warm, quiet editorial canvas with a clear SaaS product preview and direct calls to action. Serif display typography and restrained neutral surfaces keep the homepage approachable, while a narrow orange edge accent adds a distinctive brand cue.

## North star

Let warm editorial typography introduce the product, then keep every surrounding element quiet enough for the interface preview to lead.

## Overview

The page is built on a warm off-white canvas (#f9f9f8), with dark brown-black headlines and muted gray copy providing a calm, readable contrast. Serif display type gives the hero an editorial voice; the supporting text and interface details use clean sans-serif typography. A compact top navigation leads into a left-aligned headline, explanatory copy, and paired pill-shaped calls to action. A row of customer logos bridges the hero and the large product-interface preview, making the software itself the primary visual. Product cards and controls use pale neutral fills, fine borders, and subtle shadows rather than heavy panels. The overall spacing feels open around the hero and more compact within the software mockup. A vivid orange strip along the right edge is a strong visual accent, while secondary orange and ochre tones appear sparingly. Keep the page quiet, legible, and product-led.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#f9f9f8` | `--color-warm-canvas` | brand | Dominant page canvas and the pale base behind the hero and product preview. |
| Soft Graphite | `#63635e` | `--color-soft-graphite` | neutral | Muted explanatory copy, secondary links, and subdued control labels. |
| Deep Umber | `#21201c` | `--color-deep-umber` | neutral | Primary text, headings, navigation, and dark filled calls to action. |
| Cloud Stone | `#f1f0ef` | `--color-cloud-stone` | surface | Soft neutral surface tone for subdued cards and interface groupings. |
| Oxide Line | `#7d1b0c` | `--color-oxide-line` | semantic | Measured border color; treat as a fine structural line, not a broad color field. |
| Flare Orange | `#fc5200` | `--color-flare-orange` | accent | Strong orange accent, most notably suited to the narrow edge treatment shown in the screenshot. |
| Peach Haze | `#fdefe8` | `--color-peach-haze` | surface | Pale warm text and footer treatment; use sparingly rather than as a dominant surface. |
| Tangerine Glow | `#ff8a1f` | `--color-tangerine-glow` | accent | Bright orange accent detail, visible as part of the right-edge color treatment. |
| Quiet Border | `#e9e8e6` | `--color-quiet-border` | surface | Fine borders, soft control fills, and lightly distinguished product-preview elements. |
| Muted Ochre | `#a16207` | `--color-muted-ochre` | accent | Restrained accent for occasional highlighted text; keep it subordinate to the neutral palette. |

### Semantic aliases

`--color-canvas` → `#f9f9f8` (Warm Canvas) · `--color-surface` → `#f1f0ef` (Cloud Stone) · `--color-text` → `#21201c` (Deep Umber) · `--color-text-muted` → `#63635e` (Soft Graphite) · `--color-text-subtle` → `#fdefe8` (Peach Haze) · `--color-border` → `#7d1b0c` (Oxide Line) · `--color-accent` → `#a16207` (Muted Ochre)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#21201c` | `#f9f9f8` | 15.48:1 | AAA |
| `#21201c` | `#f1f0ef` | 14.32:1 | AAA |
| `#63635e` | `#f9f9f8` | 5.73:1 | AA |
| `#63635e` | `#f1f0ef` | 5.31:1 | AA |
| `#fdefe8` | `#f9f9f8` | 1.07:1 | fail |
| `#fdefe8` | `#f1f0ef` | 1.01:1 | fail |
| `#a16207` | `#f9f9f8` | 4.67:1 | AA |
| `#a16207` | `#f1f0ef` | 4.33:1 | AA-large |

### Gradients

- `linear-gradient(rgb(253, 253, 252) 0%, rgb(249, 249, 248) 100%)`
- `radial-gradient(circle, color(srgb 0.388235 0.388235 0.368627 / 0.24) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(rgba(252, 252, 251, 0), rgb(253, 253, 252) 68%)`
- `linear-gradient(to right, color(srgb 0.992157 0.992157 0.988235 / 0.99) 0%, color(srgb 0.992157 0.992157 0.988235 / 0.95) 36%, color(srgb 0.992157 0.992157 0.988235 / 0.74) 58%, rgba(255, 255, 255, 0) 76%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 450, 550, 600, 700 | Main body copy and product-interface text. | Inter |
| ui-sans-serif | `--font-ui-sans-serif` | system | 400, 500, 450, 650, 600, 700 | Navigation, links, and compact labels in interface-like elements. | Inter |
| Newsreader | `--font-display` | webfont | 500 | Primary hero headline and editorial display moments. | Newsreader |
| ui-monospace | `--font-mono` | system | 400, 500 | Code-like or technical snippets where they appear. | IBM Plex Mono |
| Iowan Old Style | `--font-iowan-old-style` | system | 400 | Secondary serif heading treatment. | Lora |

- **Inter:** Use regular to bold weights; keep copy sentence case and tracking neutral.
- **ui-sans-serif:** Compact, functional sans-serif treatment with mostly regular weight and natural casing.
- **Newsreader:** Use a restrained medium weight for an expressive but readable serif headline.
- **ui-monospace:** Monospace is a supporting technical voice, not the primary page typography.
- **Iowan Old Style:** Use regular-weight serif styling with subtly tight tracking for secondary editorial headings.

### Type scale — Minor Third (ratio ≈ 1.225, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 25.5px | 500 | 1.15 | 0 | — | Newsreader | Editorial hero headline introducing the email platform. |
| h2 | 21px | 400 | 1.45 | -0.01em | — | Iowan Old Style | Secondary serif headings within supporting page content. |
| body | 17px | 400 | 1.7 | 0 | — | Inter | Explanatory hero copy and longer descriptive text. |
| caption | 12px | 400 | normal | 0 | — | Inter | Compact labels and secondary interface details. |
| link | 14px | 400 | 1.2 | 0 | — | ui-sans-serif | Navigation and understated secondary actions. |
| code | 15.5px | 400 | 1.78 | 0 | — | ui-monospace | Technical or code-like snippets when needed. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 1, 2, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 16, 18, 20, 24 px.
- Section rhythm 34px · element gap 10px · card padding — · max content width —.

A single-column page composition keeps the hero left aligned beneath a compact top navigation. The headline and supporting paragraph sit above paired actions, with customer logos forming a horizontal transition into the large product preview. The preview spans most of the content area and is framed as a light software window. The page has generous separation around the hero, while the interface itself is deliberately dense. A narrow vertical color treatment anchors the far-right edge.

## Shape & elevation

- Radius: button `9999px` · card `14px` · badge `4px` · nav `6px` · link `9px` · xs `4px` · sm `5px` · md `6px` · lg `7px` · xl `8px` · 2xl `9px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px`
- Shadow `sm` (button): `rgba(28, 25, 23, 0.055) 0px 2px 6px 0px`
- Shadow `inset` (card): `rgba(0, 0, 0, 0.024) 0px 1px 2px 0px, rgba(0, 0, 0, 0.055) 0px 18px 44px 0px, color(srgb 0.992157 0.992157 0.988235 / 0.9) 0px 1px 0px 0px inset`
- Shadow `hairline-2` (button, card): `rgba(33, 32, 28, 0.04) 0px 1px 2px 0px`
- Shadow `inset-2` (other): `rgb(233, 232, 230) 0px 0px 0px 1px inset`
- Shadow `inset-3` (button): `rgba(255, 255, 255, 0.05) 0px 1px 2px 0px inset, rgba(28, 25, 23, 0.14) 0px 2px 5px 0px, rgba(28, 25, 23, 0.3) 0px 8px 18px -12px`
- Motion: standard transition `0.16s ease` on interactive elements.

The page remains mostly flat, using thin pale borders to separate the product preview and controls from the canvas. Cards and buttons receive restrained, soft shadows for a slight lift rather than dramatic depth. Layering is concentrated in the framed dashboard and floating demo prompt.

## Imagery

The main visual is a large, framed product-interface mockup rather than photography or illustration. It shows a pale email-platform dashboard with a sidebar, grouped content rows, and a floating demo prompt. A horizontal customer-logo strip supplies small brand marks above it. Keep mockup details crisp and low contrast; the vivid orange edge treatment is decorative, not product imagery.

## Components

### Top navigation

Compact horizontal brand and link row, with a dark filled Get started action and a light outlined Log in control.

### Hero introduction

Left-aligned Newsreader headline followed by muted sans-serif explanatory copy and two concise actions.

### Primary CTA

Dark, pill-shaped button with light text; pair with a quieter light demo button.

### Customer logo row

Single horizontal run of customer marks between the hero actions and the software preview.

### Product preview

Large pale dashboard mockup with a fine frame, subtle shadow, sidebar navigation, and grouped content rows.

### Demo prompt

Small floating white booking panel layered over the lower-right area of the product preview.

### Edge accent

Narrow stacked orange bands at the right edge, contrasting with the otherwise warm neutral canvas.

### Measured component styles

- **Primary button** (“Contact added Any new contact”): background #fdfdfc · text #21201c · border 1px solid #e9e8e6 · radius 10px · padding 9px 12px · 400 12px ui-sans-serif · shadow rgba(28, 25, 23, 0.055) 0px 2px 6px 0px
- **Secondary button** (“Triggers”): transparent background · text #63635e · border 1px solid #e9e8e6 · radius 999px · padding 7px 13px · 400 14px ui-sans-serif
- **Link** (“More”): transparent background · text #63635e · radius 0px · padding 7px 13px · 400 14px ui-sans-serif
- **Card** (“Human Agent Acquisition Contact added An”): background #fdfdfc · text #000000 · border 1px solid #e9e8e6 · radius 14px · padding 0px · 400 12px ui-sans-serif · shadow rgba(0, 0, 0, 0.024) 0px 1px 2px 0px, rgba(0, 0, 0, 0.055) 0px 18px 44px 0px, co
- **Badge** (“Home”): background #e9e8e6 · text #21201c · radius 6px · padding 0px 6px · 500 14px Inter
- **Navigation item** (“Guides Pricing Docs Log in Get started”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use Warm Canvas (#f9f9f8) as the dominant page background.
- Set display headlines in Newsreader and supporting copy in a clean sans-serif.
- Keep the hero left aligned and its copy concise.
- Use Deep Umber (#21201c) for primary text and dark calls to action.
- Frame the product UI with subtle borders and restrained shadows.
- Keep orange accents narrow and visually subordinate to the content.

## Don't

- Don't replace the warm off-white canvas with stark white or a dark theme.
- Don't use heavy shadows or thick borders around every element.
- Don't center the hero or crowd the navigation.
- Don't let orange become a large background field.
- Don't use decorative display type for dense interface labels.
- Don't treat mockup-only colors as the core page palette.

## Agent prompt

Build a new SaaS page in the Loops visual style. Use Warm Canvas (#f9f9f8) as the main background, Deep Umber (#21201c) for strong text and primary buttons, and Soft Graphite (#63635e) for supporting copy. Set the lead headline in Newsreader and use Inter or a close sans-serif for body and interface text. Keep the composition left aligned: compact navigation, clear headline, short explanation, paired rounded actions, then a customer-logo row and a prominent framed product preview. Use Cloud Stone (#f1f0ef) and Quiet Border (#e9e8e6) for restrained interface surfaces and separators. Add orange accents such as Flare Orange (#fc5200) sparingly. Favor fine borders, subtle shadows, open hero spacing, and denser product UI. Keep the page warm, crisp, and product-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column, left-aligned hero with navigation, paired actions, customer logos, and a wide product preview. | Primary and secondary CTA, Customer proof, Product preview, Floating demo prompt | Serif display headline, Pill-shaped buttons, Fine framed interface, Orange edge accent |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/loops-so