# Design System Inspiration of Reddit (iOS)

## 1. Visual Theme & Atmosphere

Reddit's iOS app is a card-based community reader organized around the single most recognizable interactive control in consumer tech: the upvote/downvote column. Every post in a feed — whether from r/aww, r/AskReddit, or r/programming — is laid out the same way: a horizontal card with the vote arrow stack on the left (up arrow, karma number, down arrow), a subreddit avatar + "r/subredditname", a post title, optional media preview, and a row of actions (comments count, share, save, more). The consistency of this unit is the brand. A Reddit power user can scan 50 cards in 20 seconds because every card is structurally identical.

Reddit's color system is a two-pole light-mode vs dark-mode pair stitched together by the Reddit Orange-Red (`#FF4500`) — the single brand accent seen in the app logo, subreddit pill tints, and (historically) the upvote hover. The functional accent work, though, is done by a smaller palette: Upvote Orange (`#FF8717`) on active upvotes, Downvote Blue-Purple (`#7193FF` light / `#9494FF` dark) on active downvotes, and a grayscale for dormant votes. This is a meaningful chromatic decision: orange + blue-purple are complementary, they read semantically (warmth vs coolness) for approve vs disapprove, and they NEVER both light up at once because a user can only vote one way.

The mood is information-density-first. Reddit is a reading and scrolling app — people spend minutes in a thread, not seconds — so the app tolerates high-density cards with small type (14pt body, 12pt metadata) and uses ample white space ONLY inside cards (16pt internal padding), not between them. Newer Reddit iOS adds media-first card variants — photo-dominant, video-autoplaying — but the bone structure (vote column + meta + title + actions) stays. Subreddit customization is a signature feature: each community can set its own accent color (the "subreddit color"), its own banner image, its own sidebar rules, so a thread in r/AnimalCrossing looks cozy green and a thread in r/programming looks cool steel.

**Key Characteristics:**
- Reddit Orange-Red (`#FF4500`) as the brand color — logo, subreddit pill accent, rare CTAs
- Vote column on every post/comment — up arrow, karma number, down arrow in a vertical stack
- Upvote orange (`#FF8717`) and downvote blue-purple (`#7193FF`) as complementary semantic pair
- Card-first feed UI — every post is a self-contained card with avatar + title + preview + actions
- Subreddit avatars as circular icons — and subreddit accent color customization per community
- Flair pills (rectangular 4pt-radius chips) for post tags — per-subreddit styled
- Comment thread indentation lines — thin vertical rules on the leading edge of nested replies
- Snoo (the alien mascot) as the fallback avatar and Empty State character
- Chat Channels with real-time chat — a newer feature with Discord-like group messaging
- Media-first post variants — full-bleed image cards, video autoplay with mute toggle
- Light mode (`#F6F7F8` new / `#DAE0E6` old) and dark mode (`#1A1A1B` canvas, `#272729` cards)
- Reddit Sans (custom font, 2023+) with Noto Sans and SF Pro fallbacks

## 2. Color Palette & Roles

### Primary Brand
- **Reddit Orange-Red** (`#FF4500`): The single brand accent — logo, primary CTA pill, subreddit pill accent, occasional button.
- **Reddit Red** (`#FF585B`): Alerts, destructive banners, "community removed" warnings.
- **Orange-Red Pressed** (`#CC3700`): Pressed state for primary CTAs.

### Vote Colors (The Semantic Pair)
- **Upvote Orange** (`#FF8717`): Active upvote — slightly yellower than Reddit Red, intentionally distinct from the brand red.
- **Upvote Orange (Dark Mode)** (`#FFAA66`): Lighter variant for dark mode contrast.
- **Downvote Blue-Purple (Light)** (`#7193FF`): Active downvote — indigo-adjacent, cold.
- **Downvote Blue-Purple (Dark)** (`#9494FF`): Lighter variant for dark mode.
- **Vote Arrow Inactive** (`#878A8C` light / `#818384` dark): Gray dormant state.

### Canvas & Surfaces (Light Mode)
- **Canvas (New)** (`#F6F7F8`): Default light canvas — a cool very-light gray.
- **Canvas (Classic)** (`#DAE0E6`): The "old Reddit" blue-tinged light canvas, still used in some contexts.
- **Card Surface** (`#FFFFFF`): Post cards and comment threads sit on white.
- **Surface 2** (`#F2F3F5`): Hovered/pressed card state.
- **Divider** (`#EDEFF1`): Hairline between cards, between comments.
- **Subreddit Banner Placeholder** (`#0079D3`): Default blue tint if no custom banner.

