mp-design-system 1.2.63 → 1.2.65

package/src/brand/images.md

@@ -1,101 +0,0 @@
----
-title: Images
-layout: system-page
-sidebar: brand
-tags: brand
-version: 1.0.0
-status: 'Ready'
----
-
-<div class="mp o-prose u-flow--prose">
-<div class="u-wrap--content">
-
-The images we use can have a great effect on how people perceive our company. Just as we have [tone of voice](/content/) guidelines to help keep our writing clear and effective, our **tone of visuals** guidelines will help you choose images that best represent Malvern Panalytical.
-
-</div>
-<div class="o-grid o-grid--of-two">
-<div>
-
-## MP imaging matrix
-
-- Uniform content strategy across all channels and segments
-- Make sure to use the content type that matches your audience.
-- When the content type needs to cover a broad audience, make sure to cover all content types and rotate them occasionally
-
-## Visual style
-
-- Dramatic lighting - strong color contrast 
-  - retain highlight and shadow detail
-- Striking composition to attract attention
-- Shallow depth of field for emphasis on specific small item - with influence on big change elsewhere
-- Foreground and background blur
-- High-key or Low-key lighting: 
-  - ensure focal point
-- Model may look directly to camera in some shots
-
-</div>
-
-![A diagram of our imaging matrix, showing each area of image use in our marketing materials and what mood or purpose images should aim for.](/static/svg/imaging-matrix.svg)
-
-</div>
-
-<div class="c-library__photo-grid grid-1">
-<div class="u-bg-petrol u-white"><h2>Captivate</h2></div>
-<img src="/static/img/grid-captivate-1.jpg" alt="A silhouette of a woman's face, overlaid with plotted lines and charts of data" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/f4c97a0a-bb44-417d-a935-adea010bdf70/shutterstock_600381020_Low-res.JPG" alt="Looking up through tree branches at the Milky Way, filling the night sky" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/519c5d77-203b-433f-a8d6-adf600fd4f42/shutterstock_1729372963_Low-res.JPG" alt="A glowing Malvern Panalytical logo floats amongst trees in a misty forest " loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/d3e8fca9-b331-4798-ac4e-adea010d1c42/shutterstock_455077471_Low-res.JPG" alt="A network of brass pins embedded in a wooden surface, connected with fine wire" loading="lazy">
-</div>
-
-<div class="c-library__photo-grid grid-1">
-<div class="u-bg-red u-white"><h2>Inspire</h2></div>
-<img src="https://p3.aprimocdn.net/malvernpanalytical/981276ff-0ab9-4be9-aedd-adea010bf005/shutterstock_145005193_Low-res.JPG" alt="A scientist wearing protective gear leans in, using a pipette to fill a cuvette" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/372bcddb-261b-4272-a3fd-adea010c01ad/shutterstock_1408636658_Low-res.JPG" alt="An extreme close-up of tiny underwater plants, glowing in sunlight" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/d80bfeb7-1b0c-40cf-97e8-adea010bea98/shutterstock_174607778_Low-res.JPG" alt="An industrial pipeline silhouetted against the dawn sky" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/7f424ea8-8443-444a-8c91-adea010bee72/shutterstock_712297567_Low-res.JPG" alt="A CNC machine cuts into a piece of metal, sending sparks flying" loading="lazy">
-</div>
-
-<div class="c-library__photo-grid grid-2">
-<div class="u-bg-blue u-white"><h2>Inform - Applications</h2></div>
-<img src="https://p3.aprimocdn.net/malvernpanalytical/971f54df-cdb3-43d8-ac63-adea010af455/shutterstock_1515878372_Low-res.JPG" alt="Three engineers in a workshop building a robotic device" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/1f20be8d-61fc-465b-b67d-adea010a3cad/shutterstock_717797560_Low-res.JPG" alt="A deep sea oil rig lit up against the evening sky" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/86aad13f-9f20-4a18-8a2e-adea010ae3d9/shutterstock_111870260_Low-res.JPG" alt="An aerial view of a water treatment plant in the sunshine" loading="lazy">
-</div>
-
-<div class="c-library__photo-grid grid-2">
-<div class="u-bg-blue u-white"><h2>Inform - Technology</h2></div>
-<img src="https://p3.aprimocdn.net/malvernpanalytical/b7f2beab-a7e1-48f7-83e1-adea010ca426/shutterstock_1921649444_Low-res.JPG" alt="An engineer in a data center typing on a laptop, surrounded by server racks" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/523373f2-3a26-45b4-9b1b-adea010caab1/shutterstock_1073659409_Low-res.JPG" alt="A scientist wearing protective gear looks into a microscope" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/5b80c088-2b69-4bb9-a705-adea010d0fb1/shutterstock_1770220811_Low-res.JPG" alt="A network of glass spheres, some lit from within, connected by metal rods, suspended in darkness" loading="lazy">
-</div>
-
-<div class="c-library__photo-grid grid-1">
-<div class="u-bg-green u-white"><h2>Convince</h2></div>
-<img src="https://p3.aprimocdn.net/malvernpanalytical/fb25d412-a13c-47fa-8740-adea010b4722/shutterstock_1522368992_Low-res.JPG" alt="A birds-eye view of people raising their glasses around a dinner table" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/87714d0a-16c8-43f5-a7e0-adea01143f6a/shutterstock_326505566_Low-res.JPG" alt="A barista pours steamed milk into a latte, creating a heart pattern" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/2d6b4793-692f-4ff8-ab51-adea010c6f71/shutterstock_128581706_Low-res.JPG" alt="Plants with green leaves growing out of glass containers in a laboratory" loading="lazy">
-<img src="https://p3.aprimocdn.net/malvernpanalytical/fe398dc5-a0db-4801-a680-adea010c65e1/shutterstock_1898110876_Low-res.JPG" alt="An aerial view of farmland, with buildings connected by CGI arcs of light in the air" loading="lazy">
-</div>
-
-<div class="u-wrap--content u-margin-top-xl">
-
-## Products
-
-Of course, we still make products too. Product photography is also shot separately, with natural color, isolated on a white background for catalogue use.
-
-</div>
-
-<div class="c-library__image-row">
-  <img src="/static/img/aeris.jpg" alt="An Aeris from Malvern Panalytical" loading="lazy">
-  <img src="/static/img/omnisec.jpg" alt="An Omnisec from Malvern Panalytical" loading="lazy">
-  <img src="/static/img/zetasizer.jpg" alt="A Zetasizer Advance from Malvern Panalytical" loading="lazy">
-  <img src="/static/img/microcal.jpg" alt="A Microcal from Malvern Panalytical" loading="lazy">
-  <img src="/static/img/mastersizer.jpg" alt="A Mastersizer 3000 from Malvern Panalytical" loading="lazy">
-  <img src="/static/img/empyrean.jpg" alt="An Empyrean from Malvern Panalytical" loading="lazy">
-  <img src="/static/img/qualityspec.jpg" alt="A Qualityspec from Malvern Panalytical" loading="lazy">
-  <img src="/static/img/epsilon.jpg" alt="An Epsilon from Malvern Panalytical" loading="lazy">
-  <img src="/static/img/leneo.jpg" alt="A Claisse LeNeo from Malvern Panalytical" loading="lazy">
-  <img src="/static/img/morphologi.jpg" alt="A Morphologi 4 from Malvern Panalytical" loading="lazy">
-</div>
-
-</div>

