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

# Pastel · Design System

> Quiet canvas, clear feedback, vivid blue actions

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

Pastel’s homepage uses a restrained white-and-soft-gray canvas to make its website annotation product and customer stories easy to scan. Large Figtree headlines, rounded interface previews, and compact blue calls to action carry the page from product explanation through social proof to signup.

## North star

Keep the surrounding page calm and neutral so product evidence, customer proof, and blue actions remain immediately legible.

## Overview

The visual strategy is deliberately restrained: white is the main canvas, with broad #f5f5f4 section bands separating content and giving the product imagery room to read. Near-black headings provide strong hierarchy, while muted dark text carries supporting copy; bright blue is reserved for the announcement strip, primary actions, and selected interface details. Figtree shapes the experience throughout, using regular-weight, generously sized headlines and denser supporting text rather than decorative typography. The hero pairs a left-aligned promise, testimonial, and paired actions with a cropped product-browser preview. Farther down, centered headings introduce capability galleries, feature cards, comparisons, and a long testimonial feed. Product screenshots and customer visuals supply the page’s varied color, so the surrounding UI remains quiet. Comfortable spacing, rounded controls, subtle borders, and soft media shadows keep the long page approachable without making it feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and hero background; also provides clean space around product previews and the closing signup section. |
| Soft Ink | `#222222` | `--color-soft-ink` | semantic | Frequent muted text and navigation link color, including secondary headings and supporting content. |
| Paper Mist | `#f5f5f4` | `--color-paper-mist` | surface | Broad alternate section bands and pale capability-card surfaces, separating content without strong contrast. |
| Deep Charcoal | `#111111` | `--color-deep-charcoal` | neutral | Primary headline and body text, plus dark text in feature cards and interface-related content. |
| Signal Blue | `#165dfb` | `--color-signal-blue` | accent | Primary trial buttons and announcement emphasis; appears selectively as a link or product-interface highlight. |
| Warm Hairline | `#d7d3d1` | `--color-warm-hairline` | semantic | Fine outlines on secondary buttons and subtle component edges rather than prominent section dividers. |
| Muted Umber | `#504b46` | `--color-muted-umber` | semantic | Secondary copy and the outlined demo-button label, adding a warm, subdued text tone. |
| Quiet Gray | `#616161` | `--color-quiet-gray` | semantic | Minor low-emphasis text; a supporting neutral rather than a defining brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f4` (Paper Mist) · `--color-text` → `#111111` (Deep Charcoal) · `--color-text-muted` → `#222222` (Soft Ink) · `--color-text-subtle` → `#504b46` (Muted Umber) · `--color-border` → `#d7d3d1` (Warm Hairline) · `--color-accent` → `#165dfb` (Signal Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#111111` | `#f5f5f4` | 17.31:1 | AAA |
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#222222` | `#f5f5f4` | 14.58:1 | AAA |
| `#504b46` | `#ffffff` | 8.62:1 | AAA |
| `#504b46` | `#f5f5f4` | 7.9:1 | AAA |
| `#165dfb` | `#ffffff` | 5.26:1 | AA |
| `#165dfb` | `#f5f5f4` | 4.82:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Figtree | `--font-body` | webfont | 400, 500, 600 | Primary typeface for headings, body copy, navigation, buttons, and captions. | Inter |
| Inter | `--font-inter` | webfont | 400 | Minor measured fallback use, not a defining page typeface. | Inter |

- **Figtree:** Use regular-weight display headlines and medium-weight body or button text; keep case natural and tracking restrained.
- **Inter:** Appears at a small share of measured typography; retain Figtree for the main visual character.

### Type scale — Perfect Fifth (ratio ≈ 1.494, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1.1 | -0.013em | — | Figtree | Large hero or promotional headline. |
| h1 | 45px | 400 | 1.25 | -0.016em | — | Figtree | Primary page headline and prominent statement. |
| h2 | 35px | 400 | 1 | 0 | — | Figtree | Section titles introducing capabilities and proof. |
| body | 18px | 500 | 1.7 | 0 | — | Figtree | Main explanatory copy and testimonial text. |
| caption | 16px | 400 | 1.37 | 0 | — | Figtree | Compact labels, attribution, and supporting details. |
| button | 16px | 500 | 1.5 | 0 | — | Figtree | Primary and secondary action labels. |
| link | 16px | 400 | 2 | 0 | — | Figtree | Navigation links and inline destinations. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 6, 7, 10, 11, 12, 18, 20, 22, 30, 34, 35, 40, 45, 48, 50 px.
- Section rhythm 60px · element gap 30px · card padding — · max content width 1400px.

The page uses a centered content frame with a measured maximum width of 1400px, while its hero and long-form sections vary between single-column, split, and multi-column arrangements. The hero is left-aligned copy beside a product preview; later sections alternate centered headings, image galleries, two-column comparisons, and card grids. Generous vertical breathing room makes the unusually long page feel sectioned rather than dense. Pale full-width bands distinguish selected content groups, while smaller cards keep copy and product details easy to scan.

## Shape & elevation

