# Design System Inspiration of Midjourney (iOS)

## 1. Visual Theme & Atmosphere

Midjourney's iOS app is a gallery first and a tool second. The canvas is **true black** (`#000000`) — not a warm charcoal, not an off-black — because the entire purpose of the screen is to make generated imagery glow on OLED. Every other surface is a barely-lifted near-black (`#0E0E0E`, `#1A1A1A`), so the only saturated color anywhere in the interface is the user's own renders. Open the app and you land on the **Create feed**: a prompt bar pinned at the bottom (or top, per layout), and below it a vertical stream of "jobs" — each job rendered as a tight **2×2 image grid** with a one-line prompt above it and a compact action row below. The grid is the hero; the chrome recedes.

This is a deliberate inversion of normal product design. Midjourney has **no brand accent color**. There is no "Spotify Green", no "Coinbase Blue" driving CTAs. White (`#FFFFFF`) is the only "primary" — it's the fill of the Imagine button, the active tab glyph, the U1–U4 upscale chips. Everything else is a grey ramp from `#FFFFFF` text down through `#A1A1A1` secondary to `#6E6E6E` tertiary. The result is a near-monochrome shell that disappears around full-color photography, exactly like a darkroom or a photographer's contact sheet. The product's roots in a Discord bot still show: the Discord blurple (`#4D5BCE`) survives as a connect/account accent, and the U1/U2/V1/V2 button grammar is lifted verbatim from the bot's reaction buttons.

The signature interaction is the **prompt → job → grid → upscale** loop. You type a natural-language prompt (optionally with `--ar`, `--v`, `--stylize`, `--style raw` parameters appended) into the prompt bar, tap **Imagine**, and a job appears at the top of the feed — first as a progressing blur, then resolving into four images. Below each grid is a row of monospace action chips: **U1 U2 U3 U4** (upscale that quadrant) and **V1 V2 V3 V4** (create variations), plus a re-roll (🔄). This grammar — parameters as flags, results as a 4-up grid, refinement as indexed chips — is Midjourney's entire identity and must be reproduced faithfully.

Typography is split-personality. The **UI** (titles, tabs, metadata) uses a clean grotesque sans — Inter on the web/app fallback — kept deliberately quiet. But **prompts and parameters** render in a **monospace** face, because a prompt is treated as code: `a glass owl, studio light --ar 3:2 --v 6 --stylize 250`. This monospace-for-prompts convention is a load-bearing brand signal — it tells the user "this string is a precise instruction, not prose."

**Key Characteristics:**
- True black canvas (`#000000`) — OLED black so imagery glows; dark-only, no light mode
- No brand accent — white (`#FFFFFF`) is the only "primary"; chrome is a grey ramp `#FFFFFF → #A1A1A1 → #6E6E6E`
- 2×2 image grid is the hero unit — every job renders as a 4-up quad
- Prompt bar — natural language + `--flag` parameters; tap Imagine to submit
- U1–U4 / V1–V4 chip grammar — monospace indexed chips for upscale and variation (Discord-bot heritage)
- Monospace for prompts & parameters — the prompt is treated as code, not prose
- Job feed — vertical stream of prompt + grid + action row, newest on top
- Discord blurple (`#4D5BCE`) survives as a connect/account accent only
- Progress blur — jobs resolve from a blurred placeholder to four sharp images
- Minimal chrome: bottom tab bar (Create / Explore / Search / Library / Profile), thin segmented control (Imagine / Edit / Personalize)

## 2. Color Palette & Roles

### Primary (Interactive)
- **White** (`#FFFFFF`): The only primary — Imagine button fill, active tab glyph, upscale chips (U1–U4), primary text.
- **White Pressed** (`#DADADA`): Pressed state of white-filled buttons.
- **Rate / Link Blue** (`#2D7FF9`): Hyperlinks, "Rate images" reward prompts, in-app links.
- **Discord Blurple** (`#4D5BCE`): "Connect Discord" / account-linking accent only — a heritage color, never a general CTA.