package/src/brand/index.njk

@@ -1,147 +0,0 @@
----
-title: Brand & visual identity
-description: Getting started with Malvern Panalytical's brand guidelines; colors, fonts, logos, and more.
-layout: system-page
-sidebar: brand
-status: 'Development'
-version: 0.0.1
-tags: brand
----
-{% from "components/prose/macro.njk" import markdown %}
-{% from "components/card/macro.njk" import card %}
-{% from "components/twi/macro.njk" import twi %}
-
-{% set content %}
-A brand is defined by what a company does, not just what it says or shows. It means keeping our promises to our stakeholders, proving to them that Malvern Panalytical will always do its best to deliver what they need, when they need it. Successful brands never take their stakeholders for granted.
-
-
-{% endset %}
-
-<div class="u-flow--l">
-  {{ markdown({
-    content: content
-  }) }}
-
-  <div class="o-grid o-grid--of-three-late">
-
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        border: true
-      },
-      header: {
-        title: 'Quick start'
-      },
-      body: {
-        content: '<p>How to ensure your design meets our brand guidelines</p>'
-      },
-      footer: {
-        cta: {
-          link: '/quickstart',
-          label: 'Read more'
-        }
-      }
-    }) }}
-    
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        border: true
-      },
-      header: {
-        title: 'Resources'
-      },
-      body: {
-        content: '<p>Download our UI design kit, logo, and more.</p>'
-      },
-      footer: {
-        cta: {
-          link: '/brand/resources',
-          label: 'Read more'
-        }
-      }
-    }) }}
-
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        border: true
-      },
-      header: {
-        title: 'Logo'
-      },
-      body: {
-        content: '<p>How to make sure our logo looks its best in your designs.</p>'
-      },
-      footer: {
-        cta: {
-          link: '/brand/logo',
-          label: 'Read more'
-        }
-      }
-    }) }}
-
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        border: true
-      },
-      header: {
-        title: 'Colors'
-      },
-      body: {
-        content: '<p>Our complete color palette for digital and physical media.</p>'
-      },
-      footer: {
-        cta: {
-          link: '/brand/colors',
-          label: 'Read more'
-        }
-      }
-    }) }}
-
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        border: true
-      },
-      header: {
-        title: 'Typography'
-      },
-      body: {
-        content: '<p>Information on font sizes, spacing, and colors.</p>'
-      },
-      footer: {
-        cta: {
-          link: '/brand/typography',
-          label: 'Read more'
-        }
-      }
-    }) }}
-
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        border: true
-      },
-      header: {
-        title: 'Images'
-      },
-      body: {
-        content: '<p>Guidelines on choosing images that represent our brand.</p>'
-      },
-      footer: {
-        cta: {
-          link: '/brand/images',
-          label: 'Read more'
-        }
-      }
-    }) }}
-  </div>
-</div>

