designmd-forge 1.2.0

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

@@ -0,0 +1,338 @@
+# Design System Inspiration of Bluesky (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Bluesky's iOS app is a clean, friendly, sky-bright timeline that feels open and uncluttered. The default light surface is pure white (`#FFFFFF`) with near-black text (`#0B0F14`), and it offers two darker variants: a soft "Dim" mode on a desaturated slate (`#1E2936`) and a deep "Dark" mode (`#0B0F14`). The triple-theme choice is a deliberate accessibility-and-comfort gesture — Bluesky wants you to pick the brightness that suits your eyes, not impose one. Across all three, the timeline is a quiet column of skeet cards separated by hairline dividers, with content given room to breathe.
+
+The accent system is anchored by Bluesky Blue (`#1185FE`) — a confident, slightly electric sky-blue used for links, the active tab, the compose FAB, primary buttons, and the butterfly logomark. Its pressed state deepens to `#0F6FD6`. The single most expressive interaction is the like: a heart that does a springy pop-scale (and a small color fill to the same blue family) when tapped — light, joyful, and instantly legible. The other signature is structural rather than chromatic: a row of pinned, switchable custom-feed tabs at the very top of Home ("Following", "Discover", and any algorithmic feeds you've pinned), making the feed itself a first-class, user-controlled object.
+
+Typography is the system font (San Francisco) at comfortable reading sizes, mapped to an Inter fallback for cross-platform parity. Skeet bodies sit at 15pt with generous line height; display names are 15pt semibold; handles (`@user.bsky.social`) are 14pt in muted gray. The butterfly logo and the pinned-feed selector are the two identity anchors a user sees first. There are no heavy shadows, no skeuomorphism — just clean type, a single bright accent, and a layout that makes the user's choice of feed and theme the center of the experience.
+
+**Key Characteristics:**
+- Triple theme: Light `#FFFFFF` / Dim `#1E2936` / Dark `#0B0F14` — user picks comfort level
+- Bluesky Blue (`#1185FE`) for links, active tab, compose FAB, primary actions, butterfly logo
+- Like = heart pop-scale spring — the joyful signature gesture
+- Pinned custom-feed selector tabs at the top of Home — the feed is user-controlled
+- Skeet card action row: Reply · Repost · Like · Share, evenly spaced
+- Reply-controls chip on the composer (who can reply)
+- Butterfly logomark as the brand anchor
+- System font at reading sizes (15pt body), Inter fallback
+- Bottom tabs (Home / Search / Notifications / Chat / Profile) + compose FAB
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Bluesky Blue** (`#1185FE`): Links, active tab tint, compose FAB, primary button fill, butterfly logo, mentions/hashtags.
+- **Blue Pressed** (`#0F6FD6`): Active/pressed state for blue CTAs and the FAB.
+- **Like Red** (`#EC4899`): The heart's liked fill — a warm pink-red that pops against the blue UI.
+
+### Light Mode (Default)
+- **Canvas** (`#FFFFFF`): Primary background, timeline surface.
+- **Surface 1** (`#F1F3F5`): Cards-as-rows, search field, grouped settings.
+- **Surface 2** (`#E2E8F0`): Pressed rows, chip backgrounds, hover-equivalent.
+- **Divider** (`#E2E8F0`): Hairline separators between skeets.
+- **Text Primary** (`#0B0F14`): Skeet body, display names, headlines.
+- **Text Secondary** (`#697787`): Handles, timestamps, metadata, counts.
+- **Text Tertiary** (`#8B98A5`): Disabled labels, low-emphasis hints.
+
+### Dim Mode
+- **Dim Canvas** (`#1E2936`): Primary background — a soft desaturated slate.
+- **Dim Surface 1** (`#27313E`): Cards-as-rows, elevated areas.
+- **Dim Surface 2** (`#2E4052`): Pressed rows, chips.
+- **Dim Divider** (`#2E4052`): Hairline separators.
+- **Dim Text Primary** (`#F1F3F5`): Body, names.
+- **Dim Text Secondary** (`#9CA6B5`): Handles, metadata.
+
+### Dark Mode
+- **Dark Canvas** (`#0B0F14`): Primary background — deep near-black slate.
+- **Dark Surface 1** (`#161E27`): Cards-as-rows.
+- **Dark Surface 2** (`#1E2936`): Pressed rows, sheets.
+- **Dark Divider** (`#1E2936`): Hairline separators.
+- **Dark Text Primary** (`#F1F3F5`): Body, names.
+- **Dark Text Secondary** (`#8B98A5`): Handles, metadata.
+
+### Semantic
+- **Error Red** (`#EC4899`)/(`#E5484D`): Validation/destructive (`#E5484D`); like uses pink `#EC4899`.
+- **Success Green** (`#2DBE85`): Posted/confirmed, follow-confirmed.
+- **Warning Amber** (`#F5A623`): Content-label warnings, rate limits.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `SF Pro Text` / `SF Pro Display` (system) on iOS
+- **Cross-platform parity**: `Inter` (web/Android reference)
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Monospace**: `ui-monospace, 'SF Mono', Menlo, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title (Large) | SF Pro Display | 28pt | 700 | 1.2 | -0.4pt | "Notifications", "Search" large nav title |
+| Section Header | SF Pro Display | 21pt | 700 | 1.2 | -0.3pt | "Suggested for you", profile sections |
+| Display Name | SF Pro Text | 15pt | 600 | 1.25 | -0.1pt | Poster's display name on a skeet |
+| Skeet Body | SF Pro Text | 15pt | 400 | 1.4 | 0pt | The post text |
+| Body (Settings) | SF Pro Text | 15pt | 400 | 1.4 | 0pt | Settings descriptions |
+| Handle / Meta | SF Pro Text | 14pt | 400 | 1.3 | 0pt | `@user.bsky.social`, "2h", reply context |
+| Feed Tab Label | SF Pro Text | 15pt | 600 | 1.2 | -0.1pt | "Following", "Discover" pinned-feed tabs |
+| Action Count | SF Pro Text | 13pt | 500 | 1.2 | 0pt | Reply/repost/like numeric counts |
+| Button (Primary) | SF Pro Text | 15pt | 600 | 1.0 | -0.1pt | "Post", "Follow" |
+| Button (Secondary) | SF Pro Text | 14pt | 600 | 1.0 | 0pt | "Following", outline actions |
+| Tab Label | SF Pro Text | 10pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels |
+| Reply Context | SF Pro Text | 13pt | 400 | 1.3 | 0pt | "Reply to @name" line above a skeet |
+
+### Principles
+- **Comfortable body at 15pt / 1.4**: readable without being heavy — Bluesky is conversational
+- **Handle always visible**: `@user.bsky.social` is a 14pt structural element
+- **Weight at 400 / 500 / 600 / 700**: regular body, medium counts, semibold names/feeds, bold titles
+- **System font, Inter parity**: native iOS feel matching the web app's Inter rendering
+- **Blue text only for links/mentions/hashtags** — body text never uses the accent
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button ("Post" / "Follow")**
+- Background: `#1185FE`
+- Text: `#FFFFFF`
+- Padding: 10pt vertical, 20pt horizontal
+- Corner radius: 500pt (full pill — Bluesky favors pills for primary actions)
+- Font: SF Pro Text 15pt weight 600
+- Pressed: `#0F6FD6`, scale 0.97
+- Disabled: `#1185FE` at 40% opacity
+
+**Secondary / Following Button**
+- Background: transparent
+- Text: `#0B0F14` (light) / `#F1F3F5` (dark)
+- Border: 1pt solid `#E2E8F0` (light) / `#2E4052` (dim/dark)
+- Padding: 8pt vertical, 18pt horizontal
+- Corner radius: 500pt
+- Pressed: background `#F1F3F5`
+
+**Compose FAB**
+- Shape: Circle, 56pt diameter, bottom-right, 16pt from edges, floats above tab bar
+- Background: `#1185FE`
+- Icon: SF Symbol `square.and.pencil` 24pt in `#FFFFFF`
+- Shadow: `rgba(17,133,254,0.35) 0 6px 20px`
+- Pressed: scale 0.94, `#0F6FD6`, soft haptic
+
+**Skeet Action Icons (Reply / Repost / Like / Share)**
+- Size: 18pt glyph, 44pt hit area
+- Default: `#697787` (light) / `#8B98A5` (dark)
+- Repost active: `#2DBE85` (green)
+- Like active: `#EC4899` (pink-red), with pop-scale spring + fill
+- Spacing: evenly distributed across the card's content width
+- Count: 13pt w500 trailing each icon when > 0
+
+### Cards & Containers
+
+**Skeet Card (THE core unit)**
+- Background: matches canvas (flat, no shadow); separated by a 1pt divider
+- Padding: 12pt vertical, 16pt horizontal
+- Header: 42pt circular avatar → display name (15pt w600) + `@handle` (14pt `#697787`) + " · 2h" → trailing ⋯
+- Reply context line above the header when applicable: "Reply to @name" 13pt `#697787`
+- Body: 15pt w400, 1.4 line height; links/mentions/hashtags in `#1185FE`
+- Embed: link card (rounded 12pt, thumbnail + title + domain) or media grid (12pt radius)
+- Quote-skeet: a nested bordered card (1pt `#E2E8F0`, 12pt radius) inside the body
+- Action row: Reply · Repost · Like · Share evenly spaced, counts trailing
+
+**Pinned Custom-Feed Selector**
+- A horizontally scrollable tab strip pinned at the very top of Home
+- Tabs: "Following", "Discover", + any pinned algorithmic feeds
+- Selected: `#1185FE` text with a 3pt rounded blue underline indicator
+- Unselected: `#697787`
+- Last tab is a "+" or feed-settings affordance to manage pinned feeds
+- Switching slides the timeline with a 0.25s cross-fade
+
+**Profile Header**
+- Banner full-width, 130pt tall
+- Avatar 80pt circular, overlapping the banner by 36pt, 4pt canvas-colored ring
+- Display name 21pt w700, `@handle` 15pt `#697787`
+- Bio with clickable mentions/hashtags in blue
+- "Follow" pill primary + ⋯
+- Followers / Following counts inline (15pt, count bold)
+- Tab strip: Posts / Replies / Media / Likes / Feeds
+
+**Notification Row**
+- 42pt avatar(s) + actor name(s) + action ("liked your post", "reposted", "followed you")
+- Type glyph tint: pink like heart, green repost, blue follow
+- Tap opens the related skeet or profile
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 52pt + safe area
+- Background: `rgba(255,255,255,0.94)` (light) / `rgba(11,15,20,0.94)` (dark) with `.regularMaterial` blur
+- Tabs: Home, Search, Notifications, Chat, Profile
+- Icon size: 26pt
+- Active: `#1185FE`; Inactive: `#697787` (light) / `#8B98A5` (dark)
+- Labels: SF Pro Text 10pt w600
+- Notifications/Chat tabs show a blue unread dot/count badge
+
+**Top Nav (Home)**
+- Logo: butterfly mark centered or leading, `#1185FE`, 28pt
+- Pinned-feed selector strip directly below
+- Trailing settings/gear icon (22pt)
+- Blur-on-scroll background
+
+### Input Fields
+
+**Search Field**
+- Background: `#F1F3F5` (light) / `#1E2936` (dim) / `#161E27` (dark)
+- Height: 40pt, corner radius 500pt (pill)
+- Leading `magnifyingglass` 16pt `#697787`
+- Placeholder: "Search", 15pt w400 `#697787`
+- Focus: 1.5pt `#1185FE` ring
+
+**Compose Editor**
+- Full-screen sheet, plain text area at 18pt w400
+- Character ring counter (300 default) that turns `#E5484D` past the limit
+- Toolbar: media, GIF, alt-text, language, and a **reply-controls chip** above the keyboard
+- Reply-controls chip: "Everybody can reply" → tap to restrict (Mentioned / Followed) — turns `#1185FE` when restricted
+
+### Distinctive Components
+
+**Switchable Custom Feeds**
+- The pinned-feed selector is the signature: the timeline is not one algorithm — it's a user-curated set of feeds you tab between, treating "the feed" as a first-class, swappable object
+
+**Like Pop**
+- Tapping the heart fills it pink `#EC4899` and pop-scales 1.0 → 1.25 → 1.0 over ~300ms with a spring; un-liking scales back to outline
+- Paired with a light impact haptic; the count rolls up by one
+
+**Reply-Controls Chip**
+- On the composer, an inline chip stating who can reply, echoing Bluesky's reply-gating model; blue when restricted — a visible consent control
+
+**Butterfly Logomark**
+- The brand anchor, rendered in `#1185FE`, used in the splash, the empty states, and the Home nav
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 56
+- Standard margin: 16pt horizontal on skeet cards
+- Skeet vertical rhythm: 12pt top/bottom padding; cards separated by 1pt dividers
+
+### Grid & Container
+- Content width: full device width, 16pt internal padding
+- Media grid: 1 image full-width 12pt radius; 2–4 in a 2-col 12pt-radius mosaic, 2pt gaps
+- Link/quote embeds: full-width nested card, 12pt radius, 1pt border
+
+### Whitespace Philosophy
+- **Conversational, not dense**: 15pt body at 1.4 line height; cards have comfortable internal padding
+- **Dividers, not boxes**: separation is a hairline — the timeline stays visually quiet
+- **Feed selector is sticky**: the user's curated feeds are always one tap away at the top
+
+### Border Radius Scale
+- Square (0pt): Full-bleed banners only
+- Soft (8pt): Small chips, inline tags
+- Comfortable (12pt): Media attachments, link/quote embed cards
+- Large (16pt): Bottom sheets, modals
+- Full Pill (500pt): Primary/secondary buttons, search field, the feed-tab underline is rounded
+- Circle (50%): Avatars, compose FAB, like/repost hit circles
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Skeet cards, timeline, list rows |
+| Card Hairline (Level 1) | 1pt divider per theme | Skeet-to-skeet separation |
+| Embed Border (Level 1) | 1pt border, 12pt radius | Link cards, quote-skeets nested in body |
+| FAB (Level 2) | `rgba(17,133,254,0.35) 0 6px 20px` | Floating compose button |
+| Sheet (Level 3) | `rgba(0,0,0,0.15)` (light) / `rgba(0,0,0,0.5)` (dark) `0 -12px 40px` | Compose sheet, menus |
+| Tab Bar Material | `.regularMaterial` over 94%-opaque canvas | Bottom tab bar over scrolling content |
+
+**Shadow Philosophy**: Bluesky is flat by design — the timeline reads like a clean document. The only real elevation is the blue compose FAB (a brand-tinted shadow) and modal sheets. Cards and embeds use 1pt borders/dividers rather than drop shadows. In dark/dim modes, the sheet scrim deepens to 0.5; in light mode it stays barely-there at 0.15. The brightness comes from the canvas and the single blue accent, not from lighting.
+
+### Motion
+- **Like pop**: heart fills `#EC4899` and scales 1.0 → 1.25 → 1.0 over ~300ms spring, light haptic, count rolls
+- **Repost**: icon turns `#2DBE85` with a quick 1.0 → 1.1 → 1.0 bounce, success haptic
+- **Feed switch**: 0.25s cross-fade + small horizontal nudge between pinned feeds
+- **Compose FAB**: scale 0.94 on press, soft haptic; sheet presents with a 0.35s spring
+- **Theme switch**: instant token swap with a 0.2s color cross-fade across surfaces
+- **Pull-to-refresh**: standard system spinner, no custom flourish
+
+## 7. Do's and Don'ts
+
+### Do
+- Offer all three themes: Light `#FFFFFF`, Dim `#1E2936`, Dark `#0B0F14`
+- Reserve Bluesky Blue (`#1185FE`) for links, mentions, hashtags, active tab, FAB, primary buttons, and the butterfly logo
+- Make the like a pink (`#EC4899`) pop-scale spring — it's the joyful signature
+- Keep the pinned custom-feed selector at the top of Home and easy to switch
+- Always show the full `@user.bsky.social` handle
+- Show the reply-controls chip on the composer so reply-gating is visible
+- Keep cards flat; separate with hairline dividers and 1pt embed borders
+- Use the butterfly mark as the brand anchor in `#1185FE`
+
+### Don't
+- Don't ship only one theme — the triple-theme choice is part of the product
+- Don't add accent colors beyond blue (and the pink like / green repost) — keep it clean
+- Don't truncate the handle's `.bsky.social` domain
+- Don't bury custom feeds in settings — the feed selector is first-class
+- Don't box every skeet with heavy borders/shadows — dividers keep it quiet
+- Don't make the like a static toggle — the spring pop is the personality
+- Don't shrink body text below 15pt — Bluesky is conversational and readable
+- Don't use heavy elevation — the only shadow is the FAB and modal sheets
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Avatar 38pt; media grid still 2-col |
+| iPhone 13/14/15 | 390pt | Standard 42pt avatar, 16pt padding |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clears the large title |
+| iPhone 15/16 Pro Max | 430pt | Body measure widens; FAB stays 56pt |
+| iPad | 768pt+ | Split view: feed + thread, max 640pt reading column, persistent left rail |
+
+### Dynamic Type
+- Skeet body, names, bios: full scale (conversational app — honor it)
+- Action counts, timestamps: scale modestly
+- Tab labels: fixed 10pt
+- Feed-tab labels: scale modestly, fixed minimum 15pt
+
+### Orientation
+- Timeline / Profile: portrait and landscape (iPad split view)
+- Media lightbox: rotates to landscape for wide media
+- Compose: portrait-locked on iPhone
+
+### Touch Targets
+- Skeet action icons: 18pt glyph, 44pt hit circle
+- Compose FAB: 56pt
+- Tab icons: 26pt glyph, 44pt effective hit
+- Feed-selector tabs: full label + 12pt padding tappable
+
+### Safe Area Handling
+- Top: butterfly nav and feed selector sit below safe area / Dynamic Island
+- Bottom: FAB floats 16pt above the tab bar; both respect the home indicator
+- Sides: 16pt content insets; banner edge-to-edge
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Light canvas: `#FFFFFF` · Dim canvas: `#1E2936` · Dark canvas: `#0B0F14`
+- Light surface 1: `#F1F3F5` · Dark surface 1: `#161E27`
+- Divider: `#E2E8F0` (light) / `#2E4052` (dim) / `#1E2936` (dark)
+- Text primary: `#0B0F14` (light) / `#F1F3F5` (dim+dark)
+- Text secondary: `#697787` (light) / `#8B98A5` (dark)
+- Bluesky Blue (action/link): `#1185FE`
+- Blue pressed: `#0F6FD6`
+- Like pink: `#EC4899`
+- Repost green: `#2DBE85`
+
+### Example Component Prompts
+- "Create a SwiftUI Bluesky skeet card: 42pt circular avatar leading, display name 'Paul' in SF Pro 15pt weight 600 + handle '@pfrazee.com' in 14pt #697787 + ' · 2h', trailing ⋯. Body text 15pt weight 400 at 1.4 line height with links/mentions in #1185FE. Below: Reply · Repost · Like · Share evenly spaced, icons 18pt, 13pt weight-500 counts. Flat card matching canvas with a 1pt #E2E8F0 divider beneath."
+- "Build the Bluesky like button: an 18pt heart, default #697787; on tap it fills #EC4899 and pop-scales 1.0 → 1.25 → 1.0 over ~300ms with a spring and a light impact haptic, and the trailing count rolls up by one. Tapping again returns to the outline state."
+- "Design the Bluesky pinned custom-feed selector: a horizontally scrollable tab strip at the top of Home with 'Following', 'Discover', and pinned algorithmic feeds; selected tab uses #1185FE text with a 3pt rounded blue underline, unselected is #697787. Switching cross-fades the timeline over 0.25s."
+- "Create the Bluesky compose FAB: a 56pt circular button, #1185FE, bottom-right 16pt from edges, SF Symbol 'square.and.pencil' 24pt #FFFFFF, shadow rgba(17,133,254,0.35) 0 6px 20px. Pressed: scale 0.94, #0F6FD6, soft haptic; opens the compose sheet with a 0.35s spring and a reply-controls chip in the toolbar."
+- "Build a Bluesky quote-skeet embed: a nested card inside the body with a 1pt #E2E8F0 border and 12pt radius, containing a 24pt avatar + name + handle and a 2-line clamped quoted body, the whole embed tappable to open the quoted post."
+
+### Iteration Guide
+1. Ship three themes — Light `#FFFFFF`, Dim `#1E2936`, Dark `#0B0F14` — the choice is the product
+2. Bluesky Blue `#1185FE` is links + navigation + primary actions + the butterfly; pink `#EC4899` like, green `#2DBE85` repost
+3. The like is a springy pink pop-scale — make it the joyful moment
+4. The pinned custom-feed selector lives at the top of Home — the feed is user-controlled
+5. Always render the full `@user.bsky.social` handle
+6. Cards are flat; separate with hairline dividers and 1pt embed borders — quiet timeline
+7. Body text is 15pt at 1.4 line height — conversational and readable
+8. The only elevation is the blue FAB and modal sheets — no heavy shadows