designmd-forge 1.2.0

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

@@ -0,0 +1,412 @@
+# Design System Inspiration of VSCO (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+VSCO's iOS app is a darkroom, not an app. The entire editing experience lives on a pure-black canvas (`#000000` — true black, not a charcoal) because VSCO's core belief is that the photograph is the only thing that should carry color. Open an image into the editor and you see exactly three things: the photo (full-bleed, centered, breathing with generous black margin), a hairline-thin adjustment slider, and a horizontally-scrolling carousel of film-emulation presets at the bottom. There are no cards, no shadows, no rounded panels, no tint. The chrome is a monochrome white-on-black skin so quiet that the eye never leaves the image.
+
+The signature interface moment is the **filter/preset carousel** — a row of 56pt square thumbnails, each a tiny live preview of the photo under that film recipe (A6, C1, M5, AV4, KP9 — VSCO's famously cryptic two-character preset codes), with the active preset marked by a 2px solid-white ring (never a colored highlight). Tapping a preset cross-fades the photo into the graded look in ~250ms. The second signature is the **adjust tool tray** — a row of uppercase, wide-tracked tool labels (EXPOSURE, CONTRAST, SATURATION, GRAIN, SHARPEN, HSL…) that swap the carousel for a single **bipolar hairline slider**: a 1px track on `#3A3A3A`, a white fill from the zero-point, and an 18pt solid-white knob. The numeric value (`+2.4`, `−1.8`) sits above the slider in white. This slider is the most VSCO thing in the product — it is almost invisible, and that is the point.
+
+The color system is radically restrained: black, white, and a 3-step gray ramp for dividers, tracks, and secondary text. There is no brand accent color — no "Spotify Green", no "Airbnb Coral". Selection, focus, and active states are all communicated through pure white (a ring, a fill, a label going from `#B3B3B3` to `#FFFFFF`). The only color that ever appears in the UI is incidental: the photograph itself, and the film-tinted preset thumbnails (warm ambers `#C8A86B`, cool steel `#7E8FA1`) which are previews of *content*, not chrome.
+
+Typography is **Inter** (VSCO's brand face is the proprietary "VSCO Gothic"; Inter is the closest free Google substitute — a neutral grotesque). The signature typographic move is **uppercase labels with very wide letter-spacing** (`+1.6` for tool labels, `+1.0` for preset tags) — it reads like a film-stock data-back imprint or a darkroom enlarger dial. Editorial titles (the Discover and Studio screens) use sentence-case Inter at 24–32pt, weights 600–700, but the *editing chrome* is exclusively uppercase tracked caps. The type system is the only expressive flourish in an otherwise invisible UI.
+
+**Key Characteristics:**
+- Pure black canvas (`#000000`) — the editor is dark-native, there is NO light editing theme
+- Monochrome UI — white, three grays, zero accent color; the photo is the only color
+- Hairline bipolar sliders — 1px track `#3A3A3A`, white fill from zero, 18pt white knob
+- Film-preset carousel — 56pt square live-preview thumbnails, 2px white ring on active
+- Adjust tool tray — uppercase wide-tracked labels swap to the single slider
+- Selection = white only — a 2px ring or a fill change, never a tint
+- Uppercase wide-tracked Inter labels (`+1.6` tracking) — film-stock imprint feel
+- No chrome — no cards, no shadows, no borders on the editing surface
+- Studio = full-bleed photo grid — a tight gapless monochrome thumbnail grid
+- Discover = editorial sentence-case feed, the only "designed" screen
+- 2px corner radius everywhere — squares, not pills; film frames, not bubbles
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **VSCO White** (`#FFFFFF`): The single interactive color — primary buttons, active labels, slider fill + knob, selection ring, "Next" action.
+- **VSCO White Pressed** (`#DBDBDB`): Pressed state on the white primary button.
+- **VSCO Black** (`#000000`): The canvas and the text-on-white color. Not a surface — the absence of one.
+
+There is intentionally **no accent / brand-tint color**. VSCO communicates state with white alone.
+
+### Canvas & Surfaces (Dark — the only mode for the editor)
+- **VSCO Black** (`#000000`): Primary canvas — the editor stage, the photo margin, the tab bar.
+- **Surface 1** (`#0E0E0E`): Feed / Studio / Discover screen background — a near-black lift.
+- **Surface 2** (`#1A1A1A`): Sheets, menus, settings rows, contextual panels.
+- **Surface 3** (`#242424`): Pressed rows, segmented-control selected fill, chips.
+- **Divider** (`#2A2A2A`): Hairline separators between tool tray and stage, list rows.
+- **Slider Track** (`#3A3A3A`): The unfilled portion of every adjustment slider.
+
+### Light Mode (Studio / Discover browsing only)
+VSCO offers a light theme for the *browsing* surfaces only (Studio grid, Discover feed, profile) — the editor never goes light. It is rarely used and deliberately plain.
+
+| Role | Light Mode | Dark Mode |
+|------|-----------|-----------|
+| Canvas | `#FFFFFF` | `#000000` |
+| Surface 1 | `#F2F2F2` | `#0E0E0E` |
+| Surface 2 | `#E8E8E8` | `#1A1A1A` |
+| Divider | `#DCDCDC` | `#2A2A2A` |
+| Text Primary | `#000000` | `#FFFFFF` |
+| Text Secondary | `#767676` | `#B3B3B3` |
+
+### Text
+- **Text Primary Dark** (`#FFFFFF`): Active labels, values, titles, body on black.
+- **Text Secondary Dark** (`#B3B3B3`): Inactive tool labels, metadata, captions.
+- **Text Tertiary Dark** (`#767676`): Disabled, EXIF detail, inactive tab icons.
+- **Text Primary Light** (`#000000`): Body on the light browsing surfaces.
+- **Text Secondary Light** (`#767676`): Metadata on light.
+
+### Incidental Film Tones (content previews — not chrome)
+These appear only inside preset thumbnails as a *preview of the graded photo*. Never use them as UI fills.
+
+| Role | Color | Where |
+|------|-------|-------|
+| Film Warm (amber) | `#C8A86B` | Warm film presets (C-series, KP) thumbnail tint |
+| Film Cool (steel) | `#7E8FA1` | Cool film presets (M-series, AV) thumbnail tint |
+| Film Neutral | `#9A9388` | Neutral/desaturated preset thumbnail tint |
+| Film Shadow | `#3F382C` | Shadow region of a warm-graded preview |
+
+### Semantic
+- **Destructive Red** (`#E5484D`): Delete photo confirmation, "Discard edits" — the ONLY non-monochrome UI color, used sparingly in destructive sheets only.
+- **Success** (`#FFFFFF`): "Saved to Camera Roll" toast — communicated in white, not green.
+- **Disabled**: text drops to `#767676`, controls to 38% opacity.
+
+## 3. Typography Rules
+
+### Font Family
+- **Brand Face**: `VSCO Gothic` (proprietary, a neutral humanist grotesque) — not publicly licensed.
+- **Recommended Substitute**: `Inter` (by Rasmus Andersson, SIL OFL) — neutral grotesque, excellent at small UI sizes and wide tracking.
+- **Editorial Alternate** (Discover headlines, optional): `Inter` at 700 — VSCO occasionally sets editorial titles in a tighter display cut; Inter Bold covers it.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Monospace** (EXIF / values, optional): `SF Mono` — used only for technical capture metadata when shown.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Case | Notes |
+|------|------|------|--------|-------------|----------------|------|-------|
+| Display | Inter | 32pt | 700 | 1.15 | -0.4pt | Sentence | "Studio", profile name hero |
+| Title | Inter | 24pt | 600 | 1.2 | -0.2pt | Sentence | Discover section, screen title |
+| Section | Inter | 19pt | 600 | 1.3 | -0.1pt | Sentence | "Recipes", "Recents" |
+| Body | Inter | 16pt | 400 | 1.5 | 0pt | Sentence | Editorial body, descriptions |
+| Label | Inter | 14pt | 500 | 1.4 | 0pt | Sentence | Row labels, "Edited 2h ago" |
+| Caption | Inter | 13pt | 400 | 1.4 | 0pt | Sentence | EXIF, file metadata |
+| Value (live) | Inter | 14pt | 600 | 1.0 | 0pt | Numeric | `+2.4` slider value, white |
+| Tool Label | Inter | 12pt | 600 | 1.0 | +1.6pt | UPPERCASE | EXPOSURE, CONTRAST, GRAIN |
+| Preset Tag | Inter | 11pt | 600 | 1.0 | +1.0pt | UPPERCASE | A6, C1, M5 preset codes |
+| Nav Action | Inter | 13pt | 600 | 1.0 | +1.4pt | UPPERCASE | NEXT, SAVE, CANCEL |
+| Top Title | Inter | 13pt | 500 | 1.0 | +1.4pt | UPPERCASE | EDIT (editor title bar) |
+| Tab Label | Inter | 10pt | 600 | 1.0 | +0.6pt | UPPERCASE | Bottom tab (when shown) |
+| Button | Inter | 12pt | 600 | 1.0 | +1.4pt | UPPERCASE | Primary / outline buttons |
+
+### Principles
+- **Two registers only**: sentence-case editorial (titles/body, weight 400–700) for *content* screens; UPPERCASE wide-tracked (weight 600) for *editor chrome*. Never mix within one zone.
+- **Wide tracking is the signature**: tool labels at `+1.6`, preset codes at `+1.0`, nav actions at `+1.4` — this film-data-back imprint is VSCO's strongest type identity.
+- **Weight stays at 400 / 500 / 600 / 700**: no thin, no black. Editorial body is 400; all chrome is 600.
+- **Values are white, labels are gray**: the live numeric value (`+2.4`) is always `#FFFFFF`; its label is `#B3B3B3` until active.
+- **Dynamic Type on content, fixed on chrome**: editorial titles/body scale; tool labels, preset codes, slider values, tab labels stay fixed (layout-critical, single-line).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button ("Next" / "Save Recipe" / "Post")**
+- Shape: Rectangle, 2pt corner radius (film-frame square, NOT pill)
+- Background: `#FFFFFF` / text `#000000`
+- Padding: 14pt vertical, 28pt horizontal
+- Font: Inter 12pt weight 600, UPPERCASE, `+1.4` tracking
+- Pressed: background `#DBDBDB` + scale 0.98
+- Often rendered as a top-bar text action ("NEXT") rather than a filled button — same type spec, no fill
+
+**Outline / Secondary Button ("Save Recipe", "Edit")**
+- Background: transparent
+- Text: `#FFFFFF`
+- Border: 1pt `#FFFFFF`
+- Padding: 13pt vertical, 26pt horizontal
+- Corner radius: 2pt
+- Pressed: background `#FFFFFF` 12% overlay
+
+**Ghost / Cancel Button**
+- Background: transparent
+- Text: `#B3B3B3` (secondary)
+- No border, no fill
+- Padding: 13pt vertical, 16pt horizontal
+- Pressed: text → `#FFFFFF`
+
+**Text Action ("Reset all", "Show original")**
+- Font: Inter 12pt weight 600, UPPERCASE, `+1.4` tracking
+- Color: `#FFFFFF`
+- No underline, no fill
+- Pressed: 60% opacity
+
+**Icon Button (tool-tray, top bar × / ✓)**
+- Glyph: 22pt stroke icon, `stroke-width` 1.6
+- Hit area: 44pt
+- Default: `#B3B3B3`; active: `#FFFFFF`
+- No background, no ring — color change only
+
+### Adjust Slider (the core atom)
+
+The single most important component. A bipolar hairline.
+- **Track**: full-width, 1pt tall, `#3A3A3A`
+- **Fill**: from the zero-point (often center) to the knob, 1pt tall, `#FFFFFF`
+- **Knob**: 18pt circle, solid `#FFFFFF`, shadow `rgba(0,0,0,0.6) 0 1px 4px`, hit area 44pt
+- **Label row** (above slider): tool name UPPERCASE 12pt `+1.6` `#B3B3B3` (left), live value 14pt w600 `#FFFFFF` (right)
+- **Zero detent**: a subtle haptic + the fill collapsing to 0 when the knob crosses the neutral value
+- **Double-tap**: resets to default (value animates back, soft haptic)
+- No tint, no gradient, no shadow on the track — just two hairlines
+
+### Film-Preset Carousel (the signature)
+
+A horizontal scroll of live-preview tiles.
+- **Tile**: 56pt square, 2pt corner radius, the actual photo rendered under that preset's grade
+- **Spacing**: 14pt between tiles
+- **Label**: preset code below tile, UPPERCASE 11pt w600 `+1.0` `#B3B3B3`
+- **Active state**: 2pt solid `#FFFFFF` ring around the tile + label → `#FFFFFF`. NEVER a colored highlight.
+- **Strength sub-slider**: tapping an already-active preset reveals a hairline slider (same spec as Adjust) to dial preset intensity 0–12
+- **Scroll**: free, momentum, no snapping; ~80pt left/right peek
+
+### Tool Tray
+
+The mode switcher under the stage.
+- **Row**: horizontal scroll, 84pt tall, `border-top` 0.5pt `#2A2A2A`
+- **Tool**: 22pt stroke glyph + UPPERCASE 12pt `+1.6` label, stacked, 8pt gap
+- **Default**: `#B3B3B3`; active: `#FFFFFF` (glyph + label both)
+- **Spacing**: 30pt between tools
+- Selecting a tool replaces the preset carousel with that tool's slider (or sub-UI: Crop grid, HSL wheel)
+
+### Navigation
+
+**Editor Top Bar**
+- Height: 52pt + safe area
+- Leading: `×` close glyph, 22pt, weight 300, `#FFFFFF`
+- Center: screen title "EDIT" — UPPERCASE 13pt w500 `+1.4` `#B3B3B3`
+- Trailing: "NEXT" action — UPPERCASE 13pt w600 `+1.4` `#FFFFFF`
+- Background: `#000000`, no border
+
+**Bottom Tab Bar** (Studio / Feed / Discover / Profile)
+- Height: 48pt + safe area
+- Background: `#000000`, `border-top` 0.5pt `#2A2A2A`
+- 4 tabs: Studio (grid), Feed (up-arrow / for-you), Discover (camera/explore), Profile (avatar)
+- Icon: 23pt stroke; active = filled `#FFFFFF`, inactive = stroke `#767676`
+- Labels usually hidden (icon-only); if shown, UPPERCASE 10pt w600 `+0.6`
+- No tint pill — active is white fill only
+
+**Studio Top Bar**
+- Height: 44pt + safe area
+- Leading: title "Studio" Inter 24pt w600 sentence-case `#FFFFFF`
+- Trailing: select-mode, import, settings — 22pt stroke icons `#FFFFFF`
+
+### Input Fields
+
+**Search (Discover / People)**
+- Height: 40pt
+- Background: `#1A1A1A`
+- Border: none
+- Corner radius: 2pt
+- Leading icon: magnifier 16pt `#767676`
+- Placeholder: "Search" Inter 14pt w400 `#767676`
+- Text: `#FFFFFF`
+- Focus: 1pt `#FFFFFF` bottom hairline (no full border, no glow)
+
+**Caption / Bio Text Area**
+- Background: transparent on `#000000`
+- Text: Inter 16pt w400 `#FFFFFF`
+- Placeholder: `#767676`
+- Character count: bottom-right, Inter 12pt `#767676`
+- No box, no border — bare text on black
+
+### Distinctive Components
+
+**Hairline Bipolar Slider**
+- See Adjust Slider above — the defining VSCO control. Used for every numeric adjustment and for preset strength.
+
+**Film-Preset Tile**
+- A live-rendered photo preview, 56pt², 2pt radius, 2px white ring when active. The carousel of these IS VSCO's identity.
+
+**Recipe Pill**
+- A saved set of adjustments. Shown as a 2pt-radius `#1A1A1A` tile with a tiny preview swatch + recipe number. Tap to apply all, long-press to manage.
+
+**HSL Color Wheel**
+- A circular hue selector with 8 color stops; selecting a hue reveals 3 hairline sliders (Hue / Saturation / Lightness). Wheel is the only "round" component; the stops are the only saturated UI color, and only because they ARE color-pickers.
+
+**Crop / Straighten Grid**
+- A rule-of-thirds overlay on the photo: 0.5pt `rgba(255,255,255,0.4)` grid lines, draggable corner handles (white 1pt squares), a hairline rotation dial below with degree value in white.
+
+**Before/After Press**
+- Press-and-hold the photo to reveal the original (un-graded) image; release returns to edited. No UI — just the image swapping, optional "ORIGINAL" caption top-left UPPERCASE 11pt `+1.0`.
+
+**Studio Grid**
+- A gapless (1px hairline) grid of square photo thumbnails on `#0E0E0E`. No rounding, no shadow, no labels — pure contact-sheet. Multi-select adds a 2px white inset border + white check.
+
+**Montage / Collage Canvas**
+- A black artboard where photo/video/shape layers compose; layer handles are 1pt white squares; the toolbar is the same UPPERCASE tracked label row.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 14, 16, 20, 24, 28, 32, 40, 48
+- Photo stage margin: 20pt horizontal, generous black breathing room
+- Tool tray inter-item: 30pt
+- Preset tile gap: 14pt
+- Slider label → track: 10–12pt
+
+### Grid & Container
+- iPhone: editor stage is full-width minus 20pt; photo letterboxed to fit, centered
+- Studio grid: 3-up (small), 4-up (large phones), gapless 1px hairline gutters
+- Discover feed: single-column full-bleed editorial cards or 2-up image grid
+- iPad: editor stage centered max ~900pt; tray + carousel pinned bottom; Studio grid up to 6-up
+- Black margin around the photo is itself a layout element — never crop the breathing room away
+
+### Whitespace Philosophy
+- **The photo is sacred**: maximum black margin, photo always fully visible, never clipped by chrome
+- **Chrome is a thin band**: controls live in a ≤140pt bottom band; the rest is black + image
+- **No containers**: zero cards, panels, or grouped boxes on the editing surface — elements float on black
+- **Contact-sheet density**: the Studio grid is intentionally gapless and dense — it reads like film negatives on a light table
+
+### Border Radius Scale
+- Square (0pt): Studio grid thumbnails, crop grid, full-bleed feed images
+- Film frame (2pt): Preset tiles, buttons, recipe pills, search field — the default radius
+- Subtle (4pt): Sheets, contextual menus
+- Comfortable (8pt): Bottom sheets, modals
+- Soft (12pt): Onboarding cards (rare)
+- Pill (500pt): Almost never — only the membership/upsell "Try VSCO" CTA
+- Circle (50%): Avatars, slider knob, HSL wheel
+
+## 6. Depth & Elevation
+
+VSCO is flatter than flat — it is *negative* depth, everything sits directly on black.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Stage (Level 0) | No shadow, no border | Photo, sliders, carousel, tool tray — everything on `#000000` |
+| Knob (Level 0.5) | `rgba(0,0,0,0.6) 0 1px 4px` | The ONLY content shadow — under the white slider knob so it reads on a bright photo |
+| Sheet (Level 1) | Slide-up `#1A1A1A` panel, no shadow, 4pt top radius | Export options, recipe manager, settings |
+| Menu (Level 2) | `#1A1A1A`, 4pt radius, `rgba(0,0,0,0.5) 0 8px 24px` | Context menus, share sheet |
+| Modal Scrim | `rgba(0,0,0,0.6)` | Behind sheets/modals |
+
+**Shadow Philosophy**: VSCO uses essentially no shadow. The single exception is the slider knob, which gets a soft `0 1px 4px` so the white circle stays visible when it travels over a bright area of the photograph. Sheets and menus rely on a lighter `#1A1A1A` surface against pure black for separation, not on elevation shadow. On the (rare) light browsing theme, the same logic inverts — hairline `#DCDCDC` dividers do the separating, not shadows.
+
+### Motion
+- **Preset apply (cross-fade)**: photo cross-dissolves from current grade to new grade over 250ms ease-in-out; preset ring snaps instantly
+- **Slider drag**: 1:1 finger tracking at 60fps; value text updates live; zero-detent gives a soft haptic tick as the knob crosses neutral
+- **Slider double-tap reset**: value + knob spring back to default over 200ms ease-out + soft haptic
+- **Tool switch**: carousel slides out / slider fades in over 180ms ease-out (horizontal 8pt offset)
+- **Before/after press**: instant swap on press-down, instant return on release — no transition (the point is immediacy)
+- **Tab switch**: cross-fade 200ms, no slide
+- **Sheet present**: slide up 300ms ease-out, scrim fades in parallel
+- **Studio multi-select**: white inset border + check scale-in 150ms ease-out per tile
+- **Grain/film toggle**: applies live with a 200ms ease as the texture composites in
+- **Haptics**: soft impact on zero-detent crossing, preset selection, double-tap reset, multi-select toggle
+- **Reduce Motion**: cross-fades become instant cuts; slider reset jumps; tool switch is a plain crossfade
+
+## 7. Do's and Don'ts
+
+### Do
+- Use pure black (`#000000`) for the editor — true black, dark-native, no light editing theme
+- Keep the UI monochrome — white + three grays; the photograph is the only color
+- Make sliders 1px hairlines on `#3A3A3A` with a solid white 18pt knob
+- Communicate selection with a 2px white ring or a fill change — never a tint
+- Set tool labels and preset codes in UPPERCASE Inter with wide tracking (`+1.6` / `+1.0`)
+- Give the photo maximum black breathing room — never clip it with chrome
+- Use 2pt corner radius as the default (film-frame square), 0pt for the Studio grid
+- Render preset tiles as live previews of the actual photo under that grade
+- Keep the live value text white and the label gray until active
+- Make the Studio grid gapless and dense — a contact sheet of negatives
+- Use the slider knob's `0 1px 4px` shadow — the only content shadow in the app
+
+### Don't
+- Don't introduce a brand accent color — VSCO has no "Spotify Green"; state is white
+- Don't use a charcoal "dark mode" (`#191919` etc.) for the editor — it is true `#000000`
+- Don't use rounded pills for buttons — buttons are 2pt-radius rectangles
+- Don't add cards, panels, borders, or shadows to the editing surface — everything floats on black
+- Don't tint sliders, knobs, or rings — they are white, always
+- Don't sentence-case tool labels or preset codes — they are UPPERCASE wide-tracked
+- Don't put gaps or rounding in the Studio grid — it is a gapless 1px-gutter contact sheet
+- Don't animate aggressively — motion is a quiet 180–300ms cross-fade vocabulary
+- Don't show a colored "active" highlight on presets — it's a 2px white ring only
+- Don't crowd the photo — the black margin is a designed element, protect it
+- Don't use color anywhere in chrome except the destructive red (`#E5484D`) in delete sheets
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Studio grid 3-up; tool tray scrolls; photo letterboxed tighter |
+| iPhone 13/14/15 | 390pt | Standard layout; 4-up Studio grid |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clears the editor top bar |
+| iPhone 15/16 Pro Max | 430pt | Larger photo stage; 4-up grid with slightly bigger tiles |
+| iPad (portrait) | 768pt | Photo stage centered max ~760pt; Studio grid 5-up; tray pinned bottom |
+| iPad (landscape) | 1024pt+ | Photo centered max ~900pt; tray + carousel as a bottom rail; Studio 6-up |
+
+### Dynamic Type
+- Editorial titles, section headers, body, captions: full scale
+- Tool labels, preset codes, slider values, nav actions, tab labels: FIXED (single-line, layout-critical)
+- Slider value never wraps — it is a fixed-width numeric
+
+### Orientation
+- Editor supports rotation; photo re-letterboxes to fit, tray + carousel stay bottom-pinned
+- Studio grid reflows column count by width
+- Crop/straighten tool fully orientation-aware
+
+### Touch Targets
+- Slider knob: 18pt glyph, 44pt hit
+- Tool-tray item: 22pt glyph, 44pt hit
+- Preset tile: 56pt (tap target is the full tile)
+- Tab bar icon: 23pt glyph, 44pt hit
+- Top-bar action: 13pt text, 44pt hit
+- Studio thumbnail: full tile is the target; multi-select via long-press then tap
+
+### Safe Area Handling
+- Top: editor top bar respects safe area + Dynamic Island
+- Bottom: tool tray + tab bar respect the home indicator
+- The photo stage shrinks to fit between safe areas — it is never occluded
+- Sides: 20pt photo margin honors the safe area on notched devices
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (editor): `#000000` (true black — no light editing theme)
+- Surface 1 (Studio/Feed bg): `#0E0E0E`
+- Surface 2 (sheets/menus): `#1A1A1A`
+- Surface 3 (pressed/chips): `#242424`
+- Divider: `#2A2A2A`
+- Slider track: `#3A3A3A`
+- Primary / interactive: `#FFFFFF`
+- Primary pressed: `#DBDBDB`
+- Text primary: `#FFFFFF` (dark) / `#000000` (light browse)
+- Text secondary: `#B3B3B3` (dark) / `#767676` (light)
+- Text tertiary: `#767676`
+- Destructive (delete sheets only): `#E5484D`
+- Film tint (warm preset preview, content): `#C8A86B`
+- Film tint (cool preset preview, content): `#7E8FA1`
+- Accent color: NONE — selection is white
+
+### Example Component Prompts
+- "Build the VSCO photo editor screen in SwiftUI: pure black (`#000000`) background. Top bar 52pt: leading `×` (SF Symbol `xmark`, 22pt, `#FFFFFF`), center title 'EDIT' (Inter 13pt weight 500, UPPERCASE, `+1.4` tracking, `#B3B3B3`), trailing 'NEXT' (Inter 13pt weight 600, UPPERCASE, `+1.4`, `#FFFFFF`). Center: the photo, aspect-fit, full-width minus 20pt, 2pt corner radius, centered with generous black margin. Below: a film-preset carousel of 56pt square tiles (live preview of the photo under each grade), 14pt gap, active tile has a 2pt `#FFFFFF` ring and its UPPERCASE 11pt `+1.0` code label turns `#FFFFFF`. Bottom: an 84pt tool tray with `border-top` 0.5pt `#2A2A2A`, UPPERCASE 12pt `+1.6` `#B3B3B3` tool labels with 22pt stroke glyphs, active = `#FFFFFF`."
+
+- "Create the VSCO adjust hairline slider: a row with the tool name on the left (Inter 12pt weight 600, UPPERCASE, `+1.6` tracking, `#B3B3B3`) and the live value on the right (Inter 14pt weight 600, `#FFFFFF`, e.g. `+2.4`). Below, a 1pt track in `#3A3A3A` full-width; a 1pt `#FFFFFF` fill from the center zero-point to the knob; an 18pt solid `#FFFFFF` circular knob with shadow `rgba(0,0,0,0.6) 0 1px 4px` and a 44pt hit area. 1:1 finger tracking, a soft haptic when the knob crosses the neutral value, double-tap resets to default over 200ms ease-out."
+
+- "Render the VSCO film-preset tile: 56pt square, 2pt corner radius, fill = the actual photo rendered under that preset's grade. Below it, the preset code in Inter 11pt weight 600 UPPERCASE `+1.0` tracking `#B3B3B3`. Selected state: a 2pt solid `#FFFFFF` ring around the tile and the label turns `#FFFFFF` — never a colored highlight. Tapping an already-selected tile reveals a strength hairline slider (same spec as the adjust slider) below the carousel."
+
+- "Build the VSCO Studio grid: a gapless grid of square photo thumbnails (4 columns on a 390pt phone) with 1px hairline gutters in `#2A2A2A` on a `#0E0E0E` background. No corner radius, no shadow, no labels — a contact sheet. Multi-select: long-press a tile to enter select mode, then tap to add a 2px `#FFFFFF` inset border + a small `#FFFFFF` checkmark; selected count shows in the top bar."
+
+- "Create the VSCO tool tray: a horizontally-scrolling 84pt row, `border-top` 0.5pt `#2A2A2A`, on `#000000`. Each tool is a 22pt stroke glyph (stroke-width 1.6) above an UPPERCASE Inter 12pt weight 600 `+1.6` tracking label, stacked with 8pt gap, 30pt between tools. Inactive `#B3B3B3`, active `#FFFFFF` (glyph + label). Selecting a tool swaps the preset carousel for that tool's hairline slider."
+
+- "Build the VSCO primary action button: a 2pt-radius rectangle (NOT a pill), `#FFFFFF` background, `#000000` text, Inter 12pt weight 600 UPPERCASE with `+1.4` letter-spacing, 14pt vertical / 28pt horizontal padding. Pressed: background `#DBDBDB` + scale 0.98. Frequently it is rendered instead as a bare top-bar text action ('NEXT') with the same type spec and no fill."
+
+### Iteration Guide
+1. Editor canvas is true black `#000000` — dark-native, there is NO light editing theme; only browsing screens can go light
+2. UI is monochrome: white + `#0E0E0E`/`#1A1A1A`/`#242424` surfaces + `#B3B3B3`/`#767676` text — zero brand accent
+3. Sliders are 1px hairlines on `#3A3A3A` with a solid white 18pt knob (the knob's `0 1px 4px` shadow is the only content shadow)
+4. Selection is communicated with a 2px white ring or a fill/label color change — NEVER a tint
+5. Tool labels and preset codes are UPPERCASE Inter, wide-tracked (`+1.6` tools, `+1.0` presets) — the film-data-back signature
+6. The film-preset carousel is the identity: 56pt live-preview tiles, 2px white active ring
+7. Default corner radius is 2pt (film-frame square); the Studio grid is 0pt and gapless (contact sheet)
+8. The photograph is sacred — maximum black margin, never clipped by chrome, never crowded
+9. No cards, panels, borders, or shadows on the editing surface — every control floats on black
+10. The only non-monochrome UI color is the destructive red `#E5484D`, used solely in delete/discard sheets