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

# Replay — Homepage · Design System

> Quiet surfaces, vivid signals, and clear product proof

**Theme:** light · **Industry:** devtools · **Source:** https://www.replay.io/ · **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._

Replay’s homepage pairs a restrained white-and-gray canvas with vivid pink calls to action and crisp, centered product messaging. Broad alternating section bands, rounded interface cards, and screenshots make the QA workflow feel approachable and concrete.

## North star

Keep the page calm and spacious, using Replay pink only to make the next action unmistakable.

## Overview

The visual strategy is built on an unusually quiet palette: white and pale gray alternate across broad horizontal sections, while deep charcoal carries headlines and muted gray supports body copy. Saturated Replay pink is reserved for the primary CTA, small section labels, and links, so it reads as a deliberate action signal rather than a decorative wash. Inter provides a consistent, modern voice; bold, tightly tracked display headlines contrast with smaller, comfortably spaced explanatory text. The page uses a centered, constrained content column for most messaging, then introduces wider product imagery and occasional multi-column cards to demonstrate the workflow. Generous vertical breathing room separates the sections, while repeated gray bands establish a steady scroll rhythm. Rounded pill buttons, softly rounded cards, fine gray borders, and restrained shadows keep interface examples legible without making the page feel heavy. Product screenshots are evidence, not the page’s color source.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Quiet Slate | `#e5e7eb` | `--color-quiet-slate` | surface | Alternating pale-gray section bands, card borders, FAQ dividers, and subtle button outlines. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, light section backgrounds, and the fill of cards and interface surfaces. |
| Replay Pink | `#f02d5e` | `--color-replay-pink` | brand | Primary pill CTAs, links, active navigation, and small uppercase section labels. |
| Blush Tint | `#fac4d3` | `--color-blush-tint` | accent | Subtle pink accent details and fine decorative strokes; not a dominant page background. |
| Slate Copy | `#4b5563` | `--color-slate-copy` | neutral | Muted supporting text, explanatory paragraphs, and secondary copy on light surfaces. |
| Ink Black | `#111827` | `--color-ink-black` | semantic | High-contrast headlines, primary body text, and important navigation labels. |
| Petal Glow | `#ff80b5` | `--color-petal-glow` | accent | Beginning color of the footer’s pink-to-violet gradient, rather than a core page fill. |
| Soft Violet | `#9089fc` | `--color-soft-violet` | accent | End color of the footer gradient; a restrained transition accent. |
| Ash Note | `#6b7280` | `--color-ash-note` | neutral | Low-emphasis attribution and footer text, including testimonial author details. |
| Deep Slate | `#374151` | `--color-deep-slate` | semantic | Secondary dark navigation and supporting text where a softer tone than the main ink is used. |
| Powder Rose | `#fde0e7` | `--color-powder-rose` | surface | A faint blush section tint and light decorative detail, not a principal brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e5e7eb` (Quiet Slate) · `--color-text` → `#111827` (Ink Black) · `--color-text-muted` → `#4b5563` (Slate Copy) · `--color-border` → `#e5e7eb` (Quiet Slate) · `--color-accent` → `#f02d5e` (Replay Pink) · `--color-accent-2` → `#fac4d3` (Blush Tint) · `--color-accent-3` → `#ff80b5` (Petal Glow) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111827` | `#ffffff` | 17.74:1 | AAA |
| `#111827` | `#e5e7eb` | 14.33:1 | AAA |
| `#4b5563` | `#ffffff` | 7.56:1 | AAA |
| `#4b5563` | `#e5e7eb` | 6.1:1 | AA |
| `#f02d5e` | `#ffffff` | 4.01:1 | AA-large |
| `#f02d5e` | `#e5e7eb` | 3.24:1 | AA-large |

### Gradients

