---
version: alpha
name: Craft
description: A warm cream document canvas where an Untitled Serif display headline meets Untitled Sans body, soft pastel panels (mint, sky, peach, butter) carry the accents, and a forest-green wordmark anchors a workspace app that wants to feel handmade, not corporate.

colors:
  # Surface / canvas
  background: "#fcf9f7"          # warm off-white cream — the signature canvas, not pure white
  surface: "#ffffff"             # white cards floating on the cream
  surface-muted: "#f7f7f7"       # faint gray section bands and tiles
  surface-cream: "#fff3e7"       # warm peach-cream nested panels

  # Pastel accent panels — Craft's multi-color, low-saturation accent system
  accent-mint: "#9bd8a9"         # the hero panel green, soft and friendly
  accent-sky: "#b8caf5"          # soft periwinkle-blue panel
  accent-butter: "#fde99b"       # warm butter-yellow panel
  accent-peach: "#ffdbc5"        # soft peach panel

  # Brand accent — the singular forest green
  primary: "#3f8850"             # wordmark, primary CTA fill, accent labels (--color-green-4)
  primary-strong: "#2f6b3e"      # pressed / hover green
  on-primary: "#ffffff"

  # Saturated label dots (the rich-text color tags)
  tag-orange: "#b25620"          # --color-orange-4
  tag-red: "#bb433a"             # --color-red-4
  tag-blue: "#427e8a"            # --color-blue-4
  tag-purple: "#4b68c3"          # --color-purple-4
  tag-pink: "#a549ab"            # --color-pink-4

  # Ink / text
  ink: "#030302"                 # near-black headings and body
  ink-secondary: "#1f2225"       # supporting copy
  ink-muted: "#6b6b6b"           # captions, metadata, placeholder

  # Borders
  border: "#e1e1e1"              # hairline card edges and dividers
  border-soft: "#ededed"         # faintest internal dividers

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"         # was rgba(0,0,0,0.08) — Google format requires hex
  shadow-ambient: "#000000"      # was rgba(0,0,0,0.05) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Untitled Serif, ui-serif, Georgia, Cambria, serif"
    fontSize: 74px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -2.22px
  display:
    fontFamily: "Untitled Serif, ui-serif, Georgia, Cambria, serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.2px
  heading:
    fontFamily: "Untitled Serif, ui-serif, Georgia, Cambria, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.11
    letterSpacing: -1.44px
  heading-sub:
    fontFamily: "Untitled Serif, ui-serif, Georgia, Cambria, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.72px
  body-large:
    fontFamily: "Untitled Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.48px
  body:
    fontFamily: "Untitled Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-medium:
    fontFamily: "Untitled Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.16px
  caption:
    fontFamily: "Untitled Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  label:
    fontFamily: "Untitled Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 60px
  5xl: 96px
  6xl: 120px

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-strong}"
    textColor: "{colors.on-primary}"

  button-outline:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-outline-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 24px
  card-mint:
    backgroundColor: "{colors.accent-mint}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 10px 14px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.accent-mint}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 12px 24px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px

  tag:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  tag-green:
    backgroundColor: "{colors.accent-mint}"
    textColor: "{colors.primary-strong}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Craft Design System

## Overview

Craft's marketing site is a workspace app that refuses to look like enterprise software. The canvas isn't white — it's a warm cream (`{colors.background}`), the kind of off-white you'd find on good paper stock, and every surface that floats on top of it is a soft pebble-rounded card. The signature move announces itself immediately: a large mint-green panel (`{colors.accent-mint}`) holds the hero, and inside it the headline "Imagine the possibilities when everything's connected to Craft" is set in a genuine editorial **serif** (`{typography.display-hero}`) at 74px with aggressive negative tracking. A serif headline on a productivity tool is a deliberate, almost literary choice — it signals craft and care over cold efficiency.

The color story is a quiet rainbow. Rather than one loud brand accent, Craft uses a family of low-saturation pastel panels — mint (`{colors.accent-mint}`), periwinkle sky (`{colors.accent-sky}`), butter yellow (`{colors.accent-butter}`), and peach (`{colors.surface-cream}`) — to organize content into warm, blocky regions. The one true brand color is a deeper forest green (`{colors.primary}`) carried by the "CRAFT" wordmark, the primary "Try Craft Free" button, and accent labels. Underneath the pastels sits a richer set of rich-text tag colors (orange, red, blue, purple, pink) that echo the in-app document formatting palette, so the marketing site and the product feel like one continuous surface.

