--- version: alpha name: Midjourney description: A near-black editorial gallery where DM Sans sets quiet labels over a masonry of imagery, every surface is a graded charcoal, and a single molten orange-red — the "splash tone" — flares only on the active path so the generated images stay the brightest thing on screen. colors: # Surface / canvas background: "#0d0e12" # the deep charcoal app canvas surface: "#16181d" # raised panels, cards, sidebar surface-raised: "#1b1d22" # hovered panels, dropdowns surface-strong: "#1f2228" # tooltips, strong panels lightbox: "#090a0c" # the near-black image lightbox / overlay scrim input: "#1e1f25" # text-field and search fills # Ink / text ink: "#ebecef" # near-white primary text — headings and body ink-secondary: "#747a8b" # supporting copy, quiet labels, section headers ink-tertiary: "#aaaebb" # mid-emphasis labels ink-muted: "#5c6170" # captions, metadata, disabled text on-accent: "#ffffff" # text on the orange splash button # Brand accent — Midjourney "splash tones" (molten orange-red) primary: "#f2330d" # the singular accent: active nav, sparkle, primary CTA primary-hover: "#c2290a" # solid-button / active-state hover (deepens) primary-bright: "#f55c3d" # lighter splash for hovers and highlights primary-soft: "#2a1410" # accent tint fill on dark (pill active bg) # was rgba(242,51,13,0.12) — Google format requires hex primary-deep: "#911f08" # pressed / deepest splash # Borders border: "#292c32" # hairline dividers, tile gutters, card edges border-strong: "#434651" # input outlines, stronger separators # Shadow tints (opaque approximations for the elevation table) shadow-soft: "#000000" # was rgba(0,0,0,0.38) — Google format requires hex shadow-deep: "#000000" # was rgba(0,0,0,0.6) — Google format requires hex typography: display-hero: fontFamily: "DM Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 64px fontWeight: 600 lineHeight: 1.05 letterSpacing: -1.4px display: fontFamily: "DM Sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 1.1 letterSpacing: -0.96px heading: fontFamily: "DM Sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif" fontSize: 30px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.6px heading-sub: fontFamily: "DM Sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.4px body-large: fontFamily: "DM Sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.45px body: fontFamily: "DM Sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px label: fontFamily: "DM Sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px label-caps: fontFamily: "DM Sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.6px caption: fontFamily: "DM Sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px code-mono: fontFamily: "JetBrains Mono, DM Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px spacing: xs: 4px sm: 6px md: 8px lg: 14px xl: 20px 2xl: 24px 3xl: 32px 4xl: 48px 5xl: 64px 6xl: 96px rounded: sm: 2px md: 6px lg: 8px xl: 12px 2xl: 16px 3xl: 24px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-accent}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: 10px 18px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-accent}" button-primary-active: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-accent}" button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: 10px 18px button-secondary-hover: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: 8px 14px button-ghost-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" nav-item: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: 10px 14px nav-item-active: backgroundColor: "{colors.primary-soft}" textColor: "{colors.primary}" card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 16px card-tile: backgroundColor: "{colors.lightbox}" textColor: "{colors.ink}" rounded: "{rounded.sm}" padding: 0px composer: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 18px composer-focus: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" input: backgroundColor: "{colors.input}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 10px 14px input-focus: backgroundColor: "{colors.input}" textColor: "{colors.ink}" link: textColor: "{colors.primary}" typography: "{typography.body}" padding: 0px link-hover: textColor: "{colors.primary-bright}" label-section: textColor: "{colors.ink-secondary}" typography: "{typography.label-caps}" padding: 0px badge: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink-tertiary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-accent: backgroundColor: "{colors.primary}" textColor: "{colors.on-accent}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px code-block: backgroundColor: "{colors.lightbox}" textColor: "{colors.ink-tertiary}" typography: "{typography.code-mono}" rounded: "{rounded.md}" padding: 12px 14px --- # Midjourney Design System ## Overview Midjourney's app is engineered to vanish. The canvas is a deep, graded charcoal (`{colors.background}`) and the lightbox behind any opened image goes nearly to black (`{colors.lightbox}`), because the entire interface exists to frame imagery — a research lab built as a gallery. Tiles of generated art sit in a tight masonry separated only by thin charcoal gutters (`{colors.border}`), edge to edge, with almost no chrome between them. There are no big headlines, no marketing flourishes, no decorative color in the layout itself. The design's whole job is to be the darkest, quietest possible mount so that the saturated, high-contrast images are always the brightest thing on the screen. The signature move is the restraint of its single accent. Midjourney owns a molten orange-red — internally the "splash tone" (`{colors.primary}`) — and it is the only saturated color anywhere in the chrome. It does not paint panels or fill backgrounds. It flares on exactly one thing at a time: the active nav item, the "Sign Up" call-to-action, a sparkle on a premium control. Everything else in the UI is a step on a single charcoal-to-near-white ladder. Because the splash is rationed so hard, that one warm flare reads as the system's pulse — the path you're on, the action that matters — against an otherwise monochrome dark field. Typography is deliberately understated. The interface runs on **DM Sans**, a geometric grotesk, almost entirely at small sizes and quiet weights: 12-14px labels in `{colors.ink-secondary}`, section headers set small and lightly tracked. Display sizes exist but the app rarely deploys them — text is a labeling layer, not a voice. The near-white ink (`{colors.ink}`) sits at high but not harsh contrast on charcoal, and the secondary/tertiary grays (`{colors.ink-secondary}`, `{colors.ink-muted}`) do the work of pushing chrome into the background. Pill-shaped nav items and buttons soften the otherwise sharp, image-first geometry. The overall impression is a serious, focused, almost cinematic dark room — a tool that treats its own UI as a frame and the images as the art. **Key Characteristics:** - Deep graded-charcoal canvas (`{colors.background}`) with a near-black lightbox (`{colors.lightbox}`) — the UI is a dark mount for imagery - A single molten orange-red "splash tone" (`{colors.primary}`) as the only saturated color — rationed to the active path and the CTA - **DM Sans** geometric grotesk throughout, used mostly at small quiet sizes (12-14px labels) - A full charcoal ladder of surfaces (`{colors.background}` → `{colors.surface}` → `{colors.surface-raised}` → `{colors.surface-strong}`) for layering on dark - Near-white ink (`{colors.ink}`) at controlled contrast; grays (`{colors.ink-secondary}`, `{colors.ink-muted}`) push chrome back - Edge-to-edge masonry of image tiles separated by thin charcoal gutters (`{colors.border}`) — minimal radius (`{rounded.sm}`) on the art - Pill-shaped nav items and buttons (`{rounded.pill}`) — soft handles on a sharp, image-first layout - Section labels set small, semibold, and lightly tracked (`{typography.label-caps}`) in secondary gray - JetBrains Mono (`{typography.code-mono}`) for prompts, parameters, and technical strings - Text is a labeling layer, not a voice — display type exists but is rarely deployed in the app - Soft, deep shadows used sparingly for overlays and the lightbox scrim; tiles separate by gutter, not shadow - Active-state fill is a dark splash tint (`{colors.primary-soft}`) carrying the orange text — the pulse of the nav ## Colors ### Surface & Canvas - **Charcoal Canvas** (`{colors.background}`): The deep app background — graded near-black with a faint cool cast. - **Panel** (`{colors.surface}`): Raised panels, cards, and the sidebar — a step up from canvas. - **Raised / Strong** (`{colors.surface-raised}`, `{colors.surface-strong}`): Hovered panels, dropdowns, and tooltips, layering further up the dark ladder. - **Lightbox** (`{colors.lightbox}`): The near-black image lightbox and overlay scrim — the darkest surface, reserved for framing art. - **Input** (`{colors.input}`): Text-field and search fills. ### Ink / Text - **Near-White** (`{colors.ink}`): Primary text — headings and body. High but controlled contrast on charcoal. - **Secondary Gray** (`{colors.ink-secondary}`): The default chrome/label color — supporting copy and section headers. - **Tertiary / Muted** (`{colors.ink-tertiary}`, `{colors.ink-muted}`): Mid-emphasis labels, captions, metadata, and disabled text. ### Brand Accent - **Splash Tone** (`{colors.primary}`): The singular molten orange-red. Active nav, the CTA, sparkle controls. Used only on the active path. - **Splash Hover / Deep** (`{colors.primary-hover}`, `{colors.primary-deep}`): Deepening states for the solid button and pressed accents. - **Splash Bright** (`{colors.primary-bright}`): A lighter splash for hovers and highlights. - **Splash Soft** (`{colors.primary-soft}`): The dark accent-tint fill behind an active nav pill, carrying orange text. ### Borders & Shadow Tints - **Hairline** (`{colors.border}`): Tile gutters, card edges, and dividers — the primary structural device on dark. - **Strong Border** (`{colors.border-strong}`): Input outlines and stronger separators. - **Shadow Tints** (`{colors.shadow-soft}`, `{colors.shadow-deep}`): Opaque stand-ins for the soft overlay and deep lightbox shadows (originals were rgba black — flattened for the Google spec). ## Typography ### Font Family - **Primary**: `DM Sans` — a geometric grotesk. Fallbacks: `system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif`. Carries the whole UI, mostly at small sizes. - **Monospace**: `JetBrains Mono` (with `DM Mono` and `ui-monospace` fallbacks) — for prompts, parameters, and technical strings. - **Tracking**: gentle negative tracking on the rare large display sizes; near-zero on body; slight positive tracking on small caps labels. ### Hierarchy The full type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 64px / 600 / -1.4px — marketing hero (rare in-app) | | `display` | 48px / 600 / -0.96px — large section titles | | `heading` | 30px / 600 — page headings | | `heading-sub` | 24px / 600 — sub-section headings | | `body-large` | 18px / 500 — emphasized copy, lead lines | | `body` | 16px / 400 — standard body | | `label` | 14px / 500 — nav labels, button text | | `label-caps` | 12px / 600 / 0.6px — small section labels (AESTHETICS, COMMUNITY) | | `caption` | 12px / 400 — captions, metadata, badges | | `code-mono` | 13px / 400 — JetBrains Mono prompts and parameters | ### Principles - **Type is a labeling layer**: the interface is mostly small, quiet labels — text frames the imagery, it does not perform. - **Quiet weights, gray ladder**: lean on `{colors.ink-secondary}` and small sizes to keep chrome recessive; bring ink to full `{colors.ink}` only for what matters. - **Mono for the machine**: prompts and parameters get JetBrains Mono so the "instructions to the model" read as code. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: a tight 4/6/8 rhythm for dense controls, opening to 24-48px between regions. The masonry itself runs on small, consistent gutters so the imagery reads as a near-continuous wall. ### Grid & Container - A persistent left sidebar (Explore, Create, Edit, Organize, plus AESTHETICS and COMMUNITY groups) pinned full-height. - A pinned composer ("Log in to start creating…" / prompt bar) across the top of the content area. - The main content is an edge-to-edge responsive masonry of image tiles (4 → 2 → 1 columns) on the charcoal canvas. ### Whitespace Philosophy - **The canvas is a frame**: negative space is dark and deliberate; it exists to isolate and elevate the imagery. - **Dense chrome, open gallery**: the sidebar and toolbars pack controls tightly while the gallery breathes edge to edge. - **Gutters, not boxes**: tiles separate by thin charcoal gutters rather than card chrome or shadows. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow; charcoal gutters `{colors.border}` only | The masonry, list rows, most chrome | | Raised (Level 1) | Surface step-up `{colors.surface}` + hairline | Panels, cards, the sidebar | | Floating (Level 2) | `0 6px 20px` soft (`{colors.shadow-soft}`) | Dropdowns, the model/parameter picker, tooltips | | Overlay (Level 3) | `0 16px 48px` deep (`{colors.shadow-deep}`) + near-black scrim (`{colors.lightbox}`) | The image lightbox and modals | | Focus Ring | `0 0 0 2px` `{colors.primary}` | Splash-tone focus ring on the composer and inputs | **Shadow Philosophy**: On a dark canvas, depth comes mostly from a ladder of charcoal surfaces, not from shadow. Elevation is reserved for floating menus and the lightbox, where soft, deep black shadows plus a near-black scrim pull the focused image off the page. The one bright signal in the depth system is the splash-tone focus ring. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `sm` | 2px | Image tiles — minimal radius keeps the art rectangular | | `md` | 6px | Small controls, code blocks | | `lg` | 8px | Cards, inputs | | `xl` | 12px | Larger panels | | `2xl` | 16px | Big containers, dialogs | | `3xl` | 24px | Oversized panels | | `pill` | 9999px | Nav items, buttons, badges | The geometry is a deliberate split: imagery stays nearly square-cornered (`{rounded.sm}`) so the art reads honestly, while interactive handles — nav items, buttons, badges — go fully pill (`{rounded.pill}`) to feel soft and tappable. Containers fall in a moderate 8-16px middle. ## Components The complete component spec lives in the `components:` token block. ### Buttons - **`button-primary`** — Splash-tone (`{colors.primary}`) fill, white text, pill radius. The one bright CTA (e.g. "Sign Up"); hover deepens to `{colors.primary-hover}`, press to `{colors.primary-deep}`. - **`button-secondary`** — Panel-surface fill, near-white text, pill radius. The neutral default; hover lifts to `{colors.surface-raised}`. - **`button-ghost`** — Transparent on canvas, secondary-gray text — toolbar and inline actions. ### Navigation - **`nav-item`** — Secondary-gray label on transparent canvas, pill radius. **`nav-item-active`** fills `{colors.primary-soft}` (dark splash tint) and carries the label in splash-tone orange (`{colors.primary}`) — the pulse of the sidebar. ### Cards & Tiles - **`card`** — Panel surface, 8px radius, hairline edge. - **`card-tile`** — The gallery image tile: near-black (`{colors.lightbox}`) mount, minimal `{rounded.sm}` radius, zero padding — pure image. ### Composer & Inputs - **`composer`** — The top prompt bar: panel surface, pill radius, generous padding. **`composer-focus`** lifts the surface and brings the splash focus ring. - **`input`** — Input fill (`{colors.input}`), `{colors.border-strong}` outline, 8px radius. **`input-focus`** keeps the fill and adds the splash focus ring. ### Labels, Links & Badges - **`label-section`** — Small semibold lightly-tracked section labels (AESTHETICS, COMMUNITY) in secondary gray. - **`link`** — Splash-tone text; hover brightens to `{colors.primary-bright}`. - **`badge`** — Strong-surface fill, tertiary-gray text, pill radius. **`badge-accent`** flips to a splash-tone fill for the rare bright marker. - **`code-block`** — Near-black fill, tertiary-gray JetBrains Mono — prompts and parameters. ## Do's and Don'ts ### Do - Keep the canvas deep charcoal (`{colors.background}`) and go near-black (`{colors.lightbox}`) behind imagery — the UI is a dark frame - Ration the splash tone (`{colors.primary}`) to the active path and the single CTA — it is the system's only saturated color - Build depth from the charcoal surface ladder (`{colors.surface}` → `{colors.surface-strong}`), not from shadows - Keep text quiet: small DM Sans labels in `{colors.ink-secondary}`, bringing ink to full `{colors.ink}` only where it matters - Separate image tiles with thin charcoal gutters (`{colors.border}`) and minimal `{rounded.sm}` corners - Use pill shapes (`{rounded.pill}`) for nav items, buttons, and badges - Fill the active nav with the dark splash tint (`{colors.primary-soft}`) and carry the orange label (`{colors.primary}`) - Set prompts and parameters in JetBrains Mono (`{typography.code-mono}`) — instructions to the model read as code - Reserve real elevation (soft/deep shadows) for floating menus and the lightbox ### Don't - Don't use a light canvas for the gallery — Midjourney's hallmark is the dark editorial mount (a light mode exists but the dark is the signature) - Don't paint panels, headers, or backgrounds in the splash tone — it flares on the active path only, never as decoration - Don't add a second saturated accent — the system is monochrome charcoal plus one orange-red - Don't round the image tiles heavily — keep them near-rectangular (`{rounded.sm}`) so the art reads honestly - Don't deploy big display headlines inside the app — text is a labeling layer, not a voice - Don't separate tiles with heavy card chrome or drop shadows — thin gutters do the work - Don't push primary text to harsh pure white — keep it the controlled near-white (`{colors.ink}`) --- ## Responsive Behavior ### Breakpoints *(The app behaves to standard Tailwind-style stops; explicit values below.)* | Name | Width | Key Changes | |---|---|---| | Mobile | <640px | Sidebar collapses to a bottom bar / drawer; masonry drops to 1 column; composer goes full-width; controls stack | | Tablet | 640–1023px | Sidebar may collapse to an icon rail; masonry at 2 columns | | Desktop | 1024–1279px | Full persistent sidebar; masonry at 3 columns | | Large | ≥1280px | Sidebar + 4-column masonry; content max ~1608px | ### Touch Targets - Pill nav items and buttons run ~40px tall with comfortable padding - Image tiles are large tap targets; small caption/metadata stays legible at 12px ### Collapsing Strategy - **Navigation**: persistent left sidebar → icon rail → bottom bar / drawer on mobile - **Masonry**: 4 → 3 → 2 → 1 columns as width drops, gutters holding constant - **Composer**: stays pinned at the top, going edge-to-edge on mobile - **Spacing**: region padding compresses while the tile gutters stay tight ### Image Behavior - Imagery is the content: tiles fill a responsive masonry, opening into a near-black (`{colors.lightbox}`) lightbox; aspect ratios are preserved and tiles reflow as grid children --- ## Agent Prompt Guide ### Quick Color Reference - Background: Charcoal Canvas (`{colors.background}`) - Text: Near-White (`{colors.ink}`) - Brand accent: Splash Tone orange-red (`{colors.primary}`) - Secondary text: Secondary Gray (`{colors.ink-secondary}`) - Border: Charcoal Hairline (`{colors.border}`) - Primary CTA: Splash Tone (`{colors.primary}`) — the only saturated fill ### Example Component Prompts - "Build a dark sidebar on charcoal (`{colors.background}`): pill nav items with secondary-gray (`{colors.ink-secondary}`) labels; the active item fills the dark splash tint (`{colors.primary-soft}`) and carries its label and icon in splash-tone orange (`{colors.primary}`)" - "Create the top composer: panel surface (`{colors.surface}`), `{rounded.pill}` radius, 12px 18px padding, a muted (`{colors.ink-muted}`) placeholder, and a 2px splash-tone (`{colors.primary}`) focus ring on focus" - "Lay out an edge-to-edge image masonry: near-black (`{colors.lightbox}`) tiles at minimal `{rounded.sm}` radius, separated by thin charcoal (`{colors.border}`) gutters, 4 columns scaling to 1" - "Make the primary CTA: splash-tone (`{colors.primary}`) fill, white text, `{rounded.pill}` radius, 10px 18px padding, hover deepening to `{colors.primary-hover}` — e.g. 'Sign Up'" - "Add a small section label: 12px DM Sans, weight 600, letter-spacing 0.6px, secondary gray (`{colors.ink-secondary}`) — e.g. 'AESTHETICS'" - "Render a prompt code block: near-black (`{colors.lightbox}`) fill, tertiary-gray (`{colors.ink-tertiary}`) JetBrains Mono at 13px, `{rounded.md}` radius" ### Iteration Guide 1. Start on deep charcoal (`{colors.background}`). If your gallery is on a light surface, darken it — the dark mount is the signature. 2. The splash tone (`{colors.primary}`) is the active path and the CTA only. If it's painting a panel or header, neutralize that and save the orange for the one bright signal. 3. Build depth from the charcoal surface ladder (`{colors.surface}` → `{colors.surface-strong}`), not from shadows. 4. Keep text quiet — small DM Sans labels in `{colors.ink-secondary}`; reserve full `{colors.ink}` and any display size for what truly matters. 5. Image tiles stay near-rectangular (`{rounded.sm}`) and separate by thin gutters; pill (`{rounded.pill}`) the nav and buttons. 6. Set prompts/parameters in JetBrains Mono so the model instructions read as code. 7. Reserve elevation for floating menus and the lightbox; the lightbox scrim goes near-black (`{colors.lightbox}`) to isolate the image. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Midjourney. Brand names and trademarks belong to their respective owners.