designmd-forge 1.2.0

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

@@ -0,0 +1,378 @@
+# Design System Inspiration of Lemon8 (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Lemon8's iOS app is a digital lifestyle magazine. Where most social apps default to a single-column feed of full-width posts, Lemon8 opens to a **two-column staggered masonry grid** of richly styled lifestyle cards — a layout that reads like flipping through the discovery board of a glossy magazine crossed with Pinterest and Xiaohongshu (RED). The canvas is bright editorial white (`#FFFFFF`), generous with whitespace, and every card is a small magazine cover: a tall lifestyle photo, a punchy 1-2 line title, pastel topic tags, and a tiny creator byline with a like count. The aesthetic is aspirational, warm, and content-dense without feeling cluttered — the masonry's varied heights create a pleasing editorial rhythm as you scroll.
+
+The signature surface is the **discovery masonry feed**. Cards break across two columns with uneven heights (because cover images vary from 1:1 to 3:4 to 4:5), 10pt column gaps, and 12pt vertical gaps. Each card has a 14pt corner radius and a very soft elevation (`0 1px 3px` + `0 4px 12px` at low opacity) so it lifts gently off the white. Tapping a card opens the **post detail**: a swipeable photo carousel at the top (with a "5 photos" pill), then the title in Poppins, a rich body of styled text with inline subheadings and embedded photos, the pastel tag row, the creator card with a Follow button, and a comment thread — structured like a magazine article, not a tweet.
+
+The brand color is **Lemon8 Yellow** (`#FFE600`) — but it is used with deliberate restraint. It is NOT a flood color. Yellow appears only on: the post-compose FAB (a rounded yellow rectangle in the tab bar), the active top-tab underline, the primary CTA (Post / Follow), and small accent moments. Critically, Lemon8 Yellow is *always* paired with ink text (`#1A1A1A`) — never white-on-yellow (the contrast would fail and it's off-brand). The workhorse of the system is actually the ink-on-white editorial type and the **pastel topic-tag palette**: mint (`#E4F5EC`/`#1F8A52`), blush (`#FCE8EE`/`#C13E68`), sky (`#E6F0FB`/`#2D6FB8`), butter (`#FFF6CC`/`#8A7300`). Every card carries 1-3 of these soft category tags; they are the color rhythm of the entire app.
+
+Typography pairs a friendly geometric display face with a clean UI sans. **Poppins** (Google Fonts, geometric, rounded) carries display titles, screen headers, tab headers, and post titles — giving Lemon8 its approachable magazine-headline voice. **Inter** handles card titles, body copy, metadata, tags, and tab labels. Hierarchy is editorial: a 32pt display, 18pt post titles, 15pt card titles, 13pt creator metadata, 11pt tags.
+
+**Key Characteristics:**
+- Bright editorial white canvas (`#FFFFFF`) — a digital lifestyle magazine, generous whitespace
+- Two-column staggered masonry feed — varied card heights, 10pt column gap, 12pt vertical gap
+- Lifestyle cards as mini magazine covers — tall photo + punchy title + pastel tags + creator byline
+- Lemon8 Yellow (`#FFE600`) used sparingly — post FAB, active tab underline, primary CTA — always with ink text
+- Pastel topic-tag palette — mint / blush / sky / butter; every card carries 1-3 category tags
+- Post detail as a magazine article — photo carousel + styled body with subheadings + embedded photos
+- Poppins display headlines + Inter UI/body
+- Soft card elevation (`0 1px 3px` + `0 4px 12px` low-opacity) — cards lift gently off white
+- Top segmented tabs — Following / For You / Nearby with a small yellow underline
+- Photo-overlay chips ("5 photos", "Guide") in translucent dark, bottom-left of cover
+- Creator-centric — bylines, Follow buttons, like counts on every card
+- Light-first identity — dark mode exists but the magazine-white aesthetic is core
+
+## 2. Color Palette & Roles
+
+### Primary (Brand — used sparingly)
+- **Lemon8 Yellow** (`#FFE600`): Post-compose FAB, active top-tab underline, primary CTA (Post / Follow). ALWAYS paired with ink text `#1A1A1A`.
+- **Lemon8 Yellow Pressed** (`#E6CF00`): Pressed state for yellow controls.
+- **Ink** (`#1A1A1A`): Primary text, primary dark buttons (Save), the partner color to yellow.
+
+### Canvas & Surfaces (Light Mode — core identity)
+- **Canvas White** (`#FFFFFF`): Primary canvas, card background.
+- **Surface 1** (`#FAFAFA`): Grouped settings, subtle sections.
+- **Surface 2** (`#F2F2F2`): Search field, pressed rows, skeleton placeholders.
+- **Divider** (`#ECECEC`): Hairline dividers between sections and comment rows.
+
+### Canvas & Surfaces (Dark Mode — secondary)
+- **Dark Canvas** (`#121212`): Primary dark canvas.
+- **Dark Surface 1** (`#1C1C1E`): Card background on dark.
+- **Dark Surface 2** (`#2A2A2A`): Search field, pressed rows on dark.
+- **Dark Divider** (`#2E2E2E`): Hairline dividers on dark.
+
+### Text
+- **Ink / Text Primary** (`#1A1A1A`): Titles, card titles, primary text.
+- **Text Secondary** (`#6B6B6B`): Creator names, like counts, metadata.
+- **Text Tertiary** (`#9A9A9A`): Inactive tabs, timestamps, placeholders.
+- **Text Primary Dark** (`#F2F2F2`): Primary text on dark.
+- **Text Secondary Dark** (`#A0A0A0`): Metadata on dark.
+
+### Pastel Topic Tags (the color rhythm)
+Each card carries 1-3 category tags. Background is the soft pastel; text is the saturated sibling.
+
+| Tag | Light Background | Light Text | Dark Background | Dark Text |
+|-----|------------------|-----------|-----------------|-----------|
+| Mint (Recipe/Food) | `#E4F5EC` | `#1F8A52` | `#1F3A2C` | `#6FD49E` |
+| Blush (Beauty/Fashion) | `#FCE8EE` | `#C13E68` | `#3A2630` | `#F09BB6` |
+| Sky (Travel/Wellness) | `#E6F0FB` | `#2D6FB8` | `#1F2F42` | `#8FBEE8` |
+| Butter (Home/Lifestyle) | `#FFF6CC` | `#8A7300` | `#3A350F` | `#E6CF66` |
+| Lavender (Hobbies) | `#F0EAFB` | `#7050B0` | `#2E263C` | `#C0A8E8` |
+
+### Semantic
+- **Like Red** (`#FF2E63`): Liked-heart fill, like count when liked.
+- **Success Green** (`#1FB877`): Posted / saved confirmation toast.
+- **Error Red** (`#FF3B5C`): Upload failed, destructive confirmation.
+- **Photo Chip Scrim** (`rgba(0,0,0,0.55)`): Background of "5 photos" / "Guide" chips on covers.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display**: `Poppins` (by Indian Type Foundry, Google Fonts, SIL OFL) — geometric, friendly, rounded; display titles, screen headers, tab headers, post titles. Gives Lemon8 its approachable magazine-headline voice.
+- **UI / Body**: `Inter` (by Rasmus Andersson, SIL OFL) — card titles, body copy, metadata, tags, tab labels.
+- **Fallback Stack (display)**: `'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif`
+- **Fallback Stack (UI)**: `'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Poppins | 32pt | 800 | 1.2 | -0.5pt | Large screen header / hero |
+| Screen Title | Poppins | 26pt | 700 | 1.25 | -0.3pt | "Discover", "Profile" |
+| Tab Header | Poppins | 22pt | 700 | 1.3 | -0.3pt | Active segmented top tab |
+| Post Title | Poppins | 18pt | 600 | 1.3 | -0.2pt | Title on post detail |
+| Body | Inter | 16pt | 400 | 1.55 | 0pt | Post article body |
+| Subheading (in body) | Poppins | 17pt | 600 | 1.35 | -0.1pt | Section headings inside an article |
+| Card Title | Inter | 15pt | 600 | 1.35 | 0pt | Masonry card title (often 13pt on phone) |
+| Button | Inter | 15pt | 700 | 1.0 | 0pt | Primary / dark buttons |
+| Meta | Inter | 13pt | 400 | 1.4 | 0pt | "mira.styles · 2.4k likes · 3d" |
+| Card Byline | Inter | 11pt | 500 | 1.3 | 0pt | Creator name + like count on card |
+| Tag | Inter | 11pt | 600 | 1.0 | 0.1pt | Pastel topic tag label (9pt on card) |
+| Tab Label | Inter | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
+| Caption | Inter | 12pt | 400 | 1.4 | 0pt | Timestamps, small print |
+
+### Principles
+- **Poppins for headlines, Inter for everything else**: Poppins is the magazine voice (titles, headers); Inter is the readable workhorse (body, cards, meta, tags). Never set body copy in Poppins.
+- **Card titles are tight and punchy**: 1-2 lines, 15pt (13pt on phone) w600, line-clamp at 2 — they're cover-line teasers, not full sentences.
+- **Article body breathes**: post detail body is Inter 16pt w400 at 1.55 line height with Poppins subheadings — reads like an edited magazine feature.
+- **Tags are small and quiet**: pastel-on-pastel, 9-11pt w600 — they categorize without shouting.
+- **Dynamic Type first-class**: display, titles, body scale; card bylines, tags, tab labels stay fixed (layout-sensitive in the masonry).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Post / Follow / primary CTA)**
+- Shape: Fully rounded pill (500pt corner radius)
+- Background: `#FFE600` (Lemon8 Yellow)
+- Text: `#1A1A1A` (ink — NEVER white), Inter 15pt weight 700
+- Padding: 13pt vertical, 28pt horizontal
+- Pressed: background `#E6CF00` + scale 0.98
+- Disabled: `#FFE600` at 40% opacity, text `#9A9A9A`
+
+**Dark Button (Save / secondary primary)**
+- Background: `#1A1A1A` (ink)
+- Text: `#FFFFFF`, Inter 15pt weight 700
+- Pill (500pt), padding 13pt / 28pt
+- Pressed: `#000000`
+
+**Outline Button (Share / Cancel)**
+- Background: transparent
+- Text: Ink (`#1A1A1A`) light / `#F2F2F2` dark
+- Border: 1pt `#D8D8D8` light / `#404040` dark
+- Pill (500pt), padding 11pt / 22pt
+- Font: Inter 14pt weight 600
+
+**Follow Pill (on card / creator)**
+- Background: `#FFE600`, pill, text `#1A1A1A` Inter 12pt w700, padding 7pt / 18pt
+- Following state: outline — transparent bg, 1pt `#D8D8D8` border, text `#6B6B6B`
+
+**Text Link Button**
+- Font: Inter 14pt weight 600, color Ink `#1A1A1A`
+- No underline; pressed: 60% opacity
+
+### Core Atoms
+
+**Lifestyle Card (masonry cell)**
+- Background: `#FFFFFF` (card), 14pt corner radius
+- Cover image: full-width, native-ish aspect (1:1 / 3:4 / 4:5), top corners follow card radius
+- Photo chip (optional): bottom-left, `rgba(0,0,0,0.55)` bg, white 10pt w600, 6pt radius, 4pt/8pt padding, `blur(4px)` backdrop ("5 photos", "Guide")
+- Body: 10-11pt padding
+  - Title: Inter 13-15pt w600 `#1A1A1A`, line-clamp 2
+  - Tag row: pastel tags, 5pt gap, 7pt top margin
+  - Byline row: 18pt circular avatar + creator name (Inter 11pt `#6B6B6B`) + like heart + count (right)
+- Elevation: `0 1px 3px rgba(0,0,0,0.06)` + `0 4px 12px rgba(0,0,0,0.04)`
+- Press: scale 0.98 + slight shadow lift
+
+**Pastel Topic Tag**
+- Pill-ish rounded rect, 8pt corner radius (5pt on card)
+- Background: pastel (mint/blush/sky/butter/lavender); Text: saturated sibling, Inter 11pt w600 (9pt on card)
+- Padding: 7pt/14pt (3pt/7pt on card)
+- Tappable -> topic feed
+
+**Avatar**
+- Circle: 18pt on card byline, 24pt in comments, 56pt on profile/creator card
+- Fallback: linear-gradient(135deg, `#FFE600`, `#FF2E63`) with initials
+
+**Like Heart**
+- Inactive: outline, `#6B6B6B` 2pt stroke
+- Active: filled `#FF2E63`, count turns `#FF2E63`
+- Tap: scale 1.0 → 1.2 → 1.0 over 260ms spring + soft haptic
+
+**Photo Carousel (post detail)**
+- Full-width, swipeable, native aspect; page dots bottom-center (active dot ink, inactive `rgba(0,0,0,0.25)`)
+- Top-right counter chip "1/8" in `rgba(0,0,0,0.55)`
+
+### Navigation
+
+**Top Segmented Tabs**
+- Row: "Following", "For You", "Nearby" — Poppins 18-22pt
+- Active: ink (`#1A1A1A`) w700 + a small (20pt wide, 3pt tall) `#FFE600` underline centered below, 2pt radius
+- Inactive: `#9A9A9A` w600
+- Trailing search glyph (22pt ink stroke)
+
+**Bottom Tab Bar**
+- Height: 54pt + safe area
+- Background: `rgba(255,255,255,0.96)` with `saturate(180%) blur(20px)`, 0.5pt top border `#ECECEC`
+- Tabs (5): Home, Discover, **Post** (center — yellow rounded rectangle, not an icon-only tab), Inbox, Me
+- Post FAB: 42×30pt `#FFE600` rounded rect (9pt radius) with an ink `+` glyph
+- Icon size: 23pt; Active: ink fill; Inactive: `#9A9A9A`
+- Labels: Inter 10pt w500 (Post has no label)
+
+**Top Nav (Post detail)**
+- Height: 44pt + safe area, translucent
+- Leading: back chevron; Trailing: share + ⋯ overflow
+- Creator avatar + name + Follow pill can pin to the nav on scroll
+
+### Input Fields
+
+**Search Bar**
+- Height: 40pt, background `#F2F2F2` / `#2A2A2A` dark, 20pt radius (capsule)
+- Leading magnifyingglass 16pt `#9A9A9A`
+- Placeholder "Search recipes, outfits, places" Inter 14pt `#9A9A9A`
+- Focus: 1.5pt ink border
+
+**Comment Composer**
+- Height 44pt min, `#F2F2F2` bg, 22pt radius capsule
+- Trailing "Post" text in ink (disabled `#9A9A9A` when empty)
+
+### Distinctive Components
+
+**Discovery Masonry Feed**
+- The signature layout. Two columns, balanced by shortest-column placement. Column gap 10pt, card vertical gap 12pt.
+- Each card a lifestyle mini-cover; infinite scroll; new cards drop into the shorter column
+- Pull-to-refresh: yellow lemon-slice spinner
+
+**Post Detail (magazine article)**
+- Photo carousel -> Poppins 18pt title -> creator card (avatar + name + Follow) -> styled body (Inter 16pt body, Poppins 17pt subheadings, embedded full-width photos at 14pt radius, inline pastel tags) -> tag row -> like/save/share action bar -> comments
+
+**Creator Card (in post / profile)**
+- 56pt avatar + name (Poppins 17pt w600) + follower count (Inter 13pt `#6B6B6B`) + Follow pill
+- Optional 1-line bio
+
+**Topic Hub Header**
+- A pastel-tinted banner (the topic's tag color at full pastel) with the topic name in Poppins 26pt and a post count
+
+**Photo Overlay Chip**
+- "5 photos" / "Guide" / "Recipe" — `rgba(0,0,0,0.55)` bg, white Inter 10pt w600, 6pt radius, bottom-left of cover
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 5 (card tag gap), 8, 10 (masonry column gap), 12, 16, 20, 24, 32
+- Masonry column gap: **10pt**; card vertical gap: **12pt**
+- Card inner padding: 10-11pt
+- Screen horizontal inset: 10pt (feed) / 16pt (text content)
+
+### Grid & Container
+- Feed: 2-column masonry, ~10pt outer + 10pt column gap (phone)
+- Post detail: photo carousel full-bleed; text content 16pt insets
+- iPad: 3-4 column masonry; post detail in centered 680pt column
+- Cards never exceed ~50% screen width minus gaps on phone
+
+### Whitespace Philosophy
+- **Editorial generosity**: white is the magazine page — cards float on it with soft shadows, never edge-to-edge
+- **Masonry rhythm**: varied card heights create a flowing, browsable cadence — the whitespace between cards is intentional
+- **Article breathing room**: post detail body uses 1.55 line height and 16pt insets so it reads like a feature, not a caption
+
+### Border Radius Scale
+- Square (0pt): full-bleed carousel photos (when full-screen)
+- Subtle (5pt): tags on cards, small chips
+- Standard (8pt): pastel topic tags, photo-overlay chips, inputs (small)
+- Card (14pt): lifestyle cards, embedded article photos
+- Comfortable (20pt): bottom sheets, search capsule, modals
+- Pill (500pt): all buttons, Follow pills, segmented controls
+- Circle (50%): avatars, like-burst particles
+
+## 6. Depth & Elevation
+
+Lemon8 uses soft, magazine-print elevation — cards lift gently off the white page; nothing is harsh.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Page (Level 0) | No shadow | Canvas, article body text, dividers |
+| Card (Level 1) | `rgba(0,0,0,0.06) 0 1px 3px` + `rgba(0,0,0,0.04) 0 4px 12px` | Lifestyle cards in the masonry feed |
+| Floating (Level 2) | `rgba(0,0,0,0.10) 0 4px 16px` | Post FAB region, sticky creator bar |
+| Sheet (Level 3) | `rgba(0,0,0,0.12) 0 -4px 24px` | Bottom sheets (Share, comment composer, filters) |
+| Modal Overlay | `rgba(0,0,0,0.45)` scrim | Behind modals, full-screen photo viewer |
+
+**Shadow Philosophy**: The masonry card shadow is deliberately *two-layer and very low opacity* — a tight `0 1px 3px` for crispness plus a diffuse `0 4px 12px` for the gentle float. This mimics a magazine page where photos sit slightly proud of the paper. There is no heavy Material elevation; Lemon8's depth is soft and editorial. In dark mode shadows nearly vanish, so cards gain a 0.5pt `#2E2E2E` border as the separation cue.
+
+### Motion
+- **Masonry card press**: scale 1.0 → 0.98 over 120ms, shadow lifts slightly; release springs back
+- **Card -> post detail**: tapped card's cover expands into the post carousel over 300ms ease-out (shared element); back collapses in 260ms
+- **Like heart tap**: scale 1.0 → 1.2 → 1.0 over 260ms spring (damping 0.6) + soft haptic + brief `#FF2E63` particle burst
+- **Top tab switch**: yellow underline slides horizontally to the new tab over 220ms ease-out; content cross-fades 180ms
+- **Photo carousel**: paged horizontal scroll with 1:1 finger tracking; dots animate
+- **Masonry infinite load**: new cards fade + 6pt slide-up over 220ms as they drop into the shorter column
+- **Pull to refresh**: yellow lemon-slice rotates while pulling, spins on release
+- **Post / save success**: green `#1FB877` checkmark pops (200ms) + toast slides up
+- **Haptic feedback**: soft on like, light tick on tab switch, medium on follow/save confirm
+
+## 7. Do's and Don'ts
+
+### Do
+- Use bright editorial white (`#FFFFFF`) as the canvas — Lemon8 is a magazine
+- Build the feed as a two-column staggered masonry with varied card heights
+- Style each card as a mini magazine cover: tall photo + punchy title + pastel tags + creator byline
+- Use Lemon8 Yellow (`#FFE600`) sparingly — post FAB, active tab underline, primary CTA only
+- ALWAYS pair Lemon8 Yellow with ink text (`#1A1A1A`) — never white-on-yellow
+- Use the pastel topic-tag palette (mint/blush/sky/butter) as the app's color rhythm
+- Use soft two-layer low-opacity card shadows so cards float gently off the white
+- Use Poppins for display/titles, Inter for body/cards/meta
+- Structure post detail like a magazine article — carousel + subheadings + embedded photos
+- Give the post-compose FAB a yellow rounded-rectangle treatment in the tab bar
+- Line-clamp card titles to 2 lines — they're cover teasers, not paragraphs
+
+### Don't
+- Don't use a single-column full-width feed — the masonry is the signature
+- Don't flood the UI with yellow — it's a sparing accent, not a background
+- Don't put white text on Lemon8 Yellow — always ink `#1A1A1A`
+- Don't use heavy/hard Material shadows — Lemon8's elevation is soft and editorial
+- Don't set body copy or card titles in Poppins — that's Inter's job
+- Don't make the canvas off-white or gray — bright `#FFFFFF` is the magazine page
+- Don't use saturated tag backgrounds — the topic tags are soft pastels with saturated text
+- Don't center card titles — they're left-aligned cover lines
+- Don't crop card covers to a fixed square — varied aspect ratios feed the masonry rhythm
+- Don't bury topic tags — every card should carry 1-3, they're the color system
+- Don't force dark mode as primary — the light magazine aesthetic is core identity
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | 2-column masonry, ~8pt gaps, card title 13pt |
+| iPhone 13/14/15 | 390pt | Standard 2-column, 10pt gaps |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in translucent nav |
+| iPhone 15/16 Pro Max | 430pt | 2-column, slightly wider cards, 15pt card titles |
+| iPad (portrait) | 768pt | 3-column masonry; post detail centered 680pt |
+| iPad (landscape) | 1024pt+ | 4-column masonry; 2-pane (feed + detail) optional |
+
+### Dynamic Type
+- Display, screen titles, post title, body: full scale
+- Card titles: scale to L then line-clamp at 2
+- Tags, card bylines, tab labels: FIXED (layout-sensitive in the masonry)
+
+### Orientation
+- Masonry re-balances column count and card widths on rotation
+- Post detail rotates; carousel becomes full-screen lightbox in landscape
+- iPad landscape: optional 2-pane (masonry left, article right)
+
+### Touch Targets
+- Card: full card tappable (always > 44pt)
+- Like heart: 24pt glyph, 44pt hit
+- Tab bar icons: 23pt glyph, 48pt hit; Post FAB 42×30pt with 48pt hit
+- Tag: full-pill tappable, 32pt min
+- Buttons: 44pt tall minimum
+
+### Safe Area Handling
+- Top: translucent segmented tabs respect safe area + Dynamic Island
+- Bottom: translucent tab bar respects home indicator
+- Sides: feed keeps ~10pt insets; article content 16pt; full-screen photo viewer edge-to-edge
+- Keyboard: comment composer docks above keyboard
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (light): `#FFFFFF`
+- Canvas (dark): `#121212`
+- Surface 1 / 2: `#FAFAFA` / `#F2F2F2` light · `#1C1C1E` / `#2A2A2A` dark
+- Divider: `#ECECEC` light / `#2E2E2E` dark
+- Ink / text primary: `#1A1A1A` light / `#F2F2F2` dark
+- Text secondary: `#6B6B6B` · tertiary `#9A9A9A`
+- Lemon8 Yellow: `#FFE600` (pressed `#E6CF00`) — always with ink `#1A1A1A`
+- Tag mint: `#E4F5EC` / `#1F8A52`
+- Tag blush: `#FCE8EE` / `#C13E68`
+- Tag sky: `#E6F0FB` / `#2D6FB8`
+- Tag butter: `#FFF6CC` / `#8A7300`
+- Like red: `#FF2E63` · Success `#1FB877` · Error `#FF3B5C`
+- Card shadow: `rgba(0,0,0,0.06) 0 1px 3px` + `rgba(0,0,0,0.04) 0 4px 12px`
+
+### Example Component Prompts
+- "Build the Lemon8 discovery masonry feed in SwiftUI: a two-column staggered grid that places each card into the currently-shorter column. 10pt column gap, 12pt vertical gap, 10pt outer inset. Each card: `#FFFFFF` bg, 14pt corner radius, soft shadow (`0 1px 3px rgba(0,0,0,0.06)` + `0 4px 12px rgba(0,0,0,0.04)`). Card content: cover image at varied aspect (1:1 / 3:4 / 4:5) with an optional bottom-left `rgba(0,0,0,0.55)` chip ('5 photos'), then 10pt padding holding a 2-line-clamped title (Inter 13pt w600 `#1A1A1A`), a pastel tag row, and a byline (18pt avatar + name Inter 11pt `#6B6B6B` + like heart + count)."
+
+- "Create a Lemon8 lifestyle card: white card, 14pt radius, soft two-layer shadow. Top: cover photo (aspect 3:4) with top corners following the card radius and a `rgba(0,0,0,0.55)` 'Guide' chip bottom-left (white Inter 10pt w600, 6pt radius). Body padding 11pt: title 'Autumn capsule wardrobe' Inter 13pt w600 `#1A1A1A` clamped to 2 lines; tag row with a blush tag ('Fashion', bg `#FCE8EE` text `#C13E68`, 9pt w600, 5pt radius); byline row: 18pt gradient avatar + 'mira.styles' (Inter 11pt `#6B6B6B`) + like heart + '2.4k'."
+
+- "Render the Lemon8 top segmented tabs: a row of 'Following', 'For You', 'Nearby' in Poppins 22pt. Active tab is ink `#1A1A1A` w700 with a 20pt-wide 3pt-tall `#FFE600` underline centered 6pt below it (2pt radius); inactive tabs are `#9A9A9A` w600. Trailing magnifyingglass 22pt ink stroke. Switching tabs slides the yellow underline horizontally over 220ms ease-out and cross-fades content."
+
+- "Build the Lemon8 bottom tab bar: 54pt + safe area, `rgba(255,255,255,0.96)` with `saturate(180%) blur(20px)`, 0.5pt top border `#ECECEC`. Five slots: Home, Discover, Post, Inbox, Me. The Post slot is NOT an icon — it's a 42x30pt `#FFE600` rounded rectangle (9pt radius) centering an ink `+` glyph. Other tabs: 23pt icon, ink fill when active, `#9A9A9A` inactive, Inter 10pt w500 label."
+
+- "Create a Lemon8 pastel topic-tag row: pill-ish rounded rects (8pt radius), Inter 11pt w600, 7pt/14pt padding. Mint (`#E4F5EC` bg / `#1F8A52` text) for Recipe, blush (`#FCE8EE` / `#C13E68`) for Beauty, sky (`#E6F0FB` / `#2D6FB8`) for Travel, butter (`#FFF6CC` / `#8A7300`) for Home. Each tag tappable -> topic feed."
+
+- "Render the Lemon8 post detail (magazine article): a full-width swipeable photo carousel with page dots and a '1/8' counter chip top-right (`rgba(0,0,0,0.55)`). Below at 16pt insets: title in Poppins 18pt w600 `#1A1A1A`; creator card (56pt avatar + name Poppins 17pt w600 + follower count Inter 13pt `#6B6B6B` + yellow Follow pill); styled body (Inter 16pt w400 line-height 1.55, Poppins 17pt w600 subheadings, embedded full-width photos at 14pt radius); pastel tag row; like/save/share action bar; comments."
+
+### Iteration Guide
+1. Canvas is bright editorial white `#FFFFFF` (dark `#121212`) — it's a magazine, light is the core identity
+2. The feed is a two-column staggered MASONRY of varied-height lifestyle cards — never single-column
+3. Lemon8 Yellow `#FFE600` is a sparing accent (post FAB, active tab underline, primary CTA) — never a flood, ALWAYS with ink text
+4. Pastel topic tags (mint/blush/sky/butter) are the app's color rhythm — every card carries 1-3
+5. Cards are mini magazine covers: tall photo + punchy 2-line title + tags + creator byline + like count
+6. Card elevation is soft and two-layer (`0 1px 3px` + `0 4px 12px`, very low opacity) — gentle float, never harsh
+7. Poppins = display/titles/headers; Inter = body/cards/meta/tags — never swap them
+8. Post detail is a structured magazine article — carousel + subheadings + embedded photos, not a tweet
+9. The post-compose FAB is a yellow rounded rectangle in the tab bar, not a plain icon
+10. Card titles line-clamp at 2 lines — they're cover teasers; the body breathes at 1.55 line height