---
version: alpha
name: Craft
website: "https://www.craft.do"
description: >-
  Craft is a personal notes and documents app whose marketing surface reads as a stationery page rather than a SaaS dashboard. The system runs an editorial UntitledSerifFont at 66px for the hero "Your space for notes, tasks, and big ideas", a UntitledSansFont workhorse for every UI surface, a near-black "#030302" pill primary CTA on a warm beige "#fcf9f7" canvas, and a vocabulary of pastel block tints — mint "#9bd8a9", amber "#fde99b", periwinkle "#b8caf5", sky "#9ed4ef", peach "#ffdbc5" — that fill full-bleed feature cards rather than decorating them.
seo:
  title: "Craft Design System for React — UntitledSerif, beige #fcf9f7, 19 components"
  metaDescription: "Craft Docs as a DESIGN.md file. UntitledSerif hero, beige #fcf9f7 canvas, black pill CTA #030302, pastel feature blocks. For React, Next.js, and AI tools."
  highlights:
    - "Serif-led display voice — UntitledSerifFont at 66px for the hero, 54px for section heads, 32px for pull-quotes — sans is reserved for chrome"
    - "Warm beige canvas at '#fcf9f7' replaces the default white — every component sits on a slightly off-white ground that reads as paper, not screen"
    - "Black pill primary CTA at '#030302' with full radius and 8px×14px padding — the only saturated surface on the page"
    - "Five pastel block tints — mint '#9bd8a9', amber '#fde99b', periwinkle '#b8caf5', sky '#9ed4ef', peach '#ffdbc5' — each used as a full-bleed feature card, never as decoration"
    - "24px and 14px the two dominant radii — feature cards and inputs land at 24px, secondary tiles at 14px, buttons go full-pill"
  tags:
    - "Productivity & SaaS"
    - "Documentation & Knowledge"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Craft's marketing page is shaped like the product it sells. The hero opens with a serif headline — "Your space for notes, tasks, and big ideas" — set in UntitledSerifFont at 66px with a -1.98px optical-tracking tightening, floating above a soft sky-illustration band and a real document mockup that shows a checkbox list, colored row blocks, and a tag chip in mint. Below the fold, the page hands off the editorial register to a UntitledSansFont workhorse and a vocabulary of pastel block cards. The dominant action is a single near-black pill — "Try Craft Free" at "#030302" with full corner radius — and every supporting surface, from the navbar tabs to the testimonial card, walks the warm beige floor at "#fcf9f7" rather than white.

    This DESIGN.md packages that whole spec into one machine-readable file built on the Google Labs DESIGN.md format. Inside: 21 color tokens covering the beige canvas, the near-black ink ramp, five pastel block tints, two semantic blues, and a chart palette; 12 typography tokens grouped into a serif display ladder (66/54/46/32/24px) and a sans body ladder (20/18/16/15/14/13/12px) with the matching weights and -0.32 to -1.98px letter-spacing; 7 corner radii from 4px chips through 32px hero illustrations and a full-pill token; 9 spacing values walking the dominant 4 and 8px grid; and 19 components covering buttons, the serif hero block, the document mockup card, pastel feature blocks for each tint, person testimonial cards, a navbar with announcement badge, and the footer.

    A working React developer drops this file into Claude, Cursor, or GitHub Copilot and gets components that match Craft's specific moves — serif display with negative tracking, beige canvas instead of white, pastel block cards as feature surfaces, one black pill CTA per page — rather than a default shadcn theme. Reference the tokens directly inside Tailwind config, CSS variables, or your own component library. The system is worth studying for one reason: it shows that a productivity app can carry an editorial voice without falling into either fintech-blue restraint or workspace-tool maximalism.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.craft.do"
      title: "Craft — official site"
      description: "The marketing surface this DESIGN.md was extracted from, including the document hero, feature cards, and pricing surface."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Craft's primary brand color?"
      answer: "Craft's primary brand surface is near-black ink at '#030302', not a saturated accent — the hex ships through 17 CSS custom properties including --primary, --foreground, and --border, and carries every primary CTA, body text run, and 1px hairline. The brand voltage is split across five pastel block tints instead: mint '#9bd8a9' for testimonial and infrastructure cards, amber '#fde99b' for note-page mockups, periwinkle '#b8caf5' for the document feature block, sky '#9ed4ef' for hero atmosphere, and peach '#ffdbc5' for warmth callouts. The canvas itself is a warm beige '#fcf9f7' that replaces the default white floor."
    - id: "typography"
      title: "What font does Craft use, and what should I substitute?"
      answer: "Craft runs two custom typefaces: UntitledSerifFont for editorial display (h1 at 66px, h2 at 54px, h3 at 46px, blockquote pull-quotes at 32px) and UntitledSansFont for every UI surface — buttons, nav links, body paragraphs, captions. The display ladder uses weight 400 with -1.08px to -1.98px optical tracking; the sans ladder runs 400 and 500 with -0.32px to -0.6px. Both are Klim Type Foundry families. The closest substitutes are Tiempos Headline or Source Serif Pro for UntitledSerif, and Inter or Söhne for UntitledSans."
    - id: "shape-language"
      title: "Why does Craft use full-pill buttons but 24px-radius cards?"
      answer: "The shape language is split deliberately. Primary buttons render full-pill at '3.35544e+07px' effective radius (Tailwind's rounded-full), 8px×14px padded, 36px tall — soft enough to feel like stationery accessories rather than utility controls. Feature cards and document mockups land at 24px (85 occurrences in the extraction), the most common radius across the page; secondary tiles use 14px (54 occurrences). Avatar circles and status chips also go full-pill. The pattern reads as 'soft for everything you touch, structured for everything you read'."
    - id: "pastel-blocks"
      title: "How are the pastel block tints actually used?"
      answer: "Each pastel tint is reserved for a single feature-block role on the homepage rather than a free-floating decorative palette. Mint '#9bd8a9' carries the green testimonial-and-perks card at the page bottom. Amber '#fde99b' fills the note-page mockup band that demonstrates document tagging. Periwinkle '#b8caf5' surrounds the centerpiece 'From first thought to final form' editor block. Sky '#9ed4ef' is the hero atmosphere wash. Peach '#ffdbc5' lands on a single warmth callout. The discipline is one-tint-per-block — Craft never combines two pastels in the same surface."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a React notes app?"
      answer: "Yes. The file is structured for AI consumption — drop it into Claude, Cursor, or Copilot and the agent will reproduce Craft's serif-display-plus-sans-chrome split, beige canvas, one-pastel-per-block discipline, and full-pill black CTA instead of a default shadcn theme. Every hex (the near-black '#030302', beige '#fcf9f7', five pastels), every radius (4/14/24/32px plus full-pill), every typography token, and every component padding value is a quoted token ready to paste into Tailwind config, CSS variables, or your own component library."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "A short list, documented in the Known Gaps section. UntitledSans and UntitledSerif are licensed Klim faces with no public web-font CDN — substitutes are listed but proportions vary. The Craft app's in-product chat surface, document outline rail, and slash-command menu are not part of the marketing capture. Animation and transition timings were not extracted; the default 150ms cubic-bezier is a safe starting point. The chart palette (red, teal, amber, blue) appears in CSS custom properties but isn't rendered on the page, so role mapping is inferred."