### Canvas & Surfaces (Dark Mode)
- **Canvas (Dark)** (`#1A1A1B`): Primary dark canvas.
- **Card Surface (Dark)** (`#272729`): Post cards and comment threads.
- **Surface 2 (Dark)** (`#343536`): Hovered / pressed card state, input backgrounds.
- **Divider (Dark)** (`#343536`): Dark-mode separator.
- **Chat Surface (Dark)** (`#161617`): Slightly darker than canvas for chat screens.

### Text
- **Text Primary (Light)** (`#1A1A1B`): Post titles, body text.
- **Text Secondary (Light)** (`#7C7C7C`): Metadata — "2h ago", "r/subreddit • 125 comments".
- **Text Tertiary (Light)** (`#AFAFAF`): Placeholder, disabled.
- **Text Primary (Dark)** (`#D7DADC`): Dark-mode primary.
- **Text Secondary (Dark)** (`#818384`): Dark-mode metadata.
- **Text Link** (`#0079D3`): Hyperlinks in comments and post body.

### Subreddit Accent Colors
Each subreddit can set its own "accent color" — seen on the join button, the sidebar, and the banner tint. This is configurable per-community, commonly:
- Default (`#0079D3`), Gaming (`#24A0ED`), AskReddit (`#FF4500`), Memes (`#A5A4A4`), etc.

### Semantic
- **Success Green** (`#46D160`): Successful actions.
- **Warning Yellow** (`#FFB000`): Warning banners.
- **Error Red** (`#FF585B`): Error messages.
- **Gold Award** (`#FFB000`): Gold Award badge (Reddit removed in 2023 but still in historical data).
- **Silver Award** (`#C7C7C7`): Silver Award badge.
- **Reddit Premium** (`#FFD635`): Premium subscriber badge, Reddit Gold era.
- **NSFW Tag** (`#F3B200` pill with black text): "NSFW" post flair.
- **Spoiler Tag** (`#000000` pill with white text): "SPOILER" flair.

## 3. Typography Rules

### Font Family
- **Primary (2023+)**: `Reddit Sans` (proprietary, released 2023) — a humanist sans with gentle curves, designed for long reading sessions. Has Regular, Medium, SemiBold, Bold, Black.
- **Secondary (Fallback)**: `Noto Sans` — used for non-Latin scripts.
- **Tertiary (Fallback)**: `SF Pro Text` / `SF Pro Display` — iOS native fallback.
- **Monospace**: `Reddit Mono` (2023+) for code blocks; fallback `SF Mono`.
- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Noto Sans', Helvetica, Arial, sans-serif`

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Large Title | Reddit Sans | 24pt | 700 | 1.2 | -0.3pt | "Home", "Popular", subreddit name on detail |
| Post Title | Reddit Sans | 18pt | 600 | 1.25 | -0.2pt | The post title card headline |
| Body Text | Reddit Sans | 14pt | 400 | 1.5 | -0.1pt | Post body, comment body |
| Comment Body | Reddit Sans | 14pt | 400 | 1.5 | -0.1pt | Same as body (comments are first-class) |
| Metadata | Reddit Sans | 12pt | 400 | 1.3 | 0pt | "r/subreddit • 2h ago • 125 comments" |
| Karma (Vote Column) | Reddit Sans | 12pt | 700 | 1.0 | 0pt | The number between up/down arrows |
| Subreddit Pill | Reddit Sans | 12pt | 600 | 1.0 | 0pt | "r/AnimalCrossing" pill |
| Flair Pill | Reddit Sans | 11pt | 600 | 1.0 | 0.2pt | Per-subreddit colored flair tags |
| Username | Reddit Sans | 12pt | 500 | 1.2 | 0pt | "u/username" in comments |
| Button (Primary) | Reddit Sans | 14pt | 600 | 1.0 | 0pt | "Join", "Continue" |
| Tab Label | Reddit Sans | 11pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Nav Title | Reddit Sans | 17pt | 600 | 1.2 | -0.2pt | Top nav bar title |
| Section Header | Reddit Sans | 13pt | 700 | 1.2 | 0.5pt | "COMMUNITY INFO" tracked uppercase |
| Code (Mono) | Reddit Mono | 13pt | 400 | 1.5 | 0pt | Inline + block code in comments |

