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.

Coming Soon...

Learn More

Generate beautiful Cats

Full Guide Coming Soon

Prompts  & Images

Full Guide Coming Soon

Become a Midjourney Pro

Full Guide Coming Soon

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