Merge branch 'update-daita-view-text-styling-des-2465'

69 files changed, 237 insertions, 193 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
index 16238b7c3c..2a7c6a0c62 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { Url } from '../../shared/constants';
 import { useAppContext } from '../context';
-import { Link, LinkProps } from '../lib/components';
+import { Link, LinkProps } from '../lib/components/link';
 
 export type ExternalLinkProps = Omit<LinkProps, 'href' | 'as'> & {
   to: Url;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx
index 609238a237..eb466db226 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { RoutePath } from '../../shared/routes';
-import { Link, LinkProps } from '../lib/components';
+import { Link, LinkProps } from '../lib/components/link';
 import { useHistory } from '../lib/history';
 
 export type InternalLinkProps = Omit<LinkProps, 'href' | 'as'> & {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
index 837b0701cf..75860f13c3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { InAppNotificationSubtitle } from '../../shared/notifications';
-import { LabelTiny, Link } from '../lib/components';
+import { LabelTinySemiBold } from '../lib/components';
+import { Link } from '../lib/components/link';
 import { formatHtml } from '../lib/html-formatter';
 import { ExternalLink } from './ExternalLink';
 import { InternalLink } from './InternalLink';
@@ -19,20 +20,20 @@ const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
     switch (subtitle.action.type) {
       case 'navigate-internal':
         return (
-          <InternalLink variant="labelTiny" {...subtitle.action.link}>
+          <InternalLink variant="labelTinySemiBold" {...subtitle.action.link}>
             <InternalLink.Text>{content}</InternalLink.Text>
           </InternalLink>
         );
       case 'navigate-external':
         return (
-          <ExternalLink variant="labelTiny" {...subtitle.action.link}>
+          <ExternalLink variant="labelTinySemiBold" {...subtitle.action.link}>
             <ExternalLink.Text>{content}</ExternalLink.Text>
             <ExternalLink.Icon icon="external" />
           </ExternalLink>
         );
       case 'run-function':
         return (
-          <StyledLink forwardedAs="button" variant="labelTiny" {...subtitle.action.button}>
+          <StyledLink forwardedAs="button" variant="labelTinySemiBold" {...subtitle.action.button}>
             <StyledLink.Text>{content}</StyledLink.Text>
           </StyledLink>
         );
@@ -51,14 +52,14 @@ export const NotificationSubtitle = ({ subtitle, ...props }: NotificationSubtitl
 
   if (!Array.isArray(subtitle)) {
     return (
-      <LabelTiny color="whiteAlpha60" {...props}>
+      <LabelTinySemiBold color="whiteAlpha60" {...props}>
         {formatHtml(subtitle)}
-      </LabelTiny>
+      </LabelTinySemiBold>
     );
   }
 
   return (
-    <LabelTiny color="whiteAlpha60" {...props}>
+    <LabelTinySemiBold color="whiteAlpha60" {...props}>
       {subtitle.map((subtitle, index, arr) => {
         const content = formatSubtitle(subtitle);
 
@@ -69,6 +70,6 @@ export const NotificationSubtitle = ({ subtitle, ...props }: NotificationSubtitl
           </React.Fragment>
         );
       })}
-    </LabelTiny>
+    </LabelTinySemiBold>
   );
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx
index aee804c69a..729dd02488 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { LabelTiny } from '../lib/components';
+import { LabelTinySemiBold } from '../lib/components';
 import { colors } from '../lib/foundations';
 import { normalText, smallText, tinyText } from './common-styles';
 import FormattableTextInput from './FormattableTextInput';
@@ -51,6 +51,6 @@ export const StyledTitle = styled.span(smallText, {
   marginBottom: '5px',
 });
 
-export const StyledAccountNumberInfo = styled(LabelTiny)({
+export const StyledAccountNumberInfo = styled(LabelTinySemiBold)({
   marginTop: '8px',
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
index 57df7e5c7c..68f6853de7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Flex, LabelTiny, TitleBig } from '../lib/components';
+import { Flex, LabelTinySemiBold, TitleBig } from '../lib/components';
 
 export const HeaderTitle = styled(TitleBig)({
   wordWrap: 'break-word',
   hyphens: 'auto',
 });
 
-export const HeaderSubTitle = styled(LabelTiny).attrs({
+export const HeaderSubTitle = styled(LabelTinySemiBold).attrs({
   color: 'whiteAlpha60',
 })({});
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
index f25e411cc3..b416c7d0cf 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
@@ -7,7 +7,7 @@ import { RoutePath } from '../../shared/routes';
 import { useScheduler } from '../../shared/scheduler';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
-import { Button, Flex, Icon, IconProps, LabelTiny } from '../lib/components';
+import { Button, Flex, Icon, IconProps, LabelTinySemiBold } from '../lib/components';
 import { colors, spacings } from '../lib/foundations';
 import { TransitionType, useHistory } from '../lib/history';
 import { useBoolean, useEffectEvent } from '../lib/utility-hooks';
@@ -278,9 +278,9 @@ function SettingsImportStatus(props: ImportStatusProps) {
         {iconProps !== undefined && <Icon {...iconProps} size="medium" />}
       </StyledStatusTitle>
       {subtitle !== undefined && (
-        <LabelTiny data-testid="status-subtitle" color="whiteAlpha60">
+        <LabelTinySemiBold data-testid="status-subtitle" color="whiteAlpha60">
           {subtitle}
-        </LabelTiny>
+        </LabelTinySemiBold>
       )}
     </StyledStatusContainer>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
index d0cabbacde..dd0c802f4e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 
-import { LabelTiny } from '../../lib/components';
+import { LabelTinySemiBold } from '../../lib/components';
 import { spacings } from '../../lib/foundations';
 
 export const CellFooter = styled.div({
   margin: `${spacings.tiny} ${spacings.large} 0px`,
 });
 
-export const CellFooterText = styled(LabelTiny).attrs({
+export const CellFooterText = styled(LabelTinySemiBold).attrs({
   color: 'whiteAlpha60',
 })({});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
index 8dfebb2b34..2bcae3428b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
@@ -5,7 +5,7 @@ import { strings } from '../../../shared/constants';
 import { ObfuscationType, Ownership } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
 import { RoutePath } from '../../../shared/routes';
-import { Button, FilterChip, Flex, IconButton, LabelTiny } from '../../lib/components';
+import { Button, FilterChip, Flex, IconButton, LabelTinySemiBold } from '../../lib/components';
 import { FlexColumn } from '../../lib/components/flex-column';
 import { useRelaySettingsUpdater } from '../../lib/constraint-updater';
 import {
@@ -169,9 +169,9 @@ export default function SelectLocation() {
                       $alignItems="center"
                       $flexWrap="wrap"
                       $margin={{ horizontal: 'small', bottom: 'medium' }}>
-                      <LabelTiny>
+                      <LabelTinySemiBold>
                         {messages.pgettext('select-location-view', 'Filtered:')}
-                      </LabelTiny>
+                      </LabelTinySemiBold>
 
                       {showOwnershipFilter && (
                         <FilterChip
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/connection-blocked-label/ConnectionBlockedLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/connection-blocked-label/ConnectionBlockedLabel.tsx
index 627ffc1503..ca576f0c33 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/connection-blocked-label/ConnectionBlockedLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/connection-blocked-label/ConnectionBlockedLabel.tsx
@@ -1,12 +1,12 @@
 import { messages } from '../../../../../../shared/gettext';
-import { Flex, LabelTiny } from '../../../../../lib/components';
+import { Flex, LabelTinySemiBold } from '../../../../../lib/components';
 import { Dot } from '../../../../../lib/components/dot';
 
 export function ConnectionBlockedLabel() {
   return (
     <Flex $gap="small" $alignItems="baseline">
       <Dot size="small" variant="error" />
-      <LabelTiny>
+      <LabelTinySemiBold>
         {
           // TRANSLATORS: Label displayed when an error occurred due to the connection being blocked
           messages.pgettext(
@@ -14,7 +14,7 @@ export function ConnectionBlockedLabel() {
             'Connection blocked. Try changing server or other settings.',
           )
         }
-      </LabelTiny>
+      </LabelTinySemiBold>
     </Flex>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/download-footer/components/download-label/DownloadLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/download-footer/components/download-label/DownloadLabel.tsx
index 7bdc5a18bc..54220ad72a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/download-footer/components/download-label/DownloadLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/download-footer/components/download-label/DownloadLabel.tsx
@@ -1,8 +1,8 @@
-import { LabelTiny } from '../../../../../../../../../lib/components';
+import { LabelTinySemiBold } from '../../../../../../../../../lib/components';
 import { useMessage } from './hooks';
 
 export function DownloadLabel() {
   const message = useMessage();
 
-  return <LabelTiny>{message}</LabelTiny>;
+  return <LabelTinySemiBold>{message}</LabelTinySemiBold>;
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/ErrorFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/ErrorFooter.tsx
index 60c0056b44..3698af0dfb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/ErrorFooter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/ErrorFooter.tsx
@@ -1,4 +1,4 @@
-import { Flex, Icon, LabelTiny } from '../../../../../../../lib/components';
+import { Flex, Icon, LabelTinySemiBold } from '../../../../../../../lib/components';
 import { DownloadProgress } from '../../../download-progress';
 import { ManualDownloadLink, ReportProblemButton, RetryButton } from './components';
 import { useMessage, useShowManualDownloadLink } from './hooks';
@@ -15,7 +15,7 @@ export function ErrorFooter() {
             <Icon size="small" icon="alert-circle" color="red" />
           </div>
           <Flex $flexDirection="column">
-            <LabelTiny>{message}</LabelTiny>
+            <LabelTinySemiBold>{message}</LabelTinySemiBold>
           </Flex>
         </Flex>
         <DownloadProgress />
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx
index fba67726d6..d6d0554a39 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/components/manual-download-link/ManualDownloadLink.tsx
@@ -6,7 +6,7 @@ export function ManualDownloadLink() {
   const downloadUrl = useDownloadUrl();
 
   return (
-    <ExternalLink variant="labelTiny" to={downloadUrl}>
+    <ExternalLink variant="labelTinySemiBold" to={downloadUrl}>
       <ExternalLink.Text>
         {
           // TRANSLATORS: Link shown to optionally manually download the update
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/initial-footer/components/installer-ready/InstallerReady.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/initial-footer/components/installer-ready/InstallerReady.tsx
index 11a10354dd..f07b867f5d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/initial-footer/components/installer-ready/InstallerReady.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/initial-footer/components/installer-ready/InstallerReady.tsx
@@ -1,5 +1,5 @@
 import { messages } from '../../../../../../../../../../shared/gettext';
-import { Flex, Icon, LabelTiny } from '../../../../../../../../../lib/components';
+import { Flex, Icon, LabelTinySemiBold } from '../../../../../../../../../lib/components';
 import { DownloadProgress } from '../../../../../download-progress';
 import { LaunchInstallerButton } from '../../../../../launch-installer-button';
 
@@ -9,12 +9,12 @@ export function InstallerReady() {
       <Flex $gap="medium" $flexDirection="column" $margin={{ bottom: 'medium' }}>
         <Flex $gap="tiny" $alignItems="center">
           <Icon icon="checkmark" color="green" size="small" />
-          <LabelTiny>
+          <LabelTinySemiBold>
             {
               // TRANSLATORS: Label displayed above a progress bar when the update is verified successfully
               messages.pgettext('app-upgrade-view', 'Verification successful!')
             }
-          </LabelTiny>
+          </LabelTinySemiBold>
         </Flex>
         <DownloadProgress />
       </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/launch-footer/LaunchFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/launch-footer/LaunchFooter.tsx
index a05afe356e..2a65eb55b2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/launch-footer/LaunchFooter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/launch-footer/LaunchFooter.tsx
@@ -1,5 +1,5 @@
 import { messages } from '../../../../../../../../shared/gettext';
-import { Flex, Icon, LabelTiny } from '../../../../../../../lib/components';
+import { Flex, Icon, LabelTinySemiBold } from '../../../../../../../lib/components';
 import { DownloadProgress } from '../../../download-progress';
 import { LaunchInstallerButton } from '../../../launch-installer-button';
 import { useDisabled, useMessage } from './hooks';
@@ -13,12 +13,12 @@ export function LaunchFooter() {
       <Flex $gap="medium" $flexDirection="column" $margin={{ bottom: 'medium' }}>
         <Flex $gap="tiny" $alignItems="center">
           <Icon icon="checkmark" color="green" size="small" />
-          <LabelTiny>
+          <LabelTinySemiBold>
             {
               // TRANSLATORS: Label displayed above a progress bar when the update is verified successfully
               messages.pgettext('app-upgrade-view', 'Verification successful!')
             }
-          </LabelTiny>
+          </LabelTinySemiBold>
         </Flex>
         <DownloadProgress />
       </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/pause-footer/components/resume-upgrade/ResumeUpgrade.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/pause-footer/components/resume-upgrade/ResumeUpgrade.tsx
index 8f2fc26879..6cd95ed03a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/pause-footer/components/resume-upgrade/ResumeUpgrade.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/pause-footer/components/resume-upgrade/ResumeUpgrade.tsx
@@ -1,5 +1,5 @@
 import { messages } from '../../../../../../../../../../shared/gettext';
-import { Flex, LabelTiny } from '../../../../../../../../../lib/components';
+import { Flex, LabelTinySemiBold } from '../../../../../../../../../lib/components';
 import { DownloadProgress } from '../../../../../download-progress';
 import { ResumeButton } from '../../../../../resume-button';
 
@@ -7,12 +7,12 @@ export function ResumeUpgrade() {
   return (
     <Flex $padding="large" $flexDirection="column">
       <Flex $gap="medium" $flexDirection="column" $margin={{ bottom: 'medium' }}>
-        <LabelTiny>
+        <LabelTinySemiBold>
           {
             // TRANSLATORS: Label displayed above a progress bar when the update is verified successfully
             messages.pgettext('app-upgrade-view', 'Download paused')
           }
-        </LabelTiny>
+        </LabelTinySemiBold>
         <DownloadProgress />
       </Flex>
       <Flex $flexDirection="column">
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/verify-footer/VerifyFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/verify-footer/VerifyFooter.tsx
index a44548e642..9f234f26e7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/verify-footer/VerifyFooter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/verify-footer/VerifyFooter.tsx
@@ -1,5 +1,5 @@
 import { messages } from '../../../../../../../../shared/gettext';
-import { Flex, LabelTiny, Spinner } from '../../../../../../../lib/components';
+import { Flex, LabelTinySemiBold, Spinner } from '../../../../../../../lib/components';
 import { DownloadProgress } from '../../../download-progress';
 import { PauseButton } from '../../../pause-button';
 
@@ -9,12 +9,12 @@ export function VerifyFooter() {
       <Flex $gap="medium" $flexDirection="column" $margin={{ bottom: 'medium' }}>
         <Flex $gap="tiny" $alignItems="center">
           <Spinner size="small" />
-          <LabelTiny>
+          <LabelTinySemiBold>
             {
               // TRANSLATORS: Label displayed above a progress bar when the update is being verified
               messages.pgettext('app-upgrade-view', 'Verifying installer...')
             }
-          </LabelTiny>
+          </LabelTinySemiBold>
         </Flex>
         <DownloadProgress />
       </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
index 5e0aa6d11f..4d3ba67db3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { strings } from '../../../../shared/constants';
 import { messages } from '../../../../shared/gettext';
 import { useAppContext } from '../../../context';
-import { Button, Flex, Icon, Text } from '../../../lib/components';
+import { Button, Flex, Icon, LabelTiny, LabelTinySemiBold, Text } from '../../../lib/components';
 import { useHistory } from '../../../lib/history';
 import { useBoolean } from '../../../lib/utility-hooks';
 import { useSelector } from '../../../redux/store';
@@ -19,12 +19,16 @@ import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
 import PageSlider from '../../PageSlider';
 import { SettingsToggleListItem } from '../../settings-toggle-list-item';
-import SettingsHeader, { HeaderSubTitle, HeaderTitle } from '../../SettingsHeader';
+import SettingsHeader, { HeaderTitle } from '../../SettingsHeader';
 import { useShowDaitaMultihopInfo } from './hooks';
 
-const StyledHeaderSubTitle = styled(HeaderSubTitle)({
-  display: 'inline-block',
-});
+const StyledLabelTinySemiBold = styled(LabelTinySemiBold).attrs({ color: 'whiteAlpha60' })`
+  display: inline-block;
+`;
+
+const StyledLabelTiny = styled(LabelTiny).attrs({ color: 'whiteAlpha60' })`
+  display: inline-block;
+`;
 
 const StyledIllustration = styled.img({
   width: '100%',
@@ -50,7 +54,7 @@ export function DaitaSettingsView() {
                 {showDaitaMultihopInfo && (
                   <Flex $gap="small" $alignItems="center">
                     <Icon icon="info-circle" color="whiteOnBlue60" size="small" />
-                    <Text variant="labelTiny" color="whiteAlpha60">
+                    <Text variant="labelTinySemiBold" color="whiteAlpha60">
                       {messages.pgettext(
                         'wireguard-settings-view',
                         'Multihop is being used to enable DAITA for your selected location',
@@ -65,7 +69,7 @@ export function DaitaSettingsView() {
                         src={`${PATH_PREFIX}assets/images/daita-off-illustration.svg`}
                       />
                       <Flex $flexDirection="column" $gap="medium">
-                        <StyledHeaderSubTitle>
+                        <StyledLabelTinySemiBold>
                           {sprintf(
                             messages.pgettext(
                               // TRANSLATORS: Information to the user that with this setting enabled
@@ -76,8 +80,8 @@ export function DaitaSettingsView() {
                             ),
                             { wireguard: strings.wireguard },
                           )}
-                        </StyledHeaderSubTitle>
-                        <StyledHeaderSubTitle>
+                        </StyledLabelTinySemiBold>
+                        <StyledLabelTiny>
                           {sprintf(
                             messages.pgettext(
                               // TRANSLATORS: Information to the user what the DAITA setting does.
@@ -89,14 +93,14 @@ export function DaitaSettingsView() {
                             ),
                             { daita: strings.daita, daitaFull: strings.daitaFull },
                           )}
-                        </StyledHeaderSubTitle>
-                        <StyledHeaderSubTitle>
+                        </StyledLabelTiny>
+                        <StyledLabelTiny>
                           {messages.pgettext(
                             // TRANSLATORS: Information to the user on the background why the DAITA setting exists.
                             'wireguard-settings-view',
                             'By using sophisticated AI it’s possible to analyze the traffic of data packets going in and out of your device (even if the traffic is encrypted).',
                           )}
-                        </StyledHeaderSubTitle>
+                        </StyledLabelTiny>
                       </Flex>
                     </React.Fragment>,
                     <React.Fragment key="with-daita">
@@ -104,7 +108,7 @@ export function DaitaSettingsView() {
                         src={`${PATH_PREFIX}assets/images/daita-on-illustration.svg`}
                       />
                       <Flex $flexDirection="column" $gap="medium">
-                        <StyledHeaderSubTitle>
+                        <StyledLabelTiny>
                           {sprintf(
                             messages.pgettext(
                               // TRANSLATORS: Information to the user on the background why the DAITA setting exists.
@@ -113,8 +117,8 @@ export function DaitaSettingsView() {
                             ),
                             { daita: strings.daita },
                           )}
-                        </StyledHeaderSubTitle>
-                        <StyledHeaderSubTitle>
+                        </StyledLabelTiny>
+                        <StyledLabelTiny>
                           {sprintf(
                             messages.pgettext(
                               // TRANSLATORS: Information to the user what the DAITA setting does.
@@ -125,8 +129,8 @@ export function DaitaSettingsView() {
                             ),
                             { daita: strings.daita },
                           )}
-                        </StyledHeaderSubTitle>
-                        <StyledHeaderSubTitle>
+                        </StyledLabelTiny>
+                        <StyledLabelTiny>
                           {sprintf(
                             messages.pgettext(
                               // TRANSLATORS: Information to the user that DAITA is not available
@@ -140,7 +144,7 @@ export function DaitaSettingsView() {
                             ),
                             { daita: strings.daita },
                           )}
-                        </StyledHeaderSubTitle>
+                        </StyledLabelTiny>
                       </Flex>
                     </React.Fragment>,
                   ]}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/FooterText.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/FooterText.tsx
index 61e605fb81..ca51410798 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/FooterText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/FooterText.tsx
@@ -3,5 +3,5 @@ import { Text, TextProps } from '../../../../../../../lib/components';
 export type FooterTextProps = TextProps;
 
 export function FooterText(props: FooterTextProps) {
-  return <Text variant="labelTiny" {...props}></Text>;
+  return <Text variant="labelTinySemiBold" {...props}></Text>;
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/login/LoginView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/login/LoginView.tsx
index 939eb82e20..8e96d87d4d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/login/LoginView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/login/LoginView.tsx
@@ -8,18 +8,10 @@ import { messages } from '../../../../shared/gettext';
 import { useAppContext } from '../../../context';
 import { formatAccountNumber } from '../../../lib/account';
 import useActions from '../../../lib/actionsHook';
-import {
-  Box,
-  Button,
-  Flex,
-  Icon,
-  Label,
-  Link,
-  Spinner,
-  Text,
-  TitleMedium,
-} from '../../../lib/components';
+import { Box, Button, Flex, Icon, Spinner, Text, TitleMedium } from '../../../lib/components';
 import { FlexColumn } from '../../../lib/components/flex-column';
+import { Label } from '../../../lib/components/label';
+import { Link } from '../../../lib/components/link';
 import { View } from '../../../lib/components/view';
 import { colors } from '../../../lib/foundations';
 import { formatHtml } from '../../../lib/html-formatter';
@@ -158,7 +150,7 @@ class Login extends React.Component<IProps, IState> {
               </FlexColumn>
               <Flex $justifyContent="center">
                 <StyledLine $margin={{ vertical: 'small', right: 'small' }} />
-                <Text variant="labelTiny">
+                <Text variant="labelTinySemiBold">
                   {
                     // TRANSLATORS: Text shown between two horizontal lines above the "create account" button.
                     // TRANSLATORS: In this context it is used to separate the users alternative of logging in
@@ -372,7 +364,11 @@ class Login extends React.Component<IProps, IState> {
     return (
       <>
         <Flex $flexDirection="column" $gap="tiny">
-          <Label htmlFor={inputId} variant="labelTiny" color="whiteAlpha60" data-testid="subtitle">
+          <Label
+            htmlFor={inputId}
+            variant="labelTinySemiBold"
+            color="whiteAlpha60"
+            data-testid="subtitle">
             {this.formSubtitle()}
           </Label>
           <form onSubmit={this.onSubmit}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/FeatureIndicators.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/FeatureIndicators.tsx
index b2cadb7aac..9fb26997e8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/FeatureIndicators.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/FeatureIndicators.tsx
@@ -180,7 +180,7 @@ export function FeatureIndicators(props: FeatureIndicatorsProps) {
             })}
           </StyledFeatureIndicatorsWrapper>
           <StyledEllipsisSpacer
-            variant="labelTiny"
+            variant="labelTinySemiBold"
             $display={!props.expanded}
             ref={ellipsisSpacerRef}>
             {
@@ -190,7 +190,7 @@ export function FeatureIndicators(props: FeatureIndicatorsProps) {
             }
           </StyledEllipsisSpacer>
           <StyledEllipsis
-            variant="labelTiny"
+            variant="labelTinySemiBold"
             onClick={props.expandIsland}
             $display={!props.expanded}
             ref={ellipsisRef}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx
index 6beb8c4d6b..85dcc46561 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
 import { messages } from '../../../../shared/gettext';
-import { Flex } from '../../../lib/components';
+import { Flex, Text } from '../../../lib/components';
+import { FlexColumn } from '../../../lib/components/flex-column';
 import { useHistory } from '../../../lib/history';
 import { AppNavigationHeader } from '../..';
 import * as Cell from '../../cell';
@@ -9,14 +10,13 @@ import { BackAction } from '../../KeyboardNavigation';
 import { Layout, SettingsContainer } from '../../Layout';
 import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
-import SettingsHeader, { HeaderSubTitle, HeaderTitle } from '../../SettingsHeader';
+import SettingsHeader, { HeaderTitle } from '../../SettingsHeader';
 import { MultihopSetting } from './components';
 
 const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
 
 const StyledIllustration = styled.img({
   width: '100%',
-  padding: '8px 0 8px',
 });
 
 export function MultihopSettingsView() {
@@ -31,18 +31,22 @@ export function MultihopSettingsView() {
 
             <NavigationScrollbars>
               <SettingsHeader>
-                <HeaderTitle>
-                  {messages.pgettext('wireguard-settings-view', 'Multihop')}
-                </HeaderTitle>
-                <HeaderSubTitle>
-                  <StyledIllustration
-                    src={`${PATH_PREFIX}assets/images/multihop-illustration.svg`}
-                  />
-                  {messages.pgettext(
-                    'wireguard-settings-view',
-                    'Multihop routes your traffic into one WireGuard server and out another, making it harder to trace. This results in increased latency but increases anonymity online.',
-                  )}
-                </HeaderSubTitle>
+                <FlexColumn $gap="medium">
+                  <HeaderTitle>
+                    {messages.pgettext('wireguard-settings-view', 'Multihop')}
+                  </HeaderTitle>
+                  <FlexColumn $gap="small">
+                    <StyledIllustration
+                      src={`${PATH_PREFIX}assets/images/multihop-illustration.svg`}
+                    />
+                    <Text variant="labelTiny" color="whiteAlpha60">
+                      {messages.pgettext(
+                        'wireguard-settings-view',
+                        'Multihop routes your traffic into one WireGuard server and out another, making it harder to trace. This results in increased latency but increases anonymity online.',
+                      )}
+                    </Text>
+                  </FlexColumn>
+                </FlexColumn>
               </SettingsHeader>
 
               <Flex $flexDirection="column" $flex={1}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/HeaderDescription.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/HeaderDescription.tsx
index bb6a602731..2363d8b403 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/HeaderDescription.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/HeaderDescription.tsx
@@ -2,9 +2,10 @@ import { sprintf } from 'sprintf-js';
 
 import { strings } from '../../../../../../../../shared/constants';
 import { messages } from '../../../../../../../../shared/gettext';
-import { Icon, Link } from '../../../../../../../lib/components';
+import { Icon } from '../../../../../../../lib/components';
 import { FlexColumn } from '../../../../../../../lib/components/flex-column';
 import { FlexRow } from '../../../../../../../lib/components/flex-row';
+import { Link } from '../../../../../../../lib/components/link';
 import { useLinuxSettingsContext } from '../../LinuxSettingsContext';
 import { useShowUnsupportedDialog } from './hooks';
 
@@ -38,7 +39,7 @@ export function HeaderDescription() {
               aria-description={message}
               as="button"
               onClick={showUnsupportedDialog}
-              variant="labelTiny">
+              variant="labelTinySemiBold">
               <Link.Text>
                 {
                   // TRANSLATORS: Link for learning more
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/custom-dns-enabled-footer/CustomDnsEnabledFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/custom-dns-enabled-footer/CustomDnsEnabledFooter.tsx
index 931471d231..d592727583 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/custom-dns-enabled-footer/CustomDnsEnabledFooter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/custom-dns-enabled-footer/CustomDnsEnabledFooter.tsx
@@ -17,7 +17,7 @@ export function CustomDnsEnabledFooter() {
 
   return (
     <Flex $padding={{ top: 'tiny', horizontal: 'medium' }}>
-      <Text variant="labelTiny" color="whiteAlpha60">
+      <Text variant="labelTinySemiBold" color="whiteAlpha60">
         {sprintf(blockingDisabledText, { customDnsFeatureName })}
       </Text>
     </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
index 80ca4991c8..b3cce5b04d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
@@ -98,7 +98,7 @@ export function TunnelProtocolSetting() {
                 { openVpn: strings.openvpn },
               )}{' '}
             </SettingsListbox.Text>
-            <ExternalLink variant="labelTiny" to={urls.removingOpenVpnBlog}>
+            <ExternalLink variant="labelTinySemiBold" to={urls.removingOpenVpnBlog}>
               <ExternalLink.Text>
                 {sprintf(
                   // TRANSLATORS: Link in tunnel protocol selector footer to blog post
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
index 5589764c56..0ac893db9e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
@@ -74,7 +74,7 @@ export function ObfuscationSettings() {
               <SettingsListbox.SplitOption.Label>
                 {messages.pgettext('wireguard-settings-view', 'Shadowsocks')}
               </SettingsListbox.SplitOption.Label>
-              <Text variant="labelTiny" color="whiteAlpha60">
+              <Text variant="labelTinySemiBold" color="whiteAlpha60">
                 {sprintf(subLabelTemplate, {
                   port: formatPortForSubLabel(obfuscationSettings.shadowsocksSettings.port),
                 })}
@@ -92,7 +92,7 @@ export function ObfuscationSettings() {
               <SettingsListbox.SplitOption.Label>
                 {messages.pgettext('wireguard-settings-view', 'UDP-over-TCP')}
               </SettingsListbox.SplitOption.Label>
-              <Text variant="labelTiny" color="whiteAlpha60">
+              <Text variant="labelTinySemiBold" color="whiteAlpha60">
                 {sprintf(subLabelTemplate, {
                   port: formatPortForSubLabel(obfuscationSettings.udp2tcpSettings.port),
                 })}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionTitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionTitle.tsx
index fab41c638c..55a3c6565b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionTitle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionTitle.tsx
@@ -1,5 +1,5 @@
 import { ListItem } from '../../list-item';
-import { TextProps } from '../../typography';
+import { TextProps } from '../../text';
 import { useAccordionContext } from '../AccordionContext';
 
 export type AccordionTitleProps = TextProps;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/button-text/ButtonText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/button-text/ButtonText.tsx
index 202318995a..288ab1fee0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/button-text/ButtonText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/button-text/ButtonText.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { BodySmallSemiBold, BodySmallSemiBoldProps } from '../../../typography';
+import { BodySmallSemiBold, BodySmallSemiBoldProps } from '../../../text';
 import { useButtonContext } from '../../ButtonContext';
 
 export type ButtonTextProps<T extends React.ElementType = 'span'> = BodySmallSemiBoldProps<T>;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/feature-indicator/components/FeatureIndicatorText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/feature-indicator/components/FeatureIndicatorText.tsx
index 49d8d5fac9..5c72f459a2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/feature-indicator/components/FeatureIndicatorText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/feature-indicator/components/FeatureIndicatorText.tsx
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 
-import { BodySmallSemiBoldProps, LabelTiny } from '../../typography';
+import { BodySmallSemiBoldProps, LabelTinySemiBold } from '../../text';
 import { useFeatureIndicatorContext } from '../FeatureIndicatorContext';
 
 export type FeatureIndicatorTextProps<T extends React.ElementType = 'span'> =
   BodySmallSemiBoldProps<T>;
 
-export const StyledFeatureIndicatorText = styled(LabelTiny)``;
+export const StyledFeatureIndicatorText = styled(LabelTinySemiBold)``;
 
 export const FeatureIndicatorText = <T extends React.ElementType = 'span'>(
   props: FeatureIndicatorTextProps<T>,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx
index 3da18bf38f..d7e7bc408e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
-import { BodySmallSemiBoldProps, LabelTiny } from '../../typography';
+import { BodySmallSemiBoldProps, LabelTinySemiBold } from '../../text';
 import { useFilterChipContext } from '../FilterChipContext';
 
 export type FilterChipTextProps<T extends React.ElementType = 'span'> = BodySmallSemiBoldProps<T>;
 
-export const StyledText = styled(LabelTiny)``;
+export const StyledText = styled(LabelTinySemiBold)``;
 
 export const FilterChipText = <T extends React.ElementType = 'span'>(
   props: FilterChipTextProps<T>,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts
index fce0e5c7ca..9a1d07f4a6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts
@@ -13,4 +13,4 @@ export * from './main-header';
 export * from './navigation-header';
 export * from './spinner';
 export * from './theme';
-export * from './typography';
+export * from './text';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/label/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/label/Label.tsx
new file mode 100644
index 0000000000..12e27bc807
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/label/Label.tsx
@@ -0,0 +1,8 @@
+import { Text } from '../text';
+import { TextProps } from '../text';
+
+export type LabelProps<T extends React.ElementType = 'label'> = TextProps<T>;
+
+export function Label<T extends React.ElementType = 'label'>(props: LabelProps<T>) {
+  return <Text as="label" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/label/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/label/index.ts
new file mode 100644
index 0000000000..ca58c61a25
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/label/index.ts
@@ -0,0 +1 @@
+export * from './Label';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkText.tsx
index 26acb87e15..6102f3d008 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkText.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Text, TextProps } from '../../typography';
+import { Text, TextProps } from '../../text';
 import { useLinkContext } from '../LinkContext';
 
 export type LinkTextProps = TextProps;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-label/ListItemLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-label/ListItemLabel.tsx
index 9ee4c75daf..4e62fe3610 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-label/ListItemLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-label/ListItemLabel.tsx
@@ -1,7 +1,7 @@
-import { LabelTinyProps, TitleMedium } from '../../../typography';
+import { LabelTinySemiBoldProps, TitleMedium } from '../../../text';
 import { useListItemContext } from '../../ListItemContext';
 
-export type ListItemLabelProps<E extends React.ElementType = 'span'> = LabelTinyProps<E>;
+export type ListItemLabelProps<E extends React.ElementType = 'span'> = LabelTinySemiBoldProps<E>;
 
 export const ListItemLabel = <E extends React.ElementType = 'span'>(
   props: ListItemLabelProps<E>,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text/ListItemText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text/ListItemText.tsx
index 0b76c45934..3deb147dfb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text/ListItemText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text/ListItemText.tsx
@@ -1,9 +1,15 @@
-import { Text, TextProps } from '../../../typography';
+import { Text, TextProps } from '../../../text';
 import { useListItemContext } from '../../ListItemContext';
 
 export type ListItemTextProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
 export const ListItemText = <E extends React.ElementType = 'span'>(props: ListItemTextProps<E>) => {
   const { disabled } = useListItemContext();
-  return <Text variant="labelTiny" color={disabled ? 'whiteAlpha40' : 'whiteAlpha60'} {...props} />;
+  return (
+    <Text
+      variant="labelTinySemiBold"
+      color={disabled ? 'whiteAlpha40' : 'whiteAlpha60'}
+      {...props}
+    />
+  );
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderTitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderTitle.tsx
index 327f957b4a..fd9dfee5e9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderTitle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderTitle.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { TitleMedium, TitleMediumProps } from '../../typography';
+import { TitleMedium, TitleMediumProps } from '../../text';
 import { useNavigationHeader } from '../NavigationHeaderContext';
 
 export type NavigationHeaderTitleProps = TitleMediumProps;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
index 0b8db6ea7e..cd2df764d8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
-import { LabelTiny, LabelTinyProps } from '../../typography';
+import { LabelTinySemiBold, LabelTinySemiBoldProps } from '../../text';
 import { useProgress } from '../ProgressContext';
 
-export type ProgressPercentProps<T extends React.ElementType = 'span'> = LabelTinyProps<T>;
+export type ProgressPercentProps<T extends React.ElementType = 'span'> = LabelTinySemiBoldProps<T>;
 
-const StyledText = styled(LabelTiny)`
+const StyledText = styled(LabelTinySemiBold)`
   min-width: 26px;
 `;
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
index 46f0cb9a9a..d82ec4cde5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
@@ -1,9 +1,9 @@
-import { LabelTiny, LabelTinyProps } from '../../typography';
+import { LabelTinySemiBold, LabelTinySemiBoldProps } from '../../text';
 import { useProgress } from '../ProgressContext';
 
-export type ProgressTextProps<T extends React.ElementType = 'span'> = LabelTinyProps<T>;
+export type ProgressTextProps<T extends React.ElementType = 'span'> = LabelTinySemiBoldProps<T>;
 
 export const ProgressText = <T extends React.ElementType = 'span'>(props: ProgressTextProps<T>) => {
   const { disabled } = useProgress();
-  return <LabelTiny color={disabled ? 'whiteAlpha40' : 'whiteAlpha60'} {...props} />;
+  return <LabelTinySemiBold color={disabled ? 'whiteAlpha40' : 'whiteAlpha60'} {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/switch/components/switch-label/SwitchLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/switch/components/switch-label/SwitchLabel.tsx
index 2a2481863a..27dbc5932c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/switch/components/switch-label/SwitchLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/switch/components/switch-label/SwitchLabel.tsx
@@ -1,4 +1,4 @@
-import { Text, TextProps } from '../../../typography';
+import { Text, TextProps } from '../../../text';
 import { useSwitchContext } from '../../';
 
 export type SwitchLabelProps = TextProps;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text-field/components/text-field-label/TextFieldLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text-field/components/text-field-label/TextFieldLabel.tsx
index dad212cf43..fe9ac27966 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text-field/components/text-field-label/TextFieldLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text-field/components/text-field-label/TextFieldLabel.tsx
@@ -1,9 +1,9 @@
-import { Text, TextProps } from '../../../typography';
+import { Text, TextProps } from '../../../text';
 import { useTextFieldContext } from '../../';
 
 export type TextFieldLabelProps = TextProps;
 
 export const TextFieldLabel = (props: TextFieldLabelProps) => {
   const { labelId } = useTextFieldContext();
-  return <Text id={labelId} variant="labelTiny" {...props} />;
+  return <Text id={labelId} variant="labelTinySemiBold" {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/Text.tsx
index aa4b0f1fca..cc1a53fcf4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/Text.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { Colors, colors, Typography, typography } from '../../foundations';
 import { PolymorphicProps, TransientProps } from '../../types';
@@ -20,22 +20,27 @@ const StyledText = styled.span<TransientProps<TextBaseProps>>(
       --color: ${color};
 
       color: var(--color);
-      text-align: ${$textAlign || undefined};
       font-family: ${fontFamily};
       font-size: ${fontSize};
       font-weight: ${fontWeight};
       line-height: ${lineHeight};
+      ${() => {
+        if ($textAlign) {
+          return css`
+            text-align: ${$textAlign};
+          `;
+        }
+        return null;
+      }}
     `;
   },
 );
 
-export const Text = <T extends React.ElementType = 'span'>({
+export function Text<T extends React.ElementType = 'span'>({
   variant,
   color,
   textAlign,
   ...props
-}: TextProps<T>) => {
+}: TextProps<T>) {
   return <StyledText $variant={variant} $color={color} $textAlign={textAlign} {...props} />;
-};
-
-Text.displayName = 'Text';
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small-semi-bold/BodySmallSemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small-semi-bold/BodySmallSemiBold.tsx
new file mode 100644
index 0000000000..c1d04ec304
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small-semi-bold/BodySmallSemiBold.tsx
@@ -0,0 +1,9 @@
+import { Text, TextProps } from '../../Text';
+
+export type BodySmallSemiBoldProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export function BodySmallSemiBold<T extends React.ElementType = 'span'>(
+  props: BodySmallSemiBoldProps<T>,
+) {
+  return <Text variant="bodySmallSemibold" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small-semi-bold/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small-semi-bold/index.ts
new file mode 100644
index 0000000000..1b8a15b3a9
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small-semi-bold/index.ts
@@ -0,0 +1 @@
+export * from './BodySmallSemiBold';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small/BodySmall.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small/BodySmall.tsx
new file mode 100644
index 0000000000..e390da7463
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small/BodySmall.tsx
@@ -0,0 +1,7 @@
+import { Text, TextProps } from '../../Text';
+
+export type BodySmallProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export function BodySmall<T extends React.ElementType = 'span'>(props: BodySmallProps<T>) {
+  return <Text variant="bodySmall" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small/index.ts
new file mode 100644
index 0000000000..4b717acf25
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/body-small/index.ts
@@ -0,0 +1 @@
+export * from './BodySmall';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/footnote-mini/FootnoteMini.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/footnote-mini/FootnoteMini.tsx
new file mode 100644
index 0000000000..c539f4475d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/footnote-mini/FootnoteMini.tsx
@@ -0,0 +1,7 @@
+import { Text, TextProps } from '../../Text';
+
+export type FootnoteMiniProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export function FootnoteMini<T extends React.ElementType = 'span'>(props: FootnoteMiniProps<T>) {
+  return <Text variant="footnoteMini" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/footnote-mini/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/footnote-mini/index.ts
new file mode 100644
index 0000000000..23bbea1790
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/footnote-mini/index.ts
@@ -0,0 +1 @@
+export * from './FootnoteMini';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/index.ts
new file mode 100644
index 0000000000..7ee09eaa6e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/index.ts
@@ -0,0 +1,8 @@
+export * from './body-small';
+export * from './body-small-semi-bold';
+export * from './footnote-mini';
+export * from './label-tiny';
+export * from './label-tiny-semi-bold';
+export * from './title-big';
+export * from './title-large';
+export * from './title-medium';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny-semi-bold/LabelTinySemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny-semi-bold/LabelTinySemiBold.tsx
new file mode 100644
index 0000000000..795c8a9b52
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny-semi-bold/LabelTinySemiBold.tsx
@@ -0,0 +1,9 @@
+import { Text, TextProps } from '../../Text';
+
+export type LabelTinySemiBoldProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export function LabelTinySemiBold<T extends React.ElementType = 'span'>(
+  props: LabelTinySemiBoldProps<T>,
+) {
+  return <Text variant="labelTinySemiBold" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny-semi-bold/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny-semi-bold/index.ts
new file mode 100644
index 0000000000..713ea040dd
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny-semi-bold/index.ts
@@ -0,0 +1 @@
+export * from './LabelTinySemiBold';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny/LabelTiny.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny/LabelTiny.tsx
new file mode 100644
index 0000000000..27353d626c
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny/LabelTiny.tsx
@@ -0,0 +1,7 @@
+import { Text, TextProps } from '../../Text';
+
+export type LabelTinyProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export function LabelTiny<T extends React.ElementType = 'span'>(props: LabelTinyProps<T>) {
+  return <Text variant="labelTiny" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny/index.ts
new file mode 100644
index 0000000000..18345ffe07
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/label-tiny/index.ts
@@ -0,0 +1 @@
+export * from './LabelTiny';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-big/TitleBig.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-big/TitleBig.tsx
new file mode 100644
index 0000000000..c3adb1db7e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-big/TitleBig.tsx
@@ -0,0 +1,7 @@
+import { Text, TextProps } from '../../Text';
+
+export type TitleBigProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export function TitleBig<T extends React.ElementType = 'span'>(props: TitleBigProps<T>) {
+  return <Text variant="titleBig" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-big/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-big/index.ts
new file mode 100644
index 0000000000..2996732219
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-big/index.ts
@@ -0,0 +1 @@
+export * from './TitleBig';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-large/TitleLarge.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-large/TitleLarge.tsx
new file mode 100644
index 0000000000..a358c50dd0
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-large/TitleLarge.tsx
@@ -0,0 +1,7 @@
+import { Text, TextProps } from '../../Text';
+
+export type TitleLargeProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export function TitleLarge<T extends React.ElementType = 'span'>(props: TitleLargeProps<T>) {
+  return <Text variant="titleLarge" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-large/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-large/index.ts
new file mode 100644
index 0000000000..639150a023
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-large/index.ts
@@ -0,0 +1 @@
+export * from './TitleLarge';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-medium/TitleMedium.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-medium/TitleMedium.tsx
new file mode 100644
index 0000000000..9fdcb2d964
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-medium/TitleMedium.tsx
@@ -0,0 +1,7 @@
+import { Text, TextProps } from '../../Text';
+
+export type TitleMediumProps<E extends React.ElementType = 'span'> = TextProps<E>;
+
+export function TitleMedium<T extends React.ElementType = 'span'>(props: TitleMediumProps<T>) {
+  return <Text variant="titleMedium" {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-medium/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-medium/index.ts
new file mode 100644
index 0000000000..d6dae53948
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/components/title-medium/index.ts
@@ -0,0 +1 @@
+export * from './TitleMedium';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/index.ts
new file mode 100644
index 0000000000..3a99e2dd04
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/text/index.ts
@@ -0,0 +1,2 @@
+export * from './Text';
+export * from './components';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx
deleted file mode 100644
index b68da08c18..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Text, TextProps } from './Text';
-
-export type BodySmallProps<E extends React.ElementType = 'span'> = TextProps<E>;
-
-export const BodySmall = <T extends React.ElementType = 'span'>(props: BodySmallProps<T>) => (
-  <Text variant="bodySmall" {...props} />
-);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx
deleted file mode 100644
index 402153fa6c..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Text, TextProps } from './Text';
-
-export type BodySmallSemiBoldProps<E extends React.ElementType = 'span'> = TextProps<E>;
-
-export const BodySmallSemiBold = <T extends React.ElementType = 'span'>(
-  props: BodySmallSemiBoldProps<T>,
-) => <Text variant="bodySmallSemibold" {...props} />;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx
deleted file mode 100644
index 75a6ac3d39..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Text, TextProps } from './Text';
-
-export type FootnoteMiniProps<E extends React.ElementType = 'span'> = TextProps<E>;
-
-export const FootnoteMini = <T extends React.ElementType = 'span'>(props: FootnoteMiniProps<T>) => (
-  <Text variant="footnoteMini" {...props} />
-);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx
deleted file mode 100644
index 9bb7dc7b03..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Label.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Text } from './Text';
-import { TextProps } from './Text';
-
-export type LabelProps<T extends React.ElementType = 'label'> = TextProps<T>;
-
-export const Label = <T extends React.ElementType = 'label'>(props: LabelProps<T>) => {
-  return <Text as="label" {...props} />;
-};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
deleted file mode 100644
index c8dc9865cc..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Text, TextProps } from './Text';
-
-export type LabelTinyProps<E extends React.ElementType = 'span'> = TextProps<E>;
-
-export const LabelTiny = <T extends React.ElementType = 'span'>(props: LabelTinyProps<T>) => (
-  <Text variant="labelTiny" {...props} />
-);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx
deleted file mode 100644
index 8060af731e..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Text, TextProps } from './Text';
-
-export type TitleBigProps<E extends React.ElementType = 'span'> = TextProps<E>;
-
-export const TitleBig = <T extends React.ElementType = 'span'>(props: TitleBigProps<T>) => (
-  <Text variant="titleBig" {...props} />
-);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx
deleted file mode 100644
index d133bf3083..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Text, TextProps } from './Text';
-
-export type TitleLargeProps<E extends React.ElementType = 'span'> = TextProps<E>;
-
-export const TitleLarge = <T extends React.ElementType = 'span'>(props: TitleLargeProps<T>) => (
-  <Text variant="titleLarge" {...props} />
-);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx
deleted file mode 100644
index 5c4c2852e6..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Text, TextProps } from './Text';
-
-export type TitleMediumProps<E extends React.ElementType = 'span'> = TextProps<E>;
-
-export const TitleMedium = <T extends React.ElementType = 'span'>(props: TitleMediumProps<T>) => (
-  <Text variant="titleMedium" {...props} />
-);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/index.ts
deleted file mode 100644
index 5e73f059c8..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export * from './BodySmall';
-export * from './BodySmallSemiBold';
-export * from './FootnoteMini';
-export * from './LabelTiny';
-export * from './Text';
-export * from './TitleBig';
-export * from './TitleLarge';
-export * from './TitleMedium';
-export * from '../link/Link';
-export * from './Label';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts
index 121bb2af89..8723c9c6fe 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts
@@ -72,6 +72,7 @@ export type Typography =
   | 'bodySmall'
   | 'bodySmallSemibold'
   | 'labelTiny'
+  | 'labelTinySemiBold'
   | 'footnoteMini';
 
 export interface TypographyProperties {
@@ -114,6 +115,12 @@ export const typography: Record<Typography, TypographyProperties> = {
   },
   labelTiny: {
     fontFamily: Fonts.label,
+    fontWeight: FontWeights.regular,
+    fontSize: FontSizes.tiny,
+    lineHeight: LineHeights.tiny,
+  },
+  labelTinySemiBold: {
+    fontFamily: Fonts.label,
     fontWeight: FontWeights.semiBold,
     fontSize: FontSizes.tiny,
     lineHeight: LineHeights.tiny,