- `linear-gradient(to right top, rgb(255, 128, 181), rgb(144, 137, 252))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 700, 600 | All page typography: hero and section headings, body copy, navigation, labels, links, and buttons. | Inter |

- **Inter:** Use bold weights for headlines, medium for navigation and CTAs, and regular for copy; display text is tightly tracked and eyebrow labels are uppercase.

### Type scale — Augmented Fourth (ratio ≈ 1.439, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 700 | 1 | -0.025em | — | Inter | Oversized, bold hero headline with tight tracking. |
| h1 | 40px | 700 | 1.4 | 0 | — | Inter | Primary section headlines and prominent page titles. |
| h2 | 24px | 500 | 1.33 | -0.025em | — | Inter | Secondary headings and feature or FAQ titles. |
| h3 | 18px | 400 | 1.78 | 0 | — | Inter | Card titles and tertiary explanatory headings. |
| body | 14px | 400 | 1.63 | 0 | — | Inter | Paragraphs describing workflows, product value, and setup. |
| caption | 12px | 400 | 1.33 | 0 | — | Inter | Fine print, author details, and short supporting notes. |
| button | 16px | 500 | 1.75 | 0 | — | Inter | Primary CTA and other prominent action labels. |
| nav | 16px | 500 | 1.75 | 0 | — | Inter | Top-level navigation and prominent nav actions. |
| link | 14px | 500 | 1.71 | 0 | — | Inter | Inline learn-more links and secondary navigation actions. |
| eyebrow | 14px | 700 | 1.71 | 0.05em | uppercase | Inter | Small uppercase labels above section headlines. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 8, 10, 12, 14, 16, 20, 24, 28, 32, 40, 48, 96 px.
- Section rhythm 96px · element gap 24px · card padding 28px · max content width 768px.

Use a centered, constrained content column, with the measured page maximum of 768px guiding text and FAQ widths. Sections span the page and alternate white with pale gray; keep major content centered, except for editorial copy and workflow details that align to the start. The measured section rhythm is spacious, with 96px section gaps and 24px element gaps as the underlying cadence. Use a single column for most storytelling, then introduce three-column process cards and two-column workflow content. Keep the overall density low and let screenshots occupy a clear, contained focal area.

## Shape & elevation

- Radius: button `50%` · card `12px` · media `50%` · nav `9999px` · xs `12px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `md` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(5, 73, 30, 0.08) 0px 2px 18px 0px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Favor flat section bands and fine #e5e7eb borders over strong shadows. Cards have a measured 12px radius and a light hairline edge; nav and card shadows are subtle, not a defining visual layer. Reserve deeper separation for screenshot mock-ups, keeping the surrounding page calm.

## Imagery

Use real product-interface screenshots and recordings as the main visual proof, framed in clean, rounded containers against pale section backgrounds. Keep screenshots centered and legible rather than cropping them into decorative backgrounds. Some interface imagery is dark, but it belongs to the product mock-up and should not change the site palette. Subtle pink strokes and a soft footer gradient may accompany the content; avoid adding unrelated illustration or stock photography.

## Components

### Primary CTA

Use a #f02d5e pill with white Inter text, measured 9999px radius, and generous horizontal padding; repeat the same treatment for the main conversion action.

### Header navigation

Place the Replay mark at left, compact navigation centrally, and outlined Sign In plus a pink pill CTA at right. Use dark labels and a subtle separation from the page.

### Feature cards

Use white surfaces, measured 12px corners, #e5e7eb hairline borders, and comfortable internal padding. Keep descriptions small and readable.

### FAQ accordion

Stack clean white question rows on a light canvas with thin gray dividers and small chevrons; keep the expanded answer compact and left aligned.

### Product screenshot

Center a contained product image within its section, preserve interface detail, and use a softly rounded frame rather than a decorative crop.

### Eyebrow label

Set short section labels in uppercase Inter bold with a pink accent, positioned directly above the main heading.

### Testimonial band

Use a very pale blush field, centered quote, understated author details, and small carousel indicators.

### Measured component styles

