Text

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

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

Links

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

---

Layout

Spacing

• 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!

Responsive

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

Background

• 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.

Images

• 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.

Icons

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

---

Core elements

Buttons

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.

---

Examples