### Canvas & Surfaces (Dark — the only mode)
- **True Black Canvas** (`#000000`): Primary canvas. OLED black; behind every screen.
- **Surface 1** (`#0E0E0E`): Cards, sheets, the prompt bar's resting backdrop, token sections.
- **Surface 2** (`#1A1A1A`): Prompt input fill, ghost button background, raised rows.
- **Surface 3** (`#242424`): Pressed surface, hovered chips, scrubber tracks.
- **Divider** (`#2A2A2A`): Hairline dividers, chip borders, input borders.

### Text
- **Text Primary** (`#FFFFFF`): Titles, prompt text, active labels.
- **Text Secondary** (`#A1A1A1`): Metadata (image count, mode, elapsed time), inactive nav, prompt sub-lines.
- **Text Tertiary** (`#6E6E6E`): Placeholder text, disabled state, parameter hints, inactive tab labels.

### Semantic
- **Success Green** (`#2ECC71`): Job-complete tick, "Saved to library" toast.
- **Warning Amber** (`#F5A623`): "Slow / Relaxed queue" indicator, quota warnings.
- **Error Red** (`#E5484D`): Failed job, banned-prompt warning, network error.
- **Progress Shimmer** (`#1A1A1A → #2A2A2A`): Animated blur/shimmer on a rendering job before images resolve.

### Image Grid (content, not chrome)
The 2×2 grid carries 100% of the screen's saturation. The shell defines no decorative color — whatever the model generates is the palette. Treat generated imagery as full-bleed, full-color, and never tint or overlay it except for a 1px `#2A2A2A` seam between the four cells.

### Color Usage Rules
| Token | Hex | Where |
|-------|-----|-------|
| Canvas | `#000000` | Behind everything (OLED black) |
| Surface 1 | `#0E0E0E` | Cards, sheets, sections |
| Surface 2 | `#1A1A1A` | Prompt input, ghost buttons |
| Divider | `#2A2A2A` | Hairlines, chip & input borders |
| Primary (white) | `#FFFFFF` | Imagine button, active tab, U-chips, titles |
| Text secondary | `#A1A1A1` | Metadata, inactive nav |
| Text tertiary | `#6E6E6E` | Placeholders, disabled |
| Rate blue | `#2D7FF9` | Links, rate-images reward |
| Blurple | `#4D5BCE` | Discord connect only |
| Success | `#2ECC71` | Job complete |
| Error | `#E5484D` | Failed job |

## 3. Typography Rules

### Font Family
- **UI Sans**: `Inter` (by Rasmus Andersson, SIL OFL) — the closest open grotesque to Midjourney's clean app UI face. Used for titles, tabs, metadata, body. On iOS, falls back to SF Pro Text / SF Pro Display.
- **Prompt / Parameter Mono**: `SF Mono` on iOS (system monospace); `IBM Plex Mono` or `JetBrains Mono` as a bundled alternative. **Prompts and `--flags` always render monospace** — the prompt is treated as code.
- **Fallback Stack (sans)**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
- **Fallback Stack (mono)**: `'SF Mono', ui-monospace, Menlo, 'JetBrains Mono', monospace`

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Screen Title | Inter | 32pt | 800 | 1.15 | -0.4pt | "Create", large-title nav |
| Nav Title (compact) | Inter | 22pt | 700 | 1.2 | -0.3pt | Collapsed top bar / "Explore" |
| Section Heading | Inter | 19pt | 700 | 1.25 | -0.2pt | "Recent jobs", sheet titles |
| Body | Inter | 16pt | 400 | 1.5 | 0pt | Descriptions, settings rows |
| Action / Tab Active | Inter | 15pt | 600 | 1.0 | 0pt | Segmented control, primary action |
| Card Title | Inter | 15pt | 600 | 1.3 | 0pt | Library / album titles |
| Prompt Text | SF Mono | 13pt | 400 | 1.4 | 0pt | The prompt above each grid |
| Parameter Chip | SF Mono | 13pt | 600 | 1.0 | 0pt | `--ar 1:1`, `--stylize 250` |
| Job Chip (U1/V1) | SF Mono | 13pt | 600 | 1.0 | 0.2pt | Upscale / variation indexed chips |
| Metadata | Inter | 14pt | 400 | 1.4 | 0pt | "Relaxed · 4 images · 38s" |
| Caption | Inter | 12pt | 500 | 1.3 | 0pt | Timestamps, small labels |
| Tab Label | Inter | 10pt | 500 | 1.0 | 0.1pt | Bottom tab text |
| Placeholder | Inter | 14pt | 400 | 1.4 | 0pt | "What will you imagine?" |

