# Design System Inspiration of Apple Notes (iOS)

## 1. Visual Theme & Atmosphere

Apple Notes is Apple's most quietly opinionated app — a 16-year exercise in restraint. Where every other Apple app debates whether to be material or flat, glass or solid, Notes commits to one idea: *it's paper*. The canvas is a warm cream yellow (`#FFFBED` in light, `#1A1A1A` in dark), the chrome is suppressed to nearly nothing, the only "color" in the entire app is the yellow folder glyph and the brand orange highlights. The aesthetic is *legal pad* — and the legal-pad reference is intentional. Notes is Apple's tribute to the yellow Steno pad and the manila folder, rendered as software.

The canvas is **Notes Cream** (`#FFFBED`) — a warmer-than-white off-cream that gives the screen the texture of light, slightly-aged paper. On dark mode, the canvas inverts to **Dark Paper** (`#1A1A1A`), a true dark gray that preserves the paper feel. The accent is **Notes Orange** (`#F09A38`) — Apple's brand orange that appears on the folder glyph, on note-creation FABs, on selection states, and on the "+" New Note button. The yellow of the folder itself — `#F5D773` — is iconic: every folder in the app is rendered as a slightly-3D yellow tab-folder, exactly the same shade as the macOS Finder folder. Everything else is the system gray ramp.

Typography is **SF Pro** at every size, including in the note body — Apple does not use a custom face here, because they want notes to feel like the iOS system. The note body uses SF Pro Text at 17pt 400 with a generous 1.5 line height, which is the most calm body text in any iOS app. Title casing is editorial — large nav titles at 34pt Heavy, note titles at 20pt Semibold, body at 17pt Regular. There is no use of SF Pro Display in the note body itself — only Text — because Notes is for reading, not glanceable headlines.

**Key Characteristics:**
- Notes Cream canvas (`#FFFBED`) in light mode, Dark Paper (`#1A1A1A`) in dark — both deliberately warmer than typical iOS apps
- Notes Orange (`#F09A38`) as the primary action color — New Note FAB, folder glyph stroke, selection states
- The Folder Yellow (`#F5D773`) — used only on the actual folder glyphs, which appear as small 3D tab-folder icons in lists
- Note list as the home screen — rows show note title (bold), preview text (1-2 lines), and date in a tight three-line stack
- Pinned section at the top of the list with a small pin glyph in Notes Orange
- Tags row above pinned — orange-tinted hash chips for #recipes, #books, #ideas
- Search bar pinned at the top — pull-to-reveal in older iOS, persistent in iOS 17+
- Bottom toolbar in the editor: 4 action buttons (formatting, checklist, table, photo) + a New Note quick action
- SF Pro at every size with Dynamic Type supported everywhere
- Subtle elevation only — Notes is paper-flat, shadows are nearly imperceptible (max 4% opacity)

## 2. Color Palette & Roles

### Brand
- **Notes Orange** (`#F09A38`): The primary brand action color — folder glyph stroke, New Note FAB, selection accent, link color, locked-note password field accent.
- **Notes Orange Pressed** (`#D87E1F`): Pressed state on Notes Orange CTAs.
- **Notes Orange Tint** (`#FFF1DD`): Background tint for selected rows, focused folder highlight.
- **Folder Yellow** (`#F5D773`): The iconic yellow used on the actual folder glyph fills throughout the app (and Finder on macOS).

### Canvas, Surfaces & Dividers (Light)
- **Notes Cream** (`#FFFBED`): Primary canvas — list view, note editor, sheets. Warmer than white by ~3%.
- **Cream Surface 1** (`#FAF6E3`): Search field fill, section background on focus, slightly warmer than the canvas.
- **Cream Surface 2** (`#F2EDD6`): Pressed-state row background, chip fills.
- **Divider Light** (`#EDEAD8`): Hairline dividers between rows, between sections; warm-toned to match the cream canvas.

