A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Midjourney, in one page
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 +
--flagparameters; 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)
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
--flagsin 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
--arwhile keeping the 2×2 structure - Use a 1pt
#2A2A2Aborder (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
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Midjourney design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- true black: #000000
- White: #ffffff
- White Pressed: #dadada
- Rate / Link Blue: #2d7ff9
- Discord Blurple: #4d5bce
- True Black Canvas: #000000
- Surface 1: #0e0e0e
- Surface 2: #1a1a1a
- Surface 3: #242424
- Divider: #2a2a2a
Type:
- families: Inter, UI Sans, SF Mono, IBM Plex Mono
- scale: 10, 12, 13, 14, 15, 16, 19, 22, 32
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 8, 12, 25
- elevation: Use a 1pt `#2A2A2A` border (not shadow) as the "this floats" cue on black
Spacing: 8, 10, 12, 14, 18
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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 |
Type scaleRead the full spec
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 Monoon iOS (system monospace);IBM Plex MonoorJetBrains Monoas a bundled alternative. Prompts and--flagsalways 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
--flaggrammar, 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).
Components and layoutRead the full spec
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#E5484Dfor 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
#1A1A1Abg /#6E6E6Etext (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#2A2A2Ahairline in compact density - Tap a cell → full-screen lightbox with U/V actions for that quadrant
- While rendering: shimmer placeholder (
#1A1A1A → #2A2A2Asweep) + 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 —
#FFFFFFfill,#000000arrow glyph - On focus: border brightens to
#3A3A3A, parameter helper chips (--ar,--v,--stylize) slide up above - Parameters typed inline as
--flag valuerender in monospace as the user types
Navigation
Bottom Tab Bar
- Height: 70pt + safe area
- Background:
rgba(0,0,0,0.92)withbackdrop-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:
#FFFFFFtext + 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
magnifyingglass18pt#6E6E6E - Placeholder "Search the community" 14pt
#6E6E6E - Focus: 1pt
#2D7FF9border
Prompt Composer (full editor)
- Multi-line text area, monospace,
#FFFFFFtext 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
Responsive behaviourRead the full spec
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)
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-midjourney {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #555555;
--heading-color: #555555;
--link-color: #0767f5;
--link-hover-color: #0652c3;
--border-color: #e0e0e0;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(85,85,85,0.06);
--card-hover-shadow: 0 6px 18px rgba(85,85,85,0.12);
--header-bg: #555555;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #737373;
--button-bg: #2d7ff9;
--button-text-color: #000000;
--button-hover-bg: #0763ec;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #f5f5f5;
--button-secondary-text-color: #555555;
--button-secondary-hover-bg: #ebebeb;
--button-secondary-border: 1px solid #e0e0e0;
--prompt-bg: #f7f7f7;
--prompt-text-color: #555555;
--base-font: var(--font-inter);
--heading-font: var(--font-helvetica);
--card-border-radius: 12px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- grammarly 81.8%
- hevy 81.3%
- clubhouse 81.3%
- lemon8 80.8%
- microsoft teams 80.7%
Where this came from
- Source document
ios/design-md/misc/midjourney/DESIGN.md· 24.4 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.