mp-design-system 1.0.3 → 1.2.1

package/src/brand/colors.njk

@@ -9,6 +9,7 @@ status: 'In production'
 
 {% from "components/alert/macro.njk" import alert %}
 {% from "components/prose/macro.njk" import prose, markdown %}
+{% from "includes/color-swatches.njk" import swatches %}
 
 <div class="u-flow--l">
 
@@ -27,222 +28,7 @@ Step 0 is the 'default' shade for each color."
 
 </div>
 
-{% set colors = [
-    {
-        name: 'MP Petrol',
-        key: 'Petrol',
-        steps: [
-            {
-                name: "-1",
-                hex: '003039',
-                cmyk: '93.65.57.57',
-                pantone: 'PAN 547'
-            },
-            {
-                name: 0,
-                hex: '005461',
-                cmyk: '93.54.49.27',
-                pantone: 'PAN 3165'
-            },
-            {
-                name: 1,
-                hex: '3d7b87',
-                cmyk: '78.39.40.08'
-            },                
-            {
-                name: 2,
-                hex: 'bfd3d6',
-                cmyk: '24.09.13.00'
-            },
-            {
-                name: 3,
-                hex: 'ebf1f2',
-                cmyk: '06.02.03.00'
-            }
-        ]
-    },
-    {
-        name: 'MP Blue',
-        key: 'Blue',
-        steps: [
-            {
-                name: "-1",
-                hex: '00758c',
-                cmyk: '89.42.35.07'
-            },
-            {
-                name: 0,
-                hex: '00a2c2',
-                cmyk: '77.17.17.00',
-                pantone: 'PAN 312'
-            },
-            {
-                name: 1,
-                hex: '47bcd3',
-                cmyk: '64.04.15.00'
-            },                
-            {
-                name: 2,
-                hex: 'c2e9f0',
-                cmyk: '22.00.05.00'
-            },
-            {
-                name: 3,
-                hex: 'ebf8fa',
-                cmyk: '06.00.01.00'
-            }
-        ]
-    },
-    {
-        name: 'MP Green',
-        key: 'Green',
-        steps: [
-            {
-                name: "-1",
-                hex: '0e7a0e',
-                cmyk: '87.27.100.16'
-            },
-            {
-                name: 0,    
-                hex: '13aa13',
-                cmyk: '81.04.100.01',
-                pantone: 'PAN 354'
-            },
-            {
-                name: 1,
-                hex: '55c255',
-                cmyk: '66.00.89.00'
-            },                
-            {
-                name: 2,
-                hex: 'c6ebc6',
-                cmyk: '22.00.28.00'
-            },
-            {
-                name: 3,
-                hex: 'ecf8ec',
-                cmyk: '06.00.08.00'
-            }
-        ]
-    },
-    {
-        name: 'MP Rubine',
-        key: 'Red',
-        steps: [
-            {
-                name: 0,    
-                hex: 'ce0058',
-                cmyk: '14.100.50.2',
-                pantone: 'PAN Rubine Red'
-            }
-        ]
-    },
-    {
-        name: 'MP Charcoal',
-        key: 'Grey',
-        steps: [
-            
-            {
-                name: "-1",
-                hex: '1c1c1c',
-                cmyk: '00.00.00.95'
-            },
-            {
-                name: 0,    
-                hex: '333333',
-                cmyk: '00.00.00.91',
-                pantone: 'PAN 447'
-            },
-            {
-                name: 1,
-                hex: '959595',
-                cmyk: '00.00.00.70'
-            },                
-            {
-                name: 2,
-                hex: 'cecece',
-                cmyk: '00.00.00.22'
-            },
-            {
-                name: 3,
-                hex: 'efefef',
-                cmyk: '00.00.00.08'
-            }
-        ]
-    },
-    {
-        name: 'MP Utility Gold',
-        key: 'Utility-Orange',
-        steps: [
-            
-            {
-                name: "-1",
-                hex: 'AE7809',
-                cmyk: '29.51.100.10'
-            },
-            {
-                name: 0,    
-                hex: 'F2A60D',
-                cmyk: '04.38.100.00'
-            },
-            {
-                name: 1,
-                hex: 'F6BF51',
-                cmyk: '03.26.79.00'
-            },                
-            {
-                name: 2,
-                hex: 'FCEAC5',
-                cmyk: '01.07.25.00'
-            },
-            {
-                name: 3,
-                hex: 'FEF8EC',
-                cmyk: '00.02.06.00'
-            }
-        ]
-    },
-    {
-        name: 'MP Utility Blue',
-        key: 'Utility-Blue',
-        steps: [
-            {
-                name: 0,    
-                hex: '006daf',
-                cmyk: '86.48.3.5'
-            }
-        ]
-    }
-] %}
-
-<div class="u-flow--2xs">
-    {% for color in colors %}
-        <h3 class="c-h c-h--step-1">{{ color.name }}</h3>
-        <div class="c-library__swatch-grid c-library__swatch-grid--has-labels ">
-            {% for step in color.steps %}
-                {% set classname %}
-                    {{- 'c-library__swatch'}}{# Let's build a string #}
-                    {{ 'u-bg-'+color.key | slug}}{# Set the background color to color.key -#}
-                    {{ '-step-'+step.name if step.name!=0 }} {# If it's not step zero, add the -step-x suffix -#}
-                    {# Set the text color to white, or a dark color #}
-                    {{ 'u-'+color.key|slug+'-step--1' if (step.name==2) or (step.name==3) else 'u-white' -}}
-                {% endset %}
-                <div class="{{classname}}">
-                    <span>Step {{step.name}}</span>
-                </div>
-                <table class="c-table">
-                    <tbody>
-                        <tr><td>Hex</td><td>#{{step.hex | upper}}</td></tr>
-                        <tr><td>CMYK</td><td>{{step.cmyk}}</td></tr>
-                        <tr class="{{ "u-petrol-step-3" if not step.pantone }}">
-                            <td>Pantone</td><td>{{step.pantone if step.pantone}}</td>
-                        </tr>
-                    </tbody>
-                </table>
-            {% endfor %}
-        </div>
-    {% endfor%}
-</div>
+{{ swatches({ print:true }) }}
 
 {{ markdown({
     content: "# When to use color

package/src/brand/index.njk

@@ -14,7 +14,7 @@ tags: brand
 {% 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.
 
-To strengthen Malvern Panalytical’s market position, we must ensure consistent and clear communication in all we do. This guide is here to help us create this consistent message.
+
 {% endset %}
 
 <div class="u-flow--l">
@@ -23,6 +23,7 @@ To strengthen Malvern Panalytical’s market position, we must ensure consistent
   }) }}
 
   <div class="o-grid o-grid--of-three-late">
+
     {{ card({
       theme: {
         layout: 'single',
@@ -33,11 +34,11 @@ To strengthen Malvern Panalytical’s market position, we must ensure consistent
         title: 'Quick start'
       },
       body: {
-        content: '<p>The basics of our brand.</p>'
+        content: '<p>How to ensure your design meets our brand guidelines</p>'
       },
       footer: {
         cta: {
-          link: '/brand/basics',
+          link: '/quickstart',
           label: 'Read more'
         }
       }
@@ -50,14 +51,14 @@ To strengthen Malvern Panalytical’s market position, we must ensure consistent
         border: true
       },
       header: {
-        title: 'Downloads'
+        title: 'Resources'
       },
       body: {
-        content: '<p>Download our brand guidelines PDF, our logo, and more.</p>'
+        content: '<p>Download our UI design kit, logo, and more.</p>'
       },
       footer: {
         cta: {
-          link: '/brand/downloads',
+          link: '/brand/resources',
           label: 'Read more'
         }
       }

package/src/brand/requirements.md

@@ -0,0 +1,98 @@
+---
+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
+We **strongly** recommend following the two-step [quick start guide](/quickstart) to ensure your website is 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/{downloads.njk → resources.njk}

@@ -1,5 +1,5 @@
 ---
-title: Downloads
+title: Resources
 layout: content-page
 sidebar: brand
 status: 'Ready'
@@ -9,6 +9,16 @@ tags: brand
 {% from "components/card/macro.njk" import card %}
 {% from "components/twi/macro.njk" import twi %}
 
+{% set content %}
+## UI design kit
+
+Franklin is available as a UI design kit in Figma. It contains text and color styles, grids and spacing, icons, and a complete library of components.
+
+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 every [component](/components) page on this site has a link to its Figma counterpart.
+{% endset %}
+
 <div class="u-flow--l u-margin-top-xl">
 
 {{ twi({
@@ -45,4 +55,8 @@ icon: 'file'
     icon: "file"
 }) }}
 
+<hr>
+
+{{ markdown({ content: content }) }}
+
 </div>

package/src/index.njk

@@ -26,8 +26,8 @@ renderData:
     },
     footer: {
       cta: {
-        link: '/brand/basics',
-        label: 'Read the basics'
+        link: '/quickstart',
+        label: 'Read the quick start guide'
       }
     }
   }) }}
@@ -94,21 +94,24 @@ renderData:
 </div>
 
 {% set content %}
-## What is a design system?
+## What is Franklin?
 
-A combination of brand guidelines and a library of HTML/CSS/JS components.
+Franklin is Malvern Panalytical's **design system** for web-based marketing materials.
 
-As Malvern Panalytical has grown, our online experiences have become disparate and inconsistent. The goal of this design system is to address this by creating a single source of truth. It will rely on us all using and contributing to it, with the ongoing support of the Design System Team.
+## 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](https://www.designbetter.co/design-systems-handbook) by InVision is a great (free) way to learn more about design systems.
 {% endset %}
 
 {% set latest %}
 ## Latest updates
-##### V.{{ config.dsVersion }} - May 2023
+##### V1.1.0 - June 2023
 
-- Add new toggle components
-- Add new breadcrumb component
-- Add button with loading indicator
-- Update event card styles
+- Add off-canvas pattern for mobile
+- Update disabled input styles
+- Add header component variants: blog and store
 - Misc. fixes
 {% endset %}
 

package/src/quickstart.md

@@ -0,0 +1,41 @@
+---
+title: Quick start
+layout: content-page
+sidebar: brand
+status: 'Ready'
+version: 1.0.2
+tags: brand
+date: 2023-06-23
+---
+
+When you're building a public-facing website it's important to follow our brand guidelines. With Franklin we've created a  simple two-step process to help you stay on brand, accessible, and mobile friendly - no matter what technology you use under the hood.
+
+## The easy way
+
+**1:**
+Copy these two lines of code into your web page:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/mp-design-system@latest/dist/build/scss/main.css" />
+
+<script src="https://unpkg.com/mp-design-system@latest/dist/build/js/app.js"></script>
+```
+
+**2:**
+Simply use the appropriate HTML and class attributes when building your site. For example, the `c-button` class will give you a perfect, on-brand button:
+
+```html
+<a class="c-button c-button--inline" href="#">Click me</a>
+```
+
+{% button 'Click me' '/components/button' %}
+
+We have guidelines for [layout](/components/grid), [typography](/components/typography), [spacing](/components/flow), and a list of [utility classes](/components/utilities) to help you build the perfect design. And for larger page elements, we have [a library of ready-made components](/components).
+
+You can find full details on our [installation](/components/installation) page.
+
+---
+
+## The hard way
+
+If you're unable to comply with the two steps above, you'll need to style your website to match Franklin as closely as possible. Please see [Requirements](/brand/requirements) for complete details.

package/dist/build/arc.a8e07ecd.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 693 671" opacity=".075"><g clip-path="url('#a')"><path stroke="#3D7B87" d="M388.57 203.44c40.74 9.94 66.77 48.93 58.38 88.2-8.38 39.27-48.05 64.23-89.3 56.67"/><path stroke="#3D7B87" d="M402.01 140.47c2.72.35 5.43.82 8.15 1.4 56.13 11.98 91.68 68.3 79.4 125.79-12.27 57.5-67.72 94.39-123.84 82.4a98.78 98.78 0 0 1-8.01-2.04"/><path stroke="#3D7B87" d="M432.3-1.42c3.09.5 6.18 1.08 9.27 1.74 97.39 20.78 159.62 115.91 139.01 212.47-20.6 96.55-116.27 157.98-213.65 137.19a183 183 0 0 1-9.17-2.2"/><path stroke="#3D7B87" d="M359.04 347.92c50.87 14.25 81.93 69.05 69.9 125.41-9.2 43.08-41 75.04-78.8 84.26"/><path stroke="#3D7B87" d="M358.75 349.03a75.38 75.38 0 0 1-15.33 143.5m472.91-210.11c-136.88 72.26-297.27 99.23-458.69 65.9"/><path stroke="#3D7B87" d="M710.4 603.24c-92.04-125.65-211.68-216.14-352.29-256"/><path stroke="#3D7B87" d="M730.15 434.78c20.26-94.9-46.81-189.74-149.9-211.75-103.1-22-203.05 37.17-223.31 132.09-20.26 94.9 46.8 189.74 149.9 211.75 103.1 22 203.05-37.17 223.3-132.09Z"/><path stroke="#3D7B87" d="M565.63 393.51c11.4-53.42-25.74-106.7-83.05-118.93-57.32-12.24-112.98 21.23-124.38 74.65-11.41 53.43 25.74 106.7 83.05 118.94 57.31 12.23 112.98-21.23 124.38-74.66Z"/><path stroke="#3D7B87" d="M507.87 381.04c8.07-37.81-18.83-75.68-60.2-84.5-41.36-8.84-81.37 14.74-89.44 52.55-8.08 37.81 18.82 75.68 60.19 84.51 41.36 8.83 81.38-14.75 89.45-52.56Z"/><path stroke="#3D7B87" d="M668.34-16.28c-164.89 90.43-279.7 223.03-314.5 386.05-34.6 162.08 15.29 329 127.5 478.23"/><path stroke="#3D7B87" d="M482.38 560.08c20.96-98.17-37.75-193.87-131.07-213.79-93.33-19.92-186 43.46-206.95 141.63-20.96 98.18 37.75 193.87 131.07 213.8 93.33 19.92 186-43.47 206.95-141.64Z"/><circle cx="545.73" cy="65.7" r="6.7" fill="#3D7B87" transform="rotate(12.05 545.73 65.7)"/><circle cx="6.7" cy="6.7" r="6.7" fill="#3D7B87" transform="scale(1 -1) rotate(-12.05 -2911.17 -1076.64)"/><ellipse cx="4.94" cy="7.18" fill="#3D7B87" rx="4.94" ry="7.18" transform="scale(1 -1) rotate(-20.98 183.75 -1296.01)"/><ellipse cx="4.74" cy="6.4" fill="#3D7B87" rx="4.74" ry="6.4" transform="scale(1 -1) rotate(-12.05 187.9 -2125.37)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(31.69 1029.73 -24.26)"/><ellipse cx="2.8" cy="5.82" fill="#3D7B87" rx="2.8" ry="5.82" transform="scale(1 -1) rotate(31.69 867.17 203.72)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(16.08 1654.79 57.2)"/><ellipse cx="163.88" cy="128.11" fill="#3D7B87" rx="4.48" ry="9.03" transform="rotate(-120.9 163.88 128.11)"/><ellipse cx="274.03" cy="67.48" fill="#3D7B87" rx="4.48" ry="9.03" transform="rotate(-113.38 274.03 67.48)"/><ellipse cx="367.21" cy="92.23" fill="#3D7B87" rx="3.39" ry="7.31" transform="rotate(-99.19 367.2 92.23)"/><ellipse cx="3.98" cy="6.65" fill="#3D7B87" rx="3.98" ry="6.65" transform="scale(1 -1) rotate(3.39 8253.05 -219.92)"/><ellipse cx="3.48" cy="6.68" fill="#3D7B87" rx="3.48" ry="6.68" transform="scale(1 -1) rotate(24.86 1254.69 -215.22)"/><ellipse cx="3.76" cy="7.12" fill="#3D7B87" rx="3.76" ry="7.12" transform="scale(1 -1) rotate(49.8 674.95 -223)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-24.75 -733 -411.39)"/><ellipse cx="4.06" cy="7.93" fill="#3D7B87" rx="4.06" ry="7.93" transform="scale(1 -1) rotate(-38.06 -261.45 -309.48)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(2.61 7685.98 3177.5)"/><ellipse cx="3.46" cy="6.72" fill="#3D7B87" rx="3.46" ry="6.72" transform="scale(1 -1) rotate(-.91 -18651.2 -141.87)"/><ellipse cx="19.17" cy="224.95" fill="#3D7B87" rx="3.55" ry="6.9" transform="rotate(23.2 19.17 224.95)"/><ellipse cx="9.33" cy="256.03" fill="#3D7B87" rx="3.65" ry="7.09" transform="rotate(12.05 9.33 256.03)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(36.8 698.44 97.73)"/><ellipse cx="4.91" cy="9.03" fill="#3D7B87" rx="4.91" ry="9.03" transform="scale(1 -1) rotate(35.4 868.22 142.26)"/><ellipse cx="4.91" cy="7.64" fill="#3D7B87" rx="4.91" ry="7.64" transform="scale(1 -1) rotate(44.07 803.06 63.23)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-38.32 -292.24 -370.78)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-51.58 -121.02 -356.51)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-62.45 6.86 -343.71)"/><ellipse cx="5.46" cy="9.03" fill="#3D7B87" rx="5.46" ry="9.03" transform="scale(1 -1) rotate(-77.71 94.75 -297.43)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2589.61 -1403.38)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2137.24 -1615.32)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2683.45 -1973.08)"/><ellipse cx="482.54" cy="126.94" fill="#3D7B87" rx="4.79" ry="4.88" transform="rotate(12.05 482.54 126.94)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="matrix(.978 .2088 .2088 -.978 446 631.9)"/><ellipse cx="584.07" cy="149.46" fill="#3D7B87" rx="4.79" ry="4.88" transform="rotate(12.05 584.07 149.46)"/><ellipse cx="6.52" cy="6.65" fill="#3D7B87" rx="6.52" ry="6.65" transform="scale(1 -1) rotate(-12.05 -2495.49 -1899.88)"/><ellipse cx="452.09" cy="161.39" fill="#3D7B87" rx="4.78" ry="5.77" transform="rotate(-44.35 452.09 161.39)"/><ellipse cx="6.52" cy="6.65" fill="#3D7B87" rx="6.52" ry="6.65" transform="matrix(.978 .2088 .2088 -.978 335.3 496.36)"/><ellipse cx="416.1" cy="214.01" fill="#3D7B87" rx="6.52" ry="6.65" transform="rotate(12.05 416.1 214.01)"/><ellipse cx="5.02" cy="6.18" fill="#3D7B87" rx="5.02" ry="6.18" transform="scale(1 -1) rotate(-26.41 -907.55 -1119.88)"/><ellipse cx="489.75" cy="225.01" fill="#3D7B87" rx="5.02" ry="6.18" transform="rotate(-2.31 489.75 225.01)"/><ellipse cx="5.32" cy="5.42" fill="#3D7B87" rx="5.32" ry="5.42" transform="scale(1 -1) rotate(-12.05 -2090.56 -1998.83)"/><ellipse cx="439.92" cy="243.88" fill="#3D7B87" rx="5.32" ry="5.42" transform="rotate(12.05 439.92 243.88)"/><ellipse cx="2.84" cy="5.27" fill="#3D7B87" rx="2.84" ry="5.27" transform="scale(1 -1) rotate(-8.31 -2220.86 -1682.37)"/><ellipse cx="232.75" cy="289.48" fill="#3D7B87" rx="2.84" ry="5.27" transform="rotate(15.8 232.75 289.48)"/><ellipse cx="7.5" cy="11.35" fill="#3D7B87" rx="7.5" ry="11.35" transform="scale(1 -1) rotate(-12.05 -2451.83 -2523.91)"/><ellipse cx="578.22" cy="223.89" fill="#3D7B87" rx="5.02" ry="4.58" transform="rotate(12.05 578.22 223.89)"/><ellipse cx="3.54" cy="6.98" fill="#3D7B87" rx="3.54" ry="6.98" transform="scale(1 -1) rotate(-31.41 -745.42 -1273.8)"/><ellipse cx="650.64" cy="251.96" fill="#3D7B87" rx="3.54" ry="6.98" transform="rotate(-7.3 650.64 251.96)"/><ellipse cx="5.42" cy="4.43" fill="#3D7B87" rx="5.42" ry="4.43" transform="matrix(.978 .2088 .2088 -.978 473.24 473)"/><ellipse cx="532.6" cy="301.26" fill="#3D7B87" rx="5.42" ry="4.31" transform="rotate(12.05 532.6 301.26)"/><ellipse cx="6.7" cy="5.11" fill="#3D7B87" rx="6.7" ry="5.11" transform="scale(1 -1) rotate(-30.78 -529.84 -1189.83)"/><ellipse cx="565.93" cy="358.88" fill="#3D7B87" rx="6.7" ry="5.11" transform="rotate(-6.68 565.93 358.88)"/><ellipse cx="5.16" cy="4.6" fill="#3D7B87" rx="5.16" ry="4.6" transform="scale(1 -1) rotate(-47.05 -293.12 -1016.12)"/><ellipse cx="5.44" cy="3.86" fill="#3D7B87" rx="5.44" ry="3.86" transform="scale(1 -1) rotate(-43.96 -292.56 -955.94)"/><ellipse cx="622.7" cy="350.92" fill="#3D7B87" rx="5.95" ry="4.22" transform="rotate(-15.38 622.7 350.92)"/><ellipse cx="4.89" cy="4.1" fill="#3D7B87" rx="4.89" ry="4.1" transform="scale(1 -1) rotate(-88.1 -9.93 -434.95)"/><ellipse cx="445.81" cy="297.26" fill="#3D7B87" rx="4.89" ry="4.1" transform="rotate(-64 445.8 297.26)"/><ellipse cx="8.53" cy="6.01" fill="#3D7B87" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(78.34 -489.68 -34.66)"/><ellipse cx="487.64" cy="276.67" fill="#3D7B87" rx="8.53" ry="6.01" transform="rotate(-77.57 487.64 276.67)"/><ellipse cx="8.53" cy="6.01" fill="#3D7B87" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(59.21 -595.82 -237.03)"/><ellipse cx="504.69" cy="362.53" fill="#3D7B87" rx="8.53" ry="6.01" transform="rotate(-96.69 504.69 362.53)"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h693v671H0z"/></clipPath></defs></svg>

package/dist/build/concentric.05eaed9c.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="641" height="1012" opacity=".075" fill="none"><circle cx="641" cy="506" r="80" stroke="#004157"/><circle cx="641" cy="506" r="20" stroke="#004157"/><circle cx="641" cy="506" r="160" stroke="#004157"/><circle cx="641" cy="506" r="240" stroke="#004157"/><circle cx="641" cy="506" r="320" stroke="#004157"/><circle cx="641" cy="506" r="400" stroke="#004157"/><circle cx="641" cy="506" r="480" stroke="#004157"/><circle cx="641" cy="506" r="560" stroke="#004157"/><circle cx="641" cy="506" r="640" stroke="#004157"/></svg>

package/dist/build/crystal.a90c9e1f.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 523 666" opacity=".075"><g clip-path="url('#a')"><path stroke="#3D7B87" d="m74 183 62-61 81 14 20 76-62 62-81-15-20-76Zm78 304-20-77"/><path stroke="#3D7B87" d="m93 259-62 61 20 77 82 14 62-62-19-76M91 548l62-62 81 15 20 75-62 62-82-15-19-75Zm146-335 82 14 62-62-20-76-82-15-62 62m59 228 62-62 82 14 20 76-62 62-82-15-20-75Zm0 0-82-14"/><path stroke="#3D7B87" d="m296 439-63 62m145-48 20 77-62 61-83-14m127-411 82 14 62-62-19-76-83-15-62 62m79 304 82 14 63-62-20-76-82-14-63 61m43-137 20 76m-144 48-20-77"/><path stroke="#3D7B87" d="m521 406 20 77-62 61-82-14"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 205 131)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 263 359)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 268 68)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 327 295)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 306 221)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 364 449)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 324 585)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 181 631)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 60 179)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 121 405)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 125 115)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 183 343)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 39 390)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 161 269)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 19 315)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 223 494)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 80 541)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 347 84)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 407 311)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 410 22)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 470 249)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 449 175)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 508 401)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 465 539)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 493 36)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 225 205)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 284 433)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 241 571)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 98 618)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 81 253)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 141 481)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 369 158)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 428 385)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 385 523)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 511 113)"/><path stroke="#3D7B87" d="m41 177 23 4m69-66-6-21m73 572-6-22m82-576-5-21m72 572-5-22m82-576-6-21m73 572-6-22M0 314l23 4m37 222 23 4M510 36l39-37M85 649l18-17M27 420l17-17"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h523v666H0z"/></clipPath></defs></svg>

package/src/brand/basics.md

@@ -1,36 +0,0 @@
----
-title: The basics of our digital brand
-description: A simple style guide for getting started with Malvern Panalytical's Franklin design system
-layout: content-page
-sidebar: brand
-tags: brand
-version: 0.0.0
-status: 'Development'
----
-
-## Text
-- Our font is [Inter](/brand/typography).
-- Text is colored MP Charcoal (#333333).
-- 18px font size.
-- We write in American English using [sentence case](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage).
-
-## 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 (horizontal) and 1.5em (vertical).
-
-## Layout
-- Use a plain white background, with a splash of color to emphasise important elements.
-- Reduce visual clutter by using space to separate items, rather than lines or boxes. Don't be afraid of white space!
-- Text is most comfortable to read when it's between 50-75 characters wide. This translates to 30-50 em.
-
-## More details
-- [Fonts and typography](../typography)
-- [Colors](../colors)
-- [Buttons](/components/button)
-- [Tone of voice](/content)

package/src/checklist.md

@@ -1,71 +0,0 @@
----
-title: Franklin compatibility checklist
-layout: content-page
-sidebar: components
----
-
-We use a variety of digital marketing platforms, each with different styling capabilities. We created this design system to bring these platforms together under a single look and feel, but unfortunately not all of them are able to follow the guidelines to the letter.
-
-When evaluating a new platform, we should aim to ensure they are capable of following the Franklin style as closely as possible.
-
-Platforms can be categorized into three groups:
-
-1.	Full design system users
-2.	Medium users
-3.	Basic users
-
-With 1 being the most customizable and 3 the least. More customization allows closer alignment with Franklin.
-
-## Checklist
-To qualify as a **Medium** user, a platform must be able to:
-
-<div>
-    <input type="checkbox" class="c-checkbox" name="inter-font" id="inter-font" value=""   />
-    <label for="inter-font">Use the Inter font, either installed in the project or linked via Google Fonts</label>
-</div>
-<div>
-    <input type="checkbox" class="c-checkbox" name="html" id="html" value=""   />
-    <label for="html">Build bespoke HTML components following Franklin examples</label>
-</div>
-<div>
-    <input type="checkbox" class="c-checkbox" name="css" id="css" value=""   />
-    <label for="css">Write custom CSS & JS to identically replicate Franklin</label>
-</div>
-
-Additionally, they can be considered **Full** users if they can:
-
-<div>
-    <input type="checkbox" class="c-checkbox" name="cdn" id="cdn" value=""   />
-    <label for="cdn">Consume Franklin's CSS and JavaScript via CDN links</label>
-</div>
-<div>
-    <input type="checkbox" class="c-checkbox" name="interface" id="interface" value=""   />
-    <label for="interface">Style all elements of the interface</label>
-</div>
-
-If the platform can’t qualify as a Medium user, they are a **Basic** user. Typically, with Basic platforms there is no ability to write custom HTML, CSS, or JS. Visual customization is limited to e.g. changing colors and picking from predefined templates.
-
-### Example questions
-Could the platform incorporate our main header navigation by using the HTML defined at: <https://brand.malvernpanalytical.com/components/header/#component-code>?
-How about tabs, as defined at: <https://brand.malvernpanalytical.com/components/tabs/#component-code>?
-
-### Examples of each type
-Full: 
--	Malvern Panalytical website
--	Materials Talks blog
--	Careers website
-
-Medium: 
--	Bizzabo event pages
--	OneWelcome login screen
-
-Basic:
--	Salesforce customer portal
--   Bizzabo agenda pages
-
-### Notes
-More detailed instructions on consuming Franklin’s CSS and JS can be found at <https://brand.malvernpanalytical.com/components/installation>. 
-
-Example HTML for nearly every component is available at <https://brand.malvernpanalytical.com/components>.
-
-Documentation is currently a bit lacking for Medium users – e.g. there’s no simple way to supply compiled CSS for their reference, and the uncompiled Sass is likely overcomplicated for their needs. I’m happy to talk through everything they need, but we should aim to document this more thoroughly.