### Principles
- **14pt is the workhorse**: Post body, comments, replies all at 14pt regular. This is tuned for long-form reading in a chat-like density.
- **12pt for metadata**: Timestamps, subreddit pills, comment context all at 12pt — small but scannable.
- **18pt for post title** is the hero — big enough to catch attention on a card, small enough to fit multi-line titles.
- **Dynamic Type respected**: Body text and post titles scale; vote-column karma number, tab labels, and flair pills are fixed for layout.
- **Username hierarchy**: "u/username" in 12pt weight 500 — not as prominent as subreddit `r/` pills, because Reddit is community-first, not user-first.
- **Markdown rendering**: Post and comment bodies render full Markdown — `**bold**`, `*italic*`, `~~strike~~`, `> quote`, `[link](url)`, `` `code` ``, triple-backtick blocks, headers, lists.

## 4. Component Stylings

### Buttons

**Primary Pill (Join / Continue)**
- Shape: Pill, 24pt corner radius (or 500pt for full-capsule)
- Background: `#FF4500` for universal primary; subreddit-accent color for community-specific CTA
- Text: white, Reddit Sans 14pt weight 600
- Padding: 8pt vertical, 20pt horizontal
- Pressed: darker shade + scale 0.97
- Used for: "Join" (subreddit), "Continue", "Create Post"

**Secondary Outline**
- Background: transparent
- Text: subreddit accent color (or `#1A1A1B` / `#D7DADC` default)
- Border: 1pt solid `#EDEFF1` (light) or `#343536` (dark)
- Pressed: background `#F2F3F5` / `#343536`
- Used for: "Joined" (after joining), "Follow"

**Subreddit Join Button**
- Same as primary pill, but tinted in the subreddit's custom accent color
- When joined, shifts to outline style with "Joined" text
- Icon prefix: `+` (not joined) or `checkmark` (joined)

**Vote Arrow (The Signature Button)**
- Two stacked icons with a karma number between them
- Arrow icon: upward/downward chevron, 18pt
- Default (inactive): `#878A8C` / `#818384`
- Active up: `#FF8717` (orange)
- Active down: `#7193FF` / `#9494FF` (blue-purple)
- Hit target: 36pt × 36pt per arrow
- Tap: immediate state change + soft haptic + brief scale bounce (1.0 → 1.2 → 1.0)
- Karma number: Reddit Sans 12pt weight 700, center-aligned between arrows, color matches active vote state (orange/blue-purple/gray)

**Icon Actions (Comments, Share, Save, More)**
- Size: 18pt icon + optional count
- Layout: horizontal row below post content
- Default: `#878A8C` / `#818384`
- Active (saved): `#FFB000` gold
- Tap hit area: 44pt

### Cards & Containers

**Post Card (The Signature Component)**
A self-contained post as a card with structured sections.
- Background: `#FFFFFF` light / `#272729` dark
- Corner radius: 0pt (old Reddit style) or 16pt (new card style — user preference toggle)
- Padding: 12pt internal
- Structure (TOP to BOTTOM):
  1. **Header row** (10pt height): subreddit avatar (20pt circular) + `r/subreddit` pill + `•` + timestamp + `•` + optional "Pinned" or "Crosspost" tag
  2. **Title row**: post title in Reddit Sans 18pt weight 600, `#1A1A1B` / `#D7DADC`, up to 3-line clamp
  3. **Flair row** (optional): horizontal row of pill tags, 11pt weight 600
  4. **Preview row** (optional): image, video, gallery, link card, or text preview
  5. **Action row** (32pt height): Vote arrow column + karma (left) + comments count + share + save + more (right side)
- Between cards: 8pt gap with canvas color showing through
- Tap: slight background tint (`#F2F3F5` / `#343536`) + navigate to detail

**Post Card — Media-First Variant**
For image/video-dominant posts, the media takes the top 60% of the card with title + vote column overlaid or below:
- Image: full-width, up to 16:9 or 1:1 aspect
- 16pt radius on corners (when cards enabled); 0pt when classic view
- Title below image in 18pt weight 600
- Vote column at bottom-left; actions bottom-right

