@ably/ui 8.7.0-dev.2b71529 → 8.7.0-dev.3453cca

package/core/styles.css

@@ -4,24 +4,20 @@
     --color-active-orange: #ff5416;
     --color-red-orange: #e40000;
     --color-white: #ffffff;
-    --color-electric-cyan: #4ad4ff;
+    --color-electric-cyan: #4af7ff;
     --color-zingy-green: #08ff13;
-    --color-bright-red: #fe372b;
-    --color-orange-700: #ff2739;
+    --color-bright-red: #ff2739;
     --color-jazzy-pink: #ff17d2;
-    --color-extra-light-grey: #f8fafc;
-    --color-light-grey: #f4f8fb;
-    --color-mid-grey: #c6ced9;
-    --color-dark-grey: #667085;
-    --color-charcoal-grey: #2b303b;
-    --color-gui-default: #006edc;
-    --color-gui-hover: #0862b9;
-    --color-gui-active: #074095;
-    --color-gui-default-dark: #4da6ff;
-    --color-gui-hover-dark: #2894ff;
-    --color-gui-active-dark: #0080ff;
-    --color-gui-focus: #80b9f2;
+    --color-extra-light-grey: #fafafb;
+    --color-light-grey: #f5f5f6;
+    --color-mid-grey: #d9d9da;
+    --color-dark-grey: #76767c;
+    --color-charcoal-grey: #292831;
+    --color-gui-default: #0073e6;
+    --color-gui-hover: #0867c4;
+    --color-gui-focus: #0073e6;
     --color-gui-focus-outline: #80b9f2;
+    --color-gui-active: #074095;
     --color-gui-visited: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
@@ -40,10 +36,6 @@
     --syntax-red: #d54e53;
     --syntax-lilac: #bb87d3;
 
-    /* New Neutral colors */
-    --color-neutral-900: #39414e;
-    --color-neutral-500: #c6ced9;
-
     /* uptime status colors */
     --uptime-color-up: #39b54a;
     --uptime-color-trouble: #e87623;
@@ -78,51 +70,44 @@
 
     --gradient-hot-pink: linear-gradient(
       80.2deg,
-      var(--color-orange-700) 0%,
+      var(--color-bright-red) 0%,
       var(--color-jazzy-pink) 100%
     );
 
-    --fs-title-xl: 3rem;
-    --fs-title: 2.75rem;
-    --fs-title-xs: 2.5rem;
-    --fs-h1-xl: 2.5rem;
-    --fs-h1: 2.25rem;
-    --fs-h1-xs: 2rem;
-
-    --fs-h2-xl: 2.125rem;
+    --fs-title-xl: 4rem;
+    --fs-title: 3.5rem;
+    --fs-title-xs: 3rem;
+    --fs-h1-xl: 3.5rem;
+    --fs-h1: 3rem;
+    --fs-h1-xs: 2.625rem;
+    --fs-h2-xl: 2.5rem;
     --fs-h2: 2rem;
-    --fs-h2-xs: 1.75rem;
-
+    --fs-h2-xs: 1.875rem;
     --fs-h3: 1.5rem;
-    --fs-h4: 1.25rem;
-    --fs-h5: 1rem;
-
-    --fs-p1: 1rem;
-    --fs-p2: 0.938rem;
+    --fs-h4: 1.125rem;
+    --fs-p1: 1.125rem;
+    --fs-p2: 1rem;
     --fs-p3: 0.875rem;
     --fs-standfirst-xl: 2.25rem;
     --fs-standfirst: 1.5rem;
-    --fs-sub-header: 1.125rem;
-    --fs-sub-header-xs: 1.063rem;
+    --fs-sub-header: 1.5rem;
+    --fs-sub-header-xs: 1.125rem;
     --fs-overline1: 1rem;
     --fs-overline2: 0.875rem;
-    --fs-btn1: 1rem;
-    --fs-btn2: 0.938rem;
+    --fs-btn1: 1.125rem;
+    --fs-btn2: 1rem;
     --fs-btn3: 0.875rem;
-    --fs-menu1: 1rem;
-    --fs-menu2: 0.938rem;
+    --fs-menu1: 1.125rem;
+    --fs-menu2: 1rem;
     --fs-menu3: 0.875rem;
