Site Guidelines
Components
STYLE GUIDE
COLOR PALETTE
PRIMARY
Our primary brand colors are Avnet Green, Black, and white. Avnet dark green will only be used on the Avnet site for readability reasons, and only when there is green text on a white background.
SECONDARY
To Provide a dynamic web framework, set of Greys were chosen to give visual distinction to specific components.
TERTIARY
Tertiary colors are used as accents and other treatments, not to be used as major design colors.
TYPOGRAPHY
Apercu Avnet Bold
Apercu Avnet Regular
Arial Bold
Arial Regular
Fontawesome Pro Solid ICONS
This is body copy. Ed quis doluptat. Delenim agnisitem sinciant eos senti dolore et in experup tatinvel eosam a ad erit lanto sime planis sim susape sit ut dignihitat. Git odi aut esti quosam quos moluptatia nuscient dolestiaerum utet pro mi, sint lacillab ipidendae as molore et andendunt exero doles acius Arial Regular / 15px
This is a text link
#016C9F Arial Regular
HEADER 1 LINE TWO
Oswald Light, Uppercase #000000 / #FFFFFF 48px / line height 50px Max character count (with spaces) 75
- For articles only: max 90 characters
HEADER 1 LINE TWO
HEADER 1 LINE TWO
Header 2
Oswald Light, Sentence Case #138036 / Small 24px / Medium 36px / Large 40px
On hover
Oswald Light, Sentence Case Underline #138036 / Small 24px / Medium 36px / Large 40px
Header 2
Oswald Light, Sentence Case #41C363 / Small (Default) 24px / Medium 36px / Large 40px
On hover
Oswald Light, Sentence Case Underline #41C363 / Small (Default) 24px / Medium 36px / Large 40px
Anytime an H2 is in a black/dark background use #41C363 or #FFFFFF
Header 2
Oswald Light, Sentence Case #000000 / Small (Default) 24px / Medium 36px / Large 40px
On hover
Oswald Light, Sentence Case Underline #000000/ Small (Default) 24px / Medium 36px / Large 40px
Anytime an H2 is in a green background use #000000 only
ALT HEADER 2
Oswald Light, Uppercase #000000 / Default 24px
ON HOVER
Oswald Light, Uppercase Underline #000000 / Default 24px
This is for the homepage and main landing pages
Same color treatments for H1 apply based on background color
Max character count: 35
Header 3
Arial Bold / 18px
Header 3
Arial Bold
#138036 / 18px
Header 3
Arial Bold
#41C363 / 18px
Main Nav
Arial / 13px
Arial/ 12px
Body Copy
Arial Regular Sentence case
#000000 / 15px
Body Links
Arial Regular, Sentence case
#016C9F / 15px
Symbols and small icons
On hover
Arial Bold Underline / 18px
On hover
Arial Bold Underline
#138036 / 18px
On hover
Arial Bold Underline
#41C363/ 18px
On hover
Arial
Underline / 13px
Arial
Underline / 12px
N/A
On Hover
Arial Regular, Sentence case
Underline
#016C9F / 15px