From a4c4684f7779c4223e8100a4beccbd24f5a0d0c3 Mon Sep 17 00:00:00 2001
From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Fri, 20 Sep 2024 10:03:29 +0200
Subject: [PATCH] SONAR-23093 New typography tailwind classes

---
 .../src/components/Accordion.tsx              |   2 +-
 .../design-system/src/components/Banner.tsx   |   2 +-
 .../design-system/src/components/BarChart.tsx |   2 +-
 .../src/components/Breadcrumbs.tsx            |   2 +-
 .../src/components/BubbleChart.tsx            |   4 +-
 .../src/components/CodeSnippet.tsx            |   2 +-
 .../src/components/DropdownMenu.tsx           |   4 +-
 .../design-system/src/components/FacetBox.tsx |   2 +-
 .../src/components/FacetItem.tsx              |   4 +-
 .../src/components/FailedQGConditionLink.tsx  |   2 +-
 .../design-system/src/components/FlowStep.tsx |   2 +-
 .../src/components/Histogram.tsx              |   2 +-
 .../src/components/HtmlFormatter.tsx          |  10 +-
 .../components/IlllustredSelectionCard.tsx    |   2 +-
 .../design-system/src/components/Link.tsx     |   2 +-
 .../src/components/LocationMarker.tsx         |   2 +-
 .../src/components/NavBarTabs.tsx             |   6 +-
 .../src/components/NewCodeLegend.tsx          |   2 +-
 .../design-system/src/components/Pill.tsx     |   2 +-
 .../src/components/SelectionCard.tsx          |   4 +-
 .../src/components/SpotlightTour.tsx          |   4 +-
 .../design-system/src/components/Tabs.tsx     |   2 +-
 .../design-system/src/components/Text.tsx     |   4 +-
 .../design-system/src/components/Tooltip.tsx  |   5 +-
 .../src/components/TutorialStep.tsx           |   8 +-
 .../src/components/__tests__/Banner-test.tsx  |   2 +-
 .../__tests__/NewCodeLegend-test.tsx          |   3 +-
 .../__snapshots__/CodeSnippet-test.tsx.snap   |  60 +----
 .../__snapshots__/Histogram-test.tsx.snap     |  15 +-
 .../__snapshots__/LineFinding-test.tsx.snap   |   5 +-
 .../__snapshots__/LineWrapper-test.tsx.snap   |   5 +-
 .../src/components/code-line/LineFinding.tsx  |   2 +-
 .../src/components/code-line/LineMarker.tsx   |   2 +-
 .../src/components/code-line/LineStyles.tsx   |   2 +-
 .../src/components/icons/RequiredIcon.tsx     |   2 +-
 .../src/components/input/DatePicker.tsx       |   2 +-
 .../src/components/input/DiscreetSelect.tsx   |   2 +-
 .../src/components/input/InputField.tsx       |   2 +-
 .../src/components/input/InputMultiSelect.tsx |   2 +-
 .../src/components/input/InputSearch.tsx      |   4 +-
 .../input/SearchSelectDropdownControl.tsx     |   2 +-
 .../src/components/lists/NumberedListItem.tsx |   2 +-
 .../src/components/modal/ModalBody.tsx        |   2 +-
 .../src/components/modal/ModalHeader.tsx      |   4 +-
 .../__snapshots__/ModalBody-test.tsx.snap     |   5 +-
 .../__snapshots__/ModalHeader-test.tsx.snap   |  20 +-
 .../subnavigation/SubnavigationAccordion.tsx  |   2 +-
 .../subnavigation/SubnavigationHeading.tsx    |   2 +-
 .../subnavigation/SubnavigationItem.tsx       |   2 +-
 .../subnavigation/SubnavigationSubheading.tsx |   2 +-
 .../__tests__/toast-utils-test.tsx            |   4 +-
 .../components/toast-message/toast-utils.tsx  |   5 +-
 .../sonar-aligned/components/FlagMessage.tsx  |   2 +-
 .../components/FlagMessageV2.tsx              |   4 +-
 .../src/sonar-aligned/components/Table.tsx    |   6 +-
 .../components/buttons/Button.tsx             |   2 +-
 .../components/typography/Note.tsx            |   2 +-
 .../components/typography/Title.tsx           |   8 +-
 .../main/js/app/components/FormattingHelp.tsx |   2 +-
 .../main/js/app/components/GlobalFooter.tsx   |   4 +-
 .../app/components/NonAdminPagesContainer.tsx |   2 +-
 .../src/main/js/app/components/NotFound.tsx   |   2 +-
 .../js/app/components/PluginRiskConsent.tsx   |   2 +-
 .../main/js/app/components/ResetPassword.tsx  |   2 +-
 .../IndexationNotificationRenderer.tsx        |   2 +-
 .../ComponentNavProjectBindingErrorNotif.tsx  |   2 +-
 .../PromotionNotification.tsx                 |   2 +-
 .../src/main/js/apps/account/Account.tsx      |   2 +-
 .../js/apps/account/components/UserCard.tsx   |   2 +-
 .../notifications/GlobalNotifications.tsx     |   2 +-
 .../account/notifications/Notifications.tsx   |   4 +-
 .../notifications/ProjectNotifications.tsx    |   2 +-
 .../main/js/apps/account/profile/Profile.tsx  |   4 +-
 .../js/apps/account/projects/ProjectCard.tsx  |   2 +-
 .../main/js/apps/account/security/Tokens.tsx  |   2 +-
 .../components/AuditAppRenderer.tsx           |   2 +-
 .../components/BackgroundTasksApp.tsx         |   2 +-
 .../components/StatPendingCount.tsx           |   2 +-
 .../components/StatPendingTime.tsx            |   2 +-
 .../components/StatStillFailing.tsx           |   4 +-
 .../background-tasks/components/Stats.tsx     |   2 +-
 .../ChangeAdminPasswordAppRenderer.tsx        |   2 +-
 .../apps/code/components/CodeAppRenderer.tsx  |   4 +-
 .../components/CodingRulesApp.tsx             |   2 +-
 .../coding-rules/components/PageActions.tsx   |   2 +-
 .../coding-rules/components/ProfileFacet.tsx  |   4 +-
 .../components/RuleDetailsHeaderActions.tsx   |   6 +-
 .../components/RuleDetailsHeaderMeta.tsx      |   2 +-
 .../coding-rules/components/RuleListItem.tsx  |  14 +-
 .../components/ComponentMeasuresApp.tsx       |   2 +-
 .../components/MeasureHeader.tsx              |   4 +-
 .../drilldown/BubbleChartView.tsx             |   6 +-
 .../drilldown/ComponentsList.tsx              |   6 +-
 .../sidebar/DomainSubnavigation.tsx           |   2 +-
 .../Azure/AzurePersonalAccessTokenForm.tsx    |   4 +-
 .../Azure/AzureProjectCreateRenderer.tsx      |   2 +-
 .../BitbucketCloudPersonalAccessTokenForm.tsx |   4 +-
 .../BitbucketCloudProjectCreateRender.tsx     |   2 +-
 .../BitbucketCloudSearchForm.tsx              |   2 +-
 .../BitbucketProjectCreateRenderer.tsx        |   2 +-
 ...BitbucketServerPersonalAccessTokenForm.tsx |   4 +-
 .../project/CreateProjectModeSelection.tsx    |   2 +-
 .../Github/GitHubProjectCreateRenderer.tsx    |   2 +-
 .../Gitlab/GItlabPersonalAccessTokenForm.tsx  |   4 +-
 .../Gitlab/GitlabProjectCreateRenderer.tsx    |   2 +-
 .../Gitlab/GitlabProjectSelectionForm.tsx     |   2 +-
 .../create/project/components/AlmRepoItem.tsx |  12 +-
 .../components/NewCodeDefinitionSelection.tsx |   2 +-
 .../project/components/RepositoryList.tsx     |   4 +-
 .../project/manual/ManualProjectCreate.tsx    |   4 +-
 .../src/main/js/apps/groups/GroupsApp.tsx     |   2 +-
 .../js/apps/groups/components/ListItem.tsx    |   2 +-
 .../components/ComponentBreadcrumbs.tsx       |   2 +-
 .../js/apps/issues/components/IssueHeader.tsx |   2 +-
 .../issues/components/IssueReviewHistory.tsx  |   8 +-
 .../IssueReviewHistoryAndComments.tsx         |   2 +-
 .../js/apps/issues/components/IssuesApp.tsx   |   2 +-
 .../js/apps/issues/components/NoIssues.tsx    |   2 +-
 .../js/apps/issues/components/NoMyIssues.tsx  |   2 +-
 .../js/apps/issues/components/PageActions.tsx |   2 +-
 .../IssueItemLocationsQuantity.tsx            |   2 +-
 .../issues-subnavigation/IssueLocation.tsx    |   9 +-
 .../IssueLocationsCrossFile.tsx               |   2 +-
 .../js/apps/issues/sidebar/FiltersHeader.tsx  |   2 +-
 .../js/apps/maintenance/components/App.tsx    |   2 +-
 .../src/main/js/apps/marketplace/App.tsx      |   2 +-
 .../src/main/js/apps/marketplace/Header.tsx   |   2 +-
 .../components/PluginAvailable.tsx            |   2 +-
 .../components/PluginChangeLog.tsx            |   2 +-
 .../components/PluginDescription.tsx          |   2 +-
 .../components/PluginInstalled.tsx            |   2 +-
 .../marketplace/components/PluginUpdates.tsx  |   2 +-
 .../apps/overview/branches/ActivityPanel.tsx  |   2 +-
 .../js/apps/overview/branches/Analysis.tsx    |   6 +-
 .../overview/branches/BranchMetaTopBar.tsx    |   4 +-
 .../branches/BranchOverviewRenderer.tsx       |   2 +-
 .../main/js/apps/overview/branches/Event.tsx  |   2 +-
 .../branches/NewCodeMeasuresPanel.tsx         |   4 +-
 .../branches/OverallCodeMeasuresPanel.tsx     |   2 +-
 .../overview/branches/PromotedSection.tsx     |   4 +-
 .../branches/QualityGateCondition.tsx         |   2 +-
 .../overview/branches/QualityGatePanel.tsx    |   4 +-
 .../branches/QualityGatePanelSection.tsx      |   2 +-
 .../branches/SoftwareImpactMeasureCard.tsx    |   4 +-
 .../overview/branches/SonarLintPromotion.tsx  |   2 +-
 .../overview/components/AfterMergeNote.tsx    |   2 +-
 .../components/IssueMeasuresCardInner.tsx     |   2 +-
 .../overview/components/LastAnalysisLabel.tsx |   2 +-
 .../apps/overview/components/MeasuresCard.tsx |   2 +-
 .../components/MeasuresCardNumber.tsx         |   2 +-
 .../components/MeasuresCardPercent.tsx        |   6 +-
 .../BranchQualityGateConditions.tsx           |   6 +-
 .../pullRequests/MeasuresCardPanel.tsx        |  10 +-
 .../pullRequests/PullRequestMetaTopBar.tsx    |   4 +-
 .../pullRequests/PullRequestOverview.tsx      |   2 +-
 .../overview/pullRequests/SonarLintAd.tsx     |   8 +-
 .../permission-templates/components/Home.tsx  |   2 +-
 .../components/Template.tsx                   |   2 +-
 .../components/PermissionsGlobalApp.tsx       |   2 +-
 .../components/PermissionsProjectApp.tsx      |   2 +-
 .../ProjectActivityAnalysesList.tsx           |   8 +-
 .../components/ProjectActivityAnalysis.tsx    |   4 +-
 .../components/ProjectActivityPageFilters.tsx |   2 +-
 .../projectBranches/ProjectBranchesApp.tsx    |   2 +-
 .../src/main/js/apps/projectDeletion/App.tsx  |   2 +-
 .../js/apps/projectDump/ProjectDumpApp.tsx    |   4 +-
 .../js/apps/projectDump/components/Import.tsx |   2 +-
 .../ProjectInformationApp.tsx                 |   2 +-
 .../main/js/apps/projectKey/ProjectKeyApp.tsx |   2 +-
 .../main/js/apps/projectKey/UpdateForm.tsx    |   4 +-
 .../js/apps/projectLinks/ProjectLinksApp.tsx  |   2 +-
 .../BranchNewCodeDefinitionSettingModal.tsx   |   2 +-
 .../ProjectNewCodeDefinitionApp.tsx           |   2 +-
 .../ProjectQualityGateAppRenderer.tsx         |   2 +-
 .../ProjectQualityProfilesAppRenderer.tsx     |   2 +-
 .../apps/projects/components/AllProjects.tsx  |   2 +-
 .../components/EmptyFavoriteSearch.tsx        |   4 +-
 .../projects/components/EmptyInstance.tsx     |   4 +-
 .../components/NoFavoriteProjects.tsx         |   6 +-
 .../apps/projects/components/PageHeader.tsx   |   4 +-
 .../apps/projects/components/PageSidebar.tsx  |   4 +-
 .../projects/components/PerspectiveSelect.tsx |   4 +-
 .../components/ProjectsSortingSelect.tsx      |   8 +-
 .../components/project-card/ProjectCard.tsx   |  20 +-
 .../project-card/ProjectCardMeasure.tsx       |   2 +-
 .../project-card/ProjectCardMeasures.tsx      |   8 +-
 .../js/apps/projectsManagement/Header.tsx     |   2 +-
 .../ProjectManagementApp.tsx                  |   2 +-
 .../js/apps/quality-gates/components/App.tsx  |   2 +-
 .../components/CaycCompliantBanner.tsx        |   2 +-
 .../ConditionReviewAndUpdateModal.tsx         |   8 +-
 .../quality-gates/components/Conditions.tsx   |  12 +-
 .../components/ConditionsTable.tsx            |   6 +-
 .../components/DetailsContent.tsx             |   6 +-
 .../quality-gates/components/ListHeader.tsx   |   2 +-
 .../components/PermissionItem.tsx             |   2 +-
 ...QualityGatePermissionsAddModalRenderer.tsx |   4 +-
 .../QualityGatePermissionsRenderer.tsx        |   4 +-
 .../compare/ComparisonContainer.tsx           |   2 +-
 .../compare/ComparisonResults.tsx             |   2 +-
 .../components/ProfileNotFound.tsx            |   4 +-
 .../details/ProfileHeader.tsx                 |   8 +-
 .../details/ProfilePermissionsGroup.tsx       |   2 +-
 .../details/ProfilePermissionsUser.tsx        |   2 +-
 .../home/EvolutionDeprecated.tsx              |   2 +-
 .../quality-profiles/home/EvolutionRules.tsx  |   4 +-
 .../home/EvolutionStagnant.tsx                |   2 +-
 .../quality-profiles/home/LanguageSelect.tsx  |   2 +-
 .../apps/quality-profiles/home/PageHeader.tsx |   2 +-
 .../components/EmptyHotspotsPage.tsx          |   2 +-
 .../HotspotDisabledFilterTooltip.tsx          |   4 +-
 .../components/HotspotHeader.tsx              |   2 +-
 .../components/HotspotHeaderRightSection.tsx  |   8 +-
 .../components/HotspotList.tsx                |   4 +-
 .../components/HotspotListItem.tsx            |   2 +-
 .../components/HotspotListMeta.tsx            |   4 +-
 .../components/HotspotReviewHistory.tsx       |   8 +-
 .../HotspotReviewHistoryAndComments.tsx       |   2 +-
 .../components/HotspotSidebarHeader.tsx       |   4 +-
 .../components/StatusUpdateSuccessModal.tsx   |   4 +-
 ...HotspotDisabledFilterTooltip-test.tsx.snap |   4 +-
 .../components/status/StatusDescription.tsx   |   4 +-
 .../js/apps/sessions/components/Login.tsx     |   2 +-
 .../js/apps/sessions/components/Logout.tsx    |   2 +-
 .../apps/sessions/components/Unauthorized.tsx |   2 +-
 .../components/SettingsAppRenderer.tsx        |   2 +-
 .../components/SettingsSearchRenderer.tsx     |   2 +-
 .../AlmBindingDefinitionFormRenderer.tsx      |   2 +-
 .../authentication/ProvisioningSection.tsx    |   6 +-
 .../EmailNotificationConfiguration.tsx        |  12 +-
 .../EmailNotificationOverview.tsx             |   6 +-
 .../email-notification/EmailTestModal.tsx     |   2 +-
 .../settings/encryption/EncryptionApp.tsx     |   2 +-
 .../js/apps/system/components/SystemApp.tsx   |   2 +-
 .../src/main/js/apps/users/UsersApp.tsx       |   6 +-
 .../js/apps/users/components/TokensForm.tsx   |   4 +-
 .../users/components/UserListItemIdentity.tsx |   2 +-
 .../src/main/js/apps/web-api-v2/WebApiApp.tsx |   2 +-
 .../web-api-v2/components/ApiParameters.tsx   |   2 +-
 .../js/apps/web-api/components/WebApiApp.tsx  |   2 +-
 .../main/js/apps/webhooks/components/App.tsx  |   2 +-
 .../SourceViewer/SourceViewerHeader.tsx       |  30 +--
 .../components/DuplicationPopup.tsx           |   2 +-
 .../activity-graph/AddGraphMetric.tsx         |   2 +-
 .../DefinitionChangeEventInner.tsx            |   4 +-
 .../components/activity-graph/EventInner.tsx  |   6 +-
 .../activity-graph/GraphsHeader.tsx           |   2 +-
 .../activity-graph/GraphsLegendItem.tsx       |   5 +-
 .../activity-graph/GraphsTooltips.tsx         |   2 +-
 .../RichQualityGateEventInner.tsx             |   4 +-
 .../js/components/charts/AdvancedTimeline.tsx |   4 +-
 .../AdvancedTimeline-test.tsx.snap            | 208 +++++++++---------
 .../LanguageDistribution-test.tsx.snap        |   5 +-
 .../js/components/common/ActivityLink.tsx     |   2 +-
 .../main/js/components/common/EmptySearch.tsx |   4 +-
 .../js/components/controls/ListFooter.tsx     |   6 +-
 .../issue/components/IssueActionsBar.tsx      |   2 +-
 .../issue/components/IssueMetaBar.tsx         |   4 +-
 .../components/issue/components/IssueTags.tsx |   4 +-
 .../MeasureIndicator-test.tsx.snap            |   2 +-
 .../NewCodeDefinitionSelector.tsx             |   2 +-
 .../rules/IssueSuggestionCodeTab.tsx          |   6 +-
 .../js/components/rules/RuleDescription.tsx   |   2 +-
 .../tutorials/TutorialSelectionRenderer.tsx   |   6 +-
 .../RepositoryVariables.tsx                   |   4 +-
 .../tutorials/components/AllSet.tsx           |   2 +-
 .../tutorials/components/EditTokenModal.tsx   |   2 +-
 .../components/TokenStepGenerator.tsx         |   2 +-
 .../tutorials/github-action/SecretStep.tsx    |   4 +-
 .../gitlabci/EnvironmentVariablesStep.tsx     |  14 +-
 .../tutorials/other/OtherTutorial.tsx         |   2 +-
 .../main/js/components/ui/AdminPageHeader.tsx |   4 +-
 .../main/js/components/ui/FilesCounter.tsx    |   2 +-
 .../components/workspace/WorkspaceHeader.tsx  |   2 +-
 .../components/workspace/WorkspaceNavItem.tsx |   2 +-
 .../components/measure/Measure.tsx            |  21 +-
 server/sonar-web/tailwind-echoes.js           |  81 +++++++
 server/sonar-web/tailwind-utilities.js        |  93 --------
 server/sonar-web/tailwind.base.config.js      |  53 +----
 279 files changed, 682 insertions(+), 810 deletions(-)
 create mode 100644 server/sonar-web/tailwind-echoes.js
 delete mode 100644 server/sonar-web/tailwind-utilities.js