package/src/brand/logo.md

@@ -1,107 +0,0 @@
----
-title: The logo
-layout: content-page
-sidebar: brand
-tags: brand
-version: 1.0.0
-status: 'Ready'
----
-<br>
-
-{% button 'Download the logo' '/static/zip/MP_logo.zip' %}
-
---- 
-
-## Basic use
-
-The Malvern Panalytical logo is available in three formats: 
-
-- Standard, with the text alongside the 'X' brandmark;
-- Stacked, with the X and the text centered;
-- Simple, for use at small sizes (when the fine details of the regular logo become obscured).
-
-<div class="o-grid o-grid--of-three">
-    <figure style="width:320px">
-        <figcaption>Standard</figcaption>
-        <img src="/static/svg/logo.svg" alt="Malvern Panalytical logo, horizontal format" class="u-margin-top-m">
-    </figure>
-    <figure style="width:200px">
-        <figcaption>Stacked</figcaption>
-        <img src="/static/svg/logo-stacked.svg" alt="Malvern Panalytical logo, stacked format">
-    </figure>
-    <figure style="width:100px">
-        <figcaption>Simple</figcaption>
-        <img src="/static/svg/logo-simple.svg" alt="Malvern Panalytical logo, stacked format" class="u-margin-top-s">
-    </figure>
-</div>
-
----
-
-## Spacing
-Where it is used in close proximity to other design elements the logo must be separated from them by, at least, multiples of the height of the uppercase M in the word Malvern:
-
-- Standard logo: 1× M-height on all sides
-- Stacked logo: 2× M-height underneath, and 1× M-height on left, right, and top sides
-
-<div class="o-grid o-grid--of-two">
-    <figure style="width:320px">
-        <figcaption>Standard logo spacing</figcaption>
-        <img src="/static/svg/logo-spacing-horizontal.svg" alt="Malvern Panalytical logo, black variant">
-    </figure>
-    <figure style="width:320px">
-        <figcaption>Stacked logo spacing</figcaption>
-        <img src="/static/svg/logo-spacing-vertical.svg" alt="Malvern Panalytical logo, white variant" style="width:200px">
-    </figure>
-</div>
-
----
-
-## Colors
-The logo may be used in a single color black or white to achieve maximum contrast and legibility.
-
-<div class="o-grid o-grid--of-two">
-    <figure  style="max-width:320px">
-        <figcaption>Single color black</figcaption>
-        <img src="/static/svg/logo-black.svg" alt="Malvern Panalytical logo, black variant">
-    </figure>
-    <figure style="max-width:320px">
-        <figcaption>Single color white, e.g. on a coloured background</figcaption>
-        <img src="/static/svg/logo-white.svg" alt="Malvern Panalytical logo, white variant" style="max-width:200px">
-    </figure>
-</div>
-
-The logo may also be used on dark backgrounds with the wordmark and strapline in white to achieve maximum contrast and legibility.
-
-<figure style="max-width:640px">
-    <figcaption>Colour logo on dark background</figcaption>
-    <img src="/static/svg/logo-color-white-text.svg" alt="Malvern Panalytical logo with white text on a dark background">
-</figure>
-
----
-
-## Strapline
-The strapline "a Spectris company" is part of the logo and must be included. It may only be removed if it's not readable: e.g. on a digital screen if the logo is so small that there are not enough pixels to resolve the text, or in a print application if the substrate is too textured to allow a clear print.
-
----
-
-## Cropping
-<figure style="max-width:640px">
-    <img src="/static/svg/crop-diagram-1.svg" alt="Cropping the brandmark: 'X' brandmark is cropped 7% top and bottom when used in a color bar">
-</figure>
-
-For cropped vertical shapes the brandmark is always cropped from the lowest vertex of the Petrol stripes - marked with a dotted line in the diagram below.
-
-The mark may be cropped progressively from the opposite outer edge.
-
-Ensure that the three colors of the brandmark are visible at all times.
-
-<figure style="max-width:640px">
-    <img src="/static/svg/crop-diagram-2.svg" alt="Cropping the brandmark: shows maximum and minimum horizontal crop sizes">
-</figure>
-
-{% alert 'warning' %}
-- **Do not** alter the proportion of the Malvern Panalytical logo in any way.
-- **Do not** attempt to recreate the Malvern Panalytical logo.
-- **Ask** Marketing for a copy, suited to your requirements.
-- The arms of the 'X' brandmark must be at 90&deg; to each other. You can use the corner of a sheet of paper, diagonally against the top of the 'X' mark, to check if the logo is in proportion.
-{% endalert %}

