Apple Notes DESIGN.md

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

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

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

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