---
version: alpha
name: Midjourney
description: A near-black navy lab where every action glows its own jewel tint
colors:
  on-surface: "#FFFFFF"
  surface: "#06051D"
  primary: "#C8902F"
  sky-link: "#63B3ED"
  ice: "#EBF8FF"
  slate-capsule: "#314062"
  action-navy: "#0F1C36"
  action-plum: "#281730"
  action-magenta: "#2D0E36"
typography:
  caption:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: DM Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  heading:
    fontFamily: DM Sans
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
rounded:
  buttons-capsule: 9999px
  panels-secondary-surfaces: 8px
spacing:
  button-y: 8px
  button-x: 20px
  link-y: 20px
  link-x: 44px
---
# Midjourney — Style Reference
> A near-black navy lab where every action glows its own jewel tint

**Theme:** dark

Midjourney's home is an almost-black navy void — `#06051D`, barely a color, more a pressure — that lets a single floating pill of controls do all the talking. The signature move is the action capsule: a slate `#314062` lozenge holding three buttons, each dropped into its own dark jewel tint (navy, plum, magenta) and lit by a differently-colored glyph, so Sign Up / Log In / Explore read as three distinct moods rather than a button row. Typography inverts the usual order — JetBrains Mono carries the headings and the long-form reading copy, while DM Sans is reserved for chrome and the thin light announcement rail up top. Restraint is total: no gradients, no imagery in the frame, one hairline shadow, one amber `#C8902F` accent used only as editorial credit. It is a research lab's homepage that behaves like a terminal that learned taste.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Navy | `#06051D` | `--color-canvas` | The near-black hero/page ground; also inverts to become the text color on the light announcement rail. |
| White | `#FFFFFF` | `--color-text` | Primary text and heading ink on the dark canvas; also the announcement-rail surface. |
| Sky Link | `#63B3ED` | `--color-link` | Inline text links only (underlined) — never a fill or a button color. |
| Ice | `#EBF8FF` | `--color-text-ice` | Softened light text tint for secondary copy on dark. |
| Amber Credit | `#C8902F` | `--color-accent` | Editorial accent — the "Learn more →" announcement link and the Log In glyph; never a CTA fill. |
| Slate Capsule | `#314062` | `--color-surface-capsule` | The rounded container that carries the three action buttons. |
| Action Navy | `#0F1C36` | `--color-action-navy` | Sign Up button tint — the deep-blue jewel. |
| Action Plum | `#281730` | `--color-action-plum` | Log In button tint — the violet jewel. |
| Action Magenta | `#2D0E36` | `--color-action-magenta` | Explore button tint — the magenta jewel. |

## Tokens — Typography
### JetBrains Mono — headings and long-form reading copy; the lab's monospaced voice · `--font-mono`
- **Substitute:** ui-monospace, SFMono-Regular, Menlo, monospace
- **Weights:** 400 (loaded)
- **Sizes:** 30px headings, 16px body
- **Line height:** ~1.5 body *(inferred)*
- **Letter spacing:** normal *(inferred)*
- **Role:** Section headings (e.g. "About") and the running paragraph copy — monospace used deliberately as the reading face, not just for code.

### DM Sans — chrome, labels, and the announcement rail · `--font-sans`
- **Substitute:** system-ui, -apple-system, Segoe UI, Roboto, sans-serif
- **Weights:** 400, 500, 700 (loaded)
- **Sizes:** 16px, 18px, 14px
- **Line height:** ~1.5 *(inferred)*
- **Letter spacing:** normal *(inferred)*
- **Role:** The top announcement bar, button labels, and UI micro-copy — the sans counterweight to the monospaced body.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 14px | 1.4 *(inferred)* | normal | `--text-caption` |
| Body | 16px | 1.5 *(inferred)* | normal | `--text-body` |
| Lead | 18px | 1.5 *(inferred)* | normal | `--text-lead` |
| Heading | 30px | 1.2 *(inferred)* | normal | `--text-heading` |

## Tokens — Spacing & Shapes
**Base unit:** 8px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| Button Y | 8px | `--spacing-btn-y` |
| Button X | 20px | `--spacing-btn-x` |
| Link Y | 20px | `--spacing-link-y` |
| Link X | 44px | `--spacing-link-x` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons, capsule (fully rounded) | 9999px |
| Panels / secondary surfaces | 8px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Soft | `rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px` | `--shadow-soft` |

