midjourney___style_reference:
  info: "> Deep-ocean bioluminescent terminal. A pressurized darkness where intelligence visibly generates itself in ASCII streams, and controls appear as faintly glowing specimens."

  theme: "dark"

  info: "Midjourney's interface feels like peering through a deep-ocean porthole into a bioluminescent void — vast, pressurized darkness with faint light sources. The #06051d near-black with violet undertone is not simply dark but dimensionally deep, distinguished from pure black by that violet warmth that reads as cosmic rather than void. A sprawling ASCII/generative text animation fills the hero against this background, making the interface itself feel like it's generating intelligence in real time. Section headings and nav use JetBrains Mono exclusively — monospace as aesthetic choice, not technical necessity, giving every label the weight of a terminal command. The three pill buttons (Sign Up, Log In, Explore) float as translucent jewels — each tinted a different hue (green, yellow, red-orange) at 20% opacity against their dark backgrounds, with matching text colors, making them feel less like CTAs and more like categorized data packets."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Cosmic Void | `linear-gradient(0deg, rgb(6, 5, 29) 30%, rgb(6, 20, 52))` | `--color-cosmic-void` | Primary page background and hero fill — the violet undertone separates it from neutral black, making darkness feel galactic rather than empty |"
    info: "| Abyssal Blue | `#0f1c36` | `--color-abyssal-blue` | Secondary surface backgrounds, button background variant — a step lighter than Cosmic Void for subtle depth layering |"
    info: "| Steel Navy | `#1d293d` | `--color-steel-navy` | Card surfaces, nav background, interactive container backgrounds |"
    info: "| Deep Slate | `#314062` | `--color-deep-slate` | Elevated card or hover state backgrounds |"
    info: "| Mist | `#cad5e2` | `--color-mist` | Primary body text, general UI text — slightly blue-gray rather than pure white, reducing harshness against the dark void backgrounds |"
    info: "| Fog | `#e5e7eb` | `--color-fog` | Borders, dividers, icon strokes throughout the UI |"
    info: "| Ash | `#2e3038` | `--color-ash` | Secondary text, subdued labels |"
    info: "| Ghost White | `#ffffff` | `--color-ghost-white` | Heading text at maximum contrast |"
    info: "| Ice Blue | `#ebf8ff` | `--color-ice-blue` | High-brightness text on dark surfaces, link contrast text |"
    info: "| Portal Blue | `#63b3ed` | `--color-portal-blue` | Hyperlinks, inline text links — the single fully saturated accent visible in body content, connecting to Midjourney's Discord/community ecosystem |"
    info: "| Bioluminescent Green | `#004f3b` | `--color-bioluminescent-green` | Sign Up pill button background (20% opacity tint) — deep green specimen glow against void |"
    info: "| Terminal Amber | `#733e0a` | `--color-terminal-amber` | Explore pill button background (20% opacity tint) — amber specimen variant |"
    info: "| Crimson Depth | `#8b0836` | `--color-crimson-depth` | Log In pill button background (20% opacity tint) — deep red specimen variant |"
    info: "| Specimen Green | `#00bc7d` | `--color-specimen-green` | Icon strokes and decorative SVG fills — vivid but used sparingly in iconography only |"
    info: "| Warning Amber | `#f0b100` | `--color-warning-amber` | Icon and UI accent strokes — section heading icons (Projects ⚙, About ℹ) |"
    info: "| Fault Red | `#ff2056` | `--color-fault-red` | Icon strokes, error-adjacent SVG fills |"

  tokens___typography:

    jetbrains_mono___every_typographic_role_on_this_site___navigation_labels__body_copy__headings__buttons__links__using_a_monospace_font_as_the_universal_typeface_not_just_for_code_makes_the_entire_interface_read_as_an_active_terminal_output__30px_at_lineheight_1_25_serves_section_headings__16px_at_1_50_serves_body_and_ui_labels__14px_at_1_63_serves_captions_and_metadata_____font_jetbrains_mono:
      - "**Substitute:** Fira Code, Source Code Pro"
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px, 30px"
      - "**Line height:** 1.25–1.63"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `normal`"
      - "**Role:** Every typographic role on this site — navigation labels, body copy, headings, buttons, links. Using a monospace font as the universal typeface (not just for code) makes the entire interface read as an active terminal output. 30px at lineHeight 1.25 serves section headings; 16px at 1.50 serves body and UI labels; 14px at 1.63 serves captions and metadata."

    dm_sans___secondary_ui_copy_and_body_text_in_prose_sections___appears_at_16px_only__weight_500_for_emphasis_within_body_blocks__provides_a_subtle_humanist_contrast_against_the_monospace_primary__used_sparingly_so_the_terminal_character_of_jetbrains_mono_dominates_____font_dm_sans:
      - "**Substitute:** Inter, Outfit"
      - "**Weights:** 400, 500"
      - "**Sizes:** 16px"
      - "**Line height:** 1.50"
      - "**Letter spacing:** normal"
      - "**Role:** Secondary UI copy and body text in prose sections — appears at 16px only. Weight 500 for emphasis within body blocks. Provides a subtle humanist contrast against the monospace primary, used sparingly so the terminal character of JetBrains Mono dominates."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.63 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| heading | 30px | 1.25 | — | `--text-heading` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| images | 8px |"
      info: "| inputs | 8px |"
      info: "| buttons | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 800px"
      - "**Section gap:** 64px"
      - "**Card padding:** 32px"
      - "**Element gap:** 8-16px"

  components:

    sign_up_pill_button:
      role: "Primary registration CTA in navigation"

      9999px_border_radius_pill__background: "oklch green tint at 20% opacity (#004f3b equivalent). Text: #00bc7d bright green (oklch 0.979 0.021 166.113). Border: white at 10% opacity. Padding: 8px 20px. Font: JetBrains Mono 14px. Shadow: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px. The translucent jewel-tint approach makes it read as a specimen label rather than a traditional CTA button."

    log_in_pill_button:
      role: "Secondary auth action in navigation"

      9999px_border_radius__background: "dark red tint (~#8b0836 at 20% opacity). Text: near-white #fff1f2. Border: white 10% opacity. Padding: 8px 20px. JetBrains Mono 14px. Double soft shadow."

    explore_pill_button:
      role: "Navigation action for main product discovery"

      9999px_border_radius_pill__background: "amber/orange tint at 20% opacity (#733e0a base). Text: #fefce8 warm cream (oklch 0.987 0.026 102.212). Border: white at 10% opacity. Padding: 8px 20px. Font: JetBrains Mono 14px. Third specimen-color variant completing the red/green/amber triad in navigation."

    documentation_tab:
      role: "Navigation label for technical docs section"

      flat_tab_style: "background transparent (rgba 0,0,0,0), no border-radius (0px), no padding (0px all sides). Text: #63b3ed Portal Blue at 16px JetBrains Mono. Acts as a plain text link styled to match the terminal aesthetic — no affordance chrome, relies entirely on color for identification."

    section_heading_with_icon:
      role: "Page section titles (About, Projects, Careers)"

      info: "JetBrains Mono 30px weight 400, #ffffff text. Preceded by a small colored icon (⚙ in amber #f0b100 for Projects, ℹ in amber for About) at 16px. Icon and label sit on the same horizontal baseline with ~8px gap. No text-transform, no letter-spacing override. The monospace weight-400 at 30px is deliberately un-bold — headings do not shout."

    project_image_card:
      role: "Visual showcase grid for AI-generated imagery"

      info: "Square-aspect image tiles arranged in a 4-column grid with 8px gap. 8px border-radius on each image. Images are monochromatic blue-violet renders of anatomical/symbolic subjects (eye, brain, heart, hand) — no text overlay, no hover badge. Border: #e5e7eb Fog at low opacity as a subtle stroke. Cards function as pure image containers without any UI chrome."

    sticky_navigation_bar:
      role: "Primary site navigation across all pages"

      info: "Full-width bar with #1d293d Steel Navy background. Left side: Documentation (flat text link, #63b3ed) and Explore (amber pill) tabs. Right side: Sign Up (green pill) and Log In (red pill). All items use JetBrains Mono 14px. Vertical padding: 8px. Horizontal padding: ~48px on outer edges. Pill buttons float with translucent tinted backgrounds creating a specimen-tray organization."

    hero_ascii_animation_background:
      role: "Full-viewport hero visual"

      info: "Fills the entire first viewport with dense ASCII/generative text rendered in #cad5e2 Mist at very low opacity against the #06051d Cosmic Void background. The text forms a spherical/elliptical visual mass centered in the frame. Logo 'Midjourney' overlaid at center in a stylized typeface at approximately 36-40px. Three navigation pill buttons overlay the bottom of the hero. No image or photograph — the generative text IS the hero visual."

    inline_body_link:
      role: "Hyperlinks within prose content"

      info: "Inline text at 16px JetBrains Mono weight 400. Color: #63b3ed Portal Blue — the only chromatic accent color used in body text. No underline by default (transparent borderTopColor in the raw data). Sits at zero padding/margin within the text flow. 'community-funded research' example demonstrates usage."

    background_gradient_surface:
      role: "Full-page atmospheric depth layer"

      css_gradient: "linear-gradient(0deg, #06051d 30%, #061434). Transitions from pure Cosmic Void at the bottom to a slightly lighter deep navy at the top, creating a sense of depth in a dark environment. Applied as the base layer beneath all content — not visible as a discrete element but sets the atmospheric depth of the entire page."

  do_s_and_don_ts:

    do:
      - "Use JetBrains Mono as the primary typeface for all UI elements — navigation, headings, buttons, body copy — treating monospace as the visual identity, not a code-context exception."
      - "Apply the three-color pill button system (green/amber/red tints at ~20% opacity) only for the Sign Up / Explore / Log In triad — do not extend the specimen-color scheme to other button types."
      - "Set all page backgrounds to #06051d or the gradient variant linear-gradient(0deg, #06051d 30%, #061434) — never use pure #000000, which would flatten the violet cosmic depth."
      - "Use 9999px border-radius for all pill buttons and 8px for all card/image containers — no intermediate values; the contrast between fully rounded and gently rounded is the shape system."
      - "Render section headings at 30px JetBrains Mono weight 400 with a small amber #f0b100 icon prefix — never increase to bold weights, the whisper-weight at large sizes is the signature."
      - "Use #63b3ed Portal Blue exclusively for inline hyperlinks and flat navigation text links — it is the only fully visible chromatic color in body content."
      - "Maintain 64px vertical gap between page sections to preserve the spacious, pressurized-void atmosphere between content blocks."

    don_t:
      - "Do not use any sans-serif or serif font as a heading font — DM Sans is for body prose only; JetBrains Mono must dominate the typographic hierarchy."
      - "Do not create solid-fill opaque buttons — the translucent 20% opacity tinted backgrounds on pills are the system; solid fills break the bioluminescent specimen aesthetic."
      - "Do not introduce light backgrounds (#ffffff, light grays) into page sections — the design has no light mode; all surfaces must remain within the #06051d to #314062 dark range."
      - "Do not use more than three accent tint colors for buttons — the red/green/amber specimen triad is a closed system; adding new button colors dilutes the precision."
      - "Do not bold section headings or use font-weight above 500 anywhere in the UI — weight 400 at display sizes is the deliberate anti-convention choice that defines the visual voice."
      - "Do not add decorative imagery or photography — the only permitted visuals are AI-generated monochromatic renders and the ASCII/generative text hero."
      - "Do not apply colored backgrounds to body text sections — prose content must sit directly on #06051d Cosmic Void with #cad5e2 Mist text, no content cards with contrasting backgrounds."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cosmic Void | `#06051d` | Base page background — the deepest layer, the void all other surfaces float within |"
    info: "| 1 | Deep Navy Gradient | `#061434` | Upper-hero gradient terminus, slightly lighter for atmospheric depth illusion |"
    info: "| 2 | Abyssal Blue | `#0f1c36` | Button container backgrounds, secondary surface areas |"
    info: "| 3 | Steel Navy | `#1d293d` | Navigation bar background, card container backgrounds |"
    info: "| 4 | Deep Slate | `#314062` | Elevated or hover-state surfaces |"

  elevation:

    info: "Elevation is expressed through background color steps (Cosmic Void → Abyssal Blue → Steel Navy → Deep Slate) rather than shadows. The one exception is the pill button group, which carries a soft double-layer shadow (rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px) — subtle enough to feel like the buttons float slightly off the nav surface without breaking the flat atmospheric plane. Shadows are not used on cards or content elements."

  imagery:

    info: "All imagery on this site is AI-generated — square-format monochromatic renders in blue-violet tones depicting anatomical and symbolic subjects: an eye with radiating iris lines, a stylized brain, a heart, a human hand, a profile of a head, lips, an arched passage, and a needle. Each image is contained in an 8px-radius tile with no text overlay. The color treatment is consistent: desaturated blue-violet with slight 3D relief texturing, making them feel like scientific specimens under ultraviolet light. No photography, no lifestyle imagery, no illustrations in the traditional sense. The hero visual is a generative ASCII sphere — thousands of characters forming a 3D ellipsoid — which is the primary 'image' of the page. Icon usage is minimal: small colored glyphs (gear, info circle) in amber preceding section headings. The visual content IS the product demonstration, not a metaphor for it."

  layout:

    info: "Narrow centered column layout with a max-width of approximately 800px — deliberately constrained for a research lab publishing cadence rather than a marketing site. The hero is full-viewport dark with centered ASCII text animation and overlaid logo, creating an immersive first screen before content begins. Below the hero, content flows as a single column of prose sections separated by 64px vertical gaps. Section headings use a left-aligned icon + label pattern. The Projects section breaks into a 4-column image grid with 8px gaps. Navigation is a full-width sticky bar at the top with left-aligned text links and right-aligned pill button cluster — no hamburger menu, no mega-menu, no sidebar. The layout is deliberately text-document-like: a long scrolling page of research notes with visual inserts, not a feature-driven marketing layout."

  agent_prompt_guide:

    quick_color_reference:
    - "Page background: #06051d (with gradient to #061434)"
    - "Primary text: #cad5e2"
    - "Headings: #ffffff"
    - "Inline links: #63b3ed"
    - "Borders/dividers: #e5e7eb"
    - "Nav surface: #1d293d"
    - "Sign Up button bg: #004f3b at 20% opacity, text: #00bc7d"
    - "Log In button bg: #8b0836 at 20% opacity, text: #fff1f2"
    - "Explore button bg: #733e0a at 20% opacity, text: #fefce8"

    example_component_prompts:

    - "**Hero section**: Full-viewport background using linear-gradient(0deg, #06051d 30%, #061434). Center a dense ASCII text animation in #cad5e2 at ~5% opacity forming a sphere shape. Overlay the text 'Midjourney' at 36px JetBrains Mono weight 400 #ffffff centered. Place three pill buttons (Sign Up green, Log In red, Explore amber) horizontally centered at bottom of hero with 16px gaps."

    - "**Navigation bar**: Full-width #1d293d background, 8px vertical padding, 48px horizontal padding. Left: 'Documentation' (JetBrains Mono 14px #63b3ed, no padding, 0px radius) and 'Explore' pill (amber tint). Right: 'Sign Up' (green pill) and 'Log In' (red pill). Pills use 9999px radius, 8px 20px padding, white border at 10% opacity."

    - "**Section heading**: Left-aligned amber icon (16px #f0b100) + text label 'Projects' at 30px JetBrains Mono weight 400 #ffffff with 8px gap between icon and text. No bold, no uppercase, no letter-spacing modification."

    - "**Project image grid**: 4-column grid, 8px column and row gap. Each cell: square-aspect image with 8px border-radius, monochromatic blue-violet AI-generated content, #e5e7eb border at 15% opacity. No hover text, no captions below images."

    - "**Body prose block**: Max-width 640px within the 800px page column. JetBrains Mono 16px weight 400, #cad5e2, lineHeight 1.5. Inline links in #63b3ed with no underline. Paragraph gap: 16px. Sits directly on #06051d background with no card container."

  specimen_button_color_system:

    info: "The three navigation pill buttons operate as a closed specimen-tray system where each button has its own hue tint at ~20% opacity, text color matched to that hue at high brightness, and a shared white 10% border. The triad is: Green (Sign Up) — bg #004f3b@20%, text #00bc7d; Red (Log In) — bg #8b0836@20%, text #fff1f2; Amber (Explore/Documentation) — bg #733e0a@20%, text #fefce8. This is not a priority hierarchy (primary/secondary/tertiary) — it is a categorical taxonomy where each action belongs to a different domain. Do not add a fourth color. Do not make one of the three visually dominant over the others."

  similar_brands:

    - "**OpenAI** — Dark-navy page background with monospace type and minimal navigation — similar restraint in using bold weights and color"
    - "**Anthropic** — Research-lab aesthetic with long-form prose sections on dark backgrounds and minimal decorative chrome"
    - "**Perplexity AI** — Full-dark theme with translucent button styles and monospace typography as primary UI voice"
    - "**Stability AI** — AI-generated imagery used as the primary visual language, dark backgrounds, square image grid layouts"
    - "**Replicate** — Monospace-first design system treating the entire interface as a terminal environment, not just code blocks"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cosmic-void: #06051d;
          --gradient-cosmic-void: linear-gradient(0deg, rgb(6, 5, 29) 30%, rgb(6, 20, 52));
          --color-abyssal-blue: #0f1c36;
          --color-steel-navy: #1d293d;
          --color-deep-slate: #314062;
          --color-mist: #cad5e2;
          --color-fog: #e5e7eb;
          --color-ash: #2e3038;
          --color-ghost-white: #ffffff;
          --color-ice-blue: #ebf8ff;
          --color-portal-blue: #63b3ed;
          --color-bioluminescent-green: #004f3b;
          --color-terminal-amber: #733e0a;
          --color-crimson-depth: #8b0836;
          --color-specimen-green: #00bc7d;
          --color-warning-amber: #f0b100;
          --color-fault-red: #ff2056;
        
          /* Typography — Font Families */
          --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.63;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-heading: 30px;
          --leading-heading: 1.25;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 800px;
          --section-gap: 64px;
          --card-padding: 32px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-images: 8px;
          --radius-inputs: 8px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
        
          /* Surfaces */
          --surface-cosmic-void: #06051d;
          --surface-deep-navy-gradient: #061434;
          --surface-abyssal-blue: #0f1c36;
          --surface-steel-navy: #1d293d;
          --surface-deep-slate: #314062;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cosmic-void: #06051d;
          --color-abyssal-blue: #0f1c36;
          --color-steel-navy: #1d293d;
          --color-deep-slate: #314062;
          --color-mist: #cad5e2;
          --color-fog: #e5e7eb;
          --color-ash: #2e3038;
          --color-ghost-white: #ffffff;
          --color-ice-blue: #ebf8ff;
          --color-portal-blue: #63b3ed;
          --color-bioluminescent-green: #004f3b;
          --color-terminal-amber: #733e0a;
          --color-crimson-depth: #8b0836;
          --color-specimen-green: #00bc7d;
          --color-warning-amber: #f0b100;
          --color-fault-red: #ff2056;
        
          /* Typography */
          --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.63;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-heading: 30px;
          --leading-heading: 1.25;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
        }