Bosch Professional Power Tools & Accessories
BUTTONS
There are 2 types of Buttons:
Navigational (NAV) Buttons and Call to Action (CTA) Buttons
Navigational Buttons are used to move a User from one piece of content to the next, such as “Learn More”, “Read More” or “Find a Dealer”.. Call to Action Buttons are used to elicit a specific User Response or Action, such as “Buy Now”, or “Shop Now”..
NAV BUTTONS:
Font height: 16px
Line height: 30px
Line height: 30px
Padding left: 10px
Padding right: 10px
Background color: none, border-width: 2px, radius: 0
CTA BUTTONS:
Font height: 16px
Line height: 30px
Line height: 30px
Padding left: 10px
Padding right: 10px
Background color: E20015, border: none, radius: 0
Font height: 16px
Line height: 30px
Line height: 30px
Padding left: 10px
Padding right: 10px
Background color: none, border-width: 2px, radius: 0
Font height: 16px
Line height: 30px
Line height: 30px
Padding left: 10px
Padding right: 10px
Background color: E20015, border: none, radius: 0
NAV BUTTON HOVER:
CTA BUTTON HOVER: NO CHANGE
Background-color: 005691, border: none, radius: 0
NAV BUTTON ON WHITE:
Font height: 16px, color: 003b6a
Background-color: none, border: 2px, border-color: 003b6a, radius: 0
CTA BUTTON ON WHITE: NO CHANGE
LIVE BUTTON PREVIEWS
NAV Button – desktop width=175px
NAV Button – mobile width=300px
CTA Button – desktop width=175px
CTA Button – mobile width=300px
NAV Button – desktop width=175px
NAV Button – mobile width=300px
CTA Button – desktop width=175px
CTA Button – mobile width=300px
HOT SPOTS
Image hotspot content types allow you to create interactive image maps. When a user clicks on a hotspot, an action occurs such as revealing a tooltip with descriptor text, additional imagery or a new file opens…
Hotspot – NORMAL
Circle: white
Outline: Bosch Light Gray W25
Icon: black
Hotspot – HOVER
Circle: Bosch Light Blue W50
Outline: Bosch Light Gray W25
Icon: white
Hotspot – PRESSED
Circle: Bosch Light Blue
Outline: Bosch Light Gray W25
Icon: white
HOT SPOTS – NA
Hotspot – NORMAL
Circle: E20015
Outline: white
Icon: white
Hotspot – HOVER
Circle: Bosch Light Blue W50
Outline: Bosch Light Gray W25
Icon: white
Hotspot – PRESSED
Circle: Bosch Light Blue
Outline: Bosch Light Gray W25
Icon: white
Desktop
Tablet
Mobile
2.25 rem, 36px
2.25 rem, 36px
2.75 rem, 44px
2.75 rem, 44px
2.5 rem, 40px
2.5 rem, 40px
2.25 rem, 36px
2.25 rem, 36px
2 rem, 32px
2 rem, 32px
1.25 rem, 20px
1.25 rem, 20px
1 rem, 16px
1 rem, 16px
NUMBER CALL OUTS
Number Callouts are great for highlighting specific attributes of a product where interactivity may not be an option or necessary.
TITLE TEXT ALL CAPS 24px
Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular
TITLE TEXT ALL CAPS 24px
Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular
TITLE TEXT ALL CAPS 24px
Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular
TITLE TEXT ALL CAPS 24px
Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular
NUMBER CALL OUTS – NA
TITLE TEXT ALL CAPS 24px
Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular
TITLE TEXT ALL CAPS 24px
Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular
TITLE TEXT ALL CAPS 24px
Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular
TITLE TEXT ALL CAPS 24px
Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular
Desktop
Tablet
Mobile
2.25 rem, 36px
2.25 rem, 36px
2.75 rem, 44px
2.75 rem, 44px
2.5 rem, 40px
2.5 rem, 40px
2.25 rem, 36px
2.25 rem, 36px
2 rem, 32px
2 rem, 32px
1.25 rem, 20px
1.25 rem, 20px
1 rem, 16px
1 rem, 16px