Midjourney

---
name: midjourney-com-design-system
source: https://www.midjourney.com/
extracted: 2026-07-03
theme: dark  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#292c32"
  ink: "#efefef"
  text-muted: "#bfbfbf"
  surface: "#454954"
  hairline: "#5c6170"
  accent: "#0d0e11"  # deep-blue
  accent-2: "#fcfcfd"  # pale-blue
  accent-3: "#8b7cff"  # blue
fonts:
  primary: "DM Sans"
  mono: "JetBrains Mono"
---

# Midjourney — Design System

Extracted from **https://www.midjourney.com/** on 2026-07-03.

> An independent research lab exploring new mediums of thought and expanding the imaginative powers of the human species.

Every value below is mined from the site's live CSS (120 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as dark: measured neutral usage weighs 60 dark against 32 light. The palette is chromatic: 12 saturated values against 10 neutrals, led by deep-blue (`#0d0e11`). **DM Sans** carries the interface; **JetBrains Mono** handles code and data. Corner radii run .3125rem to 26px.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 77% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is dark (measured neutral weight 60:32). Don't flip individual sections to the opposite mode.
- `.3125rem` is the workhorse radius (x7); treat the other radii as exceptions, not options.
- The only shadows are blur-less hairline offsets — this system barely uses elevation; don't add soft drop shadows.
- One family does the work — build hierarchy with size and weight (400/500/600/700/800/900), not by adding typefaces.
- `JetBrains Mono` is the monospace — keep it for code, data, and metadata roles.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-100` | `#efefef` | 17 | **ink** — lightest neutral, highest contrast against canvas |
| `neutral-200` | `#dddddd` | 7 | — |
| `neutral-300` | `#cfcfcf` | 8 | — |
| `neutral-400` | `#bfbfbf` | 13 | **text-muted** — most-used mid-luminance neutral |
| `neutral-500` | `#abafba` | 2 | — |
| `neutral-600` | `#8f94a3` | 4 | — |
| `neutral-700` | `#73798c` | 2 | — |
| `neutral-800` | `#5c6170` | 2 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-900` | `#454954` | 2 | **surface** — neutral closest to canvas luminance |
| `neutral-950` | `#292c32` | 8 | **canvas** — darkest neutral, matches the measured dark-leaning theme |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `deep-blue` | `#0d0e11` | 116 | **accent** — most-used chromatic color |
| `pale-blue` | `#fcfcfd` | 56 | **accent-2** — supporting chromatic color |
| `blue` | `#8b7cff` | 6 | **accent-3** — supporting chromatic color |
| `yellow` | `#d29922` | 6 | — |
| `deep-blue-2` | `#061434` | 6 | — |
| `blue-2` | `#5865f2` | 4 | — |
| `deep-purple` | `#2d0e36` | 4 | — |
| `deep-blue-3` | `#060522` | 3 | — |
| `red` | `#f2330d` | 3 | — |
| `blue-3` | `#314062` | 3 | — |
| `cyan` | `#8fc5ff` | 3 | — |
| `blue-4` | `#434e6f` | 3 | — |

### Modern color values (kept verbatim)

- `oklch(.971 .013 17.38)`
- `oklch(.808 .114 19.571)`
- `oklch(.704 .191 22.216)`
- `oklch(.637 .237 25.331)`
- `oklch(.577 .245 27.325)`
- `oklch(.505 .213 27.518)`
- `oklch(.444 .177 26.899)`
- `oklch(.396 .141 25.723)`
- `oklch(.258 .092 26.042)`
- `oklch(.98 .016 73.684)`
- `oklch(.705 .213 47.604)`
- `oklch(.646 .222 41.116)`

### Dark mode

The source defines 28 dark-mode variants (via dark selector). Both halves of the system, first 28:

| Token | Light | Dark |
| --- | --- | --- |
| `--tw-border-style` | — | `none` |
| `--tw-gradient-position` | — | `to top in oklab` |
| `--tw-gradient-from` | — | `#1b1d22` |
| `--tw-gradient-via` | — | `var(--color-dark-900)` |
| `--tw-gradient-to` | — | `color-mix(in oklab,var(--color-dark-850)30%,transparent)` |
| `--tw-shadow` | — | `0px 10px 28px 0px var(--tw-shadow-color,#0006)` |
| `--tw-shadow-color` | — | `var(--color-black)` |
| `--tw-ring-color` | — | `var(--color-dark-200)` |
| `--tw-ring-offset-color` | — | `var(--color-dark-800)` |
| `--tw-drop-shadow` | — | `drop-shadow(0 2px 4px #ffffff80)` |
| `--tw-prose-body` | — | `var(--tw-prose-invert-body)` |
| `--tw-prose-headings` | — | `var(--tw-prose-invert-headings)` |
| `--tw-prose-lead` | — | `var(--tw-prose-invert-lead)` |
| `--tw-prose-links` | — | `var(--tw-prose-invert-links)` |
| `--tw-prose-bold` | — | `var(--tw-prose-invert-bold)` |
| `--tw-prose-counters` | — | `var(--tw-prose-invert-counters)` |
| `--tw-prose-bullets` | — | `var(--tw-prose-invert-bullets)` |
| `--tw-prose-hr` | — | `var(--tw-prose-invert-hr)` |
| `--tw-prose-quotes` | — | `var(--tw-prose-invert-quotes)` |
| `--tw-prose-quote-borders` | — | `var(--tw-prose-invert-quote-borders)` |
| `--tw-prose-captions` | — | `var(--tw-prose-invert-captions)` |
| `--tw-prose-kbd` | — | `var(--tw-prose-invert-kbd)` |
| `--tw-prose-kbd-shadows` | — | `var(--tw-prose-invert-kbd-shadows)` |
| `--tw-prose-code` | — | `var(--tw-prose-invert-code)` |
| `--tw-prose-pre-code` | — | `var(--tw-prose-invert-pre-code)` |
| `--tw-prose-pre-bg` | — | `var(--tw-prose-invert-pre-bg)` |
| `--tw-prose-th-borders` | — | `var(--tw-prose-invert-th-borders)` |
| `--tw-prose-td-borders` | — | `var(--tw-prose-invert-td-borders)` |

`variables.css` ships these as a `prefers-color-scheme: dark` override block.

## Typography

**DM Sans** is the primary interface face; **JetBrains Mono** is the monospace. Full list by usage:

| Family | Usage |
| --- | --- |
| JetBrains Mono | 31 |
| DM Sans | 2 |

**Size scale (px):** `8`, `10`, `13`, `13.71`, `14`, `14.4`, `15`, `16`, `20`, `20.57`, `24`, `36`

**Weights in use:** `400` (x10), `500` (x3), `600` (x6), `700` (x5), `800` (x2), `900` (x1)

**Line-heights (unitless):** `1.11`, `1.33`, `1.43`, `1.5`, `1.56`, `1.6`, `1.71`, `1.75`

**Letter-spacing values:** `.01rem`

## Spacing

Most-used values (px): `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `16`, `20`, `80`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `.3125rem` | 7 |
| `radius-md` | `7px` | 1 |
| `radius-lg` | `10px` | 4 |
| `radius-xl` | `14px` | 1 |
| `radius-2xl` | `16px` | 1 |
| `radius-3xl` | `20px` | 1 |
| `radius-4xl` | `26px` | 1 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 18px 56px #0000002e` (x2)
- `shadow-md` — `0 18px 54px #00000024` (x2)
- `shadow-lg` — `0 0 #0000` (x1)

### Focus rings (spread-only box-shadows, kept out of the elevation scale)

- `0 0 0 2px #000,0 0 0 4px #4299e1` (x1)

## Breakpoints

