Media & Brand

Welcome. Join our space cats to explore all of Jupiter and beyond.

Jup Brand Assets

Learn More

A Synthesis of the Jupiter Brand

The Jupiter brand kit simplifies the original complex UI/UX system, distilling it into its most universal and usable assets. This transformation turns the kit into a versatile creative tool, making it accessible to a broader audience. By focusing on core elements, it empowers users to create and innovate with ease, regardless of their technical expertise.

Accelerate Co-Creation

These assets give the community the tools to contribute and collaborate effectively. By simplifying its complex UI/UX system into universally usable and downloadable assets, it empowers users to innovate and share their ideas. This approach values community contributions, fostering a dynamic and inclusive environment where creativity and collaboration thrive.

Design Files

Unlock the full potential of your creativity with our Webflow Cloneable of the entire Jup.Eco website in addition to Figma files, designed to make the Jupiter brand kit accessible and versatile. Our streamlined kit provides the community with essential tools to contribute and collaborate effectively. Head to the "Design Files" tab and get started.

Colors & gradiants

Click on any color or gradient swatch labeled “Tap to Copy” to copy its hex code or gradient CSS to your clipboard. Paste the copied code directly into your design software or code editor to use the selected color or gradient. This brand kit provides ready-to-use color codes and gradient styles to ensure consistency in your projects.

COlors
Nebula blue
00B6E7
Helix cyan
22CCEE
Trifid Teal
2ED3B7
Aurora Green
76d484
Comet Green
94E5A0
Cosmic Lime
A4D756
Venus LIme
C7F284
Gradient one
00B6E7
A4D756
Gradient two
22CCEE
2ED3B7
Gradient three
2ed3b7
c8f284
Neutrals
Space black
0C0C0C
Meteorite
151514
Charcoal
1d1d1c
gunmetal
30302e
steel
707070
cloud
e8f9ff

Logos & Marks

Click the clipboard icon in the top right of each logo to copy the SVG code, then paste it into your design software or codebase. SVGs are scalable vector graphics that maintain quality at any size and are ideal for web and design use. Download PNGs or SVGs directly by clicking the respective download buttons for use in various applications or download the full logopack with the button in the top right of each section.

Typeface & fonts

Click the clipboard icon in the top right of each logo to copy the SVG code, then paste it into your design software or codebase. SVGs are scalable vector graphics that maintain quality at any size and are ideal for web and design use. Download PNGs or SVGs directly by clicking the respective download buttons for use in various applications or download the full logopack with the button in the top right of each section.

Fonts
Syne
JupDAO Heading Font

Syne is a versatile display font with a unique feature: As you increase the font weight, the font also becomes wider. This provides heavy visual impact in graphic design, UI/UX, and videography. However, Syne should never be used for long-form written content, only headings and display. Inter should be used in all instances where content wraps

Additionally, all numbers must use Inter rather than Syne.

Get Syne
Inter
Core Jupiter Font

Inter is Jupiter's core font family — carefully crafted & designed for computer screens and ease-of-readability. Inter is an open-source font family available through Google fonts, we utilize the variable version of Inter to maximize flexibility. It is used in all Jupiter related products.

Get Inter
JupdAO Font Heirarchy
Heading one
FOnt: Syne
Weight: Extra bold / 800, all caps
size: 56PX / 3.5rem
Line height: 90%
Tracking: -2%

Heading two

FOnt: Syne
Weight: Extra bold / 800, all caps
size: 32PX / 2rem
Line height: 110%
Tracking: -2%

Heading Three

FOnt: Syne
Weight: Bold / 700, All Caps
size: 24PX / 1.5 REM
Line height: 125%
Subheading Large
FOnt: INTER
Weight: Normal or Bold
size: 24px / 1.5rem
Line height: 150%
Subheading Medum
FOnt: INTER
Weight: Normal or Bold
size: 20px / 1.25rem
Line height: 150%
Subheading Regular
FOnt: INTER
Weight: Normal or Bold
size: 16px / 1rem
Line height: 150%
Caption
FOnt: Syne
Weight: Normal or Bold
size: 14PX / 0.875rem
Line height: 150%

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FOnt: INTER
Weight: Normal
size: 16px / 1rem
Line height: 150%