### Layout
- **Page max-width:** full-bleed dark canvas *(inferred)*
- **Section gap:** generous vertical void between the pill and the About block
- **Card padding:** 8px 20px inside pill buttons
- **Element gap:** buttons abut inside the slate capsule

## Components
### Action Capsule
**Role:** The floating control cluster — the page's one piece of chrome.
A slate `#314062` lozenge, `9999px` radius, holding three abutting pill buttons. It concentrates the entire primary navigation into a single rounded object centered in the void.

### Sign Up Button
**Role:** Primary account action.
Pill (`9999px`), background `#0F1C36`, padding `8px 20px`, label 16px / weight 500, paired with a teal person-plus glyph. The deep-blue jewel of the trio.

### Log In Button
**Role:** Returning-user action.
Pill (`9999px`), background `#281730`, padding `8px 20px`, 16px / weight 500, with an amber `#C8902F` login glyph — the accent color's only appearance in the capsule.

### Explore Button
**Role:** Browse-the-community action.
Pill (`9999px`), background `#2D0E36`, padding `8px 20px`, 16px / weight 500, with a magenta image glyph. The warmest jewel, signaling discovery.

### Announcement Rail
**Role:** Top-of-page news strip.
Full-width white `#FFFFFF` bar, dark navy `#06051D` text in DM Sans, bold product name, and an amber `#C8902F` "Learn more →" link plus a dismiss ×. The one inverted-light surface on the site.

### Heading
**Role:** Section title.
JetBrains Mono, 30px, weight 400, white `#FFFFFF`, preceded by a small colored info glyph (e.g. the violet "About" mark). Monospace gives headings a technical, lab-notebook cadence.

### Inline Link
**Role:** In-copy reference.
Sky-blue `#63B3ED`, underlined, weight 400, no padding — sits inside monospaced body text as the only chromatic break in a paragraph.

### Body Paragraph
**Role:** Long-form reading copy.
JetBrains Mono, 16px, weight 400, near-white on the navy canvas. Monospace-as-reading-face is the deliberate typographic tell.

### Dismiss Control
**Role:** Close the announcement rail.
Plain × glyph, no fill, aligned right on the white rail.

### Section Marker Glyph
**Role:** Anchor a section heading.
A small colored icon (violet info circle) set immediately left of the monospaced heading — the only decorative element per block.

## Do's and Don'ts
### Do
- Keep the canvas at `#06051D` — near-black navy, not pure black; the faint blue is the identity.
- Give each action its own dark jewel tint (`#0F1C36` / `#281730` / `#2D0E36`) and a differently-colored glyph.
- Set headings and body copy in JetBrains Mono; reserve DM Sans for chrome and the announcement rail.
- Use `#C8902F` amber strictly as editorial accent — announcement link, one glyph — never as a button fill.
- Underline inline links in `#63B3ED` and leave everything else uncolored.

### Don't
- Don't introduce gradients, hero imagery, or a second shadow — the frame stays empty and flat.
- Don't color CTAs with the sky-blue link tone; links and actions are strictly separate.
- Don't round surfaces to anything between 8px and 9999px — it's pill or a soft 8px panel, nothing in between.
- Don't let amber spread beyond its two editorial appearances.
- Don't put reading copy in a sans face; the monospace body is the point.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#06051D` | The near-black navy page ground. |
| 1 | Capsule | `#314062` | Slate container for the action cluster. |
| 2a | Action Navy | `#0F1C36` | Sign Up button surface. |
| 2b | Action Plum | `#281730` | Log In button surface. |
| 2c | Action Magenta | `#2D0E36` | Explore button surface. |
| Inverted | Announcement | `#FFFFFF` | Light top rail against the dark page. |

## Elevation
Depth is carried almost entirely by luminance, not shadow. The slate capsule lifts off the near-black canvas by being lighter; the button jewels recede by being darker than the capsule. A single soft shadow (`rgba(0,0,0,0.1)` 4px/2px) is the only cast-shadow in the system, applied to the action pills. There are no borders doing structural work — separation is pure tonal step.

## Imagery
None in the captured frame. The homepage is deliberately image-free above the fold — a void, a pill, a heading — which reads as confidence for a company whose entire product is imagery. The restraint is the statement.

