Digital brand requirements

Version 1.0.0 Ready

Branding, the hard way

If you're designing a website, we strongly recommend following the two-step quick start guide to ensure it's on brand.

If you're unable to follow those steps, then you must be able to meet all of the requirements on this page. Any designs produced this way must be approved by the Malvern Panalytical marketing department.


Body text

  • Our font is Inter Regular.
  • Text is colored MP Charcoal (#333333).
  • 18px font size.
  • 160% line height for paragraphs, or 120% for shorter pieces of text.
  • 1em gap between paragraphs.
  • Text is generally left-aligned - we don't often use center-aligned text.
  • Large blocks of text should be between 50-75 characters wide. This translates to 30-50 em.
  • We write in American English using sentence case.


  • Headings use Inter Bold.
  • H1 size is 54px.
  • 120% line height.
  • -0.3em letter spacing (a.k.a kerning).


  • Links are colored MP Utility Blue and underlined to help them stand out from normal text.



  • All spaces (padding, margins, etc) are multiples of 18px.
  • The standard space between elements within a group is 36px - try this first.
  • Reduce visual clutter by using space to separate items, rather than lines or boxes. Don't be afraid of white space!


  • All designs must be mobile friendly, either responsive of adaptive.
  • Mobile-first design is encouraged.


  • Use a plain white background, with a splash of color to emphasise important elements.
  • Where a coloured background is needed, use MP Petrol step 3 (#BFD3D6).
  • Use background images rarely. We prefer text on flat backgrounds for legibility.
  • Background patterns may be used but must be subtle, and science-themed.

Color and imagery

Color palette

  • For full details of our color palette see our Colors page.
  • No other colors may be used unless discussed with the Malvern Panalytical marketing team.


  • Stay away from stock photography where possible.
  • Use bold, colorful photographs with shallow depth of field.
  • Where photography is not suitable, flat isometric-style illustrations may be used.


  • Use our approved icon set.
  • Icons add visual noise; use them sparingly.
  • Don't use icons inside buttons.

Core elements


Primary button Secondary button Tertiary button

  • Primary buttons are always colored MP Green (#13AA13). Please use this color sparingly, for the most important elements on the page.
  • Secondary buttons may be colored MP Blue (#00A2C2), or outlined.
  • The font is Inter Bold, 18px.
  • 6px border-radius.
  • Padding is 0.777em (vertical) and 1.5em (horizontal).
  • Hover style: use the step -1 shade (e.g. a green button goes from MP Green 0 to MP Green -1)

Input fields

  • 13.5px padding.
  • Border: 1px MP Petrol step 3 (#BFD3D6).
  • Border color is MP Petrol (#005461) when focused.


Coming soon