### Principles
- **Two voices, one rule**: UI is quiet sans; prompts and parameters are monospace. Never render a prompt in the sans face — monospace *is* the signal that a string is an instruction.
- **Weight concentrated at 400 / 500 / 600 / 700 / 800**: Regular body, medium captions, semibold actions, bold headings, extrabold large title. No thin, no light.
- **Restraint over expression**: The type system is intentionally generic so it never competes with imagery. Brand personality lives in the grid and the `--flag` grammar, not the typeface.
- **Monospace is for instructions only**: prompts, parameters, U/V chips, seeds, job IDs. Nothing decorative is monospace.
- **Dynamic Type**: titles, body, metadata scale; tab labels, job chips, parameter chips stay fixed (layout-sensitive grid).

## 4. Component Stylings

### Buttons

**Primary Button (Imagine / Generate)**
- Shape: Full pill, 999pt corner radius (or 50% circle when icon-only in the prompt bar)
- Background: `#FFFFFF` (white — the only primary)
- Text / icon: `#000000`
- Padding: 14pt vertical, 28pt horizontal (pill); 36pt circle for the prompt-bar send
- Font: Inter 16pt weight 600
- Pressed: background `#DADADA` + scale 0.98
- Disabled (empty prompt): background `#242424`, text `#6E6E6E`

**Secondary / Outline Button (Vary, Remix, Edit)**
- Background: transparent
- Text: `#FFFFFF`
- Border: 1pt `#2A2A2A`
- Padding: 12pt vertical, 20pt horizontal
- Corner radius: 999pt (pill) or 8pt (rectangular contexts)
- Font: Inter 14pt weight 500
- Pressed: background `#1A1A1A`

**Ghost Button (Remix / inline tool)**
- Background: `#1A1A1A`
- Text: `#FFFFFF`
- Border: 1pt `#2A2A2A`
- Corner radius: 8pt
- Padding: 10pt vertical, 18pt horizontal
- Font: Inter 14pt weight 500

**Text Button (Cancel job / Delete)**
- Font: Inter 14pt weight 500
- Color: `#A1A1A1` (or `#E5484D` for destructive)
- No background, no border
- Pressed: color shifts to `#FFFFFF`

### Job Chips (the core atom)

The U1–U4 / V1–V4 chip grammar is Midjourney's signature control, inherited from the Discord bot's reaction buttons.

**Upscale Chip (U1 / U2 / U3 / U4)**
- Shape: rounded rectangle, 8pt corner radius
- Default: background `#FFFFFF`, text `#000000` (white = the actionable primary)
- Font: SF Mono 13pt weight 600
- Padding: 8pt vertical, 14pt horizontal
- Pressed: background `#DADADA`
- After upscale: chip dims to `#1A1A1A` bg / `#6E6E6E` text (consumed)

**Variation Chip (V1 / V2 / V3 / V4)**
- Background: `#1A1A1A`
- Text: `#FFFFFF`
- Border: 1pt `#2A2A2A`
- Same shape/size/font as upscale
- Pressed: background `#242424`

**Re-roll Chip (🔄)**
- Same as variation chip, leading 🔄 glyph, "Re-roll" label
- Re-runs the original prompt as a fresh job at the top of the feed

