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

# Craft · Design System

> A calm editorial canvas for connected work

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

Craft pairs refined editorial typography and a warm, quiet canvas with colorful product demonstrations. The long homepage moves from an illustrated hero through feature stories, social proof, pricing, and a dark, highly organized footer.

## North star

Keep the page editorial and spacious, using quiet warm neutrals for structure and pastel product visuals for moments of color.

## Overview

Craft’s visual strategy balances an understated editorial foundation with expressive product imagery. The warm canvas (#fcf9f7) carries most of the page, while near-black (#030302) anchors headings, navigation, primary actions, and the closing footer. Large, regular-weight serif headlines give the page a literary tone; compact sans-serif navigation, body copy, and buttons keep the interface practical. The hero is an expansive illustrated scene with a floating product interface, followed by generous open intervals and centered statements. Feature stories use pastel blue, green, and yellow panels as backdrops for layered interface mockups rather than turning the whole page into colored bands. Portraits and testimonials add human proof between product sections. Cards are softly rounded and elevated with restrained shadows; thin gray rules provide quiet separation. Keep the overall canvas airy and calm, letting occasional saturated illustration details and dark CTA surfaces provide contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#fcf9f7` | `--color-warm-canvas` | surface | Main page background and the quiet field surrounding most sections. |
| Soft Ink | `#030302` | `--color-soft-ink` | brand | Headings, navigation, primary CTA surfaces, and the contrasting footer background. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Card interiors, interface mockups, and light text on dark surfaces. |
| Signal Orange | `#ff8904` | `--color-signal-orange` | accent | Small badge text accent; not a dominant page color. |
| Craft Green | `#9bd8a9` | `--color-craft-green` | accent | Green feature panel and Blog Publisher CTA; recurring product-story backdrop. |
| Quiet Rule | `#e1e1e1` | `--color-quiet-rule` | neutral | Fine borders and understated divisions between interface elements. |
| Muted Ink | `#1c1c1b` | `--color-muted-ink` | neutral | Secondary text and lower-emphasis supporting copy. |
| Warm Divider | `#dddbd9` | `--color-warm-divider` | neutral | Additional hairline and card-border tone in measured UI details. |
| Periwinkle Wash | `#b8caf5` | `--color-periwinkle-wash` | accent | Blue feature surfaces and interface artwork; keep usage localized to product storytelling. |
| Graphite Copy | `#41413f` | `--color-graphite-copy` | neutral | Secondary dark copy appearing in headings and text. |
| Sky Gradient | `#9ed4ef` | `--color-sky-gradient` | accent | Start of the pale blue section gradient used behind illustrated product content. |
| Cloud Gradient | `#d1eef9` | `--color-cloud-gradient` | accent | Light endpoint of a blue section gradient, not a general-purpose canvas. |
| Stone Copy | `#5a5958` | `--color-stone-copy` | neutral | Muted supporting text, visually subordinate to primary ink. |
| Link Blue | `#0087ff` | `--color-link-blue` | semantic | Small blue status or badge text inside product-style UI. |
| Butter Yellow | `#fde99b` | `--color-butter-yellow` | accent | Pastel product panel and illustration detail, notably the planning showcase. |
| Footer Slate | `#4a4c4f` | `--color-footer-slate` | neutral | Subdued footer and supporting text detail against dark surroundings. |

### Semantic aliases

`--color-canvas` → `#fcf9f7` (Warm Canvas) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#b8caf5` (Periwinkle Wash) · `--color-surface-3` → `#030302` (Soft Ink) · `--color-surface-4` → `#9bd8a9` (Craft Green) · `--color-text` → `#030302` (Soft Ink) · `--color-text-muted` → `#1c1c1b` (Muted Ink) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-border` → `#e1e1e1` (Quiet Rule) · `--color-accent` → `#9bd8a9` (Craft Green) · `--color-accent-2` → `#b8caf5` (Periwinkle Wash) · `--color-accent-3` → `#ff8904` (Signal Orange) · `--color-on-accent` → `#030302` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#030302` | `#fcf9f7` | 19.68:1 | AAA |
| `#030302` | `#ffffff` | 20.63:1 | AAA |
| `#030302` | `#b8caf5` | 12.58:1 | AAA |
| `#1c1c1b` | `#fcf9f7` | 16.27:1 | AAA |
| `#1c1c1b` | `#ffffff` | 17.06:1 | AAA |
| `#1c1c1b` | `#b8caf5` | 10.4:1 | AAA |
| `#1c1c1b` | `#030302` | 1.21:1 | fail |
| `#ffffff` | `#fcf9f7` | 1.05:1 | fail |
| `#ffffff` | `#b8caf5` | 1.64:1 | fail |
| `#ffffff` | `#030302` | 20.63:1 | AAA |

### Gradients

- `linear-gradient(in oklab, rgb(158, 212, 239) 0px, rgb(209, 238, 249) 100%)`
- `linear-gradient(in oklab, rgba(0, 0, 0, 0) 0px, rgb(255, 255, 255) 100%)`
- `linear-gradient(oklab(0 0 0 / 0) 0px, rgb(255, 255, 255) 100%)`
- `linear-gradient(oklab(0 0 0 / 0) 0px, rgb(255, 243, 231) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| UntitledSansFont | `--font-body` | webfont | 400, 500, 600, 700 | Primary sans for body copy, navigation, and controls. | Inter |
| apple-system | `--font-apple-system` | system | 400, 600, 500, 700 | System-ui captions, small labels, and interface details. | Inter |
| UntitledSerifFont | `--font-display` | webfont | 400 | Display headlines, section titles, and editorial testimonial quotes. | Source Serif 4 |

- **UntitledSansFont:** Regular body and nav; medium buttons. Tight tracking is measured for body and navigation; avoid uppercase transformations.
- **apple-system:** Used for compact captions and badges, commonly regular or semibold; keep labels concise.
- **UntitledSerifFont:** Regular-weight serif with tight negative tracking; sentence case and generous line spacing.

### Type scale — Perfect Fourth (ratio ≈ 1.328, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 66px | 400 | 1 | -0.03em | — | UntitledSerifFont | Hero headline and largest editorial statements. |
| h1 | 54px | 400 | 1.1 | -0.02em | — | UntitledSerifFont | Primary page headline in the hero. |
| h2 | 46px | 400 | 1.22 | -0.03em | — | UntitledSerifFont | Major feature and pricing section headings. |
| h3 | 36px | 400 | 1.22 | -0.03em | — | UntitledSerifFont | Secondary feature and content headings. |
| h4 | 32px | 400 | 1.5 | -0.04em | — | UntitledSerifFont | Smaller editorial headings and card titles. |
| body | 16px | 400 | 1.4 | -0.02em | — | UntitledSansFont | Feature descriptions, explanatory copy, and navigation. |
| caption | 15px | 400 | 1.5 | -0.11em | — | apple-system | Compact labels, supporting metadata, and testimonial attribution. |
| button | 14px | 500 | 1.43 | 0 | — | UntitledSansFont | CTA labels and interactive control text. |
| nav | 16px | 400 | 1.4 | -0.02em | — | UntitledSansFont | Top-level links in the floating navigation bar. |

OpenType features in use: `"liga"`.

## Spacing & layout

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

Use a centered composition within the measured 1400px maximum page width. The hero is a broad, rounded visual stage with centered headline and CTA above a large app preview. Below, alternate centered editorial headings with wide feature panels, portraits, testimonials, and smaller feature cards. Preserve the measured comfortable density, 48px section gap, and 8px element gap as the spacing system; do not compress the long scroll into a dense dashboard. Finish with pricing, a prominent CTA, and a multi-column footer.

## Shape & elevation

- Radius: button `14px` · card `24px` · media `14px` · badge `4px` · nav `9999px` · link `9999px` · xs `4px` · sm `8px` · md `12px` · lg `14px` · xl `16px` · 2xl `20px` · pill `9999px`
- Shadow `xl` (card, section, link): `rgba(0, 0, 0, 0.01) 0px 50px 40px 0px, rgba(0, 0, 0, 0.02) 0px 50px 40px 0px, rgba(0, 0, 0, 0.05) 0px 20px 40px 0px, rgba(0, 0, 0, 0.08) 0px 3px 10px 0px`
- Shadow `md` (media): `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, 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 `
- Shadow `md-2` (link, nav, button): `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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 12px 12px 2px, rgba(0, 0, 0, 0.06) 0px 2p`
- Shadow `md-3` (other): `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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 4px 16px 0px`
- 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) 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 2`
- Shadow `md-4` (card): `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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 12px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Use soft, broad shadows to lift hero media, feature panels, and floating cards from the warm canvas. Rounded card edges and subtle hairlines define components without heavy outlines. The navigation and CTA may feel gently elevated, while the footer remains a flat, near-black block.

## Imagery

The page relies on illustrated product scenes and screenshots rather than generic stock imagery. The hero combines a layered paper-cut landscape with an oversized desktop app preview; feature panels show interface cards against pastel backdrops. Small portrait photography supports user stories, while award icons and social tiles add brief visual accents. Keep mockups crisp and contained, with illustrations treated as localized color fields.

## Components

### Floating navigation

Pill-shaped light navigation centered over the hero, with the Craft mark, compact links, and a dark rounded Try Craft Free action.

### Hero stage

Large rounded illustrated scene with centered serif headline, a light CTA, and a desktop product preview layered across its lower area.

### Pastel feature panel

Wide rounded panel in blue, green, or yellow, pairing explanatory copy and a small CTA with overlapping app-interface mockups.

### Testimonial quote

Editorial italic serif quote with a compact person label, small portrait or avatar, and generous surrounding whitespace.

### Pricing cards

Side-by-side light and near-black subscription cards with serif pricing copy and pill-shaped action buttons.

### Footer directory

Near-black footer organized into several narrow link columns, with a fine divider and compact legal and social details.

### Measured component styles

- **Primary button** (“Blog Publisher”): background #9bd8a9 · text #030302 · radius 14px · padding 12px 16px · 500 14px UntitledSansFont
- **Secondary button** (“Try Craft Free”): background #030302 · text #ffffff · radius 3.35544e+07px · padding 8px 14px · 500 16px UntitledSansFont · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Claude”): transparent background · text #030301 · radius 0px · padding 0px · 400 16px UntitledSansFont
- **Card** (“Calendar 12 Oct Today Monday”): background #fefefe · text #030302 · radius 12px · padding 24px · 400 16px UntitledSansFont · shadow rgba(0, 0, 0, 0.01) 0px 50px 40px 0px, rgba(0, 0, 0, 0.02) 0px 50px 40px 0px, rg
- **Badge** (“Essentials”): background #ffedd4 · text #ff8904 · radius 4px · padding 0px 5px · 600 12px apple-system
- **Navigation item** (“Product Imagine Community Pricing Learn ”): transparent background · text #030302 · radius 0px · padding 0px · 400 16px UntitledSansFont

## Do

- Use the warm canvas as the default page background.
- Reserve serif typography for prominent editorial moments.
- Use pastel panels behind product demonstrations, not as continuous page bands.
- Keep primary actions dark, rounded, and visually distinct.
- Give feature stories and testimonials generous breathing room.
- Use soft shadows to lift media and cards subtly.

## Don't

- Do not turn the page into a dense application dashboard.
- Do not use saturated accent colors as full-page backgrounds.
- Do not replace the editorial serif headlines with heavy bold sans-serif.
- Do not add strong outlines where hairlines or shadows suffice.
- Do not let decorative mockup colors define the global palette.
- Do not crowd the hero headline, CTA, and product preview together.

## Agent prompt

Build a new page in Craft’s calm editorial style. Use Warm Canvas (#fcf9f7) as the broad background and Soft Ink (#030302) for headings, navigation, and primary actions. Set large headlines in a regular serif similar to Source Serif 4, then use a clean sans such as Inter for body copy and controls. Create a spacious hero with a centered headline and CTA above a layered product illustration. Organize the page into generous feature stories with interface mockups on localized Periwinkle Wash (#b8caf5), Craft Green (#9bd8a9), or Butter Yellow (#fde99b) panels. Use Paper White (#ffffff) for card interiors, Quiet Rule (#e1e1e1) for subtle boundaries, and restrained soft shadows for depth. Include editorial quotes, clear pricing cards, and a structured dark footer. Prioritize whitespace and product clarity over decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide rounded illustrated hero; centered headline and CTA above a large product preview. | Primary free-trial CTA, Top-level navigation, Product preview | Pill navigation, Serif headline, Pastel illustrated scene, Layered app mockup |
| 2 | footer | Full-width near-black block with multiple compact link columns and a separated bottom utility row. | Grouped site navigation, Legal and social links, Download links | Dark surface, Column headings, Fine divider, Compact footer metadata |

## Source CSS custom properties (selected)

```css
--font-serif: "UntitledSerifFont","UntitledSerifFont Fallback","apple-system-ui-serif","ui-serif","Georgia","serif";
--radius: .625rem;
--card-foreground: #030302;
--popover-foreground: #030302;
--primary: #030302;
--primary-foreground: #030302;
--secondary: #fff;
--secondary-foreground: #030302;
--muted-foreground: #03030280;
--accent: #427e8a;
--accent-foreground: #030302;
--border: #03030217;
--default-font-feature-settings: "liga" 1;
--default-font-variation-settings: normal;
--sidebar-foreground: oklch(14.5% 0 0);
--sidebar-primary: oklch(20.5% 0 0);
--sidebar-primary-foreground: oklch(98.5% 0 0);
--sidebar-accent: oklch(97% 0 0);
--sidebar-accent-foreground: oklch(20.5% 0 0);
--sidebar-border: oklch(92.2% 0 0);
--background: #fcf9f7;
--foreground: #030302;
```

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