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

# Sleeve — Sleeve 3 · Design System

> A quiet canvas for vivid music controls.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://replay.software/sleeve · **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._

Sleeve presents a Mac music companion through generous white space, crisp typography, and vivid blue-green product visuals. A long, centered product story alternates interface previews with compact feature cards.

## North star

Keep the page quiet and white so colorful, rounded product-interface artwork carries the visual emphasis.

## Overview

The page uses pure white as its dominant canvas, keeping attention on the oversized Sleeve interface artwork and black editorial-style product heading. Blue and turquoise gradients belong mainly to the product mockups and illustrations rather than the site-wide UI; surrounding text, navigation, and controls stay restrained. The system sans-serif type is clean and unornamented, with a large bold hero title, lighter supporting headings, and readable body copy. A broad centered content column organizes a long sequence of product demonstrations, feature explanations, and integration details. Sections are separated primarily through generous whitespace instead of strong background bands. Pale gray cards provide soft grouping, while rounded corners and subtle shadows lend interface previews a tactile, floating quality. Small captions and uppercase labels establish hierarchy without competing with the imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and clean space surrounding the product story. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Headings, body text, navigation, and the filled Mac App Store CTA. |
| Cloud Surface | `#f9fafb` | `--color-cloud-surface` | surface | Pale feature-card and secondary button surfaces against the white canvas. |
| Showcase Blue | `#3876c2` | `--color-showcase-blue` | accent | Blue seen in interface imagery and product artwork; not a dominant text or CTA color. |
| Mist Divider | `#f0f1f2` | `--color-mist-divider` | neutral | Subtle section and interface hairlines. |
| Playback Green | `#1c5d1b` | `--color-playback-green` | semantic | Green detected in small text or branded app imagery, not the page-wide palette. |
| Deep Playback Red | `#750d0d` | `--color-deep-playback-red` | semantic | Red detected in small text or app-related details, not a primary interface color. |
| Soft Graphite | `#cccccc` | `--color-soft-graphite` | neutral | Fine control outlines and the border around the dark store button. |
| Electric Sky | `#0e95ee` | `--color-electric-sky` | accent | Vivid blue gradient within the hero and product illustrations. |
| Pool Cyan | `#27c9f5` | `--color-pool-cyan` | accent | Bright cyan gradient paired with blue inside product artwork. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9fafb` (Cloud Surface) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#f0f1f2` (Mist Divider) · `--color-accent` → `#3876c2` (Showcase Blue) · `--color-accent-2` → `#1c5d1b` (Playback Green) · `--color-accent-3` → `#750d0d` (Deep Playback Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f9fafb` | 20.1:1 | AAA |
| `#ffffff` | `#f9fafb` | 1.05:1 | fail |
| `#3876c2` | `#ffffff` | 4.63:1 | AA |
| `#3876c2` | `#f9fafb` | 4.43:1 | AA-large |

### Gradients

- `linear-gradient(to top, rgb(255, 255, 255), rgb(249, 250, 251))`
- `url("https://replay.software/sleeve/images/Hero@2x.png"), linear-gradient(to right top, rgb(14, 149, 238), rgb(39, 201, 245))`
- `linear-gradient(rgb(255, 255, 255), rgb(243, 244, 246))`
- `linear-gradient(rgb(255, 255, 255), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-sans-serif | `--font-body` | system | 400, 600, 500, 700, 900 | Site-wide navigation, headings, body copy, labels, and buttons. | Inter |

- **ui-sans-serif:** Use a clean system sans; hero heading is bold, supporting text mostly regular, and eyebrow labels are uppercase with slight tracking.

### Type scale — Golden Ratio (ratio ≈ 1.633, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1 | 0 | — | ui-sans-serif | Large centered product name beneath the hero visual. |
| h2 | 24px | 400 | 1.33 | 0 | — | ui-sans-serif | Section headings and product-story introductions. |
| body | 18px | 400 | 1.56 | 0 | — | ui-sans-serif | Feature descriptions and supporting product explanation. |
| caption | 13px | 600 | 1.5 | 0 | — | ui-sans-serif | Compact notes and card-level supporting labels. |
| button | 18px | 500 | 1.56 | 0 | — | ui-sans-serif | Primary and secondary purchase actions. |
| nav | 14px | 400 | 1.43 | 0 | — | ui-sans-serif | Header product links and utility navigation. |
| eyebrow | 13px | 600 | 1.5 | 0.05em | uppercase | ui-sans-serif | Small uppercase labels introducing feature sections. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 12, 16, 24, 28, 32, 36, 40, 44, 48, 64, 160 px.
- Section rhythm 80px · element gap 16px · card padding — · max content width 1200px.

A centered page column sits within a wide white canvas, with the measured content max width at 1200px. The header aligns the brand left, product navigation near center, and utility links right. The hero is centered around a large interface image, followed by title, copy, and purchase actions. Long feature sections alternate centered showcases, paired cards, and split image-and-copy rows. Comfortable density and generous section gaps let each demonstration read independently.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `24px` · badge `9999px` · nav `9999px` · xs `4px` · sm `10px` · md `12px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `inset` (other, card, button): `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 0px 0px 1px inset`
- Shadow `xl` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.4) 0px 12px 24px -8px, rgba(0, 0, 0, 0.2) 0px 8px 24px 0px, rgba(0, 0, 0, 0.2) 0`
- Shadow `md` (other, card, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- Shadow `lg` (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 20px 25px -5px, rgba(0, 0, 0, 0.05) 0px 8px 10px -6px`
- Shadow `md-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.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`
- Shadow `sm` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most page areas remain flat and white, with pale surfaces distinguishing feature cards. Product previews and selected cards use restrained soft shadows for a floating desktop-interface effect. Large rounded media and card frames contrast with fine, low-contrast hairlines; avoid heavy outlines or dramatic ambient shadows.