diff --git a/server/sonar-web/design-system/src/components/Accordion.tsx b/server/sonar-web/design-system/src/components/Accordion.tsx
index f5f464b7fa1..dee353256f2 100644
--- a/server/sonar-web/design-system/src/components/Accordion.tsx
+++ b/server/sonar-web/design-system/src/components/Accordion.tsx
@@ -83,7 +83,7 @@ const accordionStyle = (props: ThemedProps) => css`
     outline 0.2s ease;
 
   & > button {
-    ${tw`sw-body-sm-highlight`}
+    ${tw`sw-typo-semibold`}
   }
   ${tw`sw-rounded-2`}
   ${tw`sw-overflow-hidden`}
diff --git a/server/sonar-web/design-system/src/components/Banner.tsx b/server/sonar-web/design-system/src/components/Banner.tsx
index f7053a03924..a53d34c4341 100644
--- a/server/sonar-web/design-system/src/components/Banner.tsx
+++ b/server/sonar-web/design-system/src/components/Banner.tsx
@@ -114,7 +114,7 @@ const BannerInner = styled.div`
   ${tw`sw-box-border`}
   ${tw`sw-flex sw-items-center sw-justify-between sw-gap-3`}
   ${tw`sw-px-4`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
 `;
 
 const BannerCloseIcon = styled(InteractiveIconBase)<{
diff --git a/server/sonar-web/design-system/src/components/BarChart.tsx b/server/sonar-web/design-system/src/components/BarChart.tsx
index 71a5e4d8828..5b15de8dafe 100644
--- a/server/sonar-web/design-system/src/components/BarChart.tsx
+++ b/server/sonar-web/design-system/src/components/BarChart.tsx
@@ -96,7 +96,7 @@ function Xvalues<T>(
 
     return (
       <BarChartTick
-        className="sw-body-sm sw-cursor-pointer"
+        className="sw-typo-default sw-cursor-pointer"
         dy="-0.5em"
         // eslint-disable-next-line react/no-array-index-key
         key={index}
diff --git a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
index 5d981c9ce65..909515ccd40 100644
--- a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
+++ b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
@@ -179,7 +179,7 @@ export function BreadcrumbsFullWidth(props: Omit<Props, 'innerRef' | 'maxWidth'>
 const BreadcrumbWrapper = styled.nav`
   ${tw`sw-flex sw-items-center`}
   ${tw`sw-truncate`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
 
   color: ${themeContrast('breadcrumb')};
   background-color: ${themeColor('breadcrumb')};
diff --git a/server/sonar-web/design-system/src/components/BubbleChart.tsx b/server/sonar-web/design-system/src/components/BubbleChart.tsx
index bdca3c8f6a7..f398cd08252 100644
--- a/server/sonar-web/design-system/src/components/BubbleChart.tsx
+++ b/server/sonar-web/design-system/src/components/BubbleChart.tsx
@@ -367,7 +367,7 @@ export function BubbleChart<T>(props: BubbleChartProps<T>) {
       <div className="sw-flex sw-items-center sw-justify-end sw-h-control sw-mb-4">
         <Tooltip content={zoomTooltipText}>
           <span>
-            <Note className="sw-body-sm-highlight">{zoomLabel}</Note>
+            <Note className="sw-typo-semibold">{zoomLabel}</Note>
             {': '}
             {zoomLevelLabel}
           </span>
@@ -444,7 +444,7 @@ const BubbleChartGrid = styled.line`
 `;
 
 const BubbleChartTick = styled.text`
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-select-none`}
   fill: ${themeColor('pageContentLight')};
   text-anchor: var(--align);
diff --git a/server/sonar-web/design-system/src/components/CodeSnippet.tsx b/server/sonar-web/design-system/src/components/CodeSnippet.tsx
index 6ca4d79d813..931031b855a 100644
--- a/server/sonar-web/design-system/src/components/CodeSnippet.tsx
+++ b/server/sonar-web/design-system/src/components/CodeSnippet.tsx
@@ -102,7 +102,7 @@ const Wrapper = styled.div`
 
 const StyledClipboardButton = styled(ClipboardButton)`
   ${tw`sw-select-none`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-top-6 sw-right-6`}
   ${tw`sw-absolute`}
 
diff --git a/server/sonar-web/design-system/src/components/DropdownMenu.tsx b/server/sonar-web/design-system/src/components/DropdownMenu.tsx
index c8027c1fc24..50a4cbb9d25 100644
--- a/server/sonar-web/design-system/src/components/DropdownMenu.tsx
+++ b/server/sonar-web/design-system/src/components/DropdownMenu.tsx
@@ -303,7 +303,7 @@ export const DropdownMenuWrapper = styled.ul`
   ${tw`sw-box-border`};
   ${tw`sw-min-w-input-small`}
   ${tw`sw-py-2`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
 
   &:focus {
     outline: none;
@@ -319,7 +319,7 @@ const itemStyle = (props: ThemedProps) => css`
   transition: none;
 
   ${tw`sw-flex sw-items-center`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-box-border`}
   ${tw`sw-w-full`}
   ${tw`sw-text-left`}
diff --git a/server/sonar-web/design-system/src/components/FacetBox.tsx b/server/sonar-web/design-system/src/components/FacetBox.tsx
index f92d58c30a0..22c4e344ce1 100644
--- a/server/sonar-web/design-system/src/components/FacetBox.tsx
+++ b/server/sonar-web/design-system/src/components/FacetBox.tsx
@@ -204,7 +204,7 @@ const Header = styled.div`
 const HeaderTitle = styled.span<{
   disabled?: boolean;
 }>`
-  ${tw`sw-body-sm-highlight`};
+  ${tw`sw-typo-semibold`};
 
   color: ${({ disabled }) =>
     disabled ? themeColor('facetHeaderDisabled') : themeColor('facetHeader')};
diff --git a/server/sonar-web/design-system/src/components/FacetItem.tsx b/server/sonar-web/design-system/src/components/FacetItem.tsx
index 91e258c9f3e..761cecb2b8a 100644
--- a/server/sonar-web/design-system/src/components/FacetItem.tsx
+++ b/server/sonar-web/design-system/src/components/FacetItem.tsx
@@ -102,14 +102,14 @@ BaseFacetItem.displayName = 'FacetItem'; // so that tests don't see the obfuscat
 export const FacetItem = styled(BaseFacetItem)``;
 
 const StyledButton = styled(ButtonSecondary)<{ active?: boolean; small?: boolean }>`
-  ${tw`sw-body-sm`};
+  ${tw`sw-typo-default`};
   ${tw`sw-box-border`};
   ${tw`sw-h-7`};
   ${tw`sw-px-1`};
   ${tw`sw-rounded-1`};
   ${tw`sw-w-full`};
 
-  ${({ small }) => (small ? tw`sw-body-xs sw-pr-0` : '')};
+  ${({ small }) => (small ? tw`sw-typo-sm sw-pr-0` : '')};
 
   --background: ${({ active }) => (active ? themeColor('facetItemSelected') : 'transparent')};
   --backgroundHover: ${({ active }) => (active ? themeColor('facetItemSelected') : 'transparent')};
diff --git a/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx b/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx
index bf35fcfd35d..3704dff64f3 100644
--- a/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx
+++ b/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx
@@ -24,7 +24,7 @@ import { ButtonProps, DangerButtonSecondary } from '../sonar-aligned/components/
 import { ChevronRightIcon } from './icons/ChevronRightIcon';
 
 const StyledFailedQGConditionLink = styled(DangerButtonSecondary)`
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-h-7`}
   ${tw`sw-pl-2`}
   ${tw`sw-pr-1`}
diff --git a/server/sonar-web/design-system/src/components/FlowStep.tsx b/server/sonar-web/design-system/src/components/FlowStep.tsx
index 0803b7d7ce1..1c4ed82be74 100644
--- a/server/sonar-web/design-system/src/components/FlowStep.tsx
+++ b/server/sonar-web/design-system/src/components/FlowStep.tsx
@@ -49,7 +49,7 @@ export function FlowStep(props: Props) {
 const StyledLink = styled(BaseLink)`
   ${tw`sw-p-1 sw-rounded-1/2`}
   ${tw`sw-flex sw-items-center sw-flex-wrap sw-gap-2`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   
   color: ${themeColor('pageContent')};
   border-bottom: none;
diff --git a/server/sonar-web/design-system/src/components/Histogram.tsx b/server/sonar-web/design-system/src/components/Histogram.tsx
index b054114ef41..1aba9da6317 100644
--- a/server/sonar-web/design-system/src/components/Histogram.tsx
+++ b/server/sonar-web/design-system/src/components/Histogram.tsx
@@ -138,7 +138,7 @@ export class Histogram extends React.PureComponent<Props> {
 }
 
 const HistogramTick = styled.text`
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   fill: ${themeColor('pageContentLight')};
 
   ${TooltipWrapper} & {
diff --git a/server/sonar-web/design-system/src/components/HtmlFormatter.tsx b/server/sonar-web/design-system/src/components/HtmlFormatter.tsx
index dd61152a607..84377e23e21 100644
--- a/server/sonar-web/design-system/src/components/HtmlFormatter.tsx
+++ b/server/sonar-web/design-system/src/components/HtmlFormatter.tsx
@@ -22,12 +22,12 @@ import tw from 'twin.macro';
 import { themeBorder, themeColor } from '../helpers';
 
 export const HtmlFormatter = styled.div`
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
 
   a {
     color: ${themeColor('linkDefault')};
     border-bottom: ${themeBorder('default', 'linkDefault')};
-    ${tw`sw-no-underline sw-body-sm-highlight`};
+    ${tw`sw-no-underline sw-typo-semibold`};
 
     &:visited {
       color: ${themeColor('linkDefault')};
@@ -54,7 +54,7 @@ export const HtmlFormatter = styled.div`
   h2,
   h3 {
     color: ${themeColor('pageContentDark')};
-    ${tw`sw-body-md-highlight`}
+    ${tw`sw-typo-lg-semibold`}
     ${tw`sw-my-6`}
   }
 
@@ -62,7 +62,7 @@ export const HtmlFormatter = styled.div`
   h5,
   h6 {
     color: ${themeColor('pageContentDark')};
-    ${tw`sw-body-sm-highlight`}
+    ${tw`sw-typo-semibold`}
     ${tw`sw-mt-6 sw-mb-2`}
   }
 
@@ -128,7 +128,7 @@ export const HtmlFormatter = styled.div`
 
   th {
     ${tw`sw-py-1 sw-px-3`}
-    ${tw`sw-body-sm-highlight`}
+    ${tw`sw-typo-semibold`}
     ${tw`sw-text-center`}
     background-color: ${themeColor('backgroundPrimary')};
     border: ${themeBorder('default')};
diff --git a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx b/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx
index b4cb668ec0d..72895b5662c 100644
--- a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx
+++ b/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx
@@ -48,7 +48,7 @@ export function IllustratedSelectionCard(props: Props) {
 const Note = styled.span`
   color: ${themeColor('pageContentLight')};
 
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
 `;
 
 const ImageContainer = styled.div`
diff --git a/server/sonar-web/design-system/src/components/Link.tsx b/server/sonar-web/design-system/src/components/Link.tsx
index 5138a25c643..5da1315a8a4 100644
--- a/server/sonar-web/design-system/src/components/Link.tsx
+++ b/server/sonar-web/design-system/src/components/Link.tsx
@@ -186,7 +186,7 @@ export const NakedLink = styled(BaseLink)`
 /** @deprecated Use either Link or LinkStandalone from Echoes instead.
  */
 export const DrilldownLink = styled(StyledBaseLink)`
-  ${tw`sw-heading-lg`}
+  ${tw`sw-heading-xl`}
   ${tw`sw-tracking-tight`}
   ${tw`sw-whitespace-nowrap`}
 
diff --git a/server/sonar-web/design-system/src/components/LocationMarker.tsx b/server/sonar-web/design-system/src/components/LocationMarker.tsx
index 979ae3aeebe..fb7dfd480a0 100644
--- a/server/sonar-web/design-system/src/components/LocationMarker.tsx
+++ b/server/sonar-web/design-system/src/components/LocationMarker.tsx
@@ -55,7 +55,7 @@ export const LocationMarker = forwardRef<HTMLDivElement, Props>(InternalLocation
 
 export const StyledMarker = styled.div`
   ${tw`sw-flex sw-grow-0 sw-items-center sw-justify-center`}
-  ${tw`sw-body-sm-highlight`}
+  ${tw`sw-typo-semibold`}
   ${tw`sw-rounded-1/2`}
 
   height: 1.125rem;
diff --git a/server/sonar-web/design-system/src/components/NavBarTabs.tsx b/server/sonar-web/design-system/src/components/NavBarTabs.tsx
index 09740e5e417..35666e032cd 100644
--- a/server/sonar-web/design-system/src/components/NavBarTabs.tsx
+++ b/server/sonar-web/design-system/src/components/NavBarTabs.tsx
@@ -98,7 +98,7 @@ export function DisabledTabLink(props: { label: string; overlay: React.ReactNode
 
 // Styling for <NavLink> due to its special className function, it conflicts when styled with Emotion.
 const NavBarTabLinkWrapper = styled.li`
-  ${tw`sw-body-md`};
+  ${tw`sw-typo-lg`};
   & > a {
     ${tw`sw-pb-3`};
     ${tw`sw-block`};
@@ -122,13 +122,13 @@ const NavBarTabLinkWrapper = styled.li`
   & > a.active > span[data-text],
   & > a[aria-expanded='true'] > span[data-text],
   & > a:active > span {
-    ${tw`sw-body-md-highlight`};
+    ${tw`sw-typo-lg-semibold`};
   }
 
   // This is a hack to have a link take the space of the bold font, so when active other ones are not moving
   & > a > span[data-text]::before {
     ${tw`sw-block`};
-    ${tw`sw-body-md-highlight`};
+    ${tw`sw-typo-lg-semibold`};
     ${tw`sw-h-0`};
     ${tw`sw-overflow-hidden`};
     ${tw`sw-invisible`};
diff --git a/server/sonar-web/design-system/src/components/NewCodeLegend.tsx b/server/sonar-web/design-system/src/components/NewCodeLegend.tsx
index 58f701d369d..7ebad7a3529 100644
--- a/server/sonar-web/design-system/src/components/NewCodeLegend.tsx
+++ b/server/sonar-web/design-system/src/components/NewCodeLegend.tsx
@@ -34,7 +34,7 @@ export const NewCodeLegendIcon = styled.span`
 
 const NewCodeLegendText = styled.span`
   ${tw`sw-align-middle`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-ml-2`}
   color: ${themeColor('graphCursorLineColor')};
 `;
diff --git a/server/sonar-web/design-system/src/components/Pill.tsx b/server/sonar-web/design-system/src/components/Pill.tsx
index 63deaf24560..b6d40d221c7 100644
--- a/server/sonar-web/design-system/src/components/Pill.tsx
+++ b/server/sonar-web/design-system/src/components/Pill.tsx
@@ -84,7 +84,7 @@ export const Pill = forwardRef<HTMLButtonElement, Readonly<PillProps>>(
 );
 
 const reusedStyles = css`
-  ${tw`sw-body-xs`};
+  ${tw`sw-typo-sm`};
   ${tw`sw-w-fit`};
   ${tw`sw-inline-block`};
   ${tw`sw-whitespace-nowrap`};
diff --git a/server/sonar-web/design-system/src/components/SelectionCard.tsx b/server/sonar-web/design-system/src/components/SelectionCard.tsx
index 82317246792..f81c23b68f2 100644
--- a/server/sonar-web/design-system/src/components/SelectionCard.tsx
+++ b/server/sonar-web/design-system/src/components/SelectionCard.tsx
@@ -153,7 +153,7 @@ const StyledContent = styled.div`
 `;
 
 const StyledRecommended = styled.div`
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-py-2 sw-px-4`}
   ${tw`sw-box-border`}
   ${tw`sw-rounded-b-2`}
@@ -172,7 +172,7 @@ const StyledRecommendedIcon = styled(RecommendedIcon)`
 const StyledLabel = styled.label`
   ${tw`sw-flex`}
   ${tw`sw-mb-3 sw-gap-2`}
-  ${tw`sw-body-sm-highlight`}
+  ${tw`sw-typo-semibold`}
 
   color: ${themeColor('selectionCardHeader')};
   cursor: inherit;
diff --git a/server/sonar-web/design-system/src/components/SpotlightTour.tsx b/server/sonar-web/design-system/src/components/SpotlightTour.tsx
index a5481d261f0..caa21689bb6 100644
--- a/server/sonar-web/design-system/src/components/SpotlightTour.tsx
+++ b/server/sonar-web/design-system/src/components/SpotlightTour.tsx
@@ -140,7 +140,7 @@ function TooltipComponent({
 
   return (
     <StyledPopupWrapper
-      className="sw-p-3 sw-body-sm sw-relative sw-border-0"
+      className="sw-p-3 sw-typo-default sw-relative sw-border-0"
       onClick={handleClick}
       style={{ width }}
       zLevel={PopupZLevel.Absolute}
@@ -161,7 +161,7 @@ function TooltipComponent({
           }, 100);
         }}
       >
-        <strong className="sw-body-md-highlight sw-mb-2">{step.title}</strong>
+        <strong className="sw-typo-lg-semibold sw-mb-2">{step.title}</strong>
         <WrapperButton
           className="sw-w-[30px] sw-h-[30px] sw--mt-2 sw--mr-2 sw-flex sw-justify-center"
           {...skipProps}
diff --git a/server/sonar-web/design-system/src/components/Tabs.tsx b/server/sonar-web/design-system/src/components/Tabs.tsx
index 21be271c780..e216eb2b33b 100644
--- a/server/sonar-web/design-system/src/components/Tabs.tsx
+++ b/server/sonar-web/design-system/src/components/Tabs.tsx
@@ -113,7 +113,7 @@ const TabButton = styled(BareButton)<{
   ${tw`sw-relative`};
   ${tw` sw-mb-[-1px]`};
   ${tw`sw-flex sw-items-center`};
-  ${(props) => (props.large ? tw`sw-body-md sw-px-6 sw-py-4` : tw`sw-body-sm sw-px-3 sw-py-1`)}
+  ${(props) => (props.large ? tw`sw-typo-lg sw-px-6 sw-py-4` : tw`sw-typo-default sw-px-3 sw-py-1`)}
   ${tw`sw-font-semibold`};
   ${tw`sw-rounded-t-1`};
 
diff --git a/server/sonar-web/design-system/src/components/Text.tsx b/server/sonar-web/design-system/src/components/Text.tsx
index 7b80879f1fa..08437dcce22 100644
--- a/server/sonar-web/design-system/src/components/Text.tsx
+++ b/server/sonar-web/design-system/src/components/Text.tsx
@@ -163,7 +163,7 @@ export const LightLabel = styled.span`
 export const DarkLabel = styled.label`
   color: ${themeColor('pageContentDark')};
 
-  ${tw`sw-body-sm-highlight`}
+  ${tw`sw-typo-semibold`}
 `;
 
 /** @deprecated Use Text from Echoes instead.
@@ -177,5 +177,5 @@ export const LightPrimary = styled.span`
 export const Highlight = styled.strong`
   color: ${themeColor('pageContentDark')};
 
-  ${tw`sw-body-sm-highlight`}
+  ${tw`sw-typo-semibold`}
 `;
diff --git a/server/sonar-web/design-system/src/components/Tooltip.tsx b/server/sonar-web/design-system/src/components/Tooltip.tsx
index 2ce932bdf20..58862d1a5d0 100644
--- a/server/sonar-web/design-system/src/components/Tooltip.tsx
+++ b/server/sonar-web/design-system/src/components/Tooltip.tsx
@@ -466,7 +466,7 @@ export const TooltipWrapper = styled.div`
   ${tw`sw-block`};
   ${tw`sw-box-border`};
   ${tw`sw-h-auto`};
-  ${tw`sw-body-sm`};
+  ${tw`sw-typo-default`};
 
   &.top {
     margin-top: -${ARROW_MARGIN}px;
@@ -494,7 +494,8 @@ const TooltipWrapperArrow = styled.div`
   ${tw`sw-w-0`};
   ${tw`sw-h-0`};
   ${tw`sw-border-solid`};
-  ${tw`sw-border-transparent`};
+  border-color: var(--echoes-color-support-transparent);
+
   ${TooltipWrapper}.top & {
     border-width: ${ARROW_HEIGHT}px ${ARROW_WIDTH}px 0;
     border-top-color: ${themeColor('tooltipBackground')};
diff --git a/server/sonar-web/design-system/src/components/TutorialStep.tsx b/server/sonar-web/design-system/src/components/TutorialStep.tsx
index c03575a2398..12d050e8890 100644
--- a/server/sonar-web/design-system/src/components/TutorialStep.tsx
+++ b/server/sonar-web/design-system/src/components/TutorialStep.tsx
@@ -38,7 +38,7 @@ export function TutorialStep({ children, title, stepNumber }: Props) {
 
 const StepDetails = styled.div`
   h3 {
-    ${tw`sw-body-sm-highlight`}
+    ${tw`sw-typo-semibold`}
     ${tw`sw-my-2`}
 
     color: ${themeColor('pageContent')};
@@ -47,7 +47,7 @@ const StepDetails = styled.div`
   &,
   h4,
   h5 {
-    ${tw`sw-body-sm`}
+    ${tw`sw-typo-default`}
     ${tw`sw-mb-2`}
 
     color: ${themeColor('pageContent')};
@@ -55,7 +55,7 @@ const StepDetails = styled.div`
 `;
 
 const Title = styled.h2`
-  ${tw`sw-body-md-highlight`}
+  ${tw`sw-typo-lg-semibold`}
   ${tw`sw-inline-block`}
   ${tw`sw-mb-4`}
 
@@ -74,7 +74,7 @@ const Step = styled.li<{ stepNumber?: number }>`
 
     ${tw`sw-inline-block`}
     ${tw`sw-align-middle`}
-    ${tw`sw-heading-md`}
+    ${tw`sw-heading-lg`}
     ${tw`sw-mr-2 sw--mt-1`}
   }
 
diff --git a/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx
index 8a50ced11bc..f4ba243fd5d 100644
--- a/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx
@@ -44,7 +44,7 @@ it('should render with close button', async () => {
 function setupWithProps(props: Partial<FCProps<typeof Banner>> = {}) {
   return renderWithContext(
     <Banner {...props} variant="warning">
-      <Note className="sw-body-sm">{props.children ?? 'Test Message'}</Note>
+      <Note className="sw-typo-default">{props.children ?? 'Test Message'}</Note>
     </Banner>,
   );
 }
diff --git a/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx b/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx
index da35487386d..c7929c29baa 100644
--- a/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx
@@ -26,8 +26,7 @@ it('should render NewCodeLegend', () => {
   render(<NewCodeLegend text="the text" />);
 
   expect(screen.getByText('the text')).toHaveStyle({
-    'font-size': tailwindBaseConfig.theme.fontSize.sm[0],
-    'line-height': tailwindBaseConfig.theme.fontSize.sm[1],
+    font: 'var(--echoes-typography-text-default-regular)',
     'margin-left': tailwindBaseConfig.theme.spacing[2],
   });
 });
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
index 838e266cad2..6b27c088c74 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
@@ -35,10 +35,7 @@ exports[`should highlight code content correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   height: 2.25rem;
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 600;
+  font: var(--echoes-typography-text-default-semi-bold);
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -54,10 +51,7 @@ exports[`should highlight code content correctly 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
+  font: var(--echoes-typography-text-default-regular);
   right: 1.5rem;
   top: 1.5rem;
   position: absolute;
@@ -96,10 +90,7 @@ exports[`should highlight code content correctly 1`] = `
 }
 
 .emotion-6 code {
-  font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-weight: 400;
+  font: var(--echoes-typography-code-default);
   background: rgb(252,252,253);
   color: rgb(51,53,60);
 }
@@ -121,10 +112,7 @@ exports[`should highlight code content correctly 1`] = `
 }
 
 .emotion-6 .hljs-comment {
-  font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-style: italic;
+  font: var(--echoes-typography-code-comment);
   color: rgb(109,111,119);
 }
 
@@ -249,10 +237,7 @@ exports[`should show full size when multiline with no editing 1`] = `
   -ms-flex-align: center;
   align-items: center;
   height: 2.25rem;
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 600;
+  font: var(--echoes-typography-text-default-semi-bold);
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -268,10 +253,7 @@ exports[`should show full size when multiline with no editing 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
+  font: var(--echoes-typography-text-default-regular);
   right: 1.5rem;
   top: 1.5rem;
   position: absolute;
@@ -310,10 +292,7 @@ exports[`should show full size when multiline with no editing 1`] = `
 }
 
 .emotion-6 code {
-  font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-weight: 400;
+  font: var(--echoes-typography-code-default);
   background: rgb(252,252,253);
   color: rgb(51,53,60);
 }
@@ -335,10 +314,7 @@ exports[`should show full size when multiline with no editing 1`] = `
 }
 
 .emotion-6 .hljs-comment {
-  font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-style: italic;
+  font: var(--echoes-typography-code-comment);
   color: rgb(109,111,119);
 }
 
@@ -465,10 +441,7 @@ exports[`should show reduced size when single line with no editing 1`] = `
   -ms-flex-align: center;
   align-items: center;
   height: 2.25rem;
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 600;
+  font: var(--echoes-typography-text-default-semi-bold);
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -484,10 +457,7 @@ exports[`should show reduced size when single line with no editing 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
+  font: var(--echoes-typography-text-default-regular);
   right: 1.5rem;
   top: 1.5rem;
   position: absolute;
@@ -528,10 +498,7 @@ exports[`should show reduced size when single line with no editing 1`] = `
 }
 
 .emotion-6 code {
-  font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-weight: 400;
+  font: var(--echoes-typography-code-default);
   background: rgb(252,252,253);
   color: rgb(51,53,60);
 }
@@ -553,10 +520,7 @@ exports[`should show reduced size when single line with no editing 1`] = `
 }
 
 .emotion-6 .hljs-comment {
-  font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-style: italic;
+  font: var(--echoes-typography-code-comment);
   color: rgb(109,111,119);
 }
 
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap
index 8842fe3afeb..8e31fe80996 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap
@@ -53,10 +53,7 @@ exports[`renders correctly with yValues 1`] = `
 }
 
 .emotion-2 {
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
+  font: var(--echoes-typography-text-default-regular);
   fill: rgb(106,117,144);
 }
 
@@ -142,10 +139,7 @@ exports[`renders correctly with yValues and yTicks 1`] = `
 }
 
 .emotion-2 {
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
+  font: var(--echoes-typography-text-default-regular);
   fill: rgb(106,117,144);
 }
 
@@ -261,10 +255,7 @@ exports[`renders correctly with yValues, yTicks, and yTooltips 1`] = `
 }
 
 .emotion-2 {
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
+  font: var(--echoes-typography-text-default-regular);
   fill: rgb(106,117,144);
 }
 
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap
index 4b2719e5a41..7e61c609169 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap
@@ -24,10 +24,7 @@ exports[`should render correctly as button 1`] = `
   box-sizing: border-box;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 600;
+  font: var(--echoes-typography-text-large-semi-bold);
   cursor: default;
   border: 1px solid rgb(253,162,155);
   color: rgb(62,67,87);
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineWrapper-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineWrapper-test.tsx.snap
index ca308966a94..bb8bcca7efc 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineWrapper-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineWrapper-test.tsx.snap
@@ -9,10 +9,7 @@ exports[`should render with correct styling 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-weight: 400;
+  font: var(--echoes-typography-code-default);
 }
 
 <tbody>
diff --git a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx
index 3d30a04bb25..42a89edee41 100644
--- a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx
+++ b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx
@@ -86,7 +86,7 @@ const LineFindingStyled = styled(BareButton)<{ selected: boolean }>`
   ${tw`sw-w-full`}
   ${tw`sw-box-border`}
   ${(props) => (props.selected ? tw`sw-py-3` : tw`sw-py-2`)};
-  ${(props) => (props.selected ? tw`sw-body-md-highlight` : tw`sw-body-sm`)};
+  ${(props) => (props.selected ? tw`sw-typo-lg-semibold` : tw`sw-typo-default`)};
   ${(props) => (props.selected ? tw`sw-cursor-default` : tw`sw-cursor-pointer`)};
 
   border: ${(props) =>
diff --git a/server/sonar-web/design-system/src/components/code-line/LineMarker.tsx b/server/sonar-web/design-system/src/components/code-line/LineMarker.tsx
index 94517bc24ee..37db11650d7 100644
--- a/server/sonar-web/design-system/src/components/code-line/LineMarker.tsx
+++ b/server/sonar-web/design-system/src/components/code-line/LineMarker.tsx
@@ -59,7 +59,7 @@ function LineMarkerFunc(
 
 const Message = styled.div`
   ${tw`sw-absolute`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-rounded-1/2`}
   ${tw`sw-px-1`}
   ${tw`sw-left-0`}
diff --git a/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx b/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx
index c576954ab47..a4213b78d44 100644
--- a/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx
+++ b/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx
@@ -25,7 +25,7 @@ import { BareButton } from '../../sonar-aligned';
 export const SCMHighlight = styled.h6`
   color: ${themeColor('tooltipHighlight')};
 
-  ${tw`sw-body-sm-highlight`};
+  ${tw`sw-typo-semibold`};
   ${tw`sw-text-right`};
   ${tw`sw-min-w-[6rem]`};
   ${tw`sw-mr-4`};
diff --git a/server/sonar-web/design-system/src/components/icons/RequiredIcon.tsx b/server/sonar-web/design-system/src/components/icons/RequiredIcon.tsx
index cf56db418b3..fe75c4bc716 100644
--- a/server/sonar-web/design-system/src/components/icons/RequiredIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/RequiredIcon.tsx
@@ -26,7 +26,7 @@ export function RequiredIcon(props: React.ComponentPropsWithoutRef<'em'>) {
 }
 
 export const StyledEm = styled.em`
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-not-italic`}
   ${tw`sw-ml-2`}
   color: ${themeColor('inputRequired')};
diff --git a/server/sonar-web/design-system/src/components/input/DatePicker.tsx b/server/sonar-web/design-system/src/components/input/DatePicker.tsx
index 89d4c415549..52b31445c44 100644
--- a/server/sonar-web/design-system/src/components/input/DatePicker.tsx
+++ b/server/sonar-web/design-system/src/components/input/DatePicker.tsx
@@ -157,7 +157,7 @@ export class DatePicker extends React.PureComponent<Props, State> {
                   <div className={classNames('sw-p-2')}>
                     <DayPicker
                       captionLayout="dropdown-buttons"
-                      className="sw-body-sm"
+                      className="sw-typo-default"
                       components={{
                         Caption: CustomCalendarNavigation,
                       }}
diff --git a/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx b/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx
index 2b85c6dd65f..26183140f8b 100644
--- a/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx
+++ b/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx
@@ -81,7 +81,7 @@ const StyledSelect = styled(InputSelect)`
     ${tw`sw-p-0`};
     ${tw`sw-cursor-pointer`};
     ${tw`sw-flex sw-items-center`};
-    ${tw`sw-body-sm`};
+    ${tw`sw-typo-default`};
     ${tw`sw-select-none`};
 
     &:hover {
diff --git a/server/sonar-web/design-system/src/components/input/InputField.tsx b/server/sonar-web/design-system/src/components/input/InputField.tsx
index 3690c438216..ecd47e6d768 100644
--- a/server/sonar-web/design-system/src/components/input/InputField.tsx
+++ b/server/sonar-web/design-system/src/components/input/InputField.tsx
@@ -93,7 +93,7 @@ const baseStyle = (props: ThemedProps) => css`
   width: var(--inputSize);
   transition: border-color 0.2s ease;
 
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-box-border`}
   ${tw`sw-rounded-2`}
   ${tw`sw-px-3 sw-py-2`}
diff --git a/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx b/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx
index 39fbfece029..83e3aeb24eb 100644
--- a/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx
+++ b/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx
@@ -39,7 +39,7 @@ export function InputMultiSelect(props: Props) {
 
   return (
     <StyledWrapper
-      className={classNames('sw-flex sw-justify-between sw-px-2 sw-body-sm', className)}
+      className={classNames('sw-flex sw-justify-between sw-px-2 sw-typo-default', className)}
       id={id}
       onClick={props.onClick}
       role="combobox"
diff --git a/server/sonar-web/design-system/src/components/input/InputSearch.tsx b/server/sonar-web/design-system/src/components/input/InputSearch.tsx
index 8e88c655fc1..9e9d5d76915 100644
--- a/server/sonar-web/design-system/src/components/input/InputSearch.tsx
+++ b/server/sonar-web/design-system/src/components/input/InputSearch.tsx
@@ -210,7 +210,7 @@ export const StyledInputWrapper = styled.div`
     ${tw`sw-rounded-2`}
     ${tw`sw-box-border`}
     ${tw`sw-pl-10`}
-    ${tw`sw-body-sm`}
+    ${tw`sw-typo-default`}
     ${tw`sw-w-full sw-h-control`}
 
     &::placeholder {
@@ -259,7 +259,7 @@ export const StyledNote = styled.span`
 
   ${tw`sw-absolute`}
   ${tw`sw-left-12 sw-right-10`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-text-right`}
   ${tw`sw-truncate`}
   ${tw`sw-pointer-events-none`}
diff --git a/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx b/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx
index f8a0ebc09a0..dbfcfb1854f 100644
--- a/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx
+++ b/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx
@@ -118,7 +118,7 @@ const StyledControl = styled.div`
   ${tw`sw-rounded-2`};
   ${tw`sw-box-border`};
   ${tw`sw-px-3`};
-  ${tw`sw-body-sm`};
+  ${tw`sw-typo-default`};
   ${tw`sw-h-control`};
   ${tw`sw-leading-6`};
   ${tw`sw-cursor-pointer`};
diff --git a/server/sonar-web/design-system/src/components/lists/NumberedListItem.tsx b/server/sonar-web/design-system/src/components/lists/NumberedListItem.tsx
index 534425515e6..52261123f24 100644
--- a/server/sonar-web/design-system/src/components/lists/NumberedListItem.tsx
+++ b/server/sonar-web/design-system/src/components/lists/NumberedListItem.tsx
@@ -34,7 +34,7 @@ export const NumberedListItem = styled.li`
     border-radius: 20px;
     content: counter(li);
 
-    ${tw`sw-body-sm-highlight`}
+    ${tw`sw-typo-semibold`}
     ${tw`sw-p-1`}
     ${tw`sw-mr-3`}
     ${tw`sw-inline-block`}
diff --git a/server/sonar-web/design-system/src/components/modal/ModalBody.tsx b/server/sonar-web/design-system/src/components/modal/ModalBody.tsx
index fae7eda53cf..4bb9f68df7a 100644
--- a/server/sonar-web/design-system/src/components/modal/ModalBody.tsx
+++ b/server/sonar-web/design-system/src/components/modal/ModalBody.tsx
@@ -40,7 +40,7 @@ export function ModalBody({ children, isScrollable = true, isOverflowVisible = f
 }
 
 const StyledMain = styled.div`
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-px-3`} // to accomodate a possible scrollbar
   ${tw`-sw-mx-3`}
   ${tw`sw-my-12`}
diff --git a/server/sonar-web/design-system/src/components/modal/ModalHeader.tsx b/server/sonar-web/design-system/src/components/modal/ModalHeader.tsx
index 113c7351864..2355e5c1ef5 100644
--- a/server/sonar-web/design-system/src/components/modal/ModalHeader.tsx
+++ b/server/sonar-web/design-system/src/components/modal/ModalHeader.tsx
@@ -37,14 +37,14 @@ export function ModalHeader({ description, title }: Props) {
 }
 
 const Description = styled.p`
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-mt-2`}
 
   color: ${themeColor('pageContent')};
 `;
 
 const Title = styled.h2`
-  ${tw`sw-heading-lg`}
+  ${tw`sw-heading-xl`}
 
   color: ${themeColor('pageTitle')};
 `;
diff --git a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap
index ecd2e830c0d..b2f36f6b060 100644
--- a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap
@@ -2,10 +2,7 @@
 
 exports[`renders with children 1`] = `
 .emotion-0 {
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
+  font: var(--echoes-typography-text-default-regular);
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   margin-left: -0.75rem;
diff --git a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalHeader-test.tsx.snap b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalHeader-test.tsx.snap
index 96ff38fe463..1e7ed6edeb5 100644
--- a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalHeader-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalHeader-test.tsx.snap
@@ -2,10 +2,7 @@
 
 exports[`should render with title 1`] = `
 .emotion-0 {
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 1.5rem;
-  line-height: 1.75rem;
-  font-weight: 600;
+  font: var(--echoes-typography-heading-xlarge);
   color: rgb(29,33,47);
 }
 
@@ -23,18 +20,12 @@ exports[`should render with title 1`] = `
 
 exports[`should render with title and description 1`] = `
 .emotion-0 {
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 1.5rem;
-  line-height: 1.75rem;
-  font-weight: 600;
+  font: var(--echoes-typography-heading-xlarge);
   color: rgb(29,33,47);
 }
 
 .emotion-2 {
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
+  font: var(--echoes-typography-text-default-regular);
   margin-top: 0.5rem;
   color: rgb(62,67,87);
 }
@@ -58,10 +49,7 @@ exports[`should render with title and description 1`] = `
 
 exports[`should use the default title if not provided 1`] = `
 .emotion-0 {
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 1.5rem;
-  line-height: 1.75rem;
-  font-weight: 600;
+  font: var(--echoes-typography-heading-xlarge);
   color: rgb(29,33,47);
 }
 
diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx
index ded1108c55f..8e68df56f3f 100644
--- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx
+++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx
@@ -82,7 +82,7 @@ export function SubnavigationAccordion(props: Props) {
 const SubnavigationAccordionItem = styled(BareButton)`
   ${tw`sw-flex sw-items-center sw-justify-between`}
   ${tw`sw-box-border`}
-  ${tw`sw-body-sm-highlight`}
+  ${tw`sw-typo-semibold`}
   ${tw`sw-p-4`}
   ${tw`sw-w-full`}
   ${tw`sw-cursor-pointer`}
diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationHeading.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationHeading.tsx
index fc1008ff91f..0c24195963d 100644
--- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationHeading.tsx
+++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationHeading.tsx
@@ -24,7 +24,7 @@ import { themeColor, themeContrast } from '../../helpers/theme';
 export const SubnavigationHeading = styled.div`
   ${tw`sw-flex sw-items-center sw-justify-between`}
   ${tw`sw-box-border`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-p-4`}
   ${tw`sw-w-full`}
 
diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationItem.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationItem.tsx
index 1059fda1364..7372373aab2 100644
--- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationItem.tsx
+++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationItem.tsx
@@ -68,7 +68,7 @@ export function SubnavigationLinkItem({ children, ...props }: NavLinkProps) {
 const ItemBaseStyle = (props: ThemedProps) => css`
   ${tw`sw-flex sw-items-center sw-justify-between`}
   ${tw`sw-box-border`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-py-4 sw-pr-4`}
   ${tw`sw-w-full`}
   ${tw`sw-cursor-pointer`}
diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx
index 1cf80e4e5e0..6b4ebff6bd3 100644
--- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx
+++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx
@@ -24,7 +24,7 @@ import { themeColor, themeContrast } from '../../helpers/theme';
 export const SubnavigationSubheading = styled.div`
   ${tw`sw-flex`}
   ${tw`sw-box-border`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-px-4 sw-pt-6 sw-pb-2`}
   ${tw`sw-w-full`}
 
diff --git a/server/sonar-web/design-system/src/components/toast-message/__tests__/toast-utils-test.tsx b/server/sonar-web/design-system/src/components/toast-message/__tests__/toast-utils-test.tsx
index 41d63e54447..ee77829bfa6 100644
--- a/server/sonar-web/design-system/src/components/toast-message/__tests__/toast-utils-test.tsx
+++ b/server/sonar-web/design-system/src/components/toast-message/__tests__/toast-utils-test.tsx
@@ -33,7 +33,7 @@ it('should call react-toastify with the right args', () => {
   addGlobalErrorMessage(<span>error</span>, { position: 'top-left' });
 
   expect(toast).toHaveBeenCalledWith(
-    <div className="fs-mask sw-body-sm sw-p-3 sw-pb-4" data-testid="global-message__ERROR">
+    <div className="fs-mask sw-typo-default sw-p-3 sw-pb-4" data-testid="global-message__ERROR">
       <span>error</span>
     </div>,
     { icon: <FlagErrorIcon />, type: 'error', position: 'top-left' },
@@ -42,7 +42,7 @@ it('should call react-toastify with the right args', () => {
   addGlobalSuccessMessage('it worked');
 
   expect(toast).toHaveBeenCalledWith(
-    <div className="fs-mask sw-body-sm sw-p-3 sw-pb-4" data-testid="global-message__SUCCESS">
+    <div className="fs-mask sw-typo-default sw-p-3 sw-pb-4" data-testid="global-message__SUCCESS">
       it worked
     </div>,
     { icon: <FlagSuccessIcon />, type: 'success' },
diff --git a/server/sonar-web/design-system/src/components/toast-message/toast-utils.tsx b/server/sonar-web/design-system/src/components/toast-message/toast-utils.tsx
index 4aba037b8a0..128ae48ce7c 100644
--- a/server/sonar-web/design-system/src/components/toast-message/toast-utils.tsx
+++ b/server/sonar-web/design-system/src/components/toast-message/toast-utils.tsx
@@ -45,7 +45,10 @@ export function dismissAllGlobalMessages() {
 
 function createToast(message: ReactNode, level: MessageLevel, overrides?: ToastOptions) {
   return toast(
-    <div className="fs-mask sw-body-sm sw-p-3 sw-pb-4" data-testid={`global-message__${level}`}>
+    <div
+      className="fs-mask sw-typo-default sw-p-3 sw-pb-4"
+      data-testid={`global-message__${level}`}
+    >
       {message}
     </div>,
     {
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessage.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessage.tsx
index 6b05991c12b..792f0a2c8dd 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessage.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessage.tsx
@@ -146,7 +146,7 @@ export const StyledFlag = styled.div<{
     ${tw`sw-overflow-auto`}
     ${tw`sw-text-left`}
     ${tw`sw-px-3 sw-py-2`}
-    ${tw`sw-body-sm`}
+    ${tw`sw-typo-default`}
     color: ${themeContrast('flagMessageBackground')};
   }
 `;
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessageV2.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessageV2.tsx
index 6fe74085ab2..89c765fdb18 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessageV2.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessageV2.tsx
@@ -158,14 +158,14 @@ const IconWrapper = styled.div<{
 `;
 
 const Title = styled.span`
-  ${tw`sw-body-md-highlight`}
+  ${tw`sw-typo-lg-semibold`}
   color: ${themeColor('flagMessageText')};
 `;
 
 const StyledFlagContent = styled.div`
   ${tw`sw-pt-1/2`}
   ${tw`sw-overflow-auto`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
 `;
 
 const DismissButton = styled.button<{
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/Table.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/Table.tsx
index 6de60ff4b2e..8fee1ad857f 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/Table.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/Table.tsx
@@ -84,7 +84,7 @@ export function Table(props: Readonly<TableProps>) {
 
       {caption && (
         <caption>
-          <div className="sw-py-4 sw-text-middle sw-flex sw-justify-center sw-body-sm-highlight">
+          <div className="sw-py-4 sw-text-middle sw-flex sw-justify-center sw-typo-semibold">
             {caption}
           </div>
         </caption>
@@ -286,13 +286,13 @@ const StyledTable = styled.table<{ gridTemplate?: string }>`
 const CellComponentStyled = styled.td`
   color: ${themeColor('pageContent')};
   ${tw`sw-items-center`}
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
   ${tw`sw-py-4 sw-px-2`}
   ${tw`sw-align-middle`}
 
   thead > tr > & {
     color: ${themeColor('pageTitle')};
 
-    ${tw`sw-body-sm-highlight`}
+    ${tw`sw-typo-semibold`}
   }
 `;
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx
index d36d304732a..8c3a171086a 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx
@@ -132,7 +132,7 @@ export const buttonStyle = (props: ThemedProps) => css`
 
   ${tw`sw-inline-flex sw-items-center`}
   ${tw`sw-h-control`}
-  ${tw`sw-body-sm-highlight`}
+  ${tw`sw-typo-semibold`}
   ${tw`sw-py-2 sw-px-4`}
   ${tw`sw-rounded-2`}
   ${tw`sw-cursor-pointer`}
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx
index 8ae52b955d5..279def52d0e 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx
@@ -25,5 +25,5 @@ import { themeColor } from '../../../helpers';
 export const Note = styled.span`
   color: ${themeColor('pageContentLight')};
 
-  ${tw`sw-body-sm`}
+  ${tw`sw-typo-default`}
 `;
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Title.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Title.tsx
index 1abade832f7..30f71f3b4af 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Title.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Title.tsx
@@ -25,7 +25,7 @@ import { themeColor } from '../../../helpers/theme';
 /** @deprecated Use Heading from Echoes instead.
  */
 export const Title = styled.h1`
-  ${tw`sw-heading-lg`}
+  ${tw`sw-heading-xl`}
   ${tw`sw-mb-4`}
   color: ${themeColor('pageTitle')};
 `;
@@ -33,7 +33,7 @@ export const Title = styled.h1`
 /** @deprecated Use Heading from Echoes instead.
  */
 export const SubTitle = styled.h2`
-  ${tw`sw-heading-md`}
+  ${tw`sw-heading-lg`}
   ${tw`sw-mb-4`}
   color: ${themeColor('pageTitle')};
 `;
@@ -43,13 +43,13 @@ export const SubTitle = styled.h2`
 export const HeadingDark = styled.h2`
   color: ${themeColor('pageContentDark')};
 
-  ${tw`sw-body-sm-highlight`}
+  ${tw`sw-typo-semibold`}
 `;
 
 /** @deprecated Use Heading from Echoes instead.
  */
 export const SubHeading = styled.h3`
-  ${tw`sw-body-md-highlight`}
+  ${tw`sw-typo-lg-semibold`}
   ${tw`sw-mb-2`}
   color: ${themeColor('pageContent')};
 `;
diff --git a/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx b/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
index 48b1869c56d..ddb3bbf1659 100644
--- a/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
+++ b/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
@@ -34,7 +34,7 @@ const COLUMNS = ['50%', '50%'];
 
 export default function FormattingHelp() {
   return (
-    <PageContentFontWrapper className="sw-body-md sw-p-6 sw-h-screen">
+    <PageContentFontWrapper className="sw-typo-lg sw-p-6 sw-h-screen">
       <Helmet defer={false} title={translate('formatting.page')} />
       <Title>Formatting Syntax</Title>
       <Table
diff --git a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx
index 88cc3c86170..cf98fb64906 100644
--- a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx
+++ b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx
@@ -50,11 +50,11 @@ export default function GlobalFooter({ hideLoggedInInfo }: Readonly<GlobalFooter
 
   return (
     <StyledFooter className="sw-p-6" id="footer">
-      <PageContentFontWrapper className="sw-body-sm sw-h-full sw-flex sw-flex-col sw-items-stretch">
+      <PageContentFontWrapper className="sw-typo-default sw-h-full sw-flex sw-flex-col sw-items-stretch">
         {appState?.productionDatabase === false && (
           <FlagMessage className="sw-mb-4" id="evaluation_warning" variant="warning">
             <p>
-              <span className="sw-body-md-highlight">
+              <span className="sw-typo-lg-semibold">
                 {intl.formatMessage({ id: 'footer.production_database_warning' })}
               </span>
 
diff --git a/server/sonar-web/src/main/js/app/components/NonAdminPagesContainer.tsx b/server/sonar-web/src/main/js/app/components/NonAdminPagesContainer.tsx
index 6053ebd3de9..fec94ea941a 100644
--- a/server/sonar-web/src/main/js/app/components/NonAdminPagesContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/NonAdminPagesContainer.tsx
@@ -35,7 +35,7 @@ export default function NonAdminPagesContainer() {
   if (component && isApplication(component.qualifier) && !component.canBrowseAllChildProjects) {
     return (
       <CenteredLayout
-        className="sw-py-8 sw-body-md sw-flex sw-flex-col sw-items-center"
+        className="sw-py-8 sw-typo-lg sw-flex sw-flex-col sw-items-center"
         id="code-page"
       >
         <FlagMessage className="it__alert-no-access-all-child-project sw-mt-10" variant="error">
diff --git a/server/sonar-web/src/main/js/app/components/NotFound.tsx b/server/sonar-web/src/main/js/app/components/NotFound.tsx
index 2eb7ca4f6cf..80559d2dd77 100644
--- a/server/sonar-web/src/main/js/app/components/NotFound.tsx
+++ b/server/sonar-web/src/main/js/app/components/NotFound.tsx
@@ -26,7 +26,7 @@ export default function NotFound() {
   return (
     <>
       <Helmet defaultTitle={translate('404_not_found')} defer={false} />
-      <PageContentFontWrapper className="sw-body-md">
+      <PageContentFontWrapper className="sw-typo-lg">
         <CenteredLayout className="sw-flex sw-flex-col sw-items-center">
           <Card className="sw-m-14 sw-w-abs-600">
             <Title>{translate('page_not_found')}</Title>
diff --git a/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx b/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx
index 565db26147f..a94b983f60b 100644
--- a/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx
+++ b/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx
@@ -72,7 +72,7 @@ export function PluginRiskConsent(props: Readonly<PluginRiskConsentProps>) {
       <Helmet defer={false} title={translate('plugin_risk_consent.page')} />
 
       <Card
-        className="sw-body-md sw-min-w-[500px] sw-mx-auto sw-w-[40%] sw-text-center"
+        className="sw-typo-lg sw-min-w-[500px] sw-mx-auto sw-w-[40%] sw-text-center"
         data-testid="plugin-risk-consent-page"
       >
         <Title className="sw-mb-4">{translate('plugin_risk_consent.title')}</Title>
diff --git a/server/sonar-web/src/main/js/app/components/ResetPassword.tsx b/server/sonar-web/src/main/js/app/components/ResetPassword.tsx
index 9835794633f..7e669fc20a0 100644
--- a/server/sonar-web/src/main/js/app/components/ResetPassword.tsx
+++ b/server/sonar-web/src/main/js/app/components/ResetPassword.tsx
@@ -39,7 +39,7 @@ export interface ResetPasswordProps {
 export function ResetPassword({ currentUser }: Readonly<ResetPasswordProps>) {
   return (
     <LargeCenteredLayout className="sw-h-screen sw-pt-10">
-      <PageContentFontWrapper className="sw-body-sm">
+      <PageContentFontWrapper className="sw-typo-default">
         <Helmet defer={false} title={translate('my_account.reset_password.page')} />
         <div className="sw-flex sw-justify-center">
           <div>
diff --git a/server/sonar-web/src/main/js/app/components/indexation/IndexationNotificationRenderer.tsx b/server/sonar-web/src/main/js/app/components/indexation/IndexationNotificationRenderer.tsx
index 63d1429414a..fca28a707dd 100644
--- a/server/sonar-web/src/main/js/app/components/indexation/IndexationNotificationRenderer.tsx
+++ b/server/sonar-web/src/main/js/app/components/indexation/IndexationNotificationRenderer.tsx
@@ -72,7 +72,7 @@ export default function IndexationNotificationRenderer(props: IndexationNotifica
   return (
     <div className={type === undefined ? 'sw-hidden' : ''}>
       <StyledBanner
-        className="sw-body-sm sw-py-3 sw-px-4 sw-gap-4"
+        className="sw-typo-default sw-py-3 sw-px-4 sw-gap-4"
         type={type ?? IndexationNotificationType.Completed}
         aria-live="assertive"
         role="alert"
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavProjectBindingErrorNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavProjectBindingErrorNotif.tsx
index 803a51eaddf..bcc5b4834a4 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavProjectBindingErrorNotif.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavProjectBindingErrorNotif.tsx
@@ -47,7 +47,7 @@ export default function ComponentNavProjectBindingErrorNotif(
   }
 
   return (
-    <StyledBanner className="sw-body-sm sw-py-3 sw-px-4 sw-gap-4">
+    <StyledBanner className="sw-typo-default sw-py-3 sw-px-4 sw-gap-4">
       <FlagWarningIcon />
       <FormattedMessage id="component_navigation.pr_deco.error_detected_X" values={{ action }} />
     </StyledBanner>
diff --git a/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx
index e66abae6eb9..c4387b5af82 100644
--- a/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx
+++ b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx
@@ -52,7 +52,7 @@ export function PromotionNotification(props: CurrentUserContextInterface) {
         <Image alt="SonarQube + SonarLint" height={80} src="/images/sq-sl.svg" />
       </div>
       <PromotionNotificationContent className="sw-flex-1 sw-px-2 sw-py-4">
-        <span className="sw-body-sm-highlight">{translate('promotion.sonarlint.title')}</span>
+        <span className="sw-typo-semibold">{translate('promotion.sonarlint.title')}</span>
         <p className="sw-mt-2">{translate('promotion.sonarlint.content')}</p>
       </PromotionNotificationContent>
       <div className="sw-ml-2 sw-pl-2 sw-flex sw-flex-col sw-items-stretch">
diff --git a/server/sonar-web/src/main/js/apps/account/Account.tsx b/server/sonar-web/src/main/js/apps/account/Account.tsx
index 84a1b46b1f5..66bc4c26dd5 100644
--- a/server/sonar-web/src/main/js/apps/account/Account.tsx
+++ b/server/sonar-web/src/main/js/apps/account/Account.tsx
@@ -57,7 +57,7 @@ export default function Account() {
         )}
 
       <LargeCenteredLayout as="main">
-        <PageContentFontWrapper className="sw-body-sm sw-py-8">
+        <PageContentFontWrapper className="sw-typo-default sw-py-8">
           <Helmet
             defaultTitle={title}
             defer={false}
diff --git a/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx b/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx
index e9ae7d5fa6f..0f4461ab637 100644
--- a/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx
+++ b/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx
@@ -29,7 +29,7 @@ export default function UserCard({ user }: Props) {
   return (
     <>
       <Avatar hash={user.avatar} name={user.name} size="md" />
-      <span className="sw-heading-md fs-mask">{user.name}</span>
+      <span className="sw-heading-lg fs-mask">{user.name}</span>
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.tsx b/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.tsx
index aa7f9a13d9c..741e133ade1 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.tsx
+++ b/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.tsx
@@ -42,7 +42,7 @@ export default function GlobalNotifications(props: Readonly<Props>) {
       </Heading>
 
       {!props.header && (
-        <div className="sw-body-sm-highlight sw-mb-2">{translate('notifications.send_email')}</div>
+        <div className="sw-typo-semibold sw-mb-2">{translate('notifications.send_email')}</div>
       )}
 
       <Table className="sw-w-full" columnCount={2} header={props.header ?? null}>
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx b/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx
index cce33e291ee..4d272bb374d 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx
+++ b/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx
@@ -48,10 +48,10 @@ export function Notifications({
 
   const header = emailOnly ? undefined : (
     <tr>
-      <th className="sw-body-sm-highlight">{translate('events')}</th>
+      <th className="sw-typo-semibold">{translate('events')}</th>
 
       {channels.map((channel) => (
-        <th className="sw-body-sm-highlight sw-text-right" key={channel}>
+        <th className="sw-typo-semibold sw-text-right" key={channel}>
           {translate('notification.channel', channel)}
         </th>
       ))}
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/ProjectNotifications.tsx b/server/sonar-web/src/main/js/apps/account/notifications/ProjectNotifications.tsx
index 48bfa4f5e8c..ac4a396384a 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/ProjectNotifications.tsx
+++ b/server/sonar-web/src/main/js/apps/account/notifications/ProjectNotifications.tsx
@@ -70,7 +70,7 @@ export default function ProjectNotifications({
         <Link to={getProjectUrl(project.project)}>{project.projectName}</Link>
       </div>
       {!header && (
-        <div className="sw-body-sm-highlight sw-mb-2">{translate('notifications.send_email')}</div>
+        <div className="sw-typo-semibold sw-mb-2">{translate('notifications.send_email')}</div>
       )}
 
       <Table
diff --git a/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx b/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx
index 030f84a9681..ef49cf4a4ea 100644
--- a/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx
+++ b/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx
@@ -55,7 +55,7 @@ export function Profile({ currentUser }: ProfileProps) {
 
     return (
       <div className="sw-flex sw-items-center sw-mb-2">
-        <strong className="sw-body-sm-highlight sw-mr-1">{translate('my_profile.login')}:</strong>
+        <strong className="sw-typo-semibold sw-mr-1">{translate('my_profile.login')}:</strong>
         {currentUser.login && <span id="login">{currentUser.login}</span>}
         {isExternalProvider && <UserExternalIdentity user={currentUser} />}
       </div>
@@ -69,7 +69,7 @@ export function Profile({ currentUser }: ProfileProps) {
 
     return (
       <div className="sw-mb-2">
-        <strong className="sw-body-sm-highlight sw-mr-1">{translate('my_profile.email')}:</strong>
+        <strong className="sw-typo-semibold sw-mr-1">{translate('my_profile.email')}:</strong>
         <span id="email">{currentUser.email}</span>
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
index 49d2bc1d7c7..841ff8048f7 100644
--- a/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
+++ b/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
@@ -80,7 +80,7 @@ export default function ProjectCard({ project }: Readonly<Props>) {
             <Tooltip content={qualityGateLabel}>
               <span className="sw-flex sw-items-center">
                 <QualityGateIndicator status={(project.qualityGate as Status) ?? 'NONE'} />
-                <LightPrimary className="sw-ml-2 sw-body-sm-highlight">{formatted}</LightPrimary>
+                <LightPrimary className="sw-ml-2 sw-typo-semibold">{formatted}</LightPrimary>
               </span>
             </Tooltip>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/account/security/Tokens.tsx b/server/sonar-web/src/main/js/apps/account/security/Tokens.tsx
index f177b304a49..a0d7051dda6 100644
--- a/server/sonar-web/src/main/js/apps/account/security/Tokens.tsx
+++ b/server/sonar-web/src/main/js/apps/account/security/Tokens.tsx
@@ -35,7 +35,7 @@ export default function Tokens({ login }: Readonly<Props>) {
         {translate('my_account.security')}
       </Heading>
 
-      <div className="sw-body-md sw-mb-4 sw-mr-4">
+      <div className="sw-typo-lg sw-mb-4 sw-mr-4">
         <InstanceMessage message={translate('my_account.tokens_description')} />
       </div>
 
diff --git a/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx b/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx
index a60cd4d2b49..cadc1390946 100644
--- a/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx
@@ -78,7 +78,7 @@ export default function AuditAppRenderer(props: Readonly<AuditAppRendererProps>)
 
   return (
     <LargeCenteredLayout as="main" id="audit-logs-page">
-      <PageContentFontWrapper className="sw-body-sm sw-my-8">
+      <PageContentFontWrapper className="sw-typo-default sw-my-8">
         <Helmet title={translate('audit_logs.page')} />
 
         <Title>{translate('audit_logs.page')}</Title>
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx
index c5b584c14ea..dca8016317f 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx
@@ -228,7 +228,7 @@ export class BackgroundTasksApp extends React.PureComponent<Props, State> {
 
     return (
       <LargeCenteredLayout id="background-tasks">
-        <PageContentFontWrapper className="sw-my-4 sw-body-sm">
+        <PageContentFontWrapper className="sw-my-4 sw-typo-default">
           <Suggestions suggestion={DocLink.BackgroundTasks} />
           <Helmet defer={false} title={translate('background_tasks.page')} />
           <Spinner isLoading={!types}>
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx
index 129f1d84c68..60c45253ebb 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx
@@ -38,7 +38,7 @@ function StatPendingCount({ appState, onCancelAllPending, pendingCount }: Readon
 
   return (
     <div className="sw-flex sw-items-center">
-      <span className="sw-body-md-highlight sw-mr-1">{pendingCount}</span>
+      <span className="sw-typo-lg-semibold sw-mr-1">{pendingCount}</span>
       {translate('background_tasks.pending')}
       {appState.canAdmin && pendingCount > 0 && (
         <ConfirmButton
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx
index 20f5542e456..593e204266e 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx
@@ -37,7 +37,7 @@ export default function StatPendingTime({ pendingCount, pendingTime }: Readonly<
   }
   return (
     <div className="sw-flex sw-items-center">
-      <span className="sw-body-md-highlight sw-mr-1">{formatMeasure(pendingTime, 'MILLISEC')}</span>
+      <span className="sw-typo-lg-semibold sw-mr-1">{formatMeasure(pendingTime, 'MILLISEC')}</span>
       {translate('background_tasks.pending_time')}
       <HelpTooltip
         className="sw-ml-1"
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx
index 9124ce7b2ab..6ce2fada30f 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx
@@ -36,14 +36,14 @@ export default function StatStillFailing({ failingCount, onShowFailing }: Readon
     <div className="sw-flex sw-items-center ">
       {failingCount > 0 ? (
         <StandoutLink
-          className="sw-body-md-highlight sw-align-baseline"
+          className="sw-typo-lg-semibold sw-align-baseline"
           to="#"
           onClick={onShowFailing}
         >
           {failingCount}
         </StandoutLink>
       ) : (
-        <span className="sw-body-md-highlight">{failingCount}</span>
+        <span className="sw-typo-lg-semibold">{failingCount}</span>
       )}
       <span className="sw-ml-1">{translate('background_tasks.failures')}</span>
       <HelpTooltip className="sw-ml-1" overlay={translate('background_tasks.failing_count')}>
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.tsx
index c746616f053..690495b61ae 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.tsx
@@ -34,7 +34,7 @@ export interface Props {
 
 export default function Stats({ component, pendingCount, pendingTime, ...props }: Readonly<Props>) {
   return (
-    <section className="sw-flex sw-items-center sw-my-4 sw-gap-8 sw-body-md">
+    <section className="sw-flex sw-items-center sw-my-4 sw-gap-8 sw-typo-lg">
       <StatPendingCount onCancelAllPending={props.onCancelAllPending} pendingCount={pendingCount} />
       {!component && (
         <>
diff --git a/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx b/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx
index 97019251bdd..fbd6149c099 100644
--- a/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx
@@ -66,7 +66,7 @@ export default function ChangeAdminPasswordAppRenderer(
     <CenteredLayout className="sw-h-screen">
       <Helmet defer={false} title={translate('users.change_admin_password.page')} />
 
-      <PageContentFontWrapper className="sw-body-sm sw-flex sw-flex-col sw-items-center sw-justify-center">
+      <PageContentFontWrapper className="sw-typo-default sw-flex sw-flex-col sw-items-center sw-justify-center">
         <Card className="sw-mx-auto sw-mt-24 sw-w-abs-600 sw-flex sw-items-stretch sw-flex-col">
           {success ? (
             <FlagMessage className="sw-my-8" variant="success">
diff --git a/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx b/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx
index 9b622c22503..806f2912122 100644
--- a/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx
@@ -142,7 +142,7 @@ export default function CodeAppRenderer(props: Readonly<Props>) {
   const isPortfolio = isPortfolioLike(qualifier);
 
   return (
-    <LargeCenteredLayout className="sw-py-8 sw-body-md" id="code-page">
+    <LargeCenteredLayout className="sw-py-8 sw-typo-lg" id="code-page">
       <Helmet defer={false} title={sourceViewer !== undefined ? sourceViewer.name : defaultTitle} />
 
       <A11ySkipTarget anchor="code_main" />
@@ -203,7 +203,7 @@ export default function CodeAppRenderer(props: Readonly<Props>) {
           </div>
 
           {(showComponentList || showSearch) && (
-            <div className="sw-flex sw-items-end sw-body-sm">
+            <div className="sw-flex sw-items-end sw-typo-default">
               <KeyboardHint
                 className="sw-mr-4 sw-ml-6"
                 command={`${KeyboardKeys.DownArrow} ${KeyboardKeys.UpArrow}`}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
index 9aeee494b4f..7e9a83ac755 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
@@ -583,7 +583,7 @@ export class CodingRulesApp extends React.PureComponent<Props, State> {
           </Helmet>
         )}
         <LargeCenteredLayout id="coding-rules-page">
-          <PageContentFontWrapper className="sw-body-sm">
+          <PageContentFontWrapper className="sw-typo-default">
             <div className="sw-grid sw-gap-x-12 sw-gap-y-6 sw-grid-cols-12 sw-w-full">
               <StyledContentWrapper
                 as="nav"
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx
index e0052eaf7c8..e5180548a6f 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx
@@ -29,7 +29,7 @@ export interface PageActionsProps {
 
 export default function PageActions(props: Readonly<PageActionsProps>) {
   return (
-    <div className="sw-body-sm sw-flex sw-items-center sw-gap-6 sw-justify-end sw-flex-1">
+    <div className="sw-typo-default sw-flex sw-items-center sw-gap-6 sw-justify-end sw-flex-1">
       <KeyboardHint title={translate('coding_rules.to_select_rules')} command="ArrowUp ArrowDown" />
       <KeyboardHint title={translate('coding_rules.to_navigate')} command="ArrowLeft ArrowRight" />
 
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx
index 4d16aa93642..a3713635afc 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx
@@ -110,7 +110,7 @@ export default class ProfileFacet extends React.PureComponent<Props> {
         <FacetToggleActiveStyle
           selected={!!activation}
           aria-checked={activation}
-          className="js-active sw-body-xs"
+          className="js-active sw-typo-sm"
           onClick={isCompare ? this.stopPropagation : this.handleActiveClick}
           role="radio"
           tabIndex={-1}
@@ -120,7 +120,7 @@ export default class ProfileFacet extends React.PureComponent<Props> {
         <FacetToggleInActiveStyle
           selected={!activation}
           aria-checked={!activation}
-          className="js-inactive sw-body-xs sw-ml-1"
+          className="js-inactive sw-typo-sm sw-ml-1"
           onClick={isCompare ? this.stopPropagation : this.handleInactiveClick}
           role="radio"
           tabIndex={-1}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx
index e9b3835e384..612cc5a2d4d 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx
@@ -44,7 +44,7 @@ export default function RuleDetailsHeaderActions(props: Readonly<Props>) {
   const TAGS_TO_DISPLAY = 1;
 
   return (
-    <Note className="sw-flex sw-flex-wrap sw-items-center sw-gap-2 sw-body-xs">
+    <Note className="sw-flex sw-flex-wrap sw-items-center sw-gap-2 sw-typo-sm">
       {/* Type */}
       <DocHelpTooltip
         content={
@@ -110,8 +110,8 @@ export default function RuleDetailsHeaderActions(props: Readonly<Props>) {
       {/* Tags */}
       <div className="it__coding-rules-detail-property" data-meta="tags">
         <TagsList
-          className="sw-body-xs"
-          tagsClassName="sw-body-xs"
+          className="sw-typo-sm"
+          tagsClassName="sw-typo-sm"
           allowUpdate={canWrite}
           tagsToDisplay={TAGS_TO_DISPLAY}
           tags={allTags.length > 0 ? allTags : [translate('coding_rules.no_tags')]}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx
index f4a47bcbe32..b8e472a8ee4 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx
@@ -38,7 +38,7 @@ export default function RuleDetailsHeaderMeta(props: Readonly<Props>) {
   const externalEngine = ruleDetails.repo.replace(new RegExp(`^${EXTERNAL_RULE_REPO_PREFIX}`), '');
 
   return (
-    <Note className="sw-flex sw-flex-wrap sw-items-center sw-gap-2 sw-body-xs" as="ul">
+    <Note className="sw-flex sw-flex-wrap sw-items-center sw-gap-2 sw-typo-sm" as="ul">
       {/* Template */}
       {!ruleDetails.isExternal && ruleDetails.isTemplate && (
         <>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
index cb4e432e848..fbcd523b835 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
@@ -243,11 +243,7 @@ export default function RuleListItem(props: Readonly<Props>) {
           <div className="sw-flex sw-items-center">
             {renderActivation()}
 
-            <Link
-              className="sw-body-sm-highlight"
-              onClick={handleNameClick}
-              to={getRuleUrl(rule.key)}
-            >
+            <Link className="sw-typo-semibold" onClick={handleNameClick} to={getRuleUrl(rule.key)}>
               {rule.name}
             </Link>
           </div>
@@ -263,13 +259,13 @@ export default function RuleListItem(props: Readonly<Props>) {
         </div>
 
         <div className="sw-flex sw-items-center">
-          <div className="sw-grow sw-flex sw-gap-2 sw-items-center sw-body-xs">
+          <div className="sw-grow sw-flex sw-gap-2 sw-items-center sw-typo-sm">
             {rule.impacts.length > 0 && (
               <SoftwareImpactPillList softwareImpacts={rule.impacts} type="rule" />
             )}
           </div>
 
-          <TextSubdued as="ul" className="sw-flex sw-gap-1 sw-items-center sw-body-xs">
+          <TextSubdued as="ul" className="sw-flex sw-gap-1 sw-items-center sw-typo-sm">
             <li>{rule.langName}</li>
 
             <SeparatorCircleIcon aria-hidden as="li" />
@@ -324,8 +320,8 @@ export default function RuleListItem(props: Readonly<Props>) {
                 <li>
                   <TagsList
                     allowUpdate={false}
-                    className="sw-body-xs"
-                    tagsClassName="sw-body-xs"
+                    className="sw-typo-sm"
+                    tagsClassName="sw-typo-sm"
                     tags={allTags}
                   />
                 </li>
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx
index f2b71316ca8..a3395ea2989 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx
@@ -200,7 +200,7 @@ export default function ComponentMeasuresApp() {
     <LargeCenteredLayout id="component-measures" className="sw-pt-8">
       <Suggestions suggestionGroup="component_measures" />
       <Helmet defer={false} title={translate('layout.measures')} />
-      <PageContentFontWrapper className="sw-body-sm">
+      <PageContentFontWrapper className="sw-typo-default">
         <Spinner isLoading={isLoading} />
 
         {measures.length > 0 ? (
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx
index ccece093bb7..1560017daaa 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx
@@ -59,13 +59,13 @@ export default function MeasureHeader(props: Readonly<Props>) {
     <div className="sw-mb-4">
       <div className="sw-flex sw-items-center sw-justify-between sw-gap-4">
         <div className="it__measure-details-metric sw-flex sw-items-center sw-gap-1">
-          <strong className="sw-body-md-highlight">{title}</strong>
+          <strong className="sw-typo-lg-semibold">{title}</strong>
 
           <div className="sw-flex sw-items-center sw-ml-2">
             <Measure
               branchLike={branchLike}
               componentKey={component.key}
-              className={classNames('it__measure-details-value sw-body-md')}
+              className={classNames('it__measure-details-value sw-typo-lg')}
               metricKey={metric.key}
               metricType={metric.type}
               value={measureValue}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx
index 67f507873ab..a2b6b3d4596 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx
@@ -198,7 +198,7 @@ export default function BubbleChartView(props: Readonly<Props>) {
           <div className="sw-text-right">
             {bubbleMetrics.colors && (
               <span className="sw-mr-3">
-                <strong className="sw-body-sm-highlight">
+                <strong className="sw-typo-semibold">
                   {translate('component_measures.legend.color')}
                 </strong>{' '}
                 {bubbleMetrics.colors.length > 1
@@ -209,7 +209,7 @@ export default function BubbleChartView(props: Readonly<Props>) {
                   : getLocalizedMetricName(bubbleMetrics.colors[0])}
               </span>
             )}
-            <strong className="sw-body-sm-highlight">
+            <strong className="sw-typo-semibold">
               {translate('component_measures.legend.size')}
             </strong>{' '}
             {getLocalizedMetricName(bubbleMetrics.size)}
@@ -231,7 +231,7 @@ export default function BubbleChartView(props: Readonly<Props>) {
   }
 
   return (
-    <BubbleChartWrapper className="sw-relative sw-body-sm">
+    <BubbleChartWrapper className="sw-relative sw-typo-default">
       {renderChartHeader()}
       {renderBubbleChart()}
       <div className="sw-text-center">{getLocalizedMetricName(bubbleMetrics.x)}</div>
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/ComponentsList.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/ComponentsList.tsx
index b52c5f101cf..674b934c3b5 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/ComponentsList.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/ComponentsList.tsx
@@ -55,9 +55,11 @@ export default function ComponentsList({ components, metric, metrics, ...props }
         otherMetrics.length > 0 && (
           <TableRow>
             <ContentCell />
-            <NumericalCell className="sw-body-sm">{getLocalizedMetricName(metric)}</NumericalCell>
+            <NumericalCell className="sw-typo-default">
+              {getLocalizedMetricName(metric)}
+            </NumericalCell>
             {otherMetrics.map((metric) => (
-              <NumericalCell className="sw-body-sm" key={metric.key}>
+              <NumericalCell className="sw-typo-default" key={metric.key}>
                 {getLocalizedMetricName(metric)}
               </NumericalCell>
             ))}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx b/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx
index c7a46d59b37..a2909d2340e 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx
@@ -78,7 +78,7 @@ export default function DomainSubnavigation(props: Readonly<Props>) {
     <SubnavigationAccordion
       header={
         <div className="sw-flex sw-items-center sw-gap-3">
-          <strong className="sw-body-sm-highlight">{getLocalizedMetricDomain(domain.name)}</strong>
+          <strong className="sw-typo-semibold">{getLocalizedMetricDomain(domain.name)}</strong>
           {helper && (
             <HelpTooltip overlay={helper}>
               <HelperHintIcon aria-hidden="false" description={helper} />
diff --git a/server/sonar-web/src/main/js/apps/create/project/Azure/AzurePersonalAccessTokenForm.tsx b/server/sonar-web/src/main/js/apps/create/project/Azure/AzurePersonalAccessTokenForm.tsx
index fce1c4f4f2a..26a4acdd163 100644
--- a/server/sonar-web/src/main/js/apps/create/project/Azure/AzurePersonalAccessTokenForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/Azure/AzurePersonalAccessTokenForm.tsx
@@ -77,10 +77,10 @@ export default function AzurePersonalAccessTokenForm({
 
   return (
     <form className="sw-mt-3 sw-w-[50%]" onSubmit={handleSubmit}>
-      <LightPrimary as="h2" className="sw-heading-md">
+      <LightPrimary as="h2" className="sw-heading-lg">
         {translate('onboarding.create_project.pat_form.title')}
       </LightPrimary>
-      <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-body-sm">
+      <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-typo-default">
         {translate('onboarding.create_project.pat_form.help.azure')}
       </LightPrimary>
 
diff --git a/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx
index 4113350fa63..422dab7e26d 100644
--- a/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx
@@ -93,7 +93,7 @@ export default function AzureProjectCreateRenderer(
     <PageContentFontWrapper>
       <header className="sw-mb-10">
         <Title className="sw-mb-4">{translate('onboarding.create_project.azure.title')}</Title>
-        <LightPrimary className="sw-body-sm">
+        <LightPrimary className="sw-typo-default">
           {isMonorepoSupported ? (
             <FormattedMessage
               id="onboarding.create_project.azure.subtitle.with_monorepo"
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudPersonalAccessTokenForm.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudPersonalAccessTokenForm.tsx
index 2d4c2d071d9..40d9b01f55d 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudPersonalAccessTokenForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudPersonalAccessTokenForm.tsx
@@ -70,10 +70,10 @@ export default function BitbucketCloudPersonalAccessTokenForm({
 
   return (
     <form className="sw-mt-3 sw-w-[50%]" onSubmit={handleSubmit}>
-      <LightPrimary as="h2" className="sw-heading-md">
+      <LightPrimary as="h2" className="sw-heading-lg">
         {translate('onboarding.create_project.pat_form.title')}
       </LightPrimary>
-      <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-body-sm">
+      <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-typo-default">
         {translate('onboarding.create_project.pat_form.help.bitbucket_cloud')}
       </LightPrimary>
 
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudProjectCreateRender.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudProjectCreateRender.tsx
index 4c238b03e48..a2c3e2cc7c2 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudProjectCreateRender.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudProjectCreateRender.tsx
@@ -77,7 +77,7 @@ export default function BitbucketCloudProjectCreateRenderer(
         <Title className="sw-mb-4">
           {translate('onboarding.create_project.bitbucketcloud.title')}
         </Title>
-        <LightPrimary className="sw-body-sm">
+        <LightPrimary className="sw-typo-default">
           {isMonorepoSupported ? (
             <FormattedMessage
               id="onboarding.create_project.bitbucketcloud.subtitle.with_monorepo"
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx
index f7159a41b88..3e49260dbfe 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx
@@ -90,7 +90,7 @@ export default function BitbucketCloudSearchForm(props: BitbucketCloudSearchForm
 
       {repositories.length === 0 ? (
         <div className="sw-py-6 sw-px-2">
-          <LightPrimary className="sw-body-sm">{translate('no_results')}</LightPrimary>
+          <LightPrimary className="sw-typo-default">{translate('no_results')}</LightPrimary>
         </div>
       ) : (
         <ul className="sw-flex sw-flex-col sw-gap-3">
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx
index 9c4eb92bbba..c6d24ce76ef 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx
@@ -73,7 +73,7 @@ export default function BitbucketProjectCreateRenderer(
     <PageContentFontWrapper>
       <header className="sw-mb-10">
         <Title className="sw-mb-4">{translate('onboarding.create_project.bitbucket.title')}</Title>
-        <LightPrimary className="sw-body-sm">
+        <LightPrimary className="sw-typo-default">
           {isMonorepoSupported ? (
             <FormattedMessage
               id="onboarding.create_project.bitbucket.subtitle.with_monorepo"
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketServerPersonalAccessTokenForm.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketServerPersonalAccessTokenForm.tsx
index 43dd9588214..9cae8a1ddc8 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketServerPersonalAccessTokenForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketServerPersonalAccessTokenForm.tsx
@@ -70,10 +70,10 @@ export default function BitbucketServerPersonalAccessTokenForm({
 
   return (
     <form className="sw-mt-3 sw-w-[50%]" onSubmit={handleSubmit}>
-      <LightPrimary as="h2" className="sw-heading-md">
+      <LightPrimary as="h2" className="sw-heading-lg">
         {translate('onboarding.create_project.pat_form.title')}
       </LightPrimary>
-      <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-body-sm">
+      <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-typo-default">
         {translate('onboarding.create_project.pat_form.help.bitbucket')}
       </LightPrimary>
 
diff --git a/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx b/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx
index ebb236a41a2..f654001be48 100644
--- a/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx
@@ -144,7 +144,7 @@ export function CreateProjectModeSelection(props: CreateProjectModeSelectionProp
   const filteredAlm = separateAvailableOptions(almCounts);
 
   return (
-    <div className="sw-body-sm">
+    <div className="sw-typo-default">
       <div className="sw-flex sw-flex-col">
         <Title className="sw-mb-10">{translate('onboarding.create_project.select_method')}</Title>
         <LightPrimary>
diff --git a/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx
index 45026131cf5..18d2ead9a5c 100644
--- a/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx
@@ -114,7 +114,7 @@ export default function GitHubProjectCreateRenderer(
     <>
       <header className="sw-mb-10">
         <Title className="sw-mb-4">{translate('onboarding.create_project.github.title')}</Title>
-        <LightPrimary className="sw-body-sm">
+        <LightPrimary className="sw-typo-default">
           {isMonorepoSupported ? (
             <FormattedMessage
               id="onboarding.create_project.github.subtitle.with_monorepo"
diff --git a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GItlabPersonalAccessTokenForm.tsx b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GItlabPersonalAccessTokenForm.tsx
index 8886ac9e903..379da46bbdc 100644
--- a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GItlabPersonalAccessTokenForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GItlabPersonalAccessTokenForm.tsx
@@ -69,10 +69,10 @@ export default function GitlabPersonalAccessTokenForm({
 
   return (
     <form className="sw-mt-3 sw-w-[50%]" onSubmit={handleSubmit}>
-      <LightPrimary as="h2" className="sw-heading-md">
+      <LightPrimary as="h2" className="sw-heading-lg">
         {translate('onboarding.create_project.pat_form.title')}
       </LightPrimary>
-      <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-body-sm">
+      <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-typo-default">
         {translate('onboarding.create_project.pat_form.help.gitlab')}
       </LightPrimary>
 
diff --git a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx
index a496c18867c..974471703d2 100644
--- a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx
@@ -102,7 +102,7 @@ export default function GitlabProjectCreateRenderer(
     <>
       <header className="sw-mb-10">
         <Title className="sw-mb-4">{translate('onboarding.create_project.gitlab.title')}</Title>
-        <LightPrimary className="sw-body-sm">
+        <LightPrimary className="sw-typo-default">
           {isMonorepoSupported ? (
             <FormattedMessage
               id="onboarding.create_project.gitlab.subtitle.with_monorepo"
diff --git a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx
index 1a8ff2baffa..02c29d3343f 100644
--- a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx
@@ -86,7 +86,7 @@ export default function GitlabProjectSelectionForm(
 
       {projects.length === 0 ? (
         <div className="sw-py-6 sw-px-2">
-          <LightPrimary className="sw-body-sm">{translate('no_results')}</LightPrimary>
+          <LightPrimary className="sw-typo-default">{translate('no_results')}</LightPrimary>
         </div>
       ) : (
         <ul className="sw-flex sw-flex-col sw-gap-3">
diff --git a/server/sonar-web/src/main/js/apps/create/project/components/AlmRepoItem.tsx b/server/sonar-web/src/main/js/apps/create/project/components/AlmRepoItem.tsx
index 098dec33862..ff1a907b764 100644
--- a/server/sonar-web/src/main/js/apps/create/project/components/AlmRepoItem.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/components/AlmRepoItem.tsx
@@ -99,24 +99,22 @@ export default function AlmRepoItem({
           />
           {sqProjectKey ? (
             <DiscreetLink className="sw-truncate" to={getProjectUrl(sqProjectKey)}>
-              <LightPrimary className="sw-body-sm-highlight sw-truncate">
+              <LightPrimary className="sw-typo-semibold sw-truncate">
                 {primaryTextNode}
               </LightPrimary>
             </DiscreetLink>
           ) : (
-            <LightPrimary className="sw-body-sm-highlight sw-truncate">
-              {primaryTextNode}
-            </LightPrimary>
+            <LightPrimary className="sw-typo-semibold sw-truncate">{primaryTextNode}</LightPrimary>
           )}
         </div>
         <div className="sw-max-w-full sw-min-w-0 sw-ml-2 sw-flex sw-items-center">
-          <LightLabel className="sw-body-sm sw-truncate">{secondaryTextNode}</LightLabel>
+          <LightLabel className="sw-typo-default sw-truncate">{secondaryTextNode}</LightLabel>
         </div>
       </div>
       {almUrl !== undefined && (
         <div className="sw-flex sw-items-center sw-flex-shrink-0 sw-ml-2">
           <Link
-            className="sw-body-sm-highlight"
+            className="sw-typo-semibold"
             onClick={(e) => e.stopPropagation()}
             target="_blank"
             to={almUrl}
@@ -130,7 +128,7 @@ export default function AlmRepoItem({
         {sqProjectKey ? (
           <div className="sw-flex sw-items-center">
             <CheckIcon />
-            <LightPrimary className="sw-ml-2 sw-body-sm">
+            <LightPrimary className="sw-ml-2 sw-typo-default">
               {translate('onboarding.create_project.repository_imported')}
             </LightPrimary>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/create/project/components/NewCodeDefinitionSelection.tsx b/server/sonar-web/src/main/js/apps/create/project/components/NewCodeDefinitionSelection.tsx
index 57ae8afee50..04bfcf42525 100644
--- a/server/sonar-web/src/main/js/apps/create/project/components/NewCodeDefinitionSelection.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/components/NewCodeDefinitionSelection.tsx
@@ -185,7 +185,7 @@ export default function NewCodeDefinitionSelection(props: Props) {
     <section
       aria-label={translate('onboarding.create_project.new_code_definition.title')}
       id="project-ncd-selection"
-      className="sw-body-sm"
+      className="sw-typo-default"
     >
       <div className="sw-flex sw-justify-between">
         <FormattedMessage
diff --git a/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx b/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx
index acc72882975..9fb6f764e22 100644
--- a/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx
@@ -104,7 +104,7 @@ export default function RepositoryList(props: Readonly<RepositoryListProps>) {
 
         {repositories.length === 0 ? (
           <div className="sw-py-6 sw-px-2">
-            <LightPrimary className="sw-body-sm">
+            <LightPrimary className="sw-typo-default">
               {formatMessage({ id: 'no_results' })}
             </LightPrimary>
           </div>
@@ -143,7 +143,7 @@ export default function RepositoryList(props: Readonly<RepositoryListProps>) {
       <SideColumn>
         {selected.size > 0 && (
           <SetupBox className="sw-rounded-2 sw-p-8 sw-mb-0">
-            <SetupBoxTitle className="sw-mb-2 sw-heading-md">
+            <SetupBoxTitle className="sw-mb-2 sw-heading-lg">
               <FormattedMessage
                 id="onboarding.create_project.x_repositories_selected"
                 values={{ count: selected.size }}
diff --git a/server/sonar-web/src/main/js/apps/create/project/manual/ManualProjectCreate.tsx b/server/sonar-web/src/main/js/apps/create/project/manual/ManualProjectCreate.tsx
index 3cb08d4dc3e..bc7a765f741 100644
--- a/server/sonar-web/src/main/js/apps/create/project/manual/ManualProjectCreate.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/manual/ManualProjectCreate.tsx
@@ -139,7 +139,7 @@ export default function ManualProjectCreate(props: Readonly<Props>) {
   return (
     <section
       aria-label={translate('onboarding.create_project.manual.title')}
-      className="sw-body-sm"
+      className="sw-typo-default"
     >
       <div className="sw-flex sw-justify-between">
         <FormattedMessage
@@ -163,7 +163,7 @@ export default function ManualProjectCreate(props: Readonly<Props>) {
       <div className="sw-max-w-[50%] sw-mt-2">
         <form
           id="create-project-manual"
-          className="sw-flex-col sw-body-sm"
+          className="sw-flex-col sw-typo-default"
           onSubmit={handleFormSubmit}
         >
           <ProjectValidation onChange={setProject} />
diff --git a/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx b/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx
index 6e79893b4eb..22414a46fca 100644
--- a/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx
@@ -47,7 +47,7 @@ export default function GroupsApp() {
 
   return (
     <LargeCenteredLayout>
-      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+      <PageContentFontWrapper className="sw-my-8 sw-typo-default">
         <Helmet defer={false} title={translate('user_groups.page')} />
         <main>
           <Header manageProvider={manageProvider?.provider} />
diff --git a/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx b/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx
index 13e0be93493..f7aa1b2d1a9 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx
@@ -82,7 +82,7 @@ export default function ListItem(props: Readonly<ListItemProps>) {
   return (
     <TableRow data-id={name}>
       <ContentCell>
-        <div className="sw-body-sm-highlight">{name}</div>
+        <div className="sw-typo-semibold">{name}</div>
         {group.default && <span className="sw-ml-1">({translate('default')})</span>}
         {managed && renderIdentityProviderIcon(manageProvider)}
         {isGroupLocal() && <Badge className="sw-ml-1">{translate('local')}</Badge>}
diff --git a/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx b/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx
index 4da4b20756a..2fd9f000a79 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx
@@ -58,7 +58,7 @@ export default function ComponentBreadcrumbs({
         'issues.on_file_x',
         `${displayProject ? issue.projectName + ', ' : ''}${componentName}`,
       )}
-      className="sw-flex sw-box-border sw-body-sm sw-w-full sw-pb-2 sw-pt-4 sw-truncate"
+      className="sw-flex sw-box-border sw-typo-default sw-w-full sw-pb-2 sw-pt-4 sw-truncate"
     >
       {displayProject && (
         <span title={projectName}>
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
index 23f787fd285..c9d1aa14aa0 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
@@ -166,7 +166,7 @@ export default class IssueHeader extends React.PureComponent<Props, State> {
         <div className="sw-mr-8 sw-flex-1 sw-flex sw-flex-col sw-gap-4 sw-min-w-0">
           <div className="sw-flex sw-flex-col sw-gap-2">
             <div className="sw-flex sw-items-center">
-              <PageContentFontWrapper className="sw-body-md-highlight" as="h1">
+              <PageContentFontWrapper className="sw-typo-lg-semibold" as="h1">
                 <IssueMessageHighlighting
                   message={issue.message}
                   messageFormattings={issue.messageFormattings}
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistory.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistory.tsx
index 36b99e6805b..df464f021d5 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistory.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistory.tsx
@@ -81,15 +81,15 @@ export default function IssueReviewHistory(props: HotspotReviewHistoryProps) {
       {history.map((historyElt, historyIndex) => {
         const { user, type, diffs, date, html, key, updatable, markdown } = historyElt;
         return (
-          <li className="sw-p-2 sw-body-sm" key={historyIndex}>
-            <div className="sw-body-sm-highlight sw-mb-1">
+          <li className="sw-p-2 sw-typo-default" key={historyIndex}>
+            <div className="sw-typo-semibold sw-mb-1">
               <DateTimeFormatter date={date} />
             </div>
             <LightLabel as="div" className="sw-flex sw-gap-2">
               {user.name && (
                 <div className="sw-flex sw-items-center sw-gap-1">
                   <Avatar hash={user.avatar} name={user.name} size="xs" />
-                  <span className="sw-body-sm-highlight">
+                  <span className="sw-typo-semibold">
                     {user.active ? user.name : translateWithParameters('user.x_deleted', user.name)}
                   </span>
                 </div>
@@ -113,7 +113,7 @@ export default function IssueReviewHistory(props: HotspotReviewHistoryProps) {
             {type === ReviewHistoryType.Comment && key && html && markdown && (
               <div className="sw-mt-2 sw-flex sw-justify-between">
                 <CommentBox
-                  className="sw-pl-2 sw-ml-2 sw-body-sm"
+                  className="sw-pl-2 sw-ml-2 sw-typo-default"
                   // eslint-disable-next-line react/no-danger
                   dangerouslySetInnerHTML={{ __html: sanitizeUserInput(html) }}
                 />
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx
index 286d41fb721..eaf4194e02f 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx
@@ -79,7 +79,7 @@ export default class IssueReviewHistoryAndComments extends React.PureComponent<P
       <div>
         <PageTitle
           as="h2"
-          className="sw-body-md-highlight"
+          className="sw-typo-lg-semibold"
           text={translate('hotspot.section.activity')}
         />
 
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
index 30af209bcb4..c9995f74bc7 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
@@ -1314,7 +1314,7 @@ export class App extends React.PureComponent<Props, State> {
     return (
       <PageWrapperStyle id="issues-page">
         <LargeCenteredLayout>
-          <PageContentFontWrapper className="sw-body-sm">
+          <PageContentFontWrapper className="sw-typo-default">
             <div className="sw-w-full sw-flex" id="issues-page">
               {openIssue ? (
                 <Helmet
diff --git a/server/sonar-web/src/main/js/apps/issues/components/NoIssues.tsx b/server/sonar-web/src/main/js/apps/issues/components/NoIssues.tsx
index 89412f5463f..3fb7375712e 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/NoIssues.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/NoIssues.tsx
@@ -24,7 +24,7 @@ import { translate } from '../../../helpers/l10n';
 export default function NoIssues() {
   return (
     <div className="sw-text-center sw-py-8">
-      <Highlight as="h3" className="sw-body-md-highlight">
+      <Highlight as="h3" className="sw-typo-lg-semibold">
         {translate('issues.no_issues')}
       </Highlight>
     </div>
diff --git a/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx b/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx
index 3ebb196a69e..1926d410bf9 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx
@@ -24,7 +24,7 @@ import { translate } from '../../../helpers/l10n';
 export default function NoMyIssues() {
   return (
     <div className="sw-text-center sw-py-8">
-      <Highlight as="h3" className="sw-body-md-highlight">
+      <Highlight as="h3" className="sw-typo-lg-semibold">
         {translate('issues.no_my_issues')}
       </Highlight>
     </div>
diff --git a/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx b/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx
index c33c4e5d548..c77ad71029c 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx
@@ -35,7 +35,7 @@ export default function PageActions(props: PageActionsProps) {
   const { canSetHome, effortTotal, paging } = props;
 
   return (
-    <div className="sw-body-sm sw-flex sw-items-center sw-gap-6 sw-justify-end sw-flex-1">
+    <div className="sw-typo-default sw-flex sw-items-center sw-gap-6 sw-justify-end sw-flex-1">
       <KeyboardHint title={translate('issues.to_select_issues')} command="ArrowUp ArrowDown" />
       <KeyboardHint title={translate('issues.to_navigate')} command="ArrowLeft ArrowRight" />
 
diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueItemLocationsQuantity.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueItemLocationsQuantity.tsx
index 43b7d9d983a..5dc6902547c 100644
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueItemLocationsQuantity.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueItemLocationsQuantity.tsx
@@ -34,7 +34,7 @@ export default function IssueItemLocationsQuantity(props: Props) {
       <div className="sw-flex sw-items-center sw-justify-center sw-gap-1 sw-overflow-hidden">
         <ExecutionFlowIcon />
         <span className="sw-truncate" title={`${quantity} ${message}`}>
-          <span className="sw-body-sm-highlight">{quantity}</span> {message}
+          <span className="sw-typo-semibold">{quantity}</span> {message}
         </span>
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx
index 61c41a0a45e..0a4a2f4e719 100644
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx
@@ -57,9 +57,12 @@ export default function IssueLocation(props: Readonly<Props>) {
   return (
     <StyledButton aria-label={normalizedMessage} aria-current={selected} onClick={handleClick}>
       <StyledLocation
-        className={classNames('sw-p-1 sw-rounded-1/2 sw-flex sw-gap-2 sw-body-sm sw-text-left', {
-          selected,
-        })}
+        className={classNames(
+          'sw-p-1 sw-rounded-1/2 sw-flex sw-gap-2 sw-typo-default sw-text-left',
+          {
+            selected,
+          },
+        )}
         ref={(n) => (node.current = n)}
       >
         <LocationMarker selected={selected} text={concealed ? undefined : index + 1} />
diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx
index bb2f02a738c..a9f6ddb40d5 100644
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx
@@ -132,7 +132,7 @@ export default class IssueLocationsCrossFile extends PureComponent<Props, State>
 
     return (
       <div key={groupIndex}>
-        <ComponentName className="sw-pb-1 sw-body-sm-highlight">
+        <ComponentName className="sw-pb-1 sw-typo-semibold">
           {collapsePath(group.componentName ?? '', COLLAPSE_PATH_LIMIT)}
         </ComponentName>
         {group.locations.length > 0 && (
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.tsx
index 7c8abd5f118..a2c414dd1d1 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.tsx
@@ -31,7 +31,7 @@ export function FiltersHeader({ displayReset, onReset }: Props) {
   return (
     <div className="sw-mb-5">
       <div className="sw-flex sw-h-9 sw-items-center sw-justify-between">
-        <PageTitle className="sw-body-md-highlight" as="h2" text={translate('filters')} />
+        <PageTitle className="sw-typo-lg-semibold" as="h2" text={translate('filters')} />
 
         {displayReset && (
           <Button onClick={onReset} variety={ButtonVariety.DangerOutline}>
diff --git a/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx b/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx
index 4ce2fcc1842..0e0feb96711 100644
--- a/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx
@@ -175,7 +175,7 @@ export default class App extends React.PureComponent<Props, State> {
         <Helmet defaultTitle={translate('maintenance.page')} defer={false} />
 
         <CenteredLayout className="sw-flex sw-justify-around sw-mt-32" id="bd">
-          <Card className="sw-body-sm sw-p-10 sw-w-abs-400" id="nonav">
+          <Card className="sw-typo-default sw-p-10 sw-w-abs-400" id="nonav">
             {systemStatus === 'OFFLINE' && (
               <>
                 <MaintenanceTitle className="text-danger">
diff --git a/server/sonar-web/src/main/js/apps/marketplace/App.tsx b/server/sonar-web/src/main/js/apps/marketplace/App.tsx
index fbb876c1a4d..cc305eb0f2b 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/App.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/App.tsx
@@ -167,7 +167,7 @@ class App extends React.PureComponent<Props, State> {
 
     return (
       <LargeCenteredLayout as="main" id="marketplace-page">
-        <PageContentFontWrapper className="sw-body-sm sw-py-8">
+        <PageContentFontWrapper className="sw-typo-default sw-py-8">
           <Helmet title={translate('marketplace.page')} />
           <Header currentEdition={currentEdition} />
           <EditionBoxes currentEdition={currentEdition} />
diff --git a/server/sonar-web/src/main/js/apps/marketplace/Header.tsx b/server/sonar-web/src/main/js/apps/marketplace/Header.tsx
index 9e02ad24d8d..46b2d4999b9 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/Header.tsx
@@ -31,7 +31,7 @@ export default function Header({ currentEdition }: Readonly<Props>) {
     <header id="marketplace-header">
       <Title>{translate('marketplace.page')}</Title>
       {currentEdition && (
-        <div className="sw-body-sm-highlight">
+        <div className="sw-typo-semibold">
           {translate('marketplace.page.you_are_running', currentEdition)}
         </div>
       )}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx
index 1e0a0c7522e..4e6df25032f 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx
@@ -55,7 +55,7 @@ export default function PluginAvailable(props: Readonly<PluginAvailableProps>) {
         />
         {plugin.update.requires.length > 0 && (
           <p className="sw-mt-2">
-            <strong className="sw-body-sm-highlight">
+            <strong className="sw-typo-semibold">
               {translateWithParameters(
                 'marketplace.installing_this_plugin_will_also_install_x',
                 plugin.update.requires
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLog.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLog.tsx
index 2985475d641..7c86eda1cf1 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLog.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLog.tsx
@@ -32,7 +32,7 @@ export interface Props {
 export default function PluginChangeLog({ release, update }: Props) {
   return (
     <div className="sw-p-4">
-      <span className="sw-body-md-highlight">{translate('changelog')}</span>
+      <span className="sw-typo-lg-semibold">{translate('changelog')}</span>
       <UnorderedList>
         {update.previousUpdates &&
           sortBy(update.previousUpdates, (prevUpdate) => prevUpdate.release?.date).map(
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx
index e436531f096..3ff5cb76cef 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx
@@ -28,7 +28,7 @@ interface Props {
 export default function PluginDescription(props: Readonly<Props>) {
   return (
     <CellComponent>
-      <strong className="sw-body-sm-highlight">{props.plugin.name}</strong>
+      <strong className="sw-typo-semibold">{props.plugin.name}</strong>
       {props.plugin.category && <Badge className="sw-ml-2">{props.plugin.category}</Badge>}
       {props.plugin.description && <div className="sw-mt-2">{props.plugin.description}</div>}
     </CellComponent>
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx
index 7e1692ce31b..66730e8d6d6 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx
@@ -48,7 +48,7 @@ export default function PluginInstalled({
       <ContentCell>
         <StyledUnorderedList>
           <ListItem className="sw-mt-0">
-            <strong className="sw-mr-1 sw-body-sm-highlight">{plugin.version}</strong>
+            <strong className="sw-mr-1 sw-typo-semibold">{plugin.version}</strong>
             {translate('marketplace._installed')}
           </ListItem>
           <PluginUpdates pluginName={plugin.name} updates={plugin.updates} />
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdates.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdates.tsx
index 5457c590c68..c20f5791ce4 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdates.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdates.tsx
@@ -34,7 +34,7 @@ export default function PluginUpdates({ pluginName, updates }: Readonly<PluginUp
   }
   return (
     <ListItem>
-      <strong className="sw-body-sm-highlight">{translate('marketplace.updates')}:</strong>
+      <strong className="sw-typo-semibold">{translate('marketplace.updates')}:</strong>
       <UnorderedList className="sw-mt-2">
         {updates.map((update) =>
           update.release ? (
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx
index 98a00733f1c..9e6b76baf78 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx
@@ -112,7 +112,7 @@ export function ActivityPanel(props: ActivityPanelProps) {
 
   return (
     <div>
-      <h2 className="sw-pt-6 sw-pb-4 sw-body-md-highlight">{translate('overview.activity')}</h2>
+      <h2 className="sw-pt-6 sw-pb-4 sw-typo-lg-semibold">{translate('overview.activity')}</h2>
 
       <Card className="sw-rounded-2" data-test="overview__activity-panel">
         <GraphsHeader graph={graph} metrics={metrics} onUpdateGraph={props.onGraphChange} />
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx b/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx
index 4c920a2e017..fd40ed024ae 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx
@@ -72,9 +72,9 @@ export function Analysis(props: Readonly<AnalysisProps>) {
   );
 
   return (
-    <div data-analysis-key={analysis.key} className="sw-body-sm">
+    <div data-analysis-key={analysis.key} className="sw-typo-default">
       <div className="sw-flex sw-justify-between sw-mb-1">
-        <div className="sw-body-sm-highlight">
+        <div className="sw-typo-semibold">
           <DateTimeFormatter date={analysis.date} />
         </div>
         {qualityGateStatus !== undefined && (
@@ -91,7 +91,7 @@ export function Analysis(props: Readonly<AnalysisProps>) {
                 ),
               }}
             />
-            <span className="sw-body-sm-highlight">
+            <span className="sw-typo-semibold">
               <FormattedMessage id={`metric.level.${qualityGateStatus}`} />
             </span>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx b/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx
index 0eb0427a9ac..75248625512 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx
@@ -54,7 +54,7 @@ export default function BranchMetaTopBar({
   const locMeasure = findMeasure(measures, MetricKey.ncloc);
 
   const leftSection = (
-    <h1 className="sw-flex sw-gap-2 sw-items-center sw-heading-md">{branch.name}</h1>
+    <h1 className="sw-flex sw-gap-2 sw-items-center sw-heading-lg">{branch.name}</h1>
   );
   const rightSection = (
     <div className="sw-flex sw-gap-2 sw-items-center">
@@ -93,7 +93,7 @@ export default function BranchMetaTopBar({
   );
 
   return (
-    <div className="sw-flex sw-justify-between sw-whitespace-nowrap sw-body-sm sw-mb-2">
+    <div className="sw-flex sw-justify-between sw-whitespace-nowrap sw-typo-default sw-mb-2">
       {leftSection}
       {rightSection}
     </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx b/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx
index 518ae206260..aba16a8306b 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx
@@ -187,7 +187,7 @@ export default function BranchOverviewRenderer(props: BranchOverviewRendererProp
               tourCompleted={tourCompleted}
             />
           )}
-          <div className="overview sw-my-6 sw-body-sm">
+          <div className="overview sw-my-6 sw-typo-default">
             <A11ySkipTarget anchor="overview_main" />
 
             {projectIsEmpty ? (
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/Event.tsx b/server/sonar-web/src/main/js/apps/overview/branches/Event.tsx
index aebb8322dae..86638afb2c4 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/Event.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/Event.tsx
@@ -81,7 +81,7 @@ export function Event({ event }: Props) {
             <QualityGateIndicator status={event.qualityGate.status} size="sm" />
           )}
         </div>
-        <span className="sw-body-sm-highlight">
+        <span className="sw-typo-semibold">
           {translate(`event.quality_gate.${event.qualityGate.status}`)}
         </span>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx
index 23df1709b69..244e289b2af 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx
@@ -99,11 +99,11 @@ export default function NewCodeMeasuresPanel(props: Readonly<Props>) {
   if (newIssuesCondition && !isApp) {
     issuesFooter = issuesConditionFailed ? (
       <TextError
-        className="sw-font-regular sw-body-xs sw-inline"
+        className="sw-font-regular sw-typo-sm sw-inline"
         text={getConditionRequiredLabel(newIssuesCondition, intl, true)}
       />
     ) : (
-      <LightLabel className="sw-body-xs">
+      <LightLabel className="sw-typo-sm">
         {getConditionRequiredLabel(newIssuesCondition, intl)}
       </LightLabel>
     );
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/OverallCodeMeasuresPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/OverallCodeMeasuresPanel.tsx
index 12ba4763629..e2aa9d5bc01 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/OverallCodeMeasuresPanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/OverallCodeMeasuresPanel.tsx
@@ -134,7 +134,7 @@ export default function OverallCodeMeasuresPanel(props: Readonly<OverallCodeMeas
             />
           }
         >
-          <TextSubdued className="sw-body-xs sw-mt-3">
+          <TextSubdued className="sw-typo-sm sw-mt-3">
             {intl.formatMessage({
               id: 'overview.accepted_issues.help',
             })}
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/PromotedSection.tsx b/server/sonar-web/src/main/js/apps/overview/branches/PromotedSection.tsx
index 212e1691027..745419f6407 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/PromotedSection.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/PromotedSection.tsx
@@ -61,7 +61,7 @@ export default function PromotedSection({
   return (
     <StyledWrapper className="sw-p-4 sw-pl-6 sw-my-6 sw-rounded-2">
       <div className="sw-flex sw-justify-between sw-mb-2">
-        <StyledTitle className="sw-body-md-highlight">{title}</StyledTitle>
+        <StyledTitle className="sw-typo-lg-semibold">{title}</StyledTitle>
 
         <ButtonIcon
           Icon={IconX}
@@ -71,7 +71,7 @@ export default function PromotedSection({
           variety={ButtonVariety.DefaultGhost}
         />
       </div>
-      <p className="sw-body-sm sw-mb-4">{content}</p>
+      <p className="sw-typo-default sw-mb-4">{content}</p>
       <div>
         <ButtonPrimary className="sw-mr-2" onClick={handlePrimaryButtonClick}>
           {primaryButtonLabel}
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx
index e5c87c3ab8e..c0391986fac 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx
@@ -178,7 +178,7 @@ export class QualityGateCondition extends React.PureComponent<Props> {
         <div className="sw-flex sw-flex-col sw-text-sm">
           <div className="sw-flex sw-items-center">
             <IssueTypeIcon className="sw-mr-2" type={metric.key} />
-            <span className="sw-body-sm-highlight sw-text-ellipsis sw-max-w-abs-300">
+            <span className="sw-typo-semibold sw-text-ellipsis sw-max-w-abs-300">
               {this.getPrimaryText()}
             </span>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx
index 4bbd8bcc1ce..ab4451a094e 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx
@@ -129,7 +129,7 @@ export function QualityGatePanel(props: QualityGatePanelProps) {
 
         {showCaycWarningInApp && (
           <InfoCard
-            className="sw-body-sm"
+            className="sw-typo-default"
             footer={
               <LinkStandalone to={caycUrl}>
                 <FormattedMessage id="overview.quality_gate.conditions.cayc.link" />
@@ -142,7 +142,7 @@ export function QualityGatePanel(props: QualityGatePanelProps) {
 
         {showCaycWarningInProject && (
           <InfoCard
-            className="sw-body-sm"
+            className="sw-typo-default"
             footer={
               <LinkStandalone to={caycUrl}>
                 <FormattedMessage id="overview.quality_gate.conditions.cayc.link" />
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx
index 64993e86a8f..345d80b2e07 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx
@@ -54,7 +54,7 @@ export function QualityGatePanelSection(props: QualityGatePanelSectionProps) {
             open={!collapsed}
             header={
               <div className="sw-flex sw-flex-col sw-text-sm">
-                <span className="sw-body-sm-highlight">{qgStatus.name}</span>
+                <span className="sw-typo-semibold">{qgStatus.name}</span>
               </div>
             }
           >
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx
index ab93b482172..a742f8365d0 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx
@@ -83,7 +83,7 @@ export function SoftwareImpactMeasureCard(props: Readonly<SoftwareImpactBreakdow
       className="sw-overflow-hidden sw-rounded-2 sw-flex-col"
     >
       <div className="sw-flex sw-items-center">
-        <ColorBold className="sw-body-sm-highlight">
+        <ColorBold className="sw-typo-semibold">
           {intl.formatMessage({ id: `software_quality.${softwareQuality}` })}
         </ColorBold>
         {failed && (
@@ -120,7 +120,7 @@ export function SoftwareImpactMeasureCard(props: Readonly<SoftwareImpactBreakdow
             ) : (
               <StyledDash className="sw-font-bold" name="-" />
             )}
-            <TextSubdued className="sw-self-end sw-body-sm sw-pb-1">
+            <TextSubdued className="sw-self-end sw-typo-default sw-pb-1">
               {intl.formatMessage({ id: 'overview.measures.software_impact.total_open_issues' })}
             </TextSubdued>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx
index 79bc8d400e7..3520e7ab4ec 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx
@@ -56,7 +56,7 @@ export function SonarLintPromotion({ currentUser, qgConditions }: SonarLintPromo
     return null;
   }
   return (
-    <InfoCard className="it__overview__sonarlint-promotion sw-body-sm">
+    <InfoCard className="it__overview__sonarlint-promotion sw-typo-default">
       <FormattedMessage
         id="overview.fix_failed_conditions_with_sonarlint"
         defaultMessage={translate('overview.fix_failed_conditions_with_sonarlint')}
diff --git a/server/sonar-web/src/main/js/apps/overview/components/AfterMergeNote.tsx b/server/sonar-web/src/main/js/apps/overview/components/AfterMergeNote.tsx
index 9bb4f6f2f5c..308f3b6aab1 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/AfterMergeNote.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/AfterMergeNote.tsx
@@ -34,7 +34,7 @@ export default function AfterMergeNote({ measures, overallMetric }: Readonly<Pro
   const afterMergeValue = findMeasure(measures, overallMetric)?.value;
 
   return afterMergeValue ? (
-    <Note className="sw-mt-2 sw-body-xs sw-inline-block">
+    <Note className="sw-mt-2 sw-typo-sm sw-inline-block">
       <strong className="sw-mr-1">{formatMeasure(afterMergeValue, MetricType.Percent)}</strong>
       <FormattedMessage id="component_measures.facet_category.overall_category.estimated" />
     </Note>
diff --git a/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx b/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx
index ce1c5a38b4f..4676d3ec19c 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx
@@ -48,7 +48,7 @@ export function IssueMeasuresCardInner(props: Readonly<IssueMeasuresCardInnerPro
           'sw-opacity-60': disabled,
         })}
       >
-        <ColorBold className="sw-flex sw-items-center sw-gap-2 sw-body-sm-highlight">
+        <ColorBold className="sw-flex sw-items-center sw-gap-2 sw-typo-semibold">
           {header}
 
           {failed && (
diff --git a/server/sonar-web/src/main/js/apps/overview/components/LastAnalysisLabel.tsx b/server/sonar-web/src/main/js/apps/overview/components/LastAnalysisLabel.tsx
index 5fcb961d0f3..e4afb3c688d 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/LastAnalysisLabel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/LastAnalysisLabel.tsx
@@ -36,7 +36,7 @@ export default function LastAnalysisLabel({ analysisDate }: Readonly<Props>) {
           id: 'overview.last_analysis_x',
         },
         {
-          date: <DateFromNow className="sw-body-sm-highlight" date={analysisDate} />,
+          date: <DateFromNow className="sw-typo-semibold" date={analysisDate} />,
         },
       )}
     </span>
diff --git a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx
index 7b21eb3a755..02251afceb1 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx
@@ -42,7 +42,7 @@ export default function MeasuresCard(
 
   return (
     <div>
-      <ColorBold className="sw-body-sm-highlight">{translate(label)}</ColorBold>
+      <ColorBold className="sw-typo-semibold">{translate(label)}</ColorBold>
       {failed && (
         <Badge className="sw-mt-1/2 sw-px-1 sw-ml-2" variant="deleted">
           {translate('overview.measures.failed_badge')}
diff --git a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardNumber.tsx b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardNumber.tsx
index 21abfe5068c..ae16789d347 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardNumber.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardNumber.tsx
@@ -54,7 +54,7 @@ export default function MeasuresCardNumber(
       failed={conditionFailed}
       {...rest}
     >
-      <span className="sw-body-xs sw-mt-3">
+      <span className="sw-typo-sm sw-mt-3">
         {showRequired &&
           condition &&
           (conditionFailed ? (
diff --git a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx
index 2102107d12f..762fa4ac9f4 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx
@@ -111,7 +111,7 @@ export default function MeasuresCardPercent(
       icon={renderIcon(measurementType, value)}
     >
       {shouldRenderRequiredLabel && (
-        <span className="sw-body-xs sw-mt-3">
+        <span className="sw-typo-sm sw-mt-3">
           {conditionFailed ? (
             <TextError
               className="sw-font-regular sw-inline"
@@ -123,7 +123,7 @@ export default function MeasuresCardPercent(
         </span>
       )}
       <div
-        className={classNames('sw-flex sw-body-xs sw-justify-between sw-items-center', {
+        className={classNames('sw-flex sw-typo-sm sw-justify-between sw-items-center', {
           'sw-mt-1': shouldRenderRequiredLabel,
           'sw-mt-3': !shouldRenderRequiredLabel,
         })}
@@ -141,7 +141,7 @@ export default function MeasuresCardPercent(
                     isDefined(linesValue) ? `${formattedMeasure} (${linesValue})` : '0',
                     localizeMetric(linesMetric),
                   )}
-                  className="sw-body-sm-highlight sw--mt-[3px]"
+                  className="sw-typo-semibold sw--mt-[3px]"
                   to={linesUrl}
                 >
                   {formattedMeasure}
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGateConditions.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGateConditions.tsx
index b04f9a478ff..e4ee0a0dd8f 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGateConditions.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGateConditions.tsx
@@ -79,7 +79,7 @@ function FailedQGCondition(
   const url = getQGConditionUrl(component.key, condition, branchLike);
 
   return (
-    <StyledConditionButton className="sw-px-3 sw-py-2 sw-rounded-1 sw-body-sm" to={url}>
+    <StyledConditionButton className="sw-px-3 sw-py-2 sw-rounded-1 sw-typo-default" to={url}>
       <Badge className="sw-mr-2 sw-px-1" variant="deleted">
         {translate('overview.measures.failed_badge')}
       </Badge>
@@ -126,7 +126,7 @@ function FailedRatingMetric({ condition }: Readonly<FailedMetricProps>) {
           rating: `${intl.formatMessage({
             id: `metric_domain.${domain}`,
           })} ${intl.formatMessage({ id: 'metric.type.RATING' }).toLowerCase()}`,
-          value: <strong className="sw-body-sm-highlight">{formatMeasure(actual, type)}</strong>,
+          value: <strong className="sw-typo-semibold">{formatMeasure(actual, type)}</strong>,
           threshold: formatMeasure(error, type),
         },
       )}
@@ -149,7 +149,7 @@ function FailedGeneralMetric({ condition }: Readonly<FailedMetricProps>) {
         {
           metric: (
             <>
-              <strong className="sw-body-sm-highlight sw-mr-1">
+              <strong className="sw-typo-semibold sw-mr-1">
                 {formatMeasure(
                   condition.actual,
                   getShortType(metric.type),
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx
index 8bfbca3dccc..f2719e08a55 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx
@@ -131,11 +131,11 @@ export default function MeasuresCardPanel(props: React.PropsWithChildren<Props>)
               issuesCondition &&
               (isIssuesConditionFailed ? (
                 <TextError
-                  className="sw-font-regular sw-body-xs sw-inline"
+                  className="sw-font-regular sw-typo-sm sw-inline"
                   text={getConditionRequiredLabel(issuesCondition, intl, true)}
                 />
               ) : (
-                <LightLabel className="sw-body-xs">
+                <LightLabel className="sw-typo-sm">
                   {getConditionRequiredLabel(issuesCondition, intl)}
                 </LightLabel>
               ))
@@ -160,7 +160,7 @@ export default function MeasuresCardPanel(props: React.PropsWithChildren<Props>)
               )
             }
             footer={
-              <TextSubdued className="sw-body-xs">
+              <TextSubdued className="sw-typo-sm">
                 {intl.formatMessage({ id: 'overview.accepted_issues.help' })}
               </TextSubdued>
             }
@@ -188,7 +188,7 @@ export default function MeasuresCardPanel(props: React.PropsWithChildren<Props>)
                   }
                   side={TooltipSide.Top}
                 >
-                  <span className="sw-body-sm sw-cursor-default">
+                  <span className="sw-typo-default sw-cursor-default">
                     <IconQuestionMark color="echoes-color-icon-subdued" />
                   </span>
                 </Tooltip>
@@ -201,7 +201,7 @@ export default function MeasuresCardPanel(props: React.PropsWithChildren<Props>)
             url={fixedUrl}
             icon={fixedCount !== undefined && fixedCount !== '0' && <TrendDownCircleIcon />}
             footer={
-              <TextSubdued className="sw-body-xs">
+              <TextSubdued className="sw-typo-sm">
                 {intl.formatMessage({ id: 'overview.pull_request.fixed_issues.help' })}
               </TextSubdued>
             }
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestMetaTopBar.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestMetaTopBar.tsx
index 6484ef39909..d896877f22d 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestMetaTopBar.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestMetaTopBar.tsx
@@ -37,7 +37,7 @@ export default function PullRequestMetaTopBar({ pullRequest, measures }: Readonl
 
   const leftSection = (
     <div>
-      <strong className="sw-body-sm-highlight sw-mr-1">
+      <strong className="sw-typo-semibold sw-mr-1">
         {formatMeasure(
           getLeakValue(findMeasure(measures, MetricKey.new_lines)),
           MetricType.ShortInteger,
@@ -53,7 +53,7 @@ export default function PullRequestMetaTopBar({ pullRequest, measures }: Readonl
   );
 
   return (
-    <div className="sw-flex sw-justify-between sw-whitespace-nowrap sw-body-sm">
+    <div className="sw-flex sw-justify-between sw-whitespace-nowrap sw-typo-default">
       {leftSection}
       {rightSection}
     </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx
index f83f694ba7b..8621c4c1b3d 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx
@@ -92,7 +92,7 @@ export default function PullRequestOverview(props: Readonly<Readonly<Props>>) {
 
   return (
     <CenteredLayout>
-      <PageContentFontWrapper className="it__pr-overview sw-mt-12 sw-mb-8 sw-grid sw-grid-cols-12 sw-body-sm">
+      <PageContentFontWrapper className="it__pr-overview sw-mt-12 sw-mb-8 sw-grid sw-grid-cols-12 sw-typo-default">
         <div className="sw-col-start-2 sw-col-span-10">
           <PullRequestMetaTopBar pullRequest={pullRequest} measures={measures} />
           <BasicSeparator className="sw-my-4" />
diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/SonarLintAd.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/SonarLintAd.tsx
index b787eac55b3..d6c355e5c71 100644
--- a/server/sonar-web/src/main/js/apps/overview/pullRequests/SonarLintAd.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/SonarLintAd.tsx
@@ -64,7 +64,7 @@ export default function SonarLintAd({ status }: Readonly<Props>) {
   return (
     <StyledSummaryCard className="it__overview__sonarlint-promotion sw-flex sw-flex-col sw-mt-4">
       <div className="sw-flex sw-justify-between">
-        <SubTitle as="h2" className="sw-body-md-highlight">
+        <SubTitle as="h2" className="sw-typo-lg-semibold">
           {intl.formatMessage({ id: 'overview.sonarlint_ad.header' })}
         </SubTitle>
         <DiscreetInteractiveIcon
@@ -80,14 +80,14 @@ export default function SonarLintAd({ status }: Readonly<Props>) {
         <TickLink message={intl.formatMessage({ id: 'overview.sonarlint_ad.details_3' })} />
         <TickLink message={intl.formatMessage({ id: 'overview.sonarlint_ad.details_4' })} />
         <TickLink
-          className="sw-body-sm-highlight"
+          className="sw-typo-semibold"
           message={intl.formatMessage({ id: 'overview.sonarlint_ad.details_5' })}
         />
       </ul>
       <SubnavigationFlowSeparator className="sw-mb-4" />
       <div>
         <StandoutLink
-          className="sw-text-left sw-body-sm-highlight"
+          className="sw-text-left sw-typo-semibold"
           to="https://www.sonarsource.com/products/sonarlint/features/connected-mode/?referrer=sonarqube"
         >
           {intl.formatMessage({ id: 'overview.sonarlint_ad.learn_more' })}
@@ -99,7 +99,7 @@ export default function SonarLintAd({ status }: Readonly<Props>) {
 
 function TickLink({ className, message }: Readonly<{ className?: string; message: string }>) {
   return (
-    <ListItem className={`sw-body-sm ${className}`}>
+    <ListItem className={`sw-typo-default ${className}`}>
       <CheckIcon fill="iconTrendPositive" />
       <LightLabel className="sw-pl-1">{message}</LightLabel>
     </ListItem>
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/Home.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/Home.tsx
index a7786499ffe..15705cbc40c 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/Home.tsx
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/Home.tsx
@@ -36,7 +36,7 @@ interface Props {
 export default function Home(props: Props) {
   return (
     <LargeCenteredLayout id="users-page">
-      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+      <PageContentFontWrapper className="sw-my-8 sw-typo-default">
         <Helmet defer={false} title={translate('permission_templates.page')} />
 
         <Header ready={props.ready} refresh={props.refresh} />
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/Template.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/Template.tsx
index d4f96c2fa0c..22d0ef3b1f9 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/Template.tsx
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/Template.tsx
@@ -337,7 +337,7 @@ export default class Template extends React.PureComponent<Props, State> {
 
     return (
       <LargeCenteredLayout id="permission-template">
-        <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+        <PageContentFontWrapper className="sw-my-8 sw-typo-default">
           <Helmet defer={false} title={template.name} />
 
           <TemplateHeader
diff --git a/server/sonar-web/src/main/js/apps/permissions/global/components/PermissionsGlobalApp.tsx b/server/sonar-web/src/main/js/apps/permissions/global/components/PermissionsGlobalApp.tsx
index 8fb1fbeabf2..57566f63873 100644
--- a/server/sonar-web/src/main/js/apps/permissions/global/components/PermissionsGlobalApp.tsx
+++ b/server/sonar-web/src/main/js/apps/permissions/global/components/PermissionsGlobalApp.tsx
@@ -258,7 +258,7 @@ class PermissionsGlobalApp extends React.PureComponent<Props, State> {
     );
     return (
       <LargeCenteredLayout id="project-permissions-page">
-        <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+        <PageContentFontWrapper className="sw-my-8 sw-typo-default">
           <Helmet defer={false} title={translate('global_permissions.permission')} />
           <PageHeader />
           <AllHoldersList
diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx b/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx
index 3741378ba1f..dd458cd1b06 100644
--- a/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx
+++ b/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx
@@ -362,7 +362,7 @@ class PermissionsProjectApp extends React.PureComponent<Props, State> {
 
     return (
       <LargeCenteredLayout id="project-permissions-page">
-        <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+        <PageContentFontWrapper className="sw-my-8 sw-typo-default">
           <Helmet defer={false} title={translate('permissions.page')} />
 
           <PageHeader
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx
index 9ed8ee1f261..c7cc6ee879e 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx
@@ -128,11 +128,11 @@ export default class ProjectActivityAnalysesList extends React.PureComponent<Pro
       return (
         <div>
           {this.props.initializing ? (
-            <div className="sw-p-4 sw-body-sm">
+            <div className="sw-p-4 sw-typo-default">
               <Spinner />
             </div>
           ) : (
-            <div className="sw-p-4 sw-body-sm">
+            <div className="sw-p-4 sw-typo-default">
               <LightLabel>{translate('no_results')}</LightLabel>
             </div>
           )}
@@ -154,7 +154,7 @@ export default class ProjectActivityAnalysesList extends React.PureComponent<Pro
       >
         {newCodePeriod.baselineAnalysisKey !== undefined &&
           newCodePeriod.firstNewCodeAnalysisKey === undefined && (
-            <BaselineMarker className="sw-body-sm sw-mb-2">
+            <BaselineMarker className="sw-typo-default sw-mb-2">
               <span className="sw-py-1/2 sw-px-1">
                 {translate('project_activity.new_code_period_start')}
               </span>
@@ -199,7 +199,7 @@ export default class ProjectActivityAnalysesList extends React.PureComponent<Pro
                     data-day={toShortISO8601String(Number(day))}
                     key={day}
                   >
-                    <div className="sw-body-md-highlight sw-mb-3">
+                    <div className="sw-typo-lg-semibold sw-mb-3">
                       <DateFormatter date={Number(day)} long />
                     </div>
                     <ul className="it__project-activity-analyses-list">
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx
index 1597f4291ed..f7f790ca090 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx
@@ -121,7 +121,7 @@ function ProjectActivityAnalysis(props: ProjectActivityAnalysisProps) {
           ref={(ref) => (node = ref)}
         >
           <div className="it__project-activity-time">
-            <ActivityTime className="sw-h-page sw-body-sm-highlight sw-text-right sw-mr-2 sw-py-1/2">
+            <ActivityTime className="sw-h-page sw-typo-semibold sw-text-right sw-mr-2 sw-py-1/2">
               <TimeFormatter date={parsedDate} long={false}>
                 {(formattedTime) => (
                   <time dateTime={parsedDate.toISOString()}>{formattedTime}</time>
@@ -201,7 +201,7 @@ function ProjectActivityAnalysis(props: ProjectActivityAnalysisProps) {
         </ActivityAnalysisListItem>
       </Tooltip>
       {isBaseline && (
-        <BaselineMarker className="sw-body-sm sw-mt-2">
+        <BaselineMarker className="sw-typo-default sw-mt-2">
           <span className="sw-py-1/2 sw-px-1">
             {translate('project_activity.new_code_period_start')}
           </span>
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx
index 7b76d0800d8..5a1bcea0ee8 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx
@@ -62,7 +62,7 @@ export default function ProjectActivityPageFilters(props: ProjectActivityPageFil
       {!isPortfolioLike(project.qualifier) && (
         <InputSelect
           aria-label={translate('project_activity.filter_events')}
-          className="sw-mr-8 sw-body-sm sw-w-abs-200"
+          className="sw-mr-8 sw-typo-default sw-w-abs-200"
           isClearable
           onChange={(data: LabelValueSelectOption) => handleCategoryChange(data)}
           options={options}
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/ProjectBranchesApp.tsx b/server/sonar-web/src/main/js/apps/projectBranches/ProjectBranchesApp.tsx
index 4eda24865bd..90f0f0bdef2 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/ProjectBranchesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/ProjectBranchesApp.tsx
@@ -37,7 +37,7 @@ function ProjectBranchesApp(props: ProjectBranchesAppProps) {
 
   return (
     <LargeCenteredLayout id="project-branch-like">
-      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+      <PageContentFontWrapper className="sw-my-8 sw-typo-default">
         <header className="sw-mb-5">
           <Helmet defer={false} title={translate('project_branch_pull_request.page')} />
           <Title className="sw-mb-4">{translate('project_branch_pull_request.page')}</Title>
diff --git a/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx b/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx
index d104562c702..87a48fd31e6 100644
--- a/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx
+++ b/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx
@@ -36,7 +36,7 @@ export default function App() {
   return (
     <CenteredLayout>
       <Helmet defer={false} title={translate('deletion.page')} />
-      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+      <PageContentFontWrapper className="sw-my-8 sw-typo-default">
         <Header component={component} />
         <Form component={component} />
       </PageContentFontWrapper>
diff --git a/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx b/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx
index 7c000544a0f..bae2834be5d 100644
--- a/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx
@@ -40,7 +40,7 @@ export function ProjectDumpApp({ component, hasFeature }: Readonly<Props>) {
 
   return (
     <LargeCenteredLayout id="project-dump">
-      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+      <PageContentFontWrapper className="sw-my-8 sw-typo-default">
         <header className="sw-mb-5">
           <Helmet defer={false} title={translate('project_dump.page')} />
           <Title className="sw-mb-4">{translate('project_dump.page')}</Title>
@@ -61,7 +61,7 @@ export function ProjectDumpApp({ component, hasFeature }: Readonly<Props>) {
 
         <>
           <div className="sw-mb-4">
-            <h2 className="sw-heading-md">{translate('project_dump.export')}</h2>
+            <h2 className="sw-heading-lg">{translate('project_dump.export')}</h2>
           </div>
           <Export componentKey={component.key} />
           <BasicSeparator className="sw-my-8" />
diff --git a/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx b/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx
index 165815cefc3..2f9a9d73b34 100644
--- a/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx
+++ b/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx
@@ -196,7 +196,7 @@ export default function Import(props: Readonly<Props>) {
   return (
     <>
       <div className="sw-my-4">
-        <h2 className="sw-heading-md">{translate('project_dump.import')}</h2>
+        <h2 className="sw-heading-lg">{translate('project_dump.import')}</h2>
       </div>
 
       <Spinner isLoading={isLoading}>
diff --git a/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx b/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx
index a6cd0ba1bba..764111dae0e 100644
--- a/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx
@@ -74,7 +74,7 @@ function ProjectInformationApp(props: Props) {
     <main>
       <LargeCenteredLayout>
         <PageContentFontWrapper>
-          <div className="overview sw-my-6 sw-body-sm">
+          <div className="overview sw-my-6 sw-typo-default">
             <Title className="sw-mb-12">
               {translate(isApp ? 'application' : 'project', 'info.title')}
             </Title>
diff --git a/server/sonar-web/src/main/js/apps/projectKey/ProjectKeyApp.tsx b/server/sonar-web/src/main/js/apps/projectKey/ProjectKeyApp.tsx
index d7bb648fc4b..c9577dffcec 100644
--- a/server/sonar-web/src/main/js/apps/projectKey/ProjectKeyApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectKey/ProjectKeyApp.tsx
@@ -45,7 +45,7 @@ function ProjectKeyApp({ component, router }: Props) {
   return (
     <LargeCenteredLayout id="project-key">
       <Helmet defer={false} title={translate('update_key.page')} />
-      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+      <PageContentFontWrapper className="sw-my-8 sw-typo-default">
         <header className="sw-mt-8 sw-mb-4">
           <Title className="sw-mb-4">{translate('update_key.page')}</Title>
           <div className="sw-mb-2">{translate('update_key.page.description')}</div>
diff --git a/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx b/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx
index 936480ca774..7d20cbb1b82 100644
--- a/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx
+++ b/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx
@@ -65,12 +65,12 @@ export default function UpdateForm(props: UpdateFormProps) {
           <div className="sw-mt-2">
             {translate('update_key.old_key')}
             {': '}
-            <strong className="sw-body-md-highlight">{component.key}</strong>
+            <strong className="sw-typo-lg-semibold">{component.key}</strong>
           </div>
           <div className="sw-mt-2">
             {translate('update_key.new_key')}
             {': '}
-            <strong className="sw-body-md-highlight">{newKey}</strong>
+            <strong className="sw-typo-lg-semibold">{newKey}</strong>
           </div>
         </>
       }
diff --git a/server/sonar-web/src/main/js/apps/projectLinks/ProjectLinksApp.tsx b/server/sonar-web/src/main/js/apps/projectLinks/ProjectLinksApp.tsx
index 21dfb68add7..eb6e1fce254 100644
--- a/server/sonar-web/src/main/js/apps/projectLinks/ProjectLinksApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectLinks/ProjectLinksApp.tsx
@@ -103,7 +103,7 @@ export class ProjectLinksApp extends React.PureComponent<Props, State> {
     const { loading, links } = this.state;
     return (
       <LargeCenteredLayout>
-        <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+        <PageContentFontWrapper className="sw-my-8 sw-typo-default">
           <Helmet defer={false} title={translate('project_links.page')} />
           <Header onCreate={this.handleCreateLink} />
           <Spinner loading={loading}>
diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx
index 6e8dd56f300..31360afa2ad 100644
--- a/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx
+++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx
@@ -175,7 +175,7 @@ export default class BranchNewCodeDefinitionSettingModal extends React.PureCompo
 
     const formBody = (
       <form id={FORM_ID} onSubmit={this.handleSubmit}>
-        <PageContentFontWrapper className="sw-body-sm">
+        <PageContentFontWrapper className="sw-typo-default">
           <p className="sw-mb-3">{translate('baseline.new_code_period_for_branch_x.question')}</p>
           <div className="sw-flex sw-flex-col sw-mb-10 sw-gap-4" role="radiogroup">
             <NewCodeDefinitionPreviousVersionOption
diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx
index 440a8d74b05..955daf83711 100644
--- a/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx
@@ -197,7 +197,7 @@ function ProjectNewCodeDefinitionApp(props: Readonly<ProjectNewCodeDefinitionApp
 
       <Helmet defer={false} title={translate('project_baseline.page')} />
 
-      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+      <PageContentFontWrapper className="sw-my-8 sw-typo-default">
         <AppHeader canAdmin={!!appState.canAdmin} />
 
         <Spinner loading={isLoading} />
diff --git a/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx b/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx
index 50528c55e9b..fb03e5d49ae 100644
--- a/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx
@@ -128,7 +128,7 @@ export default function ProjectQualityGateAppRenderer(props: ProjectQualityGateA
 
   return (
     <LargeCenteredLayout id="project-quality-gate">
-      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+      <PageContentFontWrapper className="sw-my-8 sw-typo-default">
         <Suggestions suggestion={DocLink.CaYC} />
         <Helmet defer={false} title={translate('project_quality_gate.page')} />
         <A11ySkipTarget anchor="qg_main" />
diff --git a/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx b/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx
index 788c1c708cb..6cf48a25acf 100644
--- a/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx
@@ -92,7 +92,7 @@ export default function ProjectQualityProfilesAppRenderer(
 
   return (
     <LargeCenteredLayout id="project-quality-profiles">
-      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+      <PageContentFontWrapper className="sw-my-8 sw-typo-default">
         <Suggestions suggestion={DocLink.InstanceAdminQualityProfiles} />
         <Helmet defer={false} title={translate('project_quality_profiles.page')} />
         <A11ySkipTarget anchor="profiles_main" />
diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
index 0a2ea49e239..3d9eeead93c 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
@@ -314,7 +314,7 @@ export class AllProjects extends React.PureComponent<Props, State> {
         </Heading>
 
         <LargeCenteredLayout>
-          <PageContentFontWrapper className="sw-flex sw-w-full sw-body-md">
+          <PageContentFontWrapper className="sw-flex sw-w-full sw-typo-lg">
             {this.renderSide()}
 
             <main className="sw-flex sw-flex-col sw-box-border sw-min-w-0 sw-pl-12 sw-pt-6 sw-flex-1">
diff --git a/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx b/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx
index 9427e0e0053..a6c279a5fc4 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx
@@ -29,10 +29,10 @@ export default function EmptyFavoriteSearch({ query }: { query: Query }) {
   return (
     <div aria-live="assertive" className="sw-py-8 sw-text-center">
       <FishVisual />
-      <Highlight as="h3" className="sw-body-md-highlight sw-mt-6">
+      <Highlight as="h3" className="sw-typo-lg-semibold sw-mt-6">
         {translate('no_results_search.favorites')}
       </Highlight>
-      <div className="sw-my-4 sw-body-sm">
+      <div className="sw-my-4 sw-typo-default">
         <FormattedMessage
           defaultMessage={translate('no_results_search.favorites.2')}
           id="no_results_search.favorites.2"
diff --git a/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx b/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx
index 13d74b44a65..d7b8bcca91f 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx
@@ -40,14 +40,14 @@ export function EmptyInstance(props: EmptyInstanceProps) {
   return (
     <div className="sw-text-center sw-py-8">
       <FishVisual />
-      <Highlight as="h3" className="sw-body-md-highlight sw-mt-6">
+      <Highlight as="h3" className="sw-typo-lg-semibold sw-mt-6">
         {showNewProjectButton
           ? translate('projects.no_projects.empty_instance.new_project')
           : translate('projects.no_projects.empty_instance')}
       </Highlight>
       {showNewProjectButton && (
         <div>
-          <p className="sw-mt-2 sw-body-sm">
+          <p className="sw-mt-2 sw-typo-default">
             {translate('projects.no_projects.empty_instance.how_to_add_projects')}
           </p>
           <Button
diff --git a/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx
index 24697a8bc3a..77180ed4125 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx
@@ -24,16 +24,16 @@ import { translate } from '../../../helpers/l10n';
 export default function NoFavoriteProjects() {
   return (
     <div className="sw-py-8 sw-text-center">
-      <Highlight as="h3" className="sw-mb-2 sw-body-md-highlight">
+      <Highlight as="h3" className="sw-mb-2 sw-typo-lg-semibold">
         {translate('projects.no_favorite_projects')}
       </Highlight>
 
       <div>
-        <p className="sw-mt-2 sw-body-sm">
+        <p className="sw-mt-2 sw-typo-default">
           {translate('projects.no_favorite_projects.engagement')}
         </p>
         <p className="sw-mt-6">
-          <StandoutLink className="sw-mt-6 sw-body-sm-highlight" to="/projects/all">
+          <StandoutLink className="sw-mt-6 sw-typo-semibold" to="/projects/all">
             {translate('projects.explore_projects')}
           </StandoutLink>
         </p>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
index 266fdf17d95..66f6fe5c1a6 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
@@ -89,11 +89,11 @@ export default function PageHeader(props: Readonly<Props>) {
         <div className="sw-flex sw-items-center">
           {total != null && (
             <>
-              <LightPrimary id="projects-total" className="sw-body-sm-highlight sw-mr-1">
+              <LightPrimary id="projects-total" className="sw-typo-semibold sw-mr-1">
                 {total}
               </LightPrimary>
 
-              <LightLabel className="sw-body-sm">{translate('projects_')}</LightLabel>
+              <LightLabel className="sw-typo-default">{translate('projects_')}</LightLabel>
             </>
           )}
 
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
index 966ff0e3b05..37632472565 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
@@ -74,11 +74,11 @@ export default function PageSidebar(props: PageSidebarProps) {
   }, [onClearAll, heading]);
 
   return (
-    <div className="sw-body-sm sw-px-4 sw-pt-12 sw-pb-24">
+    <div className="sw-typo-default sw-px-4 sw-pt-12 sw-pb-24">
       <FavoriteFilter />
 
       <div className="sw-flex sw-items-center sw-justify-between">
-        <StyledPageTitle className="sw-body-md-highlight" as="h2" tabIndex={-1} ref={heading}>
+        <StyledPageTitle className="sw-typo-lg-semibold" as="h2" tabIndex={-1} ref={heading}>
           {translate('filters')}
         </StyledPageTitle>
 
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx b/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx
index 83f88e689bc..13e491fe113 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx
@@ -49,13 +49,13 @@ export default function PerspectiveSelect(props: Readonly<Props>) {
       <StyledPageTitle
         id="aria-projects-perspective"
         as="label"
-        className="sw-body-sm-highlight sw-mr-2"
+        className="sw-typo-semibold sw-mr-2"
       >
         {translate('projects.perspective')}
       </StyledPageTitle>
       <Select
         ariaLabelledBy="aria-projects-perspective"
-        className="sw-mr-4 sw-body-sm"
+        className="sw-mr-4 sw-typo-default"
         hasDropdownAutoWidth
         isNotClearable
         onChange={handleChange}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
index e861202b865..bf18d43871b 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
@@ -73,16 +73,12 @@ export default class ProjectsSortingSelect extends React.PureComponent<Props> {
 
     return (
       <div className="sw-flex sw-items-center">
-        <StyledPageTitle
-          id="aria-projects-sort"
-          as="label"
-          className="sw-body-sm-highlight sw-mr-2"
-        >
+        <StyledPageTitle id="aria-projects-sort" as="label" className="sw-typo-semibold sw-mr-2">
           {translate('projects.sort_by')}
         </StyledPageTitle>
         <Select
           ariaLabelledBy="aria-projects-sort"
-          className="sw-body-sm"
+          className="sw-typo-default"
           onChange={this.handleSortChange}
           data={this.getOptions()}
           optionComponent={ProjectsSortingSelectItem}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx
index 59890b720d8..36d965f4b0b 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx
@@ -141,7 +141,7 @@ function renderFirstLine(
               <QualityGateIndicator
                 status={(measures[MetricKey.alert_status] as Status) ?? 'NONE'}
               />
-              <LightPrimary className="sw-ml-2 sw-body-sm-highlight">{formatted}</LightPrimary>
+              <LightPrimary className="sw-ml-2 sw-typo-semibold">{formatted}</LightPrimary>
             </span>
           </Tooltip>
         )}
@@ -151,12 +151,12 @@ function renderFirstLine(
         {isDefined(analysisDate) && analysisDate !== '' && (
           <DateTimeFormatter date={analysisDate}>
             {(formattedAnalysisDate) => (
-              <span className="sw-body-sm-highlight" title={formattedAnalysisDate}>
+              <span className="sw-typo-semibold" title={formattedAnalysisDate}>
                 <FormattedMessage
                   id="projects.last_analysis_on_x"
                   defaultMessage={translate('projects.last_analysis_on_x')}
                   values={{
-                    date: <DateFromNow className="sw-body-sm" date={analysisDate} />,
+                    date: <DateFromNow className="sw-typo-default" date={analysisDate} />,
                   }}
                 />
               </span>
@@ -170,7 +170,7 @@ function renderFirstLine(
                 <SeparatorCircleIcon className="sw-mx-1" />
 
                 <div>
-                  <span className="sw-body-sm-highlight sw-mr-1" data-key={MetricKey.new_lines}>
+                  <span className="sw-typo-semibold sw-mr-1" data-key={MetricKey.new_lines}>
                     <Measure
                       componentKey={key}
                       metricKey={MetricKey.new_lines}
@@ -179,7 +179,7 @@ function renderFirstLine(
                     />
                   </span>
 
-                  <span className="sw-body-sm">{translate('metric.new_lines.name')}</span>
+                  <span className="sw-typo-default">{translate('metric.new_lines.name')}</span>
                 </div>
               </>
             )
@@ -188,7 +188,7 @@ function renderFirstLine(
                 <SeparatorCircleIcon className="sw-mx-1" />
 
                 <div>
-                  <span className="sw-body-sm-highlight sw-mr-1" data-key={MetricKey.ncloc}>
+                  <span className="sw-typo-semibold sw-mr-1" data-key={MetricKey.ncloc}>
                     <Measure
                       componentKey={key}
                       metricKey={MetricKey.ncloc}
@@ -197,12 +197,12 @@ function renderFirstLine(
                     />
                   </span>
 
-                  <span className="sw-body-sm">{translate('metric.ncloc.name')}</span>
+                  <span className="sw-typo-default">{translate('metric.ncloc.name')}</span>
                 </div>
 
                 <SeparatorCircleIcon className="sw-mx-1" />
 
-                <span className="sw-body-sm" data-key={MetricKey.ncloc_language_distribution}>
+                <span className="sw-typo-default" data-key={MetricKey.ncloc_language_distribution}>
                   <ProjectCardLanguages distribution={measures.ncloc_language_distribution} />
                 </span>
               </>
@@ -213,7 +213,7 @@ function renderFirstLine(
             <SeparatorCircleIcon className="sw-mx-1" />
 
             <Tags
-              className="sw-body-sm"
+              className="sw-typo-default"
               emptyText={translate('issue.no_tag')}
               ariaTagsListLabel={translate('issue.tags')}
               tooltip={Tooltip}
@@ -257,7 +257,7 @@ function renderSecondLine(
         isEmpty(analysisDate) &&
         isLoggedIn(currentUser) &&
         isScannable && (
-          <Link className="sw-ml-2 sw-body-sm-highlight" to={getProjectUrl(key)}>
+          <Link className="sw-ml-2 sw-typo-semibold" to={getProjectUrl(key)}>
             {translate('projects.configure_analysis')}
           </Link>
         )}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx
index 2047d0f73c2..9a58494823a 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx
@@ -37,7 +37,7 @@ export default function ProjectCardMeasure(
       className={classNames('it__project_card_measure sw-text-center', className)}
     >
       <div className="sw-flex sw-justify-center">{children}</div>
-      <div className="sw-body-sm sw-mt-1 sw-whitespace-nowrap" title={label}>
+      <div className="sw-typo-default sw-mt-1 sw-whitespace-nowrap" title={label}>
         {label}
       </div>
     </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx
index 457f82dc06e..30b3e2c55b2 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx
@@ -59,7 +59,7 @@ function renderNewIssues(props: ProjectCardMeasuresProps) {
         metricKey={MetricKey.new_violations}
         metricType={MetricType.ShortInteger}
         value={measures[MetricKey.new_violations]}
-        className="sw-ml-2 sw-body-md-highlight"
+        className="sw-ml-2 sw-typo-lg-semibold"
       />
     </ProjectCardMeasure>
   );
@@ -78,7 +78,7 @@ function renderCoverage(props: ProjectCardMeasuresProps) {
           metricKey={coverageMetric}
           metricType={MetricType.Percent}
           value={measures[coverageMetric]}
-          className="sw-ml-2 sw-body-md-highlight"
+          className="sw-ml-2 sw-typo-lg-semibold"
         />
       </div>
     </ProjectCardMeasure>
@@ -108,7 +108,7 @@ function renderDuplication(props: ProjectCardMeasuresProps) {
           metricKey={duplicationMetric}
           metricType={MetricType.Percent}
           value={measures[duplicationMetric]}
-          className="sw-ml-2 sw-body-md-highlight"
+          className="sw-ml-2 sw-typo-lg-semibold"
         />
       </div>
     </ProjectCardMeasure>
@@ -186,7 +186,7 @@ function renderRatings(props: ProjectCardMeasuresProps) {
           metricKey={metricKey}
           metricType={metricType}
           value={measureValue}
-          className="sw-ml-2 sw-body-md-highlight"
+          className="sw-ml-2 sw-typo-lg-semibold"
         />
       </ProjectCardMeasure>
     );
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx
index bae3f637d03..2d712d4042b 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx
@@ -47,7 +47,7 @@ export default function Header(props: Readonly<Props>) {
           <div className="sw-mr-2">
             <span className="sw-mr-1">
               {translate('settings.projects.default_visibility_of_new_projects')}{' '}
-              <strong className="sw-body-sm-highlight">
+              <strong className="sw-typo-semibold">
                 {defaultProjectVisibility ? translate('visibility', defaultProjectVisibility) : '—'}
               </strong>
             </span>
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx
index 8447e0d8dae..cae0045a101 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx
@@ -204,7 +204,7 @@ class ProjectManagementApp extends React.PureComponent<Props, State> {
     const { defaultProjectVisibility } = this.state;
     return (
       <LargeCenteredLayout as="main" id="projects-management-page">
-        <PageContentFontWrapper className="sw-body-sm sw-my-8">
+        <PageContentFontWrapper className="sw-typo-default sw-my-8">
           <Helmet defer={false} title={translate('projects_management')} />
 
           <Header
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx
index cb7f7bf5492..4e38f09a6fb 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx
@@ -77,7 +77,7 @@ export default function App() {
 
   return (
     <LargeCenteredLayout id="quality-gates-page">
-      <PageContentFontWrapper className="sw-body-sm">
+      <PageContentFontWrapper className="sw-typo-default">
         <Helmet
           defer={false}
           titleTemplate={translateWithParameters(
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx
index 7ef1a49af76..b57025d0bc9 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx
@@ -55,7 +55,7 @@ export default function CaycCompliantBanner() {
         />
       </div>
       <div className="sw-my-2">{translate('quality_gates.cayc.banner.description2')}</div>
-      <ul className="sw-body-sm sw-flex sw-flex-col sw-gap-2">
+      <ul className="sw-typo-default sw-flex sw-flex-col sw-gap-2">
         {Object.values(OPTIMIZED_CAYC_CONDITIONS).map((condition) => (
           <li key={condition.metric}>
             <CheckIcon className="sw-mr-1 sw-pt-1/2" />
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx
index 623fb39b27c..8a3320b73c5 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx
@@ -66,7 +66,7 @@ export default function CaycReviewUpdateConditionsModal(props: Readonly<Props>)
 
   const body = (
     <div className="sw-mb-10">
-      <SubHeading as="p" className="sw-body-sm">
+      <SubHeading as="p" className="sw-typo-default">
         <FormattedMessage
           id={
             isOptimizing
@@ -81,7 +81,7 @@ export default function CaycReviewUpdateConditionsModal(props: Readonly<Props>)
 
       {sortedMissingConditions.length > 0 && (
         <>
-          <Title as="h4" className="sw-mb-2 sw-mt-4 sw-body-sm-highlight">
+          <Title as="h4" className="sw-mb-2 sw-mt-4 sw-typo-semibold">
             {translateWithParameters(
               'quality_gates.cayc.review_update_modal.add_condition.header',
               sortedMissingConditions.length,
@@ -98,7 +98,7 @@ export default function CaycReviewUpdateConditionsModal(props: Readonly<Props>)
 
       {sortedWeakConditions.length > 0 && (
         <>
-          <Title as="h4" className="sw-mb-2 sw-mt-4 sw-body-sm-highlight">
+          <Title as="h4" className="sw-mb-2 sw-mt-4 sw-typo-semibold">
             {translateWithParameters(
               'quality_gates.cayc.review_update_modal.modify_condition.header',
               sortedWeakConditions.length,
@@ -113,7 +113,7 @@ export default function CaycReviewUpdateConditionsModal(props: Readonly<Props>)
         </>
       )}
 
-      <Title as="h4" className="sw-mb-2 sw-mt-4 sw-body-sm-highlight">
+      <Title as="h4" className="sw-mb-2 sw-mt-4 sw-typo-semibold">
         {translate('quality_gates.cayc.review_update_modal.description2')}
       </Title>
     </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
index 581878af0cc..208823ed7bf 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
@@ -150,7 +150,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>)
 
       <header className="sw-flex sw-items-center sw-mb-4 sw-justify-between">
         <div className="sw-flex">
-          <HeadingDark className="sw-body-md-highlight sw-m-0">
+          <HeadingDark className="sw-typo-lg-semibold sw-m-0">
             {translate('quality_gates.conditions')}
           </HeadingDark>
           {!qualityGate.isBuiltIn && (
@@ -218,7 +218,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>)
             </HighlightedSection>
 
             {hasFeature(Feature.BranchSupport) && (
-              <Note className="sw-mb-2 sw-body-sm">
+              <Note className="sw-mb-2 sw-typo-default">
                 {translate('quality_gates.conditions.cayc', 'description')}
               </Note>
             )}
@@ -241,7 +241,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>)
             />
 
             {hasFeature(Feature.BranchSupport) && (
-              <Note className="sw-mb-2 sw-body-sm">
+              <Note className="sw-mb-2 sw-typo-default">
                 {translate('quality_gates.conditions.new_code', 'description')}
               </Note>
             )}
@@ -263,7 +263,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>)
             />
 
             {hasFeature(Feature.BranchSupport) && (
-              <Note className="sw-mb-2 sw-body-sm">
+              <Note className="sw-mb-2 sw-typo-default">
                 {translate('quality_gates.conditions.overall_code', 'description')}
               </Note>
             )}
@@ -273,7 +273,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>)
 
       {qualityGate.caycStatus !== CaycStatus.NonCompliant && !editing && canEdit && (
         <div className="sw-mt-4 it__qg-unfollow-cayc">
-          <SubHeading as="p" className="sw-mb-2 sw-body-sm">
+          <SubHeading as="p" className="sw-mb-2 sw-typo-default">
             <FormattedMessage
               id="quality_gates.cayc_unfollow.description"
               defaultMessage={translate('quality_gates.cayc_unfollow.description')}
@@ -289,7 +289,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>)
       )}
 
       {existingConditions.length === 0 && (
-        <div className="sw-mt-4 sw-body-sm">
+        <div className="sw-mt-4 sw-typo-default">
           <LightPrimary as="p">{translate('quality_gates.no_conditions')}</LightPrimary>
         </div>
       )}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsTable.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsTable.tsx
index 63ab8c16e65..074bc1e3294 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsTable.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsTable.tsx
@@ -37,17 +37,17 @@ function Header() {
   return (
     <TableRow>
       <ContentCell>
-        <Title className="sw-body-sm-highlight sw-m-0 sw-whitespace-nowrap">
+        <Title className="sw-typo-semibold sw-m-0 sw-whitespace-nowrap">
           {translate('quality_gates.conditions.metric')}
         </Title>
       </ContentCell>
       <ContentCell>
-        <Title className="sw-body-sm-highlight sw-m-0 sw-whitespace-nowrap">
+        <Title className="sw-typo-semibold sw-m-0 sw-whitespace-nowrap">
           {translate('quality_gates.conditions.operator')}
         </Title>
       </ContentCell>
       <NumericalCell>
-        <Title className="sw-body-sm-highlight sw-m-0 sw-whitespace-nowrap">
+        <Title className="sw-typo-semibold sw-m-0 sw-whitespace-nowrap">
           {translate('quality_gates.conditions.value')}
         </Title>
       </NumericalCell>
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx
index 6b8a8fa5a3d..af4c589e3d8 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx
@@ -48,7 +48,7 @@ export function DetailsContent(props: DetailsContentProps) {
 
       <div className="sw-mt-10">
         <div className="sw-flex sw-flex-col">
-          <SubTitle as="h3" className="sw-body-md-highlight">
+          <SubTitle as="h3" className="sw-typo-lg-semibold">
             {translate('quality_gates.projects')}
             <DocHelpTooltip className="sw-ml-2" content={translate('quality_gates.projects.help')}>
               <HelperHintIcon />
@@ -56,7 +56,9 @@ export function DetailsContent(props: DetailsContentProps) {
           </SubTitle>
 
           {qualityGate.isDefault ? (
-            <p className="sw-body-sm sw-mb-2">{translate('quality_gates.projects_for_default')}</p>
+            <p className="sw-typo-default sw-mb-2">
+              {translate('quality_gates.projects_for_default')}
+            </p>
           ) : (
             <Projects
               canEdit={actions.associateProjects}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx
index 93896aa991d..91b08676d36 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx
@@ -54,7 +54,7 @@ export default function ListHeader({ canCreate }: Readonly<Props>) {
   return (
     <div className="sw-flex sw-justify-between sw-pb-4">
       <div className="sw-flex sw-justify-between">
-        <Title className="sw-flex sw-items-center sw-body-md-highlight sw-mb-0">
+        <Title className="sw-flex sw-items-center sw-typo-lg-semibold sw-mb-0">
           {translate('quality_gates.page')}
         </Title>
         <DocHelpTooltip
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx
index 163ce1bc8a0..050f12fa617 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx
@@ -52,7 +52,7 @@ export default function PermissionItem(props: PermissionItemProps) {
 
       <ContentCell>
         <div className="sw-flex sw-flex-col">
-          <strong className="sw-body-sm-highlight">{item.name}</strong>
+          <strong className="sw-typo-semibold">{item.name}</strong>
           {isUser(item) && <Note>{item.login}</Note>}
         </div>
       </ContentCell>
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx
index 5fc9f6ad88e..c68d7ce6cfe 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx
@@ -93,7 +93,7 @@ function OptionRenderer(option: Readonly<QGPermissionOption>) {
         <>
           <Avatar hash={option.avatar} name={option.name} />
           <div className="sw-ml-2">
-            <strong className="sw-body-sm-highlight sw-mr-1">{option.name}</strong>
+            <strong className="sw-typo-semibold sw-mr-1">{option.name}</strong>
             <br />
             <Note>{option.login}</Note>
           </div>
@@ -101,7 +101,7 @@ function OptionRenderer(option: Readonly<QGPermissionOption>) {
       ) : (
         <>
           <GenericAvatar Icon={IconPeople} name={option.name} />
-          <strong className="sw-body-sm-highlight sw-ml-2">{option.name}</strong>
+          <strong className="sw-typo-semibold sw-ml-2">{option.name}</strong>
         </>
       )}
     </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsRenderer.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsRenderer.tsx
index fb01e1f2165..3e8bb3fe389 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsRenderer.tsx
@@ -58,10 +58,10 @@ export default function QualityGatePermissionsRenderer(props: QualityGatePermiss
 
   return (
     <div data-testid="quality-gate-permissions">
-      <SubTitle as="h3" className="sw-body-md-highlight">
+      <SubTitle as="h3" className="sw-typo-lg-semibold">
         {translate('quality_gates.permissions')}
       </SubTitle>
-      <p className="sw-body-sm">{translate('quality_gates.permissions.help')}</p>
+      <p className="sw-typo-default">{translate('quality_gates.permissions.help')}</p>
       <div className={classNames({ 'sw-my-2': users.length + groups.length > 0 })}>
         <Spinner loading={loading}>
           <Table columnCount={3} columnWidths={['40px', 'auto', '1%']} width="100%">
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonContainer.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonContainer.tsx
index 6825ad39b45..17d5027a8fa 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonContainer.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonContainer.tsx
@@ -60,7 +60,7 @@ export function ComparisonContainer(props: Readonly<Props>) {
   };
 
   return (
-    <div className="sw-body-sm">
+    <div className="sw-typo-default">
       <div className="sw-flex sw-items-center">
         <ComparisonForm
           onCompare={handleCompare}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx
index 066ec051989..d0081200487 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx
@@ -260,7 +260,7 @@ function Parameters({ params }: Readonly<{ params?: Params }>) {
     <ul>
       {Object.keys(params).map((key) => (
         <li className="sw-mt-2 sw-break-all" key={key}>
-          <code className="sw-body-sm">
+          <code className="sw-typo-default">
             {key}
             {': '}
             {params[key]}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx
index 42892367d05..65f38fc6e79 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx
@@ -27,10 +27,10 @@ export default function ProfileNotFound() {
 
   return (
     <div className="sw-text-center sw-mt-4">
-      <h1 className="sw-body-md-highlight sw-mb-4">
+      <h1 className="sw-typo-lg-semibold sw-mb-4">
         {intl.formatMessage({ id: 'quality_profiles.not_found' })}
       </h1>
-      <Link className="sw-body-sm-highlight" to={PROFILE_PATH}>
+      <Link className="sw-typo-semibold" to={PROFILE_PATH}>
         {intl.formatMessage({ id: 'quality_profiles.back_to_list' })}
       </Link>
     </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
index c34c384bb7f..849368e199b 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
@@ -80,17 +80,15 @@ export default function ProfileHeader(props: Props) {
       >
         <div className="sw-flex sw-items-center sw-gap-3 sw-self-start">
           {!isProfileComparePath(location.pathname) && (
-            <PageContentFontWrapper className="sw-body-sm sw-flex sw-gap-3">
+            <PageContentFontWrapper className="sw-typo-default sw-flex sw-gap-3">
               <div>
-                <strong className="sw-body-sm-highlight">
+                <strong className="sw-typo-semibold">
                   {translate('quality_profiles.updated_')}
                 </strong>{' '}
                 <DateFromNow date={profile.rulesUpdatedAt} />
               </div>
               <div>
-                <strong className="sw-body-sm-highlight">
-                  {translate('quality_profiles.used_')}
-                </strong>{' '}
+                <strong className="sw-typo-semibold">{translate('quality_profiles.used_')}</strong>{' '}
                 <DateFromNow date={profile.lastUsed} />
               </div>
 
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx
index 91715485d45..48edea8a0e5 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx
@@ -61,7 +61,7 @@ export default function ProfilePermissionsGroup(props: Readonly<Props>) {
           name={group.name}
           size="xs"
         />
-        <strong className="sw-body-sm-highlight sw-truncate fs-mask">{group.name}</strong>
+        <strong className="sw-typo-semibold sw-truncate fs-mask">{group.name}</strong>
       </div>
       <DestructiveIcon
         Icon={TrashIcon}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
index 2f2c2e7e849..ebcfe1e2999 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
@@ -62,7 +62,7 @@ export default function ProfilePermissionsGroup(props: Readonly<Props>) {
           size="xs"
         />
         <div className="sw-truncate fs-mask">
-          <strong className="sw-body-sm-highlight">{user.name}</strong>
+          <strong className="sw-typo-semibold">{user.name}</strong>
           <Note className="sw-block">{user.login}</Note>
         </div>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx
index 4b3080b4499..7902e0cc685 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx
@@ -63,7 +63,7 @@ export default function EvolutionDeprecated({ profiles }: Readonly<Props>) {
         )}
       </FlagMessage>
 
-      <ul className="sw-flex sw-flex-col sw-gap-4 sw-body-sm">
+      <ul className="sw-flex sw-flex-col sw-gap-4 sw-typo-default">
         {sortedProfiles.map((profile) => (
           <li className="sw-flex sw-flex-col sw-gap-1" key={profile.key}>
             <div className="sw-truncate">
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx
index 0e680661200..493df10b0ff 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx
@@ -74,7 +74,7 @@ export default function EvolutionRules() {
         {intl.formatMessage({ id: 'quality_profiles.latest_new_rules' })}
       </Heading>
 
-      <ul className="sw-flex sw-flex-col sw-gap-4 sw-body-sm">
+      <ul className="sw-flex sw-flex-col sw-gap-4 sw-typo-default">
         {latestRules.map((rule) => (
           <li className="sw-flex sw-flex-col sw-gap-1" key={rule.key}>
             <div className="sw-truncate">
@@ -98,7 +98,7 @@ export default function EvolutionRules() {
       </ul>
 
       {latestRulesTotal > RULES_LIMIT && (
-        <div className="sw-mt-6 sw-body-sm-highlight">
+        <div className="sw-mt-6 sw-typo-semibold">
           <Link to={getRulesUrl({ available_since: periodStartDate })}>
             {intl.formatMessage(
               { id: 'quality_profiles.latest_new_rules.see_all_x' },
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx
index d44fe4cab52..a27fb3fccc2 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx
@@ -49,7 +49,7 @@ export default function EvolutionStagnant(props: Readonly<Props>) {
         {intl.formatMessage({ id: 'quality_profiles.not_updated_more_than_year' })}
       </FlagMessage>
 
-      <ul className="sw-flex sw-flex-col sw-gap-4 sw-body-sm">
+      <ul className="sw-flex sw-flex-col sw-gap-4 sw-typo-default">
         {outdated.map((profile) => (
           <li className="sw-flex sw-flex-col sw-gap-1" key={profile.key}>
             <div className="sw-truncate">
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/LanguageSelect.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/LanguageSelect.tsx
index 13ba07cab46..e962950d18e 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/LanguageSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/LanguageSelect.tsx
@@ -54,7 +54,7 @@ export default function LanguageSelect(props: Readonly<Props>) {
 
   return (
     <div className="sw-mb-4">
-      <span className="sw-mr-2 sw-body-sm-highlight">
+      <span className="sw-mr-2 sw-typo-semibold">
         {intl.formatMessage({ id: 'quality_profiles.filter_by' })}
       </span>
       <SearchSelectDropdown
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx
index 1fd5d6c299a..0f12c4fae50 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx
@@ -66,7 +66,7 @@ export default function PageHeader(props: Readonly<Props>) {
           {translate('quality_profiles.page')}
         </Heading>
 
-        <div className="sw-body-sm">
+        <div className="sw-typo-default">
           {intl.formatMessage({ id: 'quality_profiles.intro' })}
 
           <Link className="sw-ml-2" to={docUrl}>
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/EmptyHotspotsPage.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/EmptyHotspotsPage.tsx
index 4535bd0c076..d59e4f62cc9 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/EmptyHotspotsPage.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/EmptyHotspotsPage.tsx
@@ -43,7 +43,7 @@ export default function EmptyHotspotsPage(props: EmptyHotspotsPageProps) {
         height={100}
         src={`/images/${filtered && !filterByFile ? 'filter-large' : 'hotspot-large'}.svg`}
       />
-      <span className="sw-mt-10 sw-body-sm-highlight">
+      <span className="sw-mt-10 sw-typo-semibold">
         {translate(`hotspots.${emptyTranslationKey}.title`)}
       </span>
       <Note className="sw-w-abs-400 sw-text-center sw-mt-4">
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotDisabledFilterTooltip.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotDisabledFilterTooltip.tsx
index a2531185977..7171a35f459 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotDisabledFilterTooltip.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotDisabledFilterTooltip.tsx
@@ -28,13 +28,13 @@ export function HotspotDisabledFilterTooltip() {
   const docUrl = useDocUrl(DocLink.InstanceAdminReindexation);
 
   return (
-    <div className="sw-body-sm sw-w-[190px]">
+    <div className="sw-typo-default sw-w-[190px]">
       <p>
         {translate('indexation.page_unavailable.description')}{' '}
         {translate('indexation.filter_unavailable.description')}
       </p>
       <hr className="sw-mx-0 sw-my-3 sw-p-0 sw-w-full" />
-      <span className="sw-body-sm-highlight">{translate('indexation.learn_more')}</span>
+      <span className="sw-typo-semibold">{translate('indexation.learn_more')}</span>
       <Link
         className="sw-ml-1"
         onMouseDown={(e) => {
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx
index a1ad559a864..34fd6605f0f 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx
@@ -81,7 +81,7 @@ export function HotspotHeader(props: HotspotHeaderProps) {
               discreet
             />
           </StyledPageTitle>
-          <div className="sw-mt-2 sw-mb-4 sw-body-sm">
+          <div className="sw-mt-2 sw-mb-4 sw-typo-default">
             <LightLabel>{rule.name}</LightLabel>
             <Link className="sw-ml-1" to={getRuleUrl(rule.key)} target="_blank">
               {rule.key}
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx
index 0cc28d8a11f..0fb243e5796 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx
@@ -38,17 +38,17 @@ export default function HotspotHeaderRightSection(props: Props) {
       <HotspotHeaderInfo title={translate('hotspots.risk_exposure')}>
         <div className="sw-flex sw-items-center">
           <HotspotRating className="sw-mr-1" rating={hotspot.rule.vulnerabilityProbability} />
-          <LightLabel className="sw-body-sm">
+          <LightLabel className="sw-typo-default">
             {translate('risk_exposure', hotspot.rule.vulnerabilityProbability)}
           </LightLabel>
         </div>
       </HotspotHeaderInfo>
       <HotspotHeaderInfo title={translate('category')}>
-        <LightLabel className="sw-body-sm">{categoryStandard}</LightLabel>
+        <LightLabel className="sw-typo-default">{categoryStandard}</LightLabel>
       </HotspotHeaderInfo>
       {hotspot.codeVariants && hotspot.codeVariants.length > 0 && (
         <HotspotHeaderInfo title={translate('issues.facet.codeVariants')} className="sw-truncate">
-          <LightLabel className="sw-body-sm">
+          <LightLabel className="sw-typo-default">
             <Tooltip content={hotspot.codeVariants.join(', ')}>
               <span>{hotspot.codeVariants.join(', ')}</span>
             </Tooltip>
@@ -71,7 +71,7 @@ interface HotspotHeaderInfoProps {
 function HotspotHeaderInfo({ children, title, className }: HotspotHeaderInfoProps) {
   return (
     <div className={classNames('sw-min-w-abs-150 sw-max-w-abs-250', className)}>
-      <div className="sw-body-sm-highlight">{title}:</div>
+      <div className="sw-typo-semibold">{title}:</div>
       {children}
     </div>
   );
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx
index b78c1a5c048..7935ec3d93a 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx
@@ -124,9 +124,7 @@ export default class HotspotList extends React.Component<Props, State> {
               <div className="sw-mb-4" key={riskGroup.risk}>
                 <SubnavigationHeading as="h2" className="sw-px-0">
                   <span className="sw-flex sw-items-center">
-                    <span className="sw-body-sm-highlight">
-                      {translate('hotspots.risk_exposure')}:
-                    </span>
+                    <span className="sw-typo-semibold">{translate('hotspots.risk_exposure')}:</span>
                     <HotspotRating className="sw-ml-2 sw-mr-1" rating={riskGroup.risk} />
                     {translate('risk_exposure', riskGroup.risk)}
                   </span>
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
index 677656426d4..2196eb6b01f 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
@@ -86,7 +86,7 @@ export default function HotspotListItem(props: HotspotListItemProps) {
                 id="hotspots.location"
                 defaultMessage={translate(locationMessage)}
                 values={{
-                  0: <span className="sw-body-sm-highlight">{locations.length}</span>,
+                  0: <span className="sw-typo-semibold">{locations.length}</span>,
                 }}
               />
             </span>
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListMeta.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListMeta.tsx
index 10e956c4bc6..6fd32b8bc53 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListMeta.tsx
@@ -50,7 +50,7 @@ export default function HotspotListMeta(props: Readonly<HotspotListMetaProps>) {
           translate(`hotspots.${emptyTranslationKey}.title`)}
       </span>
       {(hotspotsTotal > 0 || hasSelectedHotspot) && (
-        <span className="sw-body-sm">
+        <span className="sw-typo-default">
           <FormattedMessage
             id="hotspots.list_title"
             defaultMessage={
@@ -59,7 +59,7 @@ export default function HotspotListMeta(props: Readonly<HotspotListMetaProps>) {
                 : translate(`hotspots.list_title.${statusFilter}`)
             }
             values={{
-              0: <strong className="sw-body-sm-highlight">{hotspotsTotal}</strong>,
+              0: <strong className="sw-typo-semibold">{hotspotsTotal}</strong>,
             }}
           />
         </span>
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx
index 45f70529053..5b0cf3fbd3f 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx
@@ -56,15 +56,15 @@ export default function HotspotReviewHistory(props: HotspotReviewHistoryProps) {
       {history.map((historyElt, historyIndex) => {
         const { user, type, diffs, date, html, key, updatable, markdown } = historyElt;
         return (
-          <li className="sw-p-2 sw-body-sm" key={historyIndex}>
-            <div className="sw-body-sm-highlight sw-mb-1">
+          <li className="sw-p-2 sw-typo-default" key={historyIndex}>
+            <div className="sw-typo-semibold sw-mb-1">
               <DateTimeFormatter date={date} />
             </div>
             <LightLabel as="div" className="sw-flex sw-gap-2">
               {user.name && (
                 <div className="sw-flex sw-items-center sw-gap-1">
                   <Avatar hash={user.avatar} name={user.name} size="xs" />
-                  <span className="sw-body-sm-highlight">
+                  <span className="sw-typo-semibold">
                     {user.active ? user.name : translateWithParameters('user.x_deleted', user.name)}
                   </span>
                 </div>
@@ -87,7 +87,7 @@ export default function HotspotReviewHistory(props: HotspotReviewHistoryProps) {
             {type === ReviewHistoryType.Comment && key && html && markdown && (
               <div className="sw-mt-2 sw-flex sw-justify-between">
                 <CommentBox
-                  className="sw-pl-2 sw-ml-2 sw-body-sm"
+                  className="sw-pl-2 sw-ml-2 sw-typo-default"
                   // eslint-disable-next-line react/no-danger
                   dangerouslySetInnerHTML={{ __html: sanitizeUserInput(html) }}
                 />
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx
index 84e8590b686..184451bc23c 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx
@@ -83,7 +83,7 @@ export default class HotspotReviewHistoryAndComments extends React.PureComponent
       <div className="it__hs-review-history">
         <PageTitle
           as="h2"
-          className="sw-body-md-highlight"
+          className="sw-typo-lg-semibold"
           text={translate('hotspot.section.activity')}
         />
 
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx
index 81761c5c5dd..bcf5b869bcd 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx
@@ -84,7 +84,7 @@ function HotspotSidebarHeader(props: SecurityHotspotsAppRendererProps) {
         {component && (
           <Measure
             branchLike={branchLike}
-            className="it__hs-review-percentage sw-body-sm-highlight sw-ml-2"
+            className="it__hs-review-percentage sw-typo-semibold sw-ml-2"
             componentKey={component.key}
             metricKey={
               isBranch(branchLike) && !filters.inNewCodePeriod
@@ -97,7 +97,7 @@ function HotspotSidebarHeader(props: SecurityHotspotsAppRendererProps) {
         )}
       </Spinner>
 
-      <span className="sw-body-sm sw-ml-1">
+      <span className="sw-typo-default sw-ml-1">
         {translate('metric.security_hotspots_reviewed.name')}
       </span>
 
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.tsx
index 81dd5767bcb..422a0f918f3 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.tsx
@@ -59,11 +59,11 @@ export default function StatusUpdateSuccessModal(props: StatusUpdateSuccessModal
       <p className="sw-hidden" id="modal_header_title">
         {modalTitle}
       </p>
-      <h2 className="sw-heading-md sw-text-center">
+      <h2 className="sw-heading-lg sw-text-center">
         {translateWithParameters('hotspots.successful_status_change_to_x', statusLabel)}
       </h2>
 
-      <div className="sw-text-center sw-mt-8 sw-body-sm">
+      <div className="sw-text-center sw-mt-8 sw-typo-default">
         <FormattedMessage
           id="hotspots.successfully_changed_to_x"
           defaultMessage={translate('hotspots.find_in_status_filter_x')}
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotDisabledFilterTooltip-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotDisabledFilterTooltip-test.tsx.snap
index 42915e44d78..ce907df4286 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotDisabledFilterTooltip-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotDisabledFilterTooltip-test.tsx.snap
@@ -46,7 +46,7 @@ exports[`should render correctly and stop event propagation 1`] = `
 
 <div>
   <div
-    class="sw-body-sm sw-w-[190px]"
+    class="sw-typo-default sw-w-[190px]"
   >
     <p>
       indexation.page_unavailable.description
@@ -57,7 +57,7 @@ exports[`should render correctly and stop event propagation 1`] = `
       class="sw-mx-0 sw-my-3 sw-p-0 sw-w-full"
     />
     <span
-      class="sw-body-sm-highlight"
+      class="sw-typo-semibold"
     >
       indexation.learn_more
     </span>
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx
index 04468e298a2..15e3dc4c1f0 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx
@@ -33,13 +33,13 @@ export default function StatusDescription(props: StatusDescriptionProps) {
   return (
     <div>
       <h2>
-        <LightPrimary className="sw-body-sm-highlight">
+        <LightPrimary className="sw-typo-semibold">
           {`${translate('status')}: `}
           {translate('hotspots.status_option', statusOption)}
         </LightPrimary>
       </h2>
       <Description className="sw-mt-1">
-        <LightLabel className="sw-body-sm">
+        <LightLabel className="sw-typo-default">
           {translate('hotspots.status_option', statusOption, 'description')}
         </LightLabel>
       </Description>
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx b/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx
index dd45a7060e3..21ea7d31278 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx
+++ b/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx
@@ -57,7 +57,7 @@ export default function Login(props: Readonly<LoginProps>) {
       <Helmet defer={false} title={translate('login.page')} />
       <Image alt="" className="sw-mt-32" src="/images/sonar-logo-horizontal.png" />
       <Card className="sw-my-14 sw-p-0 sw-w-abs-350">
-        <PageContentFontWrapper className="sw-body-md sw-flex sw-flex-col sw-items-center sw-py-8 sw-px-4">
+        <PageContentFontWrapper className="sw-typo-lg sw-flex sw-flex-col sw-items-center sw-py-8 sw-px-4">
           <Image alt="" className="sw-mb-6" src="/images/embed-doc/sq-icon.svg" width={28} />
           <Title className="sw-mb-6">{translate('login.login_to_sonarqube')}</Title>
           <Spinner isLoading={loading}>
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/Logout.tsx b/server/sonar-web/src/main/js/apps/sessions/components/Logout.tsx
index 3f7a91b5e80..0c00fc5f49d 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/Logout.tsx
+++ b/server/sonar-web/src/main/js/apps/sessions/components/Logout.tsx
@@ -39,7 +39,7 @@ export default function Logout() {
 
   return (
     <CenteredLayout>
-      <PageContentFontWrapper className="sw-body-md sw-mt-14 sw-text-center">
+      <PageContentFontWrapper className="sw-typo-lg sw-mt-14 sw-text-center">
         {translate('logging_out')}
       </PageContentFontWrapper>
     </CenteredLayout>
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx b/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx
index d94e2c0a8cc..d4dd0f9eba2 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx
+++ b/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx
@@ -28,7 +28,7 @@ export default function Unauthorized() {
   return (
     <CenteredLayout id="bd">
       <Helmet defer={false} title={translate('unauthorized.page')} />
-      <PageContentFontWrapper className="sw-body-md sw-flex sw-justify-center" id="nonav">
+      <PageContentFontWrapper className="sw-typo-lg sw-flex sw-justify-center" id="nonav">
         <Card className="sw-w-abs-500 sw-my-14 sw-text-center">
           <p id="unauthorized">{translate('unauthorized.message')}</p>
 
diff --git a/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx
index c51f3bbf7e5..884ce277337 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx
@@ -75,7 +75,7 @@ function SettingsAppRenderer(props: Readonly<SettingsAppRendererProps>) {
       <PageContentFontWrapper className="sw-my-8">
         <PageHeader component={component} definitions={definitions} />
 
-        <div className="sw-body-sm sw-flex sw-items-stretch sw-justify-between">
+        <div className="sw-typo-default sw-flex sw-items-stretch sw-justify-between">
           <div className="sw-min-w-abs-250">
             <AllCategoriesList
               categories={categories}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/SettingsSearchRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/SettingsSearchRenderer.tsx
index ad11a8197ad..0ca4394b761 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/SettingsSearchRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/SettingsSearchRenderer.tsx
@@ -85,7 +85,7 @@ export default function SettingsSearchRenderer(props: Readonly<SettingsSearchRen
                       onClick={props.onClickOutside}
                       to={buildSettingLink(r, component)}
                     >
-                      <h3 className="sw-body-sm-highlight">{r.name ?? r.subCategory}</h3>
+                      <h3 className="sw-typo-semibold">{r.name ?? r.subCategory}</h3>
                       {isRealSettingKey(r.key) && (
                         <StyledNote>{translateWithParameters('settings.key_x', r.key)}</StyledNote>
                       )}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx
index 0a2b1bdf067..317878dd22d 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx
@@ -107,7 +107,7 @@ export default class AlmBindingDefinitionFormRenderer extends React.PureComponen
 
     const formBody = (
       <form id={FORM_ID} onSubmit={handleSubmit}>
-        <PageContentFontWrapper className="sw-body-sm" ref={errorListElementRef}>
+        <PageContentFontWrapper className="sw-typo-default" ref={errorListElementRef}>
           {validationError && !canSubmit && (
             <FlagMessage variant="error" className="sw-w-full sw-mb-2">
               <div>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/ProvisioningSection.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/ProvisioningSection.tsx
index 1d86f614874..a18e176b0f4 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/authentication/ProvisioningSection.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/ProvisioningSection.tsx
@@ -94,7 +94,7 @@ export default function ProvisioningSection(props: Readonly<Props>) {
                   value={ProvisioningType.jit}
                 >
                   <div>
-                    <div className="sw-body-sm-highlight">{jitTitle}</div>
+                    <div className="sw-typo-semibold">{jitTitle}</div>
 
                     <div className="sw-mt-1">{jitDescription}</div>
                   </div>
@@ -114,12 +114,12 @@ export default function ProvisioningSection(props: Readonly<Props>) {
                   disabled={!hasFeatureEnabled || hasDifferentProvider}
                 >
                   <div>
-                    <div className="sw-body-sm-highlight">{autoTitle}</div>
+                    <div className="sw-typo-semibold">{autoTitle}</div>
                     <div className="sw-mt-1">
                       {hasFeatureEnabled ? (
                         <>
                           {hasDifferentProvider && (
-                            <p className="sw-mb-2 sw-body-sm-highlight">
+                            <p className="sw-mb-2 sw-typo-semibold">
                               {translate('settings.authentication.form.other_provisioning_enabled')}
                             </p>
                           )}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationConfiguration.tsx b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationConfiguration.tsx
index 929ec4946a9..966260e0c89 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationConfiguration.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationConfiguration.tsx
@@ -129,21 +129,15 @@ export default function EmailNotificationConfiguration(props: Readonly<Props>) {
     <form id={FORM_ID} onSubmit={onSubmit}>
       <NumberedList>
         <NumberedListItem className="sw-pt-6">
-          <span className="sw-body-sm-highlight">
-            {translate('email_notification.subheading.1')}
-          </span>
+          <span className="sw-typo-semibold">{translate('email_notification.subheading.1')}</span>
           <AuthenticationSelector configuration={newConfiguration} onChange={onChange} />
         </NumberedListItem>
         <NumberedListItem className="sw-pt-6">
-          <span className="sw-body-sm-highlight">
-            {translate('email_notification.subheading.2')}
-          </span>
+          <span className="sw-typo-semibold">{translate('email_notification.subheading.2')}</span>
           <CommonSMTP configuration={newConfiguration} onChange={onChange} />
         </NumberedListItem>
         <NumberedListItem className="sw-pt-6">
-          <span className="sw-body-sm-highlight">
-            {translate('email_notification.subheading.3')}
-          </span>
+          <span className="sw-typo-semibold">{translate('email_notification.subheading.3')}</span>
           <SenderInformation configuration={newConfiguration} onChange={onChange} />
         </NumberedListItem>
       </NumberedList>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationOverview.tsx b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationOverview.tsx
index e76898e482e..8685ae4a7f0 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationOverview.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationOverview.tsx
@@ -40,7 +40,7 @@ export default function EmailNotificationOverview(props: Readonly<EmailTestModal
       <BasicSeparator className="sw-my-6" />
       <div className="sw-flex sw-justify-between">
         <div className="sw-grid sw-gap-4">
-          <span className="sw-body-md-highlight sw-col-span-2">
+          <span className="sw-typo-lg-semibold sw-col-span-2">
             {translate('email_notification.overview.heading')}
           </span>
 
@@ -100,7 +100,7 @@ export default function EmailNotificationOverview(props: Readonly<EmailTestModal
 function PublicValue({ messageKey, value }: Readonly<{ messageKey: string; value: string }>) {
   return (
     <>
-      <label className="sw-body-sm-highlight">{translate(messageKey)}</label>
+      <label className="sw-typo-semibold">{translate(messageKey)}</label>
       <div data-testid={`${messageKey}.value`}>
         <CodeSnippet className="sw-px-1 sw-truncate" isOneLine noCopy snippet={value} />
       </div>
@@ -111,7 +111,7 @@ function PublicValue({ messageKey, value }: Readonly<{ messageKey: string; value
 function PrivateValue({ messageKey }: Readonly<{ messageKey: string }>) {
   return (
     <>
-      <label className="sw-body-sm-highlight">{translate(messageKey)}</label>
+      <label className="sw-typo-semibold">{translate(messageKey)}</label>
       <span data-testid={`${messageKey}.value`}>
         <FormattedMessage id="email_notification.overview.private" />
       </span>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailTestModal.tsx b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailTestModal.tsx
index 781b06a166b..962284abd66 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailTestModal.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailTestModal.tsx
@@ -133,7 +133,7 @@ export default function EmailTestModal() {
       title={formatMessage({ id: 'email_notification.test.modal_title' })}
     >
       <div className="sw-flex sw-justify-between sw-items-center">
-        <span className="sw-body-md-highlight">
+        <span className="sw-typo-lg-semibold">
           {formatMessage({ id: 'email_notification.test.title' })}
         </span>
         <Button onClick={() => setIsOpen(true)} variety={ButtonVariety.Default}>
diff --git a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx
index f18538e6834..bdc8b5a2f9e 100644
--- a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx
@@ -72,7 +72,7 @@ export default class EncryptionApp extends React.PureComponent<{}, State> {
 
     return (
       <LargeCenteredLayout id="encryption-page">
-        <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+        <PageContentFontWrapper className="sw-my-8 sw-typo-default">
           <Helmet defer={false} title={translate('property.category.security.encryption')} />
           <header>
             <Title>{translate('property.category.security.encryption')}</Title>
diff --git a/server/sonar-web/src/main/js/apps/system/components/SystemApp.tsx b/server/sonar-web/src/main/js/apps/system/components/SystemApp.tsx
index 0e901c5fc50..efc7d96a17d 100644
--- a/server/sonar-web/src/main/js/apps/system/components/SystemApp.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/SystemApp.tsx
@@ -127,7 +127,7 @@ class SystemApp extends React.PureComponent<Props, State> {
     return (
       <LargeCenteredLayout as="main">
         <Helmet defer={false} title={translate('system_info.page')} />
-        <PageContentFontWrapper className="sw-body-sm sw-pb-8">
+        <PageContentFontWrapper className="sw-typo-default sw-pb-8">
           <div>
             <UpdateNotification />
           </div>
diff --git a/server/sonar-web/src/main/js/apps/users/UsersApp.tsx b/server/sonar-web/src/main/js/apps/users/UsersApp.tsx
index 713bcef1726..b8ea9408732 100644
--- a/server/sonar-web/src/main/js/apps/users/UsersApp.tsx
+++ b/server/sonar-web/src/main/js/apps/users/UsersApp.tsx
@@ -97,7 +97,7 @@ export default function UsersApp() {
 
   return (
     <LargeCenteredLayout as="main" id="users-page">
-      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+      <PageContentFontWrapper className="sw-my-8 sw-typo-default">
         <Helmet defer={false} title={translate('users.page')} />
         <Header manageProvider={manageProvider?.provider} />
         {manageProvider?.provider === Provider.Github && <GitHubSynchronisationWarning short />}
@@ -117,11 +117,11 @@ export default function UsersApp() {
             value={search}
           />
           <div className="sw-flex sw-items-center sw-ml-4">
-            <StyledPageTitle as="label" className="sw-body-sm-highlight sw-mr-2">
+            <StyledPageTitle as="label" className="sw-typo-semibold sw-mr-2">
               {translate('users.filter.by')}
             </StyledPageTitle>
             <InputSelect
-              className="sw-body-sm"
+              className="sw-typo-default"
               size="medium"
               id="users-activity-filter"
               isDisabled={isLoading}
diff --git a/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx b/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx
index 7bbe0507467..3fb53db1e74 100644
--- a/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx
@@ -290,9 +290,7 @@ export function TokensForm(props: Readonly<Props>) {
         >
           {tokens && tokens.length <= 0 ? (
             <TableRow>
-              <ContentCell className="sw-body-lg" colSpan={7}>
-                {translate('users.no_tokens')}
-              </ContentCell>
+              <ContentCell colSpan={7}>{translate('users.no_tokens')}</ContentCell>
             </TableRow>
           ) : (
             tokens?.map((token) => (
diff --git a/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx b/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx
index eb52a7cac45..7fe3adb9f5c 100644
--- a/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx
@@ -37,7 +37,7 @@ export default function UserListItemIdentity({ identityProvider, user, managePro
   return (
     <div>
       <div className="sw-flex sw-flex-col">
-        <strong className="it__user-name sw-body-sm-highlight">{user.name}</strong>
+        <strong className="it__user-name sw-typo-semibold">{user.name}</strong>
         <Note className="it__user-login">{user.login}</Note>
       </div>
       {isDefined(user.email) && user.email !== '' && (
diff --git a/server/sonar-web/src/main/js/apps/web-api-v2/WebApiApp.tsx b/server/sonar-web/src/main/js/apps/web-api-v2/WebApiApp.tsx
index c041e68f028..872b3ab08f1 100644
--- a/server/sonar-web/src/main/js/apps/web-api-v2/WebApiApp.tsx
+++ b/server/sonar-web/src/main/js/apps/web-api-v2/WebApiApp.tsx
@@ -67,7 +67,7 @@ export default function WebApiApp() {
   return (
     <ApiFilterContext.Provider value={contextValue}>
       <LargeCenteredLayout>
-        <PageContentFontWrapper className="sw-body-sm">
+        <PageContentFontWrapper className="sw-typo-default">
           <Helmet defer={false} title={translate('api_documentation.page')} />
           <Spinner isLoading={isLoading}>
             {data && (
diff --git a/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiParameters.tsx b/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiParameters.tsx
index 1e79da3a816..8ae9c881ed4 100644
--- a/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiParameters.tsx
+++ b/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiParameters.tsx
@@ -108,7 +108,7 @@ export default function ApiParameters({ data }: Readonly<Props>) {
                             id="api_documentation.v2.enum_description"
                             values={{
                               values: (
-                                <div className="sw-body-sm-highlight">
+                                <div className="sw-typo-semibold">
                                   {parameter.schema.enum.join(', ')}
                                 </div>
                               ),
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx b/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx
index 44679081db0..e5111ae3543 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx
+++ b/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx
@@ -167,7 +167,7 @@ export class WebApiApp extends React.PureComponent<Props, State> {
 
     return (
       <LargeCenteredLayout>
-        <PageContentFontWrapper className="sw-body-sm sw-w-full sw-flex">
+        <PageContentFontWrapper className="sw-typo-default sw-w-full sw-flex">
           <Helmet defer={false} title={translate('api_documentation.page')} />
           <div className="sw-w-full sw-flex">
             <NavContainer
diff --git a/server/sonar-web/src/main/js/apps/webhooks/components/App.tsx b/server/sonar-web/src/main/js/apps/webhooks/components/App.tsx
index 6c9827abee7..a1ed019d0ca 100644
--- a/server/sonar-web/src/main/js/apps/webhooks/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/webhooks/components/App.tsx
@@ -101,7 +101,7 @@ export function App({ component }: AppProps) {
 
   return (
     <LargeCenteredLayout id="project-webhooks">
-      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+      <PageContentFontWrapper className="sw-my-8 sw-typo-default">
         <Suggestions suggestion={DocLink.Webhooks} />
         <Helmet defer={false} title={translate('webhooks.page')} />
         <PageHeader>
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
index 4096625c911..92bd714356c 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
@@ -116,13 +116,11 @@ export default function SourceViewerHeader(props: Readonly<Props>) {
 
               return (
                 <div className="sw-flex sw-flex-col sw-gap-1" key={quality}>
-                  <Note className="it__source-viewer-header-measure-label sw-body-lg">
-                    {qualityTitle}
-                  </Note>
+                  <Note className="it__source-viewer-header-measure-label">{qualityTitle}</Note>
 
                   <span>
                     <StyledDrilldownLink
-                      className="sw-body-md"
+                      className="sw-typo-lg"
                       aria-label={intl.formatMessage(
                         { id: 'source_viewer.issue_link_x' },
                         {
@@ -140,13 +138,13 @@ export default function SourceViewerHeader(props: Readonly<Props>) {
             })}
 
             <div className="sw-flex sw-flex-col sw-gap-1" key={IssueType.SecurityHotspot}>
-              <Note className="it__source-viewer-header-measure-label sw-body-lg">
+              <Note className="it__source-viewer-header-measure-label">
                 {intl.formatMessage({ id: `issue.type.${IssueType.SecurityHotspot}` })}
               </Note>
 
               <span>
                 <StyledDrilldownLink
-                  className="sw-body-md"
+                  className="sw-typo-lg"
                   to={getComponentSecurityHotspotsUrl(project, branchLike, {
                     files: path,
                     ...DEFAULT_ISSUES_QUERY,
@@ -172,7 +170,7 @@ export default function SourceViewerHeader(props: Readonly<Props>) {
   return (
     <StyledHeaderContainer
       className={
-        'it__source-viewer-header sw-body-sm sw-flex sw-items-center sw-px-4 sw-py-3 ' +
+        'it__source-viewer-header sw-typo-default sw-flex sw-items-center sw-px-4 sw-py-3 ' +
         'sw-relative'
       }
     >
@@ -206,37 +204,31 @@ export default function SourceViewerHeader(props: Readonly<Props>) {
         <div className="sw-flex sw-gap-6 sw-items-center">
           {isDefined(measures[unitTestsOrLines]) && (
             <div className="sw-flex sw-flex-col sw-gap-1">
-              <Note className="it__source-viewer-header-measure-label sw-body-lg">
+              <Note className="it__source-viewer-header-measure-label">
                 {intl.formatMessage({ id: `metric.${unitTestsOrLines}.name` })}
               </Note>
 
-              <span className="sw-body-lg">
-                {formatMeasure(measures[unitTestsOrLines], MetricType.ShortInteger)}
-              </span>
+              <span>{formatMeasure(measures[unitTestsOrLines], MetricType.ShortInteger)}</span>
             </div>
           )}
 
           {isDefined(measures.coverage) && (
             <div className="sw-flex sw-flex-col sw-gap-1">
-              <Note className="it__source-viewer-header-measure-label sw-body-lg">
+              <Note className="it__source-viewer-header-measure-label">
                 {intl.formatMessage({ id: 'metric.coverage.name' })}
               </Note>
 
-              <span className="sw-body-lg">
-                {formatMeasure(measures.coverage, MetricType.Percent)}
-              </span>
+              <span>{formatMeasure(measures.coverage, MetricType.Percent)}</span>
             </div>
           )}
 
           {isDefined(measures.duplicationDensity) && (
             <div className="sw-flex sw-flex-col sw-gap-1">
-              <Note className="it__source-viewer-header-measure-label sw-body-lg">
+              <Note className="it__source-viewer-header-measure-label">
                 {intl.formatMessage({ id: 'duplications' })}
               </Note>
 
-              <span className="sw-body-lg">
-                {formatMeasure(measures.duplicationDensity, MetricType.Percent)}
-              </span>
+              <span>{formatMeasure(measures.duplicationDensity, MetricType.Percent)}</span>
             </div>
           )}
 
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx
index 98dbcb80733..4ec2ff70e53 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx
@@ -121,7 +121,7 @@ export default class DuplicationPopup extends PureComponent<Props> {
             <DuplicationHighlight>{duplicationHeader}</DuplicationHighlight>
             {duplications.map((duplication) => (
               <div className="sw-my-2" key={duplication.file.key}>
-                <div className="sw-flex sw-flex-wrap sw-body-sm">
+                <div className="sw-flex sw-flex-wrap sw-typo-default">
                   {this.isDifferentComponent(duplication.file, this.props.sourceViewerFile) && (
                     <div className="sw-mr-4">
                       <QualifierIcon className="sw-mr-1" qualifier={ComponentQualifier.Project} />
diff --git a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
index 1ef69f5ddf1..f3a9eaff1d1 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
@@ -165,7 +165,7 @@ export default class AddGraphMetric extends React.PureComponent<Props, State> {
         }
       >
         <Button suffix={<IconChevronDown />}>
-          <span className="sw-body-sm sw-flex">
+          <span className="sw-typo-default sw-flex">
             {translate('project_activity.graphs.custom.add')}
           </span>
         </Button>
diff --git a/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx b/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx
index 363e77fd65f..58caf7160e4 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx
@@ -139,9 +139,9 @@ export class DefinitionChangeEventInner extends React.PureComponent<Props, State
     const { event, readonly } = this.props;
     const { expanded } = this.state;
     return (
-      <div className="sw-w-full sw-body-sm sw-py-1/2">
+      <div className="sw-w-full sw-typo-default sw-py-1/2">
         <div className="sw-flex sw-justify-between">
-          <Note className="sw-mr-1 sw-body-sm-highlight">
+          <Note className="sw-mr-1 sw-typo-semibold">
             {translate('event.category', event.category)}
           </Note>
 
diff --git a/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx b/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx
index 68d72ffc5b9..ac98fba7d3c 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx
@@ -47,7 +47,7 @@ export default function EventInner({ event, readonly }: EventInnerProps) {
   } else if (isRichQualityProfileEvent(event)) {
     return (
       <div>
-        <Note className="sw-mr-1 sw-body-sm-highlight">
+        <Note className="sw-mr-1 sw-typo-semibold">
           {translate('event.category', event.category)}
         </Note>
         <Note>
@@ -69,11 +69,11 @@ export default function EventInner({ event, readonly }: EventInnerProps) {
       <div className="sw-min-w-0 sw-flex-1 sw-py-1/2">
         <div className="sw-flex sw-items-start">
           <span>
-            <Note className="sw-mr-1 sw-body-sm-highlight">
+            <Note className="sw-mr-1 sw-typo-semibold">
               {translate('event.category', event.category)}
               {event.category === 'VERSION' && ':'}
             </Note>
-            <Note className="sw-body-sm" title={event.description}>
+            <Note className="sw-typo-default" title={event.description}>
               {event.name}
             </Note>
           </span>
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
index b50b4413050..78d22c7c9ec 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
@@ -62,7 +62,7 @@ export default function GraphsHeader(props: Props) {
   return (
     <div className={className}>
       <ButtonGroup>
-        <label htmlFor="graph-type" className="sw-body-sm-highlight">
+        <label htmlFor="graph-type" className="sw-typo-semibold">
           {translate('project_activity.graphs.choose_type')}
         </label>
         <Select
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
index a701dff7596..2cea7573ddc 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
@@ -71,7 +71,10 @@ export function GraphsLegendItem({
       ) : (
         <ChartLegend className="sw-mr-2" index={index} />
       )}
-      <span className="sw-body-sm" style={{ color: themeColor('graphCursorLineColor')({ theme }) }}>
+      <span
+        className="sw-typo-default"
+        style={{ color: themeColor('graphCursorLineColor')({ theme }) }}
+      >
         {name}
       </span>
       {isDeprecated && (
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
index 45138350586..e7b2b5f0f6c 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
@@ -104,7 +104,7 @@ export class GraphsTooltipsClass extends React.PureComponent<Props> {
       >
         <div className="sw-p-2">
           <div
-            className="sw-body-md-highlight sw-whitespace-nowrap"
+            className="sw-typo-lg-semibold sw-whitespace-nowrap"
             style={{ color: themeColor('selectionCardHeader')({ theme }) }}
           >
             <DateTimeFormatter date={selectedDate} />
diff --git a/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx b/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx
index 2c89199f271..32bcd2c6df0 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx
@@ -57,10 +57,10 @@ export class RichQualityGateEventInner extends React.PureComponent<Props, State>
     const { event, readonly } = this.props;
     const { expanded } = this.state;
     return (
-      <div className="sw-w-full sw-body-sm sw-py-1/2">
+      <div className="sw-w-full sw-typo-default sw-py-1/2">
         <div className="sw-flex sw-justify-between">
           <div className="sw-flex sw-items-center">
-            <Note className="sw-mr-1 sw-body-sm-highlight">
+            <Note className="sw-mr-1 sw-typo-semibold">
               {translate('event.category', event.category)}
             </Note>
 
diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
index 2f86e9e75ed..4e7f000e30c 100644
--- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
+++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
@@ -345,7 +345,7 @@ export class AdvancedTimelineClass extends React.PureComponent<Props, State> {
             <g key={tick}>
               {formatYTick != null && (
                 <text
-                  className="line-chart-tick line-chart-tick-x sw-body-sm"
+                  className="line-chart-tick line-chart-tick-x sw-typo-default"
                   dx="-1em"
                   dy="0.3em"
                   textAnchor="end"
@@ -382,7 +382,7 @@ export class AdvancedTimelineClass extends React.PureComponent<Props, State> {
 
           return (
             <text
-              className="line-chart-tick sw-body-sm"
+              className="line-chart-tick sw-typo-default"
               // eslint-disable-next-line react/no-array-index-key
               key={index}
               textAnchor="end"
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap
index b44f642ade9..b9c083f888e 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap
@@ -170,7 +170,7 @@ exports[`should render correctly: Zoom enabled 1`] = `
       transform="translate(0, 20)"
     >
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 15, 24)"
         x="15"
@@ -179,7 +179,7 @@ exports[`should render correctly: Zoom enabled 1`] = `
         October
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 20, 24)"
         x="20"
@@ -188,7 +188,7 @@ exports[`should render correctly: Zoom enabled 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 25, 24)"
         x="25"
@@ -197,7 +197,7 @@ exports[`should render correctly: Zoom enabled 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 30, 24)"
         x="30"
@@ -206,7 +206,7 @@ exports[`should render correctly: Zoom enabled 1`] = `
         06 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 35, 24)"
         x="35"
@@ -215,7 +215,7 @@ exports[`should render correctly: Zoom enabled 1`] = `
         Wed 02
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 40, 24)"
         x="40"
@@ -224,7 +224,7 @@ exports[`should render correctly: Zoom enabled 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 45, 24)"
         x="45"
@@ -233,7 +233,7 @@ exports[`should render correctly: Zoom enabled 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 50, 24)"
         x="50"
@@ -434,7 +434,7 @@ exports[`should render correctly: basisCurve 1`] = `
       transform="translate(0, 20)"
     >
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 15, 24)"
         x="15"
@@ -443,7 +443,7 @@ exports[`should render correctly: basisCurve 1`] = `
         October
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 20, 24)"
         x="20"
@@ -452,7 +452,7 @@ exports[`should render correctly: basisCurve 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 25, 24)"
         x="25"
@@ -461,7 +461,7 @@ exports[`should render correctly: basisCurve 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 30, 24)"
         x="30"
@@ -470,7 +470,7 @@ exports[`should render correctly: basisCurve 1`] = `
         06 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 35, 24)"
         x="35"
@@ -479,7 +479,7 @@ exports[`should render correctly: basisCurve 1`] = `
         Wed 02
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 40, 24)"
         x="40"
@@ -488,7 +488,7 @@ exports[`should render correctly: basisCurve 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 45, 24)"
         x="45"
@@ -497,7 +497,7 @@ exports[`should render correctly: basisCurve 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 50, 24)"
         x="50"
@@ -698,7 +698,7 @@ exports[`should render correctly: default 1`] = `
       transform="translate(0, 20)"
     >
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 15, 24)"
         x="15"
@@ -707,7 +707,7 @@ exports[`should render correctly: default 1`] = `
         October
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 20, 24)"
         x="20"
@@ -716,7 +716,7 @@ exports[`should render correctly: default 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 25, 24)"
         x="25"
@@ -725,7 +725,7 @@ exports[`should render correctly: default 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 30, 24)"
         x="30"
@@ -734,7 +734,7 @@ exports[`should render correctly: default 1`] = `
         06 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 35, 24)"
         x="35"
@@ -743,7 +743,7 @@ exports[`should render correctly: default 1`] = `
         Wed 02
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 40, 24)"
         x="40"
@@ -752,7 +752,7 @@ exports[`should render correctly: default 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 45, 24)"
         x="45"
@@ -761,7 +761,7 @@ exports[`should render correctly: default 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 50, 24)"
         x="50"
@@ -815,7 +815,7 @@ exports[`should render correctly: format y tick 1`] = `
     <g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -834,7 +834,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -853,7 +853,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -872,7 +872,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -891,7 +891,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -910,7 +910,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -929,7 +929,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -948,7 +948,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -967,7 +967,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -986,7 +986,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -1005,7 +1005,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -1024,7 +1024,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -1043,7 +1043,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -1062,7 +1062,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -1081,7 +1081,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -1100,7 +1100,7 @@ exports[`should render correctly: format y tick 1`] = `
       </g>
       <g>
         <text
-          class="line-chart-tick line-chart-tick-x sw-body-sm"
+          class="line-chart-tick line-chart-tick-x sw-typo-default"
           dx="-1em"
           dy="0.3em"
           text-anchor="end"
@@ -1122,7 +1122,7 @@ exports[`should render correctly: format y tick 1`] = `
       transform="translate(0, 20)"
     >
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 15, 24)"
         x="15"
@@ -1131,7 +1131,7 @@ exports[`should render correctly: format y tick 1`] = `
         October
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 20, 24)"
         x="20"
@@ -1140,7 +1140,7 @@ exports[`should render correctly: format y tick 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 25, 24)"
         x="25"
@@ -1149,7 +1149,7 @@ exports[`should render correctly: format y tick 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 30, 24)"
         x="30"
@@ -1158,7 +1158,7 @@ exports[`should render correctly: format y tick 1`] = `
         06 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 35, 24)"
         x="35"
@@ -1167,7 +1167,7 @@ exports[`should render correctly: format y tick 1`] = `
         Wed 02
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 40, 24)"
         x="40"
@@ -1176,7 +1176,7 @@ exports[`should render correctly: format y tick 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 45, 24)"
         x="45"
@@ -1185,7 +1185,7 @@ exports[`should render correctly: format y tick 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 50, 24)"
         x="50"
@@ -1394,7 +1394,7 @@ exports[`should render correctly: leakPeriodDate 1`] = `
       transform="translate(0, 20)"
     >
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 15, 24)"
         x="15"
@@ -1403,7 +1403,7 @@ exports[`should render correctly: leakPeriodDate 1`] = `
         October
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 20, 24)"
         x="20"
@@ -1412,7 +1412,7 @@ exports[`should render correctly: leakPeriodDate 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 25, 24)"
         x="25"
@@ -1421,7 +1421,7 @@ exports[`should render correctly: leakPeriodDate 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 30, 24)"
         x="30"
@@ -1430,7 +1430,7 @@ exports[`should render correctly: leakPeriodDate 1`] = `
         06 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 35, 24)"
         x="35"
@@ -1439,7 +1439,7 @@ exports[`should render correctly: leakPeriodDate 1`] = `
         Wed 02
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 40, 24)"
         x="40"
@@ -1448,7 +1448,7 @@ exports[`should render correctly: leakPeriodDate 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 45, 24)"
         x="45"
@@ -1457,7 +1457,7 @@ exports[`should render correctly: leakPeriodDate 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 50, 24)"
         x="50"
@@ -1541,7 +1541,7 @@ exports[`should render correctly: level metric 1`] = `
       transform="translate(0, 20)"
     >
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 15, 24)"
         x="15"
@@ -1550,7 +1550,7 @@ exports[`should render correctly: level metric 1`] = `
         October
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 20, 24)"
         x="20"
@@ -1559,7 +1559,7 @@ exports[`should render correctly: level metric 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 25, 24)"
         x="25"
@@ -1568,7 +1568,7 @@ exports[`should render correctly: level metric 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 30, 24)"
         x="30"
@@ -1577,7 +1577,7 @@ exports[`should render correctly: level metric 1`] = `
         06 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 35, 24)"
         x="35"
@@ -1586,7 +1586,7 @@ exports[`should render correctly: level metric 1`] = `
         Wed 02
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 40, 24)"
         x="40"
@@ -1595,7 +1595,7 @@ exports[`should render correctly: level metric 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 45, 24)"
         x="45"
@@ -1604,7 +1604,7 @@ exports[`should render correctly: level metric 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 50, 24)"
         x="50"
@@ -1804,7 +1804,7 @@ exports[`should render correctly: no areas 1`] = `
       transform="translate(0, 20)"
     >
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 15, 24)"
         x="15"
@@ -1813,7 +1813,7 @@ exports[`should render correctly: no areas 1`] = `
         October
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 20, 24)"
         x="20"
@@ -1822,7 +1822,7 @@ exports[`should render correctly: no areas 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 25, 24)"
         x="25"
@@ -1831,7 +1831,7 @@ exports[`should render correctly: no areas 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 30, 24)"
         x="30"
@@ -1840,7 +1840,7 @@ exports[`should render correctly: no areas 1`] = `
         06 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 35, 24)"
         x="35"
@@ -1849,7 +1849,7 @@ exports[`should render correctly: no areas 1`] = `
         Wed 02
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 40, 24)"
         x="40"
@@ -1858,7 +1858,7 @@ exports[`should render correctly: no areas 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 45, 24)"
         x="45"
@@ -1867,7 +1867,7 @@ exports[`should render correctly: no areas 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 50, 24)"
         x="50"
@@ -1973,7 +1973,7 @@ exports[`should render correctly: rating metric 1`] = `
       transform="translate(0, 20)"
     >
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 15, 24)"
         x="15"
@@ -1982,7 +1982,7 @@ exports[`should render correctly: rating metric 1`] = `
         October
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 20, 24)"
         x="20"
@@ -1991,7 +1991,7 @@ exports[`should render correctly: rating metric 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 25, 24)"
         x="25"
@@ -2000,7 +2000,7 @@ exports[`should render correctly: rating metric 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 30, 24)"
         x="30"
@@ -2009,7 +2009,7 @@ exports[`should render correctly: rating metric 1`] = `
         06 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 35, 24)"
         x="35"
@@ -2018,7 +2018,7 @@ exports[`should render correctly: rating metric 1`] = `
         Wed 02
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 40, 24)"
         x="40"
@@ -2027,7 +2027,7 @@ exports[`should render correctly: rating metric 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 45, 24)"
         x="45"
@@ -2036,7 +2036,7 @@ exports[`should render correctly: rating metric 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 50, 24)"
         x="50"
@@ -2237,7 +2237,7 @@ exports[`should render correctly: selected date 1`] = `
       transform="translate(0, 20)"
     >
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 15, 24)"
         x="15"
@@ -2246,7 +2246,7 @@ exports[`should render correctly: selected date 1`] = `
         October
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 20, 24)"
         x="20"
@@ -2255,7 +2255,7 @@ exports[`should render correctly: selected date 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 25, 24)"
         x="25"
@@ -2264,7 +2264,7 @@ exports[`should render correctly: selected date 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 30, 24)"
         x="30"
@@ -2273,7 +2273,7 @@ exports[`should render correctly: selected date 1`] = `
         06 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 35, 24)"
         x="35"
@@ -2282,7 +2282,7 @@ exports[`should render correctly: selected date 1`] = `
         Wed 02
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 40, 24)"
         x="40"
@@ -2291,7 +2291,7 @@ exports[`should render correctly: selected date 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 45, 24)"
         x="45"
@@ -2300,7 +2300,7 @@ exports[`should render correctly: selected date 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 50, 24)"
         x="50"
@@ -2526,7 +2526,7 @@ exports[`should render correctly: split point, but not Rating 1`] = `
       transform="translate(0, 20)"
     >
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 15, 24)"
         x="15"
@@ -2535,7 +2535,7 @@ exports[`should render correctly: split point, but not Rating 1`] = `
         October
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 20, 24)"
         x="20"
@@ -2544,7 +2544,7 @@ exports[`should render correctly: split point, but not Rating 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 25, 24)"
         x="25"
@@ -2553,7 +2553,7 @@ exports[`should render correctly: split point, but not Rating 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 30, 24)"
         x="30"
@@ -2562,7 +2562,7 @@ exports[`should render correctly: split point, but not Rating 1`] = `
         06 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 35, 24)"
         x="35"
@@ -2571,7 +2571,7 @@ exports[`should render correctly: split point, but not Rating 1`] = `
         Wed 02
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 40, 24)"
         x="40"
@@ -2580,7 +2580,7 @@ exports[`should render correctly: split point, but not Rating 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 45, 24)"
         x="45"
