Midjourney Design System

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

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

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

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.