Craft Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

10type steps

2radius steps

2pxspacing base

Craft, in one page

Craft's iOS app is a *beautifully crafted document editor* — the antithesis of a spreadsheet-y productivity tool. Where most note apps feel like text fields with chrome bolted on, Craft feels like a native iOS app that a designer obsessed over: rounded everything, soft layered shadows, fluid spring physics, and a signature blue→purple gradient that threads through every primary action. The canvas is warm off-white (#FCFCFD) in light, a soft near-charcoal (#1A1A1E) in dark — never pure black, never clinical. Open a document and you see a hero zone (optional full-bleed cover, a large emoji or photo icon, the title in Inter 28pt extrabold), then a vertical flow of blocks — but unlike Notion's invisible-flat blocks, Craft's blocks frequently render as *cards*: rounded rectangles with a subtle border and a soft drop shadow, with an icon chip on the left. Nested pages, link previews, toggles, and to-dos all become tappable cards. This card-forward block model is Craft's signature visual move.

The brand color is unmistakable: a blue→purple gradient running roughly #2F5BEA (Craft Blue) to #6E56CF (Craft Purple). It appears on the "New Document" button, the floating + action, the active bottom-bar icon, selected-state fills, focused input borders, and the app icon itself. Unlike Notion (which has *no* brand accent), Craft leans into this gradient as identity — it's the one constant across light and dark. Solid #2F5BEA is used where a gradient would be visually noisy (small toggles, links, inline accents).

The second signature is Daily Note — a date-stamped document auto-created each day, surfaced as a card and as a dedicated tab/entry point. It's Craft's opinion that journaling and daily capture deserve a first-class home. Combined with block actions (long-press or the leading handle reveals Style, Turn into, Move, Link to, Delete) and the / block inserter (type / to open a menu of block types — Text, Page, To-do, Image, Code, Table, Toggle), these three affordances — cards, Daily Note, / inserter — are how everything in Craft gets built.

Typography is Inter as the primary UI/document face (Craft historically shipped a refined sans very close to Inter; Inter is the faithful, freely-licensed stand-in), falling back to SF Pro on iOS. Hierarchy is editorial: document title at 28pt extrabold, H1 24pt bold, H2 20pt bold, H3 17pt semibold, body 16pt regular. Generous corner radii (10–20pt on cards, sheets, and buttons) and soft, low-opacity shadows give the whole app a tactile, "objects you can pick up" feel — far softer than Material, warmer than stock iOS.

Key Characteristics:

Warm off-white canvas (#FCFCFD) light / soft charcoal (#1A1A1E) dark — never pure black
Signature blue→purple gradient (#2F5BEA → #6E56CF) on every primary action — the constant brand identity
Card-forward blocks — nested pages, links, toggles, to-dos render as rounded cards with icon chips + soft shadows
Daily Note — auto-created date-stamped document, surfaced as a card and a dedicated entry point
/ block inserter — type / to insert any block type (Text, Page, To-do, Image, Code, Table, Toggle)
Block actions — long-press / leading handle → Style, Turn into, Move, Link to, Delete
Optional full-bleed cover + emoji/photo page icon hero zone, generous and editorial
Cross-document links & backlinks — pages reference each other as inline cards
Generous corner radii (10–20pt) + soft layered shadows — tactile, "pick-it-up" feel
Fluid spring motion — sheets, cards, and the / menu animate with iOS-native spring physics
Minimal chrome: compact top bar (back · search · + · ⋯), a slim bottom bar with center gradient FAB

Do's and don'ts

Do

Use warm off-white (#FCFCFD) light / soft charcoal (#1A1A1E) dark — NEVER pure white or pure black
Carry the blue→purple gradient (#2F5BEA → #6E56CF) on every primary action — it's the constant identity
Render structural blocks (pages, links, toggles, to-dos) as rounded cards with icon chips + soft shadows
Make the FAB a rounded square (14pt radius), not a circle, with a blue-tinted shadow
Surface Daily Note as a first-class card and entry point
Use the / inserter as the primary block-creation gesture
Give everything generous radius (≥10pt) and soft, diffuse, low-opacity shadows
Use solid #2F5BEA where a gradient would be visually noisy at small size (toggles, links, ring)
Animate with iOS-native spring physics — fluid, slightly bouncy, never linear
Keep the doc title at 28pt extrabold (800) — the single most expressive type moment
Keep prose blocks chrome-free; reserve card framing for structural blocks

Don't

Don't use pure black (#000000) for canvas or text — #1A1A1E / #1C1C22 are correct
Don't render every block as a card — prose flows inline; only structural blocks get card framing
Don't make the FAB a circle — Craft's FAB is a rounded square
Don't use a flat single accent color where the gradient belongs (primary buttons, FAB, active tab)
Don't use hard 90° corners on containers — Craft is soft everywhere except dividers/covers
Don't use heavy Material-style drop shadows — keep them diffuse and low-opacity
Don't animate linearly or abruptly — motion is spring-based and fluid
Don't bold body paragraphs by default — body is 400 weight
Don't add a tint pill behind the active tab — active is just solid #2F5BEA
Don't bury Daily Note — it's a signature, give it a visible home
Don't hardcode multi-column layouts — Craft defaults to single-column document flow

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Craft design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- blue→purple gradient: #2f5bea
- Craft Blue: #2f5bea
- Craft Blue Pressed: #2347c9
- Craft Purple: #6e56cf
- Craft Purple Soft: #8b73e8
- Canvas White: #fcfcfd
- Surface Gray: #f4f4f6
- Card Surface: #ffffff
- Surface Pressed: #ececef
- Divider: #e6e6ea

Type:
- families: Inter, Lora, JetBrains Mono, Fallback Stack
- scale: 10, 12, 13, 14, 15, 16, 17, 20, 24
- weights: 400, 500, 600, 700, 800

Shape:
- radius: 10, 12
- elevation: Shadow: `0 8px 20px -6px rgba(47,91,234,0.6)`

Spacing: 2, 8, 12, 13, 14

Rules:
- Use warm off-white (`#FCFCFD`) light / soft charcoal (`#1A1A1E`) dark — NEVER pure white or pure black
- Carry the blue→purple gradient (`#2F5BEA → #6E56CF`) on every primary action — it's the constant identity
- Render structural blocks (pages, links, toggles, to-dos) as rounded cards with icon chips + soft shadows
- Make the FAB a rounded square (14pt radius), not a circle, with a blue-tinted shadow
- Surface Daily Note as a first-class card and entry point
- Use the `/` inserter as the primary block-creation gesture

Avoid:
- Don't use pure black (`#000000`) for canvas or text — `#1A1A1E` / `#1C1C22` are correct
- Don't render every block as a card — prose flows inline; only structural blocks get card framing
- Don't make the FAB a circle — Craft's FAB is a rounded square
- Don't use a flat single accent color where the gradient belongs (primary buttons, FAB, active tab)
- Don't use hard 90° corners on containers — Craft is soft everywhere except dividers/covers
- Don't use heavy Material-style drop shadows — keep them diffuse and low-opacity

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Primary (Interactive)

Craft Blue (#2F5BEA): Primary solid interactive — links, toggles, focused borders, selected states, gradient start.
Craft Blue Pressed (#2347C9): Pressed state for solid blue controls.
Craft Purple (#6E56CF): Gradient end; secondary accent on highlights and decorative chips.
Craft Purple Soft (#8B73E8): Lighter purple for dark-mode accents and hover tints.
Brand Gradient: linear #2F5BEA → #6E56CF (≈120°) — New Document button, FAB, active tab, hero cover default.

Canvas & Surfaces (Light Mode)

Canvas White (#FCFCFD): Primary light canvas — warm off-white, not pure white.
Surface Gray (#F4F4F6): Sidebar / space list background, subtle elevated rows.
Card Surface (#FFFFFF): Block-card background, sheets, popovers (lifts above the warm canvas).
Surface Pressed (#ECECEF): Pressed/selected rows and cards.
Divider (#E6E6EA): Hairline borders on cards and between sections.
Selection Highlight (#2F5BEA29): ~16% blue overlay on selected text/blocks.

Canvas & Surfaces (Dark Mode)

Dark Canvas (#1A1A1E): Primary dark canvas — Craft's soft charcoal, NOT pure black.
Dark Card (#232328): Block-card background, sheets, popovers.
Dark Surface 2 (#2C2C32): Hovered/pressed cards, secondary fills.
Dark Divider (#34343C): Hairline borders on dark.
Dark Selection (#2F5BEA3D): ~24% blue overlay on dark selection.

Text

Text Primary Light (#1C1C22): Primary body/title text — near-black, slightly warm.
Text Secondary Light (#6A6A78): Metadata, captions, secondary body.
Text Tertiary Light (#9B9BA6): Placeholder, disabled, very low-emphasis.
Text Primary Dark (#ECECEF): Primary text on dark — soft white.
Text Secondary Dark (#9B9BA6): Secondary on dark (shared tone, works on both).
Text Tertiary Dark (#67677A): Placeholder/disabled on dark.

Block Accent Tints (icon chips & callouts)

Craft tints block-card icon chips and callouts with low-opacity brand/utility colors.

Role	Light Mode	Dark Mode
Blue Tint	`#2F5BEA14`	`#2F5BEA2E`
Purple Tint	`#6E56CF14`	`#6E56CF33`
Green Tint	`#30A46C1F`	`#30A46C33`
Amber Tint	`#F0A92B24`	`#F0A92B33`
Red Tint	`#E5484D1F`	`#E5484D33`
Neutral Tint	`#7676801F`	`#8B8B9E29`

Highlight / Callout Colors (saturated)

For inline text highlights, callout accents, and tag chips.

Role	Color
Blue	`#2F5BEA`
Purple	`#6E56CF`
Green	`#30A46C`
Amber	`#F0A92B`
Red	`#E5484D`
Pink	`#D6409F`
Teal	`#12A594`
Gray	`#7E7E8A`

Semantic

Error Red (#E5484D): Delete confirmation, error toast, destructive actions.
Success Green (#30A46C): Completed to-do fill, save-success toast.
Warning Amber (#F0A92B): Warning callouts, sync-pending indicator.
Link Blue (#2F5BEA): Inline links and cross-document references.
Focus Ring (#2F5BEA): 2pt focused input/border ring.

Type scaleRead the full spec

Font Family

Primary: Inter (by Rasmus Andersson, SIL OFL) — geometric humanist sans; faithful, freely-licensed stand-in for Craft's bespoke product sans, optimized for UI and long-form reading at small sizes.
Serif Option (reading mode): Lora (Google Fonts, SIL OFL) — optional serif for a "book"-style reading preference on long documents.
Mono (code blocks): JetBrains Mono (SIL OFL) — used only inside code blocks and inline code.
Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
iOS behavior: falls back to SF Pro Display (titles) / SF Pro Text (body) when Inter isn't bundled.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Doc Title	Inter	28pt	800	1.2	-0.5pt	Below cover/emoji, extrabold hero
Heading 1 (`/h1`)	Inter	24pt	700	1.25	-0.3pt	Top-level section in page
Heading 2 (`/h2`)	Inter	20pt	700	1.3	-0.2pt	Sub-section
Heading 3 (`/h3`)	Inter	17pt	600	1.35	-0.1pt	Sub-sub-section
Body	Inter	16pt	400	1.55	0pt	Paragraph block default
Body Emphasis	Inter	16pt	600	1.55	0pt	Bold inline run
Card Title	Inter	15pt	600	1.3	0pt	Block-card primary label
Card Subtitle	Inter	12pt	400	1.35	0pt	Block-card metadata line
Meta	Inter	13pt	400	1.4	0pt	"Edited 2m ago", doc subtitle
Caption	Inter	12pt	500	1.4	0.1pt	Chips, small labels
Quote	Lora	17pt	400	1.5	0pt	Italic quote block
Code Inline	JetBrains Mono	14pt	400	1.4	0pt	`inline code` with tint bg
Code Block	JetBrains Mono	13pt	400	1.5	0pt	Fenced code block
Button	Inter	15pt	600	1.0	0pt	Primary/secondary buttons
Link	Inter	16pt	500	1.55	0pt	Inline link — `#2F5BEA`
Tab Label	Inter	10pt	500	1.0	0.1pt	Bottom-bar labels (when shown)
Sidebar Label	Inter	14pt	500	1.3	0pt	Space/document list rows
Placeholder	Inter	16pt	400	1.55	0pt	"Type / for blocks"

Principles

Editorial rhythm: sizes/weights follow document conventions (Title > H1 > H2 > H3 > body), not app-chrome conventions.
Extrabold reserved for the doc title: 800 weight is the single most expressive moment; everything else tops out at 700.
Body breathes: 16pt body at 1.55 line-height — Craft documents are made to be *read*, not skimmed.
Monospace is code-only: JetBrains Mono appears solely in code blocks and inline code.
Dynamic Type first-class: title, headings, body, captions scale; card subtitles, tab labels, slash-menu rows stay fixed for layout safety.

Components and layoutRead the full spec

Buttons

Primary Button (New Document / Done / Share)

Shape: Rounded rectangle, 12pt corner radius
Background: gradient #2F5BEA → #6E56CF (≈120°)
Text: #FFFFFF, Inter 15pt weight 600
Padding: 13pt vertical, 26pt horizontal
Pressed: filter: brightness(0.92) + scale 0.98 + soft haptic
Optional leading SF Symbol 15pt, 8pt gap

Solid Button (Secondary primary)

Background: solid #2F5BEA (#2347C9 pressed)
Text: #FFFFFF, Inter 15pt weight 600
Same shape/padding as primary; used where a gradient would be visually noisy at small size

Secondary / Outline Button

Background: transparent
Text: #1C1C22 light / #ECECEF dark
Border: 1pt #E6E6EA / #34343C
Corner radius: 10pt
Padding: 12pt vertical, 20pt horizontal
Font: Inter 14pt weight 500
Pressed: background #ECECEF / #2C2C32

Ghost / Text Button (Add block / Cancel)

Background: transparent, no border
Text: #2F5BEA (action) or #6A6A78 (Cancel)
Font: Inter 14pt weight 600
Pressed: 0.6 opacity

Floating Action Button (+)

Size: 46pt, 14pt corner radius (rounded square, NOT a circle)
Background: gradient #2F5BEA → #6E56CF
Glyph: plus 22pt #FFFFFF
Shadow: 0 8px 20px -6px rgba(47,91,234,0.6)
Centered in the bottom bar; opens the new-block / new-document sheet

Icon Button (top bar / block handle)

Size: 22pt glyph in a 44pt hit area
Default color: #6A6A78 / #9B9BA6
Pressed: #2F5BEA

Blocks (the core atom)

Every content unit is a "block". Blocks support: leading drag/handle (long-press reveal), / insert, drag-reorder, and a Style/Turn-into menu. Many block types render as cards.

Paragraph Block

Content: body 16pt w400 #1C1C22
Empty placeholder: "Type / for blocks" in #9B9BA6
Block gap: 8pt vertical

Heading 1 / 2 / 3 Block

24 / 20 / 17pt, weights 700 / 700 / 600
16pt top margin, 6pt bottom margin

Card Block (Page / Link / nested document) — *signature*

Layout: rounded card, 12pt radius, 1pt #E6E6EA border, soft shadow 0 6px 18px -10px rgba(0,0,0,0.10) light / …0.6 dark
Leading icon chip: 36pt rounded square (9pt radius) with tinted bg (e.g. blue tint) + emoji/favicon
Title: Inter 15pt w600; subtitle: Inter 12pt w400 #6A6A78
Trailing chevron chevron.right 16pt #9B9BA6
Padding: 14pt all; tap opens the page / link

To-do Block

Leading checkbox: 18pt rounded square (6pt radius), 1.8pt #9B9BA6 border
Checked: fill #2F5BEA, white checkmark, label gets strikethrough + #9B9BA6
Content: 16pt w400; tap circle toggles with spring + soft haptic

Toggle Block (collapsible)

Leading chevron ▸ (closed) / ▾ (open) 14pt #9B9BA6
Title: 16pt w500; children indented 20pt; expand 220ms spring

Callout Block

Background: a brand-tint fill (e.g. blue tint #2F5BEA14)
Leading emoji 20pt; content 16pt w400
Corner radius: 12pt; padding: 14pt; no border

Code Block

Background: #F4F4F6 light / #2C2C32 dark
Font: JetBrains Mono 13pt; 14pt padding; 10pt radius
Language label top-right #9B9BA6 12pt; copy button top-right

Quote Block

Left border: 3pt #6E56CF; padding 2pt/14pt; Lora 17pt italic #6A6A78

Divider Block

1pt #E6E6EA line, 16pt vertical margin

Image / Photo Block

Full-width minus 22pt insets; 12pt corner radius; optional caption 12pt #9B9BA6 below

Table Block

Inline grid; header row w600; 1pt #E6E6EA cell borders; horizontal scroll within block

Page Structure

Page Header (hero)

Optional full-bleed cover, 96pt mobile / 160pt tablet, 14pt corner radius (insets) or full-bleed
Page icon: 40pt emoji OR photo, with -38pt top offset overlapping cover
Title: Inter 28pt w800 #1C1C22, 22pt horizontal inset, 6pt top margin from icon
Subtitle row: "Edited 2m ago · Shared with N" — Inter 13pt #6A6A78

Page Body

22pt horizontal insets; vertical flow of blocks; 8pt block gap
Empty state: "Type / for blocks" placeholder in first block

Navigation

Top Bar (Document)

Height: 44pt + safe area
Leading: back chevron chevron.left + section name (e.g. "Home")
Trailing: search · + (insert) · ⋯ (page actions: Share, Style, Move, Export, Delete)
No large title — the document's own hero title is the title

Bottom Bar

Height: 64pt + safe area
Background: #FCFCFD / #1A1A1E @ 94% with blur, 0.5pt top divider
Layout: left group (Home, Search) · center gradient FAB (+) · right group (Documents, Profile)
Active icon: solid #2F5BEA (no pill); inactive #6A6A78 / #9B9BA6
Labels: optional Inter 10pt w500

Space / Document List (slide-in or root)

Background: #F4F4F6 / #1A1A1E
Rows: 44pt tall, leading 20pt emoji/icon, title Inter 14pt w500, trailing ⋯
Active row: #ECECEF / #2C2C32 background
Sections: "Spaces", "Recent", "Daily Notes", "Shared"; nested pages indent 20pt with leading chevron

Input Fields

Search Bar

Responsive behaviourRead the full spec

Device Sizes

Device	Width	Key Changes
iPhone SE (3rd gen)	375pt	Cover 80pt; space list is 86% screen width
iPhone 13/14/15	390pt	Standard layout
iPhone 15/16 Pro	393pt	Dynamic Island accommodated in top bar
iPhone 15/16 Pro Max	430pt	Cover 120pt; larger emoji icon
iPad (portrait)	768pt	2-column: sidebar (280pt) + content (centered max 720pt)
iPad (landscape)	1024pt+	3-pane optional: spaces · document list · editor

Dynamic Type

Doc title, headings, body, quote, captions: full scale
Card subtitles, tab labels, slash-menu rows, sidebar labels: FIXED (layout-sensitive)
Code blocks: scale to XL but stay monospace

Orientation

All screens rotate; iPad gains split-view (sidebar + editor)
Cover/image blocks reflow to new width; hero recomputes height

Touch Targets

To-do checkbox: 18pt glyph, 44pt hit
Block handle: 22pt glyph, 44pt hit
Bottom-bar icons: 21pt glyph, 44pt hit
FAB: 46pt (already ≥44pt)
Sidebar row: 44pt tall, full-row tap
Primary buttons: ≥44pt tall

Safe Area Handling

Top: top bar respects safe area + Dynamic Island
Bottom: bottom bar + home indicator respected; FAB sits above home indicator
Keyboard: editor scrolls above keyboard; / inserter positions above keyboard
Sides: 22pt content inset

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-craft {--page-bg: #fcfcfd;
  --page-bg-gradient: none;
  --text-color: #1a1a1e;
  --heading-color: #1a1a1e;
  --link-color: #97640c;
  --link-hover-color: #684508;
  --border-color: #d3d3d5;
  --card-bg: #fcfcfd;
  --card-shadow: 0 1px 2px rgba(26,26,30,0.06);
  --card-hover-shadow: 0 6px 18px rgba(26,26,30,0.12);
  --header-bg: #1a1a1e;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #fcfcfd;
  --footer-text-color: #69696c;
  --button-bg: #f0a92b;
  --button-text-color: #000000;
  --button-hover-bg: #d9900f;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #eeeef0;
  --button-secondary-text-color: #1a1a1e;
  --button-secondary-hover-bg: #e1e1e2;
  --button-secondary-border: 1px solid #d3d3d5;
  --prompt-bg: #f1f1f2;
  --prompt-text-color: #1a1a1e;
  --base-font: var(--font-inter);
  --heading-font: var(--font-serif);
  --card-border-radius: 12px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

kashiyama 78.3%
hevy 76.3%
swiggy 75.8%
mastodon 75.4%
apple tv 73.3%

Where this came from

Source document: ios/design-md/productivity/craft/DESIGN.md · 26.8 KB
Repository: Meliwat/awesome-ios-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.