mp-design-system 0.7.5 → 0.8.4

package/src/brand/{visual/colors.njk → colors.njk}

@@ -13,7 +13,9 @@ status: 'In production'
 <div class="u-flow--l">
 
 {{ markdown({
-    content: "Our color palette is built around our primary color, MP Petrol. We’ve included just enough tints and shades to provide useful options for designers."
+    content: "Our color palette is built around our primary color, MP Petrol. We’ve included just enough tints and shades to provide useful options for designers. 
+    
+Step 0 is the 'default' shade for each color."
 }) }}
 
 <div class="u-wrap--content">
@@ -27,7 +29,7 @@ status: 'In production'
 
 {% set colors = [
     {
-        name: 'MP21Petrol',
+        name: 'MP Petrol',
         key: 'Petrol',
         steps: [
             {
@@ -58,7 +60,7 @@ status: 'In production'
         ]
     },
     {
-        name: 'MP21Blue',
+        name: 'MP Blue',
         key: 'Blue',
         steps: [
             {
@@ -89,7 +91,7 @@ status: 'In production'
         ]
     },
     {
-        name: 'MP21Green',
+        name: 'MP Green',
         key: 'Green',
         steps: [
             {
@@ -120,77 +122,88 @@ status: 'In production'
         ]
     },
     {
-        name: 'MP21Rubine',
+        name: 'MP Rubine',
         key: 'Red',
         steps: [
             {
                 name: 0,    
                 hex: 'ce0058',
-                cmyk: '14/100/50/2'
+                cmyk: '14.100.50.2'
             }
         ]
     },
     {
-        name: 'MP21UtilGold',
-        key: 'Utility-Orange',
+        name: 'MP Charcoal',
+        key: 'Grey',
         steps: [
             
             {
                 name: "-1",
-                hex: 'AE7809',
-                cmyk: '29.51.100.10'
+                hex: '252525',
+                cmyk: '00.00.00.95'
             },
             {
                 name: 0,    
-                hex: 'F2A60D',
-                cmyk: '04.38.100.00'
+                hex: '333333',
+                cmyk: '00.00.00.91'
             },
             {
                 name: 1,
-                hex: 'F6BF51',
-                cmyk: '03.26.79.00'
+                hex: '6c6c6c',
+                cmyk: '00.00.00.70'
             },                
             {
                 name: 2,
-                hex: 'FCEAC5',
-                cmyk: '01.07.25.00'
+                hex: 'cecece',
+                cmyk: '00.00.00.22'
             },
             {
                 name: 3,
-                hex: 'FEF8EC',
-                cmyk: '00.02.06.00'
+                hex: 'efefef',
+                cmyk: '00.00.00.08'
             }
         ]
     },
     {
-        name: 'MP21Charcoal',
-        key: 'Grey',
+        name: 'MP Utility Gold',
+        key: 'Utility-Orange',
         steps: [
             
             {
                 name: "-1",
-                hex: '252525',
-                cmyk: '00.00.00.95'
+                hex: 'AE7809',
+                cmyk: '29.51.100.10'
             },
             {
                 name: 0,    
-                hex: '333333',
-                cmyk: '00.00.00.91'
+                hex: 'F2A60D',
+                cmyk: '04.38.100.00'
             },
             {
                 name: 1,
-                hex: '6c6c6c',
-                cmyk: '00.00.00.70'
+                hex: 'F6BF51',
+                cmyk: '03.26.79.00'
             },                
             {
                 name: 2,
-                hex: 'cecece',
-                cmyk: '00.00.00.22'
+                hex: 'FCEAC5',
+                cmyk: '01.07.25.00'
             },
             {
                 name: 3,
-                hex: 'efefef',
-                cmyk: '00.00.00.08'
+                hex: 'FEF8EC',
+                cmyk: '00.02.06.00'
+            }
+        ]
+    },
+    {
+        name: 'MP Utility Blue',
+        key: 'Utility-Blue',
+        steps: [
+            {
+                name: 0,    
+                hex: '006daf',
+                cmyk: '86.48.3.5'
             }
         ]
     }
@@ -225,22 +238,27 @@ status: 'In production'
 {{ markdown({
     content: "# When to use color
     
-The color palette works best when it's used in a balanced way; too much of a strong color can make a design feel crowded or busy. Instead, try to keep your designs to mainly white backgrounds, with Grey text, and splashes of color to highlight important elements.
+The color palette works best when it's used in a balanced way; too much of a strong color can make a design feel crowded or busy. Instead, try to keep your designs to mainly white backgrounds, with Charcoal text, and splashes of color to highlight important elements.
 
-**Petrol** is our primary color - it represents Malvern Panalytical's spirit and personality. Along with **Blue** it is the color you will use most often in your designs.
+**Petrol** is our primary color - it represents Malvern Panalytical's spirit and personality. Petrol, together with **Blue**, are the colors you will use most often in your designs.
 
 **Green** is reserved for _calls to action_ - the single most important action that we want a reader or viewer to take next. On a web page for example, this would be the \"buy now\" button.
 
 **Rubine** is reserved for important notices or warnings. It's such an eye-catching color that it must be used sparingly.
 
+**Charcoal** is mainly used for text, but can also be used for other elements.
+
 **Utility Gold** is intended for notices which are less urgent than Rubine. It can also be used sparingly as an accent color, to contrast against Petrol and Blue.
 
-**Grey** is widely used for text in all designs.
+For interactive designs we also have **Utility Blue**, which is used for hyperlinks. Note: Utility Blue is not generally intended for printed materials.
 
 ## Tints and shades
 Each color is provided in _steps_. Step 0 is the \"default\" for each color. If you need a colored background, consider using step 2 or 3, as step 0 or 1 will often be too overpowering.
 
-Using Petrol step 3 as a background color (instead of grey) can be a nice way to introduce a bit of our personality into a design."
+Using Petrol step 3 as a background color (instead of grey) can be a nice way to introduce a bit of our personality into a design.
+
+## Why so many blues?
+Petrol and Blue are part of our brand, but neither is suitable for hyperlinks in web or software environments: Blue doesn't provide enough contrast for legibility, and we didn't want to overuse Petrol. We added Utility Blue to fill this gap."
 }) }}
 
 {{ alert({

package/src/brand/downloads.njk

@@ -2,22 +2,22 @@
 title: Downloads
 layout: content-page
 sidebar: brand
-status: 'Development'
-version: 0.0.1
+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">
+<div class="u-flow--l u-margin-top-xl">
 
 {{ twi({
-    link: "/static/pdf/FINAL Tone of voice guidelines April 2021.pdf",
-    label: "Tone of voice guidelines",
+    link: "/static/zip/MP_logo.zip",
+    label: "Malvern Panalytical logo",
     classes: "u-link",
     icon: "file"
 }) }}
+
 <br>
 
 {{ twi({
@@ -26,10 +26,20 @@ label: 'Brand guidelines quick-start guide',
 classes: 'u-link',
 icon: 'file'
 }) }}
+
+<br>
+
+{{ 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",
+    icon: "file"
+}) }}
+
 <br>
 
 {{ twi({
-    link: "/static/ppt/MP Elevator pitch.pptx",
+    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",
     icon: "file"

package/src/brand/images.md

@@ -0,0 +1,101 @@
+---
+title: Images
+layout: system-page
+sidebar: brand
+tags: brand
+version: 1.0.0
+status: 'In production'
+---
+
+<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

@@ -21,15 +21,6 @@ To strengthen Malvern Panalytical’s market position, we must ensure consistent
     content: content
   }) }}
 
-  <br>
-
-  {{ twi({
-    link: '/static/pdf/PN12558_Physical_branding_v23.pdf',
-    label: 'Physical brand quick-start guide',
-    classes: 'u-link',
-    icon: 'file'
-  }) }}
-
   <div class="o-grid o-grid--of-three-late">
     {{ card({
       theme: {
@@ -38,14 +29,14 @@ To strengthen Malvern Panalytical’s market position, we must ensure consistent
         border: true
       },
       header: {
-        title: 'Brand identity'
+        title: 'Visual identity'
       },
       body: {
-        content: '<p>A brand is defined by what a company does, not just what it says or shows.</p>'
+        content: '<p>The visual marks and styles that encapsulate our brand such as logo, colour and typography.</p>'
       },
       footer: {
         cta: {
-          link: '/brand/identity',
+          link: '/brand/logo',
           label: 'Read more'
         }
       }
@@ -58,14 +49,14 @@ To strengthen Malvern Panalytical’s market position, we must ensure consistent
         border: true
       },
       header: {
-        title: 'Visual identity'
+        title: 'Downloads'
       },
       body: {
-        content: '<p>The visual marks and styles that encapsulate our brand such as logo, colour and typography.</p>'
+        content: '<p>Download our brand guidelines PDF, our logo, and more.</p>'
       },
       footer: {
         cta: {
-          link: '/brand/visual/logo',
+          link: '/brand/downloads',
           label: 'Read more'
         }
       }

package/src/brand/{visual/logo.md → logo.md}

@@ -7,20 +7,27 @@ version: 1.0.0
 status: 'Ready'
 ---
 
-The Malvern Panalytical logo is available in two formats: 
+<a href="/static/zip/MP_logo.zip" class="mp c-twi u-link c-twi--left"><span>Download: Malvern Panalytical logo</span><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--file"><use xlink:href="/static/svg/sprite.svg#file"></use></svg></a>
+
+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.
+- 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-two">
+<div class="o-grid o-grid--of-three">
     <figure style="width:320px">
-        <figcaption>Standard side-by-side format</figcaption>
-        <img src="/static/svg/logo.svg" alt="Malvern Panalytical logo, horizontal format">
+        <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 format</figcaption>
+        <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

package/src/brand/{visual/typography.md → typography.md}

@@ -15,9 +15,14 @@ Our brand font is [Inter](https://rsms.me/inter). This typeface has been selecte
 - Comprehensive weight and style options
 - Understated authority
 
+Find more information about Inter at [https://rsms.me/inter](https://rsms.me/inter)
+
 <a class="mp c-button c-button--inline" href="https://github.com/rsms/inter/releases/download/v3.19/Inter-3.19.zip" download>Download Inter font</a>
 
-Find more information about Inter at [https://rsms.me/inter](https://rsms.me/inter)
+<br>
+
+#### Google Fonts
+[Inter is also available from Google Fonts](https://fonts.google.com/specimen/Inter).
 
 ---
 

package/src/checklist.md

@@ -0,0 +1,70 @@
+---
+title: Franklin compatibility checklist
+layout: content-page
+sidebar: components
+---
+
+We use a variety of digital marketing platforms, each with different styling abilities. 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 styles 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 events pages
+-	OneWelcome login screen
+
+Basic:
+-	Salesforce customer portal
+
+### 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.

package/src/components/colour.njk

@@ -25,7 +25,7 @@ A limited set of color tints and shades are available for element backgrounds, b
 
   {% set colors = [
     {
-        name: 'MP21Petrol',
+        name: 'MP Petrol',
         key: 'Petrol',
         steps: [
             {
@@ -61,7 +61,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21Blue',
+        name: 'MP Blue',
         key: 'Blue',
         steps: [
             {
@@ -97,7 +97,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21Green',
+        name: 'MP Green',
         key: 'Green',
         steps: [
             {
@@ -133,7 +133,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21Rubine',
+        name: 'MP Rubine',
         key: 'Red',
         steps: [
             {
@@ -169,7 +169,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21Charcoal',
+        name: 'MP Charcoal',
         key: 'Grey',
         steps: [
             
@@ -206,7 +206,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21UtilBlue',
+        name: 'MP Utility Blue',
         key: 'Utility blue',
         steps: [
             {
@@ -242,7 +242,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21UtilGold',
+        name: 'MP Utility Gold',
         key: 'Utility orange',
         steps: [
             {

package/src/components/grid/index.njk

@@ -4,22 +4,64 @@ layout: system-page
 sidebar: components
 ---
 
-{% from "components/usp/macro.njk" import usp %}
-  
+{% from "components/card/macro.njk" import card %}
+
 <div class="o-grid o-grid--of-three-late">
-  {{ usp({
-    title: 'Generic',
-    content: '<p>Grids to be nested inside layout grids, splitting content into equal columns.</p>',
-    link: '/components/grid/generic/'
+  {{ card({
+      theme: {
+        layout: 'single',
+        size: 'large',
+        border: true
+      },
+      header: {
+        title: 'Generic'
+      },
+      body: {
+        content: '<p>Grids to be nested inside layout grids, splitting content into equal columns.</p>'
+      },
+      footer: {
+        cta: {
+          link: '/components/grid/generic/',
+          label: 'Read more'
+        }
+      }
   }) }}
-  {{ usp({
-    title: 'Layout',
-    content: '<p>Grids designed to lay out full pages, fitting into the twelve column grid.</p>',
-    link: '/components/grid/layout/'
+  {{ card({
+      theme: {
+        layout: 'single',
+        size: 'large',
+        border: true
+      },
+      header: {
+        title: 'Layout'
+      },
+      body: {
+        content: '<p>Grids designed to lay out full pages, using the twelve column grid.</p>'
+      },
+      footer: {
+        cta: {
+          link: '/components/grid/layout/',
+          label: 'Read more'
+        }
+      }
   }) }}
-  {{ usp({
-    title: 'Wrapper',
-    content: '<p>Site-width constrains.</p>',
-    link: '/components/grid/wrap/'
+  {{ card({
+      theme: {
+        layout: 'single',
+        size: 'large',
+        border: true
+      },
+      header: {
+        title: 'Wrapper'
+      },
+      body: {
+        content: '<p>Site-width constraints.</p>'
+      },
+      footer: {
+        cta: {
+          link: '/components/grid/wrap/',
+          label: 'Read more'
+        }
+      }
   }) }}
 </div>