Welcome to the Franklin design system

For developers

If you're developing a web site or app, start here.

Getting started

Using the Franklin design system

Installation

How to consume our CSS & JS via NPM

Component library

Styles and reusable building blocks

Grid system

How to lay out pages and screens

For non-developers

Not writing code? Start here.

Quick start guide

The basics of Malvern Panalytical's visual style

Color

The Malvern Panalytical brand color palette

Typography

Our guidelines for fonts, weights, and spacing

Tone of voice

Make your writing clearer, simpler, and more inspiring

What is Franklin?

Franklin is Malvern Panalytical's design system for web-based marketing materials.

What's a design system?

A set of brand guidelines and a library of HTML/CSS/JS components. Using this system is the quickest and easiest way to ensure your website or web-app is on brand.

The Design Systems Handbook by InVision is a great (free) way to learn more about design systems.

Are there other design systems in use?

There are two other design systems in use at Malvern Panalytical.

Sencillo (pronounced sehn-see-yoh) is a design system used in Smart Manager, Agrilytics, and other web-based customer-facing software applications.

Malvern Panalytical User Interface Guidelines (also known as the XBL) is the Design System that is used in our desktop software, including the new OmniTrust. At the time of writing, it hasn't been rolled out to all platforms but it should be the go to Design System for any new software that we create for our products. It is also backed up with a reusable framework that provides the styles and controls within a fixed layout base application.

Where does Franklin come in?

Design system	MP User Interface Guidelines (XBL)	MP Sencillo	Franklin
Target	Desktop and tablet based software for our products	Web-based apps that are part of the Smart Manager platform	Commercial websites
Goal	A common look and feel with a consistent user experience across all of our product software	Bridge the gap between our desktop software and our web sites, providing a familiar and branded experience	A common look and feel with a consistent user experience across all of our web sites
Framework technologies	.NET C# and WPF/Xaml	.NET Blazor (C#), CSS and HTML	CSS, HTML and JavaScript
Devices	Desktops and tablets	Desktops, tablets and mobiles	Desktops, tablets and mobiles
Target Content Type	Fast changing, short textual elements, data visualisations and high user interactivity	Frequently changing, short textual elements, data visualisations and medium user interactivity	Infrequently changing, blocks of copy, marketing/product photos and low user interactivity