The geometry is friendly and generous. Cards round to 24px (`{rounded.2xl}`), buttons are fully pill-shaped (`{rounded.pill}`), and shadows are soft, multi-layered, and barely-there — content lifts off the cream like cards on a desk rather than panels in an app. Typography pairs the Untitled Serif display with Untitled Sans for body and UI, a combination that keeps the editorial warmth at the top while staying clean and readable in the supporting copy. The whole system reads as approachable, tactile, and human — a document app that wants to feel like a notebook.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`, `#fcf9f7`) — never pure white, the off-white is the brand
- **Untitled Serif** editorial display headlines (`{typography.display-hero}`) — a serif on a productivity tool, the central surprise
- Untitled Sans for body and UI (`{typography.body}`) — clean humanist sans beneath the serif
- A pastel-panel accent system: mint, sky, butter, peach — content blocked into soft color regions
- Single brand green (`{colors.primary}`, forest `#3f8850`) for wordmark, primary CTA, and accent labels
- Saturated rich-text tag colors (`{colors.tag-orange}`, `{colors.tag-purple}`…) mirror the in-app document formatting palette
- Fully pill-shaped buttons (`{rounded.pill}`) — soft and tactile, never sharp
- Generous 24px card radius (`{rounded.2xl}`) — pebble-rounded cards float on the cream
- Soft multi-layer shadows — content lifts gently, no hard edges
- 8px base spacing with a generous 60–120px section rhythm

## Colors

### Surface & Canvas
- **Cream** (`{colors.background}`): The warm off-white canvas. The defining background of the entire site — never pure white.
- **White** (`{colors.surface}`): Cards and panels that float on the cream.
- **Faint Gray** (`{colors.surface-muted}`): Section bands and neutral tile fills.
- **Peach Cream** (`{colors.surface-cream}`): Warm nested panels inside accent regions.

### Pastel Accent Panels
- **Mint** (`{colors.accent-mint}`): The hero panel green — the brand's most recognizable surface.
- **Sky** (`{colors.accent-sky}`) / **Butter** (`{colors.accent-butter}`) / **Peach** (`{colors.surface-cream}`): The supporting pastel panels that block content into warm color regions.

### Brand Accent
- **Forest Green** (`{colors.primary}`): The singular brand color — wordmark, primary CTA, accent labels.
- **Deep Green** (`{colors.primary-strong}`): Pressed/hover state for the green CTA.