-    --fs-quote: 1.25rem;
-    --fs-code: 0.938rem;
-    --fs-code2: 0.813rem;
+    --fs-quote: 1.5rem;
+    --fs-code: 0.875rem;
 
     --lh-dense: 1;
     --lh-tight: 1.125;
     --lh-snug: 1.15;
-    --lh-min-normal: 1.2;
     --lh-normal: 1.25;
     --lh-relaxed: 1.45;
-    --lh-extra-relaxed: 1.6;
 
     --ls-tighten-0_025: -0.025em;
     --ls-tighten-0_02: -0.02em;
@@ -130,9 +115,7 @@
     --ls-tighten-0_01: -0.01em;
     --ls-tighten-0_005: -0.005em;
     --ls-tighten-0_0025: -0.0025em;
-    --ls-tighten-0_0015: -0.0015em;
     --ls-widen-0_1: 0.1em;
-    --ls-widen-0_16: 0.16em;
     --ls-widen-0_15: 0.15em;
 
     --spacing-0: 0px;
@@ -147,7 +130,6 @@
     --spacing-20: 1.25rem;
     --spacing-24: 1.5rem;
     --spacing-32: 2rem;
-    --spacing-36: 2.25rem;
     --spacing-40: 2.5rem;
     --spacing-48: 3rem;
     --spacing-64: 4rem;
@@ -195,7 +177,7 @@
 }
 @layer components {
   .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -219,7 +201,7 @@
     background-size: 200% 100%;
     background-position: 0% 0%;
 
-    @apply text-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
+    @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
     @apply focus:outline-gui-focus;
     @apply inline-flex items-center justify-center;
   }
@@ -235,7 +217,7 @@
   }
 
   .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -245,7 +227,7 @@
   }
 
   .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block border-btn border-cool-black rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
     @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
@@ -255,7 +237,7 @@
   }
 
   .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block border-btn border-mid-grey rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus:outline-gui-focus;
@@ -340,53 +322,47 @@
 }
 @layer components {
   .ui-text-title {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-title-xs xs:text-title xl:text-title-xl;
-    @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
+    @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
   }
 
   .ui-text-h1 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
+    @apply tracking-tighten-0.01;
   }
 
   .ui-text-h2 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
+    @apply tracking-tighten-0.005;
   }
 
   .ui-text-h3 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-h3;
-    @apply tracking-tighten-0.005;
+    @apply tracking-tighten-0.0025;
   }
 
   .ui-text-h4 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-h4;
