What is Midjourney's primary brand color?

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.

What typography does Midjourney use, and what should I use as a substitute?

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.

How does Midjourney handle surfaces and elevation?

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.

What's happening with the ASCII halo in the hero?

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.

What is the Splash Tones ramp and when is it used?

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.

What's missing from this DESIGN.md spec?

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.

Midjourney Design System

Midjourney's design system as a DESIGN.md file.

About Midjourney DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source midjourney.com

AI & LLM Platforms
Design & Creative Tools

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.

What makes it distinct

Monospace as voiceJetBrains Mono carries h1 at 30px / line-height 48.75px and body at 16px / 26px, the same family across every text role
ASCII halo wordmarkthe 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 geometry8px on cards and inputs, 9999px pills on every CTA, no 4px or 16px intermediates on chrome
Footer-gravity layoutthe page anchors on a contact ledger with email handles (hr@, picture@, press@) typeset in mono, not a marketing CTA band

Live at midjourney.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

midjourney.com

Explore Midjourney

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Midjourney design system FAQ

Common questions about Midjourney's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Midjourney — official site

The independent research lab behind one of the most widely used AI image generators.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Midjourney in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→