package/src/brand/patterns.njk

@@ -1,49 +0,0 @@
----
-title: Patterns
-layout: content-page
-sidebar: brand
-tags: brand
-version: 1.1.0
-status: 'Ready'
----
-{% from "components/header/macro.njk" import header %}
-{% from "components/button/macro.njk" import button %}
-
-<p>We can make our digital designs a bit more visually appealing by adding background patterns and decorative gradients.</p>
-<p>The patterns designs are available to download in SVG format here:</p>
-
-{% button 'Download SVG patterns', '/static/zip/SVG_patterns.zip' %}
-
-<h2>Examples</h2>
-
-<div class="o-grid xo-grid--of-two">
-    <div class="c-slat c-slat--concentric vh50 u-bg-blue-step-3">
-        <div class="o-prose u-flow--prose u-pad-x-s">
-            <p>This section has the <strong>concentric rings</strong> background pattern.</p>
-            <p>See the <a href="/components/slat-concentric">Slat</a> component for more details.</p>
-        </div>
-    </div>
-    <div class="c-slat c-slat--dots vh50 u-bg-green-step-3">
-        <div class="o-prose u-pad-x-s">
-            <p>This section has the <strong>dots</strong> background pattern.</p>
-        </div>
-    </div>
-    <div class="c-slat c-slat--crystal vh50 u-bg-utility-blue-step-3">
-        <div class="o-prose u-pad-x-s">
-            <p>This section has the <strong>crystal</strong> background pattern.</p>
-        </div>
-    </div>
-    <div class="c-slat c-slat--arc vh50 u-bg-petrol-step-3">
-        <div class="o-prose u-pad-x-s">
-            <p>This section has the <strong>arc</strong> background pattern.</p>
-        </div>
-    </div>
-</div>
-
-<style>
-    .vh50 {
-        height: 20em;
-        height: clamp(10em, 50vh, 30em);
-    }
-</style>
-    

