Site Guidelines
Components
WEB GUIDELINES
Foundations
Color Palette
PRIMARY
Our primary brand colors are Avnet Green, Black adn White. Avnet dark green will only be used on the Avnet site for readibility reasons, and only when there is green text on a white background
AVNET GREEN
#41C363
BLACK
#000000
WHITE
#FFFFFF
Backgrounds/Icons/
Text on Dark Background
Text/Backgrounds
Text/Backgrounds
SECONDARY
To provide a dynamic web framework, a set of Greys were chosen to give visual distinction to specific components.
DARK GREY
#5F6369
MEDIUM GREY
#919191
LIGHT GREY
#D2D2D2
LIGHT GREY 50
#E8E8E8
LIGHT GREY 25
#F4F4F4
LIGHT BLUE
#7DCEF1
MEDIUM GREY
#FD8813
LIGHT GREY
#138036
Limited Accents
Limited Accents
Secondary/Hover States/Text
Accent Colors
Used as accent and other treatments, not to be used as major design colors.
ERROR RED
#DC3545
LINK BLUE
#016C9F
Errors
Text Links
TYPOGRAPHY
Oswald Light
Arial Bold
Arial Regular
Fontawesome Pro Solid ICONS
Body Copy
This is body copy. Ed quis doluptat. Delenim agnisitem sinciant esos 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 / line height 17px
Product Description Text (PDP, PLP, Cart etc.)
For E-Commerce
Ed quis doluptat. Delenim agnisitem sinciant esos 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 / 10-14px
Arial regular /13px
Symbols and small icons
Fontawesome Pro Solid (4.7.2)
Header 1
Line Two
White Background
Oswald Light, Uppercase
#000000 Text / #41C363 Slash
48px / line height 50px
Keep to ONE line as often as possible.
Max Character count (with spaces) 75
- For articles only: max 90 characters
18% slash mark
Header 1
Line Two
Green Background
Oswald Light, Uppercase
#000000 Text / #FFFFFF Slash
48px / line height 50px
Keep to ONE line as often as possible.
Max Character count (with spaces) 75
- For articles only: max 90 characters
18% slash mark
Header 1
Line Two
Black Background
Oswald Light, Uppercase
#FFFFFF Text / #41C363 Slash
48px / line height 50px
Keep to ONE line as often as possible.
Max Character count (with spaces) 75
- For articles only: max 90 characters
18% slash mark
Header 2
Header 2
Header 2
Oswald Light, Sentence case #138036
Small (Default) 24px
Medium 36px
Large 40px
On Hover
On Hover
On Hover
Underline
Small (Default) 24px
Medium 36px
Large 40px
Line Height is 4 px higher than font size. E.g. Small 24px font, Line height 28px.
Anytime an H2 is in a white/light background use #138036 or #000000
Header 2
Header 2
Header 2
Oswald Light, Sentence case #138036
Small (Default) 24px
Medium 36px
Large 40px
On Hover
On Hover
On Hover
Underline
Small (Default) 24px
Medium 36px
Large 40px
Line Height is 4 px higher than font size. E.g. Small 24px font, Line height 28px.
Anytime an H2 is in a white/light background use #138036 or #000000
Header 2
Header 2
Header 2
Oswald Light, Sentence case #138036
Small (Default) 24px
Medium 36px
Large 40px
On Hover
On Hover
On Hover
Underline
Small (Default) 24px
Medium 36px
Large 40px
Line Height is 4 px higher than font size. E.g. Small 24px font, Line height 28px.
Anytime an H2 is in a black/dark background use #41C363 or #FFFFFF
Header 2
Header 2
Header 2
Oswald Light, Sentence case #138036
Small (Default) 24px
Medium 36px
Large 40px
On Hover
On Hover
On Hover
Underline
Small (Default) 24px
Medium 36px
Large 40px
Line Height is 4 px higher than font size. E.g. Small 24px font, Line height 28px.
Anytime an H2 is in a white/light background use #41C363 or #FFFFFF
Header 2
Header 2
Header 2
Oswald Light, Sentence case #138036
Small (Default) 24px
Medium 36px
Large 40px
On Hover
On Hover
On Hover
Underline
Small (Default) 24px
Medium 36px
Large 40px
Line Height is 4 px higher than font size. E.g. Small 24px font, Line height 28px.
Anytime an H2 is in a white/light background use #000000
Header 3
Arial Bold / 18px
On Hover
Arial Bold
Underline / 18px
Arial, Sentence Case, #000000
Line Height is 4px higher than font size, 22px line height.
Anytime an H3 is in a white/light background use #138036 or #000000
Header 3
Arial Bold / 18px
On Hover
Arial Bold
Underline / 18px
Arial, Sentence Case, #000000
Line Height is 4px higher than font size, 22px line height.
Anytime an H3 is in a white/light background use #138036 or #000000
Header 3
Arial Bold / 18px
On Hover
Arial Bold
Underline / 18px
Arial, Sentence Case, #000000
Line Height is 4px higher than font size, 22px line height.
Anytime an H3 is in a white/light background use #138036 or #000000
Header 3
Arial Bold / 18px
On Hover
Arial Bold
Underline / 18px
Arial, Sentence Case, #000000
Line Height is 4px higher than font size, 22px line height.
Anytime an H3 is in a white/light background use #138036 or #000000
Header 3
Arial Bold / 18px
On Hover
Arial Bold
Underline / 18px
Arial, Sentence Case, #000000
Line Height is 4px higher than font size, 22px line height.
Anytime an H3 is in a white/light background use #138036 or #000000
Reference Links to Official ADA Standards for Web Accessibility:
W3C ADA Website
WCAG 2 Overview | Web Accessibility (WAI) | W3CUnderstanding Success Criterion 1.14.11: Non-text Contrast | WAI | W3C