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

# CleanShot X · Design System

> A crisp white canvas for vivid Mac product storytelling

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

CleanShot X presents a Mac screenshot and recording app through a spacious white landing page, vivid blue calls to action, and polished product visuals. A long sequence of feature demonstrations leads from a centered hero to testimonials and a contrasting dark conversion footer.

## North star

Keep the page chrome quiet and spacious so vivid, rounded product demonstrations and blue actions provide the focus.

## Overview

The page uses white as its dominant canvas, with near-black typography and saturated blue reserved for primary actions and occasional emphasis in headings. A faint cool-blue atmospheric wash appears behind the hero, while richer blue and violet gradients mostly live inside product artwork rather than defining the page chrome. Google Sans Flex gives the page a unified, modern voice: large centered headlines are compact and bold, while explanatory copy remains open and readable. The hero pairs a centered promise and CTA row with a large media-and-testimonial composition below. Subsequent features alternate text-and-image splits with tightly assembled cards, letting colorful screenshots carry visual variety without cluttering the surrounding layout. Generous white intervals separate these sections. Rounded media and testimonial cards, subtle hairline-like edges, and restrained layered shadows create a polished, tactile feel. Near-black sections are reserved for the bottom conversion and footer, making the close feel distinct from the bright product tour.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas, light section backgrounds, and occasional text or border color on dark components. |
| Action Blue | `#0d44e8` | `--color-action-blue` | accent | Primary purchase and download buttons with white label text. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Main headings and body copy on the light page. |
| Midnight Ink | `#161618` | `--color-midnight-ink` | neutral | Near-black gradient endpoint and secondary dark typography. |
| Quiet Graphite | `#6a6a6b` | `--color-quiet-graphite` | semantic | Muted supporting copy and secondary explanatory text. |
| Footer Black | `#0f0f12` | `--color-footer-black` | surface | Contrasting bottom section and footer background. |
| Gradient Blue | `#174ef2` | `--color-gradient-blue` | accent | Blue endpoint in dark-to-blue gradients and occasional headline emphasis. |
| Soft Slate | `#999999` | `--color-soft-slate` | semantic | Secondary inverse-surface tone; retain for subtle supporting elements rather than page chrome. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0f0f12` (Footer Black) · `--color-surface-2` → `#999999` (Soft Slate) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#6a6a6b` (Quiet Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#ffffff` (Gallery White) · `--color-accent` → `#0d44e8` (Action Blue) · `--color-accent-2` → `#174ef2` (Gradient Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#0f0f12` | 1.1:1 | fail |
| `#000000` | `#999999` | 7.37:1 | AAA |
| `#6a6a6b` | `#ffffff` | 5.4:1 | AA |
| `#6a6a6b` | `#0f0f12` | 3.54:1 | AA-large |
| `#6a6a6b` | `#999999` | 1.9:1 | fail |
| `#ffffff` | `#0f0f12` | 19.14:1 | AAA |
| `#ffffff` | `#999999` | 2.85:1 | fail |
| `#0d44e8` | `#ffffff` | 6.98:1 | AA |
| `#0d44e8` | `#0f0f12` | 2.74:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(22, 22, 24) 0px, rgb(22, 22, 24) 60%, rgb(23, 78, 242))`
- `linear-gradient(270deg, rgba(255, 255, 255, 0) 0px, rgb(255, 255, 255))`
- `linear-gradient(90deg, rgba(255, 255, 255, 0) 0px, rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Google Sans Flex | `--font-body` | webfont | 450, 550, 600 | Unified display, heading, body, caption, link, and interface typography. | Inter |

- **Google Sans Flex:** Use measured weights 450, 550, and 600. Headlines are bold and tightly tracked; body copy is relaxed. Keep casing natural.

### Type scale — Custom (ratio ≈ 1.826, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1.1 | -0.033em | — | Google Sans Flex | Oversized centered hero headline and major statement headings. |
| h1 | 40px | 600 | 1.2 | -0.05em | — | Google Sans Flex | Primary section headings and prominent feature titles. |
| body | 18px | 450 | 1.67 | 0.056em | — | Google Sans Flex | Feature descriptions, testimonials, and explanatory copy. |
| caption | 15px | 450 | 1.6 | 0.067em | — | Google Sans Flex | Compact labels, metadata, and supporting interface details. |
| link | 14px | 450 | 1.43 | 0.071em | — | Google Sans Flex | Navigation, secondary actions, and inline feature links. |

## Spacing & layout

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

Center content within the measured 1192px maximum page width, using broad margins and comfortable section spacing. The hero is centered, with a headline, supporting copy, CTA pair, and media/testimonial row. Below it, alternate two-column feature splits with full-width product demonstrations and multi-card grids. Keep card groupings visually compact but let large white gaps separate major stories. The testimonials section aligns its heading to the left, then presents a horizontally arranged review-card row. Reserve a full-width dark band for the final CTA and footer.

## Shape & elevation

- Radius: button `14px` · input `16px` · card `20px` · media `50%` · badge `9999px` · link `20px` · xs `14px` · sm `20px` · pill `9999px`
- Shadow `xl` (card): `rgba(22, 22, 24, 0.02) 0px 7px 20px -8px, rgba(22, 22, 24, 0.02) 0px 29px 33px -4px, rgba(22, 22, 24, 0.05) 0px 22px 30px -8px, rgba(22, 22, 24, 0.06) 0px 0px 0px 1px`
- Shadow `inset` (button): `rgba(4, 24, 85, 0.28) 0px 2px 6px -1px, rgba(66, 174, 247, 0.48) 0px 6px 14px 0px inset`
- Shadow `sm` (button, badge, other): `rgba(22, 22, 24, 0.2) 0px 2px 6px -1px, rgba(22, 22, 24, 0.16) 0px 0px 0px 1px`
- Shadow `md` (other): `rgba(22, 22, 24, 0.2) 0px 2px 6px -1px, rgba(13, 108, 232, 0.3) 0px 0px 10px 0px`
- Shadow `xl-2` (media): `rgba(22, 22, 24, 0.04) 0px 9px 26px -6px, rgba(22, 22, 24, 0.05) 0px 29px 47px -4px, rgba(22, 22, 24, 0.02) 0px 50px 63px -8px, rgba(22, 22, 24, 0.08) 0px 0px 0px 1px`
- Shadow `md-2` (button): `rgba(22, 22, 24, 0.5) 0px 0px 6px -2px, rgba(22, 22, 24, 0.25) 0px 6px 4px -2px`
- Motion: standard transition `0.1s ease` on interactive elements.

Most of the page stays visually flat against white. Rounded cards and media receive soft, layered shadows rather than heavy outlines; restrained edges distinguish surfaces without adding strong dividers. Blue CTA buttons use a more noticeable inset highlight and shadow. Dark footer content forms a solid contrasting band, not a floating card.

## Imagery

Product screenshots and video are the primary imagery, framed as rounded panels and cards with softly blended blue or violet backgrounds. Feature grids combine interface captures with small explanatory labels. The hero includes a dark media preview beside a testimonial card; avoid unrelated stock photography. Gradients and colorful detail belong mainly to the product mockups, keeping page chrome calm.

## Components

### Primary CTA

Use #0d44e8 fill and white text, with a 14px radius and a compact soft blue-highlighted shadow. Labels include “Get CleanShot for Mac” and “Buy now.”

### Hero headline

Center a bold, tightly tracked statement over short supporting copy; selectively use blue emphasis while keeping most lettering near-black.

### Feature card grid

Combine screenshot-led cards of varied proportions, rounded media, brief titles, and concise descriptions; let each interface image supply its own palette.

### Feature split

Pair a short heading and supporting text with a large rounded product preview, alternating the text and media sides across feature stories.

### Testimonial card

Show compact reviewer identity and readable quote in a rounded white card with subtle layered shadowing and no prominent border.

### Dark closing section

Use a #0f0f12 full-width footer area, with a centered conversion message above newsletter controls and grouped footer links.

### Measured component styles

- **Primary button** (“Get CleanShot for Mac”): background #0d44e8 · text #ffffff · radius 14px · padding 0px 20px · 550 15px Google Sans Flex · shadow rgba(4, 24, 85, 0.28) 0px 2px 6px -1px, rgba(66, 174, 247, 0.48) 0px 6px 14px 0p
- **Secondary button** (“Subscribe”): transparent background · text #ffffff · border 1px solid #ffffff · radius 14px · padding 0px 20px · 550 15px Google Sans Flex · shadow rgba(22, 22, 24, 0.5) 0px 0px 6px -2px, rgba(22, 22, 24, 0.25) 0px 6px 4px -2px
- **Link** (“Add your camera Add a webcam bubble to y”): transparent background · text #000000 · radius 20px · padding 0px · 400 16px Google Sans Flex
- **Input**: transparent background · text #ffffff · border 1px solid #ffffff · radius 16px · padding 0px 18px · 450 15px Google Sans Flex
- **Card** (“Steven Tey, Dub.co @steventey We've been”): transparent background · text #000000 · radius 20px · padding 32px · 400 16px Google Sans Flex · shadow rgba(22, 22, 24, 0.02) 0px 7px 20px -8px, rgba(22, 22, 24, 0.02) 0px 29px 33px -
- **Badge** (“ISO 27001”): transparent background · text #ffffff · border 1px solid #ffffff · radius 56px · padding 7px 12px · 550 13px Google Sans Flex · shadow rgba(22, 22, 24, 0.2) 0px 2px 6px -1px, rgba(22, 22, 24, 0.16) 0px 0px 0px 1px

## Do

- Use white as the dominant page canvas.
- Reserve saturated blue for primary actions and selected emphasis.
- Keep headings bold, centered in the hero, and tightly tracked.
- Alternate feature splits with screenshot-rich card grids.
- Give product media rounded framing and restrained shadows.
- Preserve generous white space between major feature stories.

## Don't

- Do not turn colorful mockup palettes into global page chrome.
- Do not fill every section with cards or decorative borders.
- Do not use heavy shadows on ordinary text and light surfaces.
- Do not make every headline or link blue.
- Do not crowd the hero CTAs or supporting copy.
- Do not carry the bright white treatment into the dark closing band.

## Agent prompt

Build a new CleanShot X-style SaaS page with a quiet, spacious white canvas (#ffffff), True Ink (#000000) headings, and Quiet Graphite (#6a6a6b) supporting copy. Use Action Blue (#0d44e8) for the main CTA and reserve Gradient Blue (#174ef2) for restrained emphasis. Set the page in Google Sans Flex or a close sans-serif substitute, with bold tightly tracked headlines and readable body copy. Center the hero, then alternate feature splits with rounded, screenshot-led card grids. Use product UI imagery as the source of visual color; do not spread mockup gradients across the interface. Keep shadows soft and surfaces mostly flat, with generous section intervals. Finish with a solid Footer Black (#0f0f12) conversion and footer band.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | feature-grid | Long white product tour: centered hero, CTA and media; followed by alternating feature splits, screenshot grids, and product demonstrations. | Primary download CTA, Feature exploration links, Product demo video | Centered hero, Alternating media splits, Rounded screenshot cards, Multi-card feature grids |
| 2 | testimonials | White review section with a left-aligned heading, rating and review link, above a horizontal row of testimonial cards. | Review discovery link, Rating summary, Carousel-style review navigation | White testimonial cards, Compact reviewer identities, Soft shadows |
| 3 | footer | Full-width dark band with a centered upgrade CTA, followed by a newsletter row and multi-column footer links. | Download CTA, Email subscription, Grouped navigation links | Near-black background, Centered closing message, Compact footer columns |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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