Craft Design System
Light · Generated 19/04/2026 · 57 colors · 64 type tokens · 32 spacing steps · 5 motion tokens
v1.0.0
Color Palette
Core Blacks & Whites
Black (×3646)
#000000
Black 2 (×2056)
#030302
Black 5
#020202
Black 8
#050500
Dark Gray (×34)
#1F2225
Dark Gray 4
#1A1A1A
White (×375)
#FFFFFF
White 2
#F5F5F7
Soft Tints (document block colors)
Light Green (×13)
#9BD8A9
Light Yellow (×6)
#FDE99B
Light Blue (×6)
#DBEDFE
Light Orange (×6)
#FFEDD4
Light Blue 2 (×5)
#B8CAF5
Light Cyan (×3)
#9ED4EF
White 3
#FFF3E7
White 5
#FCF9F7
Accent, Brand & Status Colors
Blue (×14)
#0087FF
Blue 2
#0C3CC0
Blue 3
#54A3FF
Yellow (×6)
#DFB720
Yellow 2
#987E1B
Orange (×6)
#FF8904
Red
#E01E5A
Cyan
#36C5F0
Neutral Scale
Light Gray (×27)
#E1E1E1
Light Gray 2
#D9D9D9
Light Gray 3
#D2D2D2
Mid Gray (×8)
#B1B1B1
Light Gray 5
#EFEFEF
Light Gray 6
#F0F0F0
Light Gray 7
#F2F2F2
Typography
UntitledSansFont · apple-system fallback
Untitled Sans
Write. Think. Organize. Craft is the document editor that lets you work the way your mind does — seamlessly and beautifully.
Regular 400 Medium 500 Semibold 600 Bold 700
UntitledSerifFont · editorial display
Untitled Serif
The editor that respects the way you think.
Regular 400 Semibold 600
Write, Think, Craft
Display 62px · Bold · Untitled Sans · line-height: 61.6px · letter-spacing: −2.48px (tightest in series)
The thinking editor
Display Serif 50px · Bold Italic · Untitled Serif · line-height: 51.24px · letter-spacing: −1.68px
Docs and Notes Editor
Heading 36px · Bold · line-height: 40px · letter-spacing: −1.44px
Beautiful documents, powerful tools
Heading 24px · Semibold · line-height: 28.8px · letter-spacing: −1.08px
Craft is the documents and notes editor designed for creative professionals. Combine text, images, code, and tasks in one beautiful canvas.
Body · 15px · Regular · line-height: 22.5px · letter-spacing: −0.4px
Last edited 5 minutes ago · 2,341 words
Caption · 13px · Regular · line-height: 19.5px · letter-spacing: −0.32px
DOCUMENTS · NOTES · TASKS · BOARDS
Micro Label · 9.5px · Semibold · caps · letter-spacing: +0.16px
Tightest letter-spacing in this series: Craft's --letter-spacing-tight: −2.48px is the most negative across all 21 brands — exceeding Pitch's −1.6px and Zapier's −1.6px. The system has 20 letter-spacing tokens total (17 negative, 3 positive from +0.126px to +0.16px) — the deepest letter-spacing system in the series. One unique token is --letter-spacing-wide: −1.65% expressed as a percentage rather than px — the only percentage-based letter-spacing token across all brands.
Line Heights
Tight
12.5px
Snug
14.25px
Normal
16px
LH-6
19.5px
LH-8
22.4px
LH-12
28.8px
LH-14
40px
LH-16
48px
LH-18
55px
LH-19
61.6px
Letter Spacing
Craft
Tight · −2.48px
Tightest in series · 62px display
Documents
Normal · −1.68px
Heading tight · 36–42px
Editor
LS-10 · −0.4px
Body medium · 18–20px
NOTES
LS-16 · +0.16px
Micro caps · 9.5–10px only positive token
Spacing
Spacing Scale
32 tokens — 2px → 395.836px · Dense small values, massive fractional computed tokens at the top end. --space-32: 310px is the largest raw spacing value across all 21 brands.
2
3
4
5
6
8
10
12
13
14
20
24
32
40
48
60
80
96
106.5
120
138.7
180
188
213.5
281.5
307.0
310
329.0
395.8
Borders
Border Radii
SM
4px
MD
8px
LG
10px
XL
12px
Full (14px)
14px
R9
20px
R10
24px
R12
32px
Scientific pill
1.67772e+07px
--radius-r13: 1.67772e+07px — Craft's 1.67772e+07px (16,777,200px) is the browser-computed internal value for border-radius: 50% or a very large pill value on a specific element size. It's equivalent to 9999px functionally but exposed as the WebKit floating-point calculated value rather than the authored CSS. The most interesting radius token in this series.
Border Widths
--border-width-hairline
0.5px · sub-pixel (×16) — like Zapier, the only other 0.5px brand
--border-width-thin
1px · primary (×101) — standard cards, inputs, dividers
--border-width-base
2px · emphasis (×80) — selected cards, active states, highlights
Shadow / Elevation
Shadow Tokens
6 tokens — Craft has the most complex shadow composition in this series
--shadow-sm
Document cards, floating panels (×76)
4-layer composite: 50px ambient × 2 + 20px soft + 3px sharp. Creates the realistic document float effect — layers simulate paper lift.
--shadow-md
Dropdowns, context menus (×40)
Standard 4px/2px float. Preceded by 4 transparent zero layers — CSS specificity bloat from a shared system template.
--shadow-lg
Modals, popovers (×8)
12px y-offset with 2px spread + 4px secondary. Deeper elevation for modal content over document canvas.
--shadow-xl (×6)
4px 12px 0px — mid-range, no spread, for small floating containers
--shadow-5 (×4)
1px minimal shadow pair — used for inline badges, micro tooltips
Z-Index
LayerValueUsage
--z-1-10Behind content — decorative backgrounds, canvas textures
--z-21Base content — document text, inline images, body
--z-310Navigation — sticky sidebar, toolbar, top nav
--z-420Popovers — formatting menus, link previews
--z-522Priority popovers — slash command menu (2 above popovers)
--z-640Modals, dialogs — document sharing, settings panels
--z-750Top layer — onboarding overlays, critical alerts, toasts
The z-5 = 22 (vs z-4 = 20) creates a deliberate 2-unit gap for the slash command menu — a key UI element in document editors that needs to sit visibly above standard popovers (link tooltips, text formatting) without triggering full modal-level overlay behavior. This granularity is unique in this series.
Breakpoints
No Breakpoints Defined
Craft's design system extraction returned zero breakpoint tokens. This is consistent with a product that primarily targets native macOS and iOS apps — the marketing website uses a single-column adaptive layout that relies on natural CSS flow rather than explicit breakpoint media queries. The CSS custom properties section confirms layout.breakpoint: {} is empty. Craft joins xAI as the only brands with no detected breakpoints, though for different reasons — xAI's minimal design vs Craft's native-app-first approach.
Opacity
Opacity Tokens
8 tokens — 0.20 → 0.80 · the most complete opacity scale in this series
--opacity-20
20% · ×41
--opacity-30
30% · ×2
--opacity-40
40% · ×1
--opacity-50
50% · ×14
--opacity-60
60% · ×4
--opacity-70
70% · ×1
--opacity-75
75% · ×7
--opacity-80
80% · ×36
The dominant tokens are 20% (×41) and 80% (×36) — a classic light/dark opacity pairing for hover states, disabled elements, and overlay tints. The 75% token is unique to Craft in this series. Unlike Pitch (50–85%) or Zapier (5% only), Craft covers the full range with a complete 8-step scale.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-black-3 (75%)--color-white20.64:1AAA
--color-black-3 (75%)--color-light-green12.57:1AAA
--color-dark-gray--color-white15.98:1AAA
--color-dark-gray--color-light-green9.73:1AAA
--color-black-4 (50%)--color-white20.52:1AAA
--color-dark-gray-2 (60%)--color-white16.08:1AAA
--color-blue--color-black5.91:1AA
--color-blue--color-black-25.81:1AA
--color-blue--color-black-55.84:1AA
--color-blue--color-white3.55:1AA Large
--color-dark-gray--color-black1.31:1Fail
--color-dark-gray--color-black-21.29:1Fail
--color-black-3--color-black1.02:1Fail
--color-blue--color-light-green2.16:1Fail
CSS Variables Reference
Colors — Core57 tokens total
Black (×3646)--color-black#000000
Black 2 (×2056)--color-black-2#030302
White (×375)--color-white#FFFFFF
White 2--color-white-2#F5F5F7
Dark Gray (×34)--color-dark-gray#1F2225
Light Gray (×27)--color-light-gray#E1E1E1
Mid Gray--color-mid-gray#B1B1B1
Blue (×14)--color-blue#0087FF
Light Green (×13)--color-light-green#9BD8A9
Light Yellow (×6)--color-light-yellow#FDE99B
Light Blue (×6)--color-light-blue#DBEDFE
Light Orange (×6)--color-light-orange#FFEDD4
Yellow (×6)--color-yellow#DFB720
Orange (×6)--color-orange#FF8904
Red--color-red#E01E5A
Blue 2 (deep)--color-blue-2#0C3CC0
Typography, Motion & Layersselected tokens
UntitledSansFont--font-family-baseUntitledSansFont
UntitledSerifFont--font-family-2UntitledSerifFont
apple-system--font-family-3apple-system
Regular / Medium / Semibold / Boldweights400–700
2XS (smallest)--font-size-2xs9.5px
62px (display)--font-size-62px62px
Tight (tightest in series)--letter-spacing-tight−2.48px
Percentage spacing--letter-spacing-wide−1.65%
Positive (caps only)--letter-spacing-ls-16+0.16px
Normal (×980)--duration-normal200ms
Fast (×86)--duration-fast150ms
Slow (×80)--duration-slow300ms
No easing functions detectedeasing—
Ghost 20% (×41)--opacity-2020%
Dim 50%--opacity-5050%
Strong 75% (unique)--opacity-7575%
Full 80% (×36)--opacity-8080%
Behind--z-1-10
Base / Nav--z-2 / --z-31 / 10
Popover / Slash cmd--z-4 / --z-520 / 22
Modal / Top--z-6 / --z-740 / 50
Hairline (sub-pixel)--border-width-hairline0.5px
Thin (primary)--border-width-thin1px
Base (emphasis)--border-width-base2px
R10--radius-r1024px
Scientific pill--radius-r131.67772e+07px
Design System Preview · Craft (Light) · Generated 19/04/2026 · 57 color tokens · 18 font-size · 3 font-family · 4 font-weight · 19 line-height · 20 letter-spacing · 32 spacing · 13 radius · 3 border-width · 6 shadow · 5 duration · 0 easing · 7 z-index · 0 breakpoints · 8 opacity