@@ -2589,7 +2589,7 @@ exports[`should render correctly: split point, but not Rating 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 50, 24)"
         x="50"
@@ -2798,7 +2798,7 @@ exports[`should render correctly: zoomSpeed 1`] = `
       transform="translate(0, 20)"
     >
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 15, 24)"
         x="15"
@@ -2807,7 +2807,7 @@ exports[`should render correctly: zoomSpeed 1`] = `
         October
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 20, 24)"
         x="20"
@@ -2816,7 +2816,7 @@ exports[`should render correctly: zoomSpeed 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 25, 24)"
         x="25"
@@ -2825,7 +2825,7 @@ exports[`should render correctly: zoomSpeed 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 30, 24)"
         x="30"
@@ -2834,7 +2834,7 @@ exports[`should render correctly: zoomSpeed 1`] = `
         06 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 35, 24)"
         x="35"
@@ -2843,7 +2843,7 @@ exports[`should render correctly: zoomSpeed 1`] = `
         Wed 02
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 40, 24)"
         x="40"
@@ -2852,7 +2852,7 @@ exports[`should render correctly: zoomSpeed 1`] = `
         06 AM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 45, 24)"
         x="45"
@@ -2861,7 +2861,7 @@ exports[`should render correctly: zoomSpeed 1`] = `
         12 PM
       </text>
       <text
-        class="line-chart-tick sw-body-sm"
+        class="line-chart-tick sw-typo-default"
         text-anchor="end"
         transform="rotate(-35, 50, 24)"
         x="50"
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/LanguageDistribution-test.tsx.snap b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/LanguageDistribution-test.tsx.snap
index 1acc158dd24..582d44ea4d2 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/LanguageDistribution-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/LanguageDistribution-test.tsx.snap
@@ -6,10 +6,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-2 {
-  font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
+  font: var(--echoes-typography-text-default-regular);
   fill: rgb(106,117,144);
 }
 
diff --git a/server/sonar-web/src/main/js/components/common/ActivityLink.tsx b/server/sonar-web/src/main/js/components/common/ActivityLink.tsx
index 0a04807749c..0d2b577a250 100644
--- a/server/sonar-web/src/main/js/components/common/ActivityLink.tsx
+++ b/server/sonar-web/src/main/js/components/common/ActivityLink.tsx
@@ -37,7 +37,7 @@ export default function ActivityLink(props: ActivityLinkProps) {
   const { branchLike, component, graph, label, metric } = props;
   return (
     <StandoutLink
-      className="sw-body-sm-highlight"
+      className="sw-typo-semibold"
       to={
         metric !== undefined && graph !== undefined && isCustomGraph(graph)
           ? getMeasureHistoryUrl(component, metric, branchLike)
diff --git a/server/sonar-web/src/main/js/components/common/EmptySearch.tsx b/server/sonar-web/src/main/js/components/common/EmptySearch.tsx
index 1cc17046347..d452db59c42 100644
--- a/server/sonar-web/src/main/js/components/common/EmptySearch.tsx
+++ b/server/sonar-web/src/main/js/components/common/EmptySearch.tsx
@@ -25,10 +25,10 @@ export default function EmptySearch() {
   return (
     <div aria-live="assertive" className="sw-text-center sw-py-8">
       <FishVisual />
-      <Highlight as="h3" className="sw-body-md-highlight sw-mt-6">
+      <Highlight as="h3" className="sw-typo-lg-semibold sw-mt-6">
         {translate('no_results_search')}
       </Highlight>
-      <p className="sw-body-sm sw-mt-2">{translate('no_results_search.2')}</p>
+      <p className="sw-typo-default sw-mt-2">{translate('no_results_search.2')}</p>
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
index 22fc0692d78..4439c0b6d6e 100644
--- a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
@@ -76,7 +76,7 @@ export default function ListFooter(props: ListFooterProps) {
     button = (
       <Button
         data-test="reload"
-        className="sw-ml-2 sw-body-sm"
+        className="sw-ml-2 sw-typo-default"
         isDisabled={loading}
         onClick={props.reload}
       >
@@ -88,7 +88,7 @@ export default function ListFooter(props: ListFooterProps) {
       <Button
         aria-label={loadMoreAriaLabel}
         data-test="show-more"
-        className="sw-ml-2 sw-body-sm"
+        className="sw-ml-2 sw-typo-default"
         isDisabled={loading}
         onClick={onLoadMore}
       >
@@ -103,7 +103,7 @@ export default function ListFooter(props: ListFooterProps) {
       ref={rootNode}
       className={classNames(
         'list-footer', // .list-footer is only used by Selenium tests; we should find a way to remove it.
-        'sw-body-sm sw-flex sw-items-center sw-justify-center',
+        'sw-typo-default sw-flex sw-items-center sw-justify-center',
         { 'sw-opacity-50 sw-duration-500 sw-ease-in-out': !ready },
         className,
       )}
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx
index 10b2c7336a1..9377e2076b1 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx
@@ -54,7 +54,7 @@ export default function IssueActionsBar(props: Readonly<Props>) {
 
   return (
     <div className="sw-flex sw-gap-3 sw-min-w-0">
-      <ul className="it__issue-header-actions sw-flex sw-items-center sw-gap-3 sw-body-sm sw-min-w-0">
+      <ul className="it__issue-header-actions sw-flex sw-items-center sw-gap-3 sw-typo-default sw-min-w-0">
         <HighlightRing
           as="li"
           className="sw-relative"
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
index 0bdebede08d..d82b792b1e8 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
@@ -49,10 +49,10 @@ export default function IssueMetaBar(props: Readonly<Props>) {
   const hasComments = !!issue.comments?.length;
 
   const issueMetaListItemClassNames =
-    'sw-body-xs sw-overflow-hidden sw-whitespace-nowrap sw-max-w-abs-150';
+    'sw-typo-sm sw-overflow-hidden sw-whitespace-nowrap sw-max-w-abs-150';
 
   return (
-    <ul className="sw-flex sw-items-center sw-gap-1 sw-body-xs sw-whitespace-nowrap">
+    <ul className="sw-flex sw-items-center sw-gap-1 sw-typo-sm sw-whitespace-nowrap">
       {issue.line && (
         <>
           <IssueMetaListItem className={issueMetaListItemClassNames}>
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx
index 0e16b83a796..f3fa3136df0 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx
@@ -66,8 +66,8 @@ export class IssueTags extends React.PureComponent<Props> {
       <Tags
         allowUpdate={this.props.canSetTags && !component?.needIssueSync}
         ariaTagsListLabel={translate('issue.tags')}
-        className="js-issue-edit-tags sw-body-xs"
-        tagsClassName="sw-body-xs"
+        className="js-issue-edit-tags sw-typo-sm"
+        tagsClassName="sw-typo-sm"
         emptyText={translate('issue.no_tag')}
         menuId="issue-tags-menu"
         onClose={this.handleClose}
diff --git a/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap b/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap
index 930baff4a3c..9891aa5fe8e 100644
--- a/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap
@@ -107,7 +107,7 @@ exports[`renders correctly for passed quality gate 1`] = `
       </svg>
     </div>
     <span
