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

# Craftwork · Design System

> A quiet canvas for vivid creative assets

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

Craftwork pairs a spacious white interface with bold typography and vivid design-asset previews. Soft green gradients introduce the AI-agent proposition, while restrained cards and clear sectioning keep the marketplace easy to scan.

## North star

Keep the interface nearly monochrome and spacious, letting one soft hero glow and vivid asset previews supply the colour.

## Overview

The page is built on a white canvas, with black typography and pale-gray surfaces carrying most of the interface. A soft lime-to-mint glow washes behind the opening navigation and hero, acting as a restrained signature rather than a general background treatment; the rest of the long page returns to white. Euclid Circular supplies rounded, compact forms across navigation, body copy, and oversized centered headings. The headline is heavy and tightly tracked, balanced by smaller muted explanatory text and dark, pill-like primary actions. Product previews bring the strongest colour and texture: colorful illustrations, mockups, templates, and interface screenshots sit inside pale neutral cards. Sections use generous vertical separation and a centered content column, with grids for assets and features, paired pricing cards, and a two-column FAQ. Thin gray borders and subtle shadows define controls and card edges without competing with the imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the dominant background for the hero, content sections, and footer. |
| Porcelain Gray | `#f4f4f4` | `--color-porcelain-gray` | surface | Pale backing for asset cards, feature panels, secondary controls, and broad footer surfaces. |
| Ink | `#000000` | `--color-ink` | brand | Primary heading, navigation, body, and button text; also used for dark primary actions. |
| Soft Graphite | `#999999` | `--color-soft-graphite` | neutral | Low-emphasis supporting copy, secondary navigation details, and footer text. |
| Slate Gray | `#606060` | `--color-slate-gray` | neutral | Muted interface labels, badges, and secondary copy where stronger contrast than #999999 is needed. |
| Quiet Line | `#e5e5e5` | `--color-quiet-line` | neutral | Fine borders around outlined controls, cards, and subtle component boundaries. |
| Lime Mist | `#e4f99e` | `--color-lime-mist` | accent | Lime-tinted stop in the opening hero glow; use as atmospheric gradient colour, not a broad surface. |
| Mint Haze | `#def8f2` | `--color-mint-haze` | accent | Pale mint stop in the hero's soft radial wash, fading into the white page canvas. |
| Card Divider | `#dbdbdb` | `--color-card-divider` | neutral | Secondary hairlines and subdued outlines detected around card and badge details. |
| Charcoal | `#2e2e2e` | `--color-charcoal` | brand | Occasional softened near-black text or control detail; keep primary typography closer to pure black. |
| Lavender Veil | `#d7cef7` | `--color-lavender-veil` | accent | Minor violet gradient or decorative tint; not a defining page background. |
| Lilac Dust | `#d4b8f8` | `--color-lilac-dust` | accent | Subtle accent found in decorative details; keep it secondary to the green hero glow and asset imagery. |
| Wisteria Tint | `#d8bff7` | `--color-wisteria-tint` | accent | Additional soft violet decorative accent, appearing sparingly rather than as a core interface colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f4` (Porcelain Gray) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#999999` (Soft Graphite) · `--color-text-subtle` → `#606060` (Slate Gray) · `--color-border` → `#e5e5e5` (Quiet Line) · `--color-accent` → `#d4b8f8` (Lilac Dust) · `--color-accent-2` → `#d8bff7` (Wisteria Tint)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f4f4f4` | 19.09:1 | AAA |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#f4f4f4` | 2.59:1 | fail |
| `#606060` | `#ffffff` | 6.29:1 | AA |
| `#606060` | `#f4f4f4` | 5.72:1 | AA |
| `#d4b8f8` | `#ffffff` | 1.75:1 | fail |
| `#d4b8f8` | `#f4f4f4` | 1.59:1 | fail |

### Gradients

