Welcome to the Franklin design system

Our design system helps us create consistent experiences across our websites and beyond. It also makes the design and development process faster, more efficient and scalable.

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

Latest updates

V1.1.0 - June 2023
  • Add off-canvas pattern for mobile
  • Update disabled input styles
  • Add header component variants: blog and store
  • Misc. fixes