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

# Craft · Design System

> Creative recruitment with a cultivated, editorial edge

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

Craft pairs a deep forest-green, full-bleed opening with warm, paper-like sections and expressive condensed typography. Botanical imagery, editorial content cards, and sharp green CTAs give the consultancy homepage a distinctive, considered rhythm.

## North star

Pair editorial-scale typography and organic imagery with a restrained paper-and-forest palette, keeping bright green for meaningful actions.

## Overview

The page opens with a full-bleed deep green visual and oversized, pale editorial lettering, establishing a dramatic contrast with the warm off-white canvas that carries most of the page. Forest greens return in the guide feature and footer, while a vivid green is reserved for primary actions and occasional highlighted words. Typography is the main graphic device: a distinctive condensed display face handles large headlines, while the companion Arizona Flare face supports body copy and smaller labels. Generous breathing room separates content groups, but the main service area becomes a compact four-column image grid. Soft-focus botanical photography adds an organic counterpoint to the structured cards and editorial podcast portraits. Hairline borders and restrained card elevation preserve a mostly flat, print-like feel. The overall system balances confident scale, natural imagery, and a measured neutral palette rather than relying on decorative UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Paper | `#eae6df` | `--color-warm-paper` | brand | Main page canvas across the introduction, service, podcast, and contact sections. |
| Muted Umber | `#645757` | `--color-muted-umber` | neutral | Frequent muted copy and headings on the light canvas. |
| Deep Forest | `#1d3023` | `--color-deep-forest` | brand | Opening hero and dark guide/footer surfaces; also supports light text and CTA contrast. |
| Soft Stone | `#d7d2cc` | `--color-soft-stone` | neutral | Subtle hairline borders separating content without adding visual weight. |
| Shadow Black | `#000000` | `--color-shadow-black` | semantic | Appears in the measured hero gradient fade, not as a defining interface color. |
| Spring Signal | `#26d862` | `--color-spring-signal` | accent | Primary CTA fills and occasional highlighted text against the warm canvas. |
| Moss Shadow | `#1a2b1f` | `--color-moss-shadow` | surface | Secondary dark green section surface, visually close to the main forest backdrop. |
| Ivory Mist | `#f7f5f2` | `--color-ivory-mist` | surface | Pale card and text surface, notably for editorial content and light-on-dark headings. |
| Burgundy Ink | `#2a1a1d` | `--color-burgundy-ink` | semantic | Primary dark copy on the light canvas and text within green CTA variants. |
| Smoked Plum | `#504344` | `--color-smoked-plum` | neutral | Secondary dark text tone appearing in body copy. |
| Linen Card | `#f2f0ec` | `--color-linen-card` | surface | Warm-toned statistic cards and other inset content surfaces. |

### Semantic aliases

`--color-canvas` → `#eae6df` (Warm Paper) · `--color-surface` → `#1d3023` (Deep Forest) · `--color-surface-2` → `#1a2b1f` (Moss Shadow) · `--color-surface-3` → `#f2f0ec` (Linen Card) · `--color-text` → `#2a1a1d` (Burgundy Ink) · `--color-text-muted` → `#645757` (Muted Umber) · `--color-text-subtle` → `#f7f5f2` (Ivory Mist) · `--color-border` → `#d7d2cc` (Soft Stone) · `--color-accent` → `#26d862` (Spring Signal) · `--color-on-accent` → `#1d3023` (Deep Forest)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2a1a1d` | `#eae6df` | 13.36:1 | AAA |
| `#2a1a1d` | `#1d3023` | 1.19:1 | fail |
| `#2a1a1d` | `#1a2b1f` | 1.11:1 | fail |
| `#2a1a1d` | `#f2f0ec` | 14.6:1 | AAA |
| `#645757` | `#eae6df` | 5.55:1 | AA |
| `#645757` | `#1d3023` | 2.03:1 | fail |
| `#645757` | `#1a2b1f` | 2.16:1 | fail |
| `#645757` | `#f2f0ec` | 6.06:1 | AA |
| `#f7f5f2` | `#eae6df` | 1.14:1 | fail |
| `#f7f5f2` | `#1d3023` | 12.87:1 | AAA |