- `radial-gradient(70% 90% at 50% -20%, color(srgb 0.721569 0.941176 0 / 0.38) 0%, color(srgb 0.184314 0.827451 0.678431 / 0.16) 45%, rgba(0, 0, 0, 0) 75%)`
- `linear-gradient(rgba(139, 108, 255, 0.28) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(115deg, rgb(245, 230, 182) 0%, rgb(229, 200, 134) 42%, rgb(216, 182, 108) 62%, rgb(239, 218, 162) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| euclidCircularALightWebS | `--font-body` | webfont | 400, 500, 600 | Display, headings, navigation, body copy, labels, and controls throughout the interface. | DM Sans |
| ui-monospace | `--font-mono` | system | 400 | Install command and other compact code-like snippets. | Roboto Mono |

- **euclidCircularALightWebS:** Rounded geometric sans; large headings use strong weight and tight negative tracking, while labels and body copy stay regular and compact.
- **ui-monospace:** Use monospace sparingly for command text; retain regular weight and neutral tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.406, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 600 | 0.95 | -0.045em | — | euclidCircularALightWebS | Oversized headline or high-impact hero display text. |
| h1 | 62px | 600 | 1.06 | -0.039em | — | euclidCircularALightWebS | Main hero headline and prominent page-level heading. |
| h2 | 42px | 600 | 1.14 | -0.05em | — | euclidCircularALightWebS | Major section headings, including marketplace and pricing sections. |
| h3 | 32px | 600 | 1.13 | -0.03em | — | euclidCircularALightWebS | Feature-card and smaller content-section headings. |
| h4 | 20px | 400 | 1.5 | -0.018em | — | euclidCircularALightWebS | Supporting feature titles and secondary headings. |
| body | 16px | 400 | 1.38 | -0.02em | — | euclidCircularALightWebS | Standard descriptions, explanatory copy, and card text. |
| caption | 14px | 400 | 1.43 | 0 | — | euclidCircularALightWebS | Small metadata, asset labels, and fine-print descriptions. |
| button | 14px | 500 | 1.43 | -0.02em | — | euclidCircularALightWebS | Primary and secondary action labels. |
| nav | 16px | 500 | 1.38 | -0.02em | — | euclidCircularALightWebS | Main header navigation links. |
| link | 16px | 400 | 1.38 | -0.02em | — | euclidCircularALightWebS | Inline and asset-card links. |
| eyebrow | 12px | 500 | 1.83 | 0.06em | uppercase | euclidCircularALightWebS | Uppercase small section labels above headings. |
| code | 13px | 400 | 1.5 | 0 | — | ui-monospace | Command-line installation snippet beneath the hero actions. |

OpenType features in use: `"clig" 0, "liga" 0`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 7, 8, 10, 12, 14, 15, 16, 20, 24, 32 px.
- Section rhythm 60px · element gap 6px · card padding — · max content width 1020px.

Use a centered, comfortable-width content column capped at the measured 1020px, with broad white margins and a relaxed vertical rhythm. The opening hero is center-aligned beneath a compact horizontal header; later content alternates between asset grids, feature-card mosaics, and paired pricing or FAQ layouts. The measured section gap is 60px, while tighter internal groupings use the compact 6px element rhythm. Keep card grids aligned and evenly spaced, with considerable blank space between major page bands rather than filling every viewport.

## Shape & elevation

- Radius: button `10px` · card `20px` · media `10px` · badge `4px` · nav `12px` · link `20px` · xs `4px` · sm `6px` · md `7px` · lg `8px` · xl `10px` · 2xl `12px` · pill `9999px`
- Shadow `inset` (button, media, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(47, 43, 67, 0.1) 0px -1px 0px 0px inset, rgba(47, 43, 67, 0.1) 0px 1px 3px 0px`
- Shadow `inset-2` (card, link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px inset`
- Shadow `hairline` (media, badge): `rgb(255, 255, 255) 0px 0px 0px 0px, rgb(244, 244, 244) 0px 0px 0px 3px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.55) 0px 16px 32px -14px`
- Shadow `inset-3` (text): `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 0px 0px 1px inset`
- Shadow `md` (button): `rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.12) 0px 4px 16px -6px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is mostly flat, using white and pale-gray surfaces with thin, quiet borders. Cards gain separation through their background and rounded silhouette rather than heavy shadows. Reserve subtle inset edges and restrained button or card shadows for controls and floating media previews; avoid pronounced elevation across the page.

## Imagery

Imagery is primarily product-led rather than photographic: colorful illustration sets, 3D objects, mockups, template screenshots, and interface previews demonstrate the catalog. Place previews in tidy, rounded, pale-gray cards and preserve their native color and detail. The hero itself stays typographic, with a diffuse lime-and-mint glow behind the top area; avoid adding decorative imagery that competes with the assets.

## Components

### Header navigation

Compact horizontal header with logo, category links, centered search, pricing, dark Connect agent action, sign-in, and menu controls.

### Hero actions

Centered headline and supporting copy above a dark rounded agent-connection CTA and a light Browse the catalog button.

### Command snippet

Small pale rounded code strip under the hero actions, using monospace installation text and a copy affordance.

### Asset preview cards

Catalog imagery sits in pale-gray cards with generous rounding; previews remain vivid and carry concise titles and metadata.

### Feature mosaic

Uneven grid of broad and compact light-gray cards, pairing product screenshots with short feature descriptions.

### Pricing cards

Two side-by-side plans with restrained borders, black pricing text, concise benefit lists, and distinct low-key CTA treatments.

### FAQ accordion

Two-column FAQ area with a compact left introduction and right-side questions divided by fine horizontal rules.

### Measured component styles