**Parameter Chip (`--ar 1:1`, `--stylize 250`)**
- Background: `#1A1A1A`, border 1pt `#2A2A2A`
- Text: `#FFFFFF` (flag) — SF Mono 13pt weight 600
- Corner radius: 8pt
- Read-only in the feed; tappable in the prompt composer to edit

### Image Grid (the hero)

**2×2 Job Grid**
- Container: 12pt corner radius, `overflow: hidden`
- Four equal cells, each `aspect-ratio: 1` (default `--ar 1:1`; container reshapes for `--ar 3:2`, `16:9`, `9:16`, etc.)
- Seam: 6pt gap rendered as `#000000` (canvas shows through) — or 1pt `#2A2A2A` hairline in compact density
- Tap a cell → full-screen lightbox with U/V actions for that quadrant
- While rendering: shimmer placeholder (`#1A1A1A → #2A2A2A` sweep) + percentage label

**Job Action Row** (below the grid)
- Height: 40pt
- Leading icons (24pt hit, 18pt glyph): favorite (heart), download, more (⋯)
- Trailing: U1–U4 chip cluster (or "Upscaled" state)
- Color: icons `#A1A1A1`, chips per chip spec above

### Prompt Bar (signature input)

- Height: 50pt, pinned (bottom of Create, or above the tab bar)
- Background: `#1A1A1A`, border 1pt `#2A2A2A`
- Corner radius: 25pt (full-height pill)
- Leading: 18pt insets, placeholder "What will you imagine?" in `#6E6E6E`
- Trailing: 36pt circular **Imagine** button — `#FFFFFF` fill, `#000000` arrow glyph
- On focus: border brightens to `#3A3A3A`, parameter helper chips (`--ar`, `--v`, `--stylize`) slide up above
- Parameters typed inline as `--flag value` render in monospace as the user types

### Navigation

**Bottom Tab Bar**
- Height: 70pt + safe area
- Background: `rgba(0,0,0,0.92)` with `backdrop-filter: blur(20px)`, 0.5pt top border `#2A2A2A`
- Tabs (5): Create, Explore, Search, Library, Profile
- Icon size: 23pt
- Active: glyph + label `#FFFFFF` (no tint pill — Midjourney has no accent), stroke-width thickens slightly
- Inactive: `#6E6E6E`
- Labels: Inter 10pt w500, always shown

**Segmented Control (Imagine / Edit / Personalize)**
- Sits below the top bar, 0.5pt bottom divider `#2A2A2A`
- Active item: `#FFFFFF` text + 2pt underline `#FFFFFF`
- Inactive: `#6E6E6E`, no underline
- Font: Inter 14pt w600

**Top Bar**
- Height: 44pt + safe area
- Leading: sailboat logomark (22pt, white) + screen title (Inter 19pt w700)
- Trailing: search + filter icons (21pt, `#A1A1A1`)

### Input Fields

**Search Bar (Explore / Library)**
- Height: 44pt
- Background: `#1A1A1A`, no border
- Corner radius: 12pt
- Leading `magnifyingglass` 18pt `#6E6E6E`
- Placeholder "Search the community" 14pt `#6E6E6E`
- Focus: 1pt `#2D7FF9` border

**Prompt Composer (full editor)**
- Multi-line text area, monospace, `#FFFFFF` text on `#0E0E0E`
- Parameter chips render inline; image references appear as 44pt thumbnails pinned at the start of the field
- "Imagine" pill docked bottom-right of the composer

### Distinctive Components

**Job Card (prompt + grid + actions)**
- The atomic unit of the feed: monospace prompt line (`#A1A1A1`, key phrase in `#FFFFFF`), 2×2 grid, action row
- 18pt vertical gap between job cards
- Newest job animates in at the top, pushing older jobs down

**U/V Chip Cluster**
- The Discord-bot reaction grammar surfaced natively
- U1–U4 are white (do-it-now); V1–V4 are dark (explore-from); re-roll re-runs the prompt

