From 458e05ea60f0736cd6e9a7e33f81e6a4e8171ed2 Mon Sep 17 00:00:00 2001
From: lynx <141365347+iLynxcat@users.noreply.github.com>
Date: Fri, 27 Sep 2024 19:58:08 -0700
Subject: [PATCH] add new brand font font to some screens in the app IBM Plex
 Sans

---
 .../src/screens/settings/info/About.tsx       |   4 ++--
 .../Layout/Sidebar/DebugPopover.tsx           |   2 +-
 .../Sidebar/JobManager/JobContainer.tsx       |   4 +++-
 .../Layout/Sidebar/JobManager/index.tsx       |   6 +++--
 .../Sidebar/SidebarLayout/FeedbackPopover.tsx |   4 +++-
 .../Layout/Sidebar/SidebarLayout/Link.tsx     |   2 +-
 .../app/$libraryId/overview/FileKindStats.tsx |   8 +++----
 .../$libraryId/overview/Layout/Section.tsx    |   2 +-
 .../app/$libraryId/overview/LibraryStats.tsx  |   2 +-
 .../app/$libraryId/overview/StatCard.tsx      |  22 ++++++++----------
 .../app/$libraryId/overview/StorageBar.tsx    |   2 +-
 interface/app/$libraryId/settings/Layout.tsx  |   2 +-
 interface/app/$libraryId/settings/Setting.tsx |   2 +-
 interface/app/$libraryId/settings/Sidebar.tsx |   2 +-
 .../app/$libraryId/settings/client/usage.tsx  |   2 +-
 .../$libraryId/settings/resources/about.tsx   |   6 +++--
 .../settings/resources/changelog.tsx          |   5 +++-
 interface/app/onboarding/alpha.tsx            |   2 +-
 packages/assets/util/index.ts                 |   2 ++
 packages/ui/package.json                      |   1 +
 packages/ui/src/Button.tsx                    |   2 +-
 packages/ui/src/Input.tsx                     |   2 +-
 packages/ui/src/forms/FormField.tsx           |   2 +-
 packages/ui/style/index.js                    |   7 ++++++
 packages/ui/style/tailwind.js                 |   4 ++++
 pnpm-lock.yaml                                | Bin 1050063 -> 1051000 bytes
 26 files changed, 61 insertions(+), 38 deletions(-)