`475px`, `500px`, `512px`, `640px`, `768px`, `864px`, `1024px`, `1280px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #0d0e11 */
  color: var(--color-ink); /* #efefef — contrast 16.8:1 */
  border-radius: .3125rem;
  font-weight: 500;
}

.card {
  background: var(--color-surface); /* #454954 */
  border: 1px solid var(--color-hairline); /* #5c6170 */
  border-radius: .3125rem; /* most-used finite radius */
  box-shadow: var(--shadow-sm);
}

.input {
  background: var(--color-canvas); /* #292c32 */
  color: var(--color-ink); /* #efefef — contrast 12.2:1 */
  border: 1px solid var(--color-hairline); /* #5c6170 */
  border-radius: .3125rem;
  /* placeholder color: var(--color-text-muted) #bfbfbf */
}

.nav {
  background: var(--color-canvas); /* #292c32 */
  border-bottom: 1px solid var(--color-hairline); /* #5c6170 */
  color: var(--color-ink); /* #efefef */
  /* inactive links: var(--color-text-muted) #bfbfbf */
  /* active link: var(--color-accent) #0d0e11 — contrast vs canvas 1.4:1 */
}

.modal {
  background: var(--color-surface); /* #454954 */
  border-radius: .3125rem;
  box-shadow: var(--shadow-lg); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #efefef */
}

.input-error {
  border-color: #f2330d; /* mined token: red */
  /* error text: #f2330d on canvas — contrast 3.5:1, below AA; darken for message text */
}
```

## Observations

- 10 of 22 extracted colors are neutrals.
- 3 distinct shadows; the softest reaches 0px blur.
- 8 breakpoints, from 475px to 1280px.
- The site ships a large native token system (120+ custom properties) — prefer those names when extending it.

## Native CSS custom properties

First 40 of 120:

```css
:root {
  --font-mono: JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  --color-red-50: oklch(.971 .013 17.38);
  --color-red-300: oklch(.808 .114 19.571);
  --color-red-400: oklch(.704 .191 22.216);
  --color-red-500: oklch(.637 .237 25.331);
  --color-red-600: oklch(.577 .245 27.325);
  --color-red-700: oklch(.505 .213 27.518);
  --color-red-800: oklch(.444 .177 26.899);
  --color-red-900: oklch(.396 .141 25.723);
  --color-red-950: oklch(.258 .092 26.042);
  --color-orange-50: oklch(.98 .016 73.684);
  --color-orange-500: oklch(.705 .213 47.604);
  --color-orange-600: oklch(.646 .222 41.116);
  --color-orange-900: oklch(.408 .123 38.172);
  --color-amber-100: oklch(.962 .059 95.617);
  --color-amber-300: oklch(.879 .169 91.605);
  --color-amber-400: oklch(.828 .189 84.429);
  --color-amber-500: oklch(.769 .188 70.08);
  --color-amber-600: oklch(.666 .179 58.318);
  --color-amber-700: oklch(.555 .163 48.998);
  --color-amber-800: oklch(.473 .137 46.201);
  --color-amber-900: oklch(.414 .112 45.904);
  --color-amber-950: oklch(.279 .077 45.635);
  --color-yellow-50: oklch(.987 .026 102.212);
  --color-yellow-500: oklch(.795 .184 86.047);
  --color-yellow-600: oklch(.681 .162 75.834);
  --color-yellow-700: oklch(.554 .135 66.442);
  --color-yellow-800: oklch(.476 .114 61.907);
  --color-yellow-900: oklch(.421 .095 57.708);
  --color-green-50: oklch(.982 .018 155.826);
  --color-green-200: oklch(.925 .084 155.995);
  --color-green-500: oklch(.723 .219 149.579);
  --color-green-600: oklch(.627 .194 149.214);
  --color-green-700: oklch(.527 .154 150.069);
  --color-green-800: oklch(.448 .119 151.328);
  --color-green-900: oklch(.393 .095 152.535);
  --color-emerald-50: oklch(.979 .021 166.113);
  --color-emerald-100: oklch(.95 .052 163.051);
  --color-emerald-400: oklch(.765 .177 163.223);
  --color-emerald-500: oklch(.696 .17 162.48);
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-deep-blue`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.