designmd-forge 1.2.0

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

@@ -0,0 +1,405 @@
+# Design System Inspiration of Postman (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Postman's iOS app is a developer instrument, not a consumer app — and it looks like one. It opens on a neutral dark grey canvas (`#1A1A1A`) and the entire screen is organized around a single task: build an HTTP request, fire it, read the response. The visual atmosphere is "API console in your pocket": dense, monospaced, color-coded, with one warm orange brand mark that appears only on the verbs that matter (Send, Save, primary CTAs). Nothing is decorative; every pixel either holds request data or signals state.
+
+The spine of the app is the **request builder**: a horizontal URL bar with a colored HTTP-method pill on the left, the request URL in the middle (monospace), and a bright orange **Send** button on the right. Below it sits a tab strip — `Params`, `Headers`, `Body`, `Auth`, `Pre-request Script`, `Tests` — each opening a key-value editor where keys and values are typed in monospace. Fire the request and the bottom half of the screen becomes the **response viewer**: a status line (`200 OK` in green, `404` in yellow, `500` in red), timing and size metadata, and a syntax-highlighted JSON body. This request-then-response rhythm is the entire product; Collections, History, and Environments are just ways to organize and replay it.
+
+The signature of the design is its **HTTP-method color system**. Every method has a fixed hue that is consistent everywhere the method appears — in the URL-bar pill, in collection request rows, in history entries: GET is green, POST is yellow, PUT is blue, PATCH is purple, DELETE is red, OPTIONS/HEAD are grey. This is not decoration — it is the primary information channel. A developer scanning a collection reads color before text. On dark mode these hues are softened (pastel-ish) versus the saturated light-mode versions, but the hue identity never changes.
+
+The color logic is therefore split in two: a **single brand orange** (`#FF6C37`, "Postman Orange," from the company's logo and brand) reserved strictly for action affordances (Send button, active-tab underline, primary buttons, links) — and the **method/status palette** that carries semantic meaning. The neutral greys do everything else: canvas `#1A1A1A`, surfaces `#212121`/`#2A2A2A`, dividers `#3A3A3A`, text `#E8E8E8`/`#A6A6A6`. There is deliberately no second brand accent — orange means "do the thing," method colors mean "what kind of thing."
+
+Typography is a clean UI sans (Postman ships a system-leaning stack; **Inter** is the closest free analog) for all chrome — labels, headings, navigation — paired with a strong monospace (**JetBrains Mono** as the free analog) for every piece of machine data: URLs, headers, JSON keys/values, query params, status codes, timing. The sans/mono split mirrors Postman's product reality: humans label things, machines speak JSON.
+
+**Key Characteristics:**
+- Neutral dark grey canvas (`#1A1A1A`) — a developer console, not a branded surface
+- Request builder as the home screen — method pill + monospace URL + orange Send button
+- HTTP-method color system — GET green / POST yellow / PUT blue / PATCH purple / DELETE red, consistent everywhere
+- Single brand orange (`#FF6C37`) — reserved for Send / active tab / primary CTAs, never decorative
+- Response viewer — status code (color-coded) + timing/size meta + syntax-highlighted JSON
+- Sans for chrome, Mono for data — Inter labels, JetBrains Mono URLs/headers/JSON
+- Tab strip request editor — Params / Headers / Body / Auth / Scripts / Tests with key-value rows
+- Status-code chips — 2xx green, 3xx blue, 4xx yellow, 5xx red — pills in monospace
+- Collections / History / Environments — three ways to organize and replay the same request
+- JSON syntax coloring — keys blue, strings green, numbers/booleans purple, punctuation dim
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive — the single brand accent)
+- **Postman Orange** (`#FF6C37`): The one brand color — Send button, active-tab underline, primary buttons, links, FAB. Never decorative.
+- **Postman Orange Pressed** (`#E55A2B`): Pressed state of orange affordances.
+- **Postman Orange Dim** (`#3D2417`): 12% orange wash behind selected orange contexts (rare).
+
+### Canvas & Surfaces (Dark — default)
+- **Dark Canvas** (`#1A1A1A`): Primary canvas — neutral grey, not pure black, not charcoal-blue.
+- **Surface 1** (`#212121`): Cards, URL bar, key-value cells, the first elevation step.
+- **Surface 2** (`#2A2A2A`): Hovered/pressed rows, secondary panels.
+- **Surface 3** (`#333333`): Inline code chips, tag fills.
+- **Code Surface** (`#161616`): The response/JSON body background — slightly darker than canvas for contrast.
+- **Divider** (`#3A3A3A`): Hairline separators between rows, under tab strips.
+- **Border** (`#444444`): URL-bar border, input borders.
+
+### Canvas & Surfaces (Light)
+- **Canvas White** (`#FFFFFF`): Primary light canvas.
+- **Surface Gray** (`#F4F5F5`): Cards, key-value cells.
+- **Surface Gray 2** (`#EBECEC`): Pressed rows.
+- **Code Surface Light** (`#FAFAFA`): JSON body background.
+- **Divider Light** (`#E1E3E3`): Hairline separators.
+- **Border Light** (`#D6D8D8`): Input borders.
+
+### Text
+- **Text Primary Dark** (`#E8E8E8`): Primary text & headings on dark.
+- **Text Secondary Dark** (`#A6A6A6`): Metadata, secondary labels.
+- **Text Tertiary Dark** (`#6E6E6E`): Disabled, placeholders, JSON punctuation.
+- **Text Primary Light** (`#212121`): Primary text on white.
+- **Text Secondary Light** (`#6B6B6B`): Metadata on white.
+
+### HTTP Method Colors (the semantic core — Dark Mode)
+These are consistent everywhere a method appears. Light-mode versions are more saturated; hue identity is preserved.
+
+| Method | Dark Mode | Light Mode | Chip Fill (dark, ~12%) |
+|--------|-----------|-----------|------------------------|
+| GET | `#6BDD9A` | `#0CBB52` | `rgba(107,221,154,0.12)` |
+| POST | `#FFE47A` | `#C9A227` (text on chip) | `rgba(255,228,122,0.12)` |
+| PUT | `#74AEF6` | `#1A73E8` | `rgba(116,174,246,0.12)` |
+| PATCH | `#C0A8E1` | `#7D4FC4` | `rgba(192,168,225,0.12)` |
+| DELETE | `#F79090` | `#E5484D` | `rgba(247,144,144,0.12)` |
+| OPTIONS / HEAD | `#A6A6A6` | `#6B6B6B` | `rgba(166,166,166,0.12)` |
+
+### Status Code Colors
+| Class | Color (dark) | Use |
+|-------|--------------|-----|
+| 1xx / 2xx Success | `#6BDD9A` | `200 OK`, `201 Created` |
+| 3xx Redirect | `#74AEF6` | `301 Moved`, `304 Not Modified` |
+| 4xx Client Error | `#FFE47A` | `400`, `401`, `404` |
+| 5xx Server Error | `#F79090` | `500`, `502`, `503` |
+
+### JSON Syntax Colors
+- **Key** (`#74AEF6`): Object keys.
+- **String** (`#6BDD9A`): String values.
+- **Number / Boolean / null** (`#C0A8E1`): Numeric, boolean, null literals.
+- **Punctuation** (`#6E6E6E`): Braces, brackets, colons, commas.
+
+### Semantic
+- **Success** (`#6BDD9A`): 2xx responses, save success, passed tests.
+- **Error** (`#F79090`): 5xx responses, failed tests, destructive actions.
+- **Warning** (`#FFE47A`): 4xx responses, unsaved-change indicator.
+- **Info** (`#74AEF6`): 3xx, informational toasts.
+
+## 3. Typography Rules
+
+### Font Family
+- **Sans (UI / chrome)**: `Inter` (by Rasmus Andersson, SIL OFL) — the closest free analog to Postman's system-leaning UI face; neutral, legible at small sizes.
+- **Mono (request data)**: `JetBrains Mono` (by JetBrains, SIL OFL) — strong developer monospace for URLs, headers, JSON, params, status codes, timing.
+- **Fallback Sans Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Fallback Mono Stack**: `'SF Mono', ui-monospace, 'Menlo', 'Consolas', monospace`
+- **Not user-switchable**: The sans/mono split is by content type (chrome vs machine data), not a setting.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Inter | 32pt | 800 | 1.1 | -0.5pt | Top-level screen title ("Collections") |
+| Title | Inter | 26pt | 700 | 1.2 | -0.3pt | API / collection name |
+| Section | Inter | 22pt | 700 | 1.2 | -0.2pt | "Request Builder" |
+| Subsection | Inter | 18pt | 600 | 1.3 | -0.1pt | "Query Params", tab-content headings |
+| Body | Inter | 16pt | 400 | 1.5 | 0pt | Descriptive prose, empty-state text |
+| Label | Inter | 15pt | 500 | 1.3 | 0pt | Form labels, list-item titles |
+| Method Pill | JetBrains Mono | 13pt | 700 | 1.0 | 0.3pt | `GET` / `POST` in URL bar & rows |
+| URL / JSON | JetBrains Mono | 13pt | 400/500 | 1.4 | 0pt | Request URL, headers, key-value data |
+| JSON Body | JetBrains Mono | 12pt | 400 | 1.6 | 0pt | Response body, pretty-printed |
+| Status Code | JetBrains Mono | 12pt | 700 | 1.0 | 0.2pt | `200 OK`, status chips |
+| Meta | Inter | 14pt | 400 | 1.4 | 0pt | "182 ms · 1.2 KB · 2m ago" |
+| Caption | Inter | 12pt | 500 | 1.3 | 0.5pt | "QUERY PARAMS" eyebrow (uppercase) |
+| Tab Label | Inter | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
+| Button | Inter | 14pt | 700 | 1.0 | 0pt | All buttons (Send is 700) |
+
+### Principles
+- **Sans for chrome, Mono for machine data**: Any string that is part of an HTTP transaction — URL, header name/value, query param, JSON, status code, timing — is JetBrains Mono. Everything a human wrote — labels, headings, prose — is Inter. This split is the most legible part of the system.
+- **Method pills are always Mono + bold**: `GET`/`POST`/`PUT` render in JetBrains Mono 13pt weight 700 with +0.3pt tracking and the method's fixed hue.
+- **Weight concentrated at 400 / 500 / 600 / 700 / 800**: Body 400, labels 500, subsections 600, headings/buttons 700, display 800. No thin.
+- **JSON is colored, not bolded**: Syntax meaning is carried by hue (key blue / string green / number purple / punctuation dim), never by weight.
+- **Uppercase only for tiny eyebrows**: Section eyebrows ("QUERY PARAMS") at 12pt +0.5pt tracking. Never uppercase body or data.
+- **Tabular Mono figures**: timing/size columns and JSON numbers use JetBrains Mono's even-width digits so columns align.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Send / Save / Confirm)**
+- Shape: Rounded rectangle, 8pt corner radius
+- Background: `#FF6C37` (Postman Orange) — identical light & dark
+- Text: `#FFFFFF`, Inter 14pt weight 700
+- Padding: 12pt vertical, 22pt horizontal (Send in the URL bar is full-height of the bar)
+- Pressed: background `#E55A2B` + scale 0.98
+- Disabled: background `#3D2417`, text `#6E6E6E`
+
+**Secondary / Ghost Button (Cancel / Reset)**
+- Background: transparent
+- Text: `#E8E8E8` dark / `#212121` light, Inter 14pt weight 500
+- Border: 1pt `#444444` dark / `#D6D8D8` light
+- Padding: 11pt vertical, 20pt horizontal
+- Corner radius: 8pt
+- Pressed: background `#2A2A2A`
+
+**Outline Orange Button (Save Request / secondary action)**
+- Background: transparent
+- Text & border: `#FF6C37` 1pt
+- Padding: 11pt vertical, 20pt horizontal, 8pt radius
+- Pressed: background `rgba(255,108,55,0.10)`
+
+**Text Button (Add to Collection / link action)**
+- Background: none
+- Text: `#FF6C37`, Inter 14pt weight 600
+- No underline by default; underline on press
+
+**Icon Button**
+- 20pt glyph in 44pt hit area
+- Color: `#A6A6A6` default → `#E8E8E8` active (orange if it's a primary action like Send)
+
+### Core Atoms
+
+**URL / Request Bar**
+- Container: `#212121`, 1pt `#444444` border, 10pt corner radius, overflow hidden
+- Method pill: left segment, JetBrains Mono 13pt 700, method-colored text, 1pt right divider, 12pt horizontal padding — tappable to open the method picker
+- URL field: JetBrains Mono 12–13pt `#E8E8E8`, single-line, horizontal scroll
+- Send button: right segment, full-height, `#FF6C37` fill, white Inter 13pt 700
+
+**HTTP Method Chip**
+- JetBrains Mono 13pt 700, method hue text, method-hue background at 12%, 6pt corner radius, 6×12pt padding
+- Used in collection rows, history entries, request tabs
+
+**Status Code Chip**
+- JetBrains Mono 12pt 700, class-colored text + 1pt class-colored border at 40% + class fill at 8%, 999pt pill, 5×10pt padding
+- 2xx green, 3xx blue, 4xx yellow, 5xx red
+
+**Key-Value Row (Params / Headers editor)**
+- Two cells side-by-side: key cell (flex ~38%, JetBrains Mono 12pt, key-blue `#74AEF6` text) + value cell (flex, JetBrains Mono 12pt `#E8E8E8`)
+- Each cell: `#212121` fill, 1pt `#3A3A3A` border, 6pt radius, 9×10pt padding
+- Leading checkbox (enable/disable row), trailing delete on swipe
+
+**Response Body Block**
+- Background `#161616`, 1pt `#3A3A3A`, 8pt radius, 12pt padding
+- JetBrains Mono 12pt, syntax-colored JSON, line wrap or horizontal scroll toggle
+- Header row: status chip + timing (Mono `#A6A6A6`) + size + copy/raw/preview toggle
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 52pt + safe area
+- Background: `rgba(26,26,26,0.94)` with `backdrop-filter: blur(20px)`, 0.5pt top border `#3A3A3A`
+- Tabs (4): Request, Collections, History, Environments
+- Icon size: 21pt, 2pt stroke
+- Active: `#FF6C37` / Inactive: `#6E6E6E`
+- Labels: Inter 10pt 500, always shown
+
+**Request Editor Tab Strip**
+- Horizontal scroll strip under the URL bar: Params / Headers / Body / Auth / Pre-request / Tests
+- Inter 13pt; active 600 `#E8E8E8` with a 2pt `#FF6C37` underline; inactive 500 `#A6A6A6`
+- A dot badge on a tab indicates it has content (e.g. Headers has 4 keys)
+
+**Top Bar (Request)**
+- Height: 44pt + safe area
+- Leading: Postman roundel (26pt) + request name (Inter 16pt 600)
+- Trailing: `Save` text action (Inter 13pt 600 `#FF6C37`, shows a dot when unsaved) + overflow `⋯`
+
+### Input Fields
+
+**Text Field**
+- Height: 40pt, background `#212121` dark / `#F4F5F5` light, 1pt `#444444` border, 8pt radius
+- Text: JetBrains Mono 13pt for URL/header/value fields; Inter 15pt for name/label fields
+- Placeholder: `#6E6E6E`
+- Focus: border `#FF6C37` + 2pt `rgba(255,108,55,0.35)` ring
+- Error: border `#F79090`, helper text `#F79090` 12pt
+
+**Method Picker (sheet)**
+- Bottom sheet listing GET/POST/PUT/PATCH/DELETE/HEAD/OPTIONS
+- Each row: method name in its hue (JetBrains Mono 15pt 700) + short description (Inter 12pt `#A6A6A6`)
+- Selected row: `#2A2A2A` background, leading orange check
+
+**Environment Variable Row**
+- Key (Mono 13pt `#74AEF6`) + current value (Mono 13pt `#E8E8E8`), scope label (Inter 11pt `#A6A6A6`)
+- `{{variable}}` tokens inside URL/body render in orange `#FF6C37` to show interpolation
+
+**Search Field**
+- Height: 38pt, leading magnifier 16pt `#6E6E6E`, `#212121`, 1pt `#3A3A3A`, 8pt radius
+- Placeholder "Search collections" `#6E6E6E`
+
+### Distinctive Components
+
+**Method-Colored URL Bar**
+- The atomic Postman element: a single pill+field+Send unit where the method's color is the first thing the eye reads.
+
+**Request → Response Split**
+- The screen is conceptually two halves: builder (top) and response (bottom). Sending animates the Send button into a spinner; the response slides up.
+
+**HTTP Method Color System**
+- The semantic core — see Color Palette. Consistent in URL bars, collection rows, history. Color is read before text.
+
+**Syntax-Highlighted JSON Viewer**
+- Pretty-printed, collapsible nodes (▸/▾), keys blue / strings green / numbers purple / punctuation dim. Copy + Raw + Preview toggle.
+
+**Collection Tree Row**
+- Folder/request hierarchy: leading method chip (for requests) or folder glyph, request name (Inter 15pt), trailing run/⋯. Nested rows indent 16pt per level.
+
+**Status Code Chip + Timing**
+- After a send: `200 OK` (green pill) · `182 ms` · `1.2 KB`, all JetBrains Mono — the developer's instant verdict.
+
+**Environment Pill**
+- A pill in the top area showing the active environment (e.g. `Staging`); tap to switch. `{{vars}}` interpolate against it.
+
+**Tests / Assertions Result List**
+- Each assertion row: green check + name (passed) or red ✕ + name + failure detail; counts summarized "5 passed, 1 failed".
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32
+- URL bar internal segment padding: 12pt; key-value row gap: 8pt; section gap: 12–16pt
+- Screen horizontal inset: 14–18pt
+
+### Grid & Container
+- iPhone: single column; the screen splits vertically into builder (top ~55%) and response (bottom ~45%) after a send
+- iPad: optional 2-pane — collection sidebar (left ~300pt) + request/response detail (right)
+- Key-value editors use a fixed 2-column proportion (key ~38% / value flex)
+
+### Whitespace Philosophy
+- **Dense but legible**: this is a power tool — rows are compact, but 8pt gaps and 1pt dividers keep the JSON and key-value grids scannable
+- **Color carries hierarchy**: method/status colors do work that whitespace would in a consumer app — the eye navigates by hue
+- **Code gets its own surface**: response JSON sits on a darker `#161616` block so it reads as "output," distinct from the chrome
+- **Orange is rationed**: a single orange affordance per context keeps "the action" unambiguous
+
+### Border Radius Scale
+- Square (0pt): dividers, full-bleed code panes
+- Subtle (4pt): inline code chips
+- Chip (6pt): method chips, key-value cells
+- Standard (8pt): buttons, inputs, response block
+- Bar (10pt): the URL/request bar
+- Comfortable (16pt): sheets, modals, large containers
+- Pill (500pt): status-code chips, environment pill
+- Circle (50%): the Postman roundel, avatars
+
+## 6. Depth & Elevation
+
+Postman is mostly flat with restrained elevation — it's a console, not a card-based consumer app.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No border, no shadow | Canvas, JSON code pane |
+| Bordered (Level 1) | 1pt `#3A3A3A`/`#444444`, bg `#212121` | URL bar, key-value cells, inputs, cards |
+| Floating (Level 2) | `rgba(0,0,0,0.5) 0 8px 24px` + 1pt `#444444` | Method picker, environment switcher, dropdowns, bottom sheets |
+| Modal Overlay | `rgba(0,0,0,0.6)` scrim | Behind sheets and destructive-confirm dialogs |
+
+**Shadow Philosophy**: On the neutral grey canvas, separation is primarily a 1pt border + a slightly lighter surface; shadows are reserved for genuinely floating layers (the method picker, environment switcher, bottom sheets) so they read as "above" the request. The response code block goes the other way — it's *darker* than the canvas, signaling "machine output" rather than "elevated UI." This inversion (data sinks, controls float) is a Postman tell.
+
+### Motion
+- **Send → response**: the Send button label cross-fades into a 14pt spinner (orange) for the request duration; on completion the response section slides up 220ms ease-out and the status chip pops (scale 0.9→1.0)
+- **Method picker**: bottom sheet slides up 280ms ease-out; selecting a method animates the URL-bar pill's color with a 180ms cross-fade
+- **Tab strip switch**: the `#FF6C37` underline slides horizontally to the new tab over 200ms ease-out; content cross-fades
+- **JSON node collapse**: chevron rotates 90° in 150ms; children height 0→auto over 180ms ease-out
+- **Unsaved indicator**: the `Save` action's dot fades in (120ms) when the request is modified
+- **Pull-to-refresh (History/Collections)**: native rubber-band; an orange progress arc
+- **Test results**: each assertion row staggers in (40ms apart), green checks / red ✕ with a soft scale-in
+- **Haptics**: light impact on Send tap; success notification on 2xx, error notification on 4xx/5xx; selection tick on method change and tab switch
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the neutral grey canvas `#1A1A1A` (dark) / `#FFFFFF` (light) — a console, not a branded surface
+- Make the request builder the home screen — method pill + monospace URL + orange Send
+- Apply the HTTP-method color system consistently (GET green / POST yellow / PUT blue / PATCH purple / DELETE red) everywhere a method appears
+- Reserve Postman Orange `#FF6C37` strictly for actions (Send / active tab / primary CTAs)
+- Set every URL, header, param, JSON, status code, and timing in JetBrains Mono
+- Color JSON by syntax role (key blue / string green / number purple / punctuation dim)
+- Use status-code chips (2xx green / 3xx blue / 4xx yellow / 5xx red) as pills
+- Put the response JSON on a darker `#161616` surface so it reads as machine output
+- Show the active environment as a pill and render `{{variables}}` in orange
+- Soften method hues on dark vs light but keep their hue identity
+
+### Don't
+- Don't use orange decoratively — it means "do the thing," nothing else
+- Don't introduce a second brand accent — method colors carry semantics, orange carries action
+- Don't set URLs/headers/JSON in the proportional sans — machine data is always Mono
+- Don't change a method's hue between screens — GET is always the same green everywhere
+- Don't bold JSON for emphasis — syntax meaning is hue, not weight
+- Don't use a pure-black or charcoal-blue canvas — Postman dark is neutral grey `#1A1A1A`
+- Don't elevate the response code block — data sinks (darker), controls float (lighter)
+- Don't uppercase body or data — only tiny section eyebrows
+- Don't drop the timing/size meta after a send — `ms` + size is the developer's verdict
+- Don't animate aggressively — motion is functional (slide/cross-fade, 150–280ms)
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | URL truncates earlier; response pane shorter; key cell ~40% |
+| iPhone 13/14/15 | 390pt | Standard single-column builder/response split |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in the compact top bar |
+| iPhone 15/16 Pro Max | 430pt | More URL visible inline; taller response pane |
+| iPad (portrait) | 768pt | Optional collection sidebar (~300pt) + detail |
+| iPad (landscape) | 1024pt+ | 3-pane: collections, request builder, response side-by-side |
+
+### Dynamic Type
+- Display, Title, Section, Body, Label, Meta: full scale
+- Method pills, status chips, tab labels, JSON body, ≤12pt mono: FIXED (column-alignment-sensitive)
+- URL/header Mono: scales up but stays monospace; columns stay aligned
+
+### Orientation
+- All screens rotate
+- iPhone landscape widens the URL bar and shows builder + response side-by-side
+- iPad landscape adds the 3-pane console layout
+
+### Touch Targets
+- Method pill: tappable, ≥40pt tall (full URL-bar height)
+- Send button: ≥44pt tall
+- Key-value cells: ≥40pt tall, full-cell tap to edit
+- Tab strip items: ≥44pt hit, 13pt label
+- Tab bar icons: 21pt glyph, 44pt hit
+
+### Safe Area Handling
+- Top: compact top bar respects safe area + Dynamic Island
+- Bottom: tab bar + home indicator respected; blurred bar floats over content
+- Keyboard: the active key-value editor and URL field scroll above the keyboard; the response pane collapses to make room
+- Sides: 14pt content inset on iPhone, paned layout on iPad
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (dark): `#1A1A1A` (neutral grey) / light `#FFFFFF`
+- Surface 1 (card/URL bar): `#212121`
+- Code surface (JSON body): `#161616`
+- Divider / border: `#3A3A3A` / `#444444`
+- Text primary: `#E8E8E8` dark / `#212121` light
+- Text secondary: `#A6A6A6`
+- Brand orange (Send / active / CTA): `#FF6C37`
+- GET: `#6BDD9A` · POST: `#FFE47A` · PUT: `#74AEF6` · PATCH: `#C0A8E1` · DELETE: `#F79090`
+- Status 2xx: `#6BDD9A` · 3xx: `#74AEF6` · 4xx: `#FFE47A` · 5xx: `#F79090`
+- JSON key `#74AEF6` · string `#6BDD9A` · number `#C0A8E1` · punctuation `#6E6E6E`
+
+### Example Component Prompts
+- "Build the Postman URL/request bar in SwiftUI: a single rounded container (`#212121` fill, 1pt `#444444` border, 10pt radius). Left segment: the HTTP method in JetBrains Mono 13pt w700 colored by method (GET `#6BDD9A`, POST `#FFE47A`, PUT `#74AEF6`, PATCH `#C0A8E1`, DELETE `#F79090`) with a 1pt right divider and 12pt padding — tappable to open the method picker. Middle: the URL in JetBrains Mono 12pt `#E8E8E8`, single-line, horizontal scroll. Right segment: a full-height `#FF6C37` Send button, white Inter 13pt w700."
+
+- "Create a Postman HTTP method chip: JetBrains Mono 13pt w700, text in the method's hue, background that hue at 12% alpha, 6pt corner radius, 6pt vertical / 12pt horizontal padding. GET=`#6BDD9A`, POST=`#FFE47A`, PUT=`#74AEF6`, PATCH=`#C0A8E1`, DELETE=`#F79090`, OPTIONS/HEAD=`#A6A6A6`. This color is consistent everywhere the method appears."
+
+- "Render the Postman response viewer: a header row with a status-code pill (JetBrains Mono 12pt w700; 2xx text/border `#6BDD9A`, 4xx `#FFE47A`, 5xx `#F79090`; 999pt radius, class color at 8% fill + 40% border), then timing `182 ms` and size `1.2 KB` in JetBrains Mono `#A6A6A6`. Below: the JSON body on a `#161616` block, 1pt `#3A3A3A`, 8pt radius, JetBrains Mono 12pt with syntax colors — keys `#74AEF6`, strings `#6BDD9A`, numbers/booleans `#C0A8E1`, punctuation `#6E6E6E`."
+
+- "Build the Postman key-value editor row: two cells side-by-side. Key cell flex 38%, JetBrains Mono 12pt `#74AEF6`. Value cell flex 1, JetBrains Mono 12pt `#E8E8E8`. Each cell `#212121` fill, 1pt `#3A3A3A` border, 6pt radius, 9pt vertical / 10pt horizontal padding, 8pt gap between cells. Leading enable checkbox, swipe-to-delete."
+
+- "Create the Postman primary Send button: `#FF6C37` background, white Inter 14pt w700, 8pt corner radius, 12pt vertical / 22pt horizontal padding. Pressed: `#E55A2B` + scale 0.98. On tap, cross-fade the label into a 14pt white spinner for the request duration. Orange is reserved for actions only — never decorative."
+
+- "Render the Postman request editor tab strip: a horizontal scroll row of Params / Headers / Body / Auth / Pre-request / Tests in Inter 13pt. Active tab: w600 `#E8E8E8` with a 2pt `#FF6C37` underline that slides to the selected tab over 200ms. Inactive: w500 `#A6A6A6`. A small dot on a tab signals it has content."
+
+### Iteration Guide
+1. Canvas is neutral grey `#1A1A1A` (dark) / `#FFFFFF` (light) — a developer console, not a branded surface
+2. The request builder is the home screen — method pill + monospace URL + orange Send button
+3. The HTTP-method color system (GET green / POST yellow / PUT blue / PATCH purple / DELETE red) is the semantic core — consistent everywhere, read before text
+4. Postman Orange `#FF6C37` is the ONLY brand accent and is reserved for actions (Send / active tab / primary CTAs) — never decorative
+5. Every URL, header, param, JSON, status code, and timing is JetBrains Mono; chrome is Inter
+6. JSON is colored by syntax role (key blue / string green / number purple / punctuation dim), never bolded
+7. Status-code chips are pills: 2xx green, 3xx blue, 4xx yellow, 5xx red
+8. The response JSON sits on a darker `#161616` block — data sinks, controls float (the depth inversion is a Postman tell)
+9. Show the active environment as a pill; render `{{variables}}` in orange to signal interpolation
+10. Method hues soften on dark vs the saturated light versions, but hue identity never changes