colors:
  ink: "#030302"
  ink-soft: "#1f2225"
  ink-faint: "#363634"
  on-ink: "#ffffff"
  canvas: "#fcf9f7"
  surface-card: "#ffffff"
  surface-muted: "#fff3e7"
  surface-blue-soft: "#dbedfe"
  hairline: "#e1e1e1"
  block-mint: "#9bd8a9"
  block-mint-deep: "#2f7a43"
  block-amber: "#fde99b"
  block-periwinkle: "#b8caf5"
  block-sky: "#9ed4ef"
  block-peach: "#ffdbc5"
  link-blue: "#0087ff"
  accent-blue-soft: "#54a3ff"
  semantic-warning: "#dfb720"
  semantic-warning-deep: "#987e1b"
  semantic-error: "#bb433a"
  chart-orange: "#ff4500"

typography:
  display-hero:
    fontFamily: "UntitledSerifFont, Tiempos Headline, Georgia, serif"
    fontSize: 66px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: "-1.98px"
  display-lg:
    fontFamily: "UntitledSerifFont, Tiempos Headline, Georgia, serif"
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: "-1.08px"
  display-md:
    fontFamily: "UntitledSerifFont, Tiempos Headline, Georgia, serif"
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: "-1.38px"
  pull-quote:
    fontFamily: "UntitledSerifFont, Tiempos Headline, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-1.28px"
  serif-md:
    fontFamily: "UntitledSerifFont, Tiempos Headline, Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: "-0.72px"
  body-lg:
    fontFamily: "UntitledSansFont, Inter, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: "-0.6px"
  body-md:
    fontFamily: "UntitledSansFont, Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "-0.36px"
  body-sm:
    fontFamily: "UntitledSansFont, Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: "-0.32px"
  body-sm-medium:
    fontFamily: "UntitledSansFont, Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "-0.32px"
  ui-md:
    fontFamily: "UntitledSansFont, Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  ui-md-medium:
    fontFamily: "UntitledSansFont, Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  caption-uppercase:
    fontFamily: "UntitledSansFont, Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: "0.14px"