Usage examples

Heading one
Subheading Large or Medium go here.
button text
Heading two
Caption below (14 px, syne semi-BOLD)
Content goes here. Paragraphs use Inter for maximum legibility. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus nunc augue, nec tempor sapien consectetur sed. Etiam vulputate auctor gravida. Quisque non placerat nisi, ut consequat massa. Vivamus magna nunc, varius sit amet massa sed, faucibus suscipit eros. Duis dictum viverra libero, vitae volutpat metus rhoncus accumsan.
Heading three
Content goes here. Paragraphs use Inter for maximum legibility. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus nunc augue, nec tempor sapien consectetur sed. Etiam vulputate auctor gravida. Quisque non placerat nisi, ut consequat massa. Vivamus magna nunc, varius sit amet massa sed, faucibus suscipit eros. Duis dictum viverra libero, vitae volutpat metus rhoncus accumsan.
Jupiter FOnt Heirarchy
Heading 1
FOnt: Inter
Weight:  bold / 700
size: 72PX / 4.5rem
Line height: 120%
Tracking: -2%
Heading 2
FOnt: Inter
Weight: Normal
size: 60px / 3.75rem
Line height: 120%
Tracking: -2%
Heading 3
FOnt: Inter
Weight: Semibold / 600
size: 48PX / 3 REM
Line height: 130%
Subheading Large
FOnt: INTER
Weight: Normal
size: 24px / 1.5rem
Line height: 150%
Subheading Medum
FOnt: INTER
Weight: Normal
size: 20px / 1.25rem
Line height: 150%
Subheading Regular
FOnt: INTER
Weight: Normal
size: 16px / 1rem
Line height: 150%

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FOnt: INTER
Weight: Normal
size: 16px / 1rem
Line height: 150%

Usage examples

Heading One
Subheading Large Goes Here
Content goes here. Paragraphs use Inter for maximum legibility. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus nunc augue, nec tempor sapien consectetur sed. Etiam vulputate auctor gravida. Quisque non placerat nisi, ut consequat massa. Vivamus magna nunc, varius sit amet massa sed, faucibus suscipit eros. Duis dictum viverra libero, vitae volutpat metus rhoncus accumsan.
Heading Two
Subheading Regular Goes Here (if needed)
Content goes here. Paragraphs use Inter for maximum legibility. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus nunc augue, nec tempor sapien consectetur sed. Etiam vulputate auctor gravida. Quisque non placerat nisi, ut consequat massa. Vivamus magna nunc, varius sit amet massa sed, faucibus suscipit eros. Duis dictum viverra libero, vitae volutpat metus rhoncus accumsan.
Heading Three
Content goes here. Paragraphs use Inter for maximum legibility. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus nunc augue, nec tempor sapien consectetur sed. Etiam vulputate auctor gravida. Quisque non placerat nisi, ut consequat massa. Vivamus magna nunc, varius sit amet massa sed, faucibus suscipit eros. Duis dictum viverra libero, vitae volutpat metus rhoncus accumsan.

Create, unhindered

Learn More

Generate beautiful Cats

