What is Craft's primary brand color?

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.

What font does Craft use, and what should I substitute?

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.

Why does Craft use full-pill buttons but 24px-radius cards?

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'.

How are the pastel block tints actually used?

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.

Can I use this DESIGN.md to build a React notes app?

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.

What's missing from this DESIGN.md spec?

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.

Craft Design System

Craft Docs as a DESIGN.md file.

About Craft DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source craft.do

Productivity & SaaS
Documentation & Knowledge

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.

What makes it distinct

Serif-led display voiceUntitledSerifFont 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 whiteevery 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 paddingthe only saturated surface on the page
Five pastel block tintsmint '#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 radiifeature cards and inputs land at 24px, secondary tiles at 14px, buttons go full-pill

Live at craft.do

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

craft.do

Explore Craft

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Craft design system FAQ

Common questions about Craft's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Craft — official site

The marketing surface this DESIGN.md was extracted from, including the document hero, feature cards, and pricing surface.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Craft in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→