rounded:
  xs: "4px"
  sm: "8px"
  md: "14px"
  lg: "24px"
  xl: "32px"
  full: "9999px"

spacing:
  xxs: "4px"
  xs: "6px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "60px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-sm-medium}"
    rounded: "{rounded.full}"
    padding: "8px 14px"
    height: "36px"
    border: "1px solid {colors.ink}"
  button-primary-hover:
    backgroundColor: "{colors.ink-soft}"
    textColor: "{colors.on-ink}"
    border: "1px solid {colors.ink-soft}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm-medium}"
    rounded: "{rounded.full}"
    padding: "8px 14px"
    height: "36px"
    border: "1px solid {colors.hairline}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    padding: "0"
    border: "0"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    padding: "12px 24px"
    border: "0 0 1px {colors.hairline} solid"
  announcement-badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.ui-md}"
    rounded: "{rounded.full}"
    padding: "0 12px"
    height: "28px"
  card-document:
    backgroundColor: "{colors.surface-card}"
    rounded: "{rounded.lg}"
    padding: "{spacing.xl}"
    border: "1px solid {colors.hairline}"
  card-feature-mint:
    backgroundColor: "{colors.block-mint}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "{spacing.2xl}"
    border: "0"
  card-feature-amber:
    backgroundColor: "{colors.block-amber}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "{spacing.2xl}"
    border: "0"
  card-feature-periwinkle:
    backgroundColor: "{colors.block-periwinkle}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "{spacing.2xl}"
    border: "0"
  card-feature-sky:
    backgroundColor: "{colors.block-sky}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "{spacing.2xl}"
    border: "0"
  card-feature-peach:
    backgroundColor: "{colors.block-peach}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "{spacing.2xl}"
    border: "0"
  card-testimonial:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.pull-quote}"
    rounded: "{rounded.lg}"
    padding: "{spacing.2xl}"
    border: "1px solid {colors.hairline}"
  card-person:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.ui-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.base}"
    border: "1px solid {colors.hairline}"
  avatar-round:
    backgroundColor: "{colors.surface-muted}"
    rounded: "{rounded.full}"
    height: "48px"
  tag-chip-mint:
    backgroundColor: "{colors.block-mint}"
    textColor: "{colors.block-mint-deep}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.xs}"
    padding: "2px 6px"
  text-input:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "8px 12px"
    height: "40px"
    border: "1px solid {colors.hairline}"
  footer-region:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.ui-md}"
    padding: "60px 24px"
    border: "1px solid {colors.hairline}"
  footer-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-faint}"
    typography: "{typography.ui-md}"
    padding: "4px 0"
    border: "0"
---

## Overview

Craft's homepage is staged as a stationery page rather than a product dashboard. The hero opens with a serif headline — "Your space for notes, tasks, and big ideas" — set in UntitledSerifFont at 66px with -1.98px optical tightening, floating over a soft sky-and-cloud illustration band. A real document mockup card breaks below the headline showing a checkbox list, colored row blocks, and a mint tag chip — the visual proof that the marketing page mirrors the actual editor. The dominant action is a single near-black pill, "Try Craft Free" at "#030302" with full corner radius, 36px tall, 8px×14px padded. Every secondary surface walks a warm beige floor at "#fcf9f7" rather than a default white.

**Paper-canvas voltage**: where most note-taking marketing sites default to "#ffffff" and let saturated brand color do the work, Craft inverts the convention — the canvas itself is a tinted "#fcf9f7" beige (shipped through `--background` and `--color-beige` CSS variables, 4 distinct cream tones clustered into one perceptual token), and the brand voltage is reserved for pastel feature blocks. **One-pastel-per-block**: mint "#9bd8a9" carries the bottom infrastructure card, amber "#fde99b" fills the note-page mockup, periwinkle "#b8caf5" surrounds the centerpiece editor block, sky "#9ed4ef" washes the hero, peach "#ffdbc5" lands on a single warmth callout — Craft never combines two pastels in the same surface.

