designmd-forge 1.2.0

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

@@ -0,0 +1,351 @@
+# Design System Inspiration of Flo (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Flo's iOS app is a soft, reassuring light space built around one circular object: the **cycle wheel**. The canvas is pure white (`#FFFFFF`), and the dominant supporting surface is a barely-there blush (`#FFF0F3`) — the color of the inside of a shell. The whole app is rounded, low-contrast, and gentle: nothing has a hard edge, nothing shouts. This is deliberate — Flo handles intimate, sometimes anxious subject matter (cycles, fertility, symptoms), and the visual language is engineered to feel calm, private, and unclinical. It looks less like a medical chart and more like a friendly daily companion.
+
+The accent system is led by **Flo Coral** (`#FF6B81`) — a warm, soft pink-red that carries the brand. It is used for the primary action, the active tab, the "today" marker on the wheel, and the prediction highlight. A secondary **lavender** (`#C5B3E6`) supports it for the fertile-window and ovulation phase, giving the cycle wheel a two-color phase story (coral for period, lavender for fertile). Beyond these two, everything is monochrome warm-grey: near-black ink (`#1A1A2E`) for text, a muted violet-grey (`#6E6A82`) for secondary copy. The restraint keeps the emotionally loaded content from feeling alarming — color is soft and used to *reassure*, never to warn.
+
+Typography is Inter (Flo's product face is a rounded geometric sans in this family — Gilroy-like in feel), used warmly at 400 / 600 / 700. Headlines are friendly and medium-sized rather than bold and large — a 28pt greeting, a 22pt section header. The most prominent number is at the center of the cycle wheel: the cycle day or the countdown to the next period ("Period in 5 days"). Around the wheel, labels are small and supportive. The single most expressive moment is the wheel itself animating: when the day advances or the user logs, the phase ring smoothly rotates and the phase colors morph, so the user *sees* where they are in their cycle.
+
+**Key Characteristics:**
+- Pure-white canvas (`#FFFFFF`) with a barely-there blush surface (`#FFF0F3`)
+- Soft, rounded, low-contrast — engineered to feel calm and unclinical
+- Flo Coral (`#FF6B81`) as the lead accent — primary action, active tab, "today" marker
+- Lavender (`#C5B3E6`) as the phase partner — fertile window / ovulation on the wheel
+- The cycle wheel — a circular calendar with a colored phase ring (signature)
+- Prediction card — a reassuring sentence ("Period in 5 days", "Ovulation today")
+- Symptom-log chip grid — soft tappable chips for daily logging
+- Soft, generously rounded cards (16-20pt radius) with gentle shadows
+- Bottom tabs (Today / Calendar / Insights / Partner / More)
+- Inter typeface, 400/600/700 — friendly and warm, never clinical
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Flo Coral** (`#FF6B81`): The lead accent — primary CTA, active tab, the "today" dot on the wheel, prediction highlight, period phase on the cycle ring.
+- **Coral Pressed** (`#E85870`): Pressed/active state for coral controls.
+- **Coral Soft** (`#FFD9DF`): Coral at low intensity — selected-chip background, subtle fills, period-day calendar cells.
+
+### Phase Partner
+- **Lavender** (`#C5B3E6`): The fertile-window / ovulation phase on the cycle wheel, fertile calendar cells, fertility insight accents.
+- **Lavender Deep** (`#A893D6`): Pressed state for lavender controls; the ovulation-day marker.
+- **Lavender Soft** (`#EDE6F7`): Lavender at low intensity — fertile-day cell fills.
+
+### Canvas & Surfaces
+- **Canvas White** (`#FFFFFF`): The primary canvas.
+- **Surface Blush** (`#FFF0F3`): The barely-there blush card/section surface — the app's signature soft background.
+- **Surface Raised** (`#FFFFFF`): White cards that lift off the blush with a soft shadow.
+- **Surface Sunken** (`#FBE9ED`): Pressed state on blush surfaces, subtle input fills.
+- **Divider** (`#F3DDE3`): Hairline separators — a soft pink-tinted grey, never harsh.
+
+### Text
+- **Text Primary** (`#1A1A2E`): Headlines, the cycle-day number, primary copy — a soft near-black with a violet cast (not pure black).
+- **Text Secondary** (`#6E6A82`): Supporting copy, dates, descriptions, labels (muted violet-grey).
+- **Text Tertiary** (`#A09CB0`): Very low-emphasis metadata, placeholder text, disabled labels.
+
+### Semantic (Soft, Reassuring)
+- **Predicted Period** (`#FF6B81`): Predicted period days on the calendar (coral, often outlined rather than filled to read as "forecast").
+- **Logged Period** (`#E85870`): Confirmed/logged period days (the deeper coral — solid fill).
+- **Fertile Window** (`#C5B3E6`): Fertile days (lavender fill).
+- **Ovulation** (`#A893D6`): The single ovulation day (deep lavender, a ring or star marker).
+- **Gentle Positive** (`#7DC9A8`): A soft sage for "Cycle logged" / positive confirmations — never a loud green.
+- **Gentle Alert** (`#F2B36B`): A soft amber for "Late period" / attention — warm and calm, never red.
+
+### Light Mode
+Flo's iOS app is light-first by design — the soft white space is intrinsic to the calm, unclinical brand. A dark mode exists for OS parity (Canvas `#15131C`, Surface `#221E2C`, Text `#F2EFF7`, with Coral and Lavender preserved), but the light experience is primary and is what this spec describes.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Inter` — Flo's product face is a rounded geometric sans in this family (Gilroy-like warmth)
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif`
+- **Numerals**: tabular figures on the wheel center and calendar (`font-variant-numeric: tabular-nums`) so day numbers align
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Wheel Center (Hero) | Inter | 30pt | 700 | 1.1 | -0.4pt | "Day 14" or "Period in 5 days" at the wheel center |
+| Greeting | Inter | 28pt | 700 | 1.2 | -0.3pt | "Good morning, Mia" on Today |
+| Screen Title | Inter | 24pt | 700 | 1.25 | -0.3pt | "Calendar", "Insights" large title |
+| Section Header | Inter | 22pt | 700 | 1.3 | -0.2pt | "My cycle", "Symptoms today" |
+| Card Title | Inter | 18pt | 600 | 1.3 | -0.1pt | Insight / prediction card heading |
+| Prediction Emphasis | Inter | 20pt | 700 | 1.25 | -0.2pt | The reassuring forecast line, coral |
+| Body | Inter | 16pt | 400 | 1.55 | 0pt | Insight body, explanatory copy |
+| List / Chip Label | Inter | 15pt | 600 | 1.3 | 0pt | Symptom chip text, list-row title |
+| Subtitle / Date | Inter | 14pt | 400 | 1.4 | 0pt | "May 14 · Cycle day 14", supporting meta |
+| Button (Primary) | Inter | 16pt | 600 | 1.0 | 0.1pt | "Log period", "Save" CTA text |
+| Calendar Day | Inter | 15pt | 600 | 1.0 | 0pt | The number inside a calendar cell |
+| Meta / Caption | Inter | 13pt | 500 | 1.3 | 0.1pt | "Updated today", small captions |
+| Tab Label | Inter | 11pt | 600 | 1.0 | 0.2pt | Bottom tab labels |
+| Label (UPPER) | Inter | 12pt | 700 | 1.2 | 0.8pt | "TODAY", "FERTILE WINDOW" tags |
+
+### Principles
+- **Friendly, not bold**: headlines are medium-large (24-30pt) at weight 700 — present but never aggressive; Flo reassures.
+- **The wheel number leads**: the largest, most important figure is the cycle-day / countdown at the wheel center.
+- **Tabular numerals on data**: calendar days and the wheel center use tabular figures so grids and the count never reflow.
+- **Weight band 400 / 600 / 700**: regular for body, semibold for chips/cards, bold for headlines/wheel. No light, no black.
+- **Color is reassurance**: coral and lavender carry phase meaning; text stays warm-grey — never color body text to alarm.
+
+## 4. Component Stylings
+
+### Cycle Wheel *(signature)*
+- A circular calendar, diameter 240-280pt, centered at the top of Today
+- Outer phase ring: segments colored by phase — Coral (`#FF6B81`) for period days, Coral Soft for the lead-in, Lavender (`#C5B3E6`) for the fertile window, Lavender Deep for ovulation, and `#F3DDE3` for ordinary days
+- A `#FF6B81` "today" dot sits on the ring at the current cycle position with a subtle pulse
+- Center stack: the big figure ("Day 14", 30pt w700) above a supporting line ("Follicular phase" or "Period in 5 days", 14pt `#6E6A82`)
+- Below the center: a soft coral pill CTA — "Log period" / "Edit period dates"
+- Interaction: dragging around the ring scrubs the predicted date; the phase morphs and the center updates live
+- Reveal: on load, the phase ring sweeps in and the center figure fades up over ~700ms
+
+### Buttons
+
+**Primary CTA**
+- Shape: Full pill, height 52pt
+- Background: `#FF6B81`
+- Text: `#FFFFFF`, Inter 16pt w600
+- Padding: 16pt vertical, 32pt horizontal, corner radius 26pt
+- Pressed: background `#E85870`, scale 0.97, soft haptic
+- Used for: "Log period", "Save", "Continue"
+
+**Soft Secondary Button**
+- Background: `#FFD9DF` (coral soft)
+- Text: `#E85870`, Inter 16pt w600
+- Padding: 14pt vertical, 28pt horizontal, corner radius 26pt
+- Pressed: background `#FBE9ED`
+- Used for: "Add symptom", secondary card actions
+
+**Text Button**
+- Font: Inter 15pt w600, color `#FF6B81`
+- No background, 44pt hit area
+- Used for: "See all", "Skip", "Edit"
+
+**Icon Actions (Add, Edit, Info, Share)**
+- Size: 20pt glyph, 44pt hit area
+- Default: `#6E6A82`; Pressed/active: `#FF6B81`
+
+### Cards & Containers
+
+**Prediction Card** *(signature)*
+- Background: `#FFF0F3` (blush) or white with a soft shadow
+- Corner radius: 20pt, padding 20pt
+- Leading: a 28pt soft illustrative glyph (droplet for period, leaf for fertile)
+- Title: a label "NEXT PERIOD" 12pt w700 uppercase `#6E6A82`
+- Emphasis: "In 5 days" — Inter 20pt w700 `#FF6B81`
+- Sub: "Expected May 19 · 87% confidence" — Inter 14pt `#6E6A82`
+- Trailing chevron if it deep-links
+
+**Symptom Log Chip Grid** *(signature)*
+- A wrapping grid of soft chips for daily logging
+- Chip: background `#FFF0F3`, text `#1A1A2E` Inter 15pt w600, optional leading 18pt glyph
+- Padding: 10pt vertical, 16pt horizontal, corner radius 18pt
+- Selected: background `#FFD9DF`, 1.5pt border `#FF6B81`, text `#E85870`
+- Tap: scale 0.96 + soft haptic; selection animates a gentle fill
+- Grid gap: 10pt; categories grouped under 12pt uppercase labels (Mood, Flow, Symptoms)
+
+**Insight Card**
+- Background: `#FFFFFF`, soft shadow `rgba(255,107,129,0.10) 0 6px 20px`, corner radius 16pt, padding 18pt
+- Top: a small illustrative banner or 24pt glyph in coral/lavender
+- Title: Inter 18pt w600 `#1A1A2E`; Body: Inter 16pt w400 `#6E6A82`
+- Pressed: background `#FFF0F3`
+
+**Calendar Month Grid**
+- 7-column grid of day cells, each 40pt
+- Day number: Inter 15pt w600
+- Cell states:
+  - Ordinary: no fill, text `#1A1A2E`
+  - Predicted period: coral outline ring (1.5pt `#FF6B81`), text `#FF6B81`
+  - Logged period: solid `#E85870` fill, white text
+  - Fertile window: `#EDE6F7` fill, text `#1A1A2E`
+  - Ovulation: `#A893D6` ring/star marker
+  - Today: a `#FF6B81` dot under the number
+- Selected day: scales up slightly with a soft shadow
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 56pt + safe area
+- Background: `rgba(255,255,255,0.94)` with `.regularMaterial` blur, hairline `#F3DDE3` top border
+- Tabs: Today, Calendar, Insights, Partner, More
+- Icon size: 24pt
+- Active color: `#FF6B81`
+- Inactive: `#A09CB0`
+- Labels: Inter 11pt w600, always shown
+- Active icon filled; inactive outlined
+
+**Top Bar**
+- Height: 44pt + safe area, transparent over white
+- Left: greeting or screen title
+- Right: a small streak/log indicator then a profile glyph 22pt `#6E6A82`
+- No solid background — it floats; a soft `#F3DDE3` divider appears on scroll
+
+**Calendar Screen**
+- Month grid (states above), a month switcher, a legend chip row explaining the colors
+- A floating coral "+" log button bottom-right (56pt circle, `#FF6B81`, soft shadow)
+
+### Input Fields
+
+**Search / Note Field**
+- Background: `#FFF0F3`, height 46pt, corner radius 23pt
+- Leading `magnifyingglass` 16pt `#6E6A82`
+- Placeholder: "Search articles & symptoms", 15pt `#A09CB0`
+- Focus: 1.5pt border `#FF6B81`, background → `#FFFFFF`
+
+**Note / Journal Textarea**
+- Background: `#FFF0F3`, corner radius 16pt, padding 14pt
+- Text `#1A1A2E` 16pt; placeholder `#A09CB0`
+
+### Distinctive Components
+
+**Cycle Phase Wheel** — the defining surface (see above): a circular phase calendar that rotates and morphs colors as the cycle advances.
+
+**Prediction Banner**
+- A reassuring full-width strip at the top of Today under the wheel: a soft blush banner with the forecast in coral and a calm supporting sentence
+
+**Phase Legend**
+- A small horizontal row of dot+label pairs (Period · Fertile · Ovulation · Predicted) that decodes the wheel and calendar colors
+
+**Daily Log Prompt**
+- A gentle card "How are you feeling today?" opening the symptom chip grid — soft, optional, never nagging
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 28, 32, 40, 56
+- Standard horizontal margin: 20pt (generous — Flo is airy and calm)
+- Section spacing: 28pt between major blocks
+
+### Grid & Container
+- Single column, full device width with 20pt horizontal margins
+- The cycle wheel is centered with generous vertical air at the top of Today
+- Symptom chips wrap fluidly; calendar is a 7-column grid
+- Cards are full content width with rounded corners
+
+### Whitespace Philosophy
+- **Calm needs space**: generous 20pt margins, 1.55 body leading, 28pt section gaps — the airiness is part of the reassurance.
+- **The wheel is the anchor**: it gets the most vertical room on Today; nothing crowds it.
+- **Soft density in logging**: the symptom grid is tighter (10pt gaps) but the chips themselves are pill-soft so it never feels like a form.
+
+### Border Radius Scale
+- Soft (12pt): small inner elements, note fields
+- Standard (16pt): insight cards, calendar selected-cell
+- Comfortable (18-20pt): chips, prediction cards, blush sections
+- Pill (26pt): primary/secondary buttons, search field
+- Circle (50%): the cycle wheel, the floating log button, avatars, today dot
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow; blush `#FFF0F3` fill | Sections, the canvas |
+| Card (Level 1) | `rgba(255,107,129,0.10) 0 6px 20px` + white fill | Insight cards lifting off blush |
+| Raised (Level 2) | `rgba(255,107,129,0.14) 0 10px 28px` | Prediction card, the focused/selected calendar day |
+| Floating (Level 3) | `rgba(255,107,129,0.22) 0 8px 24px` | The floating coral log button |
+| Sheet (Level 4) | `rgba(26,26,46,0.18) 0 -16px 48px` + white | Bottom sheets (log flow, date picker) |
+| Tab Bar Material | `rgba(255,255,255,0.94)` + `.regularMaterial` | Floats above scrolling content |
+
+**Shadow Philosophy**: Flo's shadows are soft, warm, and *tinted coral* — `rgba(255,107,129,...)` rather than neutral black — so cards feel like they belong to the blush world rather than casting harsh grey. Shadows are diffuse (20-28pt blur) and low opacity; depth is gentle. The cycle wheel itself sits flat on the canvas (it is a precise instrument, not a 3D object); only cards, the floating log button, and sheets lift.
+
+### Motion
+- **Wheel reveal**: phase ring sweeps in (~700ms ease-out) and the center figure fades + scales up from 0.9 in sync
+- **Wheel scrub/advance**: dragging rotates the ring; phase colors crossfade-morph over 300ms as segments change
+- **Chip select**: scale 0.96 → 1.0, fill animates from blush to coral-soft over 200ms, soft haptic
+- **Card tap**: scale 0.98 → 1.0 over 200ms ease-out, soft haptic
+- **Calendar day select**: cell scales up ~1.08 with a soft shadow bloom over 200ms
+- **Screen transitions**: gentle fade + 8pt rise, 350ms ease-out (never a hard slide)
+- **Log success**: a soft sage check and a single gentle haptic; the wheel updates with a smooth morph
+- **Prediction update**: the forecast number cross-dissolves (no hard swap)
+
+## 7. Do's and Don'ts
+
+### Do
+- Use a pure-white canvas with the barely-there blush (`#FFF0F3`) as the soft surface
+- Lead with Flo Coral (`#FF6B81`) for the primary action, active tab, and "today" marker
+- Use lavender (`#C5B3E6`) as the phase partner for the fertile window / ovulation
+- Make the cycle wheel the anchor of Today — large, centered, with generous air
+- Keep everything soft and rounded — 16-26pt radii, no hard edges
+- Tint shadows coral (`rgba(255,107,129,...)`) so depth belongs to the blush world
+- Phrase predictions reassuringly ("Period in 5 days") — calm, never alarming
+- Use soft sage for positive confirmations and soft amber for gentle alerts — never red
+- Use tabular figures on the wheel center and calendar so numbers never reflow
+
+### Don't
+- Don't use a clinical white-and-grey medical aesthetic — Flo is warm and unclinical
+- Don't introduce loud or alarming colors — even alerts are soft amber, never red
+- Don't make headlines aggressively large or heavy — friendly weight 700 at 24-30pt
+- Don't use neutral black shadows — Flo's shadows are coral-tinted and soft
+- Don't square the corners — the entire app is gently rounded
+- Don't add a third phase color — coral and lavender carry the whole phase story
+- Don't crowd the cycle wheel — it needs vertical breathing room as the anchor
+- Don't animate harshly — phase morphs and fades are gentle, 200-350ms
+- Don't color body text to draw alarm — color is reassurance, carried by coral/lavender
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Cycle wheel 240pt; calendar cells 38pt |
+| iPhone 13/14/15 | 390pt | Cycle wheel 260pt; standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clears the floating top bar |
+| iPhone 15/16 Pro Max | 430pt | Cycle wheel 280pt; calendar cells 44pt |
+| iPad | 768pt+ | Two-pane: wheel + predictions beside the calendar; wider chip grid |
+
+### Dynamic Type
+- Greetings, titles, body, card titles: full scale
+- Wheel center figure: scales modestly but capped so it fits inside the wheel (~34pt max)
+- Calendar day numbers, tab labels, captions: fixed (layout-sensitive at 11-15pt)
+- Prediction emphasis: scales with body
+
+### Orientation
+- Today / Calendar / Insights / Partner: **portrait-locked** (the wheel + scroll layout is vertical)
+- iPad: **rotates** — landscape uses the two-pane layout
+
+### Touch Targets
+- Primary CTA: 52pt tall — generous
+- Symptom chips: full chip is the tap target (≥44pt effective)
+- Calendar cells: 40pt cells with 44pt effective hit
+- Floating log button: 56pt circle
+- Tab icons: 24pt glyph, 44pt effective hit
+- The cycle wheel ring is draggable; the center CTA is a separate 44pt+ target
+
+### Safe Area Handling
+- Top: floating bar respects the notch / Dynamic Island
+- Bottom: tab bar and the floating log button float above the home indicator
+- Sides: 20pt content insets
+- The cycle wheel centers within the safe content area
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas: `#FFFFFF`
+- Surface blush: `#FFF0F3`
+- Surface sunken (pressed): `#FBE9ED`
+- Divider: `#F3DDE3`
+- Text primary: `#1A1A2E`
+- Text secondary: `#6E6A82`
+- Flo Coral (accent): `#FF6B81`
+- Coral pressed: `#E85870`
+- Coral soft (selected): `#FFD9DF`
+- Lavender (fertile): `#C5B3E6`
+- Lavender deep (ovulation): `#A893D6`
+
+### Example Component Prompts
+- "Create a SwiftUI Flo cycle wheel: a 260pt circular phase calendar. Outer ring segments colored by phase — #FF6B81 for period days, #C5B3E6 for the fertile window, #A893D6 for ovulation, #F3DDE3 for ordinary days. A pulsing #FF6B81 'today' dot on the ring at the current position. Center stack: 'Day 14' in Inter 30pt weight 700 #1A1A2E above 'Follicular phase' in Inter 14pt #6E6A82. Below the center, a soft coral pill 'Log period'. On load, sweep the ring in and fade+scale the center up over 700ms ease-out."
+- "Build a Flo prediction card: blush #FFF0F3 background, 20pt radius, 20pt padding. Leading a 28pt droplet glyph in #FF6B81. A label 'NEXT PERIOD' in Inter 12pt weight 700 uppercase #6E6A82, then 'In 5 days' in Inter 20pt weight 700 #FF6B81, then 'Expected May 19 · 87% confidence' in Inter 14pt #6E6A82. Soft coral-tinted shadow rgba(255,107,129,0.10) 0 6px 20px."
+- "Design the symptom log chip grid: wrapping chips, gap 10pt, grouped under 12pt uppercase #6E6A82 labels. Each chip: blush #FFF0F3 background, text #1A1A2E Inter 15pt weight 600, optional 18pt leading glyph, padding 10pt vertical / 16pt horizontal, 18pt radius. Selected: background #FFD9DF, 1.5pt #FF6B81 border, text #E85870. Tap scales 0.96 with a soft haptic and animates the fill over 200ms."
+- "Build the Flo calendar month grid: 7-column grid of 40pt day cells, day number Inter 15pt weight 600. States: ordinary (no fill, #1A1A2E text); predicted period (1.5pt #FF6B81 outline ring, #FF6B81 text); logged period (solid #E85870 fill, white text); fertile window (#EDE6F7 fill); ovulation (#A893D6 ring marker); today (a #FF6B81 dot under the number). Selected day scales 1.08 with a soft shadow."
+- "Create the Flo primary CTA: full pill 52pt tall, #FF6B81 background, label in Inter 16pt weight 600 #FFFFFF, padding 16pt vertical / 32pt horizontal, 26pt radius. Pressed: background #E85870, scale 0.97, soft haptic."
+
+### Iteration Guide
+1. Canvas is pure white with a barely-there blush surface `#FFF0F3` — soft and unclinical
+2. Flo Coral `#FF6B81` leads (action, active tab, today); lavender `#C5B3E6` is the phase partner
+3. The cycle wheel is the anchor — large, centered, rotates and morphs colors as the cycle advances
+4. Everything is gently rounded (16-26pt) — no hard edges anywhere
+5. Shadows are soft and coral-tinted (`rgba(255,107,129,...)`), not neutral black
+6. Predictions are reassuring sentences; alerts are soft amber, confirmations soft sage — never red
+7. Headlines are friendly weight 700 at 24-30pt; the wheel center figure is the lead number (tabular)
+8. Motion is gentle — phase morphs and fades at 200-350ms, nothing harsh
+9. Flo is light-first — a dark mode exists for OS parity but light is the primary experience