Style Guide
Last edit:
13/10/2024
Brand Board:
Fonts:
IMPORTANT: You MUST download and install BOTH of these fonts to your computer before editing ANY AEVA FILES!
- Open the link below
- Click 'Get Font' at top right
- Click 'Download All'
- 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 🤓
- Windows: Double-click on the .ttf file, then click 'Install'. Repeat until all done.
- Repeat for the other font
Paragraph: Roboto https://fonts.google.com/specimen/Roboto
Headings: Raleway https://fonts.google.com/specimen/Raleway
Downloads:
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:
- AEVA Logo - inline.png
- If this is too busy/large for the use case, use AEVA submark logo.png
- AEVA logo - stacked.png (use for more square applications)
- 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.
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.
<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:
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>
<a href="#" class="btn btn-default btn-lg btn-block">Block level button</a>