01. Colors02. Typography03. Logos04. Components

Colours

Brand 1 - #fccd3b

BRAND 2 - #ff8a00

Darker primary - #f5b73d

Light Backgrounds - #f6f5f1

Greys

Text /  backgrounds- #2a3037

Steel grey- #2a4858

Gradients

Primary Gradient
Brand 2 → Brand 1

Light Gradient
background → BRAND 1

Alerts

Success - #73ec99

Error - #f84568

Warning - #f6d87c

Typography

Download the Future Super typeface here.

Aa

Lato
Black

Aa

Lato
Bold

Aa

Lato
Light

Headings

The quick brown fox jumps over the lazy dog

H1 - 48PX / 1.3EM - Lato

The quick brown fox jumps over the lazy dog

H2 - 38PX / 1.3EM - Lato

The quick brown fox jumps over the lazy dog

H3 - 24PX / 1.3EM - Lato

The quick brown fox jumps over the lazy dog

H4 - 20PX / 1.3EM - Lato
The quick brown fox jumps over the lazy dog
H5 - 24PX / 1.3EM - Lato

Paragraphs

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.

PARAGRAPH TEXT - 16PX/ 1.8EM - Lato

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.

PARAGRAPH TEXT - 16PX/ 1.8EM - Lato

Others

Here is a caption to add on an element.

CAPTION - 12PX/ 1.4EM - Open Sans

Here is a label to add to your forms as needed.

LABEL - 16PX/ 1.4EM - Open Sans

Small text that you'll have on the page maybe for a small description.

SMALL - 14PX/ 1.4EM - Open Sans

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.

VERY SMALL - 11PX/ 1.6EM - Open Sans

Logos & Brand Assets

Download our logo assets in PNG format here (contact us for other file formats).

MAIN LOGo (petal)
DOWNLOAD
MAIN LOGO (linear)
DOWNLOAD
MAIN LOGO WHITE (PETAL)
DOWNLOAD
MAIN LOGO WHITE (linear)
DOWNLOAD

Website components

Elements below are references for layout styles across our website — image sections, forms, product info tables, etc...

Your super, your impact.

Three ethical options, from low to high impact.

Choose one that suits you today, change anytime.

Balanced Index

100% divestment

A Balanced option that is fossil fuel free, contains no nasties, and favours investment in ethical companies.

Investment objectives: Outperform CPI + 2.75% p.a. over 10 year periods (after fees)

0.99% pa + $1.80 per week

LOWest IMPACT
Switch today
Learn more →

Balanced Impact

Increased social & ethical outcomes

A Balanced option that is fossil fuel free, contains no nasties, and actively invests in positive ethical outcomes.

Investment objectives: Outperform CPI + 3.00% p.a. over 10 year periods (after fees)

1.79% pa + $1.80 per week

high IMPACT
Switch today
Learn more →

Renewables Plus

Supercharged renewable investment

A Growth option that's fossil fuel free, with no nasties and invests 20% of the portfolio into renewable energy projects.

Investment objectives: Outperform CPI + 3.00% p.a. over 10 year periods (after fees)

1.89% pa + $1.80 per week

HIGHest IMPACT
Switch today
Learn more →

Read our Product Disclosure Statement to find out more.

*Oh, and there's no weekly admin fee if your balance is below $1000 :)

Asset Management Returns

Your super is for your future, so we pull out all the stops for longterm success

Here's a more detailed look into our Superannuation Returns over various periods

Renewables Plus

Increased social & ethical outcomes

Balanced Impact

Supercharged renewables investments

Balanced Index

100% divestment

$349

$17

$4



0.1%

0.1%

3%

4%

4%

3%

0.1%

0.1%

0.1%

1 month
3 months
6 months
1 year p.a.
3 years p.a.
Customer Satisfaction
Fees

Balanced Index

100% divestment from all the nasty stuff

$349

$17

$4

1 month
3 months
6 months
1 year p.a.
3 years p.a.
Customer Satisfaction
Fees

0.66%

4.38%

5.26%

Renewables Plus

Increased social & ethical outcomes

Balanced Impact

Increased social & ethical outcomes

-4.24%

-2.01%






Future Super Styleguide

Typography, colours, layout & more

About our options

We have two options for investing in a fairer, brighter, renewables-powered future.

Balanced Growth

Invest in line with the strongest ethical considerations. Your super will be investing in a mix of sustainable, forward-thinking companies, including renewable energy.

Key features:

100% fossil-free

No specific renewables target

70 / 30 mix of growth / defensive assets

1.79% of your balance and $94 p.a.

Asset allocation

Alternatives: 5%

Australian shares: 40%

International shares: 25%

Fixed Interest: 25%

Cash: 5%

Growth

(Renewables+)

Invest in line with the strongest ethical considerations. Your super will be investing in a mix of sustainable, forward thinking companies, with up to 20% of your balance invested directly in renewable energy.

Key features:

100% fossil-free

Target 20% portfolio allocation to renewables

75 / 25 mix of growth / defensive assets

$1.89% of your balance and $94 p.a.

Asset allocation

Alternatives: 10%

Australian shares: 40%

International shares: 25%

Fixed Interest: 20%

Cash: 5%

No investment in animal testing

Zero investments in companies involved in using or exploiting animals for food, testing, entertainment or export.

