Print View

Your printed page will look something like this.

https://aeva.asn.au/style-guide/

Style Guide

Last edit:

13/10/2024

 

 

Brand Board:

PDF file

 

Fonts:

IMPORTANT: You MUST download and install BOTH of these fonts to your computer before editing ANY AEVA FILES!

  1. Open the link below
  2. Click 'Get Font' at top right
  3. Click 'Download All'
  4. Unzip the file and install the fonts as per your computer's operating system
    • Windows: Double-click on the .ttf file, then click 'Install'. Repeat until all done.
      • Alternatively, you could select all the .ttf files, right click, and then 'Install'
    • macOS: Double-click on the .ttf file, then click 'Install'. Repeat the double-click and install procedure untill all the .ttf files are installed.
    • Linux: If you use Linux, you can figure it out yourself 🤓
  5. Repeat for the other font

Paragraph: Roboto https://fonts.google.com/specimen/Roboto

Headings: Raleway https://fonts.google.com/specimen/Raleway

 

Downloads:

AEVA Colours PDF file

Download logo pack

AEVA template files

Changelog:

Current Version: v1_102024 - first version of new logo designs, templates for letterheads, presentations, etc.

 

Logo Use:

In the ZIP file of logos, there are multiple variations of the logo. Logo hierarchy as follows:

  1. AEVA Logo - inline.png
    • If this is too busy/large for the use case, use AEVA submark logo.png
  2. AEVA logo - stacked.png (use for more square applications)
  3. AEVA logo - inline reverse.png (use when on a dark background)
    • If this is too busy/large for the use case, use AEVA submark logo - reverse.png

Included in the ZIP are also a .ai file and .SVG file for each version of the logo. The .ai is the source Adobe Illustrator file, and the .SVG is a vector format. These can be used to export a rescaled logo if required (software such as Inkscape can process SVGs). Typically, the .png images for each case should be adequate.

There are 2 rescaled images in the ZIP:

  • AEVA logo - EMAIL.png is a small version that can be used for email signatures, etc.
  • AEVA logo - stacked FULL SQUARE PROFILE PIC.jpg is for social media profile pictures and the like. This logo has a white background (not transparent) and has some blank space on 4 sides (i.e. not edge-to-edge).

 

 

 

Angled colours:

To be used on presentations/etc.

Download pack

 

 


The following is website-related information:

Our website theme is based off this: https://bootswatch.com/3/readable/ 

Colours:

From: https://mycolor.space/?hex=%23315FAB&sub=1

#315fab (AEVA blue) - #f8fafd

#0089cb (news/PR) - #f7fbfe

#00aec9 (articles) - #f7fdfe

#00cfac (events) - #f7fefd

#89e885 - #fbfffb

#f9f871

For backgrounds of boxes - use second colour, or add -08 to end (e.g. #315fab08) ⇽ may not work in some situations, but is how the colour was derived

 

Jumbotron customisation:

Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

 

<div class="jumbotron">

[add your contents]

</div>

 

To change border colour, add to HTML: style="box-shadow: 5px 5px 15px rgba(0,0,0,.2), 15px 15px [COLOUR];"

 

Buttons:

Class: Default Button

Class: Primary Button

If you need to customise colour, use Default Button, then add to HTML: style="background-color: [COLOUR];border-color: [COLOUR];"

 

Large button Default button Small button Mini button

To change button size, add blue text to HTML:

<a href="#" class="btn btn-primary btn-lg">Large button</a>
<a href="#" class="btn btn-primary">Default button</a>
<a href="#" class="btn btn-primary btn-sm">Small button</a>
<a href="#" class="btn btn-primary btn-xs">Mini button</a>


Block level button

<a href="#" class="btn btn-default btn-lg btn-block">Block level button</a>