Update typography

docs/front-end/utility-classes.md

@@ -4,6 +4,6 @@ Most CSS classes used in this build are designed to fit with a particular compon
 
 Some, such as the `listing` component are designed to be a base with variations across a number of variant components - this is made clear by the component naming: `listing--image.html`, `listing--simple.html` etc.
 
-However, we have some utility classes which are designed for re-use, along with the option to to use Tailwind utility classes. Classes that are designed for re-use include `button`, `heading--[xyz]`, `link`, `supporting`, `.body` and `icon--listing-arrow`.
+However, we have some utility classes which are designed for re-use, along with the option to to use Tailwind utility classes. Classes that are designed for re-use include `button`, `heading--[xyz]`, `text--[xyz]`, `link`, and `icon--listing-arrow`.
 
 The same tailwind utility classes that are avialable in `wagtail-kit` are available in this build. `tailwind.config.js` includes the custom spacing for the build, allowing us to use classes such as `mb-spacerMini` where it wouldn't be practical to create a new scss component just for a one-off spacing adjustment.

tbx/project_styleguide/templates/patterns/atoms/section-title/section-title.html

@@ -1,3 +1,3 @@
-<h2 class="section-title heading heading--two{% if classes %} {{ classes }}{% endif %}"{% if aria_label %} aria-label="{{ aria_label }}"{% endif %}>
+<h2 class="section-title heading heading--two heading--light{% if classes %} {{ classes }}{% endif %}"{% if aria_label %} aria-label="{{ aria_label }}"{% endif %}>
     {{ title }}
 </h2>

tbx/project_styleguide/templates/patterns/molecules/home-page-hero/home-page-hero.html

@@ -1,5 +1,5 @@
 <div class="grid__title home-page-hero">
