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

# Paste · Design System

> A calm canvas for everything you copy.

**Theme:** light · **Industry:** productivity · **Source:** https://pasteapp.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._

Paste presents a Mac and iOS clipboard manager through a clean, spacious landing page. Bright product imagery, restrained blue actions, and alternating dark feature sections make the interface feel clear and distinctly native to Apple platforms.

## North star

Keep the page quiet and spacious so clear typography, blue actions, and vivid product screens do the explaining.

## Overview

The page uses Gallery White (#ffffff) as its dominant canvas, punctuated by pale-gray feature and conversion bands and near-black sections for AI integrations, work modes, and the footer. Signal Blue (#0a84ff) is reserved for primary actions and links, keeping the call to action unmistakable without competing with the product imagery. System UI sans-serif type carries the full experience: large, centered headings introduce sections, while muted gray supporting copy stays visually secondary. Layout is spacious and largely centered, with a narrow content measure for copy and broad product media beneath it. Alternating light and dark sections create a steady long-page rhythm. Rounded pill buttons, soft-cornered cards, and device mockups provide the main shape language. The vivid orange and warm brown tones visible in screenshots belong primarily to device wallpapers and clipboard content, not the site’s core interface palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, light hero and testimonial areas, and white product cards. |
| Soft Ink | `#101010` | `--color-soft-ink` | brand | Primary text and navigation, plus inverse backgrounds for AI, work-mode, and footer sections. |
| Signal Blue | `#0a84ff` | `--color-signal-blue` | accent | Primary Try for free buttons and prominent text links such as See plans. |
| Cloud Gray | `#f5f5f7` | `--color-cloud-gray` | surface | Pale section bands, feature-card backgrounds, and the closing trial call to action. |
| Slate Copy | `#707070` | `--color-slate-copy` | neutral | Muted explanatory copy beneath headlines and in supporting feature text. |
| Silver Copy | `#cfcfcf` | `--color-silver-copy` | neutral | Secondary muted text, including subdued footer and supporting copy. |
| Clipboard Amber | `#feb85c` | `--color-clipboard-amber` | accent | Warm accent appearing on feature cards and selected interface details; secondary to blue actions. |
| Footer Gray | `#9f9f9f` | `--color-footer-gray` | neutral | Low-emphasis footer text and minor subdued interface details. |
| Warm Umber | `#70542f` | `--color-warm-umber` | accent | Small warm-toned text accent; keep limited rather than treating it as a large page surface. |
| Deep Cocoa | `#231d15` | `--color-deep-cocoa` | semantic | Minor dark tone detected in visual details, not a defining background or interface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#101010` (Soft Ink) · `--color-surface-2` → `#f5f5f7` (Cloud Gray) · `--color-text` → `#101010` (Soft Ink) · `--color-text-muted` → `#707070` (Slate Copy) · `--color-text-subtle` → `#cfcfcf` (Silver Copy) · `--color-accent` → `#0a84ff` (Signal Blue) · `--color-accent-2` → `#feb85c` (Clipboard Amber) · `--color-accent-3` → `#70542f` (Warm Umber) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#101010` | `#ffffff` | 19.03:1 | AAA |
| `#101010` | `#f5f5f7` | 17.48:1 | AAA |
| `#707070` | `#ffffff` | 4.95:1 | AA |
| `#707070` | `#101010` | 3.84:1 | AA-large |
| `#707070` | `#f5f5f7` | 4.55:1 | AA |
| `#cfcfcf` | `#ffffff` | 1.56:1 | fail |
| `#cfcfcf` | `#101010` | 12.21:1 | AAA |
| `#cfcfcf` | `#f5f5f7` | 1.43:1 | fail |
| `#0a84ff` | `#ffffff` | 3.65:1 | AA-large |
| `#0a84ff` | `#101010` | 5.22:1 | AA |

### Gradients

- `linear-gradient(oklab(0 0 0 / 0.08) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, oklab(0 0 0 / 0.05) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| system-ui | `--font-body` | system | 400, 500, 700, 590, 600 | All page typography, from navigation and body copy to large centered headings and buttons. | Inter |

- **system-ui:** Use native system sans-serif styling, bold display headings, regular body copy, and compact tracking on navigation and controls; avoid all-caps styling.

### Type scale — Major Third (ratio ≈ 1.272, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 700 | 1.03 | 0.01em | — | system-ui | Large promotional headings introducing key product messages. |
| h1 | 54px | 700 | 0.96 | 0.011em | — | system-ui | Primary hero headline and top-level page title. |
| h2 | 40px | 700 | 1.05 | 0.015em | — | system-ui | Centered headings for major feature and testimonial sections. |
| h3 | 24px | 400 | 1.25 | 0.012em | — | system-ui | Supporting feature headings and secondary content titles. |
| h4 | 22px | 400 | 1.27 | -0.018em | — | system-ui | Smaller feature titles and tertiary headings. |
| body | 18px | 400 | 1.44 | -0.028em | — | system-ui | Main explanatory copy and descriptive feature text. |
| caption | 15px | 500 | 1.33 | -0.04em | — | system-ui | Compact labels, testimonials attribution, and supporting metadata. |
| button | 15px | 500 | 1.33 | -0.04em | — | system-ui | Short action labels on rounded calls to action. |
| nav | 15px | 500 | 1.33 | -0.04em | — | system-ui | Header navigation and compact menu items. |
| link | 20px | 590 | 0.8 | -0.01em | — | system-ui | Prominent inline calls to action and text links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 16, 20, 24, 32, 48, 64, 96, 144 px.
- Section rhythm 144px · element gap 24px · card padding 20px · max content width 840px.

Use a centered, spacious long-form page with an 840px measured content max width for text-led content. Keep headings centered in most sections, then place product media directly below or beside the copy. The page alternates white, pale-gray, and near-black bands to establish section rhythm, with especially generous separation between major features. Use two-column arrangements where the hero or final CTA needs a paired element, and multi-column layouts for feature cards. Keep density low and let media span wider than copy.

## Shape & elevation

- Radius: button `9999px` · card `20px` · media `50%` · link `9999px` · xs `20px` · sm `32px` · pill `9999px`
- Shadow `inset` (link): `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, rgb(10, 132, 255) 0px 0px 0px 1.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset-2` (link): `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, rgb(255, 178, 80) 0px 0px 0px 1.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with section backgrounds doing more work than shadows or borders. Cards use soft corners and pale-gray fills rather than strong outlines. Device renders and overlapping clipboard items create the sense of depth inside product media; reserve inset outlines for interactive focus or link states rather than adding decorative shadow layers.

## Imagery

Treat product imagery as the main visual event: layered Mac, iPhone, and iPad mockups, with clipboard cards shown clearly on their screens. Use crisp, bright product renders against uncluttered white or dark backgrounds, and allow broad device compositions to extend beyond the narrow text column. Feature sections also use screen captures and small integration icons. Orange and amber visual fields mainly come from device wallpapers and clipboard examples, not the brand’s core interface palette.

## Components

### Primary action

Blue pill-shaped Try for free button with white system text; use the measured #0a84ff fill and #ffffff label.

### Secondary text action

Prominent blue See plans link, sometimes presented as an outlined pill beside the main action.

### Feature card

Pale #f5f5f7 card with a 20px measured radius, 20px padding, and concise copy or clipboard imagery.

### Hero product composition

Large, layered Apple-device mockups below the centered headline, showing the clipboard interface in context.

### Dark feature band

Full-width #101010 section with centered light heading and copy, integration imagery, or a device showcase.

### Testimonial card

Soft gray rounded card with reviewer identity, attribution, and a short quote; arrange multiple cards as a spacious grid.

### Measured component styles

- **Primary button** (“Try for free”): background #0a84ff · text #ffffff · radius 999px · padding 0px 32px · 590 20px system-ui
- **Secondary button**: background #c9c9cb · text #101010 · radius 3.35544e+07px · padding 0px · 400 16px system-ui
- **Link** (“See plans”): transparent background · text #0a84ff · radius 999px · padding 0px 32px · 590 20px system-ui · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“Chris Messina Inventor of the hashtag Th”): background #f5f5f7 · text #101010 · radius 20px · padding 20px · 400 16px system-ui
- **Navigation item** (“Use Cases”): transparent background · text #101010 · radius 0px · padding 0px · 500 15px system-ui

## Do

- Use white as the default canvas.
- Reserve blue for primary actions and key links.
- Center major headings and keep copy concise.
- Alternate light bands with deliberate dark feature sections.
- Show real product screens inside device mockups.
- Use soft, rounded cards and pill-shaped actions.

## Don't

- Do not use screenshot wallpaper colors as core brand colors.
- Do not crowd the hero with extra controls or copy.
- Do not add heavy borders or layered shadows to flat cards.
- Do not make every section dark or brightly colored.
- Do not use decorative display fonts or all-caps headings.
- Do not let text columns compete with broad product imagery.

## Agent prompt

Build a new page in Paste’s restrained productivity-product style. Use Gallery White (#ffffff) for the main canvas, Cloud Gray (#f5f5f7) for occasional section bands and cards, and Soft Ink (#101010) for text and selected inverse sections. Apply Signal Blue (#0a84ff) sparingly to primary pill-shaped actions and important links. Use system-ui sans-serif throughout, with bold, centered headings, readable regular-weight copy, and compact navigation. Keep the content centered and spacious; let device mockups and product screens occupy more width than explanatory text. Alternate light sections with a few purposeful dark showcases. Favor soft-cornered cards and flat surfaces over borders and shadows. Any warm orange imagery should live within product screenshots or device displays, not become the interface palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy above paired actions and a wide, layered device showcase. | primary and secondary actions, cross-device product proof, testimonial snippet | white canvas, centered typography, blue pill button, device mockups |
| 2 | product-showcase | Pale-gray feature band with a centered heading and horizontally browsable product cards. | feature carousel, pagination indicators, next and previous controls | #f5f5f7 section background, rounded feature cards, product screenshots |
| 3 | feature-split | Centered headline, short copy, and action above a broad product video or screen visual. | intelligent feature explanation, supporting action, product demonstration | white background, centered content, large screen media |
| 4 | integrations | Full-width dark band with centered integration icons, heading, copy, and product preview. | integration discovery, privacy reassurance, supporting link | #101010 background, light text, icon row, dark product preview |
| 5 | feature-split | Centered privacy icon and copy above a wide, full-bleed strip of clipboard cards. | privacy reassurance, security explanation, visual proof | white background, green lock icon, edge-to-edge card strip |
| 6 | gallery | Full-bleed horizontal media composition spanning the page. | visual browsing, content overview | edge-to-edge clipboard cards, layered media |
| 7 | feature-grid | Dark centered section with category tabs, brief copy, and a large product screen. | work-mode selection, tabbed feature categories, product preview | #101010 background, segmented pill tabs, light text, device screen |
| 8 | testimonials | White section with centered heading and a multi-column grid of compact review cards. | social proof, review browsing | white canvas, pale-gray cards, reviewer avatars, short quotes |
| 9 | cta | Centered heading and supporting line on a pale-gray band, with two side-by-side actions. | trial conversion, primary and alternate purchase actions | #f5f5f7 background, blue primary action, outlined secondary action |
| 10 | footer | Near-black footer with grouped navigation columns, social links, and a low-contrast legal row. | site navigation, social links, legal and copyright information | #101010 background, muted text, multi-column link groups, subtle divider |

## Source CSS custom properties (selected)

```css
--blue-primary: #0a84ff;
--text-display-xl: 5rem;
--text-display-xl--line-height: 5rem;
--text-display-l: 3.75rem;
--text-display-l--line-height: 3.875rem;
--text-heading-xl: 3.375rem;
--text-heading-xl--line-height: 3.25rem;
--radius-card: 32px;
--radius-content: 20px;
--spacing-section: 144px;
--spacing-section-gap: 96px;
--spacing-card-lg: 64px;
--spacing-card-md: 48px;
--spacing-card-sm: 32px;
--spacing-eyebrow-gap: 24px;
--spacing-list-gap-x: 32px;
--spacing-card-hero: 640px;
--spacing-card-height: 480px;
--text-heading-l: 2.5rem;
--text-heading-l--line-height: 2.625rem;
--text-heading-m: 2rem;
--text-heading-m--line-height: 2.25rem;
--text-lead: 1.5rem;
--text-lead--line-height: 1.875rem;
--text-quote: 2rem;
--text-quote--line-height: 2.375rem;
--spacing-grid-gap: 24px;
--spacing-grid-gap-y: 32px;
--spacing-grid-gap-lg: 64px;
--spacing-content-gap-lg: 64px;
--spacing-content-gap-md: 32px;
--color-text-primary: #101010;
--color-text-secondary: #10101099;
--color-text-caption: #10101099;
--color-text-link: #101010;
--color-text-link-hover: #2997ff;
--color-text-nav-header: #101010;
--color-text-nav-header-hover: #10101099;
--color-text-nav-footer: #10101099;
--color-text-nav-footer-hover: #101010;
```

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