**Key Characteristics:**
- Warm beige canvas "#fcf9f7" replaces the default white floor across every viewport
- UntitledSerifFont display ladder (66/54/46/32/24px) with -1.08px to -1.98px optical tracking; UntitledSansFont reserved for chrome
- Near-black "#030302" carries text, hairlines, and the pill primary CTA — 17 CSS custom properties share the same hex
- Five pastel block tints, one per feature surface — mint, amber, periwinkle, sky, peach
- Full-pill primary button on a 36px height, paired with 1px hairline secondary
- 24px the dominant radius (85 occurrences) for feature cards and document mockup; 14px for secondary tiles
- Document mockup card embedded directly in the hero, not abstracted into an illustration
- Spring promo strip with serif body running "Spring Deal → Get 40% off Craft Plus and Family"
- No saturated brand voltage anywhere — the only saturated hex on the page is `link-blue` "#0087ff" at 3 occurrences

## Colors

- **Ink (`#030302`)** — frequency 1740. Used as text (742), border (989), background (6). The dominant ground for every body run, hairline, and the pill CTA fill — 17 CSS custom properties resolve to this one hex including `--primary`, `--foreground`, `--border`, and `--ring`. Near-black rather than pure black: the oklch lightness 0.096 with a faint 107° hue carries a sliver of warmth into the text.
- **Canvas beige (`#fcf9f7`)** — clustered from 4 near-white cream tones into one perceptual token, bg 20. Ships as `--background` and `--color-beige`. The paper-tinted floor that replaces white across every viewport.
- **Surface card white (`#ffffff`)** — used inside the cluster above. Reserved for the document mockup, testimonial card, and inputs — the white-on-beige two-step is the page's primary depth signal in place of shadows.
- **Mint block (`#9bd8a9`)** — frequency 8. Used as bg (8). The bottom "Imagine the possibilities" infrastructure card, plus the inline tag chip in the document hero — paired with `#2f7a43` deep-green text for accessible contrast.
- **Amber block (`#fde99b`)** — frequency 5. Used as bg (5). The note-page mockup band that demonstrates document tagging — shipped as `--color-amber-200` rather than a custom token.
- **Periwinkle block (`#b8caf5`)** — frequency 3. Used as bg (3). Surrounds the centerpiece "From first thought to final form" editor block, the page's most prominent pastel surface.
- **Sky block (`#9ed4ef`)** — frequency 2. Used as bg (1), gradient (1). The hero atmosphere wash — fades into the cloud illustration above the document mockup.
- **Peach block (`#ffdbc5`)** — frequency 1. Used as bg (1). Reserved for a single warmth callout — the rarest pastel, narrated as an exception rather than a workhorse.
- **Hairline (`#e1e1e1`)** — frequency 27. Used as border (27). The 1px stroke that separates cards from the beige floor — ships as `--sidebar-border`, `--color-zinc-200`, and `--color-neutral-200`.
- **Link blue (`#0087ff`)** — frequency 3. Used as text (3). The only saturated link voltage on the page; reserved for inline anchors, never CTA fill.

## Typography

Craft runs two custom typefaces in a strict role split. UntitledSerifFont — Klim Type Foundry's editorial serif — carries every display tier from the 66px hero down through the 54px section heads, the 46px h3, the 32px blockquote, and the 24px feature subheads. UntitledSansFont — the matching humanist sans — handles every UI surface: buttons, nav links, body paragraphs, captions, the ui-md 14px chrome run. The split is doctrinal; the serif never appears in a button, and the sans never appears in a display heading.

The display ladder uses weight 400 exclusively. The 66px hero ships with -1.98px optical tightening (-3% of em), the 54px h2 with -1.08px, the 32px pull-quote with -1.28px — the negative tracking is non-negotiable, because at weight 400 the serif needs the optical compression to read as confident rather than airy. The sans ladder runs weights 400 and 500 with -0.32px to -0.6px tracking; body-md (18/500) and body-sm (16/400) carry most of the page copy. If UntitledSerif is unavailable, Tiempos Headline or Source Serif Pro are the closest substitutes; for UntitledSans, Inter or Söhne match the proportions.

## Layout

The page is a single 1440px-anchored column with a centered hero and alternating block sections below. Section rhythm is driven by a "3xl" 60px spacing token (19 occurrences) rather than a fluid scale; padded card interiors use the 16/24/32px base 8 ladder (33, 44, and 14 occurrences respectively). Where most note-taking marketing pages dump a six-column feature grid below the hero, Craft alternates one tall pastel block, one document-mockup tile, and one testimonial row — the visual cadence reads as a long-form magazine layout rather than a marketing template. The 8px atomic spacing unit shows up 55 times and anchors every chip, button, and input padding.

