Cleanup: Font sizes (#94)

# Description

Various font sizes needed tweaking

- Part of #78 

- All fonts should be correctly (or extremely closely) sized to the
design
- All body fonts should be "body" instead of `text-*`
- Everything should be responsive all the way from xs->xl

src/components/GetNotified/GetNotified.svelte

@@ -84,7 +84,7 @@
 
 <div class="mx-auto w-full p-[36px] sm:max-w-[396px] md:p-0 md:py-[96px]">
   {#if !formSuccess}
-    <h3 class="h3 font-bold">Contact</h3>
+    <h3 class="title-h3">Contact</h3>
     <form
       on:submit|preventDefault={submit}
       novalidate
@@ -111,18 +111,18 @@
         class="required mb-f4 text-black"
         error={hasSubmittedFormAtLeastOnce && !email?.length ? errorText : undefined}
       />
-      <div class="mb-f4 flex">
+      <div class="mb-f4 mt-f8 flex flex-col gap-f12 sm:flex-row sm:gap-f32">
         <label class="inline-flex items-center hover:cursor-pointer">
           <input type="checkbox" bind:checked={isDeveloper} class="text-white accent-tealBright hover:cursor-pointer" />
-          <span class="ml-2 text-sm font-[300]">Development</span>
+          <span class="ml-2 text-normal">Development</span>
         </label>
-        <label class="leading ml-[56px] inline-flex items-center hover:cursor-pointer">
+        <label class="leading inline-flex items-center hover:cursor-pointer">
           <input
             type="checkbox"
             bind:checked={isPartnership}
             class="form-checkbox text-white accent-tealBright hover:cursor-pointer"
           />
-          <span class="ml-2 text-sm font-[300]">Partnerships</span>
+          <span class="ml-2 text-normal">Partnerships</span>
         </label>
       </div>
       <div class="w-full">

src/components/HAccordion.svelte

@@ -36,36 +36,33 @@
 <div
   id={`explore_${sectionNumber}`}
   onclick={toggle}
-  class={`flex flex-col ${borderClasses} border-grayBorder px-f32 lg:pb-f96 lg:pt-f96 lg:transition-all ${isOpen ? 'lg:w-[316px]' : 'shrink-0 lg:w-[132px] lg:cursor-pointer'}`}
+  class={`flex flex-col ${borderClasses} border-grayBorder px-f32 lg:pb-f96 lg:pt-f96 lg:transition-all ${isOpen ? 'lg:w-[316px] xl:w-[400px]' : 'shrink-0 lg:w-[140px] lg:cursor-pointer'}`}
 >
-  <div class={`-mt-[9px] text-clip text-nowrap font-title text-h3 font-normal text-white ${textAlignClasses}`}>
+  <div class={`-mt-[9px] text-clip text-nowrap font-title text-[40px] text-white sm:text-[44px] ${textAlignClasses}`}>
     .{parseInt(sectionNumber, 10).toString().padStart(2, '0')}
   </div>
   {#if iconSrc}
     <div
       id={`explore_${sectionNumber}_icon`}
       class={`flex w-full flex-row pt-[6px] lg:justify-normal ${contentAlignClasses} `}
     >
-      <img src={iconSrc as string} alt="" class="h-[65px] w-[65px]" />
+      <img src={iconSrc as string} alt="" class="h-[62px] w-[62px] md:h-[65px] md:w-[65px] lg:h-[74px] lg:w-[74px]" />
     </div>
   {/if}
-  <div
-    id={`explore_${sectionNumber}_label`}
-    class={`text-clip text-wrap pt-6 font-title text-h6 font-normal text-white ${textAlignClasses}`}
-  >
+  <div id={`explore_${sectionNumber}_label`} class={`title-h6 text-clip text-wrap pt-6 text-white ${textAlignClasses}`}>
     {@render sectionLabel()}
   </div>
 
   <div class={`lg:transition-all ${isOpen ? 'block' : 'block lg:hidden'}`}>
     <div
       id={`explore_${sectionNumber}_content`}
-      class={`sm overflow-hidden pb-f12 pl-0 pr-f8 pt-4 text-white md:max-w-full ${textAlignClasses}`}
+      class={`body overflow-hidden pb-f12 pl-0 pr-f8 pt-4 text-white md:max-w-full ${textAlignClasses}`}
     >
       {@render children()}
     </div>
     <div class={`flex flex-row ${contentAlignClasses}`}>
       <Button id={`explore_${sectionNumber}_button`} size="xs" type="primary" href={url} target="_blank">
-        <span class=" text-xs text-black">Learn</span> <img src={Arrow} width="12px" height="12px" alt="" />
+        Learn <img src={Arrow} width="12px" height="12px" alt="" />
       </Button>
     </div>
   </div>

src/components/Sections/About.svelte

@@ -17,7 +17,7 @@
         <h2 class="title-70 pb-f24 pt-f12 text-primary">What is<br /> Frequency?</h2>
       </SlideIn>
 
-      <SectionParagraph class="text-sm md:max-w-[415px] lg:max-w-[415px]">
+      <SectionParagraph class="body md:max-w-[415px] lg:max-w-[415px]">
         Frequency is a blockchain designed to support decentralized social networks to give people control over their
         online presence. With Frequency, users can freely choose and connect on social apps while retaining ownership of
         their data. Built on the Decentralized Social Networking Protocol (<a

src/components/Sections/DeveloperSteps.svelte

@@ -7,9 +7,9 @@
 
   import { DeveloperStepsText } from '$lib/consts';
 
-  const sectionParagraphClasses = 'text-sm mt-f8';
+  const sectionParagraphClasses = 'body mt-f8';
   const sectionClasses = 'mt-[48px] ml-[30px] mr-[30px]';
-  const stepTitleClasses = 'text-h3 font-bold text-primary leading-0';
+  const stepTitleClasses = 'title-h3 text-primary leading-0';
 </script>
 
 <div class="hidden lg:block">
@@ -26,7 +26,7 @@
         </div>
       </div>
       <!-- STEP TWO -->
-      <div class="flex pt-[36px]" id="step-2">
+      <div class="flex pt-[60px]" id="step-2">
         <CircleTwo />
         <div class={sectionClasses}>
           <h3 class={stepTitleClasses}>{DeveloperStepsText.two.title}</h3>
@@ -49,7 +49,7 @@
         </div>
       </div>
       <!-- STEP FOUR -->
-      <div class="flex pt-[36px]" id="step-4">
+      <div class="flex pt-[60px]" id="step-4">
         <CircleFour />
         <div class={sectionClasses}>
           <h3 class={stepTitleClasses}>{DeveloperStepsText.four.title}</h3>

src/components/Sections/DeveloperStepsMobile.svelte

@@ -7,8 +7,8 @@
 
   import { DeveloperStepsText } from '$lib/consts';
 
-  const sectionParagraphClasses = 'text-normal mt-f12 leading-[20px]';
-  const stepTitleClasses = 'text-h3 font-bold text-primary';
+  const sectionParagraphClasses = 'body mt-f12 leading-[20px]';
+  const stepTitleClasses = 'title-h3 text-primary';
   const circleWidth = '60';
   const sectionClasses = 'flex flex-col';
   const stepClasses = 'py-[4px] flex flex-col';

src/components/Sections/DeveloperStepsTablet.svelte

@@ -7,9 +7,9 @@
 
   import { DeveloperStepsText } from '$lib/consts';
 
-  const sectionParagraphClasses = 'text-[12px] mt-[16px] min-h-[100px]';
+  const sectionParagraphClasses = 'body mt-[16px] min-h-[100px]';
   const stepTextClasses = '';
-  const stepTitleClasses = 'text-[40px] font-bold text-primary';
+  const stepTitleClasses = 'text-[40px] font-title text-primary';
   const stepClasses = 'flex flex-col';
   const circleWidth = '60';
 </script>

src/components/Sections/Developers.svelte

@@ -14,12 +14,12 @@
 <SectionWrapper id="developers" class="pt-[30px] md:pt-[38px] lg:pt-[34px]">
   <section class="mx-auto flex max-w-screen-xl flex-col lg:flex-row">
     <DeveloperAnimation class="mx-auto max-h-[260px] md:max-h-[300px] md:max-w-[800px] lg:max-h-none" />
-    <div class="freq-container lg:mt-[36px]">
+    <div class="freq-container-padding lg:mt-[36px]">
       <SlideIn class="lg:basis-1/3]">
-        <h2 class="title-70 mx-0 w-full font-bold text-teal md:mt-[24px] md:max-w-[400px]">
+        <h2 class="title-70 mx-0 w-full text-teal md:mt-[24px] md:max-w-[400px]">
           {DeveloperStepsText.header.title}
         </h2>
-        <p class="mt-f24 text-[18px] font-bold md:text-[22px]">{DeveloperStepsText.header.text_html}</p>
+        <p class="title-h5 mt-f24">{DeveloperStepsText.header.text_html}</p>
       </SlideIn>
     </div>
   </section>

src/components/Sections/Ecosystem.svelte

@@ -22,7 +22,7 @@
         <h1 class="title-70 relative z-10 font-title text-white">
           Growing into a better <br class="hidden md:inline" />Future Together
         </h1>
-        <p class="my-6 text-white md:pr-20">
+        <p class="body my-6 text-white md:pr-20">
           Frequency is leading a new era of social networking, empowering businesses and apps to help users unlock the
           value of their data and connections. Chosen as the core infrastructure for Project Liberty’s “People’s Bid” to
           acquire TikTok US, Frequency fosters a collaborative, decentralizing environment where communities can thrive

src/components/Sections/Mission/MissionHeader.svelte

@@ -7,9 +7,7 @@
     <h2 class="title-70 pb-f24 text-primary">Frequency’s Mission</h2>
   </SlideIn>
   <SlideIn>
-    <h5
-      class="pb-f64 text-h6 font-bold sm:max-w-[400px] sm:leading-default lg:max-w-[620px] lg:text-h5 lg:leading-[32px]"
-    >
+    <h5 class="title-h5 pb-f64 sm:max-w-[400px] sm:leading-default lg:max-w-[620px] lg:leading-[32px]">
       Frequency's Mission is to provide the infrastructure to empower people by:
     </h5>
   </SlideIn>

src/components/Sections/Mission/MissionItem.svelte

@@ -12,7 +12,7 @@
     <span class="absolute left-0 top-f24 w-f160 border-b-2 border-gray3"></span>
   </div>
   <!--    right column-->
-  <div class="relative flex max-w-[calc(100%-48px)] flex-col pl-f24 pt-f48 text-sm">
+  <div class="body relative flex max-w-[calc(100%-48px)] flex-col pl-f24 pt-f48">
     <!--        vertical border-->
     <span class="absolute left-0 top-f12 h-f120 border-l-2 border-gray3"></span>
     <!--        body-->

src/components/Sections/Mission/MissionStatement.svelte

@@ -1,10 +1,10 @@
 <div class="bg-navy py-f24 text-white">
-  <div class="freq-container flex items-center justify-center gap-f24">
-    <h2 class="title-70 sm:text-h1 md:text-[70px]">Your:</h2>
+  <div class="flex items-center justify-center gap-f12 md:gap-f24">
+    <h2 class="title-70 text-[30px] sm:text-[46px] md:text-[70px]">Your:</h2>
     <div class="flex flex-col">
-      <span class="font-thin opacity-40 sm:text-[30px] md:text-[50px]">Followers</span>
-      <span class="font-thin sm:text-[50px] md:text-[70px]">Network</span>
-      <span class="font-thin opacity-40 sm:text-[30px] md:text-[50px]">Content</span>
+      <span class="text-[20px] font-thin opacity-40 sm:text-[30px] md:text-[50px]">Followers</span>
+      <span class="text-[30px] font-thin sm:text-[48px] md:text-[70px]">Network</span>
+      <span class="text-[20px] font-thin opacity-40 sm:text-[30px] md:text-[50px]">Content</span>
     </div>
   </div>
 </div>

src/components/Sections/Users/UsersHeader.svelte

@@ -18,7 +18,7 @@
         <h2 class="title-70 pb-f24">User<br /> Advantages</h2>
       </SlideIn>
     </div>
-    <p class="max-w-[900px] text-h6 font-bold leading-default lg:text-h5 lg:leading-[32px]">
+    <p class="title-h5 max-w-[900px] leading-default lg:leading-[32px]">
       On most social media platforms, you get a stark choice: accept the platform as is, or leave the platform, your
       friends and your relationships behind. Frequency changes all of this by offering users control, community, and
       ownership over their online experience.

src/components/Sections/Users/UsersItem.svelte

@@ -7,10 +7,10 @@
 <div class="max-w-full md:max-w-[500px] lg:max-w-[370px]">
   <div class="flex items-center gap-f16 pb-f16 md:gap-f32">
     <img src={icon} alt={iconAlt} />
-    <h3 class="title-44">{title}</h3>
+    <h3 class="title-h3">{title}</h3>
   </div>
 
-  <div class="text-sm">
+  <div class="body">
     <slot name="body" />
   </div>
 </div>

src/routes/docs/components/DocsMain.svelte

@@ -7,8 +7,8 @@
     <DevPortalAnimation />
   </div>
   <div class="flex flex-col gap-6 lg:w-1/2">
-    <h2 class="title-70 text-h2 text-primary">Get Started with Frequency Development</h2>
-    <p class="body text-h5 font-bold text-black sm:text-normal">
+    <h1 class="title-70 text-primary">Get Started with Frequency Development</h1>
+    <p class="title-h5 text-black">
       Frequency offers a variety of open source tools and documentation in the Developers Portal to help you rapidly get
       applications up and running on Frequency.
     </p>

src/routes/docs/components/Explore.svelte

@@ -26,13 +26,13 @@
 
 <div
   id="explore_section"
-  class="freq-container mt-f96 flex w-full flex-col gap-f12 pb-f96 pt-f20 lg:flex-row lg:gap-0 lg:px-f128 lg:py-f96"
+  class="freq-container mt-f96 flex w-full flex-col gap-f12 pb-f96 pt-f20 lg:flex-row lg:gap-0 lg:py-f96"
 >
   <div id="explore_description" class="relative flex w-full flex-row px-f32 text-teal lg:w-1/2 lg:pt-f96">
     <div class="flex flex-col gap-f32">
-      <span class="h1 mt-f8 text-clip text-wrap font-title font-normal">Explore &amp; Build</span>
+      <span class="title-h2 mt-f8 text-clip text-wrap">Explore &amp; Build</span>
 
-      <div class="pb-f64 text-sm text-white md:pb-f80">
+      <div class="body pb-f64 text-white md:pb-f80">
         Frequency offers simple blockchain integration for your applications&mdash;bridging the gap between your app and
         the decentralized web. Frequency Developer Gateway offers a suite of self-hosted tools and services that make it
         easy to connect your applications to Frequency. This allows your developer team to focus on building outstanding
@@ -51,7 +51,7 @@
 
   <!-- min width selected based on description section + 1 open accordion + 3 closed accordions -->
   <div class="w-full sm:px-f32 sm:py-f16">
-    <div class="grid grid-cols-1 gap-x-f4 gap-y-f48 md:grid-cols-2 lg:flex lg:h-[615px]">
+    <div class="grid grid-cols-1 gap-x-f4 gap-y-f48 md:grid-cols-2 lg:flex lg:h-[850px] xl:h-[700px]">
       <HAccordion
         sectionNumber="1"
         iconSrc={ProviderIcon}

src/style/app.css

@@ -26,11 +26,28 @@
   .title-100 {
     @apply font-title text-[55px] leading-[1] tracking-wide md:text-[75px] lg:text-[100px];
   }
+
+  .title-h2 {
+    @apply font-title text-[50px] leading-[1] tracking-wider md:text-[60px] lg:text-[64px];
+  }
+
+  .title-h3 {
+    @apply font-title text-[40px] leading-[1] tracking-wider md:text-[40px] lg:text-[44px];
+  }
+
+  .title-h5 {
+    @apply font-title text-[18px] leading-[1] tracking-wider sm:text-[20px] md:text-[22px] lg:text-[26px];
+  }
+
+  .title-h6 {
+    @apply font-title text-[18px] leading-[1] tracking-wider sm:text-[20px] md:text-[22px] lg:text-[22px];
+  }
+
   .subtitle {
     @apply text-lg font-semibold md:text-lg lg:text-xl;
   }
   .body {
-    @apply text-xs md:text-sm lg:text-normal;
+    @apply text-normal md:text-md;
   }
 
   /* Layout */