## Layout
Full-bleed dark canvas with content centered in a wide vertical rhythm: a thin light announcement rail pinned to the very top, a large empty hero, the floating action capsule mid-page, then a left-aligned About block with a glyph-prefixed monospace heading and monospaced running copy. Navigation is not a bar — it's the single capsule object.

## Typography Signature
The system runs two faces in an inverted convention. JetBrains Mono — normally a code face — is the reading and heading voice, giving every line the even, deliberate cadence of a terminal transcript. DM Sans is demoted to chrome: the announcement rail and button labels. The effect is a research-lab register — copy that looks typed, not designed — while the sans chrome keeps interactive elements feeling ordinary and quick. Headings at 30px/400 stay unbold; weight is expressed through the monospace rhythm, not heavy strokes.

## Agent Prompt Guide
## Quick Color Reference
- background: `#06051D` / text: `#FFFFFF` / surface: `#314062` / border: none (tonal steps) / accent: `#C8902F` / primary action: `#0F1C36` (Sign Up jewel — no single unified CTA color; each action gets its own tint)

## Example Component Prompts
1. **Action Capsule**: Build a horizontally-centered floating pill container in slate `#314062`, radius `9999px`, holding three abutting pill buttons with backgrounds `#0F1C36`, `#281730`, `#2D0E36`; each button padded `8px 20px`, label in DM Sans 16px/500 white, prefixed by a small colored icon (teal, amber `#C8902F`, magenta respectively).
2. **Dark Hero Canvas**: Full-bleed background `#06051D` (near-black navy), no imagery, no gradient; content centered with generous vertical whitespace.
3. **Announcement Rail**: Full-width white `#FFFFFF` bar, dark `#06051D` DM Sans text, bold product name inline, amber `#C8902F` "Learn more →" link, right-aligned × dismiss.
4. **Section Heading**: JetBrains Mono, 30px, weight 400, white `#FFFFFF`, preceded by a small violet info-circle glyph; body below in JetBrains Mono 16px/400 with sky-blue `#63B3ED` underlined inline links.
5. **Jewel Button**: Pill button, radius `9999px`, background `#2D0E36`, padding `8px 20px`, DM Sans 16px/500, soft shadow `rgba(0,0,0,0.1) 0 4px 6px -1px, rgba(0,0,0,0.1) 0 2px 4px -2px`.

## Similar Brands
- **Linear** — shares the near-black, low-chroma canvas and the discipline of one hairline shadow doing all the depth work.
- **Vercel** — kindred austerity: black ground, monospace accents, imagery withheld as a flex.
- **Raycast** — the same dark, glyph-forward command-palette register and pill controls.
- **Arc (The Browser Company)** — playful jewel-tinted surfaces set against a restrained dark shell.
- **Anthropic** — an "independent research lab" voice expressed through typographic calm rather than decoration.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #06051D;
  --color-text: #FFFFFF;
  --color-link: #63B3ED;
  --color-text-ice: #EBF8FF;
  --color-accent: #C8902F;
  --color-surface-capsule: #314062;
  --color-action-navy: #0F1C36;
  --color-action-plum: #281730;
  --color-action-magenta: #2D0E36;

  /* Typography — Families */
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --text-body: 16px;
  --text-lead: 18px;
  --text-heading: 30px;
  --leading-body: 1.5;
  --leading-heading: 1.2;

  /* Spacing */
  --spacing-btn-y: 8px;
  --spacing-btn-x: 20px;
  --spacing-link-y: 20px;
  --spacing-link-x: 44px;

  /* Border Radius */
  --radius-pill: 9999px;
  --radius-md: 8px;

  /* Shadow */
  --shadow-soft: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px;
}
```
### Tailwind v4
```css
@theme {
  --color-canvas: #06051D;
  --color-text: #FFFFFF;
  --color-link: #63B3ED;
  --color-text-ice: #EBF8FF;
  --color-accent: #C8902F;
  --color-surface-capsule: #314062;
  --color-action-navy: #0F1C36;
  --color-action-plum: #281730;
  --color-action-magenta: #2D0E36;

  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-caption: 14px;
  --text-body: 16px;
  --text-lead: 18px;
  --text-heading: 30px;
  --leading-body: 1.5;
  --leading-heading: 1.2;

  --spacing-btn-y: 8px;
  --spacing-btn-x: 20px;
  --spacing-link-y: 20px;
  --spacing-link-x: 44px;

  --radius-pill: 9999px;
  --radius-md: 8px;
}
```