### Rich-Text Tag Colors
- **Orange / Red / Blue / Purple / Pink** (`{colors.tag-orange}`, `{colors.tag-red}`, `{colors.tag-blue}`, `{colors.tag-purple}`, `{colors.tag-pink}`): Saturated document-formatting tag colors carried over from the in-app rich-text palette.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Headings and body — a true near-black, not gray.
- **Charcoal** (`{colors.ink-secondary}`): Supporting copy.
- **Muted Gray** (`{colors.ink-muted}`): Captions, metadata, and placeholder text.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Card edges and dividers.
- **Soft Divider** (`{colors.border-soft}`): The faintest internal separators.
- **Shadow tints** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`): Opaque stand-ins for the layered soft shadows (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display**: `Untitled Serif` — an editorial serif (Klim Type Foundry), with fallbacks `ui-serif, Georgia, Cambria, serif`. Carries all large headlines.
- **Body / UI**: `Untitled Sans` — a clean humanist sans (also Klim), with fallbacks `Inter, -apple-system, system-ui, sans-serif`. Carries body copy, UI labels, and buttons.
- **OpenType / tracking**: display sizes use heavy negative tracking (-2.22px at 74px); body stays near-zero. `"liga"` ligatures on throughout.

### Hierarchy

The full type scale lives in the `typography:` token block.

| Token | Use |
|---|---|
| `display-hero` | 74px / serif / -2.22px — the marquee headline |
| `display` | 60px / serif — large section titles |
| `heading` | 36px / serif — feature headings |
| `heading-sub` | 24px / serif — sub-section headings |
| `body-large` | 24px / sans — lead paragraphs and intros |
| `body` | 16px / sans / 400 — standard body and inputs |
| `body-medium` | 16px / sans / 500 — emphasized body, UI |
| `caption` | 14px / sans — metadata, helper text |
| `label` | 13px / sans / 500 — button text, tags, UI labels |

### Principles
- **Serif on top, sans below**: the editorial serif owns every headline; the humanist sans does all the reading work. The pairing is the voice.
- **Tighten the big, leave the small**: heavy negative tracking on serif display; near-zero on sans body.
- **Stay at 400/500**: the system rarely goes bold — weight is carried by size and the serif's natural presence.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step for tight internals. Section rhythm is generous (`{spacing.4xl}`–`{spacing.6xl}`, 60–120px) so the cream canvas can breathe between blocky color panels.

### Grid & Container
- Max content width: ~1200px, centered
- Common pattern: a large rounded accent panel (mint) anchoring the hero, with smaller white cards arranged inside or beside it
- Feature blocks are organized into pastel-colored regions rather than uniform white rows

### Whitespace Philosophy
- **The cream is the design**: warm negative space, not white, frames everything
- **Blocks, not lines**: content is grouped into soft rounded color panels, not separated by rules
- **Tactile, not flat**: soft shadows give cards a gentle physical lift off the page

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Section bands, inline content |
| Subtle (Level 1) | `0 1px 3px` at ~10% black | Resting buttons, small chips |
| Card (Level 2) | `0 4px 6px -1px` + `0 2px 4px -2px` at ~10% black | Standard floating cards |
| Elevated (Level 3) | Layered: `0 50px 40px` ambient + `0 20px 40px` mid + `0 3px 10px` contact, all very low opacity (`{colors.shadow-soft}`) | Hero panels and featured cards — the signature soft lift |

**Shadow Philosophy**: Craft's shadows are soft, wide, and stacked at very low opacity — they read as ambient room light rather than hard drop shadows. The effect makes every card feel like a physical object resting on warm paper. Nothing has a crisp edge; the depth is gentle and diffuse, reinforcing the handmade, notebook-like personality.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Tiny inline chips, nested elements |
| `md` | 8px | Small buttons, secondary controls |
| `lg` | 12px | Inputs, mid containers |
| `xl` | 16px | Standard cards |
| `2xl` | 24px | Hero panels and featured cards — the signature radius |
| `pill` | 9999px | Buttons, tags, avatars |

The system trends large and soft: cards round to 24px and buttons go fully pill. There are no sharp corners anywhere — roundness is the brand's friendliness made geometric.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Forest green (`{colors.primary}`) fill, white text, fully pill. The "Try Craft Free" CTA. Hover deepens to `{colors.primary-strong}`.
- **`button-outline`** — White fill, near-black text, pill. The "Learn more" secondary pattern. Hover fills `{colors.surface-muted}`.

### Cards
- **`card`** — White surface, hairline border, 24px radius, soft layered shadow.
- **`card-mint`** — Mint (`{colors.accent-mint}`) fill, 24px radius — the colored-panel variant that blocks content into warm regions.

### Inputs
- **`input`** — White fill, hairline border, 12px radius. **`input-focus`** keeps the calm aesthetic with a subtle border darken rather than a loud ring.

### Navigation
- **`nav-bar`** — Sits on the mint hero panel (`{colors.accent-mint}`) with the green wordmark and sans UI labels; rounded and integrated rather than a separate bar.

### Links & Tags
- **`link`** — Forest green text.
- **`tag`** — Neutral gray pill for default labels; **`tag-green`** uses the mint fill with deep-green text, echoing the in-app rich-text formatting tags.

## Do's and Don'ts

### Do
- Build on the warm cream canvas (`{colors.background}`, `#fcf9f7`) — never pure white
- Set headlines in the **Untitled Serif** display (`{typography.display-hero}`) — the serif is the brand's voice
- Use the pastel panels (`{colors.accent-mint}`, `{colors.accent-sky}`, `{colors.accent-butter}`) to block content into warm color regions
- Reserve the forest green (`{colors.primary}`) for the wordmark, primary CTA, and accent labels
- Make buttons fully pill-shaped (`{rounded.pill}`) and cards generously rounded (`{rounded.2xl}`)
- Keep shadows soft, wide, and low-opacity — ambient lift, not hard drop shadows
- Pair the serif display with Untitled Sans (`{typography.body}`) for all reading and UI text

