designmd-forge 1.2.0

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

@@ -0,0 +1,403 @@
+# Design System Inspiration of Vimeo (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Vimeo's iOS app is a screening room, not a feed. Where consumer video apps fight for attention with bright chrome, autoplay walls, and infinite scroll, Vimeo does the opposite: it builds a near-black theatre (`#0D0E12`) and then gets out of the way so the *video itself* — and the human craft inside it — is the brightest thing on the screen. The entire design philosophy is "let the work breathe." Open any video and the 16:9 player is the hero: edge-to-edge or inset by 16pt, rounded at 14pt, with a single translucent play affordance dead-center and a minimal scrubber that fades away during playback. The UI is deliberately quiet because Vimeo's audience is filmmakers, motion designers, agencies, and studios who care about color fidelity and presentation — a loud interface would be an insult to the frame.
+
+The signature emotional moment is the **Staff Pick**. Vimeo's human curation team has, for over a decade, hand-selected exceptional work, and that gold star is the most recognizable artifact in the brand. In the app it appears as a `#FFD24C` gold badge on thumbnails, a curated "Staff Picks" rail on Home, and a status line on creator profiles ("Staff · 12.4K followers"). It is the one place the app raises its voice — gold against ink — because curation *is* the product. The second signature moment is the **player + curated watch feed** pairing: a cinematic player on top, a vertically scrolling list of beautifully thumbnailed films below, each with creator attribution. This "watch, then discover more like it" rhythm is the core loop.
+
+Color is restrained to the point of austerity. The canvas is a deep blue-black ink (`#0D0E12`), surfaces lift exactly one step (`#16181F`), and there is exactly one accent: **Vimeo Blue** (`#00ADEF`, with a legacy `#1AB7EA` still present on older surfaces and the wordmark). Blue is reserved — it appears only on the scrubber fill, the primary Upload CTA, the active tab, and follow actions. There is no secondary brand color competing for the eye; Staff Gold is the only other saturated hue and it means exactly one thing (curated). Text is pure white (`#FFFFFF`) at the top of the hierarchy and a cool blue-gray (`#AEB6C2`) for metadata, keeping chrome readable but visually subordinate to thumbnails. Typography is **Inter** — Vimeo's clean, neutral UI sans — sized for editorial calm: a 17–18pt video title, 13pt metadata, generous line height, never shouty.
+
+**Key Characteristics:**
+- Near-black ink canvas (`#0D0E12`) — a theatre that makes video glow; surfaces lift one step only (`#16181F`)
+- Cinematic 16:9 player as the hero — 14pt corners, translucent center play button, auto-fading minimal scrubber
+- Single accent — **Vimeo Blue** `#00ADEF` (legacy `#1AB7EA`) — scrubber fill, primary CTA, active tab, follow
+- The **Staff Pick gold star** (`#FFD24C`) — the brand's most iconic artifact; the only other saturated color, means exactly "curated"
+- Player + curated watch feed pairing — cinematic player on top, beautifully thumbnailed discovery list below
+- Creator-forward attribution — avatar + name + follower count + Follow button on every video
+- Inter typography sized for editorial calm — 17–18pt titles, 13pt metadata, generous leading
+- Quiet chrome — minimal top bar (wordmark + search + notifications), 5-slot bottom tab with a center Upload action
+- Tabular-figure runtimes and play counts — respect for precise, professional metadata
+- Thumbnails never dimmed — only UI chrome recedes; the frame is sacred
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Vimeo Blue** (`#00ADEF`): The single interactive accent — primary CTA fill (Upload), player scrubber fill, active tab tint, Follow button, links.
+- **Vimeo Blue Legacy** (`#1AB7EA`): The heritage brand blue — still used in the wordmark and older marketing surfaces; acceptable as a gradient partner.
+- **Vimeo Blue Pressed** (`#008FC4`): Pressed/active state for blue fills.
+- **On-Blue Ink** (`#04121A`): Text/glyph color placed on a Vimeo Blue fill (near-black for maximum contrast — Vimeo Blue is bright).
+
+### Canvas & Surfaces (Dark — primary mode)
+- **Ink Canvas** (`#0D0E12`): The primary app background — a deep blue-black theatre.
+- **Surface 1** (`#16181F`): Cards, sheets, the elevated rows in feeds — exactly one step up.
+- **Surface 2** (`#1F222B`): Nested surfaces, scrubber demo backgrounds, pressed list rows.
+- **Divider** (`#262A34`): Hairline separators between sections and tab-bar top border.
+- **Scrim** (`rgba(8,21,29,0.85)`): Gradient scrim under the player controls for legibility over any frame.
+
+### Canvas & Surfaces (Light — secondary, rare)
+Vimeo is dark-first; a light mode exists primarily for embedded/web parity.
+
+| Role | Light Mode | Dark Mode |
+|------|-----------|-----------|
+| Canvas | `#FFFFFF` | `#0D0E12` |
+| Surface 1 | `#F5F6F8` | `#16181F` |
+| Surface 2 | `#ECEEF1` | `#1F222B` |
+| Divider | `#E2E5EA` | `#262A34` |
+| Text Primary | `#10131A` | `#FFFFFF` |
+| Text Secondary | `#5A6472` | `#AEB6C2` |
+
+### Text
+- **Text Primary** (`#FFFFFF`): Video titles, screen titles, creator names — pure white, highest emphasis.
+- **Text Secondary** (`#AEB6C2`): Body copy, descriptions, follower counts — a cool blue-gray.
+- **Text Tertiary** (`#6B7280`): Metadata, play counts, timestamps, inactive tab labels — quiet.
+- **Text on Blue** (`#04121A`): On Vimeo Blue fills.
+- **Text on Gold** (`#04121A`): On the Staff Pick gold badge.
+
+### Accent & Curation
+- **Staff Gold** (`#FFD24C`): The Staff Pick badge / star — the brand's iconic curation mark. Used ONLY for curated picks. Never a generic warning or highlight.
+- **Plus Purple** (`#8B5CF6`): Vimeo's premium/Plus tier and avatar gradient partner. Subscription upsell accents only.
+
+### Semantic
+- **Success** (`#2ECC71`): Upload-complete toast, "Saved" confirmation.
+- **Error** (`#FF4D4F`): Upload failure, destructive confirm, validation.
+- **Warning** (`#FFB020`): Encoding/processing notice (distinct from Staff Gold by being more amber).
+- **Live Red** (`#FF2D55`): "LIVE" badge on Vimeo livestreams.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Inter` (by Rasmus Andersson, 2020, SIL OFL) — a neutral humanist UI sans with excellent small-size hinting and tabular figures. Closest free Google Font to Vimeo's clean product type; bundle or load via Google Fonts.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Numerals**: Use tabular (monospaced) figures for all runtimes, timestamps, and play counts so the scrubber and metadata don't jitter.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Inter | 32pt | 800 | 1.15 | -0.6pt | Top-level tab name ("Watch") |
+| Screen Title | Inter | 26pt | 700 | 1.2 | -0.4pt | "Staff Picks", section landing |
+| Section Header | Inter | 22pt | 700 | 1.25 | -0.2pt | "From creators you follow" |
+| Video Title | Inter | 18pt | 700 | 1.3 | -0.2pt | Title under the player |
+| Video Title (Compact) | Inter | 17pt | 600 | 1.35 | -0.1pt | Card titles in the feed |
+| Body | Inter | 15pt | 500 | 1.5 | 0pt | Video descriptions |
+| Body (Reading) | Inter | 15pt | 400 | 1.6 | 0pt | Long descriptions, comments |
+| Metadata | Inter | 13pt | 400 | 1.4 | 0pt | Plays · date · counts |
+| Creator Name | Inter | 13pt | 600 | 1.4 | 0pt | Channel/creator label |
+| Button | Inter | 15pt | 700 | 1.0 | 0pt | Primary/secondary buttons |
+| Pill / Follow | Inter | 12pt | 700 | 1.0 | 0.1pt | Follow, chips |
+| Overline | Inter | 11pt | 600 | 1.0 | 0.6pt | "STAFF PICKS" uppercase rail label |
+| Runtime / Timecode | Inter | 10–11pt | 700 | 1.0 | 0pt | Tabular figures, on-scrim |
+| Tab Label | Inter | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
+
+### Principles
+- **Editorial calm, not UI shouting**: Titles top out at 18pt in context — the video is the headline, type supports it.
+- **Tabular figures everywhere numeric**: Runtimes, scrubber timecodes, play counts must not shift width.
+- **Weight, not size, for emphasis**: 600/700 carry hierarchy at small sizes; reserve 800 for the single Display.
+- **Metadata recedes**: 13pt `#6B7280` keeps "21K plays · 4 comments" present but never competing with the thumbnail.
+- **Dynamic Type**: Titles, body, descriptions scale; timecodes, tab labels, overlines, pill text stay fixed (layout-critical).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Upload / Confirm)**
+- Shape: Rounded rectangle, 8pt corner radius
+- Background: `#00ADEF` (Vimeo Blue)
+- Text: `#04121A` (near-black on bright blue), Inter 15pt weight 700
+- Padding: 13pt vertical, 26pt horizontal
+- Pressed: background `#008FC4` + scale 0.98
+- Disabled: `#00ADEF` at 38% opacity, text at 50%
+
+**Secondary / Outline Button (Save to Watch Later)**
+- Background: transparent
+- Border: 1pt `#AEB6C2`
+- Text: `#FFFFFF`, Inter 14pt weight 600
+- Padding: 11pt vertical, 20pt horizontal
+- Corner radius: 8pt
+- Pressed: background `rgba(255,255,255,0.06)`
+
+**Ghost / Surface Button (Share)**
+- Background: `#1F222B`
+- Border: 1pt `#262A34`
+- Text: `#FFFFFF`, Inter 14pt weight 600
+- Corner radius: 8pt
+- Pressed: background `#262A34`
+
+**Follow Pill**
+- Background: `#00ADEF`
+- Text: `#04121A`, Inter 12pt weight 700
+- Padding: 7pt vertical, 16pt horizontal
+- Corner radius: 999pt (full pill)
+- Following state: background `#1F222B`, text `#FFFFFF`, 1pt `#262A34` border, label "Following"
+
+**Text Button (See all staff picks)**
+- Text: `#00ADEF`, Inter 14pt weight 600
+- No background, no underline
+- Pressed: 70% opacity
+
+### Core Atoms
+
+**Video Player**
+- Aspect ratio: 16:9
+- Corner radius: 14pt (inset player) / 0pt (full-bleed/landscape)
+- Background while loading: linear gradient `#16384A → #08151D`
+- Center play: 52pt circle, `rgba(13,14,18,0.55)` + 4pt blur, 1.5pt `rgba(255,255,255,0.55)` border, white triangle glyph offset +3pt
+- Controls bar: 34pt tall, bottom-anchored, gradient scrim `rgba(8,21,29,0.85) → transparent`
+- Scrubber: see Distinctive Components
+- Quality chip: "HD" / "4K", 9pt weight 700 white, 1pt `rgba(255,255,255,0.5)` border, 3pt radius
+- Tap player: toggles controls (fade 200ms); double-tap edges: ±10s seek
+
+**Thumbnail**
+- Aspect ratio: 16:9
+- Corner radius: 8pt
+- Duration chip: bottom-right, `rgba(0,0,0,0.7)` bg, white 9pt weight 700 tabular, 3pt radius, 1pt/4pt padding
+- Staff Pick badge: top-left (see Distinctive Components)
+- Never dimmed, never overlaid with heavy gradients except the duration chip
+
+**Creator Avatar**
+- Circle, 34pt default (28pt in lists, 44pt on profile header)
+- Fallback: linear gradient `#00ADEF → #8B5CF6`
+- Optional 1.5pt ring `#262A34`
+
+**Card (Surface 1)**
+- Background: `#16181F`
+- Corner radius: 12pt
+- No border in dark mode; 1pt `#262A34` only if on same-color background
+- Internal padding: 12–14pt
+
+### Navigation
+
+**Top Bar**
+- Height: 44pt + safe area
+- Leading: Vimeo wordmark (`#FFFFFF`, ~96pt wide) — NOT centered, left-aligned
+- Trailing: search glyph + notifications bell, 21pt, `#FFFFFF`, 1.8pt stroke
+- Background: `#0D0E12` (transparent over player; solid on scroll)
+- No bottom border on Home; hairline `#262A34` when content scrolls under it
+
+**Bottom Tab Bar**
+- Height: 52pt + safe area (68pt total visual)
+- Background: `rgba(13,14,18,0.94)` + `saturate(180%) blur(20px)`
+- Top border: 0.5pt `#262A34`
+- 5 slots: Home, Search, **Upload (center, emphasized)**, Inbox, Profile
+- Icon size: 22pt (Upload center action 26pt, filled Vimeo Blue)
+- Active color: `#00ADEF` (icon fills); inactive: `#6B7280`
+- Labels: Inter 10pt weight 500, always shown (Upload label hidden/blank — icon-only emphasis)
+
+**Profile / Channel Header**
+- 44pt avatar, creator name 22pt weight 700, "Staff · 12.4K followers" 13pt `#6B7280`
+- Follow pill trailing
+- Tab strip below: "Videos", "Showcases", "Likes" — underlined 2pt `#00ADEF` active
+
+### Input Fields
+
+**Search Field**
+- Height: 44pt
+- Background: `#16181F`
+- Border: none (focus: 1pt `#00ADEF`)
+- Corner radius: 10pt
+- Leading magnifier 16pt `#6B7280`
+- Placeholder: "Search videos, people" Inter 14pt `#6B7280`
+
+**Comment Composer**
+- Background: `#16181F`, 12pt radius, 1pt `#262A34`
+- Text Inter 15pt `#FFFFFF`
+- Trailing send glyph `#00ADEF` when non-empty, `#6B7280` when empty
+
+### Distinctive Components
+
+**Cinematic Player Scrubber**
+- Track: 3–4pt tall, `rgba(255,255,255,0.22)` unfilled
+- Fill: `#00ADEF`, left-anchored, width = progress
+- Knob: 9–12pt white circle on the fill edge, soft shadow `0 1px 4px rgba(0,0,0,0.6)`
+- Timecodes flank the track: elapsed (left) / total (right), Inter 10–11pt weight 600/700, white, tabular
+- Scrubbing: knob enlarges to 16pt, a frame-preview thumbnail can float above the knob
+- Idle: entire control bar fades out after 3s; tap restores over 200ms
+
+**Staff Pick Badge**
+- Pill form (rail/card): gold `#FFD24C` background, `#04121A` star glyph + "Staff Pick" Inter 10pt weight 700, 3/8pt padding, 999pt radius
+- Mini form (thumbnail corner): 16pt gold circle with `#04121A` star glyph, top-left at 5pt inset
+- This badge is sacred to the brand — gold is used for nothing else
+
+**Staff Pick Card**
+- Surface 2 (`#1F222B`) container, 12pt radius, clipped
+- 16:9 thumbnail with the gold pill badge top-left
+- Body: title Inter 14pt weight 600 `#FFFFFF`, meta "by Studio · 37K plays" Inter 11pt `#6B7280`
+- Used in the curated rail and "Staff Picks" landing
+
+**Curated Watch Feed Row**
+- Horizontal layout: 124pt 16:9 thumbnail (left) + text block (right)
+- Thumbnail carries the mini gold badge + duration chip
+- Text: title 13pt weight 600, "by Creator" 11pt `#6B7280`, "21K plays · 4 comments" 11pt `#6B7280`
+- 14pt vertical gap between rows
+
+**Video Meta Block (under player)**
+- Title Inter 18pt weight 700, "48K plays · 2 days ago" 13pt `#AEB6C2`
+- Creator row: 34pt avatar + name (13pt weight 600) + "Staff · 12.4K followers" (11pt `#6B7280`) + Follow pill (trailing, pushed right)
+
+**Like / Comment / Share Action Row**
+- Icon + count, 21pt glyphs `#AEB6C2`, count Inter 13pt
+- Liked state: heart fills `#00ADEF`
+- Evenly spaced, no background
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 14, 16, 20, 24, 32, 40, 48, 64
+- Screen horizontal inset: 16pt
+- Player inset: 16pt (or 0pt full-bleed/landscape)
+- Feed row vertical gap: 14pt
+- Section header to content: 12pt
+
+### Grid & Container
+- iPhone: single column, 16pt insets, full-width player
+- Feed cards: full-width minus 16pt insets; thumbnail 16:9
+- iPad: 2-column grid for staff-pick browsing; player max-width 900pt centered; landscape goes full-bleed cinema
+- Profile grid: 2-up video thumbnails on phone, 3-up on iPad
+
+### Whitespace Philosophy
+- **The frame is the focus**: generous negative space around the player; chrome never crowds the video
+- **One accent, used sparingly**: Vimeo Blue appears only on interactive elements — never decoratively
+- **Gold is rationed**: Staff Gold appears only where curation is asserted, making it instantly meaningful
+- **Editorial rhythm**: metadata sits quietly beneath titles with consistent 13pt `#6B7280`, never bold
+
+### Border Radius Scale
+- Square (0pt): full-bleed/landscape player, dividers
+- Subtle (4pt): duration/quality chips, small tags
+- Standard (8pt): thumbnails, primary/secondary buttons
+- Card (12pt): cards, sheets, comment composer
+- Player (14pt): the inset video player
+- Comfortable (20pt): bottom sheets, modals
+- Pill (500pt): Follow, chips, Staff Pick badge
+- Circle (50%): avatars, the center play button
+
+## 6. Depth & Elevation
+
+Vimeo is cinematically flat. The screen is a dark theatre; the only real "depth" is the player's light against the ink, and translucent scrims that keep controls legible over any frame.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Feed rows, cards on ink, list content |
+| Player Glow (Level 1) | The video itself is the brightest element; no cast shadow | The 16:9 player against `#0D0E12` |
+| Control Scrim (Level 1.5) | Gradient `rgba(8,21,29,0.85) → transparent` | Behind player controls for legibility |
+| Floating (Level 2) | `rgba(0,0,0,0.5) 0 8px 24px` | Context menus, frame-preview popover, toasts |
+| Sheet (Level 3) | `rgba(0,0,0,0.6) 0 -6px 28px` + 20pt top radius | Share sheet, comment sheet, settings |
+| Modal Scrim | `rgba(0,0,0,0.6)` | Dim behind sheets/modals |
+
+**Shadow Philosophy**: In a near-black room, drop shadows barely register, so Vimeo uses *contrast and translucency* instead of elevation. Cards lift via a one-step lighter surface (`#16181F`), not a shadow. The player needs no shadow — it glows. Floating elements get a heavier `0.5–0.6` shadow plus a subtle `#262A34` hairline so they're distinguishable on dark.
+
+### Motion
+- **Controls fade**: player controls + scrubber fade out after 3s idle (250ms ease-out), fade in on tap (200ms)
+- **Scrub**: knob scales 9pt → 16pt over 120ms on touch-down; frame preview pops above with 150ms fade
+- **Tab switch**: cross-fade content 200ms; active tab icon tints to `#00ADEF` instantly (no morph)
+- **Follow**: pill label cross-fades "Follow" → "Following" 180ms; background color animates 200ms
+- **Sheet present**: bottom sheet slides up 300ms ease-out, scrim fades in parallel
+- **Like**: heart scales 1.0 → 1.25 → 1.0 over 260ms spring, fills `#00ADEF`
+- **Thumbnail load**: cross-fade from gradient placeholder to image over 220ms (never a hard pop)
+- **Pull to refresh**: a subtle Vimeo-blue spinner; haptic tick on trigger
+- **Haptics**: soft impact on Follow, on scrub-start, on Like; selection tick on tab change
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the near-black ink canvas (`#0D0E12`) — Vimeo is a screening room
+- Make the 16:9 player the hero — 14pt corners inset, full-bleed in landscape
+- Keep Vimeo Blue (`#00ADEF`) as the *only* interactive accent — scrubber, CTA, active tab, Follow
+- Reserve Staff Gold (`#FFD24C`) exclusively for the Staff Pick badge — it must stay meaningful
+- Attribute every video to a creator (avatar + name + follower count + Follow)
+- Use tabular figures for all runtimes, timecodes, and play counts
+- Let controls auto-fade during playback — the frame should be unobstructed
+- Lift cards with a one-step surface (`#16181F`), not a drop shadow
+- Keep metadata quiet — 13pt `#6B7280`, never bold, never colored
+- Use Inter at editorial sizes — 17–18pt titles, generous line height
+
+### Don't
+- Don't use pure black (`#000000`) for the canvas — `#0D0E12` is the warm blue-black theatre
+- Don't add a second brand accent — there is only Vimeo Blue (no orange, no green CTA)
+- Don't reuse Staff Gold for warnings, highlights, or decoration — it means "curated", nothing else
+- Don't dim or heavily gradient thumbnails — only the duration chip overlays the frame
+- Don't shout with type — titles never exceed 18pt in context; the video is the headline
+- Don't use heavy drop shadows on dark — they don't read; use surface lift + hairline
+- Don't autoplay aggressively or stack autoplay walls — Vimeo respects the viewer
+- Don't center the wordmark — it's left-aligned in the top bar
+- Don't bold metadata or tint it blue — it stays `#6B7280`, subordinate to thumbnails
+- Don't crowd the player — generous negative space; chrome never hugs the frame
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Player 16pt inset; feed thumbnail 110pt; tighter 13pt titles |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; player respects top inset |
+| iPhone 15/16 Pro Max | 430pt | Larger thumbnails; player can go 18pt inset; 124pt feed thumbs |
+| iPad (portrait) | 768pt | 2-column staff-pick grid; player max-width 760pt centered |
+| iPad (landscape) | 1024pt+ | Cinema mode: full-bleed player; 3-column discovery grid alongside |
+
+### Dynamic Type
+- Scales: screen titles, video titles, body, descriptions, comments
+- Fixed: timecodes, tab labels, overlines, duration/quality chips, pill text (layout-critical)
+- Long titles wrap to 2 lines then truncate with ellipsis
+
+### Orientation
+- Portrait: inset 14pt-corner player + scrolling feed below
+- Landscape: player goes full-bleed edge-to-edge cinema, controls overlay only; rotating mid-playback animates 300ms
+- iPad supports Split View; player continues in PiP when navigating away
+
+### Touch Targets
+- Player center play: 52pt visual, 64pt hit
+- Scrubber knob: 12pt visual, 44pt vertical hit band
+- Tab bar items: 22pt glyph, 48pt hit
+- Follow pill: 32pt tall minimum
+- Like/Comment/Share: 44pt hit each
+
+### Safe Area Handling
+- Top: top bar + Dynamic Island respected; player can extend under status bar in landscape with safe-area-aware controls
+- Bottom: tab bar + home indicator respected; sheets respect bottom inset
+- Sides: 16pt content inset; full-bleed player ignores side insets in landscape with inset controls
+- Keyboard: comment composer rises above keyboard; feed scrolls clear
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (dark): `#0D0E12`
+- Surface 1: `#16181F`
+- Surface 2: `#1F222B`
+- Divider: `#262A34`
+- Text primary: `#FFFFFF`
+- Text secondary: `#AEB6C2`
+- Text tertiary / metadata: `#6B7280`
+- Vimeo Blue (accent): `#00ADEF`
+- Vimeo Blue legacy: `#1AB7EA`
+- Vimeo Blue pressed: `#008FC4`
+- On-blue ink: `#04121A`
+- Staff Gold (curation only): `#FFD24C`
+- Plus Purple: `#8B5CF6`
+- Success: `#2ECC71` · Error: `#FF4D4F` · Live: `#FF2D55`
+
+### Example Component Prompts
+- "Build the Vimeo video player in SwiftUI: 16:9 aspect, 14pt corner radius, gradient placeholder `#16384A → #08151D` while loading. Centered 52pt play button: `rgba(13,14,18,0.55)` fill with 4pt blur, 1.5pt `rgba(255,255,255,0.55)` border, white play triangle offset x+3pt. Bottom controls bar 34pt tall with gradient scrim `rgba(8,21,29,0.85) → transparent`: elapsed timecode (Inter 11pt weight 700, white, tabular), a scrubber track (3pt, `rgba(255,255,255,0.22)` with `#00ADEF` fill and a 9pt white knob with `0 1px 4px rgba(0,0,0,0.6)` shadow on the fill edge), total timecode, and an 'HD' chip (9pt weight 700 white, 1pt `rgba(255,255,255,0.5)` border, 3pt radius). Controls fade out after 3s idle (250ms), fade in on tap (200ms)."
+
+- "Create the Vimeo Staff Pick badge: a pill with `#FFD24C` background, a `#04121A` star glyph + 'Staff Pick' label in Inter 10pt weight 700, 3pt vertical / 8pt horizontal padding, 999pt corner radius. Provide a mini variant: a 16pt `#FFD24C` circle containing only the `#04121A` star, positioned top-left at 5pt inset on a 16:9 thumbnail."
+
+- "Build a Vimeo curated watch-feed row: horizontal layout on `#0D0E12`. Left: a 124pt-wide 16:9 thumbnail, 8pt corners, with the mini gold Staff Pick circle top-left and a duration chip bottom-right (`rgba(0,0,0,0.7)` bg, white Inter 9pt weight 700 tabular, 3pt radius). Right: title in Inter 13pt weight 600 `#FFFFFF`, 'by Creator' in Inter 11pt `#6B7280`, and '21K plays · 4 comments' in Inter 11pt `#6B7280`. 14pt vertical gap between rows."
+
+- "Create the Vimeo video meta block under the player: title in Inter 18pt weight 700 `#FFFFFF`, '48K plays · 2 days ago' in Inter 13pt `#AEB6C2`, then a creator row — 34pt circular avatar (gradient `#00ADEF → #8B5CF6` fallback), name in Inter 13pt weight 600 `#FFFFFF`, 'Staff · 12.4K followers' in Inter 11pt `#6B7280`, and a trailing Follow pill (`#00ADEF` bg, `#04121A` Inter 12pt weight 700 text, 7/16pt padding, 999pt radius) pushed to the right edge."
+
+- "Build the Vimeo bottom tab bar: 52pt + safe area, background `rgba(13,14,18,0.94)` with `saturate(180%) blur(20px)`, 0.5pt `#262A34` top border. Five slots: Home, Search, Upload (center, emphasized — a 26pt filled `#00ADEF` play-in-circle, no label), Inbox, Profile. Inactive icons 22pt `#6B7280`; active icon fills `#00ADEF`. Labels Inter 10pt weight 500."
+
+- "Create the Vimeo primary button: `#00ADEF` background, `#04121A` text in Inter 15pt weight 700, 13pt vertical / 26pt horizontal padding, 8pt corner radius. Pressed: background `#008FC4` + scale 0.98. Disabled: 38% opacity."
+
+### Iteration Guide
+1. Canvas is near-black ink `#0D0E12` — NOT pure black, NOT charcoal gray; it's a blue-black theatre
+2. There is exactly ONE accent: Vimeo Blue `#00ADEF` (`#1AB7EA` legacy) — scrubber, CTA, active tab, Follow; nothing else is blue
+3. Staff Gold `#FFD24C` is reserved for the Staff Pick badge ONLY — never a warning, never decoration
+4. The 16:9 player is the hero — 14pt corners inset, full-bleed in landscape, translucent center play, auto-fading scrubber
+5. Every video is creator-attributed: avatar + name + follower count + Follow pill
+6. Use tabular figures for all runtimes, timecodes, and play counts so nothing jitters
+7. Cards lift one step to `#16181F` — no drop shadows on dark; use surface + `#262A34` hairline
+8. Type is editorial and quiet — Inter, titles 17–18pt, metadata 13pt `#6B7280`, never shouty
+9. Thumbnails are sacred — never dimmed; only the duration chip overlays the frame
+10. Chrome recedes — minimal left-aligned wordmark top bar, controls fade during playback