Navigation notes
Logo Header bar
Width: Desktop:1150px wide, Tablet: 10% margin either side, Mobile: 10% margin either side,
Height: Desktop: 110px, tablet:, mobile:
Logo height: Desktop: 20px margin
Top Level navigation
#031B29, Hover and active colour: #063B59
Desktop: Font size: 18px, 15px margin top and bottom
Tablet:
Mobile:
Second Level navigation
#063B59, Hover and active colour:
Desktop: Font size: 18px, 15px margin top and bottom
Tablet:
Mobile:
Third Level navigation
#ffffff, Text colour: #797676 and #333333 on hover, Text size: 14px
Desktop height: 800px,
Tablet:, Mobile:
Space between items: 15px
Breadcrumbs notes
Font size: 14px
Previous pages: #063B59 14px medium
Current page: #031B29 14px regular
Margin top and bottom: Desktop: 30px
Space between text and slash: 8px
Colours
Core Colours
#063B59
- Logo Colour
- Used as 2nd level navigation
- Used as previous page items in navigation
#031B29
- Used as 1st level navigation
Accent Colours
#9B37F6
- Heading underlines
- Dividers
- Label Underlines
- Call to action backgrounds
- Can have white text one
- Join Button Background
#53B7ED
- Heading underlines
- Dividers
- Label Underlines
- DON’T Use as background colour
- DON’T put white text on
#5A4FED
- Heading underlines
- Dividers
- Label Underlines
- Call to action backgrounds
- Can have white text one
- Login Button Background
- Links
#1DDEBA
- Heading underlines
- Dividers
- Label Underlines
- DON’T Use as background colour
- DON’T put white text on
Typography Colours
#333333
- Default for headings
- Default for body text
#797676
- Sub headings that aren’t as important
#ffffff
- For text on #9B37F6, #5A4FED, #063B59 or #031B29
Background Colours
- Standard background for every page
#F7F7FC
#DBE0F3
- To be used for sections where more contrast is needed
#ffffff
- Background colour for overlapping cards
Additional Colours
#10748E
- Donate Button only
Widths
Media Queries
Tablet Breakpoint: 1100px
Mobile Breakpoint: 760px
Navigation, footer, breadcrumbs and home page width
Desktop: 1150px
Tablet: 5% margin left & right
Mobile: 5% margin left & right
Page content
Desktop: 1000px
Tablet: 10% margin left & right
Mobile: 10% margin left & right
Blocks of text
Desktop: 1000px
Tablet: 15% margin left & right
Mobile: 10% margin left & right
Typography
Typography - Responsive Sizes
Aa
Roboto
H1 Heading - Roboto 300
<H1> only gets used once per page and is the title of the page. If there are multiple pages then <H2> is used.
Desktop: 55px, Tablet: 40px, Mobile: 32px
H2 Heading - Roboto 300
<H2> gets used for all main titles that aren’t the title of the page (such as on the homepage)
Desktop: 55px, Tablet: 40px, Mobile: 32px
H3 Heading - Roboto 300
<H3> is used as a subtitle to <H1> and <H2> or is used as a smaller title in the page.
Desktop: 40px, Tablet: 32px, Mobile: 28px
H4 Heading - Roboto 300
<H4> is used as a subtitle to <H3> or is used as a smaller title in the page
Desktop: 28px, Tablet: 20px, Mobile: 20px
H5 Heading - Roboto 400
<H5> is used as a subtitle to <H4> or is used as in body titles
Desktop: 18px, Tablet: 16px, Mobile: 16px
Body
Body text is used for any large bodies of text
Desktop: 16px, Tablet: 14px, Mobile: 14px
Typography - Leading (space between lines)
H1
H2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Desktop: 60px, Tablet: 50px, Mobile: 42px
H3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
Desktop: 48px, Tablet: 42px, Mobile: 38px
H4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
Desktop: 38px, Tablet: 26px, Mobile: 26px
H5
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Desktop: 26px, Tablet: 24px, Mobile: 24px
Body
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et.
Desktop: 24px, Tablet: 20px, Mobile: 20px
Typography Assets
AES Web Stylesheet
H1 or H2 title centred when the title is short and doesn’t need a subtitle. Line 5px and can be any of the accent colours.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
H1 or H2 title with H3 subtitle Spacing between: Desktop: 30px, Tablet: 20px, Mobile: 20px
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
H3 title with H4 subtitle Spacing between: Desktop: 30px, Tablet: 20px, Mobile: 20px
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
H4 title with H5 subtitle Spacing between: Desktop: 30px, Tablet: 20px, Mobile: 20px
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et.
H5 title with body text Spacing between: Desktop: 30px, Tablet: 20px, Mobile: 20px
Link text #5A4FED without click, #063B59 on click and hover
Spacing
Start of new colour section to title or between sections. Desktop: 120px, Tablet: 100px, Mobile: 80px
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Title to content: Desktop: 60px, Tablet: 40px, Mobile: 40px
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et.
Title to content: Desktop: 60px, Tablet: 40px, Mobile: 40px
End of content to end of section: Desktop: 120px, Tablet: 100px, Mobile: 80px
Buttons — All page buttons
Hover states
Border = same as normal, Fill = Border colour, Text = #ffffff
Responsive Sizing
Desktop: Border 2px, Padding left and right 25px, padding top and bottom 12px, Font: Roboto 18px Medium
Tablet:
Mobile:
Buttons — Navigation Only
Call to action strip
Background colour: #9B37F6 or #5A4FEDÂ
Text and button colour: #ffffffÂ
Width content: desktop 1000px, tablet 20% margin, mobile 10% marginÂ
Columns: heading 60%, button 40%
Padding top and bottom: Desktop 50px
Heading: H3 (40px) but swapped to medium weight
Image boxes
Add Your Heading Text Here
Add Your Heading Text Here
Add Your Heading Text Here
Add Your Heading Text Here
Add Your Heading Text Here
Add Your Heading Text Here
Add Your Heading Text Here
Add Your Heading Text Here
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Section details:
Padding top and bottom: 120px, Tablet: 100px, Mobile: 80px
Width: Desktop: 1000px, tablet 20% margin, mobile 10% margin
Middle margin 30px total: Left column margin right = 15px, Right column margin left = 15px
Margin between rows 30px
Overlapping cards:
Cards overlap image by 60px
Margin: top:15px, left:30px, right 30px bottom 30px
Aligned centrally to image
Line 7px
Event Slider
[MEC id="931"]
Section width 1000px
Chevrons (arrows) slider + 30px
30px margin between each image
Cards:
Overlapping image by 60px
Margin: Top & Bottom 30px, left & right: 15px
Date to title: 30px
Location to labels: 30px
Labels to button: 30px
Label line 4px
Text:
Date & location: 14px regular
Title: 16px medium
Labels: 14px regular
News Slider
Sustaining Member
$
1,000
Annually
-
Entry to the AES Job Board with an included free 3 postings on the AES job board (for positions at your company only), further postings are available at 50% discount ($175).
-
Your company logo on the AES website ticker
-
Listing on the online Sustaining Member list with a link to your website
-
Recognition in the Convention program materials
-
Listing in every issue of the Journal of the AES
-
AES publications purchases at Individual Member rates
-
Subscription to the online Journal of the AES (optional)
-
10% discount on advertising in the Journal of the AES (JAES)
Click Here
This is text element
Sustaining Member
$
1,000
Annually
-
Entry to the AES Job Board with an included free 3 postings on the AES job board (for positions at your company only), further postings are available at 50% discount ($175).
-
Your company logo on the AES website ticker
-
Listing on the online Sustaining Member list with a link to your website
-
Recognition in the Convention program materials
-
Listing in every issue of the Journal of the AES
-
AES publications purchases at Individual Member rates
-
Subscription to the online Journal of the AES (optional)
-
10% discount on advertising in the Journal of the AES (JAES)
Click Here
This is text element
Sustaining Member
$
1,000
Annually
-
Entry to the AES Job Board with an included free 3 postings on the AES job board (for positions at your company only), further postings are available at 50% discount ($175).
-
Your company logo on the AES website ticker
-
Listing on the online Sustaining Member list with a link to your website
-
Recognition in the Convention program materials
-
Listing in every issue of the Journal of the AES
-
AES publications purchases at Individual Member rates
-
Subscription to the online Journal of the AES (optional)
-
10% discount on advertising in the Journal of the AES (JAES)
Click Here
This is text element
Sustaining Member
$
1,000
Annually
-
Entry to the AES Job Board with an included free 3 postings on the AES job board (for positions at your company only), further postings are available at 50% discount ($175).
-
Your company logo on the AES website ticker
-
Listing on the online Sustaining Member list with a link to your website
-
Recognition in the Convention program materials
-
Listing in every issue of the Journal of the AES
-
AES publications purchases at Individual Member rates
-
Subscription to the online Journal of the AES (optional)
-
10% discount on advertising in the Journal of the AES (JAES)
Click Here
This is text element
Sustaining Member
$
1,000
Annually
-
Entry to the AES Job Board with an included free 3 postings on the AES job board (for positions at your company only), further postings are available at 50% discount ($175).
-
Your company logo on the AES website ticker
-
Listing on the online Sustaining Member list with a link to your website
-
Recognition in the Convention program materials
-
Listing in every issue of the Journal of the AES
-
AES publications purchases at Individual Member rates
-
Subscription to the online Journal of the AES (optional)
-
10% discount on advertising in the Journal of the AES (JAES)
Click Here
This is text element
Footer
Background colour: #DBE0F3
Padding top: Desktop: 60px, tablet: 40px, mobile: 40px
Padding bottom: Desktop: 30px, tablet: 20px, mobile: 20px
Padding title to first item: 30px, tablet: 20px, mobile: 20px
Padding between items (excluding quick links): 30px, tablet: 20px, mobile: 20px
Padding between quick links: 15px
Heading colour: #5A4FED
Content text: #333333, link hover colour: #5A4FED
Icon colour: #333333
Social media hover colour: #797676
