AES Web Stylesheet

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

Standard accent

button #063B59

Standard accent

button #9B37F6

Standard accent

button #5A4FED

Standard white

button #ffffff

Standard accent

button #063B59

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

Donate button

#10748E

Join button 

#9B37F6

Login button

#5A4FED

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

Always Keep up to Date with our Newsletters

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

Conventions

Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Conferences

Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Training & Development

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

July 2022
August 2022
October 2022
No event found!

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)

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)

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)

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)

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)

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

Choose your country of residence from this list: