From 14a14436e56c86ed33383a811f22d18738d75bb4 Mon Sep 17 00:00:00 2001
From: prostarz <tommyspam2000@gmail.com>
Date: Sun, 5 Jan 2025 13:56:44 +0000
Subject: [PATCH] feat(ui): update to custom typography comps

---
 src/components/cards/defaultCard.tsx          | 21 +++++----
 src/components/cards/listCard/overlay.tsx     |  6 ++-
 src/components/cards/pluginCard.tsx           | 25 ++++++-----
 src/components/cards/sourcecard.tsx           | 12 ++---
 src/components/data-table/pagination.tsx      | 21 +++++----
 src/components/errorComponent/index.tsx       | 10 ++---
 src/components/info/media/index.tsx           |  3 +-
 src/components/info/similar/index.tsx         |  5 +--
 src/components/info/sources/index.tsx         | 10 ++---
 src/components/info/specs/index.tsx           |  5 +--
 src/components/info/specs/row.tsx             | 11 ++---
 src/components/info/tabs/about.tsx            | 44 ++++++++++---------
 src/components/info/topbar/title.tsx          |  6 +--
 src/components/titleBar/index.tsx             |  5 +--
 src/components/typography/h4.tsx              | 18 ++++++++
 src/components/typography/h5.tsx              | 18 ++++++++
 src/components/typography/muted.tsx           | 15 +++++++
 .../components/cards/achievement.tsx          | 12 ++---
 .../achievements/components/container.tsx     | 12 ++---
 .../components/cards/download/percentBar.tsx  |  9 ++--
 .../components/cards/download/stat.tsx        |  9 ++--
 .../components/cards/download/title.tsx       |  4 +-
 .../downloads/components/cards/loading.tsx    |  8 ++--
 .../ContinuePlayingCardOverlay/index.tsx      | 16 ++++---
 .../components/container/listContainer.tsx    |  9 ++--
 src/features/settings/components/section.tsx  | 10 +++--
 src/features/settings/components/sidebar.tsx  | 13 +++---
 .../settings/logDisplay/logTypes/error.tsx    |  3 +-
 .../settings/logDisplay/logTypes/info.tsx     |  3 +-
 .../settings/logDisplay/logTypes/warn.tsx     |  3 +-
 src/features/settings/components/title.tsx    |  3 +-
 src/features/updater/components/updater.tsx   | 26 +++++------
 src/routes/downloads.lazy.tsx                 |  9 ++--
 33 files changed, 231 insertions(+), 153 deletions(-)
 create mode 100644 src/components/typography/h4.tsx
 create mode 100644 src/components/typography/h5.tsx
 create mode 100644 src/components/typography/muted.tsx

diff --git a/src/components/cards/defaultCard.tsx b/src/components/cards/defaultCard.tsx
index 41505f1..d46b732 100644
--- a/src/components/cards/defaultCard.tsx
+++ b/src/components/cards/defaultCard.tsx
@@ -3,6 +3,8 @@ import { Link } from "@tanstack/react-router";
 import { format } from "date-fns";
 import { useMemo } from "react";
 import IGDBImage from "../IGDBImage";
+import { H5 } from "../typography/h5";
+import { TypographyMuted } from "../typography/muted";
 import { Card, CardContent } from "../ui/card";
 
 type DefaultCardProps = (IGDBReturnDataType | SimilarGame) & {
@@ -37,30 +39,33 @@ const DefaultCard = ({
           <div className="absolute inset-0 z-20 flex flex-col items-center justify-center transition duration-300 ease-out translate-y-full rounded opacity-0 cursor-pointer bg-slate-700 bg-opacity-80 group-focus-within:translate-y-0 group-focus-within:opacity-100 group-hover:translate-y-0 group-hover:opacity-100">
             <div className="flex flex-col items-center justify-center w-full gap-4 p-2">
               <div className="flex flex-col w-full gap-1">
-                <h4 className="font-medium text-center text-white whitespace-pre-line break-before-avoid text-balance">
+                <H5 className="text-center text-white whitespace-pre-line break-before-avoid text-balance">
                   {name}
-                </h4>
+                </H5>
 
                 {!!findReleaseDate && !!findReleaseDate?.date && (
                   <div className="flex items-center justify-center">
-                    <p className="text-xs text-slate-400">
+                    <TypographyMuted>
                       {format(
                         new Date(findReleaseDate?.date * 1000),
                         "MMMM d, yyyy"
                       )}
-                    </p>
+                    </TypographyMuted>
                   </div>
                 )}
 
-                <ul className="flex items-center justify-center w-full gap-1 px-2 text-xs text-slate-400 line-clamp-1">
+                <div className="flex items-center justify-center w-full gap-1 px-2 line-clamp-1 overflow-ellipsis">
                   {!!genres?.length &&
                     genres.slice(0, 2).map((genre, i) => (
-                      <li className="whitespace-nowrap line-clamp-1" key={i}>
+                      <TypographyMuted
+                        className="whitespace-nowrap line-clamp-1"
+                        key={i}
+                      >
                         {genre.name}
                         {i !== genres.slice(0, 2).length - 1 ? "," : ""}
-                      </li>
+                      </TypographyMuted>
                     ))}
-                </ul>
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/components/cards/listCard/overlay.tsx b/src/components/cards/listCard/overlay.tsx
index 157c654..da8d195 100644
--- a/src/components/cards/listCard/overlay.tsx
+++ b/src/components/cards/listCard/overlay.tsx
@@ -1,3 +1,5 @@
+import { H5 } from "@/components/typography/h5";
+
 interface ListCardOverlayProps {
   title: string;
 }
@@ -6,9 +8,9 @@ const ListCardOverlay: React.FC<ListCardOverlayProps> = ({ title }) => (
   <div className="absolute inset-0 z-20 flex flex-col items-center justify-center transition duration-300 ease-out translate-y-full rounded opacity-0 cursor-pointer bg-slate-700/80 group-focus-within:translate-y-0 group-focus-within:opacity-100 group-hover:translate-y-0 group-hover:opacity-100 group-focus:translate-y-0 group-focus:opacity-100">
     <div className="flex flex-col items-center justify-center w-full gap-4 p-2">
       <div className="flex flex-col w-full gap-1">
-        <h4 className="font-medium text-center text-white whitespace-pre-line break-before-avoid text-balance">
+        <H5 className="text-center text-white whitespace-pre-line break-before-avoid text-balance">
           {title}
-        </h4>
+        </H5>
       </div>
     </div>
   </div>
diff --git a/src/components/cards/pluginCard.tsx b/src/components/cards/pluginCard.tsx
index 4c5daca..dd5cacb 100644
--- a/src/components/cards/pluginCard.tsx
+++ b/src/components/cards/pluginCard.tsx
@@ -4,6 +4,8 @@ import { useLanguageContext } from "@/contexts/I18N";
 import { usePluginActions } from "@/hooks";
 import { cn, openLink } from "@/lib";
 import { Download, Trash2 } from "lucide-react";
+import { TypographyMuted } from "../typography/muted";
+import { TypographySmall } from "../typography/small";
 
 interface Props {
   image: string;
@@ -58,36 +60,35 @@ const PluginCard = ({
           />
 
           <div className="flex flex-col items-start justify-end">
-            <p className="flex items-center gap-1 text-xs font-medium text-gray-500 dark:text-gray-400">
+            <TypographyMuted className="flex items-center gap-1 font-medium">
               {needsUpdate && (
                 <span className="font-bold text-red-500">
                   [Update available]
                 </span>
               )}
               {id} - V{version}{" "}
-            </p>
+            </TypographyMuted>
 
-            <h3 className="text-sm font-semibold truncate">{name}</h3>
+            <TypographySmall className="truncate">{name}</TypographySmall>
 
             {!!author && (
-              <p
-                className={cn(
-                  "text-xs font-medium text-gray-500 dark:text-gray-400",
-                  {
-                    "cursor-pointer hover:underline": author.url,
-                  }
-                )}
+              <TypographyMuted
+                className={cn({
+                  "cursor-pointer hover:underline": author.url,
+                })}
                 onClick={() => {
                   if (author.url) openLink(author.url);
                 }}
               >
                 {author.name}
-              </p>
+              </TypographyMuted>
             )}
           </div>
         </div>
 
-        <p className="text-xs font-medium text-left">{description}</p>
+        <TypographyMuted className="text-xs font-medium text-left">
+          {description}
+        </TypographyMuted>
       </div>
 
       <div className="relative z-10 flex items-center justify-end gap-3">
diff --git a/src/components/cards/sourcecard.tsx b/src/components/cards/sourcecard.tsx
index f828834..95374a7 100644
--- a/src/components/cards/sourcecard.tsx
+++ b/src/components/cards/sourcecard.tsx
@@ -8,6 +8,8 @@ import { useAccountServices } from "@/stores/account-services";
 import { CloudDownload, ShoppingCart } from "lucide-react";
 import { useCallback } from "react";
 import { sanitizeFilename } from "../../lib/utils";
+import { H3 } from "../typography/h3";
+import { P } from "../typography/p";
 import { Button } from "../ui/button";
 import { Card } from "../ui/card";
 
@@ -121,13 +123,13 @@ export const SourceCard = ({ source, ...props }: SourceCardProps) => {
 
   return (
     <Card className="w-full h-28 p-2.5 overflow-hidden border-none rounded-2xl">
-      <div className="flex flex-col items-center justify-between w-full h-full overflow-hidden">
+      <div className="flex flex-col items-start justify-between w-full h-full overflow-hidden">
         {isDeal(source) ? (
           <>
-            <h1 className="font-bold">{source.shop.name}</h1>
-            <p className="w-full text-sm truncate text-muted-foreground">
+            <H3>{source.shop.name}</H3>
+            <P className="w-full -mt-0.5 truncate text-muted-foreground">
               {source.url}
-            </p>
+            </P>
             <Button
               className="items-center w-full gap-3 font-bold rounded-full"
               variant="success"
@@ -139,7 +141,7 @@ export const SourceCard = ({ source, ...props }: SourceCardProps) => {
           </>
         ) : (
           <>
-            <h1 className="w-full font-bold line-clamp-2">{source.name}</h1>
+            <P className="w-full line-clamp-2">{source.name}</P>
             <Button
               className="items-center w-full gap-3 font-bold capitalize rounded-full"
               variant="success"
diff --git a/src/components/data-table/pagination.tsx b/src/components/data-table/pagination.tsx
index d79d0fe..f13e3fe 100644
--- a/src/components/data-table/pagination.tsx
+++ b/src/components/data-table/pagination.tsx
@@ -14,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { TypographySmall } from "../typography/small";
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
@@ -30,7 +31,9 @@ export function DataTablePagination<TData>({
       </div>
       <div className="flex items-center space-x-6 lg:space-x-8">
         <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium">Rows per page</p>
+          <TypographySmall className="font-medium">
+            Rows per page
+          </TypographySmall>
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value) => {
@@ -56,39 +59,39 @@ export function DataTablePagination<TData>({
         <div className="flex items-center space-x-2">
           <Button
             variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
+            className="hidden w-8 h-8 p-0 lg:flex"
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to first page</span>
-            <DoubleArrowLeftIcon className="h-4 w-4" />
+            <DoubleArrowLeftIcon className="w-4 h-4" />
           </Button>
           <Button
             variant="outline"
-            className="h-8 w-8 p-0"
+            className="w-8 h-8 p-0"
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="h-4 w-4" />
+            <ChevronLeftIcon className="w-4 h-4" />
           </Button>
           <Button
             variant="outline"
-            className="h-8 w-8 p-0"
+            className="w-8 h-8 p-0"
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="h-4 w-4" />
+            <ChevronRightIcon className="w-4 h-4" />
           </Button>
           <Button
             variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
+            className="hidden w-8 h-8 p-0 lg:flex"
             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to last page</span>
-            <DoubleArrowRightIcon className="h-4 w-4" />
+            <DoubleArrowRightIcon className="w-4 h-4" />
           </Button>
         </div>
       </div>
diff --git a/src/components/errorComponent/index.tsx b/src/components/errorComponent/index.tsx
index 4220f6d..32669a8 100644
--- a/src/components/errorComponent/index.tsx
+++ b/src/components/errorComponent/index.tsx
@@ -1,6 +1,8 @@
 import { useSettings } from "@/hooks";
 import { cn, shouldHideTitleBar } from "@/lib";
 import { ErrorComponentProps, Link } from "@tanstack/react-router";
+import { H1 } from "../typography/h1";
+import { H2 } from "../typography/h2";
 import { Button, buttonVariants } from "../ui/button";
 import { ScrollArea } from "../ui/scroll-area";
 
@@ -17,8 +19,8 @@ const ErrorComponent = (props: ErrorComponentProps) => {
       )}
     >
       <div className="flex flex-col items-start justify-center w-full gap-0.5">
-        <h1 className="text-3xl font-bold">{props.error.name}</h1>
-        <h2 className="text-lg text-muted-foreground">{props.error.message}</h2>
+        <H1>{props.error.name}</H1>
+        <H2 className="text-muted-foreground">{props.error.message}</H2>
       </div>
       <div className="flex-1 w-full p-1 overflow-hidden">
         <ScrollArea
@@ -36,9 +38,7 @@ const ErrorComponent = (props: ErrorComponentProps) => {
           <Link to="/" className={buttonVariants()}>
             Go to Home
           </Link>
-          <h1 className="text-xl font-bold">
-            Report This Error to the Developer
-          </h1>
+          <H1>Report This Error to the Developer</H1>
           <Button onClick={props.reset} variant={"destructive"}>
             Try Again
           </Button>
diff --git a/src/components/info/media/index.tsx b/src/components/info/media/index.tsx
index 66a98fa..568ac18 100644
--- a/src/components/info/media/index.tsx
+++ b/src/components/info/media/index.tsx
@@ -2,6 +2,7 @@ import { useLanguageContext } from "@/contexts/I18N";
 import { IGDBReturnDataType } from "@/lib/api/igdb/types";
 import MediaScreenshots from "./screenshots";
 import MediaTrailer from "./trailer";
+import { H1 } from "@/components/typography/h1";
 
 const GameMedia = (props: IGDBReturnDataType) => {
   const { t } = useLanguageContext();
@@ -9,7 +10,7 @@ const GameMedia = (props: IGDBReturnDataType) => {
 
   return (
     <div>
-      <h1 className="pb-4 text-xl font-medium">{t("media")}</h1>
+      <H1 className="pb-4">{t("media")}</H1>
 
       <MediaTrailer videos={videos} />
 
diff --git a/src/components/info/similar/index.tsx b/src/components/info/similar/index.tsx
index ece2769..e96d6d4 100644
--- a/src/components/info/similar/index.tsx
+++ b/src/components/info/similar/index.tsx
@@ -1,5 +1,6 @@
 import DefaultCard from "@/components/cards/defaultCard";
 import CarouselButton from "@/components/carouselButton";
+import { H2 } from "@/components/typography/h2";
 import {
   Carousel,
   CarouselContent,
@@ -30,9 +31,7 @@ const SimilarGames = ({ data }: SimilarGamesProps) => {
         className="w-full"
       >
         <div className="flex justify-between mb-2">
-          <h1 className="text-xl font-medium capitalize">
-            {t("you_may_also_like")}
-          </h1>
+          <H2>{t("you_may_also_like")}</H2>
           <div>
             <CarouselButton direction="left" />
             <CarouselButton direction="right" />
diff --git a/src/components/info/sources/index.tsx b/src/components/info/sources/index.tsx
index 0c4ce8a..8716df9 100644
--- a/src/components/info/sources/index.tsx
+++ b/src/components/info/sources/index.tsx
@@ -4,6 +4,8 @@ import {
   ItemDownload,
   SourceProvider,
 } from "@/@types";
+import { P } from "@/components/typography/p";
+import { TypographySmall } from "@/components/typography/small";
 import { Button } from "@/components/ui/button";
 import {
   Carousel,
@@ -87,9 +89,7 @@ const Sources = ({
 
   return (
     <div className="flex flex-col w-full gap-1">
-      <h1 className="text-sm font-medium text-secondary-foreground">
-        {t("sources")}
-      </h1>
+      <TypographySmall>{t("sources")}</TypographySmall>
 
       <div className="flex flex-col gap-2">
         <Carousel
@@ -118,7 +118,7 @@ const Sources = ({
         </Carousel>
 
         {isError ? (
-          <p className="text-red-500">{t("error_loading_sources")}</p>
+          <P className="text-red-500">{t("error_loading_sources")}</P>
         ) : filteredSources?.length ? (
           <Carousel
             opts={{
@@ -134,7 +134,7 @@ const Sources = ({
         ) : (
           <div className="flex items-center justify-start gap-2.5 mt-2 font-bold text-sm">
             <X className="size-7" />
-            <p>{t("no_sources_found")}</p>
+            <P>{t("no_sources_found")}</P>
           </div>
         )}
       </div>
diff --git a/src/components/info/specs/index.tsx b/src/components/info/specs/index.tsx
index 0e69b62..f34341c 100644
--- a/src/components/info/specs/index.tsx
+++ b/src/components/info/specs/index.tsx
@@ -1,4 +1,5 @@
 import RequirementsRow from "@/components/info/specs/row";
+import { H5 } from "@/components/typography/h5";
 import { useLanguageContext } from "@/contexts/I18N";
 import { PcRequirements } from "@/lib/api/igdb/types";
 import { useMemo } from "react";
@@ -26,9 +27,7 @@ const PcSpecs = ({ minimum, recommended }: PcSpecsProps) => {
 
   return (
     <div className="grid gap-4">
-      <h3 className="text-lg font-bold leading-6">
-        {t("system_requirements")}
-      </h3>
+      <H5>{t("system_requirements")}</H5>
       <div className="flex gap-4 flex-2">
         {items.map((item) => (
           <RequirementsRow
diff --git a/src/components/info/specs/row.tsx b/src/components/info/specs/row.tsx
index bc756d6..518ff5d 100644
--- a/src/components/info/specs/row.tsx
+++ b/src/components/info/specs/row.tsx
@@ -1,4 +1,7 @@
 import { Data } from "@/components/info/specs";
+import { H4 } from "@/components/typography/h4";
+import { TypographyMuted } from "@/components/typography/muted";
+import { TypographySmall } from "@/components/typography/small";
 import { useLanguageContext } from "@/contexts/I18N";
 import { scrapeOptions } from "@/lib";
 import { useMemo } from "react";
@@ -16,14 +19,12 @@ const RequirementsRow = ({ type, data }: RequirementsRowProps) => {
 
   return (
     <div className="flex flex-col flex-shrink-0 w-full gap-2 p-4 overflow-hidden rounded-2xl bg-background">
-      <h3 className="p-4 pt-1 pb-2 text-lg font-bold leading-6 capitalize">
-        {t(type?.toLowerCase())}
-      </h3>
+      <H4 className="p-4 pt-1 pb-2 capitalize">{t(type?.toLowerCase())}</H4>
 
       {Object.entries(specs).map(([key, value]) => (
         <div className="flex flex-col justify-between gap-1 p-4 py-1" key={key}>
-          <span className="text-xs font-medium text-slate-400">{key}</span>
-          <span className="mr-1 text-sm">{value[0]}</span>
+          <TypographyMuted>{key}</TypographyMuted>
+          <TypographySmall className="mr-1">{value[0]}</TypographySmall>
         </div>
       ))}
     </div>
diff --git a/src/components/info/tabs/about.tsx b/src/components/info/tabs/about.tsx
index 3a74ddf..ccf3808 100644
--- a/src/components/info/tabs/about.tsx
+++ b/src/components/info/tabs/about.tsx
@@ -1,5 +1,7 @@
 import { InfoItadProps, InfoProps } from "@/@types";
 import Stars from "@/components/starts";
+import { TypographyMuted } from "@/components/typography/muted";
+import { TypographySmall } from "@/components/typography/small";
 import { useLanguageContext } from "@/contexts/I18N";
 import { IGDBReturnDataType, ReleaseDate } from "@/lib/api/igdb/types";
 import { format } from "date-fns";
@@ -50,55 +52,57 @@ const InfoAboutTab = ({
       ? developer?.company?.name.toLowerCase() ===
         publisher?.company?.name?.toLowerCase()
       : false;
+
   return (
     <>
       <div className="flex flex-col flex-shrink-0 w-full gap-2 p-4 overflow-hidden h-52 rounded-2xl bg-background">
         <div className="flex items-center justify-between h-10 overflow-hidden">
-          <div className="flex items-center gap-2 p-2.5 text-sm rounded-full bg-secondary/20 font-semibold flex-shrink-0 flex-grow-0">
+          <TypographySmall className="flex items-center gap-2 p-2.5 rounded-full bg-secondary/20 font-semibold flex-shrink-0 flex-grow-0">
             <Lightbulb fill="currentColor" size={15} />
             {t("about_this_game")}
-          </div>
+          </TypographySmall>
 
           <div className="flex items-center justify-end flex-1 gap-7">
             {!!isReleased && (data?.aggregated_rating ?? 0) > 0 && (
-              <div className="flex items-center gap-2 p-2.5 text-sm rounded-full bg-secondary/20 font-semibold">
+              <TypographySmall className="flex items-center gap-2 p-2.5 rounded-full bg-secondary/20 font-semibold">
                 <Stars stars={(data?.aggregated_rating ?? 0) / 10} />
-              </div>
+              </TypographySmall>
             )}
 
-            <div className="flex items-center gap-2 p-2.5  text-sm rounded-full bg-secondary/20 font-semibold">
+            <TypographySmall className="flex items-center gap-2 p-2.5 rounded-full bg-secondary/20 font-semibold">
               {!isReleased
                 ? t("not_released")
                 : !releaseDate?.date
                   ? "N/A"
                   : format(releaseDate.date * 1000, "MMM d, yyyy")}
-            </div>
+            </TypographySmall>
           </div>
         </div>
 
         <div className="flex items-start justify-between gap-2">
           <div className="flex items-center gap-1.5">
             {isSameDevAndPublisherSame ? (
-              <div
+              <TypographySmall
                 key={publisher?.company?.id}
-                className="flex items-center gap-2 p-2.5 text-sm rounded-full bg-secondary/20 font-semibold truncate"
+                className="flex items-center gap-2 p-2.5 rounded-full bg-secondary/20 font-semibold truncate"
               >
                 {developer?.company?.name ?? "N/A"}
-              </div>
+              </TypographySmall>
             ) : (
               <>
-                <div
+                <TypographySmall
                   key={publisher?.company?.id}
-                  className="flex items-center gap-2 p-2.5 text-sm rounded-full bg-secondary/20 font-semibold truncate"
+                  className="flex items-center gap-2 p-2.5 rounded-full bg-secondary/20 font-semibold truncate"
                 >
                   {publisher?.company?.name ?? "N/A"}
-                </div>
-                <div
+                </TypographySmall>
+
+                <TypographySmall
                   key={developer?.company?.id}
-                  className="flex items-center gap-2 p-2.5 text-sm rounded-full bg-secondary/20 font-semibold truncate"
+                  className="flex items-center gap-2 p-2.5 rounded-full bg-secondary/20 font-semibold truncate"
                 >
                   {developer?.company?.name ?? "N/A"}
-                </div>
+                </TypographySmall>
               </>
             )}
           </div>
@@ -106,20 +110,20 @@ const InfoAboutTab = ({
           {!!genres && (
             <div className="flex items-center gap-1.5">
               {genres.map((genre) => (
-                <div
+                <TypographySmall
                   key={genre?.slug}
-                  className="flex items-center gap-2 p-2.5 text-sm rounded-full bg-secondary/20 font-semibold truncate"
+                  className="flex items-center gap-2 p-2.5 rounded-full bg-secondary/20 font-semibold truncate"
                 >
                   {genre?.name}
-                </div>
+                </TypographySmall>
               ))}
             </div>
           )}
         </div>
 
-        <p className="-mt-1 text-sm text-muted-foreground text-pretty line-clamp-4">
+        <TypographyMuted className="-mt-1 text-pretty line-clamp-4">
           {data?.storyline ?? data?.summary ?? ""}
-        </p>
+        </TypographyMuted>
       </div>
 
       {!!isReleased && !isPending && !!data && (
diff --git a/src/components/info/topbar/title.tsx b/src/components/info/topbar/title.tsx
index 2074171..a9a9b44 100644
--- a/src/components/info/topbar/title.tsx
+++ b/src/components/info/topbar/title.tsx
@@ -1,7 +1,7 @@
+import { H3 } from "@/components/typography/h3";
+
 interface TitleProps {
   text: string;
 }
 
-export const Title = ({ text }: TitleProps) => (
-  <h1 className="font-bold leading-tight truncate">{text}</h1>
-);
+export const Title = ({ text }: TitleProps) => <H3>{text}</H3>;
diff --git a/src/components/titleBar/index.tsx b/src/components/titleBar/index.tsx
index 023e9fb..85a7b95 100644
--- a/src/components/titleBar/index.tsx
+++ b/src/components/titleBar/index.tsx
@@ -1,5 +1,6 @@
 import { useLanguageContext } from "@/contexts/I18N";
 import { useSettings } from "@/hooks";
+import { H4 } from "../typography/h4";
 import TitleBarIcons from "./icons";
 import TitleBarTrafficLights from "./traffic-lights";
 
@@ -17,9 +18,7 @@ const TitleBar = () => {
       <div className="flex flex-row items-center justify-between w-full">
         {/* Title */}
         <div id="titlebar" className="flex items-center flex-1 h-full pl-3">
-          <h1 className="text-lg font-semibold select-none text-foreground">
-            {t("falkor")}
-          </h1>
+          <H4>{t("falkor")}</H4>
         </div>
         <div className="flex gap-1 pr-3">
           {titleBarStyle === "icons" ? (
diff --git a/src/components/typography/h4.tsx b/src/components/typography/h4.tsx
new file mode 100644
index 0000000..426d3ca
--- /dev/null
+++ b/src/components/typography/h4.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@/lib";
+import { type HTMLAttributes } from "react";
+
+interface Props extends HTMLAttributes<HTMLHeadingElement> {}
+
+export const H4 = ({ children, className, ...props }: Props) => {
+  return (
+    <h4
+      className={cn(
+        "scroll-m-20 text-xl font-semibold tracking-tight font-nunito",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h4>
+  );
+};
diff --git a/src/components/typography/h5.tsx b/src/components/typography/h5.tsx
new file mode 100644
index 0000000..8a375ac
--- /dev/null
+++ b/src/components/typography/h5.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@/lib";
+import { type HTMLAttributes } from "react";
+
+interface Props extends HTMLAttributes<HTMLHeadingElement> {}
+
+export const H5 = ({ children, className, ...props }: Props) => {
+  return (
+    <h5
+      className={cn(
+        "scroll-m-20 text-lg font-semibold tracking-tight font-nunito",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h5>
+  );
+};
diff --git a/src/components/typography/muted.tsx b/src/components/typography/muted.tsx
new file mode 100644
index 0000000..871feb6
--- /dev/null
+++ b/src/components/typography/muted.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib";
+import { HTMLAttributes } from "react";
+
+interface Props extends HTMLAttributes<HTMLParagraphElement> {}
+
+export const TypographyMuted = ({ children, className, ...props }: Props) => {
+  return (
+    <p
+      className={cn("text-sm text-muted-foreground font-nunito", className)}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+};
diff --git a/src/features/achievements/components/cards/achievement.tsx b/src/features/achievements/components/cards/achievement.tsx
index 50ef991..74cd482 100644
--- a/src/features/achievements/components/cards/achievement.tsx
+++ b/src/features/achievements/components/cards/achievement.tsx
@@ -1,4 +1,6 @@
 import { ISchemaForGameAchievement } from "@/@types";
+import { TypographyMuted } from "@/components/typography/muted";
+import { TypographySmall } from "@/components/typography/small";
 import { cn } from "@/lib";
 
 interface Props extends ISchemaForGameAchievement {
@@ -22,17 +24,17 @@ export const AchievementCard = ({
       />
 
       <div className="flex flex-col gap-0.5">
-        <h2
-          className={cn("flex text-sm font-medium truncate", {
+        <TypographySmall
+          className={cn("flex font-medium truncate", {
             "text-muted-foreground": !unlocked,
           })}
         >
           {displayName}
-        </h2>
+        </TypographySmall>
         {description && (
-          <p className="text-xs text-muted-foreground line-clamp-2">
+          <TypographyMuted className="text-xs line-clamp-2">
             {description}
-          </p>
+          </TypographyMuted>
         )}
       </div>
     </div>
diff --git a/src/features/achievements/components/container.tsx b/src/features/achievements/components/container.tsx
index d5d5675..d1bb077 100644
--- a/src/features/achievements/components/container.tsx
+++ b/src/features/achievements/components/container.tsx
@@ -1,4 +1,6 @@
 import CarouselButton from "@/components/carouselButton";
+import { H2 } from "@/components/typography/h2";
+import { TypographyMuted } from "@/components/typography/muted";
 import {
   Carousel,
   CarouselContent,
@@ -52,12 +54,12 @@ const AchievementContainer = ({ steamId, gameId }: Props) => {
     >
       <div className="flex flex-col gap-1 mb-4">
         <div className="flex justify-between">
-          <h1 className="flex items-end gap-2 text-xl font-medium capitalize">
-            {t("achievements")}
-            <p className="text-sm text-muted-foreground">
+          <div className="flex items-end gap-3">
+            <H2 className="capitalize">{t("achievements")}</H2>
+            <TypographyMuted>
               {unlocked?.length}/{data.length}
-            </p>
-          </h1>
+            </TypographyMuted>
+          </div>
           <div>
             <CarouselButton direction="left" />
             <CarouselButton direction="right" />
diff --git a/src/features/downloads/components/cards/download/percentBar.tsx b/src/features/downloads/components/cards/download/percentBar.tsx
index 28c8c2f..a6dcd53 100644
--- a/src/features/downloads/components/cards/download/percentBar.tsx
+++ b/src/features/downloads/components/cards/download/percentBar.tsx
@@ -1,3 +1,4 @@
+import { TypographyMuted } from "@/components/typography/muted";
 import useDownloadTime from "@/features/downloads/hooks/useDownloadTime";
 import { useMemo } from "react";
 
@@ -19,14 +20,14 @@ const PercentBar = ({ percent, timeRemaning }: Props) => {
     <div className="flex flex-col gap-1.5">
       <div className="flex flex-row justify-between w-full">
         {!!estimatedTime && (
-          <div className="text-sm text-muted-foreground font-semibold">
+          <TypographyMuted className="font-semibold">
             <span>ETA:</span>
             <span className="ml-1">{estimatedTime}</span>
-          </div>
+          </TypographyMuted>
         )}
-        <p className="text-sm text-muted-foreground font-semibold">
+        <TypographyMuted className="font-semibold">
           {percent.toFixed(2)}%
-        </p>
+        </TypographyMuted>
       </div>
       <div className="inset-x-0 bottom-0 z-[3] w-full h-1 bg-primary/20 overflow-hidden relative rounded-full">
         <div
diff --git a/src/features/downloads/components/cards/download/stat.tsx b/src/features/downloads/components/cards/download/stat.tsx
index 5a76df5..fe3883c 100644
--- a/src/features/downloads/components/cards/download/stat.tsx
+++ b/src/features/downloads/components/cards/download/stat.tsx
@@ -1,3 +1,6 @@
+import { H3 } from "@/components/typography/h3";
+import { TypographyMuted } from "@/components/typography/muted";
+
 interface Props {
   title: string;
   text: string;
@@ -6,10 +9,10 @@ interface Props {
 const DownloadCardStat = ({ text, title }: Props) => {
   return (
     <div className="flex flex-col gap-0.5">
-      <h1 className="font-bold text-foreground">{text}</h1>
-      <p className="text-muted-foreground text-xs uppercase font-semibold">
+      <H3 className="font-bold text-foreground">{text}</H3>
+      <TypographyMuted className="font-semibold uppercase">
         {title}
-      </p>
+      </TypographyMuted>
     </div>
   );
 };
diff --git a/src/features/downloads/components/cards/download/title.tsx b/src/features/downloads/components/cards/download/title.tsx
index cfd5624..97a5c67 100644
--- a/src/features/downloads/components/cards/download/title.tsx
+++ b/src/features/downloads/components/cards/download/title.tsx
@@ -1,9 +1,11 @@
+import { H4 } from "@/components/typography/h4";
+
 interface Props {
   title: string;
 }
 
 const DownloadCardTitle = ({ title }: Props) => {
-  return <h1 className="text-xl font-bold text-foreground">{title}</h1>;
+  return <H4 className="text-xl font-bold text-foreground">{title}</H4>;
 };
 
 export default DownloadCardTitle;
diff --git a/src/features/downloads/components/cards/loading.tsx b/src/features/downloads/components/cards/loading.tsx
index 1575611..2a28c7c 100644
--- a/src/features/downloads/components/cards/loading.tsx
+++ b/src/features/downloads/components/cards/loading.tsx
@@ -1,7 +1,7 @@
+import { H3 } from "@/components/typography/h3";
+
 export const DownloadCardLoading = () => (
-  <div className="w-full h-60 flex justify-center items-center bg-primary/5">
-    <h1 className="text-xl font-bold text-foreground">
-      Download is loading, please wait...
-    </h1>
+  <div className="flex items-center justify-center w-full h-60 bg-primary/5">
+    <H3 className="text-foreground">Download is loading, please wait...</H3>
   </div>
 );
diff --git a/src/features/library/components/cards/continuePlaying/ContinuePlayingCardOverlay/index.tsx b/src/features/library/components/cards/continuePlaying/ContinuePlayingCardOverlay/index.tsx
index 1107e23..5b32f70 100644
--- a/src/features/library/components/cards/continuePlaying/ContinuePlayingCardOverlay/index.tsx
+++ b/src/features/library/components/cards/continuePlaying/ContinuePlayingCardOverlay/index.tsx
@@ -1,4 +1,6 @@
 import { LibraryGame, LibraryGameUpdate } from "@/@types/library/types";
+import { P } from "@/components/typography/p";
+import { TypographySmall } from "@/components/typography/small";
 import { useLanguageContext } from "@/contexts/I18N";
 import { cn, timeSince } from "@/lib";
 import Playtime from "../../../playtime";
@@ -47,24 +49,24 @@ const ContinuePlayingCardOverlay = ({
           />
         </div>
 
-        <h3
+        <TypographySmall
           className={cn(
-            "text-sm transition-all opacity-0 text-secondary-foreground/80 group-hover:opacity-100",
+            "transition-all opacity-0 text-secondary-foreground/80 group-hover:opacity-100",
             {
               "opacity-100": isPlaying,
             }
           )}
         >
           {isPlaying ? t("stop_playing") : t("continue_playing")}
-        </h3>
-        <h2 className="-mt-1 text-lg font-bold text-white capitalize line-clamp-1">
+        </TypographySmall>
+        <P className="-mt-1 font-bold text-white capitalize line-clamp-1">
           {game.game_name}
-        </h2>
+        </P>
         {!!game?.game_last_played && (
           <div className="flex items-center gap-1">
-            <h3 className="text-sm capitalize text-secondary-foreground/80">
+            <TypographySmall className="capitalize text-secondary-foreground/80">
               {timeSince(Number(game.game_last_played))}
-            </h3>
+            </TypographySmall>
           </div>
         )}
       </div>
diff --git a/src/features/lists/components/container/listContainer.tsx b/src/features/lists/components/container/listContainer.tsx
index ffdee1c..df50627 100644
--- a/src/features/lists/components/container/listContainer.tsx
+++ b/src/features/lists/components/container/listContainer.tsx
@@ -1,4 +1,5 @@
 import ListCard from "@/components/cards/listCard";
+import { P } from "@/components/typography/p";
 import { Button } from "@/components/ui/button";
 import {
   Carousel,
@@ -33,9 +34,7 @@ const ListContainer = ({ list_id, list_name }: ListContainerProps) => {
   return (
     <div className="group/list">
       <div className="flex items-center justify-between transition-all">
-        <h3 className="pb-2 font-mono text-lg font-medium leading-6 capitalize truncate">
-          {list_name}
-        </h3>
+        <P className="pb-2 capitalize truncate">{list_name}</P>
 
         {/* Action Bar */}
         <div className="flex items-center justify-end w-2/6 gap-2 transition-all opacity-0 group-hover/list:opacity-100 group-focus-within/list:opacity-100">
@@ -81,9 +80,7 @@ const ListContainer = ({ list_id, list_name }: ListContainerProps) => {
         </Carousel>
       ) : (
         <div className="flex items-start justify-start">
-          <h3 className="mt-1 text-lg text-center">
-            No games found in this list.
-          </h3>
+          <P className="mt-1 text-center">No games found in this list.</P>
         </div>
       )}
     </div>
diff --git a/src/features/settings/components/section.tsx b/src/features/settings/components/section.tsx
index 8724d7a..c422212 100644
--- a/src/features/settings/components/section.tsx
+++ b/src/features/settings/components/section.tsx
@@ -1,3 +1,5 @@
+import { H3 } from "@/components/typography/h3";
+import { TypographyMuted } from "@/components/typography/muted";
 import { useLanguageContext } from "@/contexts/I18N";
 import { cn } from "@/lib";
 import { PropsWithChildren } from "react";
@@ -19,14 +21,14 @@ export const SettingsSection = ({
       {(title || description) && (
         <div className={cn("flex flex-col mb-4")}>
           {title && (
-            <h2 className="text-xl font-semibold">
+            <H3>
               <span>{t("settings.settings." + title)}</span>
-            </h2>
+            </H3>
           )}
           {description && (
-            <p className="text-sm text-muted-foreground">
+            <TypographyMuted>
               {t("settings.settings." + description)}
-            </p>
+            </TypographyMuted>
           )}
         </div>
       )}
diff --git a/src/features/settings/components/sidebar.tsx b/src/features/settings/components/sidebar.tsx
index 29013f0..61c2590 100644
--- a/src/features/settings/components/sidebar.tsx
+++ b/src/features/settings/components/sidebar.tsx
@@ -1,4 +1,7 @@
 import { AppInfo, LinkItemType } from "@/@types";
+import { H3 } from "@/components/typography/h3";
+import { TypographyMuted } from "@/components/typography/muted";
+import { P } from "@/components/typography/p";
 import { Button } from "@/components/ui/button";
 import { useLanguageContext } from "@/contexts/I18N";
 import { useSettings } from "@/hooks";
@@ -64,16 +67,14 @@ const SettingsSidebar = ({
       )}
     >
       <div className="p-4">
-        <h1 className="text-lg font-bold md:text-xl">
-          {t("sections.settings")}
-        </h1>
+        <H3>{t("sections.settings")}</H3>
       </div>
       <nav className="flex-1 space-y-2 md:space-y-3">{settingsTabs}</nav>
       <div className="flex flex-col gap-2 p-3 px-4 mt-auto">
         {!isPending && !isError && (
           <div className="flex flex-col gap-0.5">
             <div className="flex items-center gap-3">
-              <h1 className="text-lg font-bold capitalize">{t("falkor")}</h1>
+              <P className="font-bold capitalize">{t("falkor")}</P>
               {updateAvailable && (
                 <Button
                   variant={"ghost"}
@@ -85,9 +86,9 @@ const SettingsSidebar = ({
                 </Button>
               )}
             </div>
-            <span className="text-sm text-muted-foreground">
+            <TypographyMuted>
               {t("version")}: {data?.app_version}
-            </span>
+            </TypographyMuted>
           </div>
         )}
         <div className="flex justify-between">
diff --git a/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/error.tsx b/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/error.tsx
index 4e4f393..baff098 100644
--- a/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/error.tsx
+++ b/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/error.tsx
@@ -2,6 +2,7 @@ import { LogEntry } from "@/@types/logs";
 import { Ban } from "lucide-react";
 import { JSX } from "react";
 import { BaseLog } from "./base";
+import { TypographyMuted } from "@/components/typography/muted";
 
 interface ConsoleErrorDisplayProps {
   customIcon?: JSX.Element;
@@ -18,7 +19,7 @@ const ConsoleErrorDisplay = ({
   return (
     <BaseLog timestamp={timestamp}>
       <div className="text-red-400">{customIcon ? customIcon : <Ban />}</div>
-      <p className="text-sm text-muted-foreground">{description}</p>
+      <TypographyMuted>{description}</TypographyMuted>
     </BaseLog>
   );
 };
diff --git a/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/info.tsx b/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/info.tsx
index 4270a80..51c4cab 100644
--- a/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/info.tsx
+++ b/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/info.tsx
@@ -2,6 +2,7 @@ import { LogEntry } from "@/@types/logs";
 import { Info } from "lucide-react";
 import { JSX } from "react";
 import { BaseLog } from "./base";
+import { TypographyMuted } from "@/components/typography/muted";
 
 interface ConsoleInfoDisplayProps {
   customIcon?: JSX.Element;
@@ -20,7 +21,7 @@ const ConsoleInfoDisplay = ({
       <div className="text-orange-400">
         {customIcon ? customIcon : <Info />}
       </div>
-      <p className="text-sm text-muted-foreground">{description}</p>
+      <TypographyMuted>{description}</TypographyMuted>
     </BaseLog>
   );
 };
diff --git a/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/warn.tsx b/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/warn.tsx
index 7acd6b0..bf9cfc8 100644
--- a/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/warn.tsx
+++ b/src/features/settings/components/tabs/developer/settings/logDisplay/logTypes/warn.tsx
@@ -2,6 +2,7 @@ import { LogEntry } from "@/@types/logs";
 import { CircleAlert } from "lucide-react";
 import { JSX } from "react";
 import { BaseLog } from "./base";
+import { TypographyMuted } from "@/components/typography/muted";
 
 interface ConsoleWarningDisplayProps {
   customIcon?: JSX.Element;
@@ -20,7 +21,7 @@ const ConsoleWarningDisplay = ({
       <div className="text-yellow-400">
         {customIcon ? customIcon : <CircleAlert />}
       </div>
-      <p className="text-sm text-muted-foreground">{description}</p>
+      <TypographyMuted>{description}</TypographyMuted>
     </BaseLog>
   );
 };
diff --git a/src/features/settings/components/title.tsx b/src/features/settings/components/title.tsx
index 38b0e16..c3b094a 100644
--- a/src/features/settings/components/title.tsx
+++ b/src/features/settings/components/title.tsx
@@ -1,3 +1,4 @@
+import { H3 } from "@/components/typography/h3";
 import { cn } from "@/lib";
 import { HTMLAttributes } from "react";
 
@@ -8,7 +9,7 @@ interface SettingTitleProps extends HTMLAttributes<HTMLDivElement> {
 const SettingTitle = ({ children, className, ...props }: SettingTitleProps) => {
   return (
     <div className={cn("p-7 pb-5", className)} {...props}>
-      <h1 className="text-xl font-bold">{children}</h1>
+      <H3>{children}</H3>
     </div>
   );
 };
diff --git a/src/features/updater/components/updater.tsx b/src/features/updater/components/updater.tsx
index 7c35b92..ce20c89 100644
--- a/src/features/updater/components/updater.tsx
+++ b/src/features/updater/components/updater.tsx
@@ -1,4 +1,6 @@
 import { AppInfo } from "@/@types";
+import { H5 } from "@/components/typography/h5";
+import { TypographyMuted } from "@/components/typography/muted";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -80,34 +82,30 @@ const Updater = () => {
         <div className="flex flex-col">
           {appInfo && !isPending && !isError && appInfo.app_version && (
             <div className="flex flex-row items-end gap-2">
-              <p className="text-sm text-muted-foreground min-w-28">
+              <TypographyMuted className="min-w-28">
                 {t("current_version")}:
-              </p>
-              <h2 className="text-lg font-bold capitalize">
-                {appInfo.app_version}
-              </h2>
+              </TypographyMuted>
+              <H5 className="font-bold capitalize">{appInfo.app_version}</H5>
             </div>
           )}
 
           {updateInfo?.version && (
             <div className="flex flex-row items-end gap-2">
-              <p className="text-sm text-muted-foreground min-w-28">
+              <TypographyMuted className="min-w-28">
                 {t("new_version")}:
-              </p>
-              <h2 className="text-lg font-bold capitalize">
-                {updateInfo.version}
-              </h2>
+              </TypographyMuted>
+              <H5 className="font-bold capitalize">{updateInfo.version}</H5>
             </div>
           )}
 
           {updateInfo?.releaseDate && (
             <div className="flex flex-row items-end gap-2">
-              <p className="text-sm text-muted-foreground min-w-28">
+              <TypographyMuted className="min-w-28">
                 {t("release_date")}:
-              </p>
-              <h2 className="text-lg font-bold capitalize">
+              </TypographyMuted>
+              <H5 className="text-lg font-bold capitalize">
                 {formatWithOrdinal(new Date(updateInfo.releaseDate))}
-              </h2>
+              </H5>
             </div>
           )}
 
diff --git a/src/routes/downloads.lazy.tsx b/src/routes/downloads.lazy.tsx
index 25536c6..e88198d 100644
--- a/src/routes/downloads.lazy.tsx
+++ b/src/routes/downloads.lazy.tsx
@@ -1,6 +1,7 @@
 import { DownloadData, QueueData } from "@/@types";
 import { ITorrent } from "@/@types/torrent";
 import FolderButton from "@/components/folderButton";
+import { H4 } from "@/components/typography/h4";
 import { useLanguageContext } from "@/contexts/I18N";
 import DownloadCard from "@/features/downloads/components/cards/download";
 import { DownloadCardLoading } from "@/features/downloads/components/cards/loading";
@@ -114,9 +115,7 @@ function Downloads() {
       {/* ACTION BAR */}
       <div className="w-full flex justify-between flex-row bg-background/50 border-b mb-5 p-4 py-2.5">
         <div className="flex flex-row items-center gap-2">
-          <h1 className="text-xl font-bold text-foreground">
-            {t("sections.downloads")}
-          </h1>
+          <H4 className="text-foreground">{t("sections.downloads")}</H4>
         </div>
 
         <div>
@@ -130,9 +129,7 @@ function Downloads() {
         </div>
       ) : (
         <div className="flex items-center justify-center w-full h-60 bg-muted/50">
-          <h1 className="text-xl font-bold text-foreground">
-            {t("no_downloads_in_progress")}
-          </h1>
+          <H4 className="text-foreground">{t("no_downloads_in_progress")}</H4>
         </div>
       )}
     </div>