designmd-forge 1.2.0

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

@@ -0,0 +1,372 @@
+# Design System Inspiration of Substack (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Substack's iOS app is built around a single belief: the writing is the product, and the writer's voice deserves a page that looks like a fine magazine, not a feed. Open any post and you land on a clean white reading surface — a serif headline set tight, an italic serif dek, a compact byline with the publication's logo and subscriber count, and then long-form body text in a generous reading serif at 18pt with 1.65 line-height. There are no cards around the prose, no boxes, no shadows in the reading column. The chrome is deliberately minimal and editorial: the only saturated color in the entire experience is **Substack Orange (`#FF6719`)**, and it is rationed almost entirely to one job — the **Subscribe** button. Substack monetizes writers, so the orange Subscribe CTA is the single most important pixel in the app and everything else recedes to let it land.
+
+The signature screen is the **post reader**: publication row (logo tile + name + subscriber count), serif title, italic serif subtitle, byline with avatar and "X min read", body prose with inline orange-left-border pull-quotes, a sticky **Subscribe card** (often a paywall break — "Keep reading with a subscription") with the orange button and the price line, and a bottom action bar (Like ♥ in orange, Comment, Restack, Share). The second signature surface is the **Inbox**: a chronological list of new posts from every publication the reader subscribes to — a small square publication thumbnail, an uppercase orange publication name, a serif post title, byline + read-time meta, and an orange unread dot. Inbox is the home tab; it is an email-replacement reading queue, not an algorithmic feed.
+
+The color system is intentionally sparse. White paper carries the reading experience; near-black serif ink does the words; Substack Orange is the brand and the conversion; a single link blue (`#4A6FE3`) handles inline hyperlinks; everything else is neutral grey. The typography is the design: a high-quality reading serif (Spectral / Source Serif family) for everything the reader *reads* — titles, deks, body, pull-quotes — and a clean grotesque (Inter / system) for the chrome the reader *operates* — buttons, labels, the tab bar, metadata. The app has a Reader (light) and a Dark theme; the dark theme softens the page to charcoal `#121212` but the orange never changes — it is the one constant signal.
+
+**Key Characteristics:**
+- White reading surface (`#FFFFFF`) light / soft charcoal (`#121212`) dark — a magazine page, not a feed
+- Serif everything-you-read (title, dek, body, pull-quote); sans everything-you-operate (buttons, tabs, meta)
+- Substack Orange (`#FF6719`) rationed almost entirely to the Subscribe CTA — the one conversion
+- Long-form reading body: serif 18pt, 1.65 line-height, generous measure — built for 18-minute reads
+- Sticky Subscribe card / paywall break with orange button + price line ("$8/month · $80/year")
+- Inbox as home — a chronological subscription queue with orange publication labels + unread dots
+- Publication row: logo tile + name + subscriber count — the publication is the brand, not Substack
+- Pull-quotes with a 3pt orange left border, italic serif
+- Bottom action bar: Like (orange heart) / Comment / Restack / Share
+- Discover, Notes (a short-form companion feed), and Profile complete the tabs
+- Restraint: one orange, one link blue, neutral greys — no decorative color anywhere
+
+## 2. Color Palette & Roles
+
+### Primary (Brand & Interactive)
+- **Substack Orange** (`#FF6719`): The single brand + conversion color — Subscribe button, active tab, unread dot, liked heart, publication label, pull-quote border. Held identical light AND dark.
+- **Orange Pressed** (`#E5560E`): Pressed state of the Subscribe button and orange controls.
+- **Orange Tint Surface** (`#FFF7F2` light / `#2A1C12` dark): Subscribe-card / paywall background wash.
+- **Orange Tint Border** (`#FFD9C2` light / `#5C3A24` dark): Subscribe-card hairline.
+- **Link Blue** (`#4A6FE3`): Inline hyperlinks in body prose only — the one non-orange accent.
+
+### Reading Surface (Light — "Reader" theme)
+- **Paper White** (`#FFFFFF`): The reading page.
+- **Reading Ink** (`#1F1F1F`): Body prose — near-black, warm-neutral, not pure black.
+- **Title Ink** (`#1A1A1A`): Titles and headers.
+- **Subhead Ink** (`#57534E`): Dek / subtitle, warm grey.
+- **Meta Grey** (`#8A8A8A`): Byline meta, captions.
+- **Hairline** (`#ECECEC`): Byline and section rules.
+
+### App Surfaces (Light)
+- **Surface Subtle** (`#F7F6F4`): Search field, grouped rows.
+- **Divider** (`#E7E5E1`): List dividers.
+
+### App Surfaces (Dark)
+- **Dark Canvas** (`#121212`): Reading page + app background in dark — soft charcoal, NOT pure black.
+- **Dark Surface 1** (`#1B1B1B`): Cards, the Subscribe card base, rows.
+- **Dark Surface 2** (`#262626`): Pressed rows, search field.
+- **Dark Divider** (`#2E2E2E`): Hairline rules on dark.
+
+### Text
+- **Text Primary Light** (`#1A1A1A`): Chrome labels, titles.
+- **Text Secondary Light** (`#6B6B6B`): Metadata, captions.
+- **Text Primary Dark** (`#EDEDED`): Body + chrome on dark.
+- **Text Secondary Dark** (`#A6A6A6`): Secondary text on dark.
+- **Text Tertiary Dark** (`#6E6E6E`): Disabled / overline on dark.
+
+### Semantic
+- **Error Red** (`#D93025`): Unsubscribe confirm, payment error.
+- **Success Green** (`#1A8917`): "Subscribed" / saved toast.
+- **Like Orange** (`#FF6719`): Liked-heart fill (reuses brand orange).
+- **Warning Amber** (`#E5560E`): Non-blocking warnings (reuses pressed orange).
+
+## 3. Typography Rules
+
+### Font Family
+- **Reading Serif**: Substack sets long-form in a high-quality reading serif. Use **`Source Serif 4`** (Frank Grießhammer / Adobe, SIL OFL — an optical-size transitional serif) as the reference face for titles, deks, body, and pull-quotes; `Spectral` (Production Type, SIL OFL) is an equally faithful alternative. The reading face is the brand's editorial voice.
+- **UI / Chrome**: **`Inter`** (Rasmus Andersson, SIL OFL) — a neutral humanist grotesque; used for buttons, the tab bar, labels, byline meta, and all chrome.
+- **iOS Fallback**: serif → `Georgia` / `'Times New Roman'`; sans → `-apple-system, 'SF Pro Text'`.
+- **Reader font/size is user-adjustable**: the reader can pick serif/sans + text size in reading settings — respect it globally on the post body.
+- **Rationale**: Substack competes with magazines and email newsletters — body must read like editorial print; chrome must be invisible and neutral so the orange Subscribe is the only thing that pops.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title | Source Serif 4 | 30pt | 700 | 1.2 | -0.4pt | "Inbox", "Discover" large nav title |
+| Post Title | Source Serif 4 | 26pt | 700 | 1.22 | -0.3pt | The hero post headline |
+| Section Heading (in post) | Source Serif 4 | 22pt | 700 | 1.3 | -0.2pt | H2 within a post body |
+| Pull Quote | Source Serif 4 | 21pt | 600 italic | 1.4 | 0pt | Orange-left-border quote |
+| Reading Body | Source Serif 4 | 18pt | 400 | 1.65 | 0pt | The long-form prose — user-scalable |
+| Subtitle / Dek | Source Serif 4 | 17pt | 400 italic | 1.4 | 0pt | The post's italic deck under the title |
+| Button | Inter | 15pt | 700 | 1.0 | 0pt | "Subscribe", primary CTAs |
+| Label / Publication | Inter | 14pt | 600 | 1.3 | 0pt | Publication name, list labels |
+| Metadata | Inter | 13pt | 400 | 1.4 | 0pt | "Mario Gabriele · 18 min read · May 14" |
+| Caption | Inter | 12pt | 400 | 1.4 | 0pt | Subscriber count, footnote |
+| Publication Eyebrow | Inter | 11pt | 700 | 1.0 | 0.4pt | UPPERCASE publication label in inbox |
+| Overline | Inter | 11pt | 700 | 1.0 | 0.8pt | "FROM THE GENERALIST" all-caps |
+| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+
+### Principles
+- **Serif reads, sans operates**: anything the reader *reads* (title, dek, body, pull-quote, section heads) is the serif; anything the reader *acts on* (buttons, tabs, labels, meta) is Inter.
+- **Long-form first**: body is 18pt at 1.65 line-height with a generous measure — designed for sustained 15–20 minute reads, not skimming.
+- **The dek is italic serif**: the subtitle/deck under a title is italic — an editorial convention that signals "magazine".
+- **Numerals are sans**: subscriber counts, prices, read-times use Inter tabular figures.
+- **Reader controls size**: the post body must honor the user's chosen reading text size and face globally.
+- **Dynamic Type first-class**: titles, deks, body, section heads scale; tab labels, eyebrows, captions stay fixed.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Subscribe Button (the conversion)**
+- Shape: Rounded rectangle, 6pt corner radius, full content width in cards
+- Height: 42–48pt
+- Background: `#FF6719` (Substack Orange)
+- Text: `#FFFFFF`, Inter 15pt weight 700
+- Pressed: background `#E5560E` + scale 0.98
+- This is the single most important element in the app — it appears once per post (in the sticky/paywall card) and on publication pages; never duplicated as decoration
+
+**Subscribed / Outline State**
+- Background: transparent
+- Border: 1pt `#6B6B6B` light / `#A6A6A6` dark
+- Text: `#1A1A1A` light / `#EDEDED` dark with a leading check, Inter 14pt weight 600
+- Corner radius: 6pt
+- Pressed: background `#F7F6F4` / `#262626`
+
+**Ghost Button ("Share", secondary)**
+- Background: `#F7F6F4` / `#262626`
+- Border: 1pt divider
+- Text: Inter 13pt weight 600
+- Corner radius: 6pt
+
+**Text / Link Button ("Continue reading", "See all")**
+- Font: Inter 14pt weight 600
+- Color: `#4A6FE3`
+- No underline
+
+### Post Reader (the core surface)
+
+The reading view is Substack's fundamental surface.
+- Background: `#FFFFFF` (Reader) / `#121212` (Dark)
+- Publication row: 34pt logo tile (6pt radius) + name (Inter 14pt/600) + "X subscribers" (12pt grey)
+- Title: serif 26pt/700, tight leading, -0.3pt tracking
+- Dek: italic serif 17pt/400, `#57534E`
+- Byline: 26pt avatar + "Author · Date · X min read" (Inter 13pt grey), with a 0.5pt hairline below
+- Body: serif 18pt/400, 1.65 line-height, ink `#1F1F1F`; inline links `#4A6FE3` underlined
+- Pull-quote: serif 21pt/600 italic, 3pt `#FF6719` left border, 18pt left padding
+- Images: full-bleed-to-measure, optional italic serif caption 13pt grey
+- Section headings: serif 22pt/700
+- No cards/boxes/shadows in the reading column — prose flows on bare paper
+
+### Subscribe Card / Paywall Break
+- Background: `#FFF7F2` (orange tint) / `#2A1C12` dark
+- Border: 1pt `#FFD9C2` / `#5C3A24`, 10pt corner radius, 14pt padding, centered
+- Heading: serif 15pt/700 ("Keep reading with a subscription")
+- Subtext: Inter 12pt grey
+- Orange Subscribe button (full width, 42pt, 6pt radius)
+- Price line: Inter 11pt grey ("$8/month · $80/year · cancel anytime")
+- Often inserted mid-post as the paywall cut (free preview above, blurred/locked below)
+
+### Inbox Row
+- Layout: 56pt square publication thumbnail (6pt radius) + content column + unread dot
+- Publication eyebrow: Inter 11pt/700 UPPERCASE `#FF6719`, 0.4pt tracking
+- Post title: serif 15pt/700, 1.3 line-height, 2-line clamp
+- Meta: Inter 12pt `#6E6E6E` ("Author · X min · date")
+- Unread dot: 8pt circle `#FF6719`
+- Row divider: 1pt divider; full-row tap → post reader
+- Inbox is the home tab — chronological, NOT algorithmic
+
+### Navigation
+
+**Post Top Bar**
+- Height: 44pt + safe area
+- Leading: back chevron
+- Trailing: Share icon + ⋯ overflow (Mute publication, Copy link, Report)
+- Background: paper/charcoal, 0.5pt bottom hairline; the publication name can appear centered on scroll
+
+**Bottom Tab Bar**
+- Height: 50pt + safe area
+- 4 tabs: Inbox, Discover, Notes, Profile
+- Icon size: 22pt; labels Inter 10pt weight 600
+- Active: `#FF6719` (filled glyph); inactive: `#9A9A9A` / `#6E6E6E`
+- No tint pill — active is glyph fill + orange
+- Background: paper / charcoal, 0.5pt top hairline
+
+### Input Fields
+
+**Search (Discover)**
+- Height: 40pt
+- Background: `#F7F6F4` / `#262626`
+- Corner radius: 8pt
+- Leading `magnifyingglass` 16pt grey
+- Placeholder: "Search Substack" Inter 14pt grey
+- Focus: 1.5pt `#FF6719` border
+
+**Comment Composer**
+- Bottom sheet; multiline Inter 15pt input (comments are sans, not serif — they are chrome/conversation, not the article)
+- "Post" orange button in the sheet header
+- Threaded replies indented 24pt
+
+### Distinctive Components
+
+**Publication Header (Publication page)**
+- Cover band + large logo + publication name (serif 26pt) + tagline (italic serif) + subscriber count
+- A prominent orange Subscribe button + "X posts" / "About" tabs
+
+**Sticky Subscribe / Paywall Cut**
+- The free preview fades into a locked section behind the Subscribe card — the central monetization moment
+
+**Pull-Quote**
+- Italic serif with the signature 3pt orange left rule — the most recognizable in-post element
+
+**Action Bar (post footer)**
+- Like (orange heart, count), Comment (count), Restack (Notes share), Share
+- Like fills orange with a heart-pop on tap
+
+**Notes Card (Notes tab)**
+- Short-form: avatar + name + handle + short text + Like/Reply/Restack — a Twitter-like companion feed, still neutral with orange accents
+
+**Subscription Tier Selector**
+- Free / Monthly / Annual cards; the recommended tier ringed in orange with an orange-tint background
+
+**Unread Dot**
+- 8pt orange dot on inbox rows and on the Inbox tab badge — the "you have new reading" signal
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48
+- Reading content inset: 24pt horizontal (a comfortable editorial measure)
+- App/chrome inset: 16pt horizontal
+- Paragraph spacing: 18pt between body paragraphs
+
+### Grid & Container
+- iPhone reader: single column, 24pt insets (measure ≈ 60–66 chars)
+- iPhone inbox: single list, 16pt insets, 56pt thumbnails
+- iPad reader: centered column, max measure ≈ 680pt
+- iPad inbox: single wide list or two-column on landscape
+
+### Whitespace Philosophy
+- **The page breathes like print**: 24pt measure + 1.65 leading + 18pt paragraph spacing — sustained reading comfort over density
+- **Chrome is sparse**: lists are simple rows with hairlines; no decorative containers
+- **One color**: orange appears for Subscribe / active / unread / like and nothing else; the rest is paper + ink + grey
+- **The Subscribe card is the only tinted block**: a single warm-orange wash that draws the eye to the conversion
+
+### Border Radius Scale
+- Square (0pt): The reading column, full-bleed images, hairlines
+- Subtle (4pt): Inline chips, small tags
+- Standard (6pt): Subscribe button, ghost buttons, search field
+- Card (8–10pt): Subscribe card, tier cards, inbox thumbnails
+- Comfortable (16pt): Bottom sheets, modals
+- Pill (500pt): Filter chips
+- Circle (50%): Avatars, unread dot
+
+## 6. Depth & Elevation
+
+Substack is nearly flat — the reading column has zero elevation, and shadow appears only on floating sheets and (lightly) on the Subscribe card.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Page (Level 0) | No shadow, no border | Reading column, inbox rows, prose |
+| Card (Level 1) | `rgba(255,103,25,0.06)` fill + 1pt orange-tint border (no shadow) | Subscribe card, tier cards — color, not depth |
+| Sticky (Level 2) | `rgba(0,0,0,0.06) 0 -2px 12px` | The sticky Subscribe bar over the page bottom |
+| Sheet (Level 3) | `rgba(0,0,0,0.16) 0 -4px 24px` | Comment composer, share sheet, settings |
+| Scrim | `rgba(0,0,0,0.3)` | Behind sheets and modals |
+
+**Shadow Philosophy**: The reading surface must look like a printed page — flat, matte, no shadow. The Subscribe card stands out by *color* (warm orange tint + thin orange border), not by elevation, keeping the editorial calm. Only transient floating things (the sticky bar, sheets) get a faint shadow as a "this floats" cue. On dark mode shadows are nearly invisible, so the Subscribe card relies entirely on its orange-tint border. Chrome cards never carry drop shadow.
+
+### Motion
+- **Subscribe tap**: orange button does a 1.0→0.97→1.0 spring (180ms); on success, the button morphs to "Subscribed ✓" with a 220ms crossfade + soft success haptic
+- **Like (heart)**: heart fills orange with a 1.0→1.3→1.0 pop (220ms spring) + soft haptic; count ticks up
+- **Paywall reveal**: scrolling into the paywall fades the locked text to a blur over 250ms; the Subscribe card slides up 250ms ease-out and sticks
+- **Inbox → post**: iOS native push, 300ms; the publication thumbnail can shared-element into the post header
+- **Pull to refresh (Inbox)**: orange spinner, standard iOS rubber-band
+- **Tab switch**: instant; selected glyph fills with a 120ms crossfade; unread dot animates in with a small scale
+- **Notes compose**: bottom sheet slides up 280ms ease-out
+- **Read progress**: a thin orange progress line at the very top edge fills as the reader scrolls the post
+- **Haptic feedback**: soft impact on Subscribe success and Like; light on pull-to-refresh trigger
+- **Restack**: a small toast slides up ("Restacked to Notes") 250ms; no modal
+
+## 7. Do's and Don'ts
+
+### Do
+- Make the post reader the product — a clean white page, serif prose, no boxes
+- Set everything-you-read in a reading serif (Source Serif 4 / Spectral); everything-you-operate in Inter
+- Body at 18pt with 1.65 line-height and a ~24pt editorial measure — built for long reads
+- Make the dek/subtitle italic serif — the editorial-magazine signal
+- Ration Substack Orange (`#FF6719`) to the Subscribe CTA, active tab, unread dot, liked heart, pull-quote rule — nothing else
+- Use the orange-tint Subscribe card as the one tinted block; stand it out by color, not shadow
+- Make Inbox the home tab — chronological subscription queue, not an algorithm
+- Use the 3pt orange left border for pull-quotes
+- Keep the Subscribe button a single instance per post (the sticky/paywall card)
+- Hold the orange identical in light and dark — it is the one constant signal
+
+### Don't
+- Don't put cards, borders, or shadows around the reading prose — it flows on bare paper
+- Don't use pure black for body ink — warm near-black `#1F1F1F` is correct
+- Don't use pure black for dark mode — soft charcoal `#121212`
+- Don't set the post body in a UI sans — the article is serif
+- Don't add a second accent color — orange + one link blue + neutral greys only
+- Don't make comments serif — comments/Notes are conversation chrome, set in Inter
+- Don't scatter orange decoratively — it must mean "subscribe / active / new / liked"
+- Don't make Inbox algorithmic — it is a chronological reading queue (email replacement)
+- Don't duplicate the Subscribe button as decoration — one per post, where conversion happens
+- Don't animate the reading column decoratively — quiet motion; the read-progress line is the only ambient motion
+- Don't add a Material tint pill to the active tab — it is glyph fill + orange
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Reading inset 20pt; inbox thumbnails 52pt |
+| iPhone 13/14/15 | 390pt | Standard layout; reading inset 24pt |
+| iPhone 15/16 Pro | 393pt | Dynamic Island respected by post top bar |
+| iPhone 15/16 Pro Max | 430pt | Wider measure; larger title |
+| iPad (portrait) | 768pt | Centered reading column max ≈ 680pt; inbox single wide list |
+| iPad (landscape) | 1024pt+ | Two-column: inbox list + post reader |
+
+### Dynamic Type
+- Post title, dek, body, section heads, pull-quotes: full scale, plus the in-app reading-size control as an additional multiplier
+- Tab labels, publication eyebrow, captions, overlines: FIXED (layout-sensitive)
+- Inbox post titles scale modestly with body text
+
+### Orientation
+- Reader rotates; iPad landscape shows inbox + reader side by side
+- Inbox reflows; thumbnails stay fixed
+- Sheets and the Subscribe card re-anchor on rotation
+
+### Touch Targets
+- Subscribe button: 44pt tall minimum (the most important target — never smaller)
+- Action-bar items (Like/Comment/Restack/Share): 44pt hit
+- Inbox row: full-row tap, 72pt+ tall
+- Tab bar icons: 22pt glyph, 49pt hit
+
+### Safe Area Handling
+- Reader: prose respects safe area; the read-progress line hugs the very top safe-area edge
+- Top bar respects Dynamic Island
+- Bottom: tab bar + home indicator respected; the sticky Subscribe bar sits above the home indicator
+- Sides: 24pt reading inset, 16pt chrome inset
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Reading page: `#FFFFFF` light / `#121212` dark
+- Body ink: `#1F1F1F` light / `#EDEDED` dark
+- Title ink: `#1A1A1A` light / `#EDEDED` dark
+- Dek / subhead: `#57534E` light / `#A6A6A6` dark
+- Brand + conversion (Subscribe / active / unread / like): `#FF6719` (pressed `#E5560E`)
+- Subscribe-card wash: `#FFF7F2` light / `#2A1C12` dark; border `#FFD9C2` / `#5C3A24`
+- Link blue (inline only): `#4A6FE3`
+- App surface: `#F7F6F4` light / `#1B1B1B`–`#262626` dark
+- Hairline: `#ECECEC` light / `#2E2E2E` dark
+- Text secondary: `#6B6B6B` light / `#A6A6A6` dark
+- Error: `#D93025`
+
+### Example Component Prompts
+- "Build the Substack post reader in SwiftUI: background `#FFFFFF` (or `#121212` dark). A publication row — 34pt logo tile (6pt radius, orange gradient), name in Inter 14pt weight 600, 'Mario Gabriele · 312,400 subscribers' in Inter 12pt `#8A8A8A`. Title in Source Serif 4 26pt weight 700 `#1A1A1A` tracking -0.3pt; dek in Source Serif 4 italic 17pt `#57534E`; byline (26pt avatar + 'Author · May 14 · 18 min read' Inter 13pt grey) with a 0.5pt `#ECECEC` hairline below. Body in Source Serif 4 18pt weight 400, line-height 1.65, ink `#1F1F1F`, inline links `#4A6FE3` underlined."
+
+- "Create the Substack Subscribe card / paywall break: centered card, background `#FFF7F2` (dark `#2A1C12`), 1pt `#FFD9C2` border, 10pt radius, 14pt padding. Heading 'Keep reading with a subscription' in Source Serif 4 15pt weight 700; subtext Inter 12pt `#8A8A8A`; a full-width 42pt Subscribe button, 6pt radius, background `#FF6719`, label Inter 15pt weight 700 white; price line 'Β$8/month · $80/year · cancel anytime' in Inter 11pt `#A0A0A0`. On tap: button springs 1.0→0.97→1.0 (180ms), then crossfades to 'Subscribed ✓' with a soft success haptic."
+
+- "Render a Substack pull-quote: Source Serif 4 21pt weight 600 italic `#1A1A1A`, a 3pt `#FF6719` left border, 18pt left padding, 6pt top/bottom padding, 20pt bottom margin. No background, no box."
+
+- "Build a Substack inbox row: 56pt square publication thumbnail (6pt radius) + content column + trailing 8pt `#FF6719` unread dot. Eyebrow = publication name in Inter 11pt weight 700 UPPERCASE `#FF6719` 0.4pt tracking; post title in Source Serif 4 15pt weight 700 2-line clamp; meta 'Author · 18 min · May 14' in Inter 12pt `#6E6E6E`. 1pt divider; full-row tap pushes the post."
+
+- "Render the Substack bottom action bar: Like (heart, count) / Comment (count) / Restack / Share, Inter 13pt weight 600 `#57534E`. Liked = heart filled `#FF6719` with a 1.0→1.3→1.0 pop (220ms spring) + soft haptic and the count incremented."
+
+- "Build the Substack bottom tab bar: 4 tabs Inbox / Discover / Notes / Profile, 22pt glyphs, Inter 10pt weight 600 labels. Active = filled glyph `#FF6719`; inactive = outline glyph `#9A9A9A` (dark `#6E6E6E`). No tint pill — color + fill only. Paper `#FFFFFF` / charcoal `#121212` background, 0.5pt top hairline `#ECECEC` / `#2E2E2E`. The Inbox tab shows an orange unread dot badge when new posts arrive."
+
+### Iteration Guide
+1. The post reader is the product — a clean white page (`#FFFFFF` / dark `#121212`), serif prose, zero boxes
+2. Serif for everything-you-read (title/dek/body/pull-quote); Inter for everything-you-operate (buttons/tabs/meta)
+3. Body is serif 18pt at 1.65 line-height with a ~24pt editorial measure — built for 15–20 minute reads
+4. The dek/subtitle is italic serif — the magazine signal
+5. Substack Orange `#FF6719` is rationed to Subscribe / active tab / unread dot / liked heart / pull-quote rule — nothing else
+6. The Subscribe card is the one tinted block; it stands out by warm-orange color, never by shadow
+7. Inbox is the home tab — a chronological subscription queue, never algorithmic
+8. The reading column is flat — no cards, borders, or shadows; only sheets and the sticky bar float
+9. One link blue `#4A6FE3` for inline links is the only non-orange accent; everything else is paper + ink + grey
+10. Hold the orange identical in light and dark — it is the single constant conversion signal