- Radius: button `10px` · card `8px` · media `9px` · link `4px` · xs `4px` · sm `8px` · md `9px` · lg `10px` · xl `15px` · pill `9999px`
- Shadow `md` (media): `rgba(0, 0, 0, 0.1) 0px 11px 16.5px -3.3px, rgba(0, 0, 0, 0.1) 0px 4.4px 6.6px -4.4px`
- Shadow `lg` (media): `rgba(88, 83, 77, 0.2) 0px 17px 25px 5px`
- Shadow `sm` (media): `rgba(228, 228, 228, 0.85) 0px 5px 5px 0px`
- Shadow `lg-2` (media): `rgba(88, 83, 77, 0.2) 0px 19px 28px -6px`
- Shadow `md-2` (media): `rgb(219, 219, 212) 0px 10px 15px -3px, rgba(219, 219, 212, 0.1) 0px 4px 6px -4px`
- Shadow `sm-2` (media): `rgba(219, 219, 212, 0.1) 0px 4px 6px -4px`
- Motion: standard transition `0.12s ease` on interactive elements.

Most sections and cards are flat, relying on white space and pale surfaces for separation. Fine warm-gray borders define secondary controls and subtle edges. Soft, layered shadows appear mainly around product media and floating interface previews, not as a general card treatment.

## Imagery

Product UI screenshots, browser previews, annotated website examples, and customer portraits do most of the visual work. They are framed as cropped media or small gallery tiles, often inside pale cards, with occasional video-style previews. The product interface is allowed to retain its own colors and detail; the surrounding page stays neutral. Customer imagery and review thumbnails add human evidence among the interface-focused visuals.

## Components

### Announcement strip

A narrow Signal Blue (#165dfb) band sits above the white navigation, with centered white announcement text and an underlined destination link.

### Primary trial button

Signal Blue (#165dfb) fill, white Figtree medium text, measured 10px radius, and measured 11px 22px vertical and horizontal padding.

### Secondary demo button

White or transparent-looking fill with a 1px #d7d3d1 outline, warm dark label, matching 10px radius, and 11px 22px padding.

### Hero split

Large left-aligned headline and testimonial sit opposite a cropped product-browser preview, followed by paired actions and concise reassurance labels.

### Capability card

Pale #f5f5f4 surface with an interface detail or illustration above a concise title and supporting explanation; corners vary by card.

### Customer review tile

Compact review content combines a customer identity, rating, short text, and sometimes a portrait or video thumbnail in a restrained card.

### Measured component styles

- **Primary button** (“Start a free trial”): background #165dfb · text #ffffff · radius 10px · padding 11px 22px · 500 16px Figtree
- **Secondary button** (“Watch demo”): transparent background · text #45403c · border 1px solid #d7d3d1 · radius 10px · padding 11px 22px · 500 16px Figtree
- **Link** (“Pricing”): transparent background · text #222222 · radius 0px · padding 0px · 400 16px Figtree
- **Card** (“Pause Comments Keep your team focused on”): background #f5f5f4 · text #111111 · radius 8px · padding 0px · 400 14px Figtree

## Do

- Use white as the primary canvas.
- Reserve blue for primary actions and key announcements.
- Set large headlines in Figtree with regular weight.
- Separate major content groups with pale-gray bands where appropriate.
- Show product UI as concrete evidence, not decoration.
- Use subtle outlines and soft media shadows sparingly.

## Don't

- Do not introduce unmeasured brand colors.
- Do not make every card look elevated.
- Do not fill the page with decorative gradients.
- Do not let product screenshots overwhelm surrounding copy.
- Do not use heavy display typography or all-caps navigation.
- Do not crowd sections together on the long homepage.

## Agent prompt

Build a new Pastel-style SaaS page with a quiet white canvas (#ffffff), pale section surfaces (#f5f5f4), and Deep Charcoal text (#111111). Use Figtree throughout: large, regular-weight headlines, readable supporting copy, and medium-weight controls. Keep Signal Blue (#165dfb) for the main CTA and selective announcement or link emphasis; use Warm Hairline (#d7d3d1) for understated control borders. Create a clear hierarchy with a split hero, concrete product UI previews, concise testimonials, and pale capability cards. Favor generous section breathing room, centered section introductions, and varied split or grid layouts. Keep imagery realistic to the product, let screenshots retain their own interface colors, and use soft shadows only on media. Make the primary action obvious without turning every element into a button.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline, testimonial, and paired actions beside a cropped product preview. | Primary trial action, Secondary demo action, Trust reassurance | White canvas, Split hero, Product-browser preview, Large headline |
| 2 | feature-grid | Pale full-width band with a centered introduction, horizontal examples, and customer proof. | Browse supported work types, Scan customer logos, Read a short testimonial | Pale section band, Image gallery, Logo cluster, Testimonial split |
| 3 | comparison | Centered problem statement above a two-column before-and-after comparison. | Understand the pain point, Compare current and improved workflow | Centered quote, Before-and-after panels, Product workflow imagery |
| 4 | feature-split | Centered customer quote followed by side-by-side feature explanations. | Reinforce time saved, Explore practical workflows | Centered testimonial, Two feature panels, Interface imagery |
| 5 | testimonials | Centered heading above a long, multi-column review feed with varied card heights. | Scan customer proof, Read individual reviews, Load more reviews | Review cards, Portraits and video thumbnails, Rating marks, Multi-column feed |
| 6 | cta | Product preview above a centered headline, three reassurance points, and paired actions. | Start trial, Play demo, Confirm ease of use | Centered closing CTA, Product gallery preview, Blue primary button |

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