**Progress Blur → Resolve**
- A rendering job shows a blurred, shimmering placeholder with a percentage; on completion it crossfades (250ms) into the four sharp images with a subtle scale-from-0.98

**Parameter Helper Strip**
- On prompt focus, a horizontally-scrolling strip of `--ar 1:1`, `--ar 16:9`, `--v 6`, `--style raw`, `--stylize 250` chips slides up; tapping one appends the flag to the prompt in monospace

**Lightbox / Single-image View**
- Full-bleed image on `#000000`, swipe between the four quadrants, bottom action bar: Upscale, Vary (Subtle/Strong), Remix, Zoom Out, Download, Favorite

**Explore Masonry**
- The community feed renders as a dense masonry of generated images on `#000000` — no card chrome, just imagery with a tap-to-open behavior

## 5. Layout Principles

### Spacing System
- Base unit: 2pt (tight) — scale: 2, 4, 6, 8, 10, 14, 18, 24, 32, 48
- Grid cell seam: 6pt (`#000000` shows through)
- Job-card vertical gap: 18pt
- Screen horizontal inset: 14pt (imagery wants to be near-edge-to-edge)

### Grid & Container
- iPhone: content at 14pt horizontal insets; 2×2 grid fills the content width
- The job grid reshapes to the prompt's `--ar`: square (1:1), landscape (3:2, 16:9), portrait (9:16) — the container aspect changes, the 2×2 structure does not
- iPad: feed becomes 2 columns of job cards; Explore masonry scales to 3–4 columns
- Lightbox: full-bleed, zero insets, image centered on black

### Whitespace Philosophy
- **Black is the whitespace**: negative space is literally `#000000` — it frames imagery like matting around a print
- **Chrome is thin and dim**: dividers are 0.5–1pt `#2A2A2A`; metadata is `#A1A1A1`; nothing chrome competes with the grid
- **Imagery near-bleeds**: 14pt insets, 6pt cell seams — maximize pixels devoted to the render
- **No decorative surfaces**: cards are `#0E0E0E` (barely visible); the design refuses ornament so the model output is the only spectacle

### Border Radius Scale
- Square (0pt): full-bleed lightbox imagery, top/bottom edges
- Subtle (6pt): inner image-cell rounding in compact density
- Small (8pt): job chips, parameter chips, ghost buttons
- Standard (12pt): job-grid container, search bar, cards
- Comfortable (16pt): bottom sheets, modals
- Prompt Pill (25pt): the prompt bar (full-height pill)
- Pill (999pt): primary buttons, segmented backgrounds
- Circle (50%): the Imagine send button, avatars

## 6. Depth & Elevation

Midjourney is radically flat — depth would distract from imagery. Elevation exists only as separation, never as decoration.

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Job cards, feed, all content |
| Hairline (Level 1) | 1pt `#2A2A2A` border | Prompt bar, chips, inputs, segmented divider |
| Floating (Level 2) | `rgba(0,0,0,0.6) 0 8px 24px` + 1pt `#2A2A2A` | Bottom sheets, parameter helper strip, menus |
| Scrim (Level 3) | `rgba(0,0,0,0.7)` overlay | Behind the lightbox and modal sheets |

**Shadow Philosophy**: On true black, drop-shadows are nearly invisible — so Midjourney uses a 1pt `#2A2A2A` border as the primary "this floats" cue, with shadow only as a faint reinforcement on sheets. The lightbox doesn't elevate; it *replaces* — full-screen black scrim, image centered, no card.

### Motion
- **Job submit**: prompt bar's Imagine button pulses (scale 1 → 0.96 → 1, 120ms); a new shimmering job card slides in at the top over 250ms ease-out, pushing the feed down
- **Render progress**: shimmer sweep across the 2×2 placeholder (1.4s loop, `#1A1A1A → #2A2A2A`), percentage counts up
- **Resolve**: placeholder crossfades to four sharp images over 250ms + scale 0.98 → 1
- **Upscale tap**: U-chip flashes to `#DADADA` (90ms), upscaled result opens in lightbox with a 220ms shared-element zoom from the tapped cell
- **Lightbox swipe**: 1:1 finger-tracked paging between the four quadrants, 280ms spring (damping 0.85) on release
- **Parameter strip**: slides up 8pt + fades in over 180ms on prompt focus; slides down on blur
- **Tab change**: instant glyph color swap (no slide) — Midjourney keeps navigation motion silent
- **Haptic feedback**: soft impact on Imagine submit, light tick on chip tap, success haptic on job complete

