designmd-forge 1.2.0

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

@@ -0,0 +1,359 @@
+# Design System Inspiration of Quora (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Quora's iOS app is a bright, paper-white reading environment built around a single tension: a question deserves the gravity of a printed headline, but an answer should feel like a person talking to you. The canvas is pure white (`#FFFFFF`), surfaces are a faint warm gray (`#F7F7F8`), and the only saturated color in the entire interface is Quora Red (`#B92B27`) — held in reserve for the wordmark, the "Answer" call to action, and a thin set of editorial accents. Everything else is text, hairlines, and breathing room. The screen reads like an open book of questions, each one waiting for a considered response.
+
+The defining typographic decision is the serif/sans split. Every question is set in **Georgia**, a transitional serif with sturdy bracketed slabs — it gives the question authority, the feeling of a thing worth answering. The moment you drop into the answer body, the type switches to **Inter**, a neutral humanist sans, optimized for long-form screen reading. This is not decoration: it is the information architecture made visible. A user can scan a feed and instantly tell "this is the prompt" from "this is the discourse" without reading a word. The credential byline beneath each answer — "Former Software Engineer at Google, 2014–2021" — is the third type voice: small, gray, sans, and load-bearing, because on Quora authority is the currency.
+
+Chrome is deliberately quiet. A top segmented tab bar (Home / Following / Answer / Spaces / Notifications-style segments) sits under a slim search field; a bottom navigation bar mirrors the primary destinations for thumb reach. The feed is a vertical stack of question cards separated by a 8pt warm-gray gutter rather than heavy borders. The upvote/downvote control is a rounded pill, not loose icons — a compact unit that travels with each answer. There are no gradients, no glassmorphism, no shadows deeper than a 1px card lift. The app trusts the writing to carry the experience and keeps the container out of the way.
+
+**Key Characteristics:**
+- Paper-white canvas (`#FFFFFF`) with warm-gray surfaces (`#F7F7F8`) — a reading app, not a feed app
+- Quora Red (`#B92B27`) as the sole brand accent — wordmark, "Answer" CTA, editorial highlights only
+- **Serif-question / sans-answer split**: Georgia for every question, Inter for every answer
+- Credential byline as a first-class type role — authority is the product
+- Upvote/downvote pill — a single compact rounded unit, upvote turns blue (`#2E69FF`) when active
+- Top segmented tab + bottom nav (Home / Following / Answer / Spaces / Notifications)
+- Spaces row — horizontally scrollable community tiles surfaced in the feed
+- "Answer" prompt card — a recurring invitation that nudges contribution
+- Hairline dividers (`#E0E0E0`), 1px card lift, zero heavy shadow
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Quora Red** (`#B92B27`): Wordmark, "Answer" primary CTA, active editorial accents, link emphasis in branded contexts.
+- **Quora Red Pressed** (`#9E1F1B`): Active/pressed state for the red CTA and red interactive elements.
+- **Upvote Blue** (`#2E69FF`): Active upvote state, "Upvoted" pill fill text, follow-confirmed accents.
+
+### Canvas & Surface (Light)
+- **Canvas White** (`#FFFFFF`): Primary background — question cards, answer body, navigation bars.
+- **Surface Gray** (`#F7F7F8`): Feed gutter, grouped sections, search field background, inactive segment fill.
+- **Divider** (`#E0E0E0`): Hairline dividers between rows, card outlines, segmented control separators.
+- **Text Primary** (`#282829`): Questions (Georgia), answer body (Inter), primary labels.
+- **Text Secondary** (`#636466`): Credential byline, metadata, timestamps, upvote counts, secondary labels.
+- **Text Tertiary** (`#9A9A9C`): Placeholder text, disabled labels, very low-emphasis captions.
+
+### Canvas & Surface (Dark — Limited Use)
+Quora's iOS app is primarily a light reading surface; a dark variant exists for system-dark users.
+- **Dark Canvas** (`#1A1A1B`)
+- **Dark Surface** (`#262627`)
+- **Dark Divider** (`#383839`)
+- **Dark Text Primary** (`#E8E8E8`)
+- **Dark Text Secondary** (`#A0A0A2`)
+
+### Semantic
+- **Upvote Active** (`#2E69FF`): Filled upvote arrow + count.
+- **Downvote Active** (`#636466`): Filled downvote arrow (neutral gray, intentionally not red — downvote is quiet).
+- **Link Blue** (`#2E69FF`): Inline links inside answer bodies.
+- **Success Green** (`#1FA463`): "Answer published" confirmation toast.
+- **Error Red** (`#D93025`): Form validation, failed-to-post states (distinct from brand red).
+
+### Quora Red Tints
+- **Red Wash** (`#FBEAEA`): Background of a red-bordered notice / "Most viewed writer" ribbon.
+- **Red Border** (`#E8B3B1`): 1px outline on red-themed promotional cards.
+
+## 3. Typography Rules
+
+### Font Family
+- **Questions / Headlines**: `Georgia` (transitional serif, ships on iOS) — the question voice
+- **Answers / UI**: `Inter` (humanist sans) — answer body, all chrome, buttons, labels
+- **Fallback Serif**: `Georgia, 'Times New Roman', 'Iowan Old Style', serif`
+- **Fallback Sans**: `Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif`
+- **Weights**: Georgia 400 / 700; Inter 400 / 600 / 700
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Question (Detail) | Georgia | 26pt | 700 | 1.3 | -0.2pt | Question page hero — the headline |
+| Question (Feed Card) | Georgia | 19pt | 700 | 1.35 | -0.1pt | Question title on a feed card |
+| Question (Related) | Georgia | 16pt | 400 | 1.4 | 0pt | "Related questions" list rows |
+| Answer Body | Inter | 16pt | 400 | 1.6 | 0pt | The core reading size — long-form answer text |
+| Answer Lead | Inter | 17pt | 400 | 1.6 | 0pt | First paragraph emphasis on answer page |
+| Credential Byline | Inter | 13pt | 600 | 1.35 | 0pt | "Former SWE at Google · 2.1M answer views" |
+| Author Name | Inter | 15pt | 700 | 1.3 | 0pt | Answer author display name |
+| Section Header | Inter | 18pt | 700 | 1.3 | -0.1pt | "Spaces to follow", "Top questions" |
+| Metadata | Inter | 13pt | 400 | 1.35 | 0pt | "Answered 3y ago", view counts |
+| Upvote Count | Inter | 14pt | 600 | 1.0 | 0pt | Number inside the vote pill |
+| Button (Primary) | Inter | 15pt | 700 | 1.0 | 0.1pt | Red "Answer" button label |
+| Button (Secondary) | Inter | 14pt | 600 | 1.0 | 0pt | "Follow", "Share" outline buttons |
+| Tab Label (Bottom) | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom navigation labels |
+| Segment Label (Top) | Inter | 14pt | 700 | 1.0 | 0pt | Top segmented control tabs |
+| Caption | Inter | 12pt | 400 | 1.35 | 0pt | Footnotes, "Sponsored", legal |
+
+### Principles
+- **Serif is the question, sans is everything else**: never set a question in Inter or an answer in Georgia — the split is structural
+- **Answer body is sacred at 16pt / line-height 1.6**: the app is read, not skimmed; generous leading is non-negotiable
+- **Credential byline is semibold gray** — it must be quietly authoritative, never shouting
+- **Weight discipline**: Georgia only 400/700, Inter only 400/600/700 — no light, no black
+- **Negative tracking only on large serif** (-0.2pt max on the detail question); body sits at 0pt
+- **Dynamic Type respected on question + answer text**; vote counts and tab labels are layout-fixed
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary "Answer" CTA**
+- Background: `#B92B27`
+- Text: `#FFFFFF`, Inter 15pt weight 700, letter-spacing 0.1pt
+- Padding: 11pt vertical, 24pt horizontal
+- Corner radius: 6pt
+- Icon (optional): pencil glyph 16pt leading, 6pt gap
+- Pressed: background `#9E1F1B`, scale 0.98
+- Used for: "Answer" on a question card, "Add answer" on detail page
+
+**Secondary Outline ("Follow" / "Share")**
+- Background: `#FFFFFF`
+- Text: `#282829`, Inter 14pt weight 600
+- Border: 1pt solid `#E0E0E0`
+- Padding: 8pt vertical, 16pt horizontal
+- Corner radius: 6pt
+- Pressed: background `#F7F7F8`
+- Followed state: text `#2E69FF`, border `#2E69FF`, label "Following"
+
+**Upvote / Downvote Pill (Signature)**
+- Container: single rounded pill, height 32pt, border 1pt `#E0E0E0`, background `#FFFFFF`, corner radius 16pt
+- Left segment: up-arrow glyph 16pt + count (Inter 14pt w600 `#636466`)
+- Vertical hairline divider `#E0E0E0` between up and down
+- Right segment: down-arrow glyph 16pt
+- Active upvoted: left segment fill `#EAF0FF`, arrow + count `#2E69FF`
+- Active downvoted: right arrow `#636466` filled (neutral — never red)
+- Pressed: subtle scale 0.96 + soft haptic
+
+**Text Link ("More", "Continue Reading")**
+- Inter 14pt weight 600, color `#2E69FF`
+- No underline; 44pt hit area; pressed opacity 0.6
+
+**Icon Action (Comment, Share, Bookmark, More)**
+- Glyph 18pt, hit area 44pt, color `#636466`
+- Active bookmark: `#B92B27`
+- Spacing: 24pt between actions in the answer footer row
+
+### Cards & Containers
+
+**Question Feed Card**
+- Background: `#FFFFFF`, full bleed, separated by 8pt `#F7F7F8` gutter (no border)
+- Inner padding: 16pt
+- Structure: author row (24pt avatar + name + credential) → **Georgia question 19pt w700** → answer preview (Inter 16pt w400, 3-line clamp, `#282829`) → "(more)" link → footer (vote pill + comment + share)
+- Tap question: pushes question detail with crossfade
+- Pressed card: background `#FAFAFA`
+
+**Answer Card (Detail Page)**
+- Background: `#FFFFFF`
+- Author block: 40pt circular avatar + name (15pt w700) + **credential byline (13pt w600 `#636466`)** + "Answered 3y ago"
+- Body: Inter 16pt w400, line-height 1.6, paragraph spacing 14pt
+- Footer: upvote/downvote pill (leading) + comment count + share + bookmark + ⋯
+- Divider `#E0E0E0` between stacked answers, 24pt vertical padding around it
+
+**Spaces Row**
+- Horizontally scrollable row of Space tiles surfaced in the feed
+- Tile: 140pt wide, `#FFFFFF`, 1pt `#E0E0E0` border, corner radius 10pt
+- Banner strip 64pt tall (Space color), 40pt Space icon overlapping, name (Inter 15pt w700), member count (13pt `#636466`), "Follow" outline button
+- Section header: "Spaces for you" (Inter 18pt w700) + "See all" link
+
+**"Answer" Prompt Card**
+- Background: `#FFFFFF`, 1pt `#E0E0E0` border, corner radius 10pt, padding 16pt
+- Prompt question in **Georgia 17pt w700**
+- Subtext "Share your knowledge" (Inter 13pt `#636466`)
+- Full-width red "Answer" button at the bottom
+
+**Search Result Row**
+- Height 60pt, leading 20pt magnifier or topic icon, Georgia 16pt w400 question text, trailing chevron `#9A9A9C`
+- Divider `#E0E0E0`, pressed `#F7F7F8`
+
+### Navigation
+
+**Top Segmented Tab Bar**
+- Height: 44pt, background `#FFFFFF`, bottom hairline `#E0E0E0`
+- Segments: scrollable text tabs (Inter 14pt w700)
+- Active: text `#282829` with a 2pt `#B92B27` underline indicator beneath the label
+- Inactive: text `#636466`
+- Search field directly above: `#F7F7F8` fill, 36pt tall, corner radius 8pt, leading magnifier 16pt `#636466`, placeholder "Search Quora"
+
+**Bottom Navigation Bar**
+- Height: 52pt + safe area, background `#FFFFFF`, top hairline `#E0E0E0`
+- Tabs: Home, Following, **Answer (center, red glyph)**, Spaces, Notifications
+- Icon 24pt; active `#282829`, inactive `#636466`
+- Center "Answer" tab: glyph rendered in `#B92B27` always (the contribution anchor)
+- Labels: Inter 10pt w600, always shown
+- Notifications tab: red dot badge `#B92B27` when unread
+
+**Question Detail Top Bar**
+- Height: 44pt + safe area, background `#FFFFFF`, bottom hairline on scroll
+- Leading: back chevron 22pt `#282829`
+- Center: "Question" label (Inter 15pt w700) — appears on scroll past hero
+- Trailing: share 20pt + ⋯ 20pt, both `#636466`
+
+### Input Fields
+
+**Search Field**
+- Background: `#F7F7F8`
+- Height: 36pt, corner radius 8pt
+- Leading SF-style magnifier 16pt `#636466`
+- Placeholder: "Search Quora", Inter 15pt w400 `#9A9A9C`
+- Focus: 1pt `#B92B27` border, background `#FFFFFF`, cursor `#B92B27`
+
+**Answer Composer**
+- Full-screen sheet, `#FFFFFF`
+- The question shown at top in **Georgia 19pt w700** (you always see what you're answering)
+- Body editor: Inter 16pt w400, line-height 1.6, placeholder "Write your answer…" `#9A9A9C`
+- Toolbar: bold / italic / link / image / quote glyphs, `#636466`, 22pt
+- Top-right: red "Post" button (disabled `#E8B3B1` until non-empty)
+
+### Distinctive Components
+
+**The Serif/Sans Split**
+- Every question — feed card, detail hero, related list, composer header, "Answer" prompt — is **Georgia**
+- Every answer body, byline, label, button, metadata is **Inter**
+- This is the single most identifying trait of the app: a Quora screen is recognizable from typographic contrast alone
+
+**Upvote/Downvote Pill**
+- One bordered capsule, upvote count visible, downvote arrow only (no count — Quora hides downvote totals)
+- Upvote active → blue (`#2E69FF`) wash + blue arrow/count; downvote active → gray fill, never red
+- Animation: arrow fills + count increments with a 200ms ease, soft haptic
+
+**Credential Byline**
+- Sits directly under the author name on every answer
+- Inter 13pt w600 `#636466`, may include a tiny check or "Most Viewed Writer" red ribbon
+- It is the trust signal — given typographic priority over timestamp
+
+**Spaces Carousel**
+- Community tiles with a colored banner, overlapping round icon, follow CTA
+- Surfaced inline between feed cards — the only place color (per-Space) enters the feed
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 56
+- Card inner padding: 16pt
+- Feed gutter between cards: 8pt (`#F7F7F8`, replaces borders)
+- Answer paragraph spacing: 14pt
+- Action row icon spacing: 24pt
+
+### Grid & Container
+- Content width: full device width, 16pt horizontal insets inside cards
+- Feed: single column of full-bleed cards
+- Spaces row: horizontal scroll, 140pt tiles, 12pt gap, 16pt leading inset
+- No multi-column grids — Quora is a single-column reading column
+
+### Whitespace Philosophy
+- **Generous line-height in answers**: 1.6 on 16pt body — readability over density
+- **Quiet gutters, not loud borders**: cards float on an 8pt gray gutter, hairlines only where structurally needed
+- **The question gets air**: 16–24pt above and below the Georgia question to let it act as a headline
+- **Restraint as identity**: whitespace + type contrast carry the brand; color is rationed
+
+### Border Radius Scale
+- Square (0pt): full-bleed feed cards (separated by gutter, not radius)
+- Soft (6pt): buttons, search field-adjacent inputs, "Answer" CTA
+- Standard (8pt): search field, inline notices
+- Comfortable (10pt): Space tiles, prompt cards, bottom sheets
+- Pill (16pt): upvote/downvote capsule
+- Round (50%): avatars, Space icons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Feed cards, list rows, canvas — separated by gutter/hairline |
+| Card Lift (Level 1) | `rgba(0,0,0,0.06) 0 1px 3px` | Space tiles, prompt cards |
+| Sticky Bar (Level 2) | `rgba(0,0,0,0.05) 0 1px 0` (hairline shadow) | Top segmented bar + bottom nav on scroll |
+| Sheet (Level 3) | `rgba(0,0,0,0.12) 0 -8px 32px` | Answer composer, share sheet, context menu |
+| Toast (Level 4) | `rgba(0,0,0,0.16) 0 6px 20px` | "Answer published" confirmation |
+
+**Shadow Philosophy**: Quora is a paper metaphor — shadows are nearly absent. The deepest shadow in the steady-state UI is a 3px, 6%-opacity card lift on Space tiles. Real elevation only appears on transient surfaces (composer, sheets, toasts). The white canvas means a heavy shadow would feel like dirt; the app keeps everything flat and lets type hierarchy create depth instead.
+
+### Motion
+- **Upvote tap**: arrow fills + count rolls +1 over 200ms ease-out, paired with `.impactOccurred(.light)`
+- **Pill press**: scale 1.0 → 0.96 → 1.0, 150ms
+- **Card tap → detail**: crossfade + 8pt upward slide, 280ms
+- **Composer present**: sheet slides up 320ms spring (damping 0.85)
+- **Follow toggle**: label crossfades "Follow" ↔ "Following", border color tween 180ms
+- **Pull-to-refresh**: minimal system spinner, no custom flourish
+
+## 7. Do's and Don'ts
+
+### Do
+- Use pure white (`#FFFFFF`) canvas with `#F7F7F8` surfaces — it is a reading app
+- Set **every question in Georgia** and **every answer in Inter** — the split is the brand
+- Reserve Quora Red (`#B92B27`) for the wordmark, the "Answer" CTA, and editorial accents only
+- Give the answer body 16pt with line-height 1.6 — leading is non-negotiable
+- Render the credential byline in semibold gray — authority is the product
+- Keep the upvote/downvote as one bordered pill; upvote-active is blue, never red
+- Separate feed cards with an 8pt gray gutter instead of borders or shadows
+- Keep the center bottom-nav "Answer" glyph red at all times
+
+### Don't
+- Don't set questions in a sans font or answers in a serif — never break the split
+- Don't add accent colors beyond red + upvote blue — the restraint is the identity
+- Don't make downvote red — it is a quiet neutral gray; Quora doesn't punish visually
+- Don't tighten answer line-height below 1.5 — it kills long-form readability
+- Don't use heavy shadows on the white canvas — max is a 6% 3px card lift
+- Don't show downvote counts — Quora deliberately hides them
+- Don't bury the credential byline below the timestamp — trust outranks recency
+- Don't use display-size headlines — the Georgia question at 26pt is the largest type
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Feed question 18pt, 3-line answer clamp stays |
+| iPhone 13/14/15 | 390pt | Standard — feed question 19pt |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clears top bar |
+| iPhone 15/16 Pro Max | 430pt | Detail question scales to 28pt, wider reading column |
+| iPad | 768pt+ | Centered 680pt max reading column, Spaces in 2-up grid |
+
+### Dynamic Type
+- Question (Georgia) and answer body (Inter): full scale
+- Detail question caps at 30pt; feed question caps at 22pt
+- Upvote count, tab labels, segment labels: layout-fixed (never scale)
+- Credential byline: scales one step then clamps
+
+### Orientation
+- Feed / Question detail / Spaces: **portrait-locked**
+- Answer composer: portrait-locked (writing surface)
+- Inline images in answers: tap to open full-screen viewer (rotates freely)
+
+### Touch Targets
+- "Answer" CTA: 44pt min height
+- Upvote/downvote pill: 32pt tall, each segment ≥44pt effective hit
+- Bottom nav items: 24pt icon, 49pt hit
+- Inline links in answer body: 44pt vertical hit padding
+
+### Safe Area Handling
+- Top: segmented bar + search respect safe area / Dynamic Island
+- Bottom: navigation bar respects home indicator
+- Sides: 16pt content insets; reading column never touches the edge
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas: `#FFFFFF`
+- Surface: `#F7F7F8`
+- Divider: `#E0E0E0`
+- Text primary: `#282829`
+- Text secondary: `#636466`
+- Text tertiary: `#9A9A9C`
+- Quora Red (CTA / wordmark): `#B92B27`
+- Quora Red pressed: `#9E1F1B`
+- Upvote blue (active): `#2E69FF`
+- Success green: `#1FA463`
+
+### Example Component Prompts
+- "Create a SwiftUI Quora question feed card: white background, 16pt padding, separated by an 8pt #F7F7F8 gutter (no border). Top: 24pt circular avatar + author name 'Dana Rourke' Inter 15pt w700 #282829 + credential 'Former Data Scientist · 1.4M views' Inter 13pt w600 #636466. Then the question in **Georgia 19pt weight 700 #282829** 'Why do experienced engineers prefer boring technology?'. Then a 3-line-clamped answer preview in Inter 16pt w400 #282829 ending with a blue '(more)' link. Footer: upvote/downvote pill, comment, share."
+- "Build the Quora upvote/downvote pill: one capsule 32pt tall, 1pt #E0E0E0 border, 16pt corner radius, white background. Left segment: up-arrow 16pt + count '1.2K' Inter 14pt w600 #636466. 1pt vertical #E0E0E0 divider. Right segment: down-arrow 16pt #636466. Upvoted state: left segment background #EAF0FF, arrow and count #2E69FF. Press: scale 0.96 with light haptic. Downvote never turns red."
+- "Design the Quora answer detail block: white background. 40pt circular avatar, author name Inter 15pt w700, credential byline Inter 13pt w600 #636466 'Former SWE at Google · 2.1M answer views', 'Answered 3y ago' Inter 13pt w400 #636466. Body: Inter 16pt weight 400, line-height 1.6, 14pt paragraph spacing, #282829. Footer row: upvote/downvote pill, comment count, share, bookmark, ellipsis — icons 18pt #636466, 24pt spacing. Divider #E0E0E0 below."
+- "Create the Quora Spaces carousel: section header 'Spaces for you' Inter 18pt w700 #282829 + 'See all' link #2E69FF. Horizontal scroll of 140pt tiles, white, 1pt #E0E0E0 border, 10pt radius: a 64pt colored banner, a 40pt round Space icon overlapping it, Space name Inter 15pt w700, member count Inter 13pt #636466, and a small outline 'Follow' button."
+- "Build the Quora bottom navigation: 52pt + safe area, white, top hairline #E0E0E0. Five tabs Home / Following / Answer / Spaces / Notifications. Icons 24pt; active #282829, inactive #636466. The center 'Answer' tab glyph is always #B92B27. Labels Inter 10pt w600. Notifications shows a #B92B27 dot badge when unread."
+
+### Iteration Guide
+1. Canvas is pure `#FFFFFF`, surfaces `#F7F7F8` — this is a reading app, keep it bright
+2. **Questions are Georgia, answers are Inter** — never swap; the split is the entire identity
+3. Quora Red (`#B92B27`) only for wordmark, "Answer" CTA, and editorial accents — nothing else
+4. Answer body is 16pt with line-height 1.6 — do not compress leading
+5. Credential byline is semibold gray and ranks above the timestamp — authority is the product
+6. Upvote/downvote is one bordered pill; upvote-active = blue, downvote = neutral gray (never red)
+7. Feed cards separate with an 8pt gray gutter, not borders or shadows
+8. Shadows are almost absent — paper metaphor; max 6% 3px card lift, real elevation only on sheets