No investment in detention centres

Zero investments in companies involved in detention centres.

Investments in education and recycling

Invest in positive industries like education, recycling and renewable energy.

Default Heading Styles

This a H1 inside a Section Title Wrapper

This a H1 inside a Section Title Wrapper

And this H2 is also inside it.

Heading 2 Heading 2 Heading 2 Heading 2 Heading 2 Heading 2 Heading 2 Heading 2 Heading 2 Heading 2

Heading 3 Heading 3 Heading 3 Heading 3 Heading 3 Heading 3 Heading 3 Heading 3 Heading 3 Heading 3 Heading 3 Heading 3

Heading 4 Heading 4 Heading 4 Heading 4 Heading 4 Heading 4 Heading 4 Heading 4 Heading 4 Heading 4 Heading 4 Heading 4 Heading 4 Heading 4

Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5
Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5 Heading 5

This is an example of a Span Class, called Text Highlight. This is a way to set 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.

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.

The Text Link is set to dark orange, with a subtle yellow on hover
  • 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.

  • 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.

  • 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.

The Block Quote has lots of top & bottom padding

Rich Text Block styles are bound by the default styles

Heading 1

Heading 2

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click.

Heading 3

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click.

Heading 4

Heading 5

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click.

Heading 5

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click.

Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click.

A heading for dot point lists!
  • ‍Dot points! Dot points!
  • ‍Dot points! Dot points!

A heading for numbered lists!

  1. ‍Dot points! Dot points!
  2. ‍Dot points! Dot points!
  3. ‍Dot points! Dot points!
"Quotes will look super cool now!"

An image!

Image caption goes here and is supposed to be subtle.

A video!

 

Default Heading Styles

Heading 1 is generally the biggest heading

Heading 2 is used for subheadings, mostly.

Heading 3 is great for paragraph headings

Heading 4 looks good for column headings and sidenotes.

Heading 5 does well as microcopy or mini-titles
Heading 6 is so small that it's probably best to use as category titles or as icon / image descriptions.

Forced Heading Styles

H1 Large

H1

Section Title

H2

H3

H4

H5
H6

Default type styles

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

Block Quote
Text Link

Forced type styles

This Paragraph is actually a Text Block! Woah man...
This is a text block that looks like a Block Quote
Text Link

Rich Text Block

All styles in the Rich Text Block will be defined by the default styles, therefore it's important to get these standards just right.

Forced styles do not work in a Rich Text Block. For example, if you set a Heading 1, as below, you cannot force this to appear any differently.

It's important to note that using a H1 in a Rich Text Block may affect SEO, as an H1 may have been used already on the page in question.

Heading

Heading

Heading

Heading

Heading
Heading

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  • Dot points
  • Dot points
  1. Numbered list
  2. Numbered list

Colour palette

Brand Yellow - #fccd3b
Brand Orange - #ff8a00
Dark Navy - #2a3037

This heading has been forced to look like an H1 heading, but it ain't!

This is highlighted text and this is a Text Black Span.

This Rich Text element has been styled to fit 80% of the container it's in (Rich Text Wrapper). This improves legibility and simplifies the layout.

Also, it's has an added Combo Class of Margin Bottom 30, which can applied to any element and automatically adds 30 pixels of space underneath it.

The rich text below has been wrapped in a Text Align Center DIV, so use these when you need to align text, rather than adding new styles or combo classes :-)

This Rich Text element is inside a Text Align Center Div Block

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Future Super Style Guide

Colours

Primary

Yellow #FCCD3B

Dark Yellow #F5B73D

Orange #FF8A00

Text and Background

Dark #2A3037

Light #DFE4E6

Background #f4f1e9

White #FFFFFF

Validation

Green #1ac9bc

Red #e9613c

Gradient

Yellow to Orange, Right Handle 75%, 70 degrees

Typography

Lato! Download from Google Fonts

Heading

Heading

Heading

Heading

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.

This is a link

Unordered list:

  • One
  • Two
  • Three

Ordered list:

  1. One
  2. Two
  3. Three

Subscription

Changing the backgrounds within these is a simple combo class addition.

Structure: Image Section + Solar Background Image > Image Section Overlay

Subscribe to our newsletter!

Don't miss a thing, jump on the Future Super newsletter

Testimonial Sections

It's obvious why people love Future Super 😍

Join thousands of Australians who've moved almost $350 million out of fossil fuels.

Sustainability is a huge part of my life. Making the switch to Future Super was a natural choice.

Victoria
Student

I take divestment seriously. With Future Super, my money works to reduce the impacts of climate change.

Rachel
Natural Resource Manager

I can make my super work for more than just my own benefit.

Maarten
Retiree

Sustainability is a family value, and we all need to participate in the solutions.

Damion
Scientist

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Jimmy Jones
Happy Customer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Jessy Johnson
VERY Happy Customer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Jason James
Super Happy Customer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Julie Jenson
Loyal Customer

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.

Image Sections

Changing the backgrounds within these is a simple combo class addition.

Structure: Image Section + Solar Background Image > Image Section Overlay

Default Background

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.

Testimonial Background

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.

Solar Background

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.

Fossil Fuel Background

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.

Future Super Styleguide

Typography, colours, layout & more

Future Super Styleguide

Typography, colours, layout & more