- **Primary button** (“Test Replay QA on my app”): background #f02d5e · text #ffffff · radius 9999px · padding 0px 32px · 600 16px Inter
- **Secondary button** (“Sign In”): transparent background · text #f02d5e · border 2px solid #e5e7eb · radius 9999px · padding 16px 24px · 500 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Learn more”): transparent background · text #f02d5e · radius 0px · padding 0px · 500 14px Inter
- **Card** (“1 Explore Agents map the app, quickly di”): background #ffffff · text #000000 · border 1px solid #e5e7eb · radius 12px · padding 28px · 400 16px Inter
- **Navigation item** (“How It Works How It Works”): transparent background · text #334155 · radius 0px · padding 0px · 400 14px Inter

## Do

- Alternate white and pale-gray section backgrounds.
- Reserve #f02d5e for actions, links, and small labels.
- Use Inter consistently throughout the page.
- Keep hero and section messaging centered and easy to scan.
- Show product screenshots as contained evidence.
- Use thin gray borders and restrained elevation.
- Leave generous vertical breathing room between sections.

## Don't

- Do not turn the pink accent into a full-page background.
- Do not add colors outside the measured palette.
- Do not let product screenshot colors redefine the site palette.
- Do not use heavy shadows on ordinary cards.
- Do not crowd section headings with dense copy.
- Do not introduce sharp, square CTA buttons.
- Do not make every content block a multi-column layout.

## Agent prompt

Build a new page in Replay’s calm, product-led visual style. Use Gallery White (#ffffff) and Quiet Slate (#e5e7eb) as the main alternating surfaces, Ink Black (#111827) for headlines, and Slate Copy (#4b5563) for supporting text. Apply Replay Pink (#f02d5e) sparingly to pill CTAs, links, active states, and uppercase section labels. Set all text in Inter, using bold display headings, medium-weight controls, and regular body copy. Keep the content column centered and constrained, with generous section spacing and clear, low-density layouts. Use rounded white cards with fine gray borders, restrained shadows, and real product screenshots framed as evidence. Add only subtle blush or footer-gradient details. Prioritize legibility and a clear action hierarchy over decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White centered hero below a slim navigation bar, with headline, supporting copy, pill CTA, and fine print. | primary conversion CTA, top navigation, reassurance note | bold centered headline, pink pill button, quiet white canvas |
| 2 | faq | Gray feature band with centered heading and copy, product recording, then a vertical FAQ accordion. | product proof, expandable answers, repeat CTA | pale gray band, rounded screenshot frame, white accordion rows |
| 3 | other | White editorial section with left-aligned heading and compact explanatory paragraphs in a narrow column. | problem framing, scannable narrative | minimal white canvas, dark heading, muted body copy |
| 4 | how-it-works | Gray band with centered intro, product screenshot, three process cards, and FAQ rows. | three-step explanation, product demonstration, follow-up questions | centered heading, three-column cards, white accordion rows |
| 5 | feature-grid | White section with centered heading and a two-column grid of workflow benefits. | workflow integration, feature scanning | light bordered panels, two-column layout, centered introduction |
| 6 | testimonials | Short pale-blush band with centered quotation, author attribution, and carousel controls. | social proof, testimonial carousel | soft pink-tinted background, centered quote, small indicators |
| 7 | how-it-works | Gray setup section with centered title, large product screenshot, and vertically ordered numbered steps. | onboarding walkthrough, numbered steps, setup reassurance | pale gray band, centered screenshot, pink step markers |
| 8 | faq | White section with centered heading and a narrow, vertical accordion list. | expandable answers, self-serve help | white question rows, thin gray dividers, minimal chevrons |
| 9 | cta | Centered closing CTA on a pale-gray band with supporting copy, pill button, and reassurance links. | final conversion, reassurance copy, secondary links | centered title, pink pill button, soft gradient detail |
| 10 | footer | White footer with brand mark, compact navigation, social icons, and fine-print links. | site navigation, legal links, social links | compact horizontal rows, muted fine print, subtle gradient wash |

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