## 7. Do's and Don'ts

### Do
- Use true black (`#000000`) as the canvas — OLED black makes imagery glow
- Treat white (`#FFFFFF`) as the only primary — Imagine button, active tab, U-chips
- Render the 2×2 grid as the hero — it carries 100% of the screen's color
- Render prompts and `--flags` in monospace — the prompt is code, not prose
- Use the U1–U4 / V1–V4 chip grammar verbatim — white U-chips, dark V-chips
- Keep chrome a grey ramp (`#FFFFFF → #A1A1A1 → #6E6E6E`) — never tint it
- Reshape the grid container to the prompt's `--ar` while keeping the 2×2 structure
- Use a 1pt `#2A2A2A` border (not shadow) as the "this floats" cue on black
- Reserve Discord blurple (`#4D5BCE`) for account/Discord connect only
- Show a shimmer placeholder + percentage while a job renders

### Don't
- Don't introduce a brand accent color — Midjourney deliberately has none
- Don't use a warm charcoal — the canvas is pure `#000000`, not `#191919`
- Don't tint, overlay, or filter generated imagery — content is full-color, chrome is grey
- Don't render prompts in the sans UI face — monospace is the instruction signal
- Don't add card borders/shadows around job cards — the feed is flat on black
- Don't use a tinted pill on the active tab — active is just `#FFFFFF`, no accent
- Don't reorder the U/V grammar — U is upscale (white), V is variation (dark)
- Don't pad imagery with large insets — 14pt insets, 6pt seams; pixels go to the render
- Don't animate navigation — tab changes are an instant color swap
- Don't use the blurple as a general CTA — it's a Discord-heritage account accent only
- Don't decorate empty space — black *is* the matting around the print

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | 2×2 grid at 14pt insets; prompt bar full-width |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top bar |
| iPhone 15/16 Pro Max | 430pt | Larger grid; same structure |
| iPad (portrait) | 768pt | Feed → 2 columns of job cards; Explore masonry 3 cols |
| iPad (landscape) | 1024pt+ | Feed 2–3 columns; Explore masonry 4 cols; lightbox with side rail |

### Dynamic Type
- Screen title, section headings, body, metadata: full scale
- Tab labels, job chips (U1/V1), parameter chips, prompt monospace: FIXED (grid-layout-sensitive)
- Prompt text in the composer: scales to XL but stays monospace

### Orientation
- All screens support rotation
- Landscape: lightbox becomes the dominant mode (image fills, actions to the side)
- iPad split view: Library/Explore as primary + a job-detail secondary pane

### Touch Targets
- Job chip (U1/V1): 44pt min hit, 13pt mono glyph
- Tab bar icons: 23pt glyph, 44pt hit
- Imagine send button: 36pt circle, 44pt hit
- Grid cell: full-cell tap → lightbox
- Action-row icons: 18pt glyph, 24pt hit (favorite/download/more)

### Safe Area Handling
- Top: top bar respects safe area and Dynamic Island
- Bottom: prompt bar + tab bar respect home indicator
- Keyboard: prompt composer scrolls above keyboard; parameter helper strip docks above the keyboard
- Sides: 14pt content inset; lightbox is full-bleed (ignores insets)

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas: `#000000` (true OLED black, dark-only)
- Surface 1: `#0E0E0E`
- Surface 2: `#1A1A1A`
- Surface 3: `#242424`
- Divider: `#2A2A2A`
- Primary (white): `#FFFFFF`
- White pressed: `#DADADA`
- Text secondary: `#A1A1A1`
- Text tertiary: `#6E6E6E`
- Rate / link blue: `#2D7FF9`
- Discord blurple: `#4D5BCE`
- Success: `#2ECC71`
- Error: `#E5484D`