**Comment**
- Leading indentation line: 2pt `#EDEFF1` / `#343536` vertical bar, `Int × 10pt` from leading edge (each reply level indents 10pt)
- Structure: avatar (optional, 20pt circular) + username + `•` + timestamp + `•` + karma (if not hidden) — then body text
- Body: 14pt weight 400, line-height 1.5
- Trailing actions: reply, vote arrows, share, more (ghost/muted icons)
- Collapse indicator: `[-]` or `[+]` at leading edge to toggle thread collapse

**Subreddit Banner (Detail Screen)**
- Full-width banner image OR solid color matching subreddit accent
- Height: 120-180pt
- Subreddit avatar: circular 72pt, overlapping the bottom of banner by 36pt, white 3pt border
- Below: subreddit name (Reddit Sans 22pt weight 700), member count (12pt `#7C7C7C`)
- Trailing "Join/Joined" button at top-right of banner

**Chat Channel Card**
- Newer Reddit feature — group chat rooms
- Similar card layout to posts but with "Live" badge if active
- Member count + "chatting now" indicator

### Navigation

**Bottom Tab Bar**
- Height: 49pt + safe area
- Background: `#FFFFFF` (light) / `#1A1A1B` (dark) — solid, no blur
- Tabs: Home, Communities, Create (center, with `+` FAB-style), Chat, Inbox
- Active color: `#FF4500` (brand red) or `#D7DADC` (neutral — varies)
- Inactive: `#878A8C` / `#818384`
- Labels: Reddit Sans 11pt weight 500
- Badge: red `#FF585B` circle with white count

**Top Nav (Feed)**
- Height: 44pt + safe area
- Leading: profile avatar (28pt circular)
- Center: subreddit name or "Home" / "Popular" / "All" switcher (tap to open sheet)
- Trailing: search + sort + more
- Background: `#FFFFFF` light / `#1A1A1B` dark with bottom 1pt divider

**Top Nav (Subreddit Detail)**
- Transparent over banner image when scrolled to top
- Collapses to solid surface with subreddit name + back chevron on scroll
- Trailing: Join button + search + more

### Input Fields

**Compose (Create Post)**
- Full-screen modal
- Subreddit picker at top (pill with `r/pickme` placeholder)
- Title input: 18pt weight 600 placeholder "Title"
- Body input: 14pt regular placeholder "body (optional)"
- Formatting toolbar: Bold, Italic, Link, Quote, Code, List (flat icons, 20pt)
- Attach row: Photo/Video, Poll, Link, GIF
- Submit button: `#FF4500` pill "Post" in top-right nav

**Search Bar**
- Height: 40pt
- Corner radius: 20pt (pill)
- Background: `#F2F3F5` light / `#343536` dark
- Leading: `magnifyingglass` 18pt `#878A8C`
- Placeholder: "Search Reddit"

**Comment Input**
- Appears at bottom of thread when "Add a comment" tapped
- Expandable multiline; starts at ~40pt height, grows to ~200pt
- Corner radius: 20pt
- Focus: shows submit button at trailing right in `#FF4500`

### Distinctive Components

**Vote Column (The Signature)**
A vertical stack of three elements: up arrow, karma number, down arrow.
- Width: 44pt (standard) or 32pt (compact)
- Height: ~72pt (22pt arrow + 28pt number + 22pt arrow)
- Up arrow: `chevron.up` or custom up-tri icon, 18pt
- Number: Reddit Sans 12pt weight 700, center
- Down arrow: `chevron.down` or custom down-tri icon, 18pt
- State transitions:
  - None → Up: arrow fills orange, number turns orange, number increments, scale bounce
  - None → Down: arrow fills blue-purple, number turns blue-purple, number decrements, scale bounce
  - Up → None: arrow returns to gray, number to gray, decrements
  - Up → Down: arrow slides down, color changes, number decrements by 2, scale bounce
- Haptic: selection haptic on each state change
- Position: left side of post card (standard), or below media (media-first variant)

