name: midjourney-design
version: alpha
description: >
  Midjourney runs on a pure-black canvas with a quiet, research-lab restraint and
  a deliberate terminal/CLI heritage — headings are set in JetBrains Mono, body in
  DM Sans, echoing the product's Discord-bot origins. There is no single brand
  voltage; instead a small spectrum of saturated accents tags sections and actions
  (violet, blue, green, gold, magenta), standing for "the colors of imagination."
  Controls are fully-pill, softly shadowed, and the imagery (generated nebulae,
  shells, terrain) does the talking against the black void.
colors:
  # Brand spectrum (rationed, one hue per role)
  accent-violet: '#8B5CF6'  # "About" marker, primary brand-leaning hue
  accent-blue: '#3B82F6'    # links, "Projects" marker
  accent-green: '#22C55E'   # "Careers" marker, Sign Up icon
  accent-gold: '#F5A623'    # "Contact" marker, Log In icon
  accent-magenta: '#E0457B' # Explore / generative CTA icon
  on-accent: '#FFFFFF'
  # Surface
  surface: '#000000'        # the void — pure black canvas
  surface-raised: '#0B0B14' # cards, image wells, the pill button bar
  surface-secondary: '#15151F'
  # Text
  on-surface: '#FFFFFF'     # headings (mono), primary text
  on-surface-secondary: '#9CA0A8' # body prose, captions
  on-surface-disabled: '#4A4D55'
  # Hairlines
  hairline: '#1E1E28'       # card borders, faint dividers
typography:
  display:
    fontFamily: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'
    fontSize: 30px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: normal
  headline:
    fontFamily: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: normal
  body-lg:
    fontFamily: '"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: normal
  body-md:
    fontFamily: '"DM Sans", system-ui, -apple-system, sans-serif'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: normal
  label:
    fontFamily: '"DM Sans", system-ui, sans-serif'
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: normal
  mono-caption:
    fontFamily: '"JetBrains Mono", ui-monospace, monospace'
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: normal
rounded:
  sm: 8px    # image wells / cards
  md: 12px   # larger media tiles
  full: 9999px # pill buttons, the floating action bar, tags
spacing:
  # base unit = 8px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  xxxl: 64px
components:
  button-pill:
    background: '{colors.surface-raised}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '8px 20px'
    boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)'
    iconColorRule: 'each action carries one spectrum hue (Sign Up green, Log In gold, Explore magenta)'
  action-bar:
    background: '{colors.surface-raised}'
    rounded: '{rounded.full}'
    padding: '8px'
    boxShadow: '0 8px 24px rgba(0,0,0,0.5)'
  image-tile:
    background: '{colors.surface-raised}'
    rounded: '{rounded.sm}'
    border: '1px solid {colors.hairline}'
  section-marker:
    iconColorRule: 'one accent per section — violet/blue/green/gold'
    typography: '{typography.headline}'
  link:
    color: '{colors.accent-blue}'
    decoration: 'underline'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-fast: 150ms
  duration-standard: 250ms
icons:
  library: lucide # thin-line outline set as OSS substitute for MJ's in-house glyphs
  style: outline
  stroke: 2px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  colorRule: 'section markers and CTA glyphs carry spectrum accents; inline UI icons inherit on-surface'

Midjourney

Design spec — version alpha. Surfaces studied via Playwright: the public home/about page (logged-out) — computed styles + representative element probes. Supplemented with knowledge of the Midjourney app (explore/imagine) aesthetic.

Overview

Midjourney's public surface is a pure-black void ({colors.surface} #000000) where generated imagery — nebulae, shells, dunes — floats as the only color. The chrome is intentionally spare and bears a terminal/CLI heritage: headings are set in JetBrains Mono at a calm 400 weight, while body copy switches to the humanist DM Sans. This split is the signature move — monospaced section titles read like a research log or a command prompt, a nod to Midjourney's origins as a Discord bot driven by /imagine commands. Above the about copy sits a literal field of overlapping prompt text rendered in faint blue, reinforcing the "imagination as input stream" idea.

There is no single brand color. Instead Midjourney rations a small spectrum of saturated accents — violet {colors.accent-violet}, blue {colors.accent-blue}, green {colors.accent-green}, gold {colors.accent-gold}, magenta {colors.accent-magenta} — and assigns exactly one hue per section marker and per action (Sign Up reads green, Log In gold, Explore magenta). The discipline is "one hue per job"; color never floods a surface. Controls are fully-pill with a soft drop shadow, grouped into a floating action bar. The brand voice — "we are all midjourney," an independent, self-funded research lab — maps directly onto this restrained, almost academic interface.

Colors

