designmd-forge 1.2.0

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

@@ -0,0 +1,416 @@
+# Design System Inspiration of Evernote (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Evernote's iOS app is a **calm, long-form reading and capture surface**. It is the original "second brain" — a place where notes accumulate over years — so the design system optimizes for *legibility, reassuring structure, and a single confident brand color*. The atmosphere is "organized notebook": a clean near-white reading canvas (or a deep near-black in dark mode), generous line-height for body text, hairline list dividers, and exactly one saturated brand color — Evernote Green `#00A82D` — used for the elephant logo, the floating new-note button, checkboxes, links, and primary actions. Nothing competes with the user's content.
+
+The signature surface is the **note editor** paired with the **note list**. The note editor is an almost chrome-free document: a back affordance and overflow menu at top, then the note title in 24pt bold, a thin metadata line ("Updated May 16 · Work notebook"), a row of green tag pills, and the body — paragraphs, headings, checklists (green-filled checkbox when done, strikethrough text), tables, attachments — at a comfortable 16pt with 1.6 line-height. A **format toolbar** docks above the keyboard with Bold/Italic/List/Checklist/Attach/Link controls. Tapping back returns to the **note list**: vertical rows of note cards, each a title (15pt semibold), a 1-2 line content snippet (14pt secondary), a date + notebook line, and an optional 52pt thumbnail. Editor ⇄ list is the loop the app orbits.
+
+The organizational model is **notebooks and stacks**. Notes live in notebooks; notebooks group into stacks. These appear as a dedicated tab — notebook rows with a small colored notebook-spine icon, a name, and a note count; stacks expand to reveal their notebooks. **Tags** are the cross-cutting dimension: lightweight green-tinted pill chips attached to notes and browsable as their own list. The bottom navigation is Home (a customizable dashboard of recent notes, pinned notes, and shortcuts), Notes (the all-notes list), a center **green circular FAB** for new note / capture, Notebooks, and Search (Evernote's powerful full-text + OCR search is a first-class destination).
+
+Typography is a clean humanist sans — Evernote's product UI uses a system-leaning stack; on iOS it renders SF Pro, with **Inter** the closest free analog and a faithful match for the calm, readable hierarchy. Sizing is editorial-leaning: screen titles at 28-32pt bold, note title at 24pt bold, note headings at 17-20pt bold, body at 16pt regular with roomy 1.6 leading, list titles at 15pt semibold, snippets and metadata at 12-14pt. Reading comfort drives every type decision.
+
+**Key Characteristics:**
+- Single brand color — Evernote Green (`#00A82D`) for logo, FAB, checkboxes, links, primary actions
+- Note editor + note list as the atomic surface — near chrome-free document ⇄ scannable list
+- Green circular floating action button (FAB) centered in the bottom bar — new note / capture
+- Tags as green-tinted pill chips — lightweight, cross-cutting, browsable
+- Notebooks + stacks organizational model — colored notebook-spine icons with note counts
+- Light mode is near-white (`#FFFFFF` / `#FAFAFA`); dark mode is true near-black (`#1C1C1E`) for reading comfort
+- Warm Evernote ink `#1C2B33` for primary text on light — not pure black
+- Roomy 1.6 body line-height — built for long-form reading
+- Checklists with green-filled checkboxes + strikethrough completed text
+- Format toolbar docked above the keyboard (Bold / Italic / List / Checklist / Attach / Link)
+- Home dashboard — pinned notes, recents, shortcuts widgets
+- First-class Search — full-text, OCR, handwriting, tag, notebook filters
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Evernote Green** (`#00A82D`): Primary brand & action color — logo, FAB, primary CTA, checkbox fill, links (light mode).
+- **Evernote Green Bright** (`#2DBE60`): Brighter interactive green for dark surfaces — links, active tab, checkbox fill on dark.
+- **Evernote Green Pressed** (`#007A20`): Pressed state of primary buttons & FAB.
+- **Evernote Green Deep** (`#108A00`): Legacy/secondary green accent (older brand green, used on some marketing surfaces).
+
+### Canvas & Surfaces (Light Mode)
+- **Canvas White** (`#FFFFFF`): Primary light canvas — note editor.
+- **Surface Off-White** (`#FAFAFA`): List background, app chrome behind note rows.
+- **Surface Raised** (`#FFFFFF`): Note list rows, cards (white with 1px divider).
+- **Surface Pressed** (`#F1F2F2`): Pressed/selected rows, hovered notebook rows.
+- **Divider** (`#E4E5E5`): Hairline dividers between note rows and sections.
+- **Border** (`#DCDEDE`): Input borders, card edges.
+
+### Canvas & Surfaces (Dark Mode)
+- **Dark Canvas** (`#1C1C1E`): Primary dark canvas — true near-black reading surface.
+- **Dark Surface 1** (`#242426`): Note rows, raised surfaces.
+- **Dark Surface 2** (`#2E2E30`): Toolbars, input fields, notebook rows.
+- **Dark Surface 3** (`#3A3A3C`): Pressed states, thumbnail placeholder.
+- **Dark Divider** (`#38383A`): Hairline dividers.
+
+### Text
+- **Text Primary Light** (`#1C2B33`): Primary body & title text — Evernote warm ink, NOT pure black.
+- **Text Secondary Light** (`#5C6970`): Snippets, secondary metadata.
+- **Text Tertiary Light** (`#8C969C`): Dates, placeholder, low-emphasis.
+- **Text Disabled Light** (`#B8C0C4`): Disabled labels.
+- **Text Primary Dark** (`#E4E4E6`): Primary body on dark (not pure white — reading comfort).
+- **Text Secondary Dark** (`#9A9A9E`): Snippets/secondary on dark.
+- **Text Tertiary Dark** (`#6E6E72`): Dates/placeholder on dark.
+
+### Tag Chips
+- **Tag Light** (`#E6F4EA` bg / `#1F7A33` text): Green-tinted pill on light.
+- **Tag Dark** (`#1C3A24` bg / `#5FD68A` text): Green-tinted pill on dark.
+
+### Notebook Spine Accents
+Notebook icons rotate through a calm accent set: Green `#00A82D`, Blue `#2F80ED`, Yellow `#F6C544`, Red `#E5484D`, Purple `#7A5AF8`, Teal `#1AAE9F`, Gray `#8C969C`.
+
+### Semantic
+- **Info / Link Blue** (`#2F80ED`): Inline hyperlinks within note body, info banners.
+- **Success Green** (`#00A82D`): Save-success toast, sync-complete check.
+- **Warning Amber** (`#F6A609`): Sync-conflict / quota warnings.
+- **Error Red** (`#E5484D`): Delete confirmation, sync error, destructive actions.
+- **Highlight Yellow** (`#FFF3B0` light / `#5A4A12` dark): Text highlight in note body.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: System humanist sans — `SF Pro Text` / `SF Pro Display` on iOS (Evernote uses the platform system stack for body/UI legibility).
+- **Closest Free Analog**: `Inter` (by Rasmus Andersson, SIL OFL) — calm humanist sans, excellent at long-form reading sizes; faithful to Evernote's UI rhythm.
+- **Mono**: `SF Mono` / `Roboto Mono` — used in code blocks within notes.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title | SF Pro / Inter | 28-32pt | 700-800 | 1.2 | -0.4pt | "Notes", "Notebooks" — large nav title |
+| Note Title | SF Pro / Inter | 24pt | 700 | 1.25 | -0.3pt | Title field in the note editor |
+| Note Heading 1 | SF Pro / Inter | 20pt | 700 | 1.3 | -0.2pt | In-note H1 |
+| Note Heading 2 | SF Pro / Inter | 17pt | 700 | 1.35 | -0.1pt | In-note H2 |
+| Body | SF Pro / Inter | 16pt | 400 | 1.6 | 0pt | Note paragraph — roomy reading leading |
+| List Title | SF Pro / Inter | 15pt | 600 | 1.3 | 0pt | Note row title in the list |
+| Checklist Item | SF Pro / Inter | 15pt | 400 | 1.45 | 0pt | Strikethrough + tertiary when done |
+| Snippet / Secondary | SF Pro / Inter | 14pt | 400 | 1.4 | 0pt | Note row content preview |
+| Tag / Caption | SF Pro / Inter | 12pt | 600 | 1.2 | 0.1pt | Tag pill text, captions |
+| Meta | SF Pro / Inter | 12pt | 400 | 1.3 | 0pt | "Updated · Notebook", dates |
+| Button | SF Pro / Inter | 15pt | 600 | 1.0 | 0pt | Primary/secondary buttons |
+| Tab Label | SF Pro / Inter | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
+| Code | SF Mono | 14pt | 400 | 1.5 | 0pt | Code block in note body |
+
+### Principles
+- **Reading comfort first**: body text is 16pt at 1.6 line-height — never tighten note body leading below 1.5.
+- **Editorial hierarchy**: note title → H1 → H2 → body mirrors document structure, not product-chrome structure.
+- **Weight ladder 400 / 500 / 600 / 700**: regular body, medium tabs, semibold list titles & buttons, bold titles & headings. No thin, no black.
+- **Completed checklist items recede**: strikethrough + tertiary color, never deleted from view.
+- **Dynamic Type on content, fixed on chrome**: note title/headings/body/snippets scale; tab labels, tag pills stay fixed.
+- **Snippet clamp**: note-list content preview clamps to 2 lines with ellipsis.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (New Note / Save / primary CTA)**
+- Shape: Rounded rectangle, 8pt corner radius
+- Background: `#00A82D` light & dark (brand green holds; on dark the surrounding contrast suffices)
+- Text: `#FFFFFF`, 15pt weight 600
+- Padding: 13pt vertical, 26pt horizontal
+- Pressed: background `#007A20` + 0.98 scale
+- Disabled: background `#B8C0C4` / `#3A3A3C`, text 60% opacity
+
+**Floating Action Button (FAB — new note / capture)**
+- Shape: Circle, 52pt diameter, centered in bottom bar (overlaps tab strip by ~8pt)
+- Background: `#00A82D`; icon: white `plus` 24pt weight 600
+- Shadow: `0 6px 16px rgba(0,168,45,0.40)`
+- Tap: opens capture sheet (Note / Camera / Audio / Reminder); long-press: quick-action radial
+- Pressed: `#007A20` + 0.96 scale
+
+**Outline / Secondary Button (Upgrade / promo)**
+- Background: transparent
+- Border: 1.5pt `#00A82D`
+- Text: `#1F7A33` light / `#2DBE60` dark, weight 600, 14pt, 8pt radius
+- Pressed: faint `#E6F4EA` / `#1C3A24` fill
+
+**Subtle Button (Move to notebook / secondary action)**
+- Background: `#F1F2F2` light / `#2E2E30` dark
+- Text: `#1C2B33` / `#E4E4E6`, weight 500, 14pt, 8pt radius
+- Pressed: one surface step darker
+
+**Text / Link Button (Share note)**
+- No background/border
+- Text: `#1F7A33` light / `#2DBE60` dark, weight 600, 14pt
+- Pressed: underline
+
+### Core Atoms
+
+**Tag Pill**
+- Shape: full pill (500pt radius)
+- Padding: 3pt vertical, 9pt horizontal
+- Text: 12pt weight 600
+- Color: `#E6F4EA`/`#1F7A33` light, `#1C3A24`/`#5FD68A` dark
+- Tappable → filters note list by tag; "×" on tag in edit mode
+
+**Checkbox (checklist)**
+- Unchecked: 19pt rounded square (5pt radius), 2pt `#8C969C` border, transparent fill
+- Checked: filled `#00A82D` (`#2DBE60` dark), white check glyph, item text strikethrough + tertiary color
+- 44pt hit area; tap toggles with spring + light haptic
+
+**Notebook Spine Icon**
+- 22pt glyph: a rounded rectangle "book" with a darker spine stripe in the notebook's accent color
+- Stack icon: layered/folder glyph in accent color
+
+**Note Thumbnail**
+- 52pt rounded square (8pt radius); shows first image/attachment or a typed-content placeholder (`#F1F2F2` / `#3A3A3C`)
+
+**Avatar (shared notes / people)**
+- Circle, 28pt, initials or photo, calm accent background
+
+### Note Card / List Row
+
+- Surface: `#FFFFFF` light / `#242426` dark on a `#FAFAFA`/`#1C1C1E` background
+- Divider: 1px `#E4E5E5` / `#38383A` between rows (rows, not boxed cards)
+- Padding: 14pt vertical, 4-16pt horizontal
+- Structure: left text column — title (15pt/600, 1-line), snippet (14pt secondary, 2-line clamp), date + notebook (12pt tertiary); right — optional 52pt thumbnail
+- Pinned variant: leading green pin glyph
+- Swipe actions: leading = pin / move; trailing = delete (red) / tag
+- Selected (multi-select): leading green check, row tint `#E6F4EA`/`#1C3A24`
+
+### Navigation
+
+**Bottom Tab Bar (with center FAB)**
+- Height: 56pt + safe area
+- Background: `#FFFFFF` / `#1C1C1E` with 0.5pt top border `#E4E5E5` / `#38383A`
+- 5 slots: Home, Notes, [FAB], Notebooks, Search
+- Tab icon: 22-24pt; active fill, inactive stroke
+- Active color: `#00A82D` light / `#2DBE60` dark; inactive `#8C969C` / `#6E6E72`
+- Labels: 10pt weight 500, always shown
+- Center FAB: 52pt green circle, raised above the strip
+
+**Note Editor Top Bar**
+- Height: 44pt + safe area
+- Leading: back chevron + "Notes" label (green)
+- Trailing: info/details icon + overflow ⋯ (share, move, tags, delete, reminder)
+- Title and body scroll under the bar; bar stays minimal
+
+**Note List Top Bar**
+- Large title ("Notes"), trailing sort/filter + view toggle (list/snippet/grid)
+- Search field appears on pull-down
+
+**Format Toolbar (above keyboard)**
+- Docked accessory bar, `#FFFFFF`/`#2E2E30`, 0.5pt top divider, ~48pt tall
+- Controls: Bold, Italic, Lists, Checklist, Heading, Attach, Photo, Table, Link, Highlight
+- Active control tinted green `#2DBE60`
+
+### Input Fields
+
+**Search Field**
+- Height: 40pt
+- Background: `#F1F2F2` light / `#2E2E30` dark (filled, not bordered)
+- Corner radius: 10pt
+- Leading icon `magnifyingglass` 16pt tertiary
+- Placeholder: 15pt `#8C969C` / `#6E6E72` ("Search notes")
+- Focus: 1.5pt `#00A82D`/`#2DBE60` border ring
+
+**Note Title Field**
+- Borderless, 24pt weight 700, placeholder "Title" in tertiary
+
+**Inline Text Body**
+- Borderless rich-text region, 16pt/1.6, placeholder "Start writing…" in tertiary
+- Selection highlight: `#E6F4EA` / `#1C3A24`
+
+**Sheet Field (move/notebook picker rows)**
+- 48pt rows, leading accent icon, title 16pt, trailing chevron or selected check (green)
+
+### Distinctive Components
+
+**Note Editor**
+- Chrome-free document: title → meta line → tag pills → rich body (paragraphs, H1/H2, checklists, tables, dividers, attachments, code, highlight)
+- Format toolbar docks above keyboard while editing
+- Tap meta line to change notebook; tap tag area to add tags
+
+**Home Dashboard**
+- Customizable widget stack: "Recently viewed" horizontal note cards, "Pinned Notes", "Notebooks" shortcuts, "Scratch pad", "Tasks"
+- Each widget a 14pt-radius card on the canvas with a header + edit affordance
+
+**Notebooks & Stacks Screen**
+- List of notebooks (spine icon + name + count) and stacks (expandable group header with chevron + aggregate count)
+- "New notebook" / "New stack" primary actions
+
+**Tag Browser**
+- Alphabetical / frequency list of tag pills with note counts; tap to see filtered notes
+
+**Search Surface**
+- Prominent search field; recent searches; scopes — All, Title, Tag, Notebook, Attachments
+- Results: note rows with matched-term highlight; OCR/handwriting matches indicated
+
+**Capture Sheet (from FAB)**
+- Bottom sheet: Text Note, Camera (document scan), Photo, Audio, Reminder, Templates
+- 20pt-radius sheet, large tappable rows with leading green icons
+
+**Reminder / Task Row**
+- Note with a due date: green clock glyph + relative date; overdue turns red `#E5484D`
+
+**Sync Status Pill**
+- Transient toast: spinner → green check "All notes synced" / amber "Conflict" / red "Sync error"
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48
+- Note row vertical padding: 14pt
+- Body paragraph spacing: 12-16pt; heading top margin: 20pt
+- Screen horizontal inset: 16pt; note editor body inset: 22pt (extra reading margin)
+- Section gap: 24pt
+
+### Grid & Container
+- iPhone: 16pt list insets; 22pt editor body insets for reading line-length comfort
+- iPad: 3-pane — Notebooks/sidebar + note list + note editor at ≥768pt
+- Note editor max readable width: ~680pt centered on large screens
+- Home dashboard: single-column widget stack on phone, 2-column on iPad
+
+### Whitespace Philosophy
+- **Content is sacred**: chrome recedes so the note reads like clean paper (or a clean dark page)
+- **Roomy reading rhythm**: 1.6 body leading + 22pt editor margins — long notes never feel cramped
+- **Hairlines over boxes**: note rows separated by 1px dividers, not nested cards
+- **One color rationed**: neutral canvas + a single green means green always reads as "Evernote / action / done"
+
+### Border Radius Scale
+- Square (0pt): full-bleed dividers, note body region
+- Subtle (5pt): checkboxes, small inline chips
+- Standard (8pt): buttons, thumbnails, list-item containers
+- Comfortable (10pt): search field, input fields
+- Card (14pt): home dashboard widgets, modals
+- Sheet (20pt): bottom sheets (capture, move, share)
+- Pill (500pt): tag chips, segmented toggles
+- Circle (50%): FAB, avatars
+
+## 6. Depth & Elevation
+
+Evernote is mostly flat — elevation marks the FAB and transient/floating surfaces only.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (0) | No shadow; 1px divider only | Note rows, list, note body, notebook rows |
+| Raised (1) | `0 1px 3px rgba(28,43,51,0.10)` | Home dashboard widget cards, hovered rows |
+| FAB (2) | `0 6px 16px rgba(0,168,45,0.40)` | Floating action button (green-tinted) |
+| Menu (3) | `0 8px 20px rgba(28,43,51,0.16)` | Overflow menus, dropdowns, popovers |
+| Sheet/Modal (4) | `0 -8px 28px rgba(28,43,51,0.18)` + `rgba(28,43,51,0.45)` scrim | Capture sheet, move/share sheets |
+
+**Shadow Philosophy**: Shadows are tinted with Evernote ink (`rgba(28,43,51,…)`) on light to stay calm and cool. The FAB is the one exception that gets a green-tinted glow so it reads as the primary affordance. On dark mode shadows nearly vanish, so elevation is signaled by the surface step (`#242426` → `#2E2E30` → `#3A3A3C`) plus a 1px border on menus and sheets.
+
+### Motion
+- **Note open (list → editor)**: iOS native push, 300ms horizontal slide; title cross-fades from row to editor
+- **Checkbox toggle**: box fills with a 150ms spring scale-up; text strikethrough draws over 120ms; light haptic
+- **FAB tap → capture sheet**: sheet slides up 300ms ease-out; FAB scales 0.96 then back; backdrop scrim fades in
+- **FAB long-press**: quick-action radial expands over 180ms with soft haptic
+- **Swipe actions**: 1:1 finger tracking; action buttons reveal; full-swipe triggers with medium haptic
+- **Pull-to-search**: list rubber-bands; search field slides down 200ms
+- **Sync toast**: fades + 8pt slide-up in; auto-dismiss after 2s with fade-out
+- **Section/stack expand**: chevron rotates 90° 150ms; rows expand height 0↔auto 200ms ease-out
+- **Tag add**: pill scales in from 0.8 over 150ms ease-out
+- **Haptics**: light on checkbox toggle & tab change; medium on swipe-action commit & note delete; soft on FAB long-press
+- **Reduce Motion**: replace slides/scale with crossfades; keep instant state changes; checkbox toggles without spring
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Evernote Green (`#00A82D`) for logo, FAB, checkboxes, links, and primary actions only
+- Brighten interactive green to `#2DBE60` on dark surfaces for AA contrast
+- Keep the canvas neutral (near-white light / true near-black dark) so green always means "Evernote/action/done"
+- Render the new-note affordance as a centered green circular FAB raised above the tab bar
+- Use roomy 1.6 line-height for note body and 22pt editor side margins
+- Show tags as green-tinted pill chips
+- Use the notebook-spine icon with accent color + note count for notebook rows
+- Strike through + dim completed checklist items (never delete from view)
+- Use Evernote warm ink `#1C2B33` for primary text on light — not pure black
+- Use true near-black `#1C1C1E` for dark mode reading comfort — body text `#E4E4E6`, not pure white
+- Separate note rows with 1px hairline dividers, not nested cards
+- Dock the format toolbar above the keyboard while editing
+
+### Don't
+- Don't use green as a large background fill — it must read as "action/brand", not decoration
+- Don't introduce competing accent colors — one green + neutral grays + minimal semantic set
+- Don't tighten note-body line-height below 1.5 — reading comfort is the brand
+- Don't replace the FAB with a plain toolbar "+" — the raised green circle is signature
+- Don't use pure black text (`#000000`) on light — `#1C2B33` warm ink is correct
+- Don't use pure white body text on dark — `#E4E4E6` for long-form comfort
+- Don't pure-white the dark canvas to gray-charcoal — Evernote dark is a true near-black `#1C1C1E`
+- Don't box every note row in its own card — hairline dividers only
+- Don't hide completed checklist items — strike + dim, keep visible
+- Don't animate aggressively — motion is calm 150-300ms ease-out / soft spring
+- Don't drop pure-black shadows on light — tint with `rgba(28,43,51,…)` ink (FAB excepted: green glow)
+- Don't bury Search — it is a first-class bottom-tab destination
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Single-column list; editor margins reduce to 18pt |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top bar |
+| iPhone 15/16 Pro Max | 430pt | Wider editor margins (24pt); larger thumbnails |
+| iPad (portrait) | 768pt | 2-pane: note list + editor; notebooks as slide-over |
+| iPad (landscape) | 1024pt+ | 3-pane: notebooks sidebar + note list + editor; editor capped ~680pt |
+
+### Dynamic Type
+- Scales: screen titles, note title, headings, body, snippets, list titles, checklist text
+- Fixed: tab labels, tag pills, sync-toast text (chrome/layout-sensitive)
+- Code blocks scale to XL but stay monospace
+
+### Orientation
+- iPhone: portrait-primary; landscape widens reading column
+- iPad: split-view controller — sidebar + list + editor; all panes rotate; editor keeps max readable width
+
+### Touch Targets
+- Note row: full-row tap (≥64pt), swipe for actions
+- Checkbox: 19pt glyph, 44pt hit
+- FAB: 52pt circle, full hit
+- Tab icons: 22-24pt glyph, 44pt hit
+- Format toolbar controls: 24pt glyph, 44pt hit
+
+### Safe Area Handling
+- Top: editor/list bars respect safe area and Dynamic Island
+- Bottom: tab bar + FAB + home indicator respected; FAB sits above safe-area inset
+- Keyboard: format toolbar docks directly above keyboard; body scrolls above it
+- Sides: 16pt list inset, 22pt editor body inset
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary / Evernote Green: `#00A82D` · interactive on dark `#2DBE60` · pressed `#007A20`
+- Link blue: `#2F80ED`
+- Canvas: `#FFFFFF` light · `#1C1C1E` dark (true near-black)
+- Surface (off-white list bg): `#FAFAFA` light · note surface `#242426` dark
+- Surface raised (row): `#FFFFFF` light · `#242426` dark
+- Divider: `#E4E5E5` light · `#38383A` dark
+- Text primary: `#1C2B33` (Evernote ink) light · `#E4E4E6` dark
+- Text secondary: `#5C6970` light · `#9A9A9E` dark
+- Text tertiary: `#8C969C` light · `#6E6E72` dark
+- Tag pill: `#E6F4EA`/`#1F7A33` light · `#1C3A24`/`#5FD68A` dark
+- FAB shadow: `0 6px 16px rgba(0,168,45,0.40)`
+- Highlight: `#FFF3B0` light · `#5A4A12` dark
+
+### Example Component Prompts
+- "Build the Evernote note editor in SwiftUI: chrome-free document. Top bar 44pt — leading back chevron + 'Notes' in Evernote Green `#2DBE60`, trailing info + overflow ⋯. Body inset 22pt: note title TextField in 24pt weight 700 `#1C2B33` (`#E4E4E6` dark), then a 12pt tertiary meta line ('Updated May 16 · Work'), then a wrapping row of green tag pills (`#E6F4EA`/`#1F7A33`, full pill, 12pt/600). Rich body at 16pt weight 400 line-height 1.6. Dock a format toolbar above the keyboard (`#FFFFFF`/`#2E2E30`, 0.5pt top divider) with Bold/Italic/List/Checklist/Heading/Attach/Link, active control tinted `#2DBE60`."
+
+- "Create the Evernote checklist item: 19pt rounded-square checkbox (5pt radius). Unchecked = 2pt `#8C969C` border, transparent. Checked = filled `#00A82D` (`#2DBE60` dark) with a white check, and the item text (15pt/400) gets strikethrough + tertiary color. 44pt hit area; on tap, the box fills with a 150ms spring scale-up, the strikethrough draws over 120ms, and a light haptic fires. Completed items stay visible — never removed."
+
+- "Render the Evernote note list row: white `#FFFFFF` (`#242426` dark) on a `#FAFAFA`/`#1C1C1E` background, 1px `#E4E5E5`/`#38383A` bottom divider, 14pt vertical padding. Left column: title 15pt weight 600 `#1C2B33` (1 line), content snippet 14pt `#5C6970` (2-line clamp), date+notebook 12pt `#8C969C`. Right: optional 52pt rounded-square (8pt) thumbnail. Leading swipe = pin/move, trailing swipe = delete (red `#E5484D`)/tag, full-swipe with medium haptic."
+
+- "Build the Evernote bottom tab bar with center FAB: 56pt + safe area, `#FFFFFF`/`#1C1C1E`, 0.5pt top divider. Five slots — Home, Notes, [FAB], Notebooks, Search. Tab icons 22-24pt (active filled, inactive stroked), labels 10pt weight 500. Active tint `#00A82D` (light) / `#2DBE60` (dark), inactive `#8C969C`/`#6E6E72`. Center FAB: 52pt green `#00A82D` circle raised ~8pt above the strip, white `plus` 24pt, shadow `0 6px 16px rgba(0,168,45,0.40)`; tap opens a 20pt-radius capture sheet (Text / Camera / Photo / Audio / Reminder)."
+
+- "Create the Evernote tag pill: full pill (500pt radius), 3pt vertical / 9pt horizontal padding, text 12pt weight 600. Light = `#E6F4EA` bg / `#1F7A33` text; dark = `#1C3A24` bg / `#5FD68A` text. Tappable to filter the note list by that tag; in edit mode shows a trailing '×' to remove. New tag animates in scaling from 0.8 over 150ms ease-out."
+
+- "Render the Evernote notebooks screen: list of notebook rows — leading 22pt notebook-spine icon (rounded book + darker spine stripe in the notebook's accent color from {green `#00A82D`, blue `#2F80ED`, yellow `#F6C544`, red `#E5484D`}), name 16pt weight 600, trailing note count 12pt tertiary. Stacks render as expandable group headers with a leading chevron (rotates 90° on expand, 150ms) and an aggregate count; tapping expands the contained notebooks with a 200ms height animation."
+
+### Iteration Guide
+1. Canvas is neutral — near-white `#FFFFFF`/`#FAFAFA` light, true near-black `#1C1C1E` dark (reading comfort, NOT charcoal-gray)
+2. Text primary is Evernote warm ink `#1C2B33` light / `#E4E4E6` dark — never pure black/white
+3. Evernote Green `#00A82D` is brand+action only; brighten to `#2DBE60` for interactive elements on dark
+4. The new-note affordance is a centered green circular FAB raised above the tab bar — not a toolbar "+"
+5. Body line-height is 1.6 with 22pt editor side margins — reading comfort is the brand
+6. Tags are green-tinted pill chips; checkboxes fill green with strikethrough+dim on complete (kept visible)
+7. Note rows use 1px hairline dividers — never nested cards
+8. Notebooks use a colored spine icon + note count; stacks are expandable groups
+9. Format toolbar docks above the keyboard while editing, active control tinted green
+10. Motion is calm Evernote ease-out 150-300ms / soft spring; shadows ink-tinted on light (FAB = green glow), surface-step on dark