**Flair Pill**
- Small rectangular or rounded tag attached to post
- Per-subreddit styled — background color, text color, optional emoji prefix
- Shape: 4pt corner radius, 11pt weight 600 text
- Padding: 3pt vertical, 6pt horizontal
- Example tags: "News", "Discussion", "Shitpost", "NSFW", "Spoiler"
- System flairs:
  - "NSFW": `#F3B200` bg, black text
  - "SPOILER": black bg, white text
  - "OC" (Original Content): `#46D160` bg, white text

**Subreddit Pill (Inline `r/subredditname`)**
- Used inside post cards and anywhere a subreddit is referenced inline
- No background; subreddit avatar 16pt circular + `r/name` in 12pt weight 600
- Tap: navigate to subreddit
- Color: brand red `#FF4500` when top-level header, neutral `#1A1A1B` / `#D7DADC` when inline

**Comment Thread Indentation**
- Each nested reply indents 10pt
- A 2pt wide vertical line on the leading edge of nested replies in `#EDEFF1` / `#343536`
- Lines are continuous — when you scroll down the reply chain, the line follows
- Collapse on tap: `[-]` → `[+]` toggles hide sub-thread

**Snoo (The Alien Mascot)**
- Reddit's owl-eyed alien mascot in red-and-orange spacesuit
- Appears on: empty state illustrations, error 404 pages, splash screen, settings > about
- Also featured in Snoovatar feature — users design their own Snoo as their profile avatar

**Award Icons (Deprecated but still visible)**
- Pre-2023 awards: Silver, Gold, Platinum — shown as small icons next to post/comment titles
- Still visible on historical posts even though the feature was removed
- Icons: 16pt round with metal-colored backgrounds

**Media Gallery**
- When a post has multiple images, render as horizontal swipe gallery with pagination dots at bottom
- 1-indexed counter in top-right corner: "1/4"

**Live Chat Channel**
- Reddit Chat Channels render as a Discord-like threaded chat with real-time messages
- Each message: avatar + username (in subreddit accent color) + message body + timestamp
- "N typing" indicator at bottom
- Join/Leave affordance

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 10, 12, 16, 20, 24, 32, 44, 72
- Standard margin: 16pt horizontal on screens
- Card padding: 12pt internal
- Card-to-card gap: 8pt
- Comment indentation step: 10pt per reply level

### Grid & Container
- Feed: single column, full-width cards with 16pt side margins (or 0pt full-bleed in classic view)
- Card content: left-aligned; vote column left, actions right
- Chat: full-width single column with 16pt padding

### Whitespace Philosophy
- **Inside cards**: generous 12-16pt padding
- **Between cards**: minimal 8pt gap — the canvas color acts as a visual break
- **Comment thread**: tight vertical density (10pt between comments) to fit long discussions
- **Post detail**: comfortable reading density (16pt gaps between body sections)

### Border Radius Scale
- Square (0pt): Classic view post cards, dividers
- Soft (4pt): Flair pills, compact buttons
- Standard (8pt): Media corners in classic view, code blocks
- Card (16pt): New card-style post cards, subreddit banner
- Pill (500pt / 24pt): Primary CTAs, Join button, search bar
- Full Circle (50%): Avatars, subreddit icons, up/down arrows on vote

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (0) | No shadow | Cards sitting on canvas (card radius provides visual separation) |
| Hover (1) | `rgba(0,0,0,0.04)` background tint | Pressed card state |
| Floating (2) | `rgba(0,0,0,0.08) 0 2px 8px` | Floating "Back to top" button, overlay toast |
| Sheet (3) | `rgba(0,0,0,0.2) 0 -12px 32px` | Bottom action sheet (sort, filter, more) |
| Modal Overlay | `rgba(0,0,0,0.5)` backdrop | Modal dim |

**Shadow Philosophy**: Reddit is largely flat. Cards sit on the canvas with either a corner radius or a hairline divider — not shadows. Only genuinely floating UI (the "back to top" pill, bottom-sheet actions) has shadows.

### Motion
- **Vote tap**: Arrow icon scales 1.0 → 1.25 → 1.0 spring, color cross-fades, karma number tick animates + haptic selection
- **Card tap**: 200ms ease-out background tint to `#F2F3F5` / `#343536`
- **Navigate to detail**: Native iOS push transition; card stays in place at feed top
- **Comment expand/collapse**: 60fps height animation, 200ms ease
- **Join button**: "Join" → "Joined" with checkmark scale bounce + green flash
- **Media gallery swipe**: Horizontal page gesture with spring snap
- **Pull-to-refresh**: Red Snoo alien icon spins as refresh indicator
- **Infinite scroll**: New cards fade + slide up 8pt over 150ms
- **Chat message arrival**: Slide up from bottom + opacity fade over 200ms