diff --git a/apps/mobile/src/screens/settings/info/About.tsx b/apps/mobile/src/screens/settings/info/About.tsx
index 80e0100e2..d37c78f47 100644
--- a/apps/mobile/src/screens/settings/info/About.tsx
+++ b/apps/mobile/src/screens/settings/info/About.tsx
@@ -77,7 +77,7 @@ const AboutScreen = () => {
 			</View>
 			<Divider />
 			<View style={tw`my-5`}>
-				<Text style={tw`mb-3 text-lg font-bold text-ink`}>Vision</Text>
+				<Text style={tw`mb-3 text-lg font-bold text-ink font-plex`}>Vision</Text>
 				<Text style={tw`w-full text-sm text-ink-faint`}>
 					Many of us have multiple cloud accounts, drives that aren’t backed up and data
 					at risk of loss. We depend on cloud services like Google Photos and iCloud, but
@@ -91,7 +91,7 @@ const AboutScreen = () => {
 			</View>
 			<Divider />
 			<View>
-				<Text style={tw`my-5 text-lg font-bold text-ink`}>
+				<Text style={tw`my-5 text-lg font-bold text-ink font-plex`}>
 					Meet the contributors behind Spacedrive
 				</Text>
 				{/* TODO: Temporary image url approach until a solution is reached */}
diff --git a/interface/app/$libraryId/Layout/Sidebar/DebugPopover.tsx b/interface/app/$libraryId/Layout/Sidebar/DebugPopover.tsx
index 7af5e0ac7..a84cb489b 100644
--- a/interface/app/$libraryId/Layout/Sidebar/DebugPopover.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/DebugPopover.tsx
@@ -56,7 +56,7 @@ export default () => {
 			popover={{ ...popover, setOpen: handleOpenChange }}
 			className="z-[100] p-4 focus:outline-none"
 			trigger={
-				<h1 className="ml-1 w-full text-[7pt] text-sidebar-inkFaint/50">
+				<h1 className="ml-1 w-full font-plex text-[7pt] tracking-widest text-sidebar-inkFaint/50">
 					v{buildInfo.data?.version || '-.-.-'} - {buildInfo.data?.commit || 'dev'}
 				</h1>
 			}
diff --git a/interface/app/$libraryId/Layout/Sidebar/JobManager/JobContainer.tsx b/interface/app/$libraryId/Layout/Sidebar/JobManager/JobContainer.tsx
index 358482170..b151c6bcd 100644
--- a/interface/app/$libraryId/Layout/Sidebar/JobManager/JobContainer.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/JobManager/JobContainer.tsx
@@ -106,7 +106,9 @@ const JobContainer = forwardRef<HTMLLIElement, JobContainerProps>((props, ref) =
 					position="top"
 					label={name}
 				>
-					<p className="w-fit max-w-[83%] truncate pl-1.5 font-semibold">{name}</p>
+					<p className="w-fit max-w-[83%] truncate pl-1.5 font-plex font-semibold tracking-normal">
+						{name}
+					</p>
 				</Tooltip>
 				{textItems?.map((item, index) => {
 					const filteredItems = item.filter((i) => i?.text);
diff --git a/interface/app/$libraryId/Layout/Sidebar/JobManager/index.tsx b/interface/app/$libraryId/Layout/Sidebar/JobManager/index.tsx
index 837dd0228..84f3deb39 100644
--- a/interface/app/$libraryId/Layout/Sidebar/JobManager/index.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/JobManager/index.tsx
@@ -121,7 +121,9 @@ export function JobManager() {
 						</Button>
 					</Tooltip>
 				)}
-				<span className="ml-1 font-medium">{t('recent_jobs')}</span>
+				<span className="ml-1 font-plex font-semibold tracking-wide">
+					{t('recent_jobs')}
+				</span>
 				<div className="grow" />
 				{toggleConfirmation ? (
 					<div className="flex h-[85%] w-fit items-center justify-center gap-2 rounded-md border border-app-line bg-app/40 px-2">
@@ -165,7 +167,7 @@ export function JobManager() {
 				<div className="h-full border-r border-app-line/50">
 					{jobGroups.data &&
 						(jobGroups.data.length === 0 ? (
-							<div className="flex h-32 items-center justify-center text-sidebar-inkDull">
+							<div className="flex h-32 items-center justify-center font-plex text-sidebar-inkDull">
 								{t('no_jobs')}
 							</div>
 						) : (
diff --git a/interface/app/$libraryId/Layout/Sidebar/SidebarLayout/FeedbackPopover.tsx b/interface/app/$libraryId/Layout/Sidebar/SidebarLayout/FeedbackPopover.tsx
index 7efa13eef..04da335ce 100644
--- a/interface/app/$libraryId/Layout/Sidebar/SidebarLayout/FeedbackPopover.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/SidebarLayout/FeedbackPopover.tsx
@@ -53,7 +53,9 @@ export function FeedbackPopover() {
 			popover={{ ...popover, setOpen: handleOpenChange }}
 			trigger={
 				<Button variant="outline" className="flex items-center gap-1">
-					<p className="text-[11px] font-normal text-sidebar-inkFaint">{t('feedback')}</p>
+					<p className="font-plex text-xs font-normal text-sidebar-inkFaint">
+						{t('feedback')}
+					</p>
 				</Button>
 			}
 			className="z-[100]"
diff --git a/interface/app/$libraryId/Layout/Sidebar/SidebarLayout/Link.tsx b/interface/app/$libraryId/Layout/Sidebar/SidebarLayout/Link.tsx
index b70a765b2..198d27a3f 100644
--- a/interface/app/$libraryId/Layout/Sidebar/SidebarLayout/Link.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/SidebarLayout/Link.tsx
@@ -7,7 +7,7 @@ import { usePlatform } from '~/util/Platform';
 
 const styles = cva(
 	[
-		'max-w flex grow flex-row items-center gap-0.5 truncate rounded px-2 py-1 text-sm font-medium outline-none',
+		'max-w flex grow flex-row items-center gap-0.5 truncate rounded px-2 py-1 text-sm font-medium outline-none font-plex tracking-wide',
 		'ring-inset ring-transparent ring-offset-0 focus:ring-1 focus:ring-accent focus:ring-offset-0'
 	],
 	{
diff --git a/interface/app/$libraryId/overview/FileKindStats.tsx b/interface/app/$libraryId/overview/FileKindStats.tsx
index 6f7b7a1e8..eaca7fed3 100644
--- a/interface/app/$libraryId/overview/FileKindStats.tsx
+++ b/interface/app/$libraryId/overview/FileKindStats.tsx
@@ -18,10 +18,10 @@ import { FileKind } from '.';
 const INFO_ICON_CLASSLIST =
 	'inline size-3 text-ink-faint opacity-0 ml-1 transition-opacity duration-300 group-hover:opacity-70';
 const TOTAL_FILES_CLASSLIST =
-	'flex items-center justify-between whitespace-nowrap text-sm font-medium text-ink-dull mt-2 px-1';
-const UNIDENTIFIED_FILES_CLASSLIST = 'relative flex items-center text-xs text-ink-faint';
+	'flex items-center justify-between whitespace-nowrap text-sm font-medium text-ink-dull mt-2 px-1 font-plex';
+const UNIDENTIFIED_FILES_CLASSLIST = 'relative flex items-center text-xs font-plex text-ink-faint';
 const BARS_CONTAINER_CLASSLIST =
-	'relative mx-2.5 grid grow grid-cols-[repeat(auto-fit,_minmax(0,_1fr))] grid-rows-[136px_12px] items-end justify-items-center gap-x-1.5 gap-y-1 self-stretch';
+	'relative mx-2.5 grid grow grid-cols-[repeat(auto-fit,_minmax(0,_1fr))] grid-rows-[136px_12px] font-plex tracking-wide items-end justify-items-center gap-x-1.5 gap-y-1 self-stretch';
 
 const mapFractionalValue = (numerator: bigint, denominator: bigint, maxValue: bigint): string => {
 	if (denominator === 0n) return '0';
@@ -206,7 +206,7 @@ const FileKindStats: React.FC<FileKindStatsProps> = () => {
 		};
 
 	return (
-		<div className="flex justify-center">
+		<div className="flex justify-center tabular-nums">
 			<Card
 				ref={containerRef}
 				className="max-w-1/2 group mx-1 flex h-[220px] w-full min-w-[400px] shrink-0 flex-col gap-2 bg-app-box/50"
diff --git a/interface/app/$libraryId/overview/Layout/Section.tsx b/interface/app/$libraryId/overview/Layout/Section.tsx
index 1ca65e9bf..ea4568d26 100644
--- a/interface/app/$libraryId/overview/Layout/Section.tsx
+++ b/interface/app/$libraryId/overview/Layout/Section.tsx
@@ -14,7 +14,7 @@ const OverviewSection = ({
 		<div className={clsx('group w-full', className)}>
 			{title && (
 				<div className="mb-3 flex w-full items-center gap-3 px-7">
-					<div className="truncate font-bold">{title}</div>
+					<div className="truncate font-plex font-bold">{title}</div>
 					{typeof count === 'number' && <div className={COUNT_STYLE}>{count}</div>}
 					<div className="grow" />
 					<div className="flex flex-row gap-1 text-sidebar-inkFaint opacity-0 transition-all duration-300 hover:!opacity-100 group-hover:opacity-30">
diff --git a/interface/app/$libraryId/overview/LibraryStats.tsx b/interface/app/$libraryId/overview/LibraryStats.tsx
index 02cfbec8b..780f2fe88 100644
--- a/interface/app/$libraryId/overview/LibraryStats.tsx
+++ b/interface/app/$libraryId/overview/LibraryStats.tsx
@@ -65,7 +65,7 @@ const StatItem = ({ title, bytes, isLoading, info }: StatItemProps) => {
 	return (
 		<div
 			className={clsx(
-				'group/stat flex w-36 shrink-0 flex-col duration-75',
+				'group/stat flex w-36 shrink-0 flex-col font-plex duration-75',
 				!bytes && 'hidden'
 			)}
 		>
diff --git a/interface/app/$libraryId/overview/StatCard.tsx b/interface/app/$libraryId/overview/StatCard.tsx
index 2ed804238..5a424ab50 100644
--- a/interface/app/$libraryId/overview/StatCard.tsx
+++ b/interface/app/$libraryId/overview/StatCard.tsx
@@ -1,3 +1,4 @@
+import { IconName } from '@sd/assets/util';
 import { useEffect, useMemo, useState } from 'react';
 import { humanizeSize } from '@sd/client';
 import { Card, CircularProgress, tw } from '@sd/ui';
@@ -6,14 +7,16 @@ import { useIsDark, useLocale } from '~/hooks';
 
 type StatCardProps = {
 	name: string;
-	icon: string;
+	icon: IconName;
 	totalSpace: string | number[];
 	freeSpace?: string | number[];
 	color: string;
 	connectionType: 'lan' | 'p2p' | 'cloud' | null;
 };
 
-const Pill = tw.div`px-1.5 py-[1px] rounded text-tiny font-medium text-ink-dull bg-app-box border border-app-line`;
+const NBSP = '\xa0';
+
+const Pill = tw.div`px-1.5 py-[1px] rounded text-tiny font-medium text-ink-dull bg-app-box border border-app-line font-plex font-medium tracking-wide`;
 
 const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
 	const [mounted, setMounted] = useState(false);
@@ -48,7 +51,7 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
 
 	return (
 		<Card className="flex w-[280px] shrink-0 flex-col bg-app-box/50 !p-0">
-			<div className="flex flex-row items-center gap-5 p-4 px-6">
+			<div className="flex flex-row items-center gap-5 px-4 py-4">
 				{stats.freeSpace && (
 					<CircularProgress
 						radius={40}
@@ -79,13 +82,9 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
 					</CircularProgress>
 				)}
 				<div className="flex flex-col overflow-hidden">
-					<Icon
-						className="-ml-1 min-h-[60px] min-w-[60px]"
-						name={icon as any}
-						size={60}
-					/>
-					<span className="truncate font-medium">{name}</span>
-					<span className="mt-1 truncate text-tiny text-ink-faint">
+					<Icon className="-ml-1 -mt-1 min-h-[60px] min-w-[60px]" name={icon} size={60} />
+					<span className="mt-2 truncate font-plex font-bold">{name}</span>
+					<span className="mt-0 whitespace-pre font-plex text-tiny font-semibold tracking-wide text-ink-faint">
 						{freeSpace.value !== totalSpace.value && (
 							<>
 								{freeSpace.value} {t(`size_${freeSpace.unit.toLowerCase()}`)}{' '}
@@ -99,8 +98,7 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
 			<div className="flex h-10 flex-row items-center gap-1.5 border-t border-app-line px-2">
 				{freeSpace.value === totalSpace.value && (
 					<Pill>
-						{totalSpace.value}
-						{t(`size_${totalSpace.unit.toLowerCase()}`)}
+						{totalSpace.value} {t(`size_${totalSpace.unit.toLowerCase()}`)}
 					</Pill>
 				)}
 				<Pill className="uppercase">{connectionType || t('local')}</Pill>
diff --git a/interface/app/$libraryId/overview/StorageBar.tsx b/interface/app/$libraryId/overview/StorageBar.tsx
index 62e174612..d0684f899 100644
--- a/interface/app/$libraryId/overview/StorageBar.tsx
+++ b/interface/app/$libraryId/overview/StorageBar.tsx
@@ -30,7 +30,7 @@ const StorageBar: React.FC<StorageBarProps> = ({ sections }) => {
 	};
 
 	return (
-		<div className="w-auto p-3">
+		<div className="w-auto p-3 font-plex">
 			<div className="relative mt-1 flex h-6 rounded">
 				{sections.map((section, index) => {
 					const isHovered = hoveredSectionIndex === index;
diff --git a/interface/app/$libraryId/settings/Layout.tsx b/interface/app/$libraryId/settings/Layout.tsx
index d2efdeb9e..8e0d8a8ef 100644
--- a/interface/app/$libraryId/settings/Layout.tsx
+++ b/interface/app/$libraryId/settings/Layout.tsx
@@ -46,7 +46,7 @@ export const Heading = (props: HeaderProps) => {
 		<div className="mb-3 flex">
 			{props.children}
 			<div className="grow">
-				<h1 className="text-2xl font-bold">{props.title}</h1>
+				<h1 className="font-plex text-2xl font-bold">{props.title}</h1>
 				<p className="mt-1 text-sm text-gray-400">{props.description}</p>
 			</div>
 			{props.rightArea}
diff --git a/interface/app/$libraryId/settings/Setting.tsx b/interface/app/$libraryId/settings/Setting.tsx
index 9bdf57c70..d13d70254 100644
--- a/interface/app/$libraryId/settings/Setting.tsx
+++ b/interface/app/$libraryId/settings/Setting.tsx
@@ -26,7 +26,7 @@ export default ({ mini, registerName, ...props }: PropsWithChildren<Props>) => {
 			<div className={clsx('relative flex flex-row', props.containerClassName)}>
 				<div className={clsx('flex w-full flex-col', !mini && 'pb-6', props.className)}>
 					<div className="mb-1 flex items-center gap-1">
-						<h3 className="text-sm font-medium text-ink">{props.title}</h3>
+						<h3 className="font-plex text-sm font-semibold text-ink">{props.title}</h3>
 						{props.toolTipLabel && (
 							<Tooltip label={props.toolTipLabel as string}>
 								<Info
diff --git a/interface/app/$libraryId/settings/Sidebar.tsx b/interface/app/$libraryId/settings/Sidebar.tsx
index 08de4d525..316a55c13 100644
--- a/interface/app/$libraryId/settings/Sidebar.tsx
+++ b/interface/app/$libraryId/settings/Sidebar.tsx
@@ -27,7 +27,7 @@ import SidebarLink from '../Layout/Sidebar/SidebarLayout/Link';
 import { useLayoutStore } from '../Layout/store';
 import { NavigationButtons } from '../TopBar/NavigationButtons';
 
-const Heading = tw.div`mb-1 ml-1 text-xs font-semibold text-gray-400`;
+const Heading = tw.div`mb-1 ml-1 text-xs font-semibold text-gray-400 font-plex tracking-wide`;
 const Section = tw.div`space-y-0.5`;
 
 export default () => {
diff --git a/interface/app/$libraryId/settings/client/usage.tsx b/interface/app/$libraryId/settings/client/usage.tsx
index b59790b4f..9e39fef8d 100644
--- a/interface/app/$libraryId/settings/client/usage.tsx
+++ b/interface/app/$libraryId/settings/client/usage.tsx
@@ -128,7 +128,7 @@ const UsageCard = memo(
 				<div className="flex w-full items-center justify-center gap-3">
 					<Icon name={icon} size={40} />
 					<div className="w-full max-w-[120px]">
-						<h1 className="text-lg font-medium">
+						<h1 className="font-plex text-lg font-medium">
 							{typeof titleCount === 'number' && (
 								<span className="mr-1 text-ink-dull">{sizeCount}</span>
 							)}
diff --git a/interface/app/$libraryId/settings/resources/about.tsx b/interface/app/$libraryId/settings/resources/about.tsx
index 0a68a1e62..6b1c2bd91 100644
--- a/interface/app/$libraryId/settings/resources/about.tsx
+++ b/interface/app/$libraryId/settings/resources/about.tsx
@@ -71,12 +71,14 @@ export const Component = () => {
 			</div>
 			<Divider />
 			<div className="my-5">
-				<h1 className="mb-3 text-lg font-bold text-ink">{t('about_vision_title')}</h1>
+				<h1 className="mb-3 font-plex text-lg font-bold text-ink">
+					{t('about_vision_title')}
+				</h1>
 				<p className="w-full text-sm text-ink-faint">{t('about_vision_text')}</p>
 			</div>
 			<Divider />
 			<div>
-				<h1 className="my-5 text-lg font-bold text-ink">
+				<h1 className="my-5 font-plex text-lg font-bold text-ink">
 					{t('meet_contributors_behind_spacedrive')}
 				</h1>
 				<img
diff --git a/interface/app/$libraryId/settings/resources/changelog.tsx b/interface/app/$libraryId/settings/resources/changelog.tsx
index ed257162f..011ef1178 100644
--- a/interface/app/$libraryId/settings/resources/changelog.tsx
+++ b/interface/app/$libraryId/settings/resources/changelog.tsx
@@ -24,7 +24,10 @@ export const Component = () => {
 			{changelog.data?.map((release: any) => (
 				<article
 					key={release.version}
-					className={clsx('prose prose-sm text-ink', isDark && 'prose-invert')}
+					className={clsx(
+						'prose prose-sm text-ink prose-headings:font-plex',
+						isDark && 'prose-invert'
+					)}
 				>
 					<Markdown
 						skipHtml
diff --git a/interface/app/onboarding/alpha.tsx b/interface/app/onboarding/alpha.tsx
index 57394ab09..c8d47394a 100644
--- a/interface/app/onboarding/alpha.tsx
+++ b/interface/app/onboarding/alpha.tsx
@@ -23,7 +23,7 @@ export default function OnboardingAlpha() {
 				<div className="relative z-10 flex flex-col gap-5">
 					<div className="mb-5 flex w-full items-center justify-center gap-2">
 						<img src={AppLogo} alt="Spacedrive" className="size-8" />
-						<h1 className="text-[25px] font-semibold">Spacedrive</h1>
+						<h1 className="font-plex text-[25px] font-semibold">Spacedrive</h1>
 					</div>
 					<h1 className="text-[40px] font-bold">{t('alpha_release_title')}</h1>
 					<p className="mx-auto w-full max-w-[450px] text-sm text-ink-faint">
diff --git a/packages/assets/util/index.ts b/packages/assets/util/index.ts
index 492d61049..399d80a56 100644
--- a/packages/assets/util/index.ts
+++ b/packages/assets/util/index.ts
@@ -12,6 +12,8 @@ export const iconNames = Object.fromEntries(
 		.map((key) => [key, key]) // Map key to [key, key] format
 ) as Record<IconTypes, string>;
 
+export type IconName = keyof typeof iconNames;
+
 export const getIconByName = (name: IconTypes, isDark?: boolean) => {
 	if (!isDark) name = (name + '_Light') as IconTypes;
 	return icons[name];
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c858d4107..d0ebb1386 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -19,6 +19,7 @@
 		"typecheck": "tsc -b"
 	},
 	"dependencies": {
+		"@fontsource/ibm-plex-sans": "^5.1.0",
 		"@headlessui/react": "^1.7.17",
 		"@phosphor-icons/react": "^2.0.13",
 		"@radix-ui/react-checkbox": "^1.0.4",
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index 7f83f3b66..c9815e562 100644
--- a/packages/ui/src/Button.tsx
+++ b/packages/ui/src/Button.tsx
@@ -26,7 +26,7 @@ const hasHref = (props: ButtonProps | LinkButtonProps): props is LinkButtonProps
 
 export const buttonStyles = cva(
 	[
-		'cursor-default items-center rounded-md border outline-none transition-colors duration-100',
+		'cursor-default items-center rounded-md border outline-none transition-colors duration-100 font-plex font-semibold tracking-wide',
 		'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70',
 		'focus:ring-none focus:ring-offset-none cursor-pointer ring-offset-app-box'
 	],
diff --git a/packages/ui/src/Input.tsx b/packages/ui/src/Input.tsx
index a2b69ee6d..b9dac28fe 100644
--- a/packages/ui/src/Input.tsx
+++ b/packages/ui/src/Input.tsx
@@ -145,7 +145,7 @@ export interface LabelProps extends Omit<React.ComponentProps<'label'>, 'htmlFor
 
 export function Label({ slug, children, className, ...props }: LabelProps) {
 	return (
-		<label htmlFor={slug} className={clsx('text-sm font-bold', className)} {...props}>
+		<label htmlFor={slug} className={clsx('font-plex text-sm font-bold', className)} {...props}>
 			{children}
 		</label>
 	);
diff --git a/packages/ui/src/forms/FormField.tsx b/packages/ui/src/forms/FormField.tsx
index bad00f567..ae92279ac 100644
--- a/packages/ui/src/forms/FormField.tsx
+++ b/packages/ui/src/forms/FormField.tsx
@@ -42,7 +42,7 @@ export const FormField = (props: FormFieldProps) => {
 	return (
 		<div className={props.className}>
 			{props.label && (
-				<Label slug={props.id} className="mb-1 flex font-medium">
+				<Label slug={props.id} className="mb-1 flex font-semibold">
 					{props.label}
 				</Label>
 			)}
diff --git a/packages/ui/style/index.js b/packages/ui/style/index.js
index 423b033ce..8b7e50657 100644
--- a/packages/ui/style/index.js
+++ b/packages/ui/style/index.js
@@ -1 +1,8 @@
 import './style.scss';
+import '@fontsource/ibm-plex-sans/100.css';
+import '@fontsource/ibm-plex-sans/200.css';
+import '@fontsource/ibm-plex-sans/300.css';
+import '@fontsource/ibm-plex-sans/400.css';
+import '@fontsource/ibm-plex-sans/500.css';
+import '@fontsource/ibm-plex-sans/600.css';
+import '@fontsource/ibm-plex-sans/700.css';
diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.js
index 2cb264f14..f41cf7df6 100644
--- a/packages/ui/style/tailwind.js
+++ b/packages/ui/style/tailwind.js
@@ -23,6 +23,10 @@ module.exports = function (app, options) {
 				xl: '1280px',
 				...defaultTheme.screens
 			},
+			fontFamily: {
+				sans: [...defaultTheme.fontFamily.sans],
+				plex: ['IBM Plex Sans', ...defaultTheme.fontFamily.sans]
+			},
 			fontSize: {
 				'tiny': '.65rem',
 				'xs': '.75rem',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index df32664bb9da2659ada6377c56269235b8961149..fc815a1fe8ab0d649ea47c932c58bb5b777511f9 100644
GIT binary patch
delta 1194
zcmaiyZAep57{}SxHh1p5yUSjjMzzwiD0S0mR<1TBooO~%IU%aeT)w-t7c(<76imXp
zb)W}QX%LkunskYS5WNue2EBlRn1M#vmq3cXL=ts3Yx>3Z;m<ked4A`d=bY#N=DhL8
zW#jM!gWqNuz&${%#}>T;UYco&*C=l&@Yl3tcs)q%3{Ebq<AVdvUYCfuTt^Vs;UV>}
zNKhu<9T#m`c!Qjuu2!iQMie;Z^hh`WZlI#z%z!d6SdNfld3&=pDxAm0LWcj={(ufg
z_^C^bD7^Z+OTlX~&%_*e)%(0Izvq}UrK+qh$zAJgO!7MF@#7V0oU<XG{}^zl!hV@Z
z2ET7f*TiTnwN8iEsi~`~@Hl)<jnAd=3rjfRP{g*?jFOsB(d<(7B8Ph6>=)72(uPz=
zt~swVEzMPtx5ebkC@(2Gm{Xe3V5==MRTgJh57?^HZJz7`OJj+xRA=>?>di$bGQFk6
z*^X^C^B!O7_IyvBtI1!pE$@IkBd;m9)_t<P*kFJuE7EkdOp64G1xW-g5hN8P6C@WD
zMOvm6mGx^DtI(L9tV`CC4^}i|o@+U$W?}dZT8*{bTG(e1>tXO3nr|2k51|#Hx=BgF
z96&K-yc@a2<Y)lJehUA1aQ`ZJUV>s^qKzsE#)+|=DoluE4ju8|rgB98!-!zCBjW!N
z|E$;uDR-z>5lNUHrWztqnWW$@#Y-Y#y5N;r`08dFrbZ-)Y$wzM5olYfba>Ruj6=g}
zdMmhBva&1JsYAehM$6%m6-mkW5$fUD`R@xG9$HQGM!2wpj)uKi^r?A5Xu@ttGte`k
zp3PysIWz<QUG(gNgIf%=T8!<@(vAWXO$tnmDVN+k$Gnrk$#Q8la9zw3cyW>05_;HV
z7gGb=RYnGV7a0wy<`|Ed9LG$YG?dmprPqV1AH{a`^f08SNBQ{hd_jRSHV#_Hl(F!2
z0LkFlPbCQ@LvK_?vkKBbtK>F;_AXimAvjQl<fJZv?G$6KkH+~)_BsDq^m5Xf$i_>+
bu4kp79YafCQpesW@8j7vIq6Pi^`n0P;~Uns

delta 1107
zcmZ`&Yivtl7|!Y1wf(;H^>huTc5$qj$n4U&ErLeEW((>%@k2H=Bba6u6G0|^l)1zl
z^SDJjBZSDdoY*%LmrPhh(8Me<61T+V4<i_HJv}8t>c^AwUY_@P-#q7>PkX(0c6gf~
zFlC-ASCKbSWuwEY&a|DdBK<s_fGf?^jmS<ZLkTAjRp+@T3UTV%tQU`(B(s{I;_&H8
z-XycyvdV7%CEKAtd&gSPGgZt`1DjV`Vzi-5EeKu`qX}}3Q>U_FUtcs)BlXvq(%wSx
z=8a%dKR3?x3|r<8RQi{eRjsHfm&?}5)qZ*Pit@^`D*rOMYK^>fO{HI6=h+(W=HYJP
zOA=m|5Ld9|m7u|(Awh#tgGoc82D1hWFL`BMUcoi$vqH#WIs&C1$S_{pNIU{&%{91`
zw7kRmaitA36I#7d&wTGme;z(g#yrzgxt4Czf^_)0q<qw<#K@;_r(fOiy_$lWHktx^
zD@}#{3>}2b(=-E1nrLTye#~2hF3^5hm}7IC>}#Qh_|&$j>aF-aeQj0zUTg(F(oWTc
z|1fy(WokFT*J?FmOa~o}0GI`#4w@f}+MbY1#XG}{n(ww$-Ha<osfD**r5CqEO;Ucn
z{rkFOnt_wyD-d6!^g5k{v}vN1?<o?q1*J(@pfgGf#kap@5`)dfB5y8c^QWP+jgG>p
zh?orf0X8IdPi`F>7rWxdA~FEy>R15+jm!vV9&zv=b*v`=hxf7E=v*q=XOkh=R7@Nw
zs*fp{aPyX!_h$rM^{fXy_0044CX+6RQ~Oyj&hBTKe|ODT4>k~vJmTaEShWG;4#rpD
zrbBG73GzcR9XVaZ#dn3+Lg8OWYa6s_-Q{-;Y<w&V9%BshV}arJ9Kud&selt%k~3%w
zF>VamiWckU1wPx-5V=Z{@%)>O>o!KHM0nqK+ny2858VNclEP<YOCJ)I7g=td^1HO#
zfN&=f;TtJM8@Y=1H}il;awov|lvv?hU>%Oh5m7`<HLZy5Pr=7~<|ICUtmMA?6D?Gy
A_W%F@