-    @apply tracking-tighten-0.0015;
-  }
-
-  .ui-text-h5 {
-    @apply font-manrope font-extrabold text-cool-black;
-    @apply text-h5;
-    @apply tracking-tighten-0.0025;
+    @apply tracking-widen-0.1;
   }
 
   .ui-text-p1 {
-    @apply font-manrope font-medium text-charcoal-grey;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-manrope font-medium text-charcoal-grey;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-manrope font-medium text-charcoal-grey;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -397,63 +373,60 @@
   }
 
   .ui-text-quote {
-    @apply font-manrope font-normal text-cool-black;
-    @apply text-quote leading-normal;
-    @apply tracking-tighten-0.0015;
+    @apply font-sans font-light text-cool-black;
+    @apply text-quote;
+    @apply tracking-tighten-0.025;
   }
 
   .ui-text-sub-header {
-    @apply font-manrope font-semibold text-neutral-900;
-    @apply text-sub-header-xs xs:text-sub-header leading-normal;
+    @apply font-sans font-light text-dark-grey;
+    @apply text-sub-header-xs xs:text-sub-header;
+    @apply tracking-tighten-0.025;
   }
 
   .ui-text-overline1 {
-    @apply font-jetbrains_mono font-medium text-active-orange uppercase;
-    @apply text-overline1 leading-normal;
-    @apply tracking-widen-0.16;
+    @apply font-sans font-medium text-dark-grey uppercase;
+    @apply text-overline1;
+    @apply tracking-widen-0.15;
   }
 
   .ui-text-overline2 {
-    @apply font-jetbrains_mono font-medium text-active-orange uppercase;
-    @apply text-overline2 leading-normal;
-    @apply tracking-widen-0.16;
+    @apply font-sans font-medium text-dark-grey uppercase;
+    @apply text-overline2;
+    @apply tracking-widen-0.1;
   }
 
   .ui-text-menu1 {
-    @apply font-manrope font-medium text-cool-black;
-    @apply text-menu1 leading-snug;
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu1;
   }
 
   .ui-text-menu2 {
-    @apply font-manrope font-medium text-cool-black;
-    @apply text-menu2 leading-snug;
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu2;
   }
 
   .ui-text-menu3 {
-    @apply font-manrope font-medium text-cool-black;
-    @apply text-menu3 leading-snug;
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu3;
   }
 
   .ui-text-code {
-    @apply font-jetbrains_mono font-medium text-code;
-  }
-
-  .ui-text-code2 {
-    @apply font-jetbrains_mono font-medium text-code2;
+    @apply font-mono font-semibold text-code;
   }
 
   .ui-text-code-inline {
-    @apply font-jetbrains_mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
   }
 
   .ui-unordered-list {
-    @apply text-p1 font-medium text-cool-black;
-    @apply list-disc ml-32 my-16;
+    @apply text-p1 font-light text-cool-black;
+    @apply list-disc ml-32 mb-24;
   }
 
   .ui-ordered-list {
-    @apply text-p1 font-medium text-charcoal-grey;
-    @apply ml-32 my-16 list-decimal;
+    @apply text-p1 font-light text-cool-black;
+    @apply ml-32 mb-24 list-decimal;
   }
 
   .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -470,21 +443,11 @@
   }
 
   .ui-unordered-list ul ul {
-    @apply list-square my-8;
-  }
-
-  .ui-unordered-list ul ul {
-    @apply my-8;
-  }
-
-  .ui-ordered-list li,
-  .ui-unordered-list li {
-    @apply font-medium font-manrope tracking-widen-0;
-    line-height: var(--lh-extra-relaxed);
+    @apply list-square;
   }
 
   .ui-unordered-list-with-emphasis {
-    @apply text-p1 font-medium text-cool-black;
+    @apply text-p1 font-light text-cool-black;
     @apply list-disc ml-32 mt-32 -mb-12;
   }
 
@@ -520,11 +483,11 @@
 }
 @layer components {
   .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-manrope font-medium;
+    @apply flex items-start mb-16 font-sans;
   }
 
   .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-manrope font-medium;
+    @apply flex items-start mb-12 font-sans;
   }
 
   .ui-checkbox-input {
@@ -543,12 +506,12 @@
 
   .ui-checkbox-label-p1 {
     @apply select-none;
-    @apply text-p1 font-medium text-cool-black;
+    @apply text-p1 font-light text-cool-black;
   }
 
   .ui-checkbox-label-p2 {
     @apply select-none;
-    @apply text-p2 font-medium text-cool-black;
+    @apply text-p2 font-light text-cool-black;
   }
 
   .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -569,7 +532,7 @@
   }
 
   .ui-textarea {
-    @apply font-manrope font-medium text-cool-black text-p1;
+    @apply font-sans font-light text-cool-black text-p1;
     @apply p-input mb-16;
     @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
     @apply hover:bg-white hover:shadow-input hover:border-transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.7.0-dev.2b71529",
+  "version": "8.7.0-dev.3453cca",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -74,8 +74,8 @@
     "lodash.throttle": "^4.1.1",
     "nanoid": "^4.0.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "redux": "^4.0.5",
     "scroll-lock": "^2.1.4"
   },

package/src/core/FeaturedLink/component.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-featured-link {
-    @apply font-manrope font-bold block;
+    @apply font-sans font-medium block;
     @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
   }
 

package/src/core/Footer/component.css