Spectrum accents. Rather than a logo color, Midjourney uses a controlled palette of single-purpose hues. {colors.accent-violet} #8B5CF6 marks the "About" section and reads as the most brand-leaning tone; {colors.accent-blue} #3B82F6 is the link color and "Projects" marker; {colors.accent-green} #22C55E tags "Careers" and the Sign Up control; {colors.accent-gold} #F5A623 tags "Contact" and Log In; {colors.accent-magenta} #E0457B is reserved for the generative Explore CTA. The rule is scarcity: one accent per marker, never two in the same element.

Surfaces. The canvas is true black {colors.surface} #000000. Cards, image wells, and the pill button bar sit on a barely-lifted {colors.surface-raised} #0B0B14; deeper panels use {colors.surface-secondary} #15151F.

Text. Headings and primary text are white {colors.on-surface} #FFFFFF; body prose and captions step down to {colors.on-surface-secondary} #9CA0A8. Disabled glyphs fall to {colors.on-surface-disabled}.

Hairlines. Card borders and faint dividers use {colors.hairline} #1E1E28 — visible only as a whisper against the black.

Typography

Two families, split by role. Display/headlines: JetBrains Mono (the computed h1 is 30px/48.75px, weight 400) — monospaced, even, log-like. Body/labels: DM Sans (16px/24px body, 500 for control labels). Closest open-source substitutes are already open-source: keep JetBrains Mono and DM Sans, or swap to IBM Plex Mono + Inter if needed. Tracking stays normal; Midjourney does not letter-space.

Token	Family	Size	Weight	Line-height	Usage
display	JetBrains Mono	30px	400	48px	Section titles ("About", "Projects")
headline	JetBrains Mono	24px	400	32px	Sub-sections
body-lg	DM Sans	16px	400	26px	Lead prose
body-md	DM Sans	14px	400	22px	Secondary copy, captions
label	DM Sans	16px	500	24px	Pill buttons, nav
mono-caption	JetBrains Mono	12px	400	16px	Metadata, prompt strings

Layout

Base unit 8px. The about page is a single narrow reading column centered on black, with generous vertical rhythm (~48–64px between sections). Each section is introduced by a monospaced title preceded by a single accent-colored marker icon. Media (generated images) is arranged in a 4-up responsive grid of rounded tiles. The app surfaces use a denser masonry grid of generations against the same black void.

Elevation & Depth

Near-flat, but not borderless. Image tiles carry a 1px {colors.hairline} edge so they separate from the black. The only real elevation is the floating pill action bar, which casts a soft ambient shadow (0 8px 24px rgba(0,0,0,0.5)). No gradients on chrome — the only gradients in the experience are inside the generated artwork itself.

Shapes

Restrained radius vocabulary: {rounded.sm} 8px on image wells, {rounded.md} 12px on larger media, and {rounded.full} for every button, tag, and the action bar. Buttons are true pills; media is gently rounded. Nothing is sharp-cornered.

Components

• button-pill — fully-rounded, #0B0B14 fill, white 500 label, soft shadow; each carries a single spectrum-colored leading glyph (Sign Up green, Log In gold, Explore magenta).
• action-bar — the grouped Sign Up / Log In / Explore pill cluster, floating with an ambient shadow.
• image-tile — 8px-radius generated image on #0B0B14 with a faint hairline border.
• section-marker — a mono section title preceded by one accent icon (the only place each accent appears in chrome).
• link — {colors.accent-blue}, underlined.

Motion

Quiet and functional: {motion.duration-fast} 150ms hovers, {motion.duration-standard} 250ms transitions on a standard ease. No parallax, no decorative looping — the spectacle is the imagery, not the UI. Generations fade/upscale in; chrome stays still.

Iconography

Thin-line outline glyphs (Lucide as the OSS substitute for Midjourney's in-house set), 2px stroke, sized 16/20/24px. Section markers and CTA glyphs carry their assigned spectrum accent; all other inline icons inherit {colors.on-surface} white.

Do's and Don'ts

• Do keep the canvas pure black — Midjourney is dark-only; never render a light variant.
• Do set titles in monospace (JetBrains Mono) and body in DM Sans — the contrast is the brand.
• Do assign exactly one spectrum hue per section marker and per CTA glyph.
• Do let generated imagery be the only saturated color on the page.
• Don't introduce a single dominant brand color — the system is a rationed spectrum, not one voltage.
• Don't add gradients, glows, or borders to chrome; reserve richness for the artwork.
• Don't letter-space the type or use heavy weights — keep it 400/500, natural tracking.

Known Gaps

• Computed values (#000000 canvas, JetBrains Mono h1, DM Sans body, pill radius, link green/blue) were read directly from the public home/about page. The exact spectrum hexes (#8B5CF6, #22C55E, #F5A623, #E0457B) are eyeballed from the rendered section markers and CTA glyphs and should be treated as close approximations.
• The authenticated app (imagine/explore, organize, rate) was not probed this session; tokens describe the marketing/about surface and the app's general dark aesthetic.