### Canvas, Surfaces & Dividers (Dark)
- **Dark Paper** (`#1A1A1A`): Primary dark canvas — list view, editor, sheets.
- **Dark Surface 1** (`#262626`): Search field, section background.
- **Dark Surface 2** (`#333333`): Pressed states, chip fills.
- **Dark Divider** (`#2A2A2A`): Hairlines.

### Text (Light)
- **Ink** (`#1C1C1E`): Primary text — note titles, body copy, folder names.
- **Slate** (`#8E8E93`): Secondary text — note preview, date metadata, byline.
- **Mute** (`#C7C7CC`): Tertiary — placeholder, disabled.

### Text (Dark)
- **Soft White** (`#F2F2F2`): Primary text on dark.
- **Slate Dark** (`#8E8E93`): Secondary, identical to light mode (Apple's gray ramp doesn't shift much).
- **Mute Dark** (`#48484A`): Tertiary.

### Semantic
- **Success Green** (`#34C759`): Save confirmation, checklist completed glyph fill.
- **Warning Amber** (`#FFCC00`): Warning toasts (rare in Notes).
- **Error Red** (`#FF3B30`): Delete confirmation, recently-deleted folder accent.
- **Info Blue** (`#0A84FF`): Rare — external sharing toasts.
- **Lock Yellow** (`#FFCC00`): Locked-note state.

### Tag / Highlight Palette (used inside note body)
Notes supports text highlighting in five system colors that match Apple's brand:
- **Yellow** (`#FFEB78`): Default highlight color
- **Green** (`#B3E47B`)
- **Blue** (`#A0D8FF`)
- **Pink** (`#FFB3DB`)
- **Purple** (`#D4B3FF`)

## 3. Typography Rules

### Font Family
- **Primary**: `SF Pro` — Display variant kicks in at 20pt+, Text at body sizes
- **Mono**: `SF Mono` — used in monospaced font formatting option inside notes
- **Body face on note canvas**: SF Pro Text at 17pt 400 with 1.5 line-height — the calmest body in any iOS app
- **Fallback stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif`

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Large Nav Title | SF Pro Display | 34pt | 800 (Heavy) | 1.1 | -0.4pt | "Notes", "Folders" — Apple's biggest nav title |
| Folder Section Title | SF Pro Text | 22pt | 700 | 1.2 | -0.3pt | "On My iPhone", "iCloud" |
| Note Title (in list) | SF Pro Text | 16pt | 600 (Semibold) | 1.3 | -0.1pt | The first line of the note in bold |
| Note Preview | SF Pro Text | 14pt | 400 | 1.35 | 0pt | Lines 2-3 of the note in slate |
| Note Date | SF Pro Text | 12pt | 400 | 1.3 | 0pt | "Yesterday", "May 12, 2026" — right-aligned |
| Folder Row Name | SF Pro Text | 17pt | 400 | 1.3 | 0pt | "Notes", "Recipes", "Travel" — sidebar |
| Note Body Title | SF Pro Text | 20pt | 600 | 1.3 | -0.2pt | First line of a note inside the editor |
| Note Body Heading | SF Pro Text | 17pt | 600 | 1.4 | 0pt | Headings inside the note |
| Note Body | SF Pro Text | 17pt | 400 | 1.5 | 0pt | The note paragraph itself |
| Note Body Mono | SF Mono | 15pt | 400 | 1.5 | 0pt | Code-formatted text inside notes |
| Tag Chip | SF Pro Text | 14pt | 500 | 1.0 | 0pt | "#recipes" |
| Toolbar Label | SF Pro Text | 11pt | 500 | 1.0 | 0.1pt | Below toolbar glyph icons |
| Button (Primary) | SF Pro Text | 17pt | 600 | 1.0 | 0pt | "Save", "Done" |
| Search Placeholder | SF Pro Text | 17pt | 400 | 1.0 | 0pt | "Search" |

### Principles
- **Body type is the centerpiece** — SF Pro Text 17pt 400 with 1.5 line-height is the most generous body in any iOS app
- **Heavy on the nav title (Weight 800)** — Apple uses the rare Heavy weight on the large "Notes" title, which gives Notes its distinct identity
- **Editorial three-row note list** — title (Semibold) + preview (Regular slate) + date (Regular slate) is the canonical row layout
- **No custom typography** — SF Pro everywhere, even the "Notes" wordmark on the App Store uses SF Pro Display Heavy
- **Slate is the calm of the app** — `#8E8E93` for previews, dates, metadata; the cream canvas + slate gray gives the entire app its calm tone
- **Dynamic Type respected everywhere** — body, titles, list rows, folder names; this is essential since Notes is heavily used by older iPhone users
- **Headings inside notes use Apple's "Title", "Heading", "Subheading" presets** — the body picker UI exposes these as a vertical stack of 5 type ramps