### Don't
- Don't use a stark white background — the warm cream is non-negotiable
- Don't set headlines in a sans-serif — the editorial serif is the whole point
- Don't introduce sharp corners — every surface is rounded, buttons are pills
- Don't make the green loud or fill large areas with it — it's a wordmark/CTA accent, the pastels carry the color
- Don't use hard, dark drop shadows — keep elevation diffuse and gentle
- Don't go bold-heavy — the system lives at 400/500, letting size and the serif carry hierarchy
- Don't separate content with hard rules — group it into soft rounded panels instead

---

## Responsive Behavior

### Breakpoints
*(No explicit breakpoints surfaced in extraction; the values below are the standard stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; serif hero scales 74px → ~40px; the mint hero panel goes full-bleed; cards stack |
| Tablet | 640–1023px | Two-column card arrangements begin inside accent panels |
| Desktop | 1024–1279px | Full layout; hero panel with nested card grid |
| Large | ≥1280px | Max ~1200px container, centered; generous 60–120px section padding |

### Touch Targets
- Pill buttons run ~40px tall with `10px 20px` padding — comfortable and thumb-friendly
- Tags and chips keep generous padding for tap legibility

### Collapsing Strategy
- **Panels**: the hero mint panel and pastel regions go full-bleed and stack vertically on mobile
- **Hero**: serif headline scales down while keeping its proportional negative tracking
- **Spacing**: section padding compresses from ~120px toward ~48px

### Image Behavior
- App screenshots and product cards sit inside rounded white containers and reflow as grid children, keeping their soft corners

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Cream (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`)
- Brand accent: Forest Green (`{colors.primary}`)
- Hero panel: Mint (`{colors.accent-mint}`)
- Secondary text: Muted Gray (`{colors.ink-muted}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Forest Green (`{colors.primary}`), pill-shaped

### Example Component Prompts

- "Create a hero as a large mint (`{colors.accent-mint}`) panel rounded to `{rounded.2xl}` on a cream (`{colors.background}`) page, with a 74px near-black (`{colors.ink}`) Untitled Serif headline, letter-spacing -2.22px, and a pill-shaped forest-green (`{colors.primary}`) 'Try Craft Free' button"
- "Build a primary button: forest-green (`{colors.primary}`) fill, white text, fully pill (`{rounded.pill}`), `10px 20px` padding, hover deepens to `{colors.primary-strong}`"
- "Build a secondary button: white (`{colors.surface}`) fill, near-black text, pill radius, hover fills `{colors.surface-muted}` — the 'Learn more' pattern"
- "Create a floating card: white (`{colors.surface}`) surface, hairline (`{colors.border}`) edge, `{rounded.2xl}` radius, soft layered shadow (wide low-opacity stack), `24px` padding"
- "Design a colored content panel using `{colors.accent-sky}` or `{colors.accent-butter}` rounded to `{rounded.2xl}` to block a feature region into a warm color zone"
- "Render a rich-text tag: mint (`{colors.accent-mint}`) fill, deep-green (`{colors.primary-strong}`) text, pill radius, `4px 12px` padding"

### Iteration Guide

1. Start on warm cream (`{colors.background}`, `#fcf9f7`). If you used pure white as the page background, you've lost the brand — switch it.
2. Headlines must be Untitled Serif (`{typography.display-hero}`). If your headline is a sans-serif, replace the font.
3. Use the pastel panels (mint/sky/butter/peach) to organize content into soft color blocks — don't leave everything on flat cream.
4. The forest green (`{colors.primary}`) is for the wordmark, the primary CTA, and accent labels only — keep it from dominating.
5. Round everything: cards to `{rounded.2xl}`, buttons to `{rounded.pill}`. No sharp corners.
6. Shadows stay soft, wide, and low-opacity — ambient lift, never hard dark drops.
7. Keep weights at 400/500 and let the serif plus size carry the hierarchy.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Craft. Brand names and trademarks belong to their respective owners.