## 7. Do's and Don'ts

### Do
- Use `#FF4500` (Reddit Orange-Red) as the single brand accent — logo, key CTAs
- Use the semantic vote pair: `#FF8717` upvote orange and `#7193FF` downvote blue-purple
- Show the vote column on EVERY post and comment — it's the brand
- Keep cards flat — use corner radius (16pt in card view, 0pt in classic) not shadows
- Render Markdown inline: bold, italic, quote, code, link
- Support subreddit accent color customization — the Join button should tint to community color
- Use circular subreddit avatars — `r/subredditname` pill next to avatar
- Indent comment replies 10pt per level with a 2pt vertical rule on the leading edge
- Use Reddit Sans (fallback Noto Sans, then SF Pro) at 14pt body / 18pt title / 12pt meta
- Offer both card view (16pt corners) and classic view (0pt full-bleed) as a user preference

### Don't
- Don't flip the semantic vote colors — upvote MUST be warm (orange) and downvote cool (blue-purple)
- Don't put the vote column anywhere other than left of post content (or below media in media-first)
- Don't use drop shadows on post cards — Reddit is flat
- Don't skip the subreddit `r/name` pill — every post must identify its community
- Don't use brand red `#FF4500` for the upvote — that's `#FF8717` orange
- Don't use blue `#0079D3` as an accent — that's the LINK color, not the brand color
- Don't round subreddit avatars to anything other than circles
- Don't compress the metadata row — `r/subreddit • timestamp • comments` should be readable
- Don't use Discord-style role colors for usernames — Reddit keeps usernames neutral
- Don't animate vote state changes too aggressively — a subtle bounce + color swap is enough

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Vote column collapses to 32pt; title clamp 2 lines |
| iPhone 13/14/15 | 390pt | Standard 44pt vote column; 3-line title clamp |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in nav |
| iPhone 15/16 Pro Max | 430pt | Standard layout with slightly wider cards |
| iPad | 768pt+ | Two-column feed in landscape |

### Dynamic Type
- Post title, body, comment body: respect Dynamic Type
- Karma number, tab labels, flair pills, vote arrow icons: fixed size
- Timestamp / metadata: respects Dynamic Type but capped at 14pt

### Orientation
- Feed, thread, chat: portrait-locked on iPhone (except video posts in landscape)
- Image / video viewer: rotates to landscape
- iPad: all orientations; feed becomes 2-column in landscape

### Touch Targets
- Vote arrows: 36pt × 36pt each, stacked
- Card tap: full card surface
- Action row icons: 44pt hit area
- Subreddit pill tap: hit area expands around pill
- Comment collapse arrow: 32pt hit area

### Safe Area Handling
- Top: nav bar respects safe area; transparent over banner scrolls into solid
- Bottom: tab bar respects home indicator; chat compose bar floats above safe area
- Sides: 16pt content insets

## 9. Agent Prompt Guide

### Quick Color Reference
- Reddit Orange-Red: `#FF4500`
- Reddit Red (alert): `#FF585B`
- Upvote Orange: `#FF8717`
- Upvote Dark Variant: `#FFAA66`
- Downvote Blue-Purple (light): `#7193FF`
- Downvote Blue-Purple (dark): `#9494FF`
- Vote Inactive (light): `#878A8C`
- Vote Inactive (dark): `#818384`
- Canvas (new light): `#F6F7F8`
- Canvas (classic light): `#DAE0E6`
- Canvas (dark): `#1A1A1B`
- Card surface (light): `#FFFFFF`
- Card surface (dark): `#272729`
- Surface 2 (light): `#F2F3F5`
- Surface 2 (dark): `#343536`
- Divider (light): `#EDEFF1`
- Divider (dark): `#343536`
- Text primary (light): `#1A1A1B`
- Text secondary (light): `#7C7C7C`
- Text primary (dark): `#D7DADC`
- Text secondary (dark): `#818384`
- Link: `#0079D3`
- Default subreddit accent: `#0079D3`
- Gold Award / Premium: `#FFB000`
- Success green: `#46D160`

