designmd-forge 1.2.0

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

@@ -0,0 +1,392 @@
+# Design System Inspiration of Grammarly (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Grammarly's iOS app is a *calm writing surface wrapped around an opinionated assistant*. The canvas is pure white (`#FFFFFF`) in light mode and a warm charcoal (`#121212`) in dark — never stark, because the product's job is to make your own prose feel comfortable to read while a quiet green assistant works in the margins. Open the editor and you see a near-frameless document: a serene title in Inter 22-26pt bold, body copy at 16pt with generous 1.65 line-height, and — the signature moment — words and phrases marked with **colored underlines**. Each underline is a category: a red squiggle for Correctness, a blue highlight for Clarity, a green dotted line for Engagement, a purple line for Delivery. Tapping any marked span slides up a **suggestion card** from the bottom: a small colored category dot, a strikethrough-old → green-new word swap, a one-sentence plain-language explanation, and a single green "Accept" pill with a circular dismiss. This card is the heartbeat of the entire app.
+
+The other two signature affordances are the **document score ring** — a thin circular gauge in the top-right showing an overall 0–100 number that fills Grammarly Green as the writing improves — and the **assistant bar** pinned to the bottom: a small green Grammarly orb (the rotated-G logomark), a running suggestion count ("14 suggestions · 3 Correctness · 6 Clarity · 5 Engagement"), and a "Review" CTA that walks the user card-by-card. Everything in the app routes through these three: the colored underline (where), the suggestion card (what), the assistant bar (how many left).
+
+The color system is monobrand and disciplined. There is exactly **one** brand accent — Grammarly Green (`#15C39A`, deepening to `#11A683`) — and it carries every primary action, the score ring, and the orb. There is no secondary brand color. Functional color lives entirely in the four **suggestion categories**: Correctness Red (`#E5484D`), Clarity Blue (`#3B82F6`), Engagement Green (`#16A34A`), Delivery Purple (`#8B5CF6`). These four hues never act as CTAs — they only color underlines, category dots, and inline highlights. Premium upsell uses a warm gold (`#E0A82E`). The restraint is the point: the assistant is helpful, not loud.
+
+Typography is a clean grotesque. Grammarly's product uses a humanist sans (Apercu in marketing, SF Pro / system on iOS); **Inter** is the closest free face and is used here. Hierarchy is editorial: screen title 32pt/800, document heading 22-26pt/700, card title 18pt/700, editor body 16pt/400 (the calm reading size), suggestion title 15pt/600, explanation 14pt/400, category tag 12pt/700 uppercase. Weight concentrates at 400/600/700/800 — regular for prose, semibold for suggestion titles, bold for headings, extrabold for screen titles. The type system is built to recede so the user's own words read cleanly.
+
+**Key Characteristics:**
+- Calm writing canvas — pure white (`#FFFFFF`) light / warm charcoal (`#121212`) dark, near-frameless editor
+- Single brand accent — Grammarly Green (`#15C39A` / `#11A683`); no secondary brand color
+- Color-coded suggestion underlines — red Correctness, blue Clarity, green Engagement, purple Delivery
+- Suggestion card — bottom card with category dot, strikethrough → green swap, explanation, green Accept pill
+- Document score ring — thin circular 0–100 gauge, top-right, fills Grammarly Green as writing improves
+- Assistant bar — pinned bottom strip: green orb + running suggestion count + Review CTA
+- Tone detector — emoji + tone pills ("Confident", "Formal") summarizing how the writing reads
+- Pill-shaped buttons everywhere — fully rounded (999pt) primary, secondary, premium
+- Inter / SF Pro type — editorial hierarchy, body at 16pt for calm reading
+- Premium gold (`#E0A82E`) for upsell — the only non-green, non-functional accent
+- Minimal chrome — back chevron, doc title, score ring up top; assistant bar at bottom; nothing else
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Grammarly Green** (`#15C39A`): The single brand accent — Accept buttons, score ring, assistant orb, active states, links.
+- **Green Deep** (`#11A683`): Deeper green for emphasis, gradient end, large fills.
+- **Green Pressed** (`#0E8A6D`): Pressed state of any green button.
+- **Green Tint** (`#15C39A1F`): 12% green wash behind selected suggestions and the accepted-state flash.
+
+### Suggestion Categories (Functional — underlines & dots only, NEVER CTAs)
+- **Correctness Red** (`#E5484D`): Grammar, spelling, punctuation — red squiggle underline + red dot.
+- **Clarity Blue** (`#3B82F6`): Wordiness, hard-to-read sentences — blue highlight + blue dot.
+- **Engagement Green** (`#16A34A`): Bland, repetitive language — green dotted underline + green dot.
+- **Delivery Purple** (`#8B5CF6`): Tone, formality, confidence — purple underline + purple dot.
+
+### Premium / Upsell
+- **Premium Gold** (`#E0A82E`): "Try Premium", premium-only suggestion lock, upgrade banners.
+- **Premium Gold Pressed** (`#C8941F`): Pressed state.
+
+### Canvas & Surfaces (Light Mode)
+- **Canvas White** (`#FFFFFF`): Primary editor canvas.
+- **Surface 1** (`#F7F8F8`): Suggestion cards, settings rows, elevated panels.
+- **Surface 2** (`#EEF0F0`): Pressed rows, tone pills, secondary chips.
+- **Divider** (`#E4E6E6`): Hairline separators.
+
+### Canvas & Surfaces (Dark Mode)
+- **Dark Canvas** (`#121212`): Primary dark editor — warm charcoal, NOT pure black.
+- **Dark Surface 1** (`#1C1C1E`): Suggestion cards, settings rows.
+- **Dark Surface 2** (`#262629`): Pressed rows, tone pills.
+- **Dark Divider** (`#2C2C2E`): Hairline separators.
+
+### Text
+- **Text Primary Light** (`#1A1A1A`): Editor body, headings — near-black, slightly warm.
+- **Text Secondary Light** (`#6B6B70`): Explanations, metadata, tone labels.
+- **Text Tertiary Light** (`#9A9A9F`): Placeholders, disabled.
+- **Text Primary Dark** (`#E4E4E4`): Editor body on dark.
+- **Text Secondary Dark** (`#9A9A9F`): Secondary text on dark (shared with light tertiary).
+- **Text Tertiary Dark** (`#6A6A6E`): Disabled on dark.
+
+### Underline / Highlight Roles
+
+| Role | Light Mode | Dark Mode | Treatment |
+|------|-----------|-----------|-----------|
+| Correctness | `#E5484D` | `#F05A5F` | 2pt solid squiggle underline |
+| Clarity | `#3B82F6` | `#5A95F8` | 18% fill highlight + 2pt underline |
+| Engagement | `#16A34A` | `#22B85A` | 2pt dotted underline |
+| Delivery | `#8B5CF6` | `#A07CF8` | 2pt solid underline |
+| Accepted flash | `#15C39A1F` | `#15C39A24` | 12% green wash, 600ms fade |
+
+### Semantic
+- **Error Red** (`#E5484D`): Sync failure toast, destructive confirm (shares Correctness hue).
+- **Success Green** (`#15C39A`): "All clear" state, save-success toast (uses brand green).
+- **Warning Gold** (`#E0A82E`): Premium-locked notice, plagiarism flag.
+- **Info Blue** (`#3B82F6`): Informational tip banners (shares Clarity hue).
+
+## 3. Typography Rules
+
+### Font Family
+- **Product**: `Apercu` (Colophon Foundry — Grammarly's brand grotesque) in marketing; `SF Pro Text` / `SF Pro Display` on iOS via the system stack.
+- **Closest Free Face**: `Inter` (by Rasmus Andersson, 2020, SIL OFL) — humanist grotesque with near-identical proportions, excellent UI hinting.
+- **Mono (rare)**: `SF Mono` for in-app code samples and the plagiarism source viewer.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title | Inter | 32pt | 800 | 1.15 | -0.6pt | "Assistant", "Insights" top-level |
+| Document Heading | Inter | 26pt | 700 | 1.2 | -0.4pt | Title inside the editor (H1) |
+| Document Subhead | Inter | 22pt | 700 | 1.25 | -0.3pt | H2 inside editor / section title |
+| Card Title | Inter | 18pt | 700 | 1.3 | -0.1pt | Suggestion category headline |
+| Editor Body | Inter | 16pt | 400 | 1.65 | 0pt | The prose being edited — calm reading size |
+| Suggestion Title | Inter | 15pt | 600 | 1.35 | 0pt | "Consider a more concise phrase" |
+| Suggestion Swap | Inter | 16pt | 600 | 1.4 | 0pt | Old (strikethrough) → New (green) word |
+| Explanation | Inter | 14pt | 400 | 1.5 | 0pt | Plain-language rule rationale |
+| Card Meta / Action | Inter | 13pt | 600 | 1.0 | 0.1pt | "Accept", "Dismiss", count labels |
+| Category Tag | Inter | 12pt | 700 | 1.0 | 0.4pt | "CORRECTNESS" uppercase |
+| Tone Pill | Inter | 12pt | 600 | 1.0 | 0.2pt | "Confident", "Formal" |
+| Score Number | Inter | 17pt | 700 | 1.0 | 0pt | Number inside the score ring |
+| Tab / Bar Label | Inter | 11pt | 600 | 1.0 | 0.1pt | Assistant-bar subtitle |
+| Button | Inter | 16pt | 700 | 1.0 | 0pt | Primary pill label |
+
+### Principles
+- **Editorial first**: Sizes follow document logic (title → heading → body), so the editor reads like a clean word processor, not a dashboard.
+- **Calm body**: Editor body is 16pt/400 with a roomy 1.65 line-height — the prose must feel pleasant to read, not cramped.
+- **Weight discipline**: 400 (prose), 600 (suggestion titles/actions), 700 (headings/categories), 800 (screen titles). No thin, no black, no light.
+- **Categories are uppercase 12pt/700**: the four category tags are the only consistently uppercased text — a fixed, scannable label.
+- **Dynamic Type first-class**: Document heading, body, suggestion title, explanation all scale; category tags, tone pills, score number, bar labels stay fixed.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Accept / Continue / Save)**
+- Shape: Fully rounded pill, 999pt corner radius
+- Background: `#15C39A` (Grammarly Green) / same on dark
+- Text: `#06281F` (deep green-black for contrast on green) — Inter 16pt weight 700
+- Padding: 14pt vertical, 28pt horizontal (Accept inside card stretches full width, 10pt vertical)
+- Pressed: background `#0E8A6D` + scale 0.98
+- Disabled: background `#15C39A` at 40% opacity
+
+**Secondary / Ghost Button (Dismiss / Skip)**
+- Background: transparent
+- Text: `#15C39A` light / `#15C39A` dark
+- Border: 1.5pt `#15C39A`
+- Corner radius: 999pt (pill)
+- Padding: 12pt vertical, 22pt horizontal
+- Font: Inter 15pt weight 600
+- Pressed: background `#15C39A14` (8% green)
+
+**Premium Button (Try Premium / Upgrade)**
+- Background: `#E0A82E` (Premium Gold)
+- Text: `#2A1E04` Inter 14pt weight 700
+- Corner radius: 999pt
+- Padding: 11pt vertical, 20pt horizontal
+- Pressed: background `#C8941F` + scale 0.98
+
+**Dismiss Icon Button (× on suggestion card)**
+- Size: 44pt × 40pt pill, 1pt `#E4E6E6` / `#2C2C2E` border
+- Glyph: 16pt × in `#6B6B70` / `#9A9A9F`
+- Pressed: background `#EEF0F0` / `#262629`
+
+**Text Button (See all suggestions / Learn more)**
+- Font: Inter 14pt weight 600
+- Color: `#15C39A`
+- No underline; 12pt vertical hit padding
+- Pressed: 60% opacity
+
+### Suggestion Card (the core atom)
+
+The single most important component. Slides up from the bottom when a marked span is tapped.
+
+- Container: `#F7F8F8` light / `#1C1C1E` dark, 16pt corner radius, 1pt `#E4E6E6` / `#2C2C2E` border, shadow `0 8px 24px rgba(0,0,0,0.12)` light / `rgba(0,0,0,0.5)` dark
+- Padding: 16pt all
+- **Header row**: 10pt category dot (category color) + category tag (Inter 12pt 700 uppercase, `#6B6B70`)
+- **Swap line**: old word in category color with line-through, "→" in `#9A9A9F`, new word in `#15C39A` weight 600 (Inter 16pt)
+- **Explanation**: Inter 14pt 400 `#6B6B70`, 1.5 line-height, max 2 lines
+- **Actions row**: full-width green "Accept" pill (Inter 14pt 700, `#06281F` on `#15C39A`) + 44pt dismiss icon button at 10pt gap
+- Premium-locked variant: Accept replaced by gold "Unlock with Premium" + lock glyph
+
+### Document Score Ring
+
+- Diameter: 38pt (top bar) / 60pt (insights screen)
+- Track: 3pt `#E4E6E6` / `#2C2C2E`
+- Progress arc: 3pt `#15C39A`, sweeps from 12 o'clock clockwise, length = score/100
+- Center: score number Inter 13-17pt 700, color = `#15C39A` (≥90), `#E0A82E` (60–89), `#E5484D` (<60)
+- Animation: arc fills 0 → target over 600ms ease-out when document opens or a suggestion is accepted
+
+### Colored Underlines (inline marking)
+
+- **Correctness**: 2pt solid wavy underline `#E5484D` under the flagged span
+- **Clarity**: 18% `#3B82F6` background fill + 2pt solid `#3B82F6` underline, 2pt corner radius
+- **Engagement**: 2pt dotted underline `#16A34A`
+- **Delivery**: 2pt solid underline `#8B5CF6`
+- Tapping a span: span scrolls to vertical center, suggestion card animates up, span gets a faint category-tint background while card is open
+
+### Tone Detector
+
+- A horizontal row above/below the editor: leading emoji (😊 / 🙂 / 😐 / 😟 reflecting detected sentiment) 18pt, "Tone sounds" label Inter 13pt `#6B6B70`, then 1–3 tone pills
+- Tone pill: `#EEF0F0` / `#262629` background, 1pt divider border, Inter 12pt 600 `#1A1A1A` / `#E4E4E4`, 999pt radius, 5pt × 12pt padding
+
+### Assistant Bar (pinned bottom)
+
+- Height: 64pt + safe area, background `rgba(255,255,255,0.96)` / `rgba(18,18,18,0.96)` with saturate-blur, 0.5pt top border
+- Leading: 36pt green orb (circle `#15C39A`) containing the white rotated-G logomark 20pt
+- Center: count title Inter 15pt 700 ("14 suggestions"), subtitle Inter 11pt 600 `#6B6B70` ("3 Correctness · 6 Clarity · 5 Engagement")
+- Trailing: "Review" CTA — small green pill, Inter 13pt 700 `#06281F`
+- When zero suggestions: orb stays green, title becomes "All clear" with a check, no Review CTA
+
+### Navigation
+
+**Top Bar (Editor)**
+- Height: 44pt + safe area
+- Leading: back chevron `chevron.left` 22pt `#1A1A1A` / `#E4E4E4`
+- Center: document title Inter 15pt 600, truncating
+- Trailing: 38pt score ring
+
+**Bottom Tab Bar (App shell — Documents / Assistant / Account)**
+- Height: 56pt + safe area, `#FFFFFF` / `#121212`, 0.5pt top border
+- 3 tabs: Documents (`doc.text`), Assistant (the green orb, center, slightly enlarged), Account (`person.circle`)
+- Active color: `#15C39A`; inactive `#9A9A9F`
+- Labels: Inter 11pt 600, always shown; no tint pill — icon + label color change only
+
+### Input Fields
+
+**New Document / Title Field**
+- Height: 48pt, background `#F7F8F8` / `#1C1C1E`, no border, 12pt corner radius
+- Placeholder: "Untitled document" Inter 16pt `#9A9A9F`
+- Focus: 1.5pt `#15C39A` border
+
+**Search (Documents list)**
+- Height: 40pt, `#EEF0F0` / `#262629`, 999pt radius
+- Leading `magnifyingglass` 16pt `#9A9A9F`, placeholder "Search documents" Inter 14pt `#9A9A9F`
+
+### Distinctive Components
+
+**Suggestion Card** — see core atom above; the defining component.
+
+**Document Score Ring** — thin animated 0–100 gauge; the at-a-glance health metric.
+
+**Colored Category Underlines** — the inline marking language; four hues, four treatments.
+
+**Tone Detector Row** — emoji + tone pills; Grammarly's signature "how does this sound" read.
+
+**Assistant Orb** — the rotated-G logomark in a green circle; appears in the bar, as the center tab, and as the floating keyboard-extension button.
+
+**Weekly Insights Card** — a stat card on the Account tab: large score ring + "You were more productive than 88% of Grammarly users", productivity / mastery / vocabulary mini-rings.
+
+**Custom Keyboard Strip** — in the Grammarly Keyboard extension: a thin strip above the keys showing the green orb + the next suggestion inline with a tap-to-accept chip.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
+- Editor horizontal inset: 20pt
+- Card internal padding: 16pt
+- Block / paragraph gap in editor: 16pt
+- Suggestion card → assistant bar gap: 0 (card sits directly above bar)
+
+### Grid & Container
+- iPhone: editor at 20pt horizontal insets, full-width suggestion card minus 16pt insets
+- iPad: editor max-width 680pt centered, 24pt insets; suggestion card can dock to a right rail (360pt) instead of sliding from bottom
+- Documents list: single-column cards, 16pt insets, 12pt gap
+
+### Whitespace Philosophy
+- **The prose breathes**: 16pt body line-height becomes 1.65 — reading comfort outranks density
+- **One thing at a time**: only one suggestion card is visible at once; the assistant walks you through serially
+- **Chrome recedes**: top bar and assistant bar are the only persistent UI; everything else is the user's document
+- **Cards float, prose is flat**: suggestion cards get a soft shadow; the editor surface itself has no borders or cards
+
+### Border Radius Scale
+- Square (0pt): underlines, full-bleed dividers
+- Subtle (4pt): inline Clarity highlight, small chips
+- Standard (8pt): list rows, banners
+- Comfortable (12pt): input fields, settings cards
+- Card (16pt): suggestion card, insights card
+- Large (20pt): bottom sheets, modals
+- Pill (999pt): all buttons, tone pills, score-count chip
+- Circle (50%): assistant orb, score ring, avatars
+
+## 6. Depth & Elevation
+
+Grammarly is mostly flat — the editor has zero elevation so the prose reads like paper. Shadow is reserved for *the assistant speaking*.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Editor surface, document text, list rows |
+| Card (Level 1) | `rgba(0,0,0,0.12) 0 8px 24px` light / `rgba(0,0,0,0.5) 0 8px 24px` dark | Suggestion card, insights card |
+| Bar (Level 2) | `rgba(0,0,0,0.10) 0 -2px 12px` + saturate-blur | Assistant bar, top bar on scroll |
+| Sheet (Level 3) | `rgba(0,0,0,0.16) 0 -8px 32px` | Bottom sheets (share, settings, premium paywall) |
+| Modal Scrim | `rgba(0,0,0,0.4)` | Dim behind paywall and confirm modals |
+
+**Shadow Philosophy**: The suggestion card's shadow says "this is the assistant talking — it floats above your document and you can act on it or dismiss it." The editor itself never lifts. On dark mode, shadows are deepened to `0.5` opacity and floating surfaces add a 1pt `#2C2C2E` border as a secondary elevation cue, since shadow is hard to read on charcoal.
+
+### Motion
+- **Suggestion card present**: slides up from bottom edge + fades in over 280ms ease-out (spring response 0.4, damping 0.85); the tapped span scrolls to vertical center in parallel
+- **Accept**: card fades + slides down 220ms ease-in; the flagged span animates old→new text with a 200ms crossfade; a 12% green wash flashes over the corrected span and fades over 600ms; soft success haptic
+- **Dismiss**: card slides down 200ms ease-in; underline removed instantly
+- **Score ring fill**: arc sweeps 0 → target over 600ms ease-out on document open; on accept, arc animates from old → new value over 400ms with a soft tick haptic at completion
+- **Tone pills**: fade + 4pt rise in 200ms when tone is recomputed (debounced 800ms after typing stops)
+- **Assistant bar count**: number rolls (odometer) over 250ms when suggestion count changes
+- **Tab switch**: cross-dissolve 200ms; the center assistant orb has a gentle 1.0→1.06→1.0 pulse when new suggestions arrive
+- **Haptic feedback**: soft success on Accept, light tick on score-ring completion, light impact on card present
+
+## 7. Do's and Don'ts
+
+### Do
+- Use pure white (`#FFFFFF`) light / warm charcoal (`#121212`) dark as the editor canvas — NOT off-white, NOT pure black
+- Use Grammarly Green (`#15C39A` → `#11A683`) as the ONE brand accent — CTAs, score ring, orb
+- Color suggestion underlines by category — red Correctness, blue Clarity, green Engagement, purple Delivery
+- Slide the suggestion card up from the bottom with a soft shadow — it is the assistant speaking
+- Show one suggestion card at a time and walk the user serially via the assistant bar
+- Keep editor body at 16pt/400 with 1.65 line-height — reading comfort first
+- Make all buttons fully rounded pills (999pt)
+- Animate the score ring arc filling on open and on accept (600ms / 400ms ease-out)
+- Use the tone detector (emoji + tone pills) to summarize how the writing reads
+- Flash a faint green wash over a span after Accept, then fade it (600ms)
+- Use Premium Gold (`#E0A82E`) only for upsell — never as a functional or primary color
+
+### Don't
+- Don't use the four category colors (red/blue/green/purple) as buttons or CTAs — they only mark text
+- Don't introduce a secondary brand color — Grammarly is monobrand green
+- Don't put a card or border around the editor prose — the document is flat, only suggestion cards float
+- Don't show multiple suggestion cards stacked — one at a time, serially
+- Don't use pure black (`#000000`) for body text — warm near-black `#1A1A1A` light / `#E4E4E4` dark
+- Don't cram the editor with a tight line-height — 1.65 is the calm reading rhythm
+- Don't use rectangular (sharp-corner) buttons — every button is a pill
+- Don't make the score ring jump instantly — it sweeps over 600ms
+- Don't tint the active tab with a pill background — Notion-style color-only change (icon + label go green)
+- Don't animate aggressively — motion is 200–600ms ease-out, calm and reassuring
+- Don't surface the full card on a plain tap of unmarked text — cards appear only when a marked span is tapped or via the Review walkthrough
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Editor 16pt insets; suggestion card full-width; tone row wraps to 2 pills max |
+| iPhone 13/14/15 | 390pt | Standard layout, 20pt editor insets |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top bar |
+| iPhone 15/16 Pro Max | 430pt | Larger editor measure; tone row shows up to 3 pills |
+| iPad (portrait) | 768pt | Editor max 680pt centered; suggestion card docks to bottom OR right rail (user setting) |
+| iPad (landscape) | 1024pt+ | 2-pane: documents list (320pt) + editor; suggestion card as 360pt right rail |
+
+### Dynamic Type
+- Document heading, editor body, suggestion title, explanation: full scale
+- Category tags, tone pills, score number, assistant-bar labels, tab labels: FIXED (layout-sensitive)
+- Code samples: scale to XL but stay SF Mono
+
+### Orientation
+- All screens rotate; iPad landscape promotes the documents list into a persistent sidebar
+- Suggestion card relocates from bottom sheet (portrait) to right rail (landscape / iPad) so it never covers the prose being corrected
+
+### Touch Targets
+- Accept pill: full card width, 40pt tall
+- Dismiss icon button: 44pt × 40pt
+- Score ring (tap to open insights): 38pt glyph, 44pt hit
+- Tab bar icons: 24pt glyph, 56pt hit
+- Marked span tap: span height + 8pt vertical hit padding
+
+### Safe Area Handling
+- Top: top bar respects safe area and Dynamic Island
+- Bottom: assistant bar + home indicator respected; suggestion card sits directly above the assistant bar, both above the home indicator
+- Keyboard: editor scrolls above the keyboard; the suggestion card and assistant bar lift to sit above the keyboard when it is open
+- Sides: 20pt editor inset (16pt on SE)
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (light): `#FFFFFF`
+- Canvas (dark): `#121212`
+- Surface 1: `#F7F8F8` light / `#1C1C1E` dark
+- Divider: `#E4E6E6` light / `#2C2C2E` dark
+- Text primary: `#1A1A1A` light / `#E4E4E4` dark
+- Text secondary: `#6B6B70` light / `#9A9A9F` dark
+- Brand green (single accent): `#15C39A` → deep `#11A683` → pressed `#0E8A6D`
+- Correctness underline: `#E5484D`
+- Clarity underline/highlight: `#3B82F6`
+- Engagement underline: `#16A34A`
+- Delivery underline: `#8B5CF6`
+- Premium gold: `#E0A82E`
+- Accept-flash wash: `#15C39A1F`
+
+### Example Component Prompts
+- "Build the Grammarly suggestion card in SwiftUI: a bottom-anchored card, `#F7F8F8` light / `#1C1C1E` dark, 16pt corner radius, 1pt divider border, shadow `rgba(0,0,0,0.12) 0 8px 24px`. Header row: 10pt category dot (Correctness `#E5484D`) + 'CORRECTNESS' in Inter 12pt w700 uppercase `#6B6B70`. Swap line: old word `#E5484D` with strikethrough, '→' `#9A9A9F`, new word `#15C39A` w600, Inter 16pt. Explanation: Inter 14pt w400 `#6B6B70`, max 2 lines. Actions: full-width green Accept pill (Inter 14pt w700, `#06281F` on `#15C39A`, 999pt radius) + 44×40 dismiss icon button. Card slides up + fades over 280ms spring, soft haptic."
+
+- "Create the Grammarly document score ring: 38pt circle, 3pt track `#E4E6E6`, 3pt progress arc `#15C39A` sweeping clockwise from 12 o'clock, arc length = score/100. Center number Inter 13pt w700, color `#15C39A` if ≥90 else `#E0A82E` if ≥60 else `#E5484D`. On appear, animate arc 0 → score over 600ms ease-out; on accept, animate old → new value over 400ms with a light tick haptic."
+
+- "Render Grammarly colored underlines on a text run: Correctness = 2pt solid wavy `#E5484D` underline; Clarity = 18% `#3B82F6` background fill + 2pt solid `#3B82F6` underline, 2pt corner radius; Engagement = 2pt dotted `#16A34A`; Delivery = 2pt solid `#8B5CF6`. On tap, scroll the span to vertical center, give it a faint category-tint background, and present the suggestion card from the bottom."
+
+- "Build the Grammarly assistant bar: 64pt + safe area, `rgba(18,18,18,0.96)` dark with saturate blur, 0.5pt top border. Leading 36pt green circle `#15C39A` with white rotated-G logomark 20pt. Center: 'X suggestions' Inter 15pt w700 + subtitle '3 Correctness · 6 Clarity · 5 Engagement' Inter 11pt w600 `#9A9A9F`. Trailing small green 'Review' pill Inter 13pt w700 `#06281F`. When count is 0: title 'All clear' + check, no Review CTA. Count rolls odometer-style over 250ms on change."
+
+- "Create the Grammarly tone detector row: leading emoji 18pt (😊/🙂/😐/😟 by sentiment), 'Tone sounds' Inter 13pt `#6B6B70`, then 1–3 tone pills. Tone pill: `#262629` bg, 1pt `#2C2C2E` border, Inter 12pt w600 `#E4E4E4`, 999pt radius, 5×12 padding. Recompute debounced 800ms after typing stops; pills fade + 4pt rise over 200ms."
+
+- "Build the Grammarly accept interaction: on tap Accept, fade+slide the card down 220ms ease-in, crossfade the flagged span's old→new text over 200ms, flash a 12% `#15C39A` wash over the corrected span fading over 600ms, decrement the assistant-bar count with an odometer roll, advance the score ring to its new value over 400ms, fire a soft success haptic."
+
+### Iteration Guide
+1. Canvas is pure white light / warm charcoal `#121212` dark — NOT pure black, NOT off-white
+2. There is exactly ONE brand accent: Grammarly Green `#15C39A` (deep `#11A683`) — every CTA, the ring, the orb
+3. The four category colors (red/blue/green/purple) mark text ONLY — never buttons, never CTAs
+4. The suggestion card slides up from the bottom with a soft shadow — it is the assistant speaking
+5. Show ONE suggestion card at a time; the assistant bar walks the user through serially
+6. Editor body is 16pt/400 with 1.65 line-height — reading comfort beats density
+7. Every button is a fully rounded pill (999pt)
+8. The score ring is a thin animated 0–100 arc that fills green on open and on accept
+9. Premium Gold `#E0A82E` is upsell-only — never functional, never primary
+10. Motion is calm: 200–600ms ease-out, soft haptics, an odometer count, a green accept-flash that fades