- **Primary button** (“Browse templates”): background #efefef · text #000000 · radius 9999px · padding 0px 20px · 500 16px euclidCircularALightWebS
- **Secondary button** (“Follow”): transparent background · text #000000 · border 1px solid #e5e5e5 · radius 10px · padding 0px 10px · 500 14px euclidCircularALightWebS · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(47, 43,
- **Link** (“Superscene Emoji 186 illustrations”): transparent background · text #000000 · radius 0px · padding 0px 0px 7px 0px · 400 16px euclidCircularALightWebS
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 400 18px euclidCircularALightWebS
- **Card** (“3,300+ packs, 40,000+ assets Templates, ”): background #f4f4f4 · text #000000 · radius 20px · padding 0px · 400 16px euclidCircularALightWebS · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“+500”): background #f9f9f9 · text #606060 · radius 9999px · padding 0px 10px · 500 14px euclidCircularALightWebS · shadow rgb(255, 255, 255) 0px 0px 0px 0px, rgb(244, 244, 244) 0px 0px 0px 3px, rgba(0, 
- **Navigation item** (“Illustrations”): transparent background · text #000000 · radius 12px · padding 0px 14px · 500 16px euclidCircularALightWebS

## Do

- Keep the main canvas white and the overall palette restrained.
- Use the lime-to-mint glow only as a soft hero atmosphere.
- Set major headings in rounded geometric sans with tight tracking.
- Let asset previews retain their vivid original colours.
- Use pale-gray cards and subtle hairlines to structure content.
- Preserve generous whitespace between major sections.

## Don't

- Do not turn the whole page into a tinted or dark background.
- Do not use the green glow behind every section.
- Do not add bright interface accents that compete with asset previews.
- Do not rely on heavy shadows for card separation.
- Do not crowd the hero with illustrations or extra promotional blocks.
- Do not make supporting text as large or bold as the headline.

## Agent prompt

Build a new Craftwork-style design marketplace page with a white Gallery White (#ffffff) canvas, Ink (#000000) typography, and Porcelain Gray (#f4f4f4) cards. Use a restrained lime-and-mint hero wash with Lime Mist (#e4f99e) and Mint Haze (#def8f2), fading quickly back to white. Set headings in a rounded geometric sans such as DM Sans, with bold, tightly tracked display text and quieter gray supporting copy. Center the hero beneath a compact horizontal navigation; pair a dark primary CTA with a pale secondary action and a small monospace command strip. Organize content into spacious grids and feature mosaics, letting vivid product previews provide most visual variation. Use Quiet Line (#e5e5e5) hairlines, rounded cards, and subtle elevation only where needed. Keep later pricing, FAQ, newsletter, and footer areas clean and scannable.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width white hero with compact top navigation, centered headline and actions, then a horizontal asset preview strip. | Search entry point, Primary agent connection, Catalog browsing CTA, Copyable install command | Soft lime-mint glow, Oversized black headline, Dark pill CTA, Pale secondary button, Asset preview cards |
| 2 | footer | Wide white footer with paired author-promotion panels above a dense multi-column directory of links. | Sell designs, Recommend and earn, Browse categorized links | Pale-gray rounded panels, Multi-column link groups, Muted supporting text |
| 3 | footer | Continuation of the lower-page footer with link clusters, review badges, and compact legal and brand details. | Discover popular searches, View review proof, Access policies | Small muted labels, Compact multi-column links, Subtle dividers |

## Source CSS custom properties (selected)

```css
--background-reversed-surface3: #303030;
--text-reversed-icons-secondary: #a0a0a0;
--background-circa: #063bf5;
--background-destructive-hover: #fdf2f1;
--background-destructive-pressed: #fbe6e4;
--background-field: #fafafa;
--background-ghost: #fff;
--background-ghost-hover: #fff;
--background-ghost-pressed: #efefef;
--background-primary: #1e1e1e;
--background-primary-hover: #383838;
--background-primary-pressed: #000;
--background-secondary: #efefef;
--background-secondary-hover: #e0e0e0;
--background-secondary-pressed: #b3b3b3;
--background-surface-1: #fff;
--background-surface-2: #fff;
--background-surface-3: #fafafa;
--background-surface-4: #edededb2;
--background-surface-5: #e3e3e3b2;
--controls-switcher-background: #fafafa;
--background-surface1: #fff;
--background-surface2: #fff;
--background-surface3: #f9f9f9;
--background-surface4: #edededb2;
--background-surface5: #e3e3e3b2;
--background-plate: #f4f4f4;
--stats-card-border: #00000014;
--status-good-text: #006300;
--status-warning-text: #8a5a00;
--status-critical-text: #b3261e;
--background-brand: #cafc00;
--background-brand-hover: #bceb00;
--background-brand-pressed: #a4cc00;
--background-reversed: #1e1e1e;
--background-reversed-hover: #383838;
--background-reversed-pressed: #000;
--border-color: #0000001a;
--text-icons-primary: #000;
--text-icons-primary-invariably: #000;
```

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