Quora DESIGN.md

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

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

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

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