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

# Workflow · Design System

> Quiet editorial space for clearer creative collaboration

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

Workflow presents design feedback software through a restrained, white-first editorial style. Serif headlines and generous whitespace frame product-interface imagery, reviewer stories, and a subdued call to action.

## North star

Keep the page quiet and editorial: use whitespace and product evidence to carry the story, not decorative colour or heavy containers.

## Overview

The page uses a near-white canvas as its defining visual feature, with charcoal text and pale gray surfaces keeping attention on the message and product interface. The measured palette is almost entirely neutral; green approval indicators appear as functional states within interface examples rather than as a broad brand accent. Georgia headlines provide an editorial voice, while Inter handles navigation, buttons, and small interface labels. A light Crimson Pro display face appears in subordinate headings. The centered hero sits in a large field of whitespace before product tabs and an expansive interface preview. Below, the page alternates centered statements and testimonials with modular feature and review panels, maintaining a calm, long-scroll rhythm. Screenshots and customer portraits add visual evidence and variation without changing the restrained page palette. Cards are mostly pale and flat, with delicate borders and soft shadows used selectively to separate layered product previews.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and dominant background behind the hero, feature sections, testimonials, and footer. |
| Soft Paper | `#f6f6f6` | `--color-soft-paper` | surface | Pale CTA and card surface; also appears in product-preview panels and secondary UI areas. |
| Charcoal Ink | `#1a1a1a` | `--color-charcoal-ink` | neutral | Primary headings, body text, navigation, footer content, and button labels. |
| Quiet Gray | `#6a6a6a` | `--color-quiet-gray` | neutral | Muted explanatory copy, captions, and secondary interface text. |
| Warm Umber | `#4d3f32` | `--color-warm-umber` | neutral | Measured muted text shade; use only where the page’s warm-toned copy treatment is present. |
| Fine Rule | `#e3e3e3` | `--color-fine-rule` | neutral | Subtle card and footer hairlines that separate content without strong framing. |
| Mist Gray | `#e9e9e9` | `--color-mist-gray` | surface | Secondary card, badge, and interface surface for low-contrast grouping. |
| Pale Edge | `#dbdbdb` | `--color-pale-edge` | neutral | Minor measured border tone; reserve for faint separators within product-preview details. |
| Soft Graphite | `#bababa` | `--color-soft-graphite` | neutral | Minor measured edge tone, not a defining brand colour; use sparingly for subdued interface dividers. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f6f6` (Soft Paper) · `--color-surface-2` → `#e9e9e9` (Mist Gray) · `--color-text` → `#1a1a1a` (Charcoal Ink) · `--color-text-muted` → `#6a6a6a` (Quiet Gray) · `--color-text-subtle` → `#4d3f32` (Warm Umber) · `--color-border` → `#e3e3e3` (Fine Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#1a1a1a` | `#f6f6f6` | 16.1:1 | AAA |
| `#1a1a1a` | `#e9e9e9` | 14.34:1 | AAA |
| `#6a6a6a` | `#ffffff` | 5.41:1 | AA |
| `#6a6a6a` | `#f6f6f6` | 5:1 | AA |
| `#6a6a6a` | `#e9e9e9` | 4.46:1 | AA-large |
| `#4d3f32` | `#ffffff` | 10.13:1 | AAA |
| `#4d3f32` | `#f6f6f6` | 9.38:1 | AAA |
| `#4d3f32` | `#e9e9e9` | 8.35:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-inter` | webfont | 400, 500 | Navigation, buttons, captions, badges, and product-interface labels. | Inter |
| Georgia | `--font-body` | system | 400 | Primary hero and section headlines, plus measured body copy. | Lora |
| Crimson Pro | `--font-crimson-pro` | webfont | 300 | Light-weight secondary display headings and smaller feature titles. | Crimson Pro |

- **Inter:** Regular weight in measured UI roles; sentence case with understated labels and no display tracking.
- **Georgia:** Regular serif gives headlines an editorial tone; keep headline tracking restrained and sentence case.
- **Crimson Pro:** Measured at light weight; use as a delicate display face, not for dense interface copy.

### Type scale — Perfect Fourth (ratio ≈ 1.372, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 46px | 400 | 1.2 | -0.012em | — | Georgia | Centered hero headline introducing the design feedback product. |
| h2 | 45px | 400 | 1.1 | 0.02em | — | Georgia | Large section headlines for major feature and conversion blocks. |
| h3 | 32px | 300 | 1 | 0 | — | Crimson Pro | Light display titles within subordinate feature content. |
| h4 | 26px | 300 | 1 | 0 | — | Crimson Pro | Smaller feature or card headings in the product story. |
| body | 13px | 400 | 1.62 | 0 | — | Georgia | Editorial explanatory copy and selected longer descriptions. |
| caption | 12px | 400 | 1.75 | 0 | — | Inter | Compact interface labels, testimonial credits, and supporting metadata. |
| button | 14px | 400 | 1.5 | 0 | — | Inter | Short CTA labels such as Get started and Try now. |
| nav | 14px | 400 | 1.5 | 0 | — | Inter | Header navigation and utility links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 7, 8, 10, 12, 16, 20, 24, 40, 48 px.
- Section rhythm 48px · element gap 16px · card padding 12px · max content width 1408px.

The page follows a single, centered long-scroll composition on a measured maximum width of 1408px. Hero copy is centered above a horizontal product-mode tab row and a wide interface preview. Later sections alternate centered introductions with two-column feature panels, logo strips, testimonials, and three-column review or AI-check layouts. The measured density is comfortable, with a 48px section gap and 16px element gap as reference values. Large blank intervals between major stories are essential to the page’s pacing; keep the footer compact and divided into columns.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `50%` · badge `6px` · xs `4px` · sm `5px` · md `6px` · lg `7px` · xl `8px` · 2xl `10px` · pill `9999px`
- Shadow `md` (other): `rgba(26, 26, 26, 0.08) 0px 8px 16px 0px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.06) 0px 2px 6px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.08) 2px 2px 27px 0px`
- Shadow `md-2` (other): `rgba(26, 26, 26, 0.08) 0px 8px 18px 0px`
- Shadow `lg-2` (other): `rgba(0, 0, 0, 0.1) 0px 0px 30px 0px`
- Shadow `sm-2` (card): `rgba(0, 0, 0, 0.06) 0px 1.76667px 5.3px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955)` on interactive elements.

The page is mostly flat: white canvas, pale gray panels, and fine borders do most of the separation. Use soft, low-opacity shadows selectively beneath layered interface previews or review cards. Avoid strong outlines and stacked, heavy card treatments; rounded corners are present in controls and selected cards, not as a dominant motif.

## Imagery

Use product-interface screenshots as the primary visual material, framed in broad, pale panels with realistic comment overlays and review controls. Customer portraits appear as small circular crops beside quotations. The interface examples contain their own imagery, video, and occasional approval colours; treat these as product content, not as the page’s brand palette. Keep the surrounding page clean and avoid decorative illustration.

## Components

### Primary CTA

A restrained pale-gray button with charcoal Inter text, measured 8px radius, and compact padding; keep its contrast quiet against white.

### Product mode tabs

A centered horizontal row of modes above the hero preview, with a thin underline marking the selected mode.

### Product preview

A wide screenshot-led workspace with a light toolbar, comment areas, review controls, and embedded client-site imagery.

### Feature panel

Pale-gray modular panels pair a short title and supporting copy with an interface demonstration or walkthrough video.

### Testimonial

Centered quotation with a small circular portrait and subdued attribution, separated from neighboring content by generous whitespace.

### Review card

A low-contrast review tile with concise customer copy and a small portrait; use gentle separation rather than prominent borders.

### Footer link columns

A thin top divider introduces a compact two-column footer with grouped navigation, comparison, help, and policy links.

### Measured component styles

- **Primary button** (“Try now”): background #f6f6f6 · text #1a1a1a · radius 8px · padding 8px 16px · 400 14px Inter
- **Card** (“Record a walkthrough Add a personal touc”): background #f6f6f6 · text #1a1a1a · radius 0px · padding 24px 0px 0px 24px · 400 14px Inter
- **Badge** (“@Erica”): background #ececec · text #1a1a1a · radius 6px · padding 2px 4px · 400 13px Inter
- **Navigation item** (“Skip to content”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 14px Inter

## Do

- Keep the page canvas white and visually quiet.
- Use Georgia for editorial headlines and Inter for interface text.
- Center hero and major section introductions.
- Let product screenshots provide the main visual detail.
- Use pale surfaces and fine hairlines to group content.
- Leave generous whitespace between major sections.

## Don't

- Do not add a saturated brand accent across the page.
- Do not turn product-interface colours into global site colours.
- Do not crowd the hero with extra badges or copy.
- Do not use heavy borders or dense card stacks.
- Do not replace the serif editorial headlines with generic bold sans text.
- Do not reduce testimonial portraits and attributions to decorative clutter.

## Agent prompt

Build a new Workflow-style page with a white Gallery White (#ffffff) canvas and a restrained editorial tone. Use Charcoal Ink (#1a1a1a) for headings and navigation, Quiet Gray (#6a6a6a) for supporting copy, and Soft Paper (#f6f6f6) with Mist Gray (#e9e9e9) for subtle panels and buttons. Set major headlines in Georgia or a close editorial serif; use Inter for navigation, controls, and compact labels. Center the hero, place a mode-tab row above a wide product screenshot, then alternate modular feature panels with centered testimonials and review cards. Give sections ample breathing room and use Fine Rule (#e3e3e3) sparingly for separators. Keep shadows soft and selective, and treat any colour inside screenshots as product UI rather than brand styling.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and description above CTA, horizontal mode tabs, and a wide product preview. | Primary start action, Selectable preview modes | Editorial serif headline, Pale button, Screenshot workspace |
| 2 | logo-cloud | Centered trust statement followed by a multi-row strip of client logos. | Social proof | Monochrome wordmarks, Open white layout |
| 3 | feature-grid | Centered introduction above a two-column arrangement of feature demonstrations. | Walkthrough video, In-context review examples | Pale modular panels, Embedded interface previews |
| 4 | testimonials | A single centered quotation with portrait and attribution. | Customer endorsement | Circular portrait, Serif quotation |
| 5 | video | Centered section heading and copy above a large horizontal video preview. | Watch demo | Product video frame, Layered review interface |
| 6 | integrations | Centered title and description above a horizontal line of partner or tool marks. | Tool ecosystem overview | Small monochrome icons, Central product mark |
| 7 | testimonials | A centered long quotation with a small portrait and concise attribution. | Customer endorsement | Portrait above quote, Open whitespace |
| 8 | feature-grid | Centered announcement and CTA above three side-by-side feature cards. | Coming-soon announcement, Waiting-list link | Three-column cards, Embedded audit screens |
| 9 | testimonials | Centered heading above a three-column grid of review cards. | Peer reviews, Multiple customer endorsements | Portrait-led tiles, Low-contrast card surfaces |
| 10 | cta | Centered closing headline with a single low-key free-trial action. | Free-trial conversion | Minimal CTA, Large whitespace |
| 11 | footer | Thin top rule, brand mark, and compact grouped link columns. | Grouped navigation, Policy and help access | Small link text, Fine divider |

## Source CSS custom properties (selected)

```css
--new-site--surface: white;
--new-site--text: #1a1a1a;
--new-site--surface-invert: #1a1a1a;
--new-site--text-weak: #1a1a1aa6;
--new-site--border: #1a1a1a1f;
--radius: 8px;
--bg-secondary: #f3f3f3;
--secondary: #555;
--light-text: #e3e3e3;
--new-site--text-disabled: #1a1a1a4d;
--error-bg: #ff002e08;
--new-site--surface-strong: #ececec;
--new-site--surface-medium: #f6f6f6;
--shadows--comment-shadow: #1a1a1a14;
--new-site--border-weak: #1a1a1a0f;
--new-site--text-invert: #f6f6f6;
--new-site--surface-light: #f9f9f9;
--success--border-active<deleted|variable-b58fd7fc-be69-cc70-a2c3-ce5f32b318c1>: #74a486;
--success--text: #547e69;
--error--border: #d99ba4;
--error--text: #923d56;
--new-site--surface-invert-medium: #1a1a1acc;
--shadows--comment-shadow-1: #1a1a1a14;
--success--surface-medium: #e9f6ee;
--background: #f6f4f0;
--surface-strong-old: #ecebed;
--new-site--surface-invert-strong: #1a1a1a80;
--new-site--text-invert-weak: #f6f6f6a6;
--new-site--border-active: #1a1a1acc;
--new-site--border-hover: #1a1a1a33;
--error--surface: #faebed;
--error--surface-hover: #f6dbe0;
--error--surface-active: #f1c8ce;
--error--text-hover: #8a3853;
--error--border-hover: #ce6878;
--success--surface: #f1fcf6;
--success--surface-strong: #c4e6d5;
--success--text-weak: #60886f;
--success--border: #9dbfad;
--success--border-weak: #74a486;
```

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