## 4. Component Stylings

### Buttons

**Primary CTA ("Save", "Done", "Continue")**
- Background: `#F09A38` (Notes Orange)
- Text: `#FFFFFF`, SF Pro 17pt 600
- Padding: 12pt vertical, 24pt horizontal
- Corner radius: 12pt
- Height: 44pt minimum
- Pressed: background `#D87E1F`, scale 0.98
- Haptic: `.impactOccurred(.light)` on tap

**New Note FAB (bottom-right of note list)**
- 56pt circle, bottom-right inset 16pt
- Background: `#F09A38` Notes Orange
- Icon: custom "square.and.pencil" SF Symbol, 24pt, white
- Shadow: `rgba(240,154,56,0.30) 0 4px 12px` — orange-tinted shadow
- Haptic: `.impactOccurred(.medium)` on tap — opens new note with cursor placed at top

**Secondary Text Button ("Edit", "Cancel")**
- Text: `#F09A38` Notes Orange, SF Pro 17pt 400
- No background, 44pt tap slop
- Used in nav bars and inline lists

**Inline Action Pill (toolbar)**
- 36pt circle, `#FAF6E3` background (cream surface 1)
- Glyph: 18pt SF Symbol, `#1C1C1E`
- Pressed: background `#F2EDD6`

### Cards & Containers

**Note Row (the centerpiece of the list view)**
- Height: 84pt
- Background: `#FFFBED` Notes Cream (light) / `#1A1A1A` Dark Paper (dark)
- Layout (top to bottom):
  - 16pt top inset → title (Semibold 16pt Ink, 1-line truncate)
  - 4pt gap → preview line 1 (14pt 400 Slate, 1-line truncate)
  - 2pt gap → date (12pt 400 Slate, e.g., "Yesterday", "May 12")
- 16pt leading/trailing inset
- 0.5pt `#EDEAD8` divider at the bottom of each row
- Tap haptic: `.selectionChanged()`, scale 0.99 briefly
- Swipe-left: reveals 3 actions — Pin (orange), Add to Folder (gray), Delete (red)

**Pinned Section**
- Header: "Pinned" 13pt 600 uppercase Slate with 1.6pt letter-spacing
- Pinned notes get a small `pin.fill` 11pt Notes Orange glyph inline before the title
- A subtle warm-cream background tint `#FAF6E3` distinguishes pinned rows from regular rows

**Folder Row (folder list view)**
- Height: 44pt
- Background: `#FFFBED`
- Leading: 24pt yellow folder glyph in `#F5D773` with a 1pt `#F09A38` stroke (the iconic folder)
- Folder name: 17pt 400 Ink
- Trailing: note count "12" in 17pt 400 Slate + 14pt chevron in Slate
- Press: background fades to `#FAF6E3`

**Yellow Folder Glyph (the iconic mark)**
- A small 3D tab-folder shape, 24pt at folder-row size, 80pt at the "All iCloud" hero header
- Fill: `#F5D773`
- Stroke: 1pt `#F09A38` (Notes Orange)
- Inner highlight: a 0.5pt lighter inner-stroke `#FAE8A0` along the top edge for depth
- Slight 2-degree forward tilt — feels like a real physical folder