### Example Component Prompts
- "Create a SwiftUI Reddit vote column: 44pt wide, 72pt tall stack. Top: up-chevron icon 18pt (gray #878A8C default, orange #FF8717 when active). Center: karma number in Reddit Sans 12pt weight 700, centered, color matching active state. Bottom: down-chevron icon 18pt (gray default, #7193FF blue-purple when active). Tap: scale 1.0 → 1.25 → 1.0 spring on icon + selection haptic + number tick increment. Three states: neutral, up (orange), down (blue-purple)."
- "Build a Reddit post card: background #FFFFFF light / #272729 dark, 16pt corner radius, 12pt internal padding. Top row: 20pt circular subreddit avatar + `r/AnimalCrossing` pill in 12pt weight 600 + '• 2h ago • 125 comments' in 12pt #7C7C7C. Next: post title in Reddit Sans 18pt weight 600 #1A1A1B, max 3 lines. Optional flair row: horizontal pills with per-subreddit colors. Image preview if available, 16pt corners. Bottom action row: vote column left + (comments icon + count, share icon, save icon, more-ellipsis) right at 18pt each #878A8C."
- "Design the Reddit comment thread row: leading indentation bars at 10pt per reply level, 2pt wide #EDEFF1. Header row: 20pt avatar (optional) + 'u/username' 12pt weight 500 + '• 2h' timestamp 12pt #7C7C7C + '• 234' karma 12pt weight 500. Body text in Reddit Sans 14pt weight 400 line-height 1.5. Support markdown inline. Trailing action row: reply icon + vote arrows + share + more. Collapse indicator `[-]` / `[+]` at leading edge toggles sub-thread visibility."
- "Create the subreddit banner detail: full-width banner image (120-180pt tall) or solid accent color. Circular subreddit avatar (72pt) with white 3pt border overlapping the bottom edge by 36pt. Below: subreddit name in Reddit Sans 22pt weight 700, member count '142k members' in 12pt #7C7C7C. Top-right of banner: Join pill in subreddit accent color (#FF4500 default, or custom like #0079D3), white text 14pt weight 600, pill 24pt corner radius — morphs to 'Joined' with checkmark prefix after tap."
- "Build a Reddit flair pill: rectangular tag, 4pt corner radius, 3pt vertical × 6pt horizontal padding. Reddit Sans 11pt weight 600. Per-subreddit styled — backgrounds and text colors configurable. System flairs: 'NSFW' in `#F3B200` bg + black text, 'SPOILER' in black bg + white text, 'OC' in `#46D160` bg + white text."
- "Design the Reddit bottom tab bar: 5 tabs — Home, Communities, Create (center, +-icon styled differently), Chat, Inbox. Icons 22pt. Active color: #FF4500 (brand) or #1A1A1B (neutral — both in use). Inactive: #878A8C. Labels: Reddit Sans 11pt weight 500. Background: solid #FFFFFF light / #1A1A1B dark, no blur. Red `#FF585B` badge pill on Inbox tab when unread messages exist."

### Iteration Guide
1. The vote column is non-negotiable — up-chevron + karma number + down-chevron appears on EVERY post and comment
2. Upvote is ORANGE `#FF8717` and downvote is BLUE-PURPLE `#7193FF` — these are complementary and semantic (warm vs cool)
3. Reddit brand red `#FF4500` is the BRAND color (logo, primary CTA) — it is NOT the upvote color. Do not confuse.
4. Cards are FLAT — use 16pt corner radius in card view, 0pt full-bleed in classic view, NEVER drop shadows
5. Canvas is `#F6F7F8` (new light) / `#1A1A1B` (dark); cards sit on `#FFFFFF` light / `#272729` dark
6. Subreddit accent color is configurable per community — the Join button and sidebar tint adapt
7. Comment threads indent 10pt per reply with a 2pt `#EDEFF1` / `#343536` vertical rule on the leading edge
8. Typography: Reddit Sans (fallback Noto Sans, then SF Pro). 14pt body / 18pt title / 12pt meta. Weights 400, 500, 600, 700.
9. Flair pills are 4pt radius rectangles with per-subreddit or per-system color; NSFW `#F3B200`, Spoiler black, OC green
10. Render full Markdown inline in post body and comments — bold, italic, quote, code, link