designmd-forge 1.2.0

package/dist/data/designs/ios-craft.md

@@ -0,0 +1,449 @@
+# Design System Inspiration of Craft (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+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
+
+## 2. Color Palette & Roles
+
+### 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.
+
+## 3. Typography Rules
+
+### 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.
+
+## 4. Component Stylings
+
+### 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**
+- Height: 40pt; background `#F4F4F6` / `#2C2C32`; no border; 10pt radius
+- Leading `magnifyingglass` 16pt `#9B9BA6`; placeholder "Search" 15pt `#9B9BA6`
+- Focus: 2pt `#2F5BEA` ring
+
+**Text Field (rename / new doc)**
+- Height: 44pt; background `#FFFFFF` / `#232328`; 1pt `#E6E6EA` / `#34343C`; 10pt radius
+- Focus: border → 2pt `#2F5BEA`; 14pt horizontal padding; Inter 16pt
+
+### Distinctive Components
+
+**Block Card** — the signature: nested pages, link previews, toggles, and to-dos all become rounded icon-chip cards with soft shadows. This card-forward model (vs. Notion's flat blocks) is Craft's identity.
+
+**Daily Note** — a date-stamped document auto-created each day, surfaced as a dedicated card ("Daily Note — May 18") and an entry point. Tapping creates/opens today's note; it accrues blocks like any page.
+
+**`/` Block Inserter** — type `/` at the start of a line to open a cursor-anchored sheet/popover of block types. Each row: 28pt icon chip + title (Inter 13pt w600) + subtitle (12pt `#9B9BA6`). Selected row: blue tint. Tap or Return inserts.
+
+**Block Actions Menu** — long-press a block or tap its leading handle to open: Style, Turn into, Copy link, Duplicate, Move to, Link to page, Delete. Bottom sheet on phone.
+
+**Cross-Document Link Card** — typing `@` or pasting a Craft link inserts an inline card with the linked page's icon + title; backlinks surface at the page bottom.
+
+**Cover + Icon Hero** — optional full-bleed cover image (Unsplash / upload / gradient) with a large emoji or photo icon overlapping it; the page's expressive identity moment.
+
+**Style Sheet** — a bottom sheet for text/page styling: card style toggle, full-width toggle, text size, page background, font (sans / serif). Spring-presented.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64
+- Block vertical gap: 8pt
+- Heading top margin: 16pt
+- Page content inset: 22pt horizontal (slightly generous — editorial feel)
+- Card internal padding: 14pt
+
+### Grid & Container
+- iPhone: content at 22pt horizontal insets; cover full-bleed or inset (14pt radius)
+- iPad: content max-width 720pt centered, 32pt insets; sidebar 280pt always visible in landscape
+- Block cards span full content width
+- Tables scroll horizontally within their block
+
+### Whitespace Philosophy
+- **Editorial breathing room**: 8pt between blocks, 16pt before headings, 22pt page insets — generous, book-like
+- **Cards float, text flows**: structural blocks (pages, links, toggles) get card framing + shadow; prose blocks flow inline with no chrome
+- **Hero is optional but expressive**: cover + icon zone can be tall and image-rich, or absent (0pt)
+- **Soft, never harsh**: every container uses ≥10pt radius; nothing is a hard 90° rectangle except dividers/full-bleed covers
+
+### Border Radius Scale
+- Square (0pt): Dividers, full-bleed covers
+- Subtle (6pt): Checkboxes, small chips, inline code bg
+- Comfortable (10pt): Outline buttons, search bar, text fields, icon chips
+- Standard (12pt): Block cards, callouts, primary buttons, image blocks
+- Large (16–20pt): Bottom sheets, modals, FAB
+- Pill (500pt): Tags, segmented toggles
+- Circle (50%): Avatars
+
+## 6. Depth & Elevation
+
+Craft uses depth deliberately and softly — shadows are low-opacity and diffuse, signaling "this is a liftable object," never harsh Material elevation.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Prose blocks, dividers, list rows |
+| Card (Level 1) | `0 6px 18px -10px rgba(0,0,0,0.10)` light / `…0.6` dark | Block cards (page/link/toggle/to-do), callouts |
+| Floating (Level 2) | `0 12px 32px -12px rgba(0,0,0,0.14)` light / `…0.7` dark | `/` inserter, block-actions menu, popovers |
+| Sheet (Level 3) | `0 -10px 40px rgba(0,0,0,0.18)` | Bottom sheets (Style, Share, New) |
+| FAB | `0 8px 20px -6px rgba(47,91,234,0.6)` | Center gradient FAB (brand-tinted shadow) |
+| Modal Overlay | `rgba(0,0,0,0.32)` | Dim behind sheets/modals |
+
+**Shadow Philosophy**: Craft's shadows are soft and brand-aware — the FAB casts a *blue-tinted* shadow, reinforcing the gradient identity. On dark mode, shadows deepen (0.6–0.7) and a 1pt divider border is added to floating panels for an elevation cue. Depth is tactile (objects you can pick up), not flat (Notion) and not heavy (Material).
+
+### Motion
+- **Block reorder (drag)**: 60fps lift with slight scale-up (1.03) + shadow bloom; neighbors shift over 200ms ease-out; drop snaps with spring (response 0.30, damping 0.82) + soft haptic
+- **Card tap → open page**: push transition 320ms with subtle parallax (iOS native push)
+- **`/` inserter**: fade-in + 6pt slide-up in 180ms ease-out; dismiss fade + slide-down 150ms; arrow/scroll selection instant
+- **Toggle expand/collapse**: chevron rotates 90° in 180ms; children expand height 0→auto with spring (response 0.32, damping 0.85)
+- **To-do complete**: checkbox fills with a 220ms spring scale-pop + soft haptic; label strikes through over 150ms
+- **Sheet present (Style / Share / New)**: slides up 360ms spring (response 0.40, damping 0.82), dim fades in
+- **Sidebar / space list**: edge-swipe 1:1 tracking; release threshold 50% → spring open/close (damping 0.80)
+- **FAB press**: scale 0.94 + brightness 0.92, releases with spring overshoot
+- **Page save (auto)**: silent — no motion; "Saved" / "Syncing" pill only on conflict or manual save
+- **Haptic feedback**: soft impact on to-do complete, toggle, block drag start, `/` open, sheet present
+
+## 7. 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
+
+## 8. Responsive Behavior
+
+### 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
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (light): `#FCFCFD`
+- Canvas (dark): `#1A1A1E`
+- Card (light): `#FFFFFF` · Card (dark): `#232328`
+- Surface gray (light): `#F4F4F6`
+- Divider: `#E6E6EA` light / `#34343C` dark
+- Text primary: `#1C1C22` light / `#ECECEF` dark
+- Text secondary: `#6A6A78` light / `#9B9BA6` dark
+- Craft Blue (solid): `#2F5BEA`
+- Craft Purple: `#6E56CF`
+- Brand gradient: `#2F5BEA → #6E56CF` (≈120°)
+- Success green: `#30A46C`
+- Warning amber: `#F0A92B`
+- Error red: `#E5484D`
+- Blue tint (icon chip): `#2F5BEA14` light / `#2F5BEA2E` dark
+
+### Example Component Prompts
+- "Build the Craft document header in SwiftUI: optional 96pt full-bleed cover (14pt corner radius), a 40pt emoji icon with -38pt top offset overlapping the cover at 22pt leading, then the title in Inter 28pt weight 800 `#1C1C22` at 22pt horizontal inset, and a subtitle row 'Edited 2m ago · Shared with 4' in Inter 13pt `#6A6A78`."
+
+- "Create a Craft Card Block: rounded card 12pt radius, 1pt `#E6E6EA` border, soft shadow `0 6px 18px -10px rgba(0,0,0,0.10)`. Leading 36pt rounded-square icon chip (9pt radius) with a blue tint background `#2F5BEA14` and an emoji. Title in Inter 15pt w600 `#1C1C22`, subtitle in Inter 12pt w400 `#6A6A78`, trailing `chevron.right` 16pt `#9B9BA6`. 14pt padding. Tap pushes the nested page with 320ms parallax."
+
+- "Render the Craft `/` block inserter: cursor-anchored floating panel, 12pt corner radius, `#FFFFFF` bg light / `#232328` dark, shadow `0 12px 32px -12px rgba(0,0,0,0.14)`, 1pt `#34343C` border in dark. Rows 44pt: leading 28pt icon chip, title Inter 13pt w600 `#1C1C22`, subtitle Inter 12pt w400 `#9B9BA6`. Selected row background blue tint `#2F5BEA14`. Fade-in + 6pt slide-up 180ms; tap or Return inserts the block."
+
+- "Build the Craft primary button: gradient `#2F5BEA → #6E56CF` at ≈120°, 12pt corner radius, Inter 15pt w600 `#FFFFFF`, 13pt vertical / 26pt horizontal padding. Pressed: brightness 0.92 + scale 0.98 + soft haptic."
+
+- "Create the Craft to-do block: leading 18pt rounded-square checkbox (6pt radius, 1.8pt `#9B9BA6` border). On tap, fill `#2F5BEA` with a white checkmark using a 220ms spring scale-pop + soft haptic; label gets strikethrough and `#9B9BA6` over 150ms. Label in Inter 16pt w400."
+
+- "Render the Craft bottom bar: 64pt + safe area, `#1A1A1E` @ 94% with blur and a 0.5pt `#34343C` top divider. Left group (Home, Search), a center 46pt rounded-square FAB (14pt radius) with the brand gradient and a blue-tinted shadow `0 8px 20px -6px rgba(47,91,234,0.6)`, right group (Documents, Profile). Active icon solid `#2F5BEA`, inactive `#9B9BA6`, no tint pill."
+
+- "Build the Craft Daily Note card: a block card titled 'Daily Note — May 18' with a 📅 emoji in a purple-tint chip `#6E56CF14`, subtitle 'Auto-created · 3 blocks', trailing chevron. Tapping opens (or creates) today's date-stamped document."
+
+### Iteration Guide
+1. Canvas is warm off-white `#FCFCFD` light / soft charcoal `#1A1A1E` dark — NOT pure white/black
+2. The blue→purple gradient `#2F5BEA → #6E56CF` is the constant identity — every primary action carries it
+3. Structural blocks (pages, links, toggles, to-dos) render as rounded cards with icon chips + soft shadows; prose flows chrome-free
+4. The FAB is a rounded square (14pt radius) with a blue-tinted shadow — never a circle
+5. Daily Note is a first-class card + entry point — surface it prominently
+6. The `/` inserter is the primary block-creation gesture — cursor-anchored floating panel
+7. Everything is soft: ≥10pt radius on containers, diffuse low-opacity shadows
+8. Motion is iOS-native spring — fluid and slightly bouncy, never linear
+9. Doc title is 28pt extrabold (800) — the single most expressive type moment; body is 16pt/400 at 1.55
+10. Use solid `#2F5BEA` for small accents (toggles, links, focus ring); reserve the gradient for primary buttons/FAB/active tab