**Search Bar (pinned top of list)**
- Background: `#FAF6E3` (Cream Surface 1)
- Height: 36pt
- Corner radius: 10pt
- Leading 14pt `magnifyingglass` Slate
- Placeholder: "Search" SF Pro 17pt 400 Slate
- Trailing: 14pt `mic.fill` Slate (voice search)
- Focused: border 2pt `#F09A38`

**Tag Chip (above pinned)**
- A horizontal scroll of orange-tinted hash chips
- Each chip: 32pt height, `#FFF1DD` background, 16pt corner radius, padding 6pt vertical / 12pt horizontal
- Label: "#recipes" SF Pro 14pt 500 `#F09A38`
- 8pt gap between chips
- Selected state: `#F09A38` background with white text

**Note Body Canvas (editor)**
- Background: `#FFFBED` Notes Cream — no border, no card, just the canvas
- Padding: 20pt horizontal, 16pt top, 16pt bottom
- Content: title (20pt 600 Ink) → body (17pt 400 Ink, line-height 1.5)
- The cursor blinks Notes Orange `#F09A38`
- Selection highlight: `#FFEB78` (the same Yellow used as default highlight color)

**Format Picker (bottom sheet)**
- Slides up from the bottom when "Aa" toolbar button is tapped
- Background: `#FFFBED` with `.regularMaterial` blur if scrolled over content
- Top: 5 type ramps (Title, Heading, Subheading, Body, Monospaced) as horizontally-scrolled chips
- Below: format toggles (B, I, U, S, bulleted list, numbered list, checklist) as 44pt-tall icon buttons in a grid
- Bottom: text color and highlight color swatches (5 each from the Highlight palette)

**Bottom Toolbar (in editor)**
- Sticky bar at the bottom of the editor, 56pt tall + safe area
- Background: `#FFFBED` with `.regularMaterial` blur and a 0.5pt `#EDEAD8` top divider
- Layout: 5 icon buttons evenly spaced
  - Aa (formatting picker)
  - Checklist (`checklist`)
  - Table (`tablecells`)
  - Photo (`camera`)
  - Done (text button, right-aligned)
- Icon size: 22pt, `#1C1C1E`
- Tap haptic: `.selectionChanged()`

### Navigation

**Large-Title Nav Bar**
- Height: variable — 96pt with large title, collapses to 44pt inline
- Background: `#FFFBED` (light) / `#1A1A1A` (dark); `.regularMaterial` blur when content scrolls under
- Title: SF Pro Display 34pt 800 (Heavy) `#1C1C1E`, left-aligned, 16pt leading inset
- Trailing: "Edit" text button in Notes Orange + 24pt `ellipsis.circle` more menu

**Note Editor Nav Bar**
- Height: 44pt
- Leading: back chevron + folder name in Notes Orange ("< All Notes" / "< Recipes")
- Trailing: 24pt `square.and.pencil` (new note), 24pt `square.and.arrow.up` (share), 24pt `ellipsis.circle` (more)
- All icon buttons are Notes Orange

**Folder Sidebar (iPad / iPhone deep navigation)**
- Hierarchical list — iCloud folder header → individual folders → custom folders → smart folders
- Each row: 44pt tall, leading folder glyph + name + trailing count
- Section headers in 13pt 600 uppercase Slate

### Input Fields

**Note Body Editor**
- Inline rich text editor with no chrome — the entire canvas is editable
- Cursor: 2pt vertical bar in Notes Orange, blinks every 600ms
- Selection: yellow highlight `#FFEB78` with rounded ends
- Long-press a word: pops the system text-selection magnifier + suggested actions (Cut/Copy/Paste/Look Up/Translate)

**Checklist Item**
- 24pt × 24pt empty circle with 1.5pt Slate stroke
- Tap to fill: animates to Notes Orange `#F09A38` fill with a white `checkmark` glyph + a subtle "tick" haptic
- The text strikes through and fades to 50% opacity over 300ms

### Distinctive Components