package/src/brand/requirements.md

@@ -1,98 +0,0 @@
----
-title: Digital brand requirements
-layout: content-page
-sidebar: brand
-status: 'Ready'
-version: 1.0.0
-tags: brand
-date: 2023-06-23
----
-
-{% alert 'warning' %}
-#### Branding, the hard way
-If you're designing a website, we **strongly** recommend following the two-step [quick start guide](/quickstart) 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.
-{% endalert %}
-
-# Text
-#### Body text
-- Our font is [Inter Regular](/brand/typography).
-- 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](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage).
-
-#### 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](/brand/colors) 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](/brand/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](/brand/illustration) may be used.
-
-#### Icons
-- Use our approved [icon set](/components/iconography).
-- Icons add visual noise; use them sparingly.
-- Don't use icons inside buttons.
-
----
-
-# Core elements
-#### Buttons
-{% button 'Primary button' '#' %}
-{% button 'Secondary button' '#' 'c-button--blue' %}
-{% button 'Tertiary button' '#' 'c-button--outline-green' %}
-- 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
-
-{% alert 'info' %}
-Coming soon
-{% endalert %}

package/src/brand/resources.njk

@@ -1,75 +0,0 @@
----
-title: Resources
-layout: content-page
-sidebar: brand
-status: 'Ready'
-tags: brand
----
-
-{% from "components/prose/macro.njk" import markdown %}
-{% from "components/card/macro.njk" import card %}
-{% from "components/twi/macro.njk" import twi %}
-
-<div class="u-flow--l u-margin-top-xl">
-
-<div class="o-grid o-grid--of-two">
-
-{{ twi({
-    link: "/static/zip/MP_logo.zip",
-    label: "Malvern Panalytical logo",
-    classes: "u-link u-border u-pad-s",
-    icon: "file"
-}) }}
-
-{{ twi({
-    link: "/static/pdf/PN12558_Physical_branding_v23.pdf",
-    label: "Brand guidelines quick-start guide",
-    classes: "u-link u-border u-pad-s",
-    icon: "file"
-}) }}
-
-{{ twi({
-    link: "/static/adobe/MP%20Franklin%20colour%20swatches.ai",
-    label: "Adobe colour swatches",
-    classes: "u-link u-border u-pad-s",
-    icon: "file"
-})}}
-
-{{ twi({
-    link: "https://malvern.sharepoint.com/:b:/r/sites/Intranet/Shared%20Documents/FINAL%20Tone%20of%20voice%20guidelines%20April%202021.pdf?csf=1&web=1&e=vW1Qzs",
-    label: "Tone of voice guidelines",
-    classes: "u-link u-border u-pad-s",
-    icon: "file"
-}) }}
-
-{{ twi({
-    link: "https://malvern.sharepoint.com/:p:/r/sites/SVP/Shared%20Documents/Elevator%20Pitch%20(different%20languages)/Elevator%20pitch%20PPT%20(internal-external).pptx?d=w5ae5e5afa8c042f9968f95878a910471&csf=1&web=1&e=ui0qAk",
-    label: "Elevator pitch - Powerpoint presentation",
-    classes: "u-link u-border u-pad-s",
-    icon: "file"
-}) }}
-
-{{ twi({
-    link: "/static/pdf/Power of One - Malvern Panalytical rebranding guidance.pdf",
-    label: "Channel Partner & Field Marketing guide - Product rebranding and naming conventions",
-    classes: "u-link u-border u-pad-s",
-    icon: "file"
-}) }}
-
-</div>
-
-<hr>
-
-{% set content %}
-## Figma
-
-Franklin is available as a UI design kit in Figma. It contains a detailed component library, as well as text and color styles, grids, spacing, and icons.
-
-Visit our profile at [figma.com/@malpan](https://www.figma.com/@malpan) and duplicate the project to add it to your account. You can then use Franklin in your own designs.
-
-The Figma project is updated regularly to keep it in line with the CSS/JS/HTML version of Franklin. Also most [component](/components) pages on this site have a link to their Figma counterpart.
-{% endset %}
-
-{{ markdown({ content: content }) }}
-
-</div>

package/src/brand/typography.md

@@ -1,101 +0,0 @@
----
-title: Typography
-layout: content-page
-sidebar: brand
-tags: brand
-version: 1.0.2
-status: 'Ready'
----
-
-## Inter
-
-Our brand font is **Inter**. This typeface has been selected for its;
-- Excellent clarity and legibility
-- Extensive character set
-- Comprehensive weight and style options
-- Understated authority
-
-**We use Inter version 3**. Inter recently received a new v4 update, which changes the spacing and overall look of the font. To maintain consistent branding for Malvern Panalytical materials, we recommend avoiding any version later than v3.19.
-
-{% button 'Download Inter font (v3.19)' 'https://github.com/rsms/inter/releases/download/v3.19/Inter-3.19.zip' %}
-
-Inter is also available from [Google Fonts](https://fonts.google.com/specimen/Inter).
-
-## Calibri
-
-We use Calibri for office documents (e.g. Powerpoint, Word). Calibri is available on all Windows computers by default.
-
-## Noto
-
-For languages which don't use the Latin alphabet (such as Arabic or Chinese languages), we use the [Noto](https://fonts.google.com/noto) font family, which aims to cover the majority of the world's written scripts. N.B. Inter and Calibri both include Greek and Cyrillic characters.
-
----
-
-## Body text
-
-ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789  
-abcdefghijklmnopqrstuvwxyz @ $ € £ ¥ & © ® ™ μ ± °
-
-- Inter Light for printed materials
-- Inter Regular for web/software
-- Calibri for office (e.g. Powerpoint)
-- Color: 100% black for printed materials, [MP21Charcoal](/brand/visual/colors) for digital
-- <span class="c-library__semi">Inter Semi Bold</span> for emphasis
-- Recommended font sizes for body text:
-  - Minimum: 7pt with 9.5pt leading
-  - Standard: 8pt with 11pt leading
-  - Maximum: 9pt with 12pt leading
-
-<div class="u-bg-petrol u-white u-pad-m">
-    Inter Regular<br>
-    White text on dark: use Inter Regular with <strong>Bold</strong> for emphasis
-</div>
-
----
-
-# Heading 1  
-
-## Heading 2  
-
-### Heading 3  
-
-#### Heading 4  
-
-- Use Inter Bold for H1 and H2 headings
-- Use Inter Semi Bold for H3 and H4 headings
-- H1, H2 and H3 typically in [MP21Charcoal](/brand/visual/colors)
-- When text is on a coloured background, it is either black or white
-- H3 is 100% black when below 11pt
-- H4 is typically Inter Semi Bold, 100% black
-
---- 
-
-## Spacing
-
-- Leading should be approx 35% more than cap height, so at 9 pt the leading will be approx 12 pt.
-- The size ratio between H1 and H2 should be approx 3:2, so for example: if the cap height of H1 is 20 pt, then H2 should be approx 14 pt.
-- H2 to H3, and H3 to H4 can be approximately 4:3 ratio, e.g. about three quarters of the size.
-- H4 will be approximately the same size as bodytext, but in bold weight.
-- The size of the Headings define the space around them: If the cap height is x, then the space underneath should be x as well. The height over the heading is 2x.
-
-![A diagram showing the spacing between headings and paragraph text, as explained above.](/static/svg/typography-spacing.svg)
-
----
-
-## We're BIG on small™
-
-- Use Inter Semi Bold.
-- Typically in [MP21Charcoal](/brand/visual/colors), or white when on a dark background.
-- Only capitalize the W, B, I and G.
-- Trademark ™ is required in the first use of the BoS phrase, per document; it may be removed from subsequent uses.
-
----
-
-## URLs and email addresses
-
-<span class="u-green c-library__semi">www.malvernpanalytical.com</span>  
-<span class="u-green c-library__semi">Fred.bloggs@malvernpanalytical.com</span>
-
-All instances of URLs and email addresses must be rendered in Inter Semi Bold, color MP21Green.
-
-Color: MP21Green is considered a "call to action" (CTA) color and should only be used to draw attention to actionable information.