## Elevation & Depth

Shadows are nearly absent. The captured CSS surfaces a single drop-shadow-sm utility — `0 1px 2px` at 15% opacity black — but the rendered homepage uses it sparingly; depth on the page is carried instead by the **two-step canvas ladder**: beige "#fcf9f7" as the floor, white "#ffffff" as the elevated card, separated by a 1px "#e1e1e1" hairline. The document mockup in the hero, the testimonial card, the person tiles, and the inputs all share the same elevation pattern — white surface, hairline border, 24px radius, no shadow. The only place a heavier shadow appears is the hero-bottom-blur gradient that fades the document mockup into the section below.

## Shapes

Two radii do the structural work. **24px feature cards** (85 occurrences) carry the document mockup, every pastel block, and the testimonial card — soft enough to feel like paper rather than panels. **14px secondary tiles** (54 occurrences) carry inputs, person cards, and chip groups. Buttons go full-pill at the effective `3.35544e+07px` Tailwind `rounded-full` token (26 occurrences shared with avatar circles); the 4px chip (26 occurrences) handles tag chips and tiny status pills. 32px (13) wraps hero illustrations, 16px (11) and 8px (10) handle minor controls, and 12px (8) handles segment tabs.

## Components

19 components cover the marketing surface end-to-end. `button-primary` ships the page's signature near-black pill — "#030302" fill, white text, full radius, 8×14px padded, 36px tall, body-sm-medium type. `button-primary-hover` darkens to "#1f2225". `button-secondary` runs transparent on a hairline border with no fill change on hover. `top-nav` is a 12×24px-padded beige strip with a 1px hairline divider below. `announcement-badge` is the spring-deal black pill at 28px height. `card-document` is the white mockup container with hairline border and 24px radius. The five `card-feature-*` components (mint, amber, periwinkle, sky, peach) share padding and radius but swap only `backgroundColor` — the canonical inheritance pattern. `card-testimonial` uses the pull-quote 32px serif type with -1.28px tracking. `card-person` and `avatar-round` cover the testimonial-strip people cards. `tag-chip-mint` pairs the mint background with the deep-green "#2f7a43" text. `text-input` is the 14px-rounded, 40px-tall white field. `footer-region` and `footer-link` close the page on the beige canvas.

## Do's and Don'ts

**Do** keep the canvas tinted: "#fcf9f7" is the page floor; use pure white only inside cards and inputs. Switching the canvas to "#ffffff" collapses the depth pattern because the cards then have nothing to lift off.

**Do** reserve "#030302" for text, hairlines, and the one pill CTA. The hex resolves through 17 different `--*` custom properties on purpose — the system trusts a single near-black to carry every dark surface.

**Do** keep pastels one-per-block. Each tint is doctrinally scoped to a single feature card; combining mint and amber in the same surface breaks the "stationery page" reading.

**Don't** apply the pastel block tints as text or border colors — every pastel in the extraction registers as `bg` (mint 8/0/0, amber 5/0/0, periwinkle 3/0/0). For accessible-contrast text on a mint block, use `block-mint-deep` "#2f7a43"; for amber and peach, fall back to ink "#030302".

**Don't** swap the serif into buttons or the sans into display headings. Where most workspace brands run one humanist sans across every tier, Craft's role split is what makes the marketing page read as editorial rather than utility — collapsing it returns the page to a generic SaaS feel.

**Don't** add a drop shadow to feature cards. The page intentionally uses the beige-to-white canvas ladder instead of elevation; a `box-shadow` on a pastel block reads as web 2.0 and immediately breaks the paper register.

**Don't** soften the negative letter-spacing on the serif display. The 66px hero ships with -1.98px tracking for a reason — at weight 400, removing the optical compression makes the headline read as airy and uncertain.

## Known Gaps

- UntitledSans and UntitledSerif are licensed Klim faces with no public web-font CDN — substitutes (Inter, Tiempos Headline, Source Serif Pro) are close but not exact.
- The Craft app's in-product chat surface, slash-command menu, document outline rail, and right-side properties panel are not part of this marketing capture.
- Animation and transition timings were not extracted; the default `--default-transition-duration: 0.15s` is a safe starting point.
- The chart palette (`--chart-1` through `--chart-5`) is declared in CSS custom properties but not rendered on the homepage; role mapping is inferred from the variable names rather than visual confirmation.
- Dark-mode tokens are not surfaced — the marketing page is light-only.