## Imagery

The page relies on polished product-interface mockups rather than lifestyle photography. A large desktop playback window anchors the hero, while smaller settings panels, app icons, keyboard imagery, and feature illustrations explain capabilities. Artwork uses vivid blue-to-cyan and turquoise gradients, rounded framing, and soft depth; surrounding presentation stays light and uncluttered.

## Components

### Product navigation

Minimal header with the Replay wordmark, pill-like product links, and compact utility links aligned across the white canvas.

### Hero showcase

Large centered blue-and-turquoise desktop player mockup followed by a bold product title, short description, and two pill-shaped purchase actions.

### Purchase buttons

Use a black filled Mac App Store action and a pale gray direct-purchase action with black text; both are fully rounded.

### Feature cards

Soft #f9fafb surfaces group concise feature copy with colorful illustrations or product-interface previews.

### Settings preview

Show stacked, rounded settings windows with light borders and restrained shadows to make customization controls legible.

### Integration panel

Pair compact music-service iconography and explanatory copy within pale, softly colored cards.

### Measured component styles

- **Primary button** (“Sleeve”): background #f9fafb · text #000000 · radius 9999px · padding 0px 16px · 400 14px ui-sans-serif · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Mac App Store”): background #000000 · text #ffffff · border 1px solid #cccccc · radius 9999px · padding 0px 24px · 600 18px ui-sans-serif · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“Sleeve integrates directly with Apple Mu”): background #f9fafb · text #000000 · radius 24px · padding 0px · 400 16px ui-sans-serif · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“$5.99”): background #000000 · text #ffffff · radius 9999px · padding 4px 10px · 600 14px ui-sans-serif
- **Navigation item** (“Replay”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px ui-sans-serif

## Do

- Keep the overall canvas white and visually quiet.
- Use #000000 for crisp, high-contrast headings and navigation.
- Reserve vivid blue and cyan gradients for product artwork.
- Center major product showcases and section introductions.
- Use pale cards to group related feature copy and imagery.
- Give interface mockups rounded frames and restrained depth.

## Don't

- Do not make the whole page blue or gradient-filled.
- Do not introduce unmeasured brand colors.
- Do not let decorative UI artwork overwhelm explanatory copy.
- Do not replace generous whitespace with dense layouts.
- Do not use heavy borders or dramatic shadows on every card.
- Do not use display typography that departs from the clean sans-serif system.

## Agent prompt

Build a product page in Sleeve’s restrained Mac-software style. Use Gallery White (#ffffff) as the page canvas and Ink Black (#000000) for navigation and core text. Keep the header compact, then center a large, rounded product-interface showcase above the product name, concise explanation, and pill-shaped purchase actions. Use Cloud Surface (#f9fafb) for subtle card grouping and Mist Divider (#f0f1f2) for quiet hairlines. Reserve Showcase Blue (#3876c2), Electric Sky (#0e95ee), and Pool Cyan (#27c9f5) for interface artwork and demonstrations, not broad page backgrounds. Build a spacious centered content column with alternating feature showcases, split explanations, and compact cards. Use a clean system sans, generous section whitespace, soft preview shadows, and minimal borders.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Single horizontal header with brand at left, product links near center, and utilities at right. | Product switching, Utility links | White canvas, Compact sans-serif labels, Pill-shaped selected product |
| 2 | product-showcase | Long centered product story with a large hero mockup followed by feature sections and split showcases. | Visual product explanation, Customization highlights, Purchase actions | Blue-cyan interface artwork, Rounded previews, Pale feature cards, Generous whitespace |
| 3 | feature-grid | Centered section heading above an asymmetric, multi-column grid of compact feature cards. | Capability scanning, Visual feature discovery | Pale surfaces, Small illustrations, Rounded cards, Sparse section label |
| 4 | other | Shallow, full-bleed closing strip beneath the feature catalogue. | Visual transition | Soft pale background, Low visual contrast |

## Source CSS custom properties (selected)

```css
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--tw-border-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-ring-color: rgba(59,130,246,.5);
```

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