---
version: alpha
name: Midjourney
website: "https://www.midjourney.com"
description: >-
  A monospace-led, midnight-canvas marketing surface for the independent AI image-and-video research lab. The system anchors on a deep gradient navy floor (#06051d through #0f1c36) and runs JetBrains Mono at weight 400 across every text role — 30px h1, 16px body, 14px buttons — paired with DM Sans only inside the pill CTAs. Voltage comes from a Splash coral (#f2330d / #ff360f) reserved for forbidden / destructive states, while ASCII halo art renders the wordmark itself. Geometry is binary — 8px corners on cards, 9999px pills on every CTA — and the hero is built from typographic glyphs rather than illustration.

seo:
  title: "Midjourney Design System for React — JetBrains Mono, midnight #06051d, ASCII halo"
  metaDescription: "Midjourney's design system as a DESIGN.md file. Midnight #06051d canvas, JetBrains Mono headlines, Splash coral #f2330d, 21 components. For React and AI tools."
  highlights:
    - "Monospace as voice — JetBrains Mono carries h1 at 30px / line-height 48.75px and body at 16px / 26px, the same family across every text role"
    - "ASCII halo wordmark — the hero literally types Midjourney out of glyphs rendered against a deep navy gradient, no logotype SVG"
    - "Splash coral scarcity — #f2330d wired to --color-splash-forbidden-darker, reserved for destructive states, never decorative"
    - "Two-radius geometry — 8px on cards and inputs, 9999px pills on every CTA, no 4px or 16px intermediates on chrome"
    - "Footer-gravity layout — the page anchors on a contact ledger with email handles (hr@, picture@, press@) typeset in mono, not a marketing CTA band"
  tags:
    - "AI & LLM Platforms"
    - "Design & Creative Tools"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Midjourney's marketing page is the rarest archetype in the AI-tool category — a research-lab brochure that reads like a terminal log. The canvas is a deep midnight gradient running from "#06051d" to "#0f1c36", and the hero is not a generated image but the wordmark itself typed out of ASCII glyphs against that navy field. Headlines, body, navigation, and even the section labels ("About", "Projects", "Careers", "Contact") all render in JetBrains Mono at weight 400. There is no serif display, no humanist sans body — the same monospace family carries every role on the page. The only typographic exception is DM Sans, used inside the three pill CTAs ("Sign Up", "Log In", "Explore") and nowhere else.

    This DESIGN.md packages that discipline into a machine-readable spec built on the Google Labs format. Inside: 22 color tokens grouped into brand (Midnight "#06051d", Deep Navy "#0f1c36", Splash coral "#f2330d"), surface (Dark BG "#0d0e12", Dark Lightbox "#090a0c", Dark Skeleton "#16181d"), graded slate text ("#747a8b", "#8f94a3", "#aaaebb"), and a full Splash Tones ramp from "#feebe7" down to "#300a03". Five typography tokens all on JetBrains Mono — display-h1 at 30px / 48.75px leading, body-md at 16px / 26px, button-md at 16px / 24px, label-sm at 14px / 22.75px — plus a single DM Sans button face. Two radii ("8px", "9999px"), a 4px-base spacing scale, and 21 component recipes.

    Drop the file into Claude, Cursor, or GitHub Copilot and the agent will reproduce Midjourney's monospace-everywhere discipline — JetBrains Mono on every heading, splash coral wired only to destructive states, pills on every CTA — rather than defaulting to a generic dark-AI theme. Or reference the tokens directly: every hex and tracking value is a quoted string ready for Tailwind config or CSS variables. The system is worth studying because it answers a hard category question with conviction: when the product output is generated imagery, the marketing chrome can be radically typographic.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.midjourney.com"
      title: "Midjourney — official site"
      description: "The independent research lab behind one of the most widely used AI image generators."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Midjourney's primary brand color?"
      answer: "Midjourney has no traditional CTA accent. The brand voltage is structural — a midnight gradient from #06051d (Deep Midnight) through #0f1c36 (Deep Navy) carries the canvas, and the primary Sign Up pill itself is filled with #0f1c36 against the lighter gradient stop. The only chromatic accent is Splash coral #f2330d, wired into the CSS variable --color-splash-forbidden-darker and reserved for destructive or forbidden states. Most of what reads as 'brand color' on the page is the navy gradient itself plus the ASCII halo glyphs that render the wordmark."
    - id: "typography"
      title: "What typography does Midjourney use, and what should I use as a substitute?"
      answer: "Midjourney runs JetBrains Mono at weight 400 across every text role — h1 at 30px / line-height 48.75px / no tracking, body at 16px / line-height 26px, labels and buttons at 14px / 22.75px. The only exception is the three pill CTAs at the top of the hero, which switch to DM Sans at weight 500 / 16px / line-height 24px. If JetBrains Mono is unavailable, IBM Plex Mono is the closest open-source substitute; Fira Code or Roboto Mono also work but lack JetBrains' specific terminal weight. For DM Sans, Inter at weight 500 is the cleanest match."
    - id: "surfaces"
      title: "How does Midjourney handle surfaces and elevation?"
      answer: "Surfaces ladder by tint, not by shadow. The canvas is a midnight gradient between #06051d and #0f1c36, with #0d0e12 (Dark BG) for the body floor, #090a0c (Dark Lightbox) for modal-tier overlays, and #16181d (Dark Skeleton) for loading states. Cards land at 8px radius with a 1px hairline at #1f2228 (Dark 800). There are no drop shadows in the marketing chrome — depth comes from gradient stops in the navy canvas and from the ASCII glyph density in the hero, never from CSS box-shadow."
    - id: "ascii-hero"
      title: "What's happening with the ASCII halo in the hero?"
      answer: "Midjourney's hero literally types the wordmark out of ASCII characters arranged in a sunburst halo around the centered title. It's rendered in JetBrains Mono — the same family as the body — at a smaller size, so the whole page reads as one continuous typographic surface. The halo replaces what would normally be a generated-image grid or marquee video; it's a deliberate counter-positioning against every other AI-image tool, which leads with example outputs. The lab presents itself as a research collective, not an output gallery."
    - id: "splash-tones"
      title: "What is the Splash Tones ramp and when is it used?"
      answer: "The page declares a full coral ramp through CSS variables — splash-tones-50 (#feebe7), -100 (#fcd6cf), -150 (#fbc2b6), -200 (#faad9e), -300 (#f7856e), -400 (#f55c3d), -500 (#f2330d), -600 (#c2290a), -700 (#911f08), -900 (#300a03) — but on the marketing surface itself only the saturated stops appear, and only in destructive contexts. The 500 stop maps to --color-splash, and the 'forbidden' state lives at the 500 hex. The ramp is wired for product UI states (error alerts, delete confirmations) rather than marketing accent."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "A handful of items in the Known Gaps section. The page's hero ASCII halo is treated as a content asset, not a system token. The actual Midjourney Studio (prompt input, image grid, /imagine controls, version-history rail) lives behind authentication and is not represented. Light-mode tokens are declared in CSS (--color-light-bg, --color-light-primary) but the marketing page itself never renders in light mode, so the inverse pairings are inferred from variable names rather than observed surfaces. Animation timings, focus rings on the pill CTAs, and form-validation states beyond the splash coral are out of scope."

colors:
  midnight: "#06051d"
  deep-navy: "#0f1c36"
  dark-bg: "#0d0e12"
  dark-lightbox: "#090a0c"
  dark-canvas: "#0b0c0e"
  dark-skeleton: "#16181d"
  dark-input: "#1e1f25"
  dark-800: "#1f2228"
  dark-850: "#1b1d22"
  dark-750: "#292c32"
  dark-700: "#454954"
  on-dark: "#ffffff"
  on-dark-soft: "#e9dfd4"
  text-secondary: "#747a8b"
  text-muted: "#8f94a3"
  text-faint: "#aaaebb"
  hairline: "#22242a"
  splash: "#f2330d"
  splash-active: "#c2290a"
  splash-soft: "#f7856e"
  splash-tint: "#feebe7"
  splash-deep: "#300a03"

typography:
  display-h1:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 48.75px
    letterSpacing: "0"
  display-h1-tight:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 37.5px
    letterSpacing: "0"
  body-md:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: "0"
  label-sm:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22.75px
    letterSpacing: "0"
  caption-xs:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "0"
  button-md:
    fontFamily: "DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: "0"
  button-sm:
    fontFamily: "DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: "0"
  nav-link:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22.75px
    letterSpacing: "0"

rounded:
  none: "0px"
  card: "8px"
  pill: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"

components:
  top-nav:
    backgroundColor: "{colors.midnight}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: "16px 48px"
    height: "64px"
  hero-band:
    backgroundColor: "{colors.midnight}"
    textColor: "{colors.on-dark}"
    typography: "{typography.display-h1}"
    padding: "64px"
  hero-ascii-halo:
    backgroundColor: "{colors.midnight}"
    textColor: "{colors.text-faint}"
    typography: "{typography.caption-xs}"
    padding: "0"
  button-primary:
    backgroundColor: "{colors.deep-navy}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 20px"
    height: "42px"
  button-secondary:
    backgroundColor: "{colors.midnight}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 20px"
    height: "42px"
    border: "1px solid {colors.dark-700}"
  button-tertiary:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 20px"
    height: "42px"
    border: "1px solid {colors.dark-700}"
  button-destructive:
    backgroundColor: "{colors.splash}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.pill}"
    padding: "8px 20px"
  section-header:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    padding: "32px 0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    padding: "0"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-md}"
    padding: "0"
  inline-link:
    backgroundColor: "transparent"
    textColor: "{colors.text-faint}"
    typography: "{typography.body-md}"
  project-tile:
    backgroundColor: "{colors.dark-skeleton}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.card}"
    padding: "0"
  project-grid:
    backgroundColor: "{colors.midnight}"
    textColor: "{colors.on-dark}"
    padding: "32px 64px"
  contact-row:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    padding: "12px 0px"
  email-link:
    backgroundColor: "transparent"
    textColor: "{colors.text-faint}"
    typography: "{typography.body-md}"
  text-input:
    backgroundColor: "{colors.dark-input}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    rounded: "{rounded.card}"
    padding: "12px 14px"
    height: "42px"
    border: "1px solid {colors.hairline}"
  text-input-error:
    backgroundColor: "{colors.dark-input}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.card}"
    border: "1px solid {colors.splash}"
  alert-destructive:
    backgroundColor: "{colors.splash-deep}"
    textColor: "{colors.splash-tint}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.card}"
    padding: "12px 14px"
    border: "1px solid {colors.splash}"
  footer-band:
    backgroundColor: "{colors.midnight}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.caption-xs}"
    padding: "32px 64px"
  footer-legal-link:
    backgroundColor: "transparent"
    textColor: "{colors.text-secondary}"
    typography: "{typography.caption-xs}"
---

## Overview

Midjourney's marketing surface is the most radically typographic page in the AI-tool category — a research-lab brochure that reads like a midnight terminal session. The canvas is a vertical gradient from `{colors.midnight}` ("#06051d") at the top down through `{colors.deep-navy}` ("#0f1c36") to `{colors.dark-bg}` ("#0d0e12"), and the hero is not an image grid but the wordmark itself, typed out of ASCII glyphs in `{typography.caption-xs}` arranged as a sunburst halo around the centered title. There is no generated-image marquee, no example gallery above the fold, no hero photograph.

**Monospace as voice**: where most AI brands run a humanist sans for body and a serif or geometric sans for display, Midjourney commits to JetBrains Mono at weight 400 across every text role — h1 at 30px / 48.75px leading, body at 16px / 26px, labels at 14px / 22.75px. The only typographic exception is DM Sans inside the three pill CTAs at the top of the hero ("Sign Up", "Log In", "Explore") and nowhere else. Switching the display face to a serif or geometric sans would make Midjourney feel like every other AI tool; the mono family is the brand signature.

**Splash scarcity**: the page declares a ten-stop coral ramp through CSS variables (`--color-splash-tones-50` through `-900`) plus `--color-splash` itself at "#f2330d" and `--color-splash-forbidden-darker` at "#ff360f". Where most brands deploy their accent on primary CTAs and headline emphasis, Midjourney wires the splash exclusively to destructive and forbidden states — the rest of the page lives in unbroken midnight blue. The convention in the category is to lead with brand color; Midjourney leads with the canvas and reserves the coral for refusal.

**Key Characteristics:**
- Midnight canvas gradient `{colors.midnight}` ("#06051d") through `{colors.deep-navy}` ("#0f1c36"). The brand's defining surface choice — no light mode appears on the marketing page.
- JetBrains Mono at weight 400 across every text role except the three hero CTAs. The mono family is the typographic identity.
- ASCII halo hero — the wordmark types itself out of glyphs against the navy canvas in `{typography.caption-xs}`, no logotype SVG.
- Splash coral `{colors.splash}` ("#f2330d") wired only to destructive states. Visible in the ramp variables but absent from CTAs, headlines, and body emphasis.
- Pill geometry `{rounded.pill}` (9999px) on every CTA, paired with `{rounded.card}` (8px) on cards and inputs. No 4px or 16px intermediates appear on chrome.
- Footer-gravity layout — the page anchors on a contact ledger ("hr@", "picture@", "press@", "careers@") in mono rather than a marketing CTA band.
- Section labels render as inline icon + word ("About", "Projects", "Careers", "Contact") in `{typography.body-md}` — no display tier, no heading weight differentiation.
- Three pill CTAs in the hero — `{components.button-primary}` (filled navy), `{components.button-secondary}` (outlined midnight), `{components.button-tertiary}` (outlined transparent).

## Colors

### Brand & Canvas

- **Midnight** (`{colors.midnight}` — "#06051d") — frequency 2. Used as background (1), gradient stop (1). The deeper of the two gradient stops, sitting at the top of the page above the wordmark halo. Carries the hero, top nav, and footer.
- **Deep Navy** (`{colors.deep-navy}` — "#0f1c36") — frequency 1. Used as background (1). The primary CTA fill and the lighter gradient stop. Wired through CSS variables `--color-dark-blue-500` and `--color-gray-900`.
- **Splash** (`{colors.splash}` — "#f2330d") — declared via `--color-splash` and `--color-splash-tones-500`. The destructive / forbidden accent. Never appears on primary CTAs or body type — the page's only chromatic voltage, held in reserve.

### Surface ladder

- **Dark BG** (`{colors.dark-bg}` — "#0d0e12") — Wired to `--color-dark-bg`. The default body floor below the hero gradient.
- **Dark Lightbox** (`{colors.dark-lightbox}` — "#090a0c") — Wired to `--color-dark-lightbox`. Modal-tier overlays and lightbox surfaces.
- **Dark Canvas** (`{colors.dark-canvas}` — "#0b0c0e") — Wired to `--color-dark-950` and `--color-light-950`. The deepest surface in the ladder.
- **Dark Skeleton** (`{colors.dark-skeleton}` — "#16181d") — Wired to `--color-dark-skeleton`. Loading placeholders and image-tile backgrounds.
- **Dark Input** (`{colors.dark-input}` — "#1e1f25") — Wired to `--color-dark-input`. Form input fills.
- **Dark 800** (`{colors.dark-800}` — "#1f2228") — Wired to `--color-dark-800`. Card hairline borders against the navy canvas.
- **Dark 850** (`{colors.dark-850}` — "#1b1d22") — Wired to `--color-dark-850`. Mid-tier dividers.
- **Dark 750** (`{colors.dark-750}` — "#292c32") — Wired to `--color-dark-750`. Elevated dark surface for hover and selected states.
- **Dark 700** (`{colors.dark-700}` — "#454954") — Wired to `--color-dark-700`. Outlined-button border tone.
- **Hairline** (`{colors.hairline}` — "#22242a") — frequency 0 on body, structural via `--color-light-850` and `--color-dark-800`. The 1px border tone on inputs and cards.

### Text

- **On Dark** (`{colors.on-dark}` — "#ffffff") — frequency 4. Used as text (4). The hero h1, button labels, and active state. Wired to `--color-white`.
- **On Dark Soft** (`{colors.on-dark-soft}` — "#e9dfd4") — Wired to `--color-dark-blue-inverted-500` and `--color-light-100`. Used as the warm-white inverse on splash surfaces.
- **Text Secondary** (`{colors.text-secondary}` — "#747a8b") — Wired to `--color-dark-secondary` and `--color-light-secondary`. Secondary body, captions, footer legal copy.
- **Text Muted** (`{colors.text-muted}` — "#8f94a3") — Wired to `--color-dark-400`. Tertiary labels, breadcrumb separators.
- **Text Faint** (`{colors.text-faint}` — "#aaaebb") — Wired to `--color-dark-300`. The lightest readable text on midnight — used on inline links inside body paragraphs (the "community-funded research" and "team" links in the About paragraph).

### Splash ramp (reserved)

- **Splash Tint** (`{colors.splash-tint}` — "#feebe7") — Wired to `--color-splash-tones-50`. The lightest stop in the ramp, used as text on destructive alert backgrounds.
- **Splash Soft** (`{colors.splash-soft}` — "#f7856e") — Wired to `--color-splash-tones-300`. A mid-tone reserved for warning-but-not-destructive states.
- **Splash Active** (`{colors.splash-active}` — "#c2290a") — Wired to `--color-splash-tones-600`. The press / hover-darker variant of the splash CTA.
- **Splash Deep** (`{colors.splash-deep}` — "#300a03") — Wired to `--color-splash-tones-900`. The deepest stop — the fill of destructive alert containers.

## Typography

### Font family

The system runs **JetBrains Mono** at weight 400 across every text role on the page — h1, body, navigation, section labels, footer legal copy. The fallback stack walks `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`. **DM Sans** at weight 500 carries the three pill CTAs in the hero and the legal-footer button row, and nowhere else. **DM Mono** is declared as `--font-mono-sans` for product-surface use that does not appear on this marketing page.

The voice split is intentional:
- JetBrains Mono (weight 400, no tracking) → h1, body, labels, navigation, footer copy
- DM Sans (weight 500) → pill CTA labels only

### Hierarchy

| Token | Family | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|---|
| `{typography.display-h1}` | JetBrains Mono | 30px | 400 | 48.75px | 0 | The "About" / "Projects" / "Careers" / "Contact" section h1 — the hero halo wordmark renders as ASCII glyphs |
| `{typography.display-h1-tight}` | JetBrains Mono | 30px | 400 | 37.5px | 0 | Compressed h1 variant for tighter section headers |
| `{typography.body-md}` | JetBrains Mono | 16px | 400 | 26px | 0 | Every body paragraph and inline link — the workhorse text style |
| `{typography.label-sm}` | JetBrains Mono | 14px | 400 | 22.75px | 0 | Inline anchors, alert messages, secondary labels |
| `{typography.caption-xs}` | JetBrains Mono | 12px | 400 | 18px | 0 | Footer legal copy and the ASCII halo characters themselves |
| `{typography.button-md}` | DM Sans | 16px | 500 | 24px | 0 | The three hero pill CTAs ("Sign Up", "Log In", "Explore") |
| `{typography.button-sm}` | DM Sans | 14px | 500 | 22px | 0 | Smaller pill CTAs in the footer row |
| `{typography.nav-link}` | JetBrains Mono | 14px | 400 | 22.75px | 0 | Top-nav menu items |

### Principles

H1 stays at weight 400 — never bold. There is no display ladder above 30px; the lab does not run a 48px or 64px hero headline, because the wordmark itself is the largest typographic object on the page and it renders as glyph art. Body line-height is unusually generous for mono (26px on 16px text — a 1.625 ratio) so paragraphs breathe inside the dense ASCII canvas. Switching to a sans-serif body would unify the system with every other AI marketing page; the mono character is what positions Midjourney as a research lab rather than a consumer product.

### Substitutes

If JetBrains Mono is unavailable, **IBM Plex Mono** is the closest open-source substitute — both are designed for terminal legibility at small sizes. **Fira Code** and **Roboto Mono** also work but lack JetBrains' specific tracking and the same weight-400 density. For **DM Sans**, **Inter** at weight 500 is the cleanest match — both are geometric-leaning sans built for screen reading.

## Layout

### Spacing system

- **Base unit:** 4px.
- **Tokens:** `{spacing.xxs}` ("2px") · `{spacing.xs}` ("4px") · `{spacing.sm}` ("8px") · `{spacing.md}` ("12px") · `{spacing.base}` ("16px") · `{spacing.lg}` ("20px") · `{spacing.xl}` ("24px") · `{spacing.2xl}` ("32px") · `{spacing.3xl}` ("48px") · `{spacing.4xl}` ("64px").
- **Section padding:** `{spacing.4xl}` (64px) horizontal on the project grid and footer band.
- **Pill CTA padding:** "8px 20px" — the universal pill geometry that carries every CTA in the hero row.
- **Card internal padding:** `{spacing.md}` (12px) inside text inputs; `{spacing.2xl}` (32px) around the project grid and section headers.

### Grid & container

- **Max content width:** ~768px centered for body text (the bodyText element measures 768px wide in the extraction).
- **Hero composition:** centered single column — the ASCII halo wraps the wordmark, three pill CTAs sit on a horizontal row beneath it, no side panels.
- **Project grid:** 5-tile rounded-square grid (face / hand / heart / brain / mouth illustrations in the captured screenshot), rendered as `{components.project-tile}` at `{rounded.card}` (8px) on `{colors.dark-skeleton}` ("#16181d") fill.
- **Contact ledger:** vertical stack of three rows ("product questions and support" / "billing support email" / "for journalistic inquiries"), each row in `{typography.body-md}` with the email handle as a `{components.email-link}`.

### Rhythm

The page anchors on uniform 32-pixel section padding rather than a luxury 96px or 120px rhythm. Section headers (About, Projects, Careers, Contact) all share `{typography.body-md}` size with a small inline icon — there is no display tier above body text in the section labels. The hierarchy lives in vertical whitespace, not in type size.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Hero band, body paragraphs, footer |
| Gradient floor | Vertical gradient `{colors.midnight}` → `{colors.deep-navy}` | The hero canvas — the only depth on the page |
| Hairline | 1px `{colors.hairline}` ("#22242a") | Inputs and outlined pill CTAs |
| Skeleton fill | `{colors.dark-skeleton}` ("#16181d") | Project tile backgrounds before image load |
| Splash alert | 1px `{colors.splash}` border + `{colors.splash-deep}` fill | Destructive alert containers only |

The elevation philosophy is **gradient-as-elevation** — depth comes from the vertical midnight gradient in the canvas rather than from CSS box-shadow. Drop shadows are declared in CSS variables (`--drop-shadow-md`, `--drop-shadow-lg`, `--drop-shadow-xl`) but the marketing page itself never applies them. The only visible border is the 1px hairline on the outlined pill CTAs ("Log In" and "Explore") and on text inputs.

The ASCII halo in the hero supplies its own visual depth — the glyph density falls off radially from the wordmark, simulating depth without any shadow primitive. The 5-tile project grid below uses the dark-skeleton fill as a placeholder; once images load, they render as full-bleed squares with no inner padding or shadow.

## Shapes

### Border radius scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | "0px" | Hero text container, footer legal row — flat geometry on text content |
| `{rounded.card}` | "8px" | Project tiles, text inputs, alert containers — the universal soft-corner |
| `{rounded.pill}` | "9999px" | Every CTA pill — Sign Up, Log In, Explore, footer buttons |

There is no 4px, 12px, 16px, or 20px tier on the marketing surface. The geometry is binary — flat or 8px on content, pills on CTAs. This is the rarest radius scale in the directory; most systems run a 4-tier or 5-tier ramp, and the binary discipline is the brand's strongest formal signature.

### Imagery & illustrations

The project grid renders five hand-drawn line illustrations in `{colors.text-faint}` strokes on `{colors.dark-skeleton}` ("#16181d") fills — an eye, a hand, a heart, a brain, a mouth. The strokes are deliberately sketch-like rather than vector-precise. The hero ASCII halo is the dominant visual asset on the page and substitutes entirely for what would normally be an image grid or generated-output marquee.

## Components

### Top navigation

**`{components.top-nav}`** — Midnight nav bar pinned to the top of the page. Background `{colors.midnight}` ("#06051d"), text `{colors.on-dark}`. Carries the Midjourney wordmark (rendered as ASCII or SVG depending on viewport) at left, primary menu items at center, and the three pill CTAs at right. Menu items in `{typography.nav-link}` (JetBrains Mono 14px / 400). Padding "16px 48px", height "64px".

### Hero

**`{components.hero-band}`** — The midnight hero anchored at top of every marketing page. Background `{colors.midnight}` with a vertical gradient to `{colors.deep-navy}`, text `{colors.on-dark}`. Centered single-column composition: ASCII halo, wordmark, three pill CTAs in a horizontal row.

**`{components.hero-ascii-halo}`** — The wordmark's halo rendered as ASCII glyphs in `{typography.caption-xs}` (JetBrains Mono 12px / 400) at `{colors.text-faint}`. The glyphs arrange as a sunburst radiating from the center where the wordmark sits, fading outward as glyph density decreases. The replacement for what would normally be a generated-image marquee.

### Buttons

**`{components.button-primary}`** — The signature pill CTA. Background `{colors.deep-navy}` ("#0f1c36"), text `{colors.on-dark}`, type `{typography.button-md}` (DM Sans 16px / 500), padding "8px 20px", height "42px", rounded `{rounded.pill}` (9999px). Used for "Sign Up" in the hero and the primary action throughout.

**`{components.button-secondary}`** — Midnight-fill outlined pill. Background `{colors.midnight}`, 1px border in `{colors.dark-700}`, same padding and radius as primary. Used for "Log In" in the hero.

**`{components.button-tertiary}`** — Transparent outlined pill. Background transparent, 1px border in `{colors.dark-700}`, same padding and radius. Used for "Explore" in the hero — the third option in the CTA row.

**`{components.button-destructive}`** — Splash-fill pill reserved for destructive actions. Background `{colors.splash}` ("#f2330d"), text `{colors.on-dark}`, type `{typography.button-sm}` (DM Sans 14px / 500). Never appears on the marketing surface — wired through the `--color-splash` variable for product UI.

### Sections & body

**`{components.section-header}`** — Each section opens with an inline icon + word ("About", "Projects", "Careers", "Contact") rendered as `{typography.body-md}` (JetBrains Mono 16px / 400) in `{colors.on-dark}`. There is no display tier above body size for these labels.

**`{components.body-paragraph}`** — Default running text. Type `{typography.body-md}` (JetBrains Mono 16px / 400 / 26px leading), color `{colors.on-dark}`. Width caps at ~768px centered.

**`{components.body-paragraph-muted}`** — Secondary paragraphs in `{colors.text-secondary}` ("#747a8b"). Used for the footer descriptive copy and the "We're a lean, self-funded, distributed team" line in Careers.

**`{components.inline-link}`** — Inline anchors inside body paragraphs. Text `{colors.text-faint}` ("#aaaebb") — lighter than the body text rather than coral or blue. Used for the "community-funded research" and "team" links in the About paragraph. Underline appears on hover.

### Project grid & tiles

**`{components.project-grid}`** — 5-up tile row showing project illustrations. Background `{colors.midnight}`, padding "32px 64px".

**`{components.project-tile}`** — A single project illustration tile. Background `{colors.dark-skeleton}` ("#16181d") as the skeleton fill, rounded `{rounded.card}` (8px). Carries a hand-drawn line illustration in `{colors.text-faint}` strokes — eye, hand, heart, brain, mouth in the captured screenshot.

### Contact ledger

**`{components.contact-row}`** — A single row of the contact ledger. Type `{typography.body-md}`, padding "12px 0px". Carries a sentence with one or two `{components.email-link}` anchors embedded.

**`{components.email-link}`** — An email handle rendered inline as a `{colors.text-faint}` anchor — "hr@midjourney.com", "picture@midjourney.com", "press@midjourney.com". The faint-text styling means the address reads as part of the sentence rather than a styled button.

### Inputs & forms

**`{components.text-input}`** — Dark input field. Background `{colors.dark-input}` ("#1e1f25"), text `{colors.on-dark}`, type `{typography.body-md}`, rounded `{rounded.card}` (8px), padding "12px 14px", height "42px", 1px hairline border in `{colors.hairline}`.

**`{components.text-input-error}`** — Error state. Background stays `{colors.dark-input}` but the border shifts to `{colors.splash}` ("#f2330d"). The only place splash appears on form chrome.

**`{components.alert-destructive}`** — Destructive alert container. Background `{colors.splash-deep}` ("#300a03"), text `{colors.splash-tint}` ("#feebe7"), type `{typography.label-sm}`, rounded `{rounded.card}`, 1px border in `{colors.splash}`. The only place the splash ramp appears in full on the marketing surface — and it only appears in error states.

### Footer

**`{components.footer-band}`** — Dark footer that closes every page. Background `{colors.midnight}`, text `{colors.text-secondary}` ("#747a8b"), type `{typography.caption-xs}` (JetBrains Mono 12px / 400). Padding "32px 64px". Carries "Terms of Service · Privacy Policy · Privacy Settings" as a horizontal row of `{components.footer-legal-link}` items.

**`{components.footer-legal-link}`** — Single legal-row anchor. Same type and color as the footer band itself — the links read as plain text rather than styled affordances.

## Do's and Don'ts

### Do
- Anchor every page on the midnight gradient — `{colors.midnight}` ("#06051d") at the top transitioning into `{colors.deep-navy}` ("#0f1c36"). Pure black flattens the canvas and removes the gradient signature.
- Render every text role except CTA labels in JetBrains Mono at weight 400. The mono family is the brand voice; switching display to a serif or geometric sans makes Midjourney read like every other AI tool.
- Reserve `{colors.splash}` ("#f2330d") for destructive and forbidden states. The CSS variable name `--color-splash-forbidden-darker` is the rule, not a coincidence.
- Use pill `{rounded.pill}` geometry on every CTA. The pill is the only CTA shape — no 8px square buttons on the marketing surface.
- Render inline links in `{colors.text-faint}` ("#aaaebb") — lighter than the surrounding body text, not coral or blue.
- Treat the ASCII halo as a content asset, not a decoration. The glyph art is the hero — substituting an image grid breaks the lab's editorial framing.

### Don't
- Don't use `{colors.splash}` on primary CTAs. The page declares a ten-stop splash ramp but wires `--color-splash` exclusively to `--color-splash-forbidden-darker`; painting the Sign Up button coral inverts the brand's safety semantics.
- Don't run h1 above 30px on the marketing surface. The wordmark halo IS the largest typographic object; a 48px or 64px section heading would compete with the ASCII art.
- Don't pair the mono body with a sans-serif display. The single-family discipline is the brand signature.
- Don't apply drop shadows. The CSS declares `--drop-shadow-md` through `--drop-shadow-xl` but the marketing page renders zero shadows; depth comes from the gradient canvas only.
- Don't use a 4px or 12px corner radius on cards. The system is binary — 8px or pill. A 4px tile reads as foreign.
- Don't bold any text. Every JetBrains Mono role sits at weight 400; weight 700 appears in `--font-weight-bold` for product use but never on this marketing surface.

## Known Gaps

- The hero ASCII halo is treated as a content asset rather than a system token. The glyph composition, density falloff, and exact character set are not formalized here.
- The actual Midjourney Studio surface (prompt input, image grid, /imagine controls, version-history rail, ratings UI) lives behind authentication and is not represented in this marketing-surface document.
- Light-mode tokens are declared in CSS (`--color-light-bg`, `--color-light-primary`, `--color-light-input`) but the marketing page never renders in light mode. The inverse pairings are inferred from variable names rather than observed surfaces.
- Animation timings, focus rings on pill CTAs, and the precise hover deltas on inline links are not extracted — the page uses such subtle interactivity that hover states are hard to capture from a static snapshot.
- Form validation states beyond `{components.text-input-error}` and `{components.alert-destructive}` (success, warning-not-destructive, info) are not present on the marketing surface and would need a sign-up or feedback flow to confirm.
- The splash ramp's lighter stops (`-50` through `-300`) are declared in CSS but never observed on the captured page; their pairings with `splash-deep` fills are inferred.