designmd-forge 1.2.0

package/dist/data/designs/ios-google-calendar.md

@@ -0,0 +1,431 @@
+# Design System Inspiration of Google Calendar (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Google Calendar's iOS app is the densest information surface in the Google portfolio — a week of meetings, birthdays, reminders, and Goals compressed into a single phone screen without ever feeling cramped. The design philosophy is pure Material You with iOS manners: clean white surfaces, a tightly disciplined four-color event palette derived from Material primary tones, generous internal whitespace inside each event card, and the floating "+" button — the Material FAB — anchored bottom-right on every view. Where Apple's native Calendar leans on system gray and red restraint, Google Calendar leans into color as content: every event is a tinted rectangle, every category gets a hue.
+
+The accent palette is the Material primary set, slightly desaturated for iOS — Google Blue (`#1A73E8`) for events, Red (`#D93025`) for declined, Yellow (`#F9AB00`) for tasks, Green (`#188038`) for goals. These four colors don't compete with the white canvas; they live inside event cards as left-bar indicators or 12pt tint blocks. Calendars (Work, Personal, Family) inherit their own user-chosen color from Google's full 24-swatch calendar palette (Tomato, Tangerine, Banana, Sage, etc.). The floating "+" FAB is Material Blue (`#1A73E8`), centered with the iconic concentric expansion ripple when tapped.
+
+Typography is Google Sans (Product Sans's successor for product surfaces) for nav titles and prominent moments, Roboto for body content — but on iOS, the team intentionally falls back to SF Pro Display / SF Pro Text on most rows to feel native. The headline weight stack runs Regular (400) and Medium (500) — Google Calendar deliberately avoids Bold; the visual weight comes from color saturation and Material elevation, not type weight. Times in event cards use tabular figures so columns of "9:00 AM / 10:30 AM / 12:00 PM" align mathematically.
+
+**Key Characteristics:**
+- White canvas (`#FFFFFF`) with Surface Gray (`#F1F3F4`) section fills
+- Material primary palette as the event color system: Blue `#1A73E8`, Red `#D93025`, Yellow `#F9AB00`, Green `#188038`
+- 24-color user-selectable calendar palette (Tomato `#D50000`, Lavender `#7986CB`, Sage `#33B679`, etc.)
+- Schedule, Day, 3-Day, Week, Month — five view modes accessible from a top-left hamburger menu
+- The floating "+" FAB — bottom-right on every view, Material Blue with concentric ripple
+- Event card: rounded 8pt rectangle with a 4pt left color bar OR a tinted fill — title 14pt Medium, time row 13pt Regular tabular
+- Calendar tap-and-hold for quick event creation; long-press to drag/resize
+- Google Sans Display for nav titles, Roboto/SF Pro Text for body
+- The Schedule view — chronological list of events grouped by day, with day banners showing date and weather
+- Material elevation: white surface (Level 0), event card (Level 1), FAB (Level 6 — the highest)
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Google Blue** (`#1A73E8`): Primary action — FAB, "Save" buttons, default event color, links, "Today" date highlight ring.
+- **Blue Pressed** (`#1557B0`): Pressed/active state on the FAB and primary buttons.
+- **Blue Tint** (`#E8F0FE`): Selected-state row backgrounds, "Today" ring background, low-emphasis containers.
+
+### Event Colors (Material Primary Set)
+- **Event Blue** (`#1A73E8`): Default calendar color, work meetings.
+- **Event Red** (`#D93025`): Declined events, alerts, important meetings.
+- **Event Yellow** (`#F9AB00`): Tasks, reminders.
+- **Event Green** (`#188038`): Goals, completed sessions, focus blocks.
+
+### Full Calendar Palette (User-Selectable, 24 Swatches)
+These are the Google Calendar canonical user calendar colors:
+- **Tomato** `#D50000`, **Flamingo** `#E67C73`, **Tangerine** `#F4511E`, **Banana** `#F6BF26`
+- **Sage** `#33B679`, **Basil** `#0B8043`, **Peacock** `#039BE5`, **Blueberry** `#3F51B5`
+- **Lavender** `#7986CB`, **Grape** `#8E24AA`, **Graphite** `#616161`, **Birch** `#A79B8E`
+- **Eucalyptus** `#16A765`, **Cobalt** `#0277BD`, **Pumpkin** `#F4511E`, **Cherry Blossom** `#FAD165`
+- **Avocado** `#7CB342`, **Citron** `#C0CA33`, **Pistachio** `#9CCC65`, **Wisteria** `#5C6BC0`
+- **Amethyst** `#AB47BC`, **Rose** `#D81B60`, **Cocoa** `#795548`, **Slate** `#9E9E9E`
+
+### Canvas, Surfaces & Dividers
+- **Canvas White** (`#FFFFFF`): Primary canvas — Schedule list, Month grid, Day timeline.
+- **Surface Gray** (`#F1F3F4`): Day header banners, section dividers, search field fill.
+- **Surface Gray 2** (`#F8F9FA`): Subtle row alternation in Schedule view, sidebar drawer.
+- **Divider** (`#DADCE0`): Hairline borders, 30-min gridlines in Day/Week view, calendar list divisions.
+- **Shadow Black** (`rgba(60,64,67,0.15)`): Standard Material Level 1 elevation (slightly warm gray).
+
+### Text
+- **Ink** (`#202124`): Primary text — event titles, day numbers, nav titles. Google's near-black, slightly warm.
+- **Secondary** (`#5F6368`): Times, location, secondary labels.
+- **Tertiary** (`#80868B`): Placeholder, "All-day" labels in event details, disabled.
+- **Inverse White** (`#FFFFFF`): Text inside saturated event cards.
+
+### Semantic
+- **Success Green** (`#188038`): "Event created" toast, confirmation banners.
+- **Warning Amber** (`#F9AB00`): Sync warnings, "Time conflict" badges.
+- **Error Red** (`#D93025`): Form validation, "Failed to RSVP".
+- **Info Blue** (`#1A73E8`): Hyperlinks in event description, "Join with Google Meet" CTA.
+
+### Dark Mode
+Google Calendar's dark mode is a true near-black (`#202124`) — Google's signature warm-tinted dark gray, NOT pure black. Event tints brighten significantly.
+- **Dark Canvas** (`#202124`): Primary dark background.
+- **Dark Surface 1** (`#2D2E30`): Cards, day banners, search field.
+- **Dark Surface 2** (`#3C4043`): Pressed states, selected rows.
+- **Dark Divider** (`#3C4043`): Hairlines, gridlines.
+- **Dark Text Primary** (`#E8EAED`): Event titles, nav titles.
+- **Dark Text Secondary** (`#9AA0A6`): Times, secondary labels.
+- **Google Blue (dark)** (`#8AB4F8`): Brighter blue for dark mode contrast — used on FAB, links, "Today" highlight.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / Brand**: `Google Sans Display` for nav titles, dialog titles, marketing moments
+- **Text**: `Roboto` on Android; on iOS deliberately falls back to `SF Pro Text` for body and rows (feels more native)
+- **Weights available**: Regular (400), Medium (500) — Google Calendar avoids Bold on most surfaces
+- **Fallback stack**: `'Google Sans', 'Google Sans Display', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', Roboto, sans-serif`
+- **Web/marketing Google Fonts substitute**: `Google Sans` is available via Google Fonts (limited public release) — otherwise `Roboto` is the safe stand-in
+- **Tabular figures**: ALL times in event cards use `font-variant-numeric: tabular-nums` so columns align — this is non-negotiable
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Nav Title (Month/Day) | Google Sans | 22pt | 500 | 1.2 | 0pt | "May 2026", "Today" |
+| Schedule Day Banner | Google Sans | 36pt | 400 | 1.0 | -0.4pt | Large day number "14" |
+| Schedule Day Label | Google Sans | 13pt | 500 | 1.2 | 0.8pt UPPERCASE | "THU · MAY" |
+| Section Header | Google Sans | 14pt | 500 | 1.3 | 0pt | "Tasks", "Reminders" |
+| Event Title (in card) | SF Pro Text | 14pt | 500 | 1.3 | 0pt | "Stand-up", "Lunch with K." |
+| Event Title (Detail) | Google Sans | 22pt | 400 | 1.25 | -0.1pt | Event title at the top of the detail screen |
+| Event Time (in card) | SF Pro Text | 13pt | 400 | 1.2 | 0pt tnum | "9:00 – 9:30 AM" |
+| Event Location | SF Pro Text | 13pt | 400 | 1.3 | 0pt | "Conference Room B" |
+| Day Number (Month Grid) | Google Sans | 14pt | 400 | 1.0 | 0pt tnum | The "14" in the month cell |
+| Today Number | Google Sans | 14pt | 500 | 1.0 | 0pt | The number inside the blue "Today" ring |
+| Weekday Header (M T W T F S S) | SF Pro Text | 12pt | 500 | 1.0 | 0.4pt UPPERCASE | "S M T W T F S" above the grid |
+| Time Gutter (Day/Week) | SF Pro Text | 11pt | 400 | 1.0 | 0pt tnum | "9 AM" labels in the left gutter |
+| Sidebar Item | SF Pro Text | 14pt | 500 | 1.25 | 0pt | "Schedule", "Day", "Week" in drawer |
+| Button (Primary) | Google Sans | 14pt | 500 | 1.0 | 0.4pt | "SAVE", "JOIN WITH GOOGLE MEET" |
+| Button (Secondary) | Google Sans | 14pt | 500 | 1.0 | 0.4pt | Outline buttons, same metrics |
+| FAB | (no glyph text) | – | – | – | – | "+" SF Symbol 24pt |
+| Tab Label | SF Pro Text | 10pt | 500 | 1.0 | 0.1pt | Bottom nav (iPad mostly) |
+| Caption | SF Pro Text | 12pt | 400 | 1.3 | 0pt | "Goal completed" labels |
+
+### Principles
+- **Avoid Bold**: Hierarchy comes from size + color saturation, not weight. Almost everything is Regular (400) or Medium (500).
+- **Tabular numerals everywhere times appear** — event cards, day numbers, time gutter, year labels.
+- **Google Sans for display, SF Pro Text for body on iOS**: this is the deliberate hybrid stack Google uses to feel native.
+- **UPPERCASE labels at 0.4-0.8pt tracking** on day banners, weekday headers, primary CTA buttons (`SAVE`, `JOIN`).
+- **Ink `#202124` over pure black**: Google's slightly warm primary text — gentler than `#000000`, characteristically Google.
+- **Color is the differentiator, not weight**: a Work event and a Personal event have the same type metrics; the difference is the calendar's color, applied as a 4pt left bar.
+- **Dynamic Type respected on event titles, body, nav titles**; fixed on day numbers, time gutter, weekday headers (layout-sensitive).
+
+## 4. Component Stylings
+
+### The Event Card (The Hero Component)
+
+The single most-repeated visual unit in Google Calendar. Two presentations depending on view:
+
+**Schedule View Card (List)**
+- Width: full content width minus 16pt horizontal margins
+- Height: variable — minimum 56pt, expands for multi-line titles
+- Background: `#FFFFFF`
+- Left bar: 4pt wide, full-height, in the calendar's color (e.g., Blueberry `#3F51B5`)
+- Padding: 12pt vertical, 16pt horizontal (after the 4pt bar)
+- Title: SF Pro Text 14pt Medium `#202124`, 2-line truncate
+- Time row: SF Pro Text 13pt Regular tabular `#5F6368` — "9:00 – 9:30 AM"
+- Location row (if present): SF Pro Text 13pt Regular `#5F6368` with a pin icon prefix
+- Tap: row background fades to `#F1F3F4` for 80ms, opens event detail
+
+**Day / Week View Card (Tinted Block)**
+- A tinted rectangle filling its time slot in the timeline
+- Background: calendar color at 20% saturation (e.g., `rgba(63,81,181,0.2)` for Blueberry)
+- Border: NONE; just the tint
+- Left bar: 3pt of the saturated calendar color, full-height
+- Padding: 4pt vertical, 6pt horizontal
+- Title: SF Pro Text 12pt Medium in the calendar's full-saturation color
+- Time row (only if card is tall enough): SF Pro Text 11pt Regular tabular, slightly lower opacity
+- Corner radius: 4pt
+- Stacking: overlapping events split the available width — 2 events at 50%, 3 at 33%, with a 2pt gap
+
+**Multi-Day Event Bar**
+- Spans across multiple days in Month/Week view as a continuous bar
+- Pattern: same calendar color tint, full saturation on the leftmost edge, gradient fade is NOT used (always solid)
+- Height: 18pt in Month view, 24pt in Week view
+- Corner radius: 4pt (only on the outermost edges of the span — internal day cells get sharp corners on the breakpoint)
+
+### Day Banner (Schedule View)
+
+The signature visual unit that gives Schedule view its rhythm.
+
+- Height: 80pt
+- Layout: a 64pt × 64pt circular or square zone on the left with the day number; details on the right
+- Day number: Google Sans 36pt Regular `#202124`, e.g., "14"
+- Day label: Google Sans 13pt Medium UPPERCASE `#5F6368` with 0.8pt tracking, e.g., "THU · MAY"
+- Optional weather glyph: 20pt SF Symbol (e.g., `sun.max.fill`) + temperature in 14pt Medium
+- "Today" treatment: the day number sits inside a `#1A73E8` blue filled circle, number turns white; tap-target the whole banner
+- Padding: 16pt horizontal, 12pt vertical
+
+### Month Grid Cell
+
+- Size: cell width = (screen width - 0pt margins) / 7; height ~52pt on phones
+- Day number: Google Sans 14pt Regular tabular `#202124`, top-left of cell with 6pt inset
+- Today: number sits inside a 28pt `#1A73E8` filled circle, number turns white and weight bumps to Medium
+- Selected day (when tapping a future day): 28pt `#E8F0FE` ring around the number
+- Event dots / mini-bars: 2-3 tiny 4pt circles in the calendar's color OR small 2pt height bars representing events; stacked vertically below the number
+- Other-month numbers (greyed out): `#80868B`
+- Cell tap: opens that day in Day view with spring zoom
+- Long-press: opens quick event creation
+
+### Day / Week Timeline
+
+- Time gutter: 56pt wide on the left
+- Time labels: SF Pro Text 11pt Regular tabular `#5F6368`, e.g., "9 AM", "10 AM"
+- Gridlines: 0.5pt `#DADCE0` horizontal at every hour; subtler 0.25pt at the half-hour (some users disable these)
+- Current time indicator: a 2pt red `#D93025` horizontal line across the full width with a 10pt filled circle on the left edge — animates smoothly with the system clock
+- Day header row: weekday + date sticky at the top, e.g., "MON 14" — UPPERCASE 12pt Medium
+
+### Floating Action Button (FAB)
+
+- Diameter: 56pt
+- Position: bottom-right, 16pt inset from right and bottom (or 16pt above tab bar)
+- Background: `#1A73E8` solid Material Blue
+- Glyph: SF Symbol `plus` 24pt Regular, color `#FFFFFF`
+- Shadow: `rgba(60,64,67,0.15) 0 4px 8px` plus `rgba(60,64,67,0.30) 0 1px 2px` — Material Level 6 dual shadow
+- Pressed: lifts to `rgba(60,64,67,0.30) 0 6px 12px`, scale stays 1.0 (Material doesn't scale on press)
+- Tap: opens an action menu sheet — "Event", "Task", "Goal" — each as a 48pt row with an icon
+- Haptic: `.impactOccurred(.medium)` on tap
+
+### Quick Event Creation Modal
+
+- Trigger: tap the FAB → choose "Event" from the action menu
+- Sheet style: full-screen modal from bottom with `#FFFFFF` background
+- Top bar: 56pt, with "X" close button left, "Save" text-button right
+- Title input: large SF Pro Display 22pt Regular `#202124` placeholder "Add title"
+- Time chips below: "Starts Thu, May 14 9:00 AM" and "Ends Thu, May 14 10:00 AM" — each a tap-target to open the time picker
+- "All-day" toggle: standard iOS switch in Blue `#1A73E8` accent
+- Calendar picker row: 24pt colored dot + calendar name + chevron — tap to switch calendar
+- Add guests, Add location, Add description: each a 56pt row with 24pt leading SF Symbol icon
+- Reminder row: shows current reminder ("10 minutes before") with edit option
+- Tab-down sheet: drag to dismiss
+
+### Sidebar Drawer (Hamburger Menu)
+
+- Width: 280pt; full-height
+- Background: `#FFFFFF`
+- Header row: Google Calendar logo (28pt) + "Calendar" text in Google Sans 20pt Medium
+- View selector: vertical list — Schedule, Day, 3 Days, Week, Month — each a 48pt row with leading icon and label; selected row has `#E8F0FE` background and `#1A73E8` text/icon
+- Section divider: 0.5pt `#DADCE0`
+- "My calendars" section: 14pt Medium UPPERCASE header `#5F6368` with 0.4pt tracking
+- Calendar list rows: 48pt — 18pt color square checkbox + calendar name (14pt Medium); tap toggles visibility, square flips between filled (visible) and outlined (hidden)
+- "Other calendars" section follows
+- Footer: Settings, Help & feedback — each a 48pt row
+
+### Buttons
+
+**Primary Text Button (Material Style)**
+- Background: transparent
+- Text: `#1A73E8`, Google Sans 14pt Medium UPPERCASE with 0.4pt tracking — e.g., "SAVE", "JOIN"
+- Padding: 8pt vertical, 12pt horizontal
+- No border, no fill
+- Tap area: 48pt
+- Used heavily in the top app bar of the event detail and quick-creation modals
+
+**Filled Button (Less Common — JOIN WITH GOOGLE MEET)**
+- Background: `#1A73E8`
+- Text: `#FFFFFF`, Google Sans 14pt Medium UPPERCASE 0.4pt tracking
+- Padding: 10pt vertical, 24pt horizontal
+- Corner radius: 4pt
+- Height: 36pt
+- Used for the prominent Meet CTA inside event details
+
+**Tonal Button (Soft Blue Variant)**
+- Background: `#E8F0FE`
+- Text: `#1A73E8`, Google Sans 14pt Medium
+- Padding: 10pt vertical, 16pt horizontal
+- Corner radius: 4pt
+- Used for "RSVP", "Add to my calendar" — less prominent than the filled blue
+
+**Outline Button (Secondary)**
+- Background: transparent
+- Border: 1pt `#DADCE0`
+- Text: `#1A73E8`, Google Sans 14pt Medium
+- Padding: 10pt vertical, 16pt horizontal
+- Corner radius: 4pt
+
+### Distinctive Components
+
+**Today Highlight Ring (Month/Day)**
+- 28pt circle (or 24pt in smaller views)
+- Filled `#1A73E8` background, day number turns white and bumps to Medium weight
+- Always visible — the user's anchor in time
+
+**RSVP Pills (Event Detail)**
+- Three options: "Yes", "No", "Maybe"
+- 40pt height pills, horizontal row with 8pt gap
+- Selected: filled in calendar color or `#1A73E8`, white text
+- Unselected: outlined `#DADCE0`, `#5F6368` text
+- Tap toggles, with 200ms ease
+
+**Reminder Bell Glyph**
+- SF Symbol `bell.fill` 14pt — appears inline in event cards for events with reminders set
+- Color: matches event tint at 60% opacity
+
+**Google Meet "JOIN" Pill**
+- Green-blue gradient or solid `#1A73E8` filled pill
+- Camera icon + "JOIN WITH GOOGLE MEET" Google Sans 14pt Medium UPPERCASE
+- Appears at the top of any event with a video conferencing link
+- Pulses subtly when the event start is within 5 minutes
+
+**Goals Progress Ring**
+- Concentric ring at the top of a Goal detail
+- Outer ring: full saturation green `#188038`, width 8pt
+- Progress: percentage filled
+- Center: large number "12 of 20" + label "sessions" in Google Sans
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt (Material's `dp` rhythm)
+- Scale: 4, 8, 12, 16, 24, 32, 40, 48, 56, 64
+- Standard horizontal margin: 16pt on phones, 24pt on tablets
+- Section vertical gap: 24pt between Schedule day banners; 16pt between sections in the drawer
+
+### Grid & Container
+- Content width: full device width minus 0-16pt depending on view (Month grid is edge-to-edge)
+- Schedule view: full-width event cards
+- Month grid: 7 columns, edge-to-edge, no horizontal padding
+- Day timeline: 56pt time gutter + remaining width for events
+
+### Whitespace Philosophy
+- **Dense but breathable**: Event cards are tight (12pt padding) but day banners breathe (16pt vertical)
+- **Color is the visual rhythm, not whitespace**: alternating calendar colors create vertical rhythm in dense weeks
+- **Month grid is uniformly gridded** — every cell is the same size; events shrink to fit
+- **The FAB never disappears** — always 16pt from bottom-right, always Material Blue
+
+### Border Radius Scale
+- Square (0pt): month grid cells, gridlines
+- Tiny (2pt): event card left bars
+- Small (4pt): event cards, primary buttons, tinted event blocks
+- Standard (8pt): bottom sheet corners, modal dialogs
+- Medium (16pt): top of bottom sheet, large action sheet
+- Full Pill (500pt): RSVP pills
+- Circle (50%): FAB, Today highlight ring, calendar color squares
+
+## 6. Depth & Elevation
+
+Material Design's elevation system, lightly adapted for iOS:
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Canvas, schedule day banners, drawer |
+| Card (Level 1) | `rgba(60,64,67,0.10) 0 1px 2px` + `rgba(60,64,67,0.15) 0 1px 3px` | Event cards in Schedule view, dialog buttons |
+| Popover (Level 2) | `rgba(60,64,67,0.10) 0 2px 4px` + `rgba(60,64,67,0.15) 0 3px 6px` | Tooltip, calendar picker dropdown |
+| Sheet (Level 4) | `rgba(60,64,67,0.10) 0 4px 8px` + `rgba(60,64,67,0.15) 0 5px 10px` | Quick-creation modal, drawer when open |
+| FAB Rest (Level 6) | `rgba(60,64,67,0.15) 0 4px 8px` + `rgba(60,64,67,0.30) 0 1px 2px` | The FAB at rest |
+| FAB Pressed (Level 12) | `rgba(60,64,67,0.30) 0 6px 12px` + `rgba(60,64,67,0.40) 0 2px 4px` | The FAB while pressed |
+| Blur Material | Translucent `#FFFFFF` at 92% over content | Sticky app bar when content scrolls beneath |
+
+**Shadow Philosophy**: Google Calendar uses Material Design's dual-shadow elevation system — a sharp 1pt offset for ambient definition + a softer 3pt blur for depth. The shadows are slightly warm (`rgba(60,64,67,...)`), not pure black, which is a Google detail. The FAB sits at Material Level 6 — the highest meaningful elevation in the app — and lifts further when pressed.
+
+### Motion
+- **FAB tap**: scale 1.0 → 0.95 → 1.0 over 200ms ease-out; the ripple expands from the tap point outward in a concentric `rgba(255,255,255,0.3)` circle over 300ms
+- **Action menu (Event/Task/Goal)**: slides in as a sheet from the FAB position with a 300ms shared-element morph
+- **Schedule day banner enter**: subtle fade-in as you scroll, no horizontal slide
+- **Month grid tap**: tapped day scales 1.0 → 1.05 → 1.0 with a 250ms spring; transition to Day view is a 350ms zoom into the cell
+- **Event detail open**: shared-element transition from the card's position with `matchedGeometryEffect` — the card morphs into the full detail screen over 300ms
+- **Today indicator (red line in Day view)**: animates its position every 60 seconds in a 1s ease transition
+- **Reminder bell pulse**: subtle 600ms scale 1.0 → 1.1 → 1.0 when a reminder fires
+- **RSVP pill switch**: 200ms ease — color fades, scale stays the same
+- **Drawer open/close**: 250ms ease-out from the left, with a `rgba(0,0,0,0.32)` scrim over the canvas
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Google Blue `#1A73E8` for the FAB, primary CTAs, links, and the Today highlight
+- Use the four Material event colors for system events: Blue meetings, Red declined, Yellow tasks, Green goals
+- Honor the 24-color user-selectable calendar palette — let user-named calendars choose their tint
+- Use Google Sans Display for nav titles and day numbers; SF Pro Text for body and rows on iOS
+- Use TABULAR FIGURES on every time and date — "9:00 AM / 10:30 AM" must align
+- Render event cards with a 4pt left color bar OR a tinted fill — pick one per view, not both
+- Use Material elevation: Level 1 for cards, Level 6 for the FAB at rest
+- Place the FAB at bottom-right, 16pt inset, on every primary view
+- Use UPPERCASE Google Sans Medium for primary button text — "SAVE", "JOIN"
+- Use the slightly-warm Material gray (`rgba(60,64,67,...)`) for shadows, NOT pure black
+- Highlight today with a filled `#1A73E8` circle, white number inside
+
+### Don't
+- Don't use pure black `#000000` for text — `#202124` is Google's near-black
+- Don't bold-weight nav titles or section headers — Google Calendar uses Medium (500), almost never Bold
+- Don't apply event colors at full saturation in Day/Week tinted blocks — use 20% saturation for the fill, full saturation for the title text and 3pt left bar
+- Don't replace the Material dual-shadow with a single drop-shadow — the dual-shadow IS the Material look
+- Don't put the FAB anywhere other than bottom-right
+- Don't show event cards without a left color bar — it's the user's calendar-source indicator
+- Don't break the 4pt grid system on event tint borders or button radii
+- Don't use a 6+pt corner radius on event cards — 4pt is the Material card radius for compact components
+- Don't omit tabular figures from time text — column alignment is broken without it
+- Don't use the Schedule day banner for a placeholder "no events" day — show a small "No events" caption instead
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Schedule + Day views default; Week view is tight, often horizontally scrollable |
+| iPhone 13/14/15 | 390pt | Standard layouts — Week view shows 5 days at once |
+| iPhone 15/16 Pro | 393pt | Dynamic Island respected in app bar |
+| iPhone 15/16 Pro Max | 430pt | Week view shows full 7 days legibly |
+| iPad Mini | 744pt | Sidebar drawer becomes persistent on left; main view fills the rest |
+| iPad Pro 11" | 834pt | 3-column: drawer + main view + event detail pane on the right |
+| iPad Pro 13" | 1024pt | Full Month view with daily event lists alongside |
+
+### Dynamic Type
+- Event titles, body, large nav titles, sidebar items: full scale
+- Day numbers in Month grid, time gutter labels, weekday headers, tab labels: fixed (layout-sensitive)
+- Schedule day-banner number: scales but clamps at 44pt max
+
+### Orientation
+- Portrait: default, Schedule and Day views
+- Landscape on iPhone: Week view auto-rotates and becomes the dominant
+- iPad: rotates freely; sidebar persistent across orientations
+
+### Touch Targets
+- Event card: full-row tap (52pt minimum)
+- FAB: 56pt — full button hit
+- Today / day-number tap (Month grid): the whole cell ~52pt
+- RSVP pill: 40pt height, 88pt width
+- Drawer rows: 48pt
+- Time-gutter tap (to create event at that hour): 48pt-wide tappable zone in the gutter
+
+### Safe Area Handling
+- Top: app bar honors safe area + Dynamic Island
+- Bottom: FAB respects safe area + tab bar (if present) — sits 16pt above
+- Sides: 0-16pt depending on view
+
+## 9. Quick Reference Cheat Sheet
+
+### Quick Color Reference
+- Canvas: `#FFFFFF`
+- Surface Gray: `#F1F3F4`
+- Divider: `#DADCE0`
+- Ink (primary text): `#202124`
+- Secondary text: `#5F6368`
+- **Google Blue**: `#1A73E8`
+- **Blue Pressed**: `#1557B0`
+- **Blue Tint** (selected): `#E8F0FE`
+- **Event Red** (declined): `#D93025`
+- **Event Yellow** (tasks): `#F9AB00`
+- **Event Green** (goals): `#188038`
+- User calendar palette: pick from the 24-color set (Tomato, Tangerine, Banana, Sage, Peacock, Blueberry, Lavender, Grape, etc.)
+
+### Example Component Prompts
+- "Create a SwiftUI Google Calendar Schedule day banner: 80pt tall, leading 64pt zone with the day number '14' in Google Sans 36pt Regular `#202124`. Above the number, 'THU · MAY' in Google Sans 13pt Medium UPPERCASE `#5F6368` with 0.8pt tracking. To the right, optional weather glyph `sun.max.fill` 20pt + '72°' in 14pt Medium. If today, the day number sits inside a 56pt `#1A73E8` filled circle, number turns white."
+- "Build a Google Calendar event card in Schedule view: full-width minus 16pt margins, 56pt minimum height, white background with a 4pt left color bar in `#3F51B5` Blueberry. Inside: 'Stand-up' in SF Pro Text 14pt Medium `#202124`, then below it '9:00 – 9:30 AM' in SF Pro Text 13pt Regular tabular `#5F6368', then 'Conference Room B' in 13pt Regular `#5F6368` with a `mappin.fill` SF Symbol prefix. Tap fades the row to `#F1F3F4` for 80ms, then opens the event detail."
+- "Design the Google Calendar Month grid cell: ~52pt height, day number '14' in Google Sans 14pt Regular tabular `#202124` at top-left with 6pt inset. If today, wrap the number in a 28pt `#1A73E8` filled circle, number turns white and bumps to Medium. Below the number, 2-3 tiny 4pt event dots in the source calendar's color stacked vertically. Other-month numbers in `#80868B`."
+- "Build the Google Calendar FAB: 56pt circle, Material Blue `#1A73E8` background, white `plus` SF Symbol at 24pt centered. Material Level 6 dual-shadow: `rgba(60,64,67,0.15) 0 4px 8px` plus `rgba(60,64,67,0.30) 0 1px 2px`. On press, shadow lifts to `0 6px 12px`. Tap opens an action sheet from the FAB position with Event / Task / Goal options. Haptic `.impactOccurred(.medium)`."
+- "Create the Google Calendar Day timeline: 56pt time gutter on the left with hourly labels '9 AM', '10 AM' in SF Pro Text 11pt Regular tabular `#5F6368'. Horizontal gridlines at every hour in 0.5pt `#DADCE0`. Events render as tinted rectangles in their calendar color at 20% saturation with a 3pt left bar at full saturation. Current time indicator: a 2pt `#D93025` red line across the full width with a 10pt filled circle on the left edge, updates every 60 seconds."
+
+### Iteration Guide
+1. Canvas is `#FFFFFF`; Surface Gray `#F1F3F4` for day banners and section fills
+2. Google Blue `#1A73E8` is the action color — FAB, links, primary CTAs, Today highlight
+3. Event colors are the Material primaries: Blue (events), Red (declined), Yellow (tasks), Green (goals); plus the full 24-color user calendar palette
+4. The FAB at bottom-right with Material Level 6 dual-shadow is non-negotiable
+5. Google Sans Display for headlines, SF Pro Text for body on iOS — this is the deliberate hybrid stack
+6. Use Medium (500) for emphasis; almost never Bold
+7. Tabular figures on all times and day numbers — column alignment matters
+8. Material elevation system: Level 1 cards, Level 6 FAB, Level 4 sheets
+9. Today is always a filled blue circle with a white number inside
+10. Dark mode is `#202124` canvas (Google's warm near-black) with brighter blue `#8AB4F8` for the FAB and links