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
9type steps
2radius steps
6pxspacing base
Apple Notes, in one page
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)
Do's and don'ts
Do
- Use
#FFFBEDNotes Cream as the canvas — warmer than white by ~3%, gives the app its paper feel - Use Notes Orange
#F09A38for the primary action — FAB, folder glyph stroke, link color, cursor color, selection accent - Render every folder as the iconic 3D yellow tab-folder with
#F5D773fill and#F09A38stroke - 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
#FFEB78Yellow as the default highlight color inside note body - Use the orange-tinted shadow
rgba(240,154,56,0.30) 0 4px 12pxon 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
#FFFFFFfor 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
#F09A38as 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
#FFEB78outside 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
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 Apple Notes design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Notes Cream: #fffbed
- Dark Paper: #1a1a1a
- Notes Orange: #f09a38
- Notes Orange Pressed: #d87e1f
- Notes Orange Tint: #fff1dd
- Folder Yellow: #f5d773
- Cream Surface 1: #faf6e3
- Cream Surface 2: #f2edd6
- Divider Light: #edead8
- Dark Surface 1: #262626
Type:
- families: SF Pro, SF Mono, Mono, SF Pro Display
- scale: 11, 12, 14, 15, 16, 17, 20, 22, 34
- weights: 400, 500, 600, 700
Shape:
- radius: 10, 12
- elevation: Shadow: `rgba(240,154,56,0.30) 0 4px 12px` — orange-tinted shadow
Spacing: 6, 12, 20, 24
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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)
Type scaleRead the full spec
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 —
#8E8E93for 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
Components and layoutRead the full spec
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:
#F09A38Notes 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:
#F09A38Notes Orange, SF Pro 17pt 400 - No background, 44pt tap slop
- Used in nav bars and inline lists
Inline Action Pill (toolbar)
- 36pt circle,
#FAF6E3background (cream surface 1) - Glyph: 18pt SF Symbol,
#1C1C1E - Pressed: background
#F2EDD6
Cards & Containers
Note Row (the centerpiece of the list view)
- Height: 84pt
- Background:
#FFFBEDNotes Cream (light) /#1A1A1ADark 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
#EDEAD8divider 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.fill11pt Notes Orange glyph inline before the title - A subtle warm-cream background tint
#FAF6E3distinguishes pinned rows from regular rows
Folder Row (folder list view)
- Height: 44pt
- Background:
#FFFBED - Leading: 24pt yellow folder glyph in
#F5D773with a 1pt#F09A38stroke (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
#FAE8A0along 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
magnifyingglassSlate - Placeholder: "Search" SF Pro 17pt 400 Slate
- Trailing: 14pt
mic.fillSlate (voice search) - Focused: border 2pt
#F09A38
Tag Chip (above pinned)
- A horizontal scroll of orange-tinted hash chips
- Each chip: 32pt height,
#FFF1DDbackground, 16pt corner radius, padding 6pt vertical / 12pt horizontal - Label: "#recipes" SF Pro 14pt 500
#F09A38 - 8pt gap between chips
- Selected state:
#F09A38background with white text
Note Body Canvas (editor)
- Background:
#FFFBEDNotes 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:
#FFFBEDwith.regularMaterialblur 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:
#FFFBEDwith.regularMaterialblur and a 0.5pt#EDEAD8top 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);.regularMaterialblur 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.circlemore 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), 24ptsquare.and.arrow.up(share), 24ptellipsis.circle(more) - All icon buttons are Notes Orange
Folder Sidebar (iPad / iPhone deep navigation)
Responsive behaviourRead the full spec
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-apple-notes {--page-bg: #fffbed;
--page-bg-gradient: none;
--text-color: #1c1c1e;
--heading-color: #1c1c1e;
--link-color: #876c00;
--link-hover-color: #544300;
--border-color: #d6d3c8;
--card-bg: #fffbed;
--card-shadow: 0 1px 2px rgba(28,28,30,0.06);
--card-hover-shadow: 0 6px 18px rgba(28,28,30,0.12);
--header-bg: #1c1c1e;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #fffbed;
--footer-text-color: #6b6a66;
--button-bg: #ffcc00;
--button-text-color: #000000;
--button-hover-bg: #cca300;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #f1eee1;
--button-secondary-text-color: #1c1c1e;
--button-secondary-hover-bg: #e4e0d4;
--button-secondary-border: 1px solid #d6d3c8;
--prompt-bg: #f4f0e3;
--prompt-text-color: #1c1c1e;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 12px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/productivity/apple-notes/DESIGN.md· 24.9 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.