### Gradients

- `linear-gradient(to top in oklab, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Arizona Flare Variable | `--font-body` | webfont | 350 | Body copy, captions, and supporting text across sections and cards. | Fraunces |
| ABC Arizona Flare Condensed Variable | `--font-display` | webfont | 400, 300 | Display headlines, section headings, and selected large editorial statements. | Bodoni Moda |

- **ABC Arizona Flare Variable:** Use the measured light-to-regular feel; body text is compact and editorial with subtly tight tracking.
- **ABC Arizona Flare Condensed Variable:** Light, narrow forms and close tracking create oversized, elegant headlines; display copy may use uppercase.

### Type scale — Golden Ratio (ratio ≈ 1.588, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 182px | 300 | 0.85 | -0.02em | uppercase | ABC Arizona Flare Condensed Variable | Oversized uppercase hero statement and brand-led editorial display. |
| h1 | 104px | 300 | 0.85 | -0.03em | — | ABC Arizona Flare Condensed Variable | Primary page or feature headlines, including major editorial statements. |
| h2 | 48px | 300 | 0.95 | -0.025em | — | ABC Arizona Flare Condensed Variable | Section headlines and prominent content titles. |
| h3 | 32px | 350 | 1.08 | -0.03em | — | ABC Arizona Flare Variable | Service and content-card headings. |
| h4 | 26px | 400 | 1.18 | -0.02em | — | ABC Arizona Flare Condensed Variable | Compact feature, guide, and supporting editorial titles. |
| body | 18px | 350 | 1.25 | -0.02em | — | ABC Arizona Flare Variable | Introductory paragraphs, service descriptions, and general copy. |
| caption | 15px | 350 | 1.18 | -0.02em | — | ABC Arizona Flare Variable | Small metadata, labels, episode details, and supporting notes. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 6, 8, 12, 16, 24, 32, 56, 64 px.
- Section rhythm 56px · element gap 8px · card padding 24px · max content width —.

The page alternates full-width visual moments with centered editorial content on a warm canvas. The service area uses a four-column image-led grid; other sections shift between broad text, a two-part guide feature, and a three-card podcast row. Alignment varies intentionally: centered introduction, left-aligned editorial blocks, and asymmetrical hero lettering. Sections have comfortable breathing room and clear separation, while cards keep their content compact. No measured maximum page width is specified, so preserve the screenshot’s broad canvas and content groupings rather than imposing an invented fixed width.

## Shape & elevation

- Radius: button `8px` · card `4px` · xs `4px` · sm `8px`
- Shadow `xl` (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(50, 50, 93, 0.1) 0px 50px 100px -20px`
- Shadow `xl-2` (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.05) 0px 30px 60px -30px`
- Motion: standard transition `0.15s linear` on interactive elements.

The interface is largely flat: color blocks, imagery, and typography establish hierarchy rather than deep shadows. Cards use restrained light surfaces and modest rounded corners, with measured card shadows limited to editorial content surfaces. Thin warm-gray borders separate sections; keep layering focused on the hero overlay and image-card captions.

## Imagery

Use soft-focus botanical photography as the recurring service-card motif, with vivid greens, yellow, pink, and violet appearing within the images rather than defining interface colors. The opening hero is an abstract, blurred green visual behind large type. Podcast content uses framed portrait imagery with dark lower overlays for readable captions, while the guide feature pairs a cover graphic with a dark green panel.

## Components

### Primary CTA

Bright green button with dark text, compact label, and a measured rounded treatment; reserve it for actions such as viewing jobs or downloading the guide.

### Statistic cards

A row of four warm, lightly tinted cards pairing prominent green figures with small explanatory copy.

### Service image grid

Four adjacent botanical-image cards with concise headings and supporting copy beneath each image.

### Podcast episode cards

Portrait-led cards arranged in a three-column row, with names and episode details legible over a dark image treatment.

### Guide feature

A wide deep-green panel combining a guide cover image, light editorial heading and copy, and a bright download action.

### Editorial text block

Large condensed headings paired with short, carefully spaced body copy on the warm canvas.

### Measured component styles

- **Primary button** (“View all jobs”): background #26d862 · text #1d3023 · radius 8px · padding 0px 24px · 400 16px ABC Arizona Flare Variable
- **Card** (“79% Relationships, built to last. Most o”): background #f2f0ec · text #2a1a1d · radius 4px · padding 24px · 400 16px ABC Arizona Flare Variable

## Do

- Use Warm Paper (#eae6df) as the primary page canvas.
- Keep Deep Forest (#1d3023) for dramatic full-width sections and guide surfaces.
- Reserve Spring Signal (#26d862) for clear actions and selective emphasis.
- Use the condensed face for display headlines and editorial section titles.
- Choose soft-focus, botanical imagery for service-oriented image cards.
- Let large blank areas and section breaks create a calm editorial rhythm.

## Don't

- Do not turn the page into a generic white SaaS dashboard.
- Do not use Spring Signal (#26d862) as a large, continuous page background.
- Do not crowd the warm canvas with dense borders or controls.
- Do not replace the narrow display typography with heavy geometric sans headings.
- Do not treat image colors as additional brand palette colors.
- Do not add deep shadows to every card or section.

## Agent prompt

Build a new editorial recruitment-consultancy page in Craft’s visual language. Use Warm Paper (#eae6df) as the principal canvas, with Deep Forest (#1d3023) for a dramatic hero or feature panel and Spring Signal (#26d862) only for primary actions or small emphasis. Use Burgundy Ink (#2a1a1d) for readable copy and pale text on dark green. Set display headings in a light, narrow editorial serif-like face and body text in a related expressive text face; keep tracking close and line lengths comfortable. Combine broad, quiet text sections with image-led grids, portrait cards, or a split guide feature. Favor soft-focus botanical photography, restrained card surfaces, hairline separators, and generous section breathing room. Keep hierarchy clear and decorative UI minimal; do not invent a fixed max width or extra palette colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark visual with oversized editorial text layered across it. | brand statement, immersive opening | deep green canvas, large pale typography, dark image overlay |
| 2 | other | Centered introductory statement on a warm canvas with supporting imagery and actions. | positioning statement, introductory actions | centered heading, green text highlights, light canvas |
| 3 | stats | Introductory copy followed by a four-column row of statistic cards. | proof points, metric scan | four-column cards, large figures, small captions |
| 4 | feature-grid | Section label and explanatory copy above a four-column image-led service grid. | career-path browsing, service discovery | botanical image cards, four-column layout, text below images |
| 5 | other | A compact centered job link beneath the service grid. | job discovery, direct navigation | centered link, bright green emphasis |
| 6 | video | Editorial section heading above a three-column row of episode cards. | episode discovery, editorial browsing | condensed heading, portrait cards, dark caption treatment |
| 7 | video | Three interview media cards arranged side by side. | watch interview, browse episodes | three-column media row, portrait imagery, caption overlays |
| 8 | feature-split | Wide deep-green panel split between guide artwork and editorial copy with a download action. | download guide, resource promotion | dark feature panel, cover image, green CTA |
| 9 | footer | Sparse contact action and centered brand sign-off on the warm canvas. | contact navigation, brand reminder | centered closing statement, ample open space |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #3858e9;
--wp-admin-theme-color--rgb: 56,88,233;
--wp-admin-theme-color-darker-10: #2145e6;
--wp-admin-theme-color-darker-10--rgb: 33.0384615385,68.7307692308,230.4615384615;
--wp-admin-theme-color-darker-20: #183ad6;
--wp-admin-theme-color-darker-20--rgb: 23.6923076923,58.1538461538,214.3076923077;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
```

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