Buttons

Button role
Button Role & Placement

Buttons feature only at the end of body text or form to signify that it is complete and the user needs to interact in order to progress further. Buttons are obvious and consistent so that the user can spot them and navigate with ease, therefore they can be positioned in two ways:

  1. 25px below body copy
  2. 25px to the right of body copy, on the baseline of the last line of text
colour & styling
Colour & Styling

Button colouring and styling can change depending upon what background colour it is sitting on. At no point will the button background be white, nor shall the button background colour match the background colour

  1. Primary on secondary
  2. White on primary
  3. Black on secondary
  4. White on black
Button states
States

Buttons need to interact with the user, so that when they hover their cursor over a button or press with a gesture, something happens and a reaction appears. This leads to satisfaction whilst navigating around the site.

  1. Normal
  2. Hover (50% opacity)
  3. Pressed (Inverse – Including Animation)
  4. Disabled (50% opacity)

Icons

primary icons
Primary Icons

Icons used primarily for navigation.

Secondary Icons

Icons used primarily for products.

colour versions
Colour Versions
  1. Icons in primary colour
  2. Icons reversed on primary colour background
minimum sizes
Minimum Sizes

The icons must always be legible so we ask that the minumum sizes shown here are adhered to.

  1. Example 1
  2. Example 2

 

placement & positioning
Placement & Positioning

At the minimum size, the icons should have a minimum of 25px margin at all times. As the screen size decreases, and therefore the icon, the margin will adapt accordingly, however, there is room for flexibility across different platforms, this should always be consulted with head office. Note that all icons will be consistent widths but will vary in heights and should therefore be centred horizontally.

external icons
External Icons & Logos

External Icons and Logos will be used on different mediums for such things as social media and acknowledging partnerships. The icons used must always be the correct and official icon with permission of use. It must adhere to it’s parent brand guidelines which should state minimum sizes and placement guides. Unless guidelines state otherwise, the external icons and logos will use the same parameters as the icons above.

Other

lists
Lists

Items that need to be listed will always take the pattern: 1, 2 (break), 3, 4 (break). The exception with this rule is if the list only features in one column, therefore the rule is 1 (break), 2 (break), 3 (break), 4 (break). There is always an indent after the number and the body text continues on the indent guide. Lists are always numbered. Do not use letters or bullet points.

Elta Group Head Office

45 Second Avenue
Pensnett Trading Estate
Kingswinford
Nr Dudley
West Midlands
DY6 7UY

+44 (0) 1384 275760 https://eltagroup.com

Contact us for more information

If you have any queries regarding the visual standards and/or wish to use Elta Group branded assets, please use the contact form below and select the marketing department.

See more Visual Standards