**The Yellow Folder (Apple's iconic mark)**
- The 80pt hero version appears at the top of the All Folders view as a centerpiece graphic
- The 24pt list version appears in every folder row
- Apple has used this exact yellow folder design in macOS Finder, iCloud Drive, and Files — it's a brand asset that crosses apps

**Pinned Note Strip**
- A horizontally-scrolling strip of pinned notes appears at the top of the note list (some users see this as a grid)
- Each pinned card: 160pt wide, 96pt tall, cream surface 1 background, 10pt corner radius
- Inside: title (15pt 600 Ink, 1 line) → preview (12pt 400 Slate, 3 lines)
- Pin glyph (Notes Orange `pin.fill` 11pt) in the top-right corner of each card

**Locked Note**
- When a note is locked, the row shows a 24pt yellow lock glyph `lock.fill` instead of the preview text
- Preview is replaced with "This note is locked." in 14pt 400 Slate italic
- Tap opens a Face ID / passcode prompt overlay

**Smart Folders**
- A small spark glyph `sparkles` 14pt in Notes Orange precedes smart folder names
- Smart folders appear in their own section "Smart Folders" with subtle italic in the header

**Recently Deleted Folder**
- A red-tinted variant of the standard folder glyph (fill `#FFB3AD`, stroke `#FF3B30`)
- 30-day countdown on each note: "Deletes in 27 days" in 12pt 400 red as the date row

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64
- Standard horizontal margin: 16pt in the list view, 20pt in the editor
- Section vertical gap: 24pt between Tags / Pinned / All Notes
- Note body line-height: 1.5 (Apple's most generous body line-height)

### Grid & Container
- List view: full-width single-column rows with 16pt outer margins
- Editor: single-column full-width content with 20pt horizontal margins on iPhone, 64pt on iPad (centered)
- Folder list on iPad: 280pt-wide sidebar pinned to the left

### Whitespace Philosophy
- **Generous body breathing** — 1.5 line-height on the note body is the calmest body in any iOS app
- **Tight list rows** — 84pt rows with title/preview/date stacked at 2-4pt internal gaps
- **No card chrome in the editor** — the canvas IS the paper; no card, no border, just the cream
- **Large title is the gravity** — 34pt 800 Heavy "Notes" anchors the screen visually

### Border Radius Scale
- Square (0pt): note list rows, editor canvas
- Small (4pt): badges
- Medium (10pt): search bar, pinned card thumbnails
- Standard (12pt): primary CTAs, format picker chips
- Comfortable (16pt): tag chips (half-height pill effect), modal sheets
- Tab-folder shape: a custom path — the iconic yellow folder glyph
- Circle (50%): FAB, checklist circles

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | List rows, editor canvas, folder rows |
| Subtle (Level 1) | `rgba(0,0,0,0.04) 0 1px 3px` | Pinned card press states |
| Folder Lift (Level 2) | A 0.5pt warm-cream inner highlight + 2pt drop | The yellow folder glyph (depth illusion) |
| FAB (Level 3) | `rgba(240,154,56,0.30) 0 4px 12px` | New Note FAB (orange-tinted shadow) |
| Sheet (Level 4) | `rgba(0,0,0,0.16) 0 -8px 24px` | Format picker, share sheet |
| Blur Material | `.regularMaterial` over canvas | Nav bar on scroll, bottom toolbar |

**Shadow Philosophy**: Notes is *paper*, not material. Shadows are nearly invisible. The only meaningful elevation is the New Note FAB, which casts an *orange-tinted* shadow to feel like the button is glowing with the brand color. The yellow folder glyph has a hand-painted depth illusion (warm-cream inner highlight + 2pt drop), which is the most "designed" part of the app.

### Motion
- **Note row tap**: scale 0.99 briefly, then the note editor slides in from the right at 350ms cubic-bezier
- **New Note FAB tap**: scale 0.95 → 1.05 → 1.0 over 250ms spring, paired with `.impactOccurred(.medium)`
- **Checklist toggle**: circle fills with Notes Orange via a 200ms scale animation (0 → 1.0), text strike-through animates over 300ms ease-out, `.notificationOccurred(.success)` haptic
- **Pin / Unpin swipe**: row slides left to reveal the pin button; tap triggers `.impactOccurred(.light)` and the row animates to/from the Pinned section over 400ms spring
- **Cursor blink**: 600ms steady cycle on the orange cursor
- **Search field expand**: on focus, the search bar expands to full width; the "Cancel" button slides in from the right at 250ms ease-out
- **Folder yellow tilt**: at the top of the All Folders view, the giant yellow folder gets a subtle 2-degree forward tilt that responds to device tilt via CoreMotion parallax (very slight, <5 degrees max)
- **Tab switch (folders → notes)**: no tab bar in Notes — navigation is push/pop hierarchical with the standard iOS slide transition

## 7. Do's and Don'ts

### Do
- Use `#FFFBED` Notes Cream as the canvas — warmer than white by ~3%, gives the app its paper feel
- Use Notes Orange `#F09A38` for the primary action — FAB, folder glyph stroke, link color, cursor color, selection accent
- Render every folder as the iconic 3D yellow tab-folder with `#F5D773` fill and `#F09A38` stroke
- Use SF Pro across the entire app — no custom typography
- Use SF Pro Display 34pt 800 Heavy for the large "Notes" nav title — this is what distinguishes Notes from other Apple apps
- Use 17pt 400 with 1.5 line-height for note body — the most generous body in any iOS app
- Use the three-line note row pattern: title (Semibold 16pt) → preview (Regular 14pt Slate) → date (Regular 12pt Slate)
- Use `#FFEB78` Yellow as the default highlight color inside note body
- Use the orange-tinted shadow `rgba(240,154,56,0.30) 0 4px 12px` on the New Note FAB — never a neutral shadow
- Use the cream surface family (`#FAF6E3`, `#F2EDD6`) for search bar, press states, pinned section background

### Don't
- Don't use pure white `#FFFFFF` for the canvas — Notes is warmer than that
- Don't use a custom font — Notes is system-typography only
- Don't add a bottom tab bar — Notes uses hierarchical navigation (folders → notes → editor)
- Don't break the three-line note row pattern — title + preview + date is the canonical layout
- Don't use Notes Orange `#F09A38` as a section background — it's an action color, not a fill
- Don't replace the yellow folder glyph with a different color or icon — the yellow folder is a cross-app Apple brand asset
- Don't compress note row height below 84pt — the breathing room is part of the calm
- Don't use card chrome in the editor — the canvas IS the paper, no border or card
- Don't use Selection Yellow `#FFEB78` outside of text-selection highlights — it's reserved for that specific use
- Don't make the FAB shadow neutral — the orange-tinted shadow is part of the brand

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Pinned section becomes a single column instead of horizontal scroll |
| iPhone 13/14/15 | 390pt | Standard 84pt rows; 16pt outer margins |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected; large nav title nudges down 8pt |
| iPhone 15/16 Pro Max | 430pt | Pinned cards can show 4 across instead of 3 |
| iPad | 768pt+ | Three-pane split view: folders sidebar (280pt) + note list (320pt) + editor (flex) |

### Dynamic Type
- All text scales — note titles, body, preview, date, folder names. Notes is one of the most Dynamic-Type-friendly apps because of its age-demographic skew
- **Fixed**: tag chip labels, toolbar labels, search placeholder — layout-sensitive

### Orientation
- iPhone: portrait-locked on the note list and editor (though the editor rotates if you really insist)
- iPad: supports both orientations; in landscape, the 3-pane split view shows all three columns simultaneously

### Touch Targets
- Note row: full 84pt tap target
- FAB: 56pt visual, 44pt minimum tap target met easily
- Folder row: 44pt tap target
- Toolbar buttons: 44pt × 44pt minimum
- Tag chips: 32pt visual, 44pt hit slop minimum

### Safe Area Handling
- Top: large nav title starts at safe-area top + 16pt
- Bottom: FAB sits 16pt from the bottom safe-area inset; toolbar honors home indicator
- Sides: 16pt content insets on phone, 20-64pt on iPad

## 9. Quick Reference Cheat Sheet

### Color Quick Reference
- Notes Cream (canvas): `#FFFBED`
- Cream Surface 1: `#FAF6E3`
- Cream Surface 2: `#F2EDD6`
- Divider Light: `#EDEAD8`
- Notes Orange: `#F09A38`
- Notes Orange Pressed: `#D87E1F`
- Notes Orange Tint (bg): `#FFF1DD`
- Folder Yellow (glyph fill): `#F5D773`
- Highlight Yellow (text selection): `#FFEB78`
- Ink (primary text): `#1C1C1E`
- Slate (secondary text): `#8E8E93`
- Dark Paper (dark canvas): `#1A1A1A`
- Dark Surface 1: `#262626`
- Success Green: `#34C759`
- Error Red: `#FF3B30`

### Example Component Prompts
- "Create a SwiftUI Apple Notes note row: 84pt tall, `#FFFBED` background. Three-row stack: title 'Grocery list' in SF Pro Text 16pt Semibold `#1C1C1E` (1-line truncate), 4pt gap, preview 'Milk, eggs, butter, sourdough bread...' in 14pt 400 `#8E8E93` (1-line truncate), 2pt gap, date 'Yesterday' in 12pt 400 `#8E8E93`. 16pt horizontal padding, 0.5pt `#EDEAD8` divider at the bottom. Swipe-left reveals Pin (Notes Orange), Add to Folder (gray), Delete (red `#FF3B30`)."
- "Build the iconic Apple Notes folder glyph: a tab-folder shape, 24pt at row size. Fill is `#F5D773` Folder Yellow, 1pt `#F09A38` Notes Orange stroke. Add a 0.5pt lighter `#FAE8A0` inner highlight along the top edge for depth, and a subtle 2-degree forward tilt. Render as a Path with the tab on the top-left rising 4pt above the body."
- "Design the New Note FAB: 56pt circle, `#F09A38` Notes Orange fill, white `square.and.pencil` SF Symbol at 24pt. Position: 16pt from bottom-right safe area. Shadow: `rgba(240,154,56,0.30) 0 4px 12px` — orange-tinted, not neutral. Tap: scale 0.95 → 1.05 → 1.0 over 250ms spring with `.impactOccurred(.medium)` haptic."
- "Create the Apple Notes editor canvas: full-width SF Pro Text 17pt 400 body on a `#FFFBED` canvas, line-height 1.5, 20pt horizontal padding. Cursor is a 2pt vertical bar in `#F09A38` Notes Orange that blinks every 600ms. Text selection highlight is `#FFEB78` Yellow with rounded ends. Inline title at top in 20pt 600 Ink, then a 4pt gap before the body."
- "Build the tag chip strip: horizontal scroll of pill-shaped chips. Each chip: 32pt tall, `#FFF1DD` background, 16pt corner radius, padding 6pt vertical / 12pt horizontal. Label 'recipes' in SF Pro Text 14pt 500 `#F09A38` with a leading `#` glyph. Selected: background flips to `#F09A38` with white text. 8pt spacing between chips."

### Iteration Guide
1. Canvas is `#FFFBED` Notes Cream — never pure white; warmer by ~3% for paper feel
2. Primary action is Notes Orange `#F09A38` — FAB, folder stroke, cursor color, link
3. Render the yellow folder glyph (`#F5D773` fill, `#F09A38` stroke) — it's a cross-app Apple brand asset
4. SF Pro everywhere — no custom typography; SF Pro Display 34pt 800 Heavy on the large nav title
5. Note body: 17pt 400 with 1.5 line-height — Apple's calmest body
6. Three-line note row: title (Semibold) + preview (Slate) + date (Slate)
7. Highlight Yellow `#FFEB78` is reserved for text selection inside note body
8. The New Note FAB shadow is orange-tinted, not neutral — `rgba(240,154,56,0.30) 0 4px 12px`
9. No bottom tab bar — Notes uses hierarchical navigation (folders → notes → editor)
10. Dark mode is Dark Paper `#1A1A1A` — true dark gray, not pure black, preserves paper feel