### Example Component Prompts
- "Build the Midjourney job card in SwiftUI: a monospace prompt line at top (SF Mono 13pt `#A1A1A1`, the key phrase in `#FFFFFF`), then a 2×2 image grid (12pt corner radius, four equal `aspect-ratio: 1` cells, 6pt `#000000` seam), then a 40pt action row (favorite/download/more icons 18pt `#A1A1A1` on the left, U1–U4 chip cluster on the right). 18pt gap between job cards. Canvas `#000000`."

- "Create the Midjourney prompt bar: 50pt tall pinned pill, `#1A1A1A` background, 1pt `#2A2A2A` border, 25pt corner radius. Leading 18pt inset placeholder 'What will you imagine?' in `#6E6E6E`. Trailing 36pt circular Imagine button — `#FFFFFF` fill, `#000000` arrow glyph. On focus, brighten border to `#3A3A3A` and slide up a horizontal parameter helper strip (`--ar 1:1`, `--ar 16:9`, `--v 6`, `--style raw`, `--stylize 250`) as monospace chips."

- "Render the Midjourney U/V chip cluster: U1 U2 U3 U4 as white chips (`#FFFFFF` bg, `#000000` text, SF Mono 13pt w600, 8pt corner radius, 8pt×14pt padding) — these are the do-it-now upscale actions. V1 V2 V3 V4 as dark chips (`#1A1A1A` bg, `#FFFFFF` text, 1pt `#2A2A2A` border, same shape). A trailing 🔄 'Re-roll' dark chip re-runs the original prompt. After an upscale, dim its U-chip to `#1A1A1A`/`#6E6E6E`."

- "Build the Midjourney bottom tab bar: 70pt + safe area, `rgba(0,0,0,0.92)` with 20px backdrop blur, 0.5pt `#2A2A2A` top border. Five tabs: Create, Explore, Search, Library, Profile — 23pt glyphs, Inter 10pt w500 labels. Active = `#FFFFFF` glyph+label with slightly thicker stroke and NO tint pill (Midjourney has no accent). Inactive = `#6E6E6E`."

- "Create the Midjourney render-progress state: a 2×2 placeholder grid with an animated shimmer sweep (`#1A1A1A → #2A2A2A`, 1.4s loop) and a centered percentage label in `#A1A1A1`. On completion, crossfade (250ms) to the four sharp images with a scale 0.98 → 1."

- "Build the Midjourney lightbox: full-bleed image on `#000000`, no card, 1:1 finger-tracked horizontal paging between the four quadrants (280ms spring on release). Bottom action bar: Upscale, Vary (Subtle / Strong), Remix, Zoom Out, Download, Favorite — all white-text ghost buttons on a `rgba(0,0,0,0.7)` scrim."

### Iteration Guide
1. Canvas is true black `#000000` — NOT a warm charcoal, NOT off-black; dark-only, no light mode
2. There is NO brand accent — white `#FFFFFF` is the only primary (Imagine, active tab, U-chips)
3. The 2×2 grid is the hero and the only source of color — chrome is a grey ramp, never tinted
4. Prompts and `--flags` are ALWAYS monospace — that's the "this is an instruction" signal
5. U1–U4 chips are white (do-it-now upscale); V1–V4 chips are dark (variations) — never swap the grammar
6. The grid container reshapes to the prompt's `--ar`; the 2×2 structure itself never changes
7. Floating elements use a 1pt `#2A2A2A` border (not shadow) — shadows vanish on black
8. Discord blurple `#4D5BCE` is account/Discord-connect only — never a general CTA
9. Imagery near-bleeds (14pt insets, 6pt seams) — pixels belong to the render, not the chrome
10. Motion is minimal: job slides in, shimmer resolves, chip flashes — navigation is a silent color swap