U cuious cat u (i haven't written this yet srry)

Prompts  & Images

Nope haven't written this either, srry.

Become a Midjourney Pro

Idk man just scroll.

DAO Specific Resources

The DAO itself has a personalized prompt. The below example uses ‘a cat astronaut’ but you can swap it out with any descriptors:

70's sci-fi illustration of a cat astronaut in the style of Roger Dean, Bruce Pennington, Tim White, Chris Moore, Paul Lehr, Chris Foss, and John Harris, teal, light green, seafoam, cyan

Resources
70's sci-fi illustration of a cat astronaut in the style of Roger Dean, Bruce Pennington, Tim White, Chris Moore, Paul Lehr, Chris Foss, and John Harris, teal, light green, seafoam, cyan

Descriptors

In Midjourney, descriptors are key terms like emotions, time periods, and colors that shape the outcome of generated images. Mastering the use of these descriptors allows you to guide the AI in producing more accurate and varied visual results based on your vision.

Descriptors

Prompt: an illustration of a <time period> astronaut cat

an illustration of a 1400's astronaut cat
an illustration of a 1980's astronaut cat

Vary Region

In Midjourney, descriptors are key terms like emotions, time periods, and colors that shape the outcome of generated images. Mastering the use of these descriptors allows you to guide the AI in producing more accurate and varied visual results based on your vision.

Vary Region

Prompt: 70's sci-fi illustration of an astronaut cat in the style of Roger Dean, Bruce Pennington, Tim White, Chris Moore, Paul Lehr, Chris Foss, and John Harris, teal, light green, seafoam, cyan

initial Prompt
70's sci-fi illustration of an astronaut cat in the style of Roger Dean, Bruce Pennington, Tim White, Chris Moore, Paul Lehr, Chris Foss, and John Harris, teal, light green, seafoam, cyan
Select region
Updated Prompt
70's sci-fi illustration of an astronaut cat with yellow eyes in the style of Roger Dean, Bruce Pennington, Tim White, Chris Moore, Paul Lehr, Chris Foss, and John Harris, teal, light green, seafoam, cyan

You can reference a specific entity or image with a --cref(more on this later).
In the below example we swap a sponge with a specific dragon image.

initial Prompt
A Cat holding a sponge
Vary Region + Selection
Image #2
Vary Region
a cat holding a dragon --cref https://s.mj.run/TsljULOImws

You can paste images into your prompt and use them in 2 main ways:

  1. Using a single image as a reference point with text 
  2. Blend multiple images together with(or without) text.

Image weight & photobashing

In Midjourney, the --iw (image weight) option lets you control how much influence an image has compared to your text description, allowing you to decide whether the image or text plays a bigger role in shaping the final result. Photobashing complements this by letting you combine elements from different images into a rough composite of your vision, which you can use as a reference. By adjusting image weight and using photobashed references, you can achieve a more precise and tailored outcome that aligns with your unique concept.

Image Weight

A snake-cat

You can use --iw to adjust the importance of the image vs the text. Higher values mean the image has more impact. It ranges from 0-3 with the default value at 1.

  • You can assign weights to each image if using multiple
  • Prompt: URL1::2 URL2::0.75
IMage 1
IMage 2
Result
  • You can get closer to what you want by photobashing an image first. This means to do a rough overlay of its component parts.
  • Imagine you want a specific dragon head on a specific car. You can photobash it and reference it to generate the image.
Source images
Photobash
generation
A dragon head protruding from a red ferrari --iw 3

Midjourney Versions

Midjourney offers different versions of its model, each tailored to create unique styles and outcomes. By choosing a specific version, you can influence the look and feel of the generated images, whether you’re aiming for realism, artistic flair, or something in between. These versions give you control over the final output, allowing you to experiment and find the best fit for your creative vision.

Versions
current Version
an illustration of a cat astronaut
v5.2
an illustration of a cat astronaut –v5.2
Niji
an illustration of a cat astronaut --niji 6

Parameters

These can be used to meaningfully change how a prompt generates something. Add these at the end of a prompt.

Parameters

Aspect Ratio:

the --ar changes the width-to-height ratio of the image. It is represented by 2 numbers, ex: 5:2

Aspect Ratio (--ar #:#)
illustration of a cat astronaut –-ar 5:2

the Chaos parameter:

The --c parameter influences how different the 4 generated images are. High values produce more varied results, and lower values are more similar. The range is from 0-100 with the default being 0.

Chaos 0
an illustration of a cat astronaut --c 0
Chaos 100
an illustration of a cat astronaut --c 100

Character Reference:

You can create images referencing specific characters using –cref URL

  • The character weight or –cw parameter sets the strength from 0-100. –cw 0 focuses on the face only, with higher values using face, hair clothing, etc.
  • You can maintain a consistent style as well by adding in the –sref parameter, more on this later.
reference image
character ref
an illustration of a cat astronaut --cref https://s.mj.run/nrdNtVN0s14
character weight 20
an illustration of a cat astronaut --cref https://s.mj.run/nrdNtVN0s14 --cw 20
character weight 100
an illustration of a cat astronaut --cref https://s.mj.run/nrdNtVN0s14 --cw 100

The NO parameter:

This parameter tells midjourney what to exclude.

prompt
still life painting of a cat astronaut at a base
"no" prompt
still life painting of a cat astronaut at a base --no helmet

The Quality parameter:

The –q parameter changes how much detail to give an image. It defaults to 1, but goes up to 2.

quality 0.5
--quality 0.5
Quality 2
--quality 2

The Repeat parameter:

The –r parameter runs multiple jobs at once. Accepts between 2-4 for basic subscribers

Style reference:

Used by calling --sref URL

  • You can use more than 1 image as a style reference at a time: –sref URL1 URL2 URL3
  • You can also use a random midjourny style with –sref random

Random Style reference
an illustration of a cat astronaut --sref random
Random style reference
an illustration of a cat astronaut --sref random

Style Weight:

  • se --sw to set the severity of a stylization when using an –sref. Accepts values from 0-1000 with 100 as the default
  • When using multiple style references, you can assign them different weights --sref URL1::2 URL2::1 URL3::1
Style weight 20
an illustration of a cat astronaut --sref 2142918607 --sw 20
Style weight 200
an illustration of a cat astronaut --sref 2142918607 --sw 200
Style weight 1000
an illustration of a cat astronaut --sref 2142918607 --sw 1000

Style reference seeds:

  • Whenever you do -sref random you will notice there is a number that comes up. You can use that number in future style references to prompt images in that specific style. 
  • You can blend sref codes together: ie –sref 123 456
  • You can blend an sref code with an image -sref 123 URL
  • And of course you can add weight to sref codes –sref 123::2 456::1
Style reference with cat
an illustration of a cat astronaut --sref 2142918553
Style reference with rocket
an illustration of a rocketship --sref 2142918553

Stylize:

the –s parameter influences how artistic the image is. Higher values are more artistic but may not adhere to the prompt as strongly. The default is 100 but it accepts 0-1000

stylize 0
an illustration of a cat astronaut --sref 2142918556 --stylize 0
stylize 750
an illustration of a cat astronaut --sref 2142918556 --stylize 750

Tile:

 the –tile parameter creates an image that can be repeated seamlessly to create a pattern for fabrics, wallpapers or banners.

illustration of space and stars --tile

Weird:

The –w parameter determines how unusual something is compared to previous midjourney generations. It accepts 0-3000 and the default is 0.

Weird 0
Illustration of a cat astronaut --weird 0
weird 3000
an illustration of a cat astronaut --sref 2142918556 --stylize 750

Misc Items:

Whether adding text to graphics, reframing an image, or creating mockups, this section will level up your Midjourney generations.

Misc Items

Adding Text:

You can use double quotation marks (“) around words or phrases to specify text you want to have appear in your image.

An astronaut cat with a sign that reads "I LOVE JUP"

Custom Zoom:

You can use double quotation marks (“) around words or phrases to specify text you want to have appear in your image.

an illustration of a cat astronaut --sref 2142918831
an image on a computer screen on a desk --ar 5:2 --zoom 2

Webflow Cloneable

Want to learn Webflow? The entire Jup.Eco website is fully available for you to clone in Webflow, experiment, build, and pick it apart. View it below by clicking "Open in Webflow" or "Clone" to copy it to your account.

Do you FOllow the DAO?

For the latest updates and information, follow the DAO on X.

FOllow Jup DAO