-      class="sw-body-md"
+      class="sw-typo-lg"
     >
       OK
     </span>
diff --git a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
index 0a1a5384b8a..535803665c5 100644
--- a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
+++ b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
@@ -101,7 +101,7 @@ export default function NewCodeDefinitionSelector(props: Props) {
   return (
     <PageContentFontWrapper>
       <p className="sw-mt-10">
-        <strong className="sw-body-md-highlight">
+        <strong className="sw-typo-lg-semibold">
           {isMultipleProjects
             ? translate('new_code_definition.question.multiple_projects')
             : translate('new_code_definition.question')}
diff --git a/server/sonar-web/src/main/js/components/rules/IssueSuggestionCodeTab.tsx b/server/sonar-web/src/main/js/components/rules/IssueSuggestionCodeTab.tsx
index 482ebc1ab19..7ee5e86902b 100644
--- a/server/sonar-web/src/main/js/components/rules/IssueSuggestionCodeTab.tsx
+++ b/server/sonar-web/src/main/js/components/rules/IssueSuggestionCodeTab.tsx
@@ -47,7 +47,7 @@ export function IssueSuggestionCodeTab({ branchLike, issue, language }: Readonly
       {isPending && !isLoading && !isError && (
         <div className="sw-flex sw-flex-col sw-items-center">
           <OverviewQGPassedIcon className="sw-mt-6" />
-          <p className="sw-body-sm-highlight sw-mt-4">
+          <p className="sw-typo-semibold sw-mt-4">
             {translate('issues.code_fix.let_us_suggest_fix')}
           </p>
           <Button
@@ -62,7 +62,7 @@ export function IssueSuggestionCodeTab({ branchLike, issue, language }: Readonly
       {isLoading && (
         <div className="sw-flex sw-pt-6 sw-flex-col sw-items-center">
           <InProgressVisual />
-          <p className="sw-body-sm-highlight sw-mt-4">
+          <p className="sw-typo-semibold sw-mt-4">
             {translate('issues.code_fix.fix_is_being_generated')}
           </p>
         </div>
@@ -70,7 +70,7 @@ export function IssueSuggestionCodeTab({ branchLike, issue, language }: Readonly
       {isError && (
         <div className="sw-flex sw-flex-col sw-items-center">
           <OverviewQGNotComputedIcon className="sw-mt-6" />
-          <p className="sw-body-sm-highlight sw-mt-4">
+          <p className="sw-typo-semibold sw-mt-4">
             {translate('issues.code_fix.something_went_wrong')}
           </p>
           <p className="sw-my-4">{translate('issues.code_fix.not_able_to_generate_fix')}</p>
diff --git a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
index 6ed51b5592b..ca1341902e4 100644
--- a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
+++ b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
@@ -141,7 +141,7 @@ export default class RuleDescription extends React.PureComponent<Props, State> {
             applyCodeDifferences(node);
           }}
         >
-          <h2 className="sw-body-sm-highlight sw-mb-4">
+          <h2 className="sw-typo-semibold sw-mb-4">
             {translate('coding_rules.description_context.title')}
           </h2>
           {isDefined(introductionSection) && (
diff --git a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
index d45e49f4606..f885f379a11 100644
--- a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
@@ -137,18 +137,18 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
   }
 
   return (
-    <div className="sw-body-sm">
+    <div className="sw-typo-default">
       <AnalysisStatus component={component} className="sw-mb-4 sw-w-max" />
 
       {selectedTutorial === undefined && (
         <div className="sw-flex sw-flex-col">
-          <Title className="sw-mb-6 sw-heading-lg">
+          <Title className="sw-mb-6 sw-heading-xl">
             {translate('onboarding.tutorial.page.title')}
           </Title>
 
           <LightPrimary>{translate('onboarding.tutorial.page.description')}</LightPrimary>
 
-          <SubTitle className="sw-mt-12 sw-mb-4 sw-heading-md">
+          <SubTitle className="sw-mt-12 sw-mb-4 sw-heading-lg">
             {translate('onboarding.tutorial.choose_method')}
           </SubTitle>
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx
index 6c6384c478d..0eab6c241d0 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx
@@ -59,7 +59,7 @@ export default function RepositoryVariables(props: RepositoryVariablesProps) {
                 {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')}
               </LinkStandalone>
             ) : (
-              <span className="sw-body-sm-highlight">
+              <span className="sw-typo-semibold">
                 {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')}
               </span>
             ),
@@ -109,7 +109,7 @@ export default function RepositoryVariables(props: RepositoryVariablesProps) {
             values={{
               extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1 sw-align-sub" />,
               field: (
-                <span className="sw-body-sm-highlight">
+                <span className="sw-typo-semibold">
                   {translate('onboarding.tutorial.env_variables.field')}
                 </span>
               ),
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx b/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
index ba6e822ca13..600bbdc6bc4 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
@@ -58,7 +58,7 @@ export function AllSet(props: AllSetProps) {
         {translate('onboarding.tutorial.ci_outro.done')}
       </SubTitle>
       <MessageContainer>
-        <p className="sw-body-sm sw-mb-4">
+        <p className="sw-typo-default sw-mb-4">
           {translate('onboarding.tutorial.ci_outro.refresh_text')}
         </p>
         <ul className="sw-mb-6">
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx b/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx
index 72316591853..105e1f20e2d 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx
@@ -165,7 +165,7 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
     const intro = translate('onboarding.token.text', type);
 
     return (
-      <div className="sw-body-sm">
+      <div className="sw-typo-default">
         <FormattedMessage
           defaultMessage={intro}
           id={intro}
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx b/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx
index 897a895b9c6..7f173010596 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx
@@ -49,7 +49,7 @@ export default function TokenStepGenerator(props: TokenStepGeneratorProps) {
             </ButtonSecondary>
           ),
           field: (
-            <span className="sw-body-sm-highlight">
+            <span className="sw-typo-semibold">
               {translate('onboarding.tutorial.env_variables.field')}
             </span>
           ),
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx
index 26fb3f005d9..82669d1f110 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx
@@ -64,7 +64,7 @@ export default function SecretStep(props: SecretStepProps) {
                 {translate('onboarding.tutorial.with.github_action.secret.intro.link')}
               </LinkStandalone>
             ) : (
-              <span className="sw-body-sm-highlight">
+              <span className="sw-typo-semibold">
                 {translate('onboarding.tutorial.with.github_action.secret.intro.link')}
               </span>
             ),
@@ -139,7 +139,7 @@ export default function SecretStep(props: SecretStepProps) {
             values={{
               extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1 sw-align-sub" />,
               field: (
-                <span className="sw-body-sm-highlight">
+                <span className="sw-typo-semibold">
                   {translate('onboarding.tutorial.env_variables.field')}
                 </span>
               ),
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
index 6799bada383..260e3bf6536 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
@@ -61,7 +61,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
           id="onboarding.tutorial.with.gitlab_ci.variables.section.description"
           values={{
             /* This link will be added when the backend provides the project URL */
-            link: <span className="sw-body-sm-highlight">{pipelineDescriptionLinkLabel}</span>,
+            link: <span className="sw-typo-semibold">{pipelineDescriptionLinkLabel}</span>,
           }}
         />
 
@@ -87,7 +87,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
               id="onboarding.tutorial.with.gitlab_ci.variables.step3"
               values={{
                 value: (
-                  <span className="sw-body-sm-highlight">
+                  <span className="sw-typo-semibold">
                     {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')}
                   </span>
                 ),
@@ -102,7 +102,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
               id="onboarding.tutorial.with.gitlab_ci.variables.section.step4"
               values={{
                 value: (
-                  <span className="sw-body-sm-highlight">
+                  <span className="sw-typo-semibold">
                     {translate('onboarding.tutorial.with.gitlab_ci.variables.section.step4.value')}
                   </span>
                 ),
@@ -122,7 +122,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
           id="onboarding.tutorial.with.gitlab_ci.variables.section2.description"
           values={{
             /* This link will be added when the backend provides the project URL */
-            link: <span className="sw-body-sm-highlight">{pipelineDescriptionLinkLabel}</span>,
+            link: <span className="sw-typo-semibold">{pipelineDescriptionLinkLabel}</span>,
           }}
         />
 
@@ -149,7 +149,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
               values={{
                 extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1 sw-align-sub" />,
                 field: (
-                  <span className="sw-body-sm-highlight">
+                  <span className="sw-typo-semibold">
                     {translate('onboarding.tutorial.env_variables.field')}
                   </span>
                 ),
@@ -163,7 +163,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
               id="onboarding.tutorial.with.gitlab_ci.variables.step3"
               values={{
                 value: (
-                  <span className="sw-body-sm-highlight">
+                  <span className="sw-typo-semibold">
                     {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')}
                   </span>
                 ),
@@ -178,7 +178,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
               id="onboarding.tutorial.with.gitlab_ci.variables.section2.step4"
               values={{
                 value: (
-                  <span className="sw-body-sm-highlight">
+                  <span className="sw-typo-semibold">
                     {translate('onboarding.tutorial.with.gitlab_ci.variables.section.step4.value')}
                   </span>
                 ),
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx
index 8f01f1ff9e9..98e4080383f 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx
@@ -58,7 +58,7 @@ export default class OtherTutorial extends React.PureComponent<Props, State> {
     const { step, token } = this.state;
 
     return (
-      <PageContentFontWrapper className="sw-body-sm">
+      <PageContentFontWrapper className="sw-typo-default">
         <div className="sw-mb-4">
           <Title>{translate('onboarding.project_analysis.header')} </Title>
           <LightLabel>{translate('onboarding.project_analysis.description')}</LightLabel>
diff --git a/server/sonar-web/src/main/js/components/ui/AdminPageHeader.tsx b/server/sonar-web/src/main/js/components/ui/AdminPageHeader.tsx
index 9f2bad69747..356732ce473 100644
--- a/server/sonar-web/src/main/js/components/ui/AdminPageHeader.tsx
+++ b/server/sonar-web/src/main/js/components/ui/AdminPageHeader.tsx
@@ -34,9 +34,9 @@ export function AdminPageHeader({ children, className, description, title }: Rea
   return (
     <div className={classNames('sw-flex sw-justify-between', className)}>
       <header className="sw-flex-1">
-        <AdminPageTitle className="sw-heading-lg">{title}</AdminPageTitle>
+        <AdminPageTitle className="sw-heading-xl">{title}</AdminPageTitle>
         {description && (
-          <AdminPageDescription className="sw-body-sm sw-pt-4 sw-max-w-9/12">
+          <AdminPageDescription className="sw-typo-default sw-pt-4 sw-max-w-9/12">
             {description}
           </AdminPageDescription>
         )}
diff --git a/server/sonar-web/src/main/js/components/ui/FilesCounter.tsx b/server/sonar-web/src/main/js/components/ui/FilesCounter.tsx
index c92f9b9d1f4..29b5d9f616e 100644
--- a/server/sonar-web/src/main/js/components/ui/FilesCounter.tsx
+++ b/server/sonar-web/src/main/js/components/ui/FilesCounter.tsx
@@ -35,7 +35,7 @@ interface Props {
 export default function FilesCounter({ className, current, total }: Props) {
   return (
     <Note className={classNames('sw-whitespace-nowrap', className)}>
-      <Counter className="sw-body-sm-highlight">
+      <Counter className="sw-typo-semibold">
         {isDefined(current) && formatMeasure(current, MetricType.Integer) + '/'}
         {formatMeasure(total, MetricType.Integer)}
       </Counter>{' '}
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
index adb623f07e2..937e24e1984 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
@@ -50,7 +50,7 @@ export default class WorkspaceHeader extends React.PureComponent<Props> {
   render() {
     return (
       <StyledWorkSpaceHeader>
-        <StyledWorkspaceName className="sw-body-sm sw-inline-flex sw-items-center">
+        <StyledWorkspaceName className="sw-typo-default sw-inline-flex sw-items-center">
           {this.props.children}
         </StyledWorkspaceName>
 
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx
index 6448a4b30a5..b5cd9db3356 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx
@@ -39,7 +39,7 @@ export default class WorkspaceNavItem extends React.PureComponent<Props> {
     return (
       <StyledWorkspaceNavItem className="sw-mr-2">
         <StyledWorkSpaceNavItemButton
-          className="sw-body-sm sw-pr-8 sw-pl-2"
+          className="sw-typo-default sw-pr-8 sw-pl-2"
           onClick={this.handleNameClick}
         >
           {this.props.children}
diff --git a/server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx b/server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx
index 6e95c19302c..b195fe6c0ab 100644
--- a/server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx
+++ b/server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx
@@ -29,13 +29,30 @@ import RatingComponent from '../../../app/components/metrics/RatingComponent';
 import RatingTooltipContent from '../../../components/measure/RatingTooltipContent';
 import { BranchLike } from '../../../types/branch-like';
 
+type FontClass =
+  | 'sw-heading-xs'
+  | 'sw-heading-sm'
+  | 'sw-heading-md'
+  | 'sw-heading-lg'
+  | 'sw-heading-xl'
+  | 'sw-typo-default'
+  | 'sw-typo-semibold'
+  | 'sw-typo-bold'
+  | 'sw-typo-sm'
+  | 'sw-typo-sm-semibold'
+  | 'sw-typo-lg'
+  | 'sw-typo-lg-semibold'
+  | 'sw-typo-label'
+  | 'sw-typo-helper-text'
+  | 'sw-typo-display';
+
 interface Props {
   badgeSize?: 'xs' | 'sm' | 'md';
   branchLike?: BranchLike;
   className?: string;
   componentKey: string;
   decimals?: number;
-  fontClassName?: `sw-body-${string}` | `sw-heading-lg`;
+  fontClassName?: FontClass;
   forceRatingMetric?: boolean;
   metricKey: string;
   metricType: string;
@@ -97,7 +114,7 @@ export default function Measure({
           className="sw-mr-2"
           size={small ? 'sm' : 'md'}
         />
-        <span className={small ? '' : 'sw-body-md'}>{formatted}</span>
+        <span className={small ? '' : 'sw-typo-lg'}>{formatted}</span>
       </>
     );
   }
diff --git a/server/sonar-web/tailwind-echoes.js b/server/sonar-web/tailwind-echoes.js
new file mode 100644
index 00000000000..90499536334
--- /dev/null
+++ b/server/sonar-web/tailwind-echoes.js
@@ -0,0 +1,81 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(({ addUtilities }) => {
+  const echoes = {
+    '.code': {
+      font: 'var(--echoes-typography-code-default)',
+    },
+    '.code-highlight': {
+      font: 'var(--echoes-typography-code-highlight)',
+    },
+    '.code-comment': {
+      font: 'var(--echoes-typography-code-comment)',
+    },
+    '.heading-xs': {
+      font: 'var(--echoes-typography-heading-xsmall)',
+    },
+    '.heading-sm': {
+      font: 'var(--echoes-typography-heading-small)',
+    },
+    '.heading-md': {
+      font: 'var(--echoes-typography-heading-medium)',
+    },
+    '.heading-lg': {
+      font: 'var(--echoes-typography-heading-large)',
+    },
+    '.heading-xl': {
+      font: 'var(--echoes-typography-heading-xlarge)',
+    },
+    '.typo-default': {
+      font: 'var(--echoes-typography-text-default-regular)',
+    },
+    '.typo-semibold': {
+      font: 'var(--echoes-typography-text-default-semi-bold)',
+    },
+    '.typo-bold': {
+      font: 'var(--echoes-typography-text-default-bold)',
+    },
+    '.typo-sm': {
+      font: 'var(--echoes-typography-text-small-medium)',
+    },
+    '.typo-sm-semibold': {
+      font: 'var(--echoes-typography-text-small-semi-bold)',
+    },
+    '.typo-lg': {
+      font: 'var(--echoes-typography-text-large-regular)',
+    },
+    '.typo-lg-semibold': {
+      font: 'var(--echoes-typography-text-large-semi-bold)',
+    },
+    '.typo-label': {
+      font: 'var(--echoes-typography-others-label)',
+    },
+    '.typo-helper-text': {
+      font: 'var(--echoes-typography-others-helper-text)',
+    },
+    '.typo-display': {
+      font: 'var(--echoes-typography-display-default)',
+    },
+  };
+
+  addUtilities(echoes);
+});
diff --git a/server/sonar-web/tailwind-utilities.js b/server/sonar-web/tailwind-utilities.js
deleted file mode 100644
index d91b17b99ff..00000000000
--- a/server/sonar-web/tailwind-utilities.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-const plugin = require('tailwindcss/plugin');
-
-module.exports = plugin(({ addUtilities, theme }) => {
-  const newUtilities = {
-    '.heading-xl': {
-      'font-family': theme('fontFamily.sans'),
-      'font-size': theme('fontSize.xl'),
-      'line-height': theme('fontSize').xl[1],
-      'font-weight': theme('fontWeight.semibold'),
-    },
-    '.heading-lg': {
-      'font-family': theme('fontFamily.sans'),
-      'font-size': theme('fontSize.lg'),
-      'line-height': theme('fontSize').lg[1],
-      'font-weight': theme('fontWeight.semibold'),
-    },
-    '.heading-md': {
-      'font-family': theme('fontFamily.sans'),
-      'font-size': theme('fontSize.md'),
-      'line-height': theme('fontSize').md[1],
-      'font-weight': theme('fontWeight.semibold'),
-    },
-    '.body-md': {
-      'font-family': theme('fontFamily.sans'),
-      'font-size': theme('fontSize.base'),
-      'line-height': theme('fontSize').base[1],
-      'font-weight': theme('fontWeight.regular'),
-    },
-    '.body-md-highlight': {
-      'font-family': theme('fontFamily.sans'),
-      'font-size': theme('fontSize.base'),
-      'line-height': theme('fontSize').base[1],
-      'font-weight': theme('fontWeight.semibold'),
-    },
-    '.body-sm': {
-      'font-family': theme('fontFamily.sans'),
-      'font-size': theme('fontSize.sm'),
-      'line-height': theme('fontSize').sm[1],
-      'font-weight': theme('fontWeight.regular'),
-    },
-    '.body-xs': {
-      'font-family': theme('fontFamily.sans'),
-      'font-size': theme('fontSize.xs'),
-      'line-height': theme('fontSize').xs[1],
-      'font-weight': theme('fontWeight.regular'),
-    },
-    '.body-sm-highlight': {
-      'font-family': theme('fontFamily.sans'),
-      'font-size': theme('fontSize.sm'),
-      'line-height': theme('fontSize').sm[1],
-      'font-weight': theme('fontWeight.semibold'),
-    },
-    '.code': {
-      'font-family': theme('fontFamily.mono'),
-      'font-size': theme('fontSize.sm'),
-      'line-height': theme('fontSize').code[1],
-      'font-weight': theme('fontWeight.regular'),
-    },
-    '.code-highlight': {
-      'font-family': theme('fontFamily.mono'),
-      'font-size': theme('fontSize.sm'),
-      'line-height': theme('fontSize').code[1],
-      'font-weight': theme('fontWeight.bold'),
-    },
-    '.code-comment': {
-      'font-family': theme('fontFamily.mono'),
-      'font-size': theme('fontSize.sm'),
-      'line-height': theme('fontSize').code[1],
-      'font-style': 'italic',
-    },
-  };
-
-  addUtilities(newUtilities);
-});
diff --git a/server/sonar-web/tailwind.base.config.js b/server/sonar-web/tailwind.base.config.js
index 3580352def3..2a05793daf6 100644
--- a/server/sonar-web/tailwind.base.config.js
+++ b/server/sonar-web/tailwind.base.config.js
@@ -19,11 +19,12 @@
  */
 const path = require('path');
 const { fontFamily } = require('tailwindcss/defaultTheme');
-const utilities = require('./tailwind-utilities');
+const echoesUtilities = require('./tailwind-echoes');
 
 module.exports = {
   prefix: 'sw-', // Prefix all tailwind classes with the sw- prefix to avoid collisions
   theme: {
+    colors: {},
     // Define cursors
     cursor: {
       auto: 'auto',
@@ -146,57 +147,9 @@ module.exports = {
   },
   corePlugins: {
     // Please respect the alphabetical order in the below plugins
-    alignItems: true, // .sw-items-x classes
-    alignSelf: true, // .sw-self-x classes
-    borderRadius: true, // .sw-rounded-x classes
-    boxSizing: true, // .sw-box-x classes
-    cursor: true, // .sw-cursor-not-allowed
-    display: true, // display classes .sw-grid .sw-flex
-    flex: true, // .sw-flex-1 .sw-flex-auto ... classes
-    flexDirection: true, // .sw-flex-row .sw-flex-col-reverse ... classes
-    flexGrow: true, // .sw-flex-grow .sw-flex-grow-0 classes
-    flexShrink: true, // .sw-flex-shrink .sw-flex-shrink-0 classes
-    flexWrap: true, // .sw-flex-wrap sw-flex-nowrap ... classes
-    fontFamily: true, // .sw-font-sans .sw-font-mono classes
-    fontSize: true, // .sw-text-sm and similar classes
-    fontWeight: true, // .sw-font-x classes
-    gap: true, // .sw-gap-x classes based on spacing
-    gridAutoFlow: true, // all css grid related classes: .sw-grid-cols-x .sw-col-span-x
-    gridColumn: true,
-    gridColumnEnd: true,
-    gridColumnStart: true,
-    gridRow: true,
-    gridRowEnd: true,
-    gridRowStart: true,
-    gridTemplateColumns: true,
-    gridTemplateRows: true,
-    height: true, // height classes .sw-h-x based on spacing + some more
-    inset: true, // placement classes .sw-top-x based on spacing + some more
-    justifyContent: true, // .sw-justify-x classes
-    lineHeight: true, // .sw-leading-x classes
-    margin: true, // .sw-m-x classes based on spacing
-    maxHeight: true, // sw-max-height classes .sw-max-h-x based on spacing + some more
-    maxWidth: true, // sw-max-width classes .sw-max-w-x based on spacing + some more
-    minHeight: true, // sw-min-height classes .sw-min-h-x based on spacing + some more
-    minWidth: true, // sw-min-width classes .sw-min-w-x based on spacing + some more
-    opacity: true, // sw-opacity-x classes
-    order: true, // .sw-order-x classes
-    overflow: true, // .sw-overflow-x classes
-    padding: true, // .sw-p-x classes based on spacing
-    pointerEvents: true, //.sw-pointer-events-none .sw-pointer-events-auto
-    position: true, // position classes .sw-relative .sw-absolute
     preflight: false, // disable preflight
-    textAlign: true, // .sw-text-x classes
-    textOverflow: true, // .sw-text-ellipsis, .sw-truncate
-    textTransform: true, // sw-uppercase, .sw-capitalize
-    userSelect: true, // .sw-select-none classes
-    verticalAlign: true, // .sw-align-x classes
-    width: true, // .sw-w-x classes based on spacing + some more
-    whitespace: true, // sw-whitespace-x classes
-    wordBreak: true, // .sw-break-normal, sw-break-all, sw-break-words classes
-    zIndex: true, // .sw-z-x classes
   },
-  plugins: [utilities],
+  plugins: [echoesUtilities],
   content: [
     path.resolve(__dirname, './src/**/!(__tests__|@types|api)/*.{ts,tsx}'),
     path.resolve(__dirname, './design-system/src/**/!(__tests__|@types|theme|helpers)/*.{ts,tsx}'),
-- 
2.39.5