-    {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one-c home-page-hero__title" %}
+    {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one-b home-page-hero__title" %}
 
     <div class="employee-owned-icon home-page-hero__icon">
         {% include "patterns/atoms/icons/icon.html" with name="employee-owned-text" classname="employee-owned-icon__text-icon" %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html

@@ -1,7 +1,7 @@
 {% load wagtailcore_tags %}
 
 {% if is_standard_page %}
-    <h2 class="heading heading--two-b grid__heading mb-spacerMedium">{{ value.featured_blog_heading }}</h2>
+    <h2 class="heading heading--two-b heading--light grid__heading mb-spacerMedium">{{ value.featured_blog_heading }}</h2>
 {% else %}
     {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.featured_blog_heading classes="motif-heading--two motif-heading--static  motif-heading--half-width   section-title--related-posts" %}
 {% endif %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html

@@ -1,7 +1,7 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 <div class="contact-cta grid__contact-cta">
     {% for cta in value.call_to_action %}
-        <h2 class="contact-cta__text heading heading--three">{{ cta.value.text }}</h2>
+        <h2 class="contact-cta__text heading heading--three heading--light">{{ cta.value.text }}</h2>
     {% endfor %}
 
     {% if value.person %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/heading2_block.html

@@ -1 +1 @@
-<h2 class="heading heading--two-b grid__heading">{{ value }}</h2>
+<h2 class="heading heading--two-b heading--light grid__heading">{{ value }}</h2>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/heading3_block.html

@@ -1 +1 @@
-<h3 class="heading heading--three grid__heading">{{ value }}</h3>
+<h3 class="heading heading--three heading--light grid__heading">{{ value }}</h3>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/heading4_block.html

@@ -1 +1 @@
-<h4 class="heading heading--four heading--semibold grid__heading">{{ value }}</h4>
+<h4 class="heading heading--four heading--light grid__heading">{{ value }}</h4>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/image_block.html

@@ -14,10 +14,10 @@
     {% endif %}
 
     {% if value.caption %}
-        <p class="image__caption supporting">{{ value.caption }}</p>
+        <p class="image__caption text--eight">{{ value.caption }}</p>
     {% endif %}
 
     {% if value.attribution %}
-        <p class="image__attribution supporting">{{ value.attribution }}</p>
+        <p class="image__attribution text--eight">{{ value.attribution }}</p>
     {% endif %}
 </div>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/impact_report_heading_block.html

@@ -25,6 +25,6 @@
             </span>
             {{ value.short_heading }}
         </p>
-        <h2 class="report-section__heading heading heading--two-b">{{ value.heading|richtext }}</h2>
+        <h2 class="report-section__heading heading heading--two-b heading--light">{{ value.heading|richtext }}</h2>
     </div>
 </div>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/pullquote_block.html

@@ -4,7 +4,7 @@
     {# This needs to be inline as masks or clipPaths are not supported in <use> elements #}
     {% include "patterns/atoms/icons/quote-icon.html" with classes="pullquote__icon" unique_id=unique_id %}
 
-    <p class="pullquote__text heading heading--three-b">{{ value.quote }}</p>
+    <p class="pullquote__text heading heading--three-b heading--light">{{ value.quote }}</p>
 
     <div class="pullquote__reference">
         <div class="pullquote__meta">

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/small_image_with_text_block.html

@@ -4,7 +4,7 @@
     {% image value.image fill-62x62 class="small-image-with-text__image" alt="" %}
 
     <div>
-        <h4 class="small-image-with-text__title heading--four">{{ value.title }}</h4>
+        <h4 class="small-image-with-text__title heading--four heading--light">{{ value.title }}</h4>
 
         <div class="streamfield__paragraph small-image-with-text__text rich-text">
             {{ value.text|richtext }}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/values_block.html

@@ -18,7 +18,7 @@
                         {{ value_item.strapline }}
                     {% endif %}
                 </p>
-                <h3 class="heading heading--two-b values__title">{{ value_item.title }}</h3>
+                <h3 class="heading heading--two-b heading--light values__title">{{ value_item.title }}</h3>
                 <div class="rich-text values__text">
                     {{ value_item.text|richtext }}
                 </div>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/wide_image_block.html

@@ -10,11 +10,11 @@
         {% endif %}
 
         {% if value.caption %}
-            <p class="wide-image__caption supporting">{{ value.caption }}</p>
+            <p class="wide-image__caption text--eight">{{ value.caption }}</p>
         {% endif %}
 
         {% if value.attribution %}
-            <p class="wide-image__attribution supporting">{{ value.attribution }}</p>
+            <p class="wide-image__attribution text--eight">{{ value.attribution }}</p>
         {% endif %}
     {% endwith %}
 </div>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.html

@@ -2,7 +2,7 @@
 
 {% if work_pages %}
     {% if is_standard_page %}
-        <h2 class="heading heading--two-b grid__heading mb-spacerMedium">{{ value.featured_work_heading }}</h2>
+        <h2 class="heading heading--two-b heading--light grid__heading mb-spacerMedium">{{ value.featured_work_heading }}</h2>
     {% else %}
         {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.featured_work_heading classes="motif-heading--two motif-heading--static  motif-heading--half-width section-title--related-posts" %}
     {% endif %}

tbx/project_styleguide/templates/patterns/pages/errors/404.html

@@ -12,7 +12,7 @@
             {% include "patterns/atoms/icons/broken-matchstick-icon.html" %}
         </div>
         <div class="grid__title">
-            <h1 class="heading heading--one">Oops...</h1>
+            <h1 class="heading heading--one heading--mega">Oops...</h1>
         </div>
         <div class="grid__paragraph">
             <p>It looks like this page doesn't exist.</p>

tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.html

@@ -38,11 +38,11 @@
             </picture>
 
             {% if page.hero_caption %}
-                <p class="image__caption supporting">{{ page.hero_caption }}</p>
+                <p class="image__caption text--eight">{{ page.hero_caption }}</p>
             {% endif %}
 
             {% if page.hero_attribution %}
-                <p class="image__attribution supporting">{{ page.hero_attribution }}</p>
+                <p class="image__attribution text--eight">{{ page.hero_attribution }}</p>
             {% endif %}
         </div>
     </div>

tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html

@@ -15,7 +15,7 @@
         </div>
 
         <div class="grid__paragraph">
-            <p class="heading heading--four">Please enter the password to proceed.</p>
+            <p class="heading heading--four heading--light">Please enter the password to proceed.</p>
         </div>
 
         <form action="{{ action_url }}" method="post"  class="grid__form form">

tbx/project_styleguide/templates/patterns/pages/work/work_page.html

@@ -23,11 +23,11 @@
             </picture>
 
             {% if page.header_caption %}
-                <p class="image__caption supporting">{{ page.header_caption }}</p>
+                <p class="image__caption text--eight">{{ page.header_caption }}</p>
             {% endif %}
 
             {% if page.header_attribution %}
-                <p class="image__attribution supporting">{{ page.header_attribution }}</p>
+                <p class="image__attribution text--eight">{{ page.header_attribution }}</p>
             {% endif %}
         </div>
     </div>

tbx/project_styleguide/templates/patterns/styleguide/components/components.html

@@ -9,16 +9,6 @@ <h2 class="underline mb-2">Mode switcher</h2>
             {% include "patterns/molecules/mode_switcher/mode_switcher.html" %}
         </div>
 
-        <div>
-            <h2 class="underline mb-2">Letter Motif</h2>
-            {% include "patterns/atoms/motif-heading/motif-heading.html" with classes="motif-heading--one" %}
-        </div>
-
-        <div>
-            <h2 class="underline mb-2">Letter Motif without animation</h2>
-            {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 classes="motif-heading--two motif-heading--static" %}
-        </div>
-
         <div>
             <h2 class="underline mb-2">Avatar</h2>
             {% include "patterns/atoms/avatar/avatar.html" %}

tbx/project_styleguide/templates/patterns/styleguide/typography/typography.html

@@ -4,66 +4,56 @@
 
 {% block content %}
     <div class="p-4 mb-8" style="max-width: 710px">
-        {# Headings #}
-        <p class="underline mt-8">Heading 1</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one" %}
+        {# Headings and body text #}
+        <p class="underline mt-8">Size 0 semibold</p>
+        <h1 class="heading heading--mega">Always be curious, daring, and eager to learn</h1>
 
-        <p class="underline mt-8">Heading 1 with the 'narrowest' drop-cap class</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one" heading="Thinking" %}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one" heading="Yikes" %}
+        <p class="underline mt-8">Size 1 semibold & extralight</p>
+        <h1 class="heading heading--one">Joining the battle to protect our oceans</h1>
+        <h1 class="heading heading--one heading--extralight">Joining the battle to protect our oceans</h1>
 
-        <p class="underline mt-8">Heading 1 with the 'narrower' drop-cap class</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one" heading="Which" %}
+        <p class="underline mt-8">Size 1B semibold & extralight</p>
+        <h1 class="heading heading--one-b">Joining the battle to protect our oceans</h1>
+        <h1 class="heading heading--one-b heading--extralight">Joining the battle to protect our oceans</h1>
 
-        <p class="underline mt-8">Heading 1 with the 'narrow' drop-cap class</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one" heading="Flight" %}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one" heading="Platitude" %}
+        <p class="underline mt-8">Size 2 semibold</p>
+        <h2 class="heading heading--two">Joining the battle to protect our oceans</h2>
 
+        <p class="underline mt-8">Size 2B semibold & light</p>
+        <h2 class="heading heading--two-b">Joining the battle to protect our oceans</h2>
+        <h2 class="heading heading--two-b heading--light">Joining the battle to protect our oceans</h2>
 
-        <p class="underline mt-8">Heading 1 with the 'i' drop-cap class</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one" heading="Inventory" %}
-
-
-        <p class="underline mt-8">Heading 1-B</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one-b" %}
-
-        <p class="underline mt-8">Heading 1-B with the 'narrowest' drop-cap class</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one-b" heading="Thinking" %}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one-b" heading="Yikes" %}
-
-        <p class="underline mt-8">Heading 1-B with the 'narrower' drop-cap class</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one-b" heading="Which" %}
-
-        <p class="underline mt-8">Heading 1-B with the 'narrow' drop-cap class</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one-b" heading="Flight" %}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=1 classes="motif-heading--one-b" heading="Platitude" %}
+        <p class="underline mt-8">Size 3 semibold & light</p>
+        <h3 class="heading heading--three">Joining the battle to protect our oceans</h3>
+        <h3 class="heading heading--three heading--light">Joining the battle to protect our oceans</h3>
 
+        <p class="underline mt-8">Size 4 semibold & light</p>
+        <h4 class="heading heading--four">We can help you create digital products and services that solve real customer problems. And, you can transform your organisation along the way.</h4>
+        <h4 class="heading heading--four heading--light">We can help you create digital products and services that solve real customer problems. And, you can transform your organisation along the way.</h4>
 
-        <p class="underline mt-8">Heading 2</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 classes="motif-heading--two" %}
+        <p class="underline mt-8">Size 4B light, less line height</p>
+        <h4 class="heading heading--four-b">We can help you create digital products and services that solve real customer problems. And, you can transform your organisation along the way.</h4>
 
-        <p class="underline mt-8">Heading 2 with the 'narrowest' drop-cap class</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 classes="motif-heading--two" heading="Thinking"%}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 classes="motif-heading--two" heading="Yikes"%}
+        <p class="underline mt-8">Size 5 semibold & regular</p>
+        <h5 class="heading heading--five">We can help you create digital products and services that solve real customer problems. And, you can transform your organisation along the way.</h5>
+        <h5 class="heading heading--five heading--regular">We can help you create digital products and services that solve real customer problems. And, you can transform your organisation along the way.</h5>
+        <p class="text text--five">We can help you create digital products and services that solve real customer problems. And, you can transform your organisation along the way.</p>
 
-        <p class="underline mt-8">Heading 2 with the 'narrower' drop-cap class</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 classes="motif-heading--two" heading="Which"%}
+        <p class="underline mt-8">Size 5B regular, less line height</p>
+        <h5 class="heading heading--five-b heading--regular">We can help you create digital products and services that solve real customer problems. And, you can transform your organisation along the way.</h5>
+        <p class="text text--five-b">We can help you create digital products and services that solve real customer problems. And, you can transform your organisation along the way.</p>
 
-        <p class="underline mt-8">Heading 2 with the 'narrow' drop-cap class</p>
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 classes="motif-heading--two" heading="Flight"%}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 classes="motif-heading--two" heading="Platitude"%}
+        <p class="underline mt-8">Size 6 semibold & regular</p>
+        <h6 class="heading heading--six">Joining the battle to protect our oceans</h6>
+        <p class="text text--six">Joining the battle to protect our oceans</p>
 
+        <p class="underline mt-8">Size 7 semibold & regular</p>
+        <p class="text text--seven text--semibold">Joining the battle to protect our oceans</p>
+        <p class="text text--seven">Joining the battle to protect our oceans</p>
 
-        <p class="underline mt-8">Heading 2-B</p>
-        <h2 class="heading heading--two-b">Joining the battle to protect our oceans</h2>
-        <p class="underline mt-8">Heading 3</p>
-        <h3 class="heading heading--three">Joining the battle to protect our oceans</h3>
-        <p class="underline mt-8">Heading 4</p>
-        <h4 class="heading heading--four">Joining the battle to protect our oceans</h4>
-        <p class="underline mt-8">Heading 5</p>
-        <h5 class="heading heading--five">Joining the battle to protect our oceans</h5>
-        <p class="underline mt-8">Heading 6</p>
-        <h6 class="heading heading--six">Joining the battle to protect our oceans</h6>
+        <p class="underline mt-8">Size 8 semibold & regular</p>
+        <p class="text text--eight text--semibold">Joining the battle to protect our oceans</p>
+        <p class="text text--eight">Joining the battle to protect our oceans</p>
 
         {# Rich text #}
         <p class="mt-8 underline">Rich text</p>

tbx/project_styleguide/templates/patterns/styleguide_base.html

@@ -1,6 +1,6 @@
 {% block theme_chooser_and_title %}
     <div class="p-4 flex items-center justify-between sticky top-0 bg-background z-50">
-        {% block title %}<h1 class="heading heading--one text-heading">Styleguide</h1>{% endblock %}
+        {% block title %}<h1 class="heading heading--mega text-heading">Styleguide</h1>{% endblock %}
         <div class="flex items-center gap-2">
             <label for="mode-chooser" class="text-heading">Choose a mode:</label>
             <select name="mode-chooser" id="mode-chooser" class="p-2 text-black select" onchange="changeThemeAndMode()">

tbx/static_src/sass/base/_fonts.scss

@@ -3,7 +3,7 @@
 @font-face {
     font-family: 'Outfit';
     font-style: normal;
-    font-weight: 300 600; // Define the range of font weights to be used
+    font-weight: 200 600; // Define the range of font weights to be used
     font-display: swap;
     src: url(../fonts/outfit-variable-font.woff2) format('woff2-variations');
 }