@@ -1,14 +1,14 @@
 @layer components {
   .ui-footer-col-title {
-    @apply font-jetbrains_mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
+    @apply text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
   }
 
   .ui-footer-menu-row-link {
-    @apply text-menu3 text-cool-black font-manrope font-medium hover:text-gui-hover block;
+    @apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
   }
 
   .ui-footer-link {
-    @apply text-gui-default hover:text-gui-hover text-menu3 font-manrope font-medium;
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
   }
 
   .ui-footer-compliance-text {

package/src/core/Footer/component.html.erb

@@ -1,18 +1,18 @@
-<footer class="bg-light-grey font-manrope antialiased leading-normal" data-id="footer">
+<footer class="bg-light-grey font-sans antialiased" data-id="footer">
   <div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
     <div class="col-span-full md:col-span-2">
       <div class="flex flex-row p-menu-row-snug">
         <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
-        <h2 class="text-overline2 col-span-full font-jetbrains_mono font-bold uppercase tracking-widen-0.16">The Ably Platform</h2>
+        <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
       </div>
       <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
-        <p class="font-manrope text-p3 py-16 font-bold p-menu-row-snug">
+        <p class="text-p3 py-16 font-medium p-menu-row-snug">
           Easily power any realtime experience in your application via a simple API that handles everything realtime.
         </p>
       </div>
       <ul class="grid grid-cols-1">
         <li class="p-menu-row-snug">
-          <%= link_to 'Pub/sub messaging', abs_url("/pub-sub-messaging"), class: "ui-footer-menu-row-link" %>
+          <%= link_to 'Pub/sub messaging', abs_url("/solutions/channels"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
           <%= link_to 'Push notifications', abs_url("/push-notifications"), class: "ui-footer-menu-row-link" %>
@@ -23,9 +23,6 @@
         <li class="p-menu-row-snug">
           <%= link_to 'Multiple protocol messaging', abs_url("/protocols"), class: "ui-footer-menu-row-link" %>
         </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Streaming data sources', abs_url("/hub"), class: "ui-footer-menu-row-link" %>
-        </li>
       </ul>
     </div>
     <div class="col-span-full xs:col-span-3 md:col-span-1">
@@ -49,9 +46,6 @@
         <li class="p-menu-row-snug">
           <%= link_to 'Healthcare', abs_url("/solutions/healthcare"), class: "ui-footer-menu-row-link" %>
         </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Streaming data sources', abs_url("/hub"), class: "ui-footer-menu-row-link" %>
-        </li>
         <li class="p-menu-row-snug">
           <%= link_to 'eCommerce & Retail', abs_url("/solutions/ecommerce-and-retail"), class: "ui-footer-menu-row-link" %>
         </li>
@@ -152,8 +146,8 @@
       <div class="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
         <div class="">
           <div class="flex pb-24">
-            <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
-              <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
+            <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on X">
+              <%= render(AblyUi::Core::Icon.new(name: "icon-social-x", size: "1.5rem")) %>
             </a>
             <a
                   class="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
@@ -180,7 +174,7 @@
                 >
               <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
             </a>
-            <div class="pl-16 text-menu3 font-manrope font-medium">
+            <div class="pl-16 text-menu3 font-light">
               <strong class="block font-medium">We&apos;re hiring!</strong>
               <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
                 Learn more at Glassdoor
@@ -200,7 +194,7 @@
               >
             <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
           </a>
-          <div class="text-menu3 font-manrope font-medium">
+          <div class="text-menu3 font-light">
             <strong class="block font-medium">We&apos;re hiring!</strong>
             <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
               Learn more at Glassdoor
@@ -210,9 +204,10 @@
       </div>
     </div>
     <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
-      <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 h-80") %>
-      <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 h-80") %>
-      <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 h-80") %>
+      <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2023", class: "mr-24 h-80") %>
+      <%= image_tag(best_support, alt: "Best Support 2023", class: "mr-24 h-80") %>
+      <%= image_tag(fastest_implementation, alt: "Fastest Implementation 2023", class: "mr-24 h-80") %>
+      <%= image_tag(highest_performer, alt: "High Performer 2023", class: "mr-24 h-80") %>
     </div>
   </div>
   <div class="max-w-screen-xl ui-grid-px mx-auto">
@@ -231,29 +226,29 @@
       <div class="flex mr-24">
         <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
+          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
+          <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
         </div>
       </div>
       <div class="flex mr-24 md:col-start-2">
         <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
+          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
+          <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
         </div>
       </div>
       <div class="flex mr-24 md:col-start-3">
         <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
+          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
+          <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
         </div>
       </div>
       <div class="flex mr-24 md:col-start-4">
         <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
+          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
+          <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
         </div>
       </div>
     </div>