diff --git a/packages/css/accordion.css b/packages/css/accordion.css
index 21733f9bee..36c4fa88f3 100644
--- a/packages/css/accordion.css
+++ b/packages/css/accordion.css
@@ -72,6 +72,9 @@
     padding-block: var(--dsc-accordion-padding);
     padding-inline: calc(var(--dsc-accordion-padding) + var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) var(--dsc-accordion-padding);
 
+    @composes ds-focus from './utilities.css';
+    @composes ds-body-text--sm from './baseline/typography.css';
+
     &:focus-visible {
       position: relative; /* Ensure foucs outline renders on top */
     }
diff --git a/packages/css/alert.css b/packages/css/alert.css
index 592d095525..6e24d3d241 100644
--- a/packages/css/alert.css
+++ b/packages/css/alert.css
@@ -16,37 +16,42 @@
   padding-block: var(--dsc-alert-padding);
   padding-inline: calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding);
 
+  @composes ds-body-text--md from './baseline/typography.css';
+
   & > :is(h1,h2,h3,h4,h5,h6):first-child::before, /* If Alert starts with Heading, align icon to this */
   &:not(:has(> :is(h1,h2,h3,h4,h5,h6):first-child))::before /* If there is no Heading, align icon to Alert itself */ {
     background-color: var(--dsc-alert-icon-color);
     content: '';
     display: block;
     height: var(--dsc-alert-icon-size);
-    margin-inline: calc((var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+    margin-inline: calc(
+      (var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) * -1
+    ); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+
     mask: var(--dsc-alert-icon-url) center/contain no-repeat;
     position: absolute;
-    translate: 0 calc(.5lh - var(--dsc-alert-icon-size) / 2); /* Center icon to line height */
+    translate: 0 calc((1lh - var(--dsc-alert-icon-size)) / 2); /* Center icon to line height */
     width: var(--dsc-alert-icon-size);
   }
 
   /**
     * Colors
     */
-  &[data-color="warning"] {
+  &[data-color='warning'] {
     --dsc-alert-border-color: var(--ds-color-warning-border-default);
     --dsc-alert-icon-color: var(--ds-color-warning-text-subtle);
     --dsc-alert-background: var(--ds-color-warning-surface-default);
     --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E");
   }
 
-  &[data-color="success"] {
+  &[data-color='success'] {
     --dsc-alert-background: var(--ds-color-success-surface-default);
     --dsc-alert-border-color: var(--ds-color-success-border-default);
     --dsc-alert-icon-color: var(--ds-color-success-text-subtle);
     --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E");
   }
 
-  &[data-color="danger"] {
+  &[data-color='danger'] {
     --dsc-alert-background: var(--ds-color-danger-surface-default);
     --dsc-alert-border-color: var(--ds-color-danger-border-default);
     --dsc-alert-icon-color: var(--ds-color-danger-text-subtle);
@@ -56,13 +61,17 @@
   /**
     * Sizes
     */
-  &[data-size="sm"] {
+  &[data-size='sm'] {
     --dsc-alert-icon-size: var(--ds-sizing-6);
     --dsc-alert-padding: var(--ds-spacing-5);
+
+    @composes ds-body-text--sm from './baseline/typography.css';
   }
 
-  &[data-size="lg"] {
+  &[data-size='lg'] {
     --dsc-alert-icon-size: var(--ds-sizing-8);
     --dsc-alert-padding: var(--ds-spacing-7);
+
+    @composes ds-body-text--lg from './baseline/typography.css';
   }
 }
diff --git a/packages/css/badge.css b/packages/css/badge.css
index c568d396a9..e712803f03 100644
--- a/packages/css/badge.css
+++ b/packages/css/badge.css
@@ -7,6 +7,8 @@
   display: inline-flex;
   position: relative;
 
+  @composes ds-body-text--short-sm from './baseline/typography.css';
+
   &::before {
     content: attr(data-count);
     background: var(--dsc-badge-background);
@@ -24,6 +26,8 @@
     --dsc-badge-size: var(--ds-sizing-3);
     --dsc-badge-padding: 0 var(--ds-spacing-1);
 
+    @composes ds-body-text--short-xs from './baseline/typography.css';
+
     &[data-count] {
       --dsc-badge-size: var(--ds-sizing-5);
     }
@@ -33,6 +37,8 @@
     --dsc-badge-size: var(--ds-sizing-4);
     --dsc-badge-padding: 0 var(--ds-spacing-2);
 
+    @composes ds-body-text--short-md from './baseline/typography.css';
+
     &[data-count] {
       --dsc-badge-size: var(--ds-sizing-7);
     }
diff --git a/packages/css/baseline/typography.css b/packages/css/baseline/typography.css
index 695bf19355..8ea1ba46bf 100644
--- a/packages/css/baseline/typography.css
+++ b/packages/css/baseline/typography.css
@@ -144,7 +144,6 @@
   line-height: var(--ds-paragraph-xs-line-height);
   font-size: var(--ds-paragraph-xs-font-size);
   letter-spacing: var(--ds-paragraph-xs-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -155,7 +154,6 @@
   line-height: var(--ds-paragraph-sm-line-height);
   font-size: var(--ds-paragraph-sm-font-size);
   letter-spacing: var(--ds-paragraph-sm-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -166,7 +164,6 @@
   line-height: var(--ds-paragraph-md-line-height);
   font-size: var(--ds-paragraph-md-font-size);
   letter-spacing: var(--ds-paragraph-md-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -177,7 +174,6 @@
   line-height: var(--ds-paragraph-lg-line-height);
   font-size: var(--ds-paragraph-lg-font-size);
   letter-spacing: var(--ds-paragraph-lg-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -188,7 +184,6 @@
   line-height: var(--ds-paragraph-long-xs-line-height);
   font-size: var(--ds-paragraph-long-xs-font-size);
   letter-spacing: var(--ds-paragraph-long-xs-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -199,7 +194,6 @@
   line-height: var(--ds-paragraph-long-sm-line-height);
   font-size: var(--ds-paragraph-long-sm-font-size);
   letter-spacing: var(--ds-paragraph-long-sm-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -210,7 +204,6 @@
   line-height: var(--ds-paragraph-long-md-line-height);
   font-size: var(--ds-paragraph-long-md-font-size);
   letter-spacing: var(--ds-paragraph-long-md-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -221,7 +214,6 @@
   line-height: var(--ds-paragraph-long-lg-line-height);
   font-size: var(--ds-paragraph-long-lg-font-size);
   letter-spacing: var(--ds-paragraph-long-lg-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -232,7 +224,6 @@
   line-height: var(--ds-paragraph-short-xs-line-height);
   font-size: var(--ds-paragraph-short-xs-font-size);
   letter-spacing: var(--ds-paragraph-short-xs-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -243,7 +234,6 @@
   line-height: var(--ds-paragraph-short-sm-line-height);
   font-size: var(--ds-paragraph-short-sm-font-size);
   letter-spacing: var(--ds-paragraph-short-sm-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -254,7 +244,6 @@
   line-height: var(--ds-paragraph-short-md-line-height);
   font-size: var(--ds-paragraph-short-md-font-size);
   letter-spacing: var(--ds-paragraph-short-md-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -265,7 +254,6 @@
   line-height: var(--ds-paragraph-short-lg-line-height);
   font-size: var(--ds-paragraph-short-lg-font-size);
   letter-spacing: var(--ds-paragraph-short-lg-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
diff --git a/packages/css/breadcrumbs.css b/packages/css/breadcrumbs.css
index 7081f3d3aa..4ab5d5eb98 100644
--- a/packages/css/breadcrumbs.css
+++ b/packages/css/breadcrumbs.css
@@ -2,14 +2,20 @@
   --dsc-breadcrumbs-spacing: var(--ds-spacing-2);
   --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
 
+  @composes ds-body-text--md from './baseline/typography.css';
+
   &[data-size='sm'] {
     --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
     --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
+
+    @composes ds-body-text--sm from './baseline/typography.css';
   }
 
   &[data-size='lg'] {
     --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
     --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
+
+    @composes ds-body-text--lg from './baseline/typography.css';
   }
 
   & > :is(ol, ul) {
diff --git a/packages/css/button.css b/packages/css/button.css
index 6effbd8f56..da2c236a2e 100644
--- a/packages/css/button.css
+++ b/packages/css/button.css
@@ -10,7 +10,7 @@
   --dsc-button-size: var(--ds-sizing-12);
 
   @composes ds-focus from './utilities.css';
-  @composes ds-paragraph-short from './baseline/typography.css';
+  @composes ds-body-text--short-md from './baseline/typography.css';
 
   align-items: center;
   background: var(--dsc-button-background);
@@ -42,12 +42,16 @@
     --dsc-button-padding-block: var(--ds-spacing-2);
     --dsc-button-padding-inline: var(--ds-spacing-3);
     --dsc-button-size: var(--ds-sizing-10);
+
+    @composes ds-body-text--short-sm from './baseline/typography.css';
   }
 
   &[data-size='lg'] {
     --dsc-button-padding-block: var(--ds-spacing-3);
     --dsc-button-padding-inline: var(--ds-spacing-5);
     --dsc-button-size: var(--ds-sizing-14);
+
+    @composes ds-body-text--short-lg from './baseline/typography.css';
   }
 
   &[data-icon] {
diff --git a/packages/css/dropdown.css b/packages/css/dropdown.css
index f3881b085f..493d134d11 100644
--- a/packages/css/dropdown.css
+++ b/packages/css/dropdown.css
@@ -17,14 +17,28 @@
     display: none;
   }
 
+  .ds-dropdown__heading {
+    padding: var(--dsc-dropdown-header-padding);
+
+    @composes ds-body-text--md from './baseline/typography.css';
+  }
+
   &[data-size='sm'] {
     --dsc-dropdown-padding: var(--ds-spacing-2);
     --dsc-dropdown-min-width: 15rem;
+
+    & .ds-dropdown__heading {
+      @composes ds-body-text--sm from './baseline/typography.css';
+    }
   }
 
   &[data-size='lg'] {
     --dsc-dropdown-padding: var(--ds-spacing-4) var(--ds-spacing-2);
     --dsc-dropdown-min-width: 18rem;
+
+    & .ds-dropdown__heading {
+      @composes ds-body-text--lg from './baseline/typography.css';
+    }
   }
 
   & :is(a, button, [role='button']) {
@@ -38,8 +52,4 @@
     padding: 0;
     list-style: none;
   }
-
-  .ds-dropdown__heading {
-    padding: var(--dsc-dropdown-header-padding);
-  }
 }
diff --git a/packages/css/list.css b/packages/css/list.css
index 89986e373d..ab36ec8adb 100644
--- a/packages/css/list.css
+++ b/packages/css/list.css
@@ -1,32 +1,38 @@
 .ds-list {
-  --dsc-list-font-size: var(--ds-font-size-5);
   --dsc-list-padding-left: var(--ds-spacing-6);
   --dsc-list-spacing: var(--ds-spacing-3);
   --dsc-list-spacing-nested: var(--ds-spacing-2);
 
-  font-size: var(--dsc-list-font-size); /* Replace with composes paragraph-md */
-  line-height: var(--ds-line-height-md); /* Replace with composes paragraph-md */
   margin: 0;
   padding-left: var(--dsc-list-padding-left);
 
-  & > li + li { margin-top: var(--dsc-list-spacing) }
-  & > li > :is(ol, ul) { --dsc-list-spacing: var(--dsc-list-spacing-nested) } /* Shrink spacing a bit when nested */
+  @composes ds-body-text--md from './baseline/typography.css';
+
+  & > li + li {
+    margin-top: var(--dsc-list-spacing);
+  }
+
+  & > li > :is(ol, ul) {
+    --dsc-list-spacing: var(--dsc-list-spacing-nested);
+  } /* Shrink spacing a bit when nested */
 
   /* Add zero-width space to fix VoiceOver: https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html
    * This can also be acheived by using role="list" + role="listitem", but is nice to solve with CSS avoiding cluttered HTML
    */
   & > li::before {
-    content: "\200B";
+    content: '\200B';
     position: absolute;
   }
 
-  &[data-size="sm"] {
+  &[data-size='sm'] {
     --dsc-list-padding-left: var(--ds-spacing-4);
-    --dsc-list-font-size: var(--ds-font-size-4); /* Replace with composes paragraph-sm */
+
+    @composes ds-body-text--sm from './baseline/typography.css';
   }
 
-  &[data-size="lg"] {
-    --dsc-list-font-size: var(--ds-font-size-6); /* Replace with composes paragraph-sm */
+  &[data-size='lg'] {
     --dsc-list-spacing: var(--ds-spacing-4);
+
+    @composes ds-body-text--lg from './baseline/typography.css';
   }
 }
diff --git a/packages/css/popover.css b/packages/css/popover.css
index aa7f0d2973..af300cd52e 100644
--- a/packages/css/popover.css
+++ b/packages/css/popover.css
@@ -18,6 +18,8 @@
   padding: var(--dsc-popover-padding);
   position: fixed;
 
+  @composes ds-body-text--md from './baseline/typography.css';
+
   &::before {
     background: var(--dsc-popover-background);
     border: inherit;
@@ -33,42 +35,51 @@
     width: var(--dsc-popover-arrow-size);
   }
 
-  &[data-size="sm"] { --dsc-popover-padding: var(--ds-spacing-2) var(--ds-spacing-3) }
-  &[data-size="lg"] { --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-5) }
+  &[data-size='sm'] {
+    --dsc-popover-padding: var(--ds-spacing-2) var(--ds-spacing-3);
+
+    @composes ds-body-text--sm from './baseline/typography.css';
+  }
+
+  &[data-size='lg'] {
+    --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-5);
+
+    @composes ds-body-text--lg from './baseline/typography.css';
+  }
 
-  &[data-placement="top"]::before {
+  &[data-placement='top']::before {
     top: 100%;
     rotate: 45deg;
   }
 
-  &[data-placement="left"]::before {
+  &[data-placement='left']::before {
     left: 100%;
     rotate: -45deg;
   }
 
-  &[data-placement="right"]::before {
+  &[data-placement='right']::before {
     left: 0;
     rotate: 135deg;
   }
 
-  &[data-placement="bottom"]::before {
+  &[data-placement='bottom']::before {
     top: 0;
     rotate: -135deg;
   }
 
-  &[data-variant="info"] {
+  &[data-variant='info'] {
     --dsc-popover-background: var(--ds-color-info-surface-default);
     --dsc-popover-border: 1px solid var(--ds-color-info-border-default);
     --dsc-popover-color: var(--ds-color-info-text-default);
   }
 
-  &[data-variant="warning"] {
+  &[data-variant='warning'] {
     --dsc-popover-background: var(--ds-color-warning-surface-default);
     --dsc-popover-border: 1px solid var(--ds-color-warning-border-default);
     --dsc-popover-color: var(--ds-color-warning-text-default);
   }
 
-  &[data-variant="danger"] {
+  &[data-variant='danger'] {
     --dsc-popover-background: var(--ds-color-danger-surface-default);
     --dsc-popover-border: 1px solid var(--ds-color-danger-border-default);
     --dsc-popover-color: var(--ds-color-danger-text-default);
diff --git a/packages/css/table.css b/packages/css/table.css
index de010ba6d9..62ba26d4ac 100644
--- a/packages/css/table.css
+++ b/packages/css/table.css
@@ -18,6 +18,8 @@
   color: var(--dsc-table-color);
   width: 100%;
 
+  @composes ds-body-text--md from './baseline/typography.css';
+
   & > :is(tbody, thead) > tr > :is(th, td) {
     background: var(--dsc-table-background);
     border-bottom: var(--dsc-table-border);
@@ -112,10 +114,14 @@
     */
   &[data-size='sm'] {
     --dsc-table-padding: var(--ds-spacing-1) var(--ds-spacing-3);
+
+    @composes ds-body-text--sm from './baseline/typography.css';
   }
 
   &[data-size='lg'] {
     --dsc-table-padding: var(--ds-spacing-3) var(--ds-spacing-3);
+
+    @composes ds-body-text--lg from './baseline/typography.css';
   }
 
   /**
diff --git a/packages/css/tabs.css b/packages/css/tabs.css
index 21fc16d5b6..3543c0e5df 100644
--- a/packages/css/tabs.css
+++ b/packages/css/tabs.css
@@ -6,14 +6,20 @@
   --dsc-tabs-content-color: var(--ds-color-neutral-text-default);
   --dsc-tabs-list-border-color: var(--ds-color-neutral-border-subtle);
 
+  @composes ds-body-text--short-md from './baseline/typography.css';
+
   &[data-size='sm'] {
     --dsc-tabs-tab-padding: var(--ds-spacing-2) var(--ds-spacing-4);
     --dsc-tabs-content-padding: var(--ds-spacing-4);
+
+    @composes ds-body-text--short-sm from './baseline/typography.css';
   }
 
   &[data-size='lg'] {
     --dsc-tabs-tab-padding: var(--ds-spacing-4) var(--ds-spacing-6);
     --dsc-tabs-content-padding: var(--ds-spacing-6);
+
+    @composes ds-body-text--short-lg from './baseline/typography.css';
   }
 }
 
diff --git a/packages/css/tag.css b/packages/css/tag.css
index a2a0e2fdf4..c06b79111d 100644
--- a/packages/css/tag.css
+++ b/packages/css/tag.css
@@ -15,14 +15,20 @@
   width: max-content;
   word-break: break-word;
 
+  @composes ds-body-text--short-md from './baseline/typography.css';
+
   &[data-size='sm'] {
     --dsc-tag-padding: 0 var(--ds-spacing-2);
     --dsc-tag-min-height: var(--ds-sizing-7);
+
+    @composes ds-body-text--short-sm from './baseline/typography.css';
   }
 
   &[data-size='lg'] {
     --dsc-tag-padding: 0 var(--ds-spacing-3);
     --dsc-tag-min-height: var(--ds-sizing-9);
+
+    @composes ds-body-text--short-lg from './baseline/typography.css';
   }
 
   &[data-color='info'] {
diff --git a/packages/css/tooltip.css b/packages/css/tooltip.css
index 25f1bcf67a..7dfc5938f8 100644
--- a/packages/css/tooltip.css
+++ b/packages/css/tooltip.css
@@ -5,6 +5,8 @@
   padding: var(--ds-spacing-1) var(--ds-spacing-2);
   color: var(--ds-color-neutral-background-default);
   border-radius: var(--ds-border-radius-md);
+
+  @composes ds-body-text--short-xs from './baseline/typography.css';
 }
 
 .ds-tooltip__arrow {
diff --git a/packages/react/src/components/Accordion/AccordionContent.tsx b/packages/react/src/components/Accordion/AccordionContent.tsx
index f1798e9496..ce87ad9fe7 100644
--- a/packages/react/src/components/Accordion/AccordionContent.tsx
+++ b/packages/react/src/components/Accordion/AccordionContent.tsx
@@ -1,8 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
-import { Paragraph } from '../Typography/Paragraph';
-
 export type AccordionContentProps = HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -14,9 +12,5 @@ export const AccordionContent = forwardRef<
   HTMLDivElement,
   AccordionContentProps
 >(function AccordionContent(rest, ref) {
-  return (
-    <Paragraph asChild size='sm'>
-      <div ref={ref} {...rest} />
-    </Paragraph>
-  );
+  return <div ref={ref} {...rest} />;
 });
diff --git a/packages/react/src/components/Accordion/AccordionHeading.tsx b/packages/react/src/components/Accordion/AccordionHeading.tsx
index da50614412..aa5dacfc8f 100644
--- a/packages/react/src/components/Accordion/AccordionHeading.tsx
+++ b/packages/react/src/components/Accordion/AccordionHeading.tsx
@@ -1,9 +1,6 @@
-import cl from 'clsx/lite';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
 
-import { Paragraph } from '../Typography/Paragraph';
-
 export type AccordionHeadingProps = {
   /** Heading text */
   children: ReactNode;
@@ -16,17 +13,7 @@ export type AccordionHeadingProps = {
  */
 export const AccordionHeading = forwardRef<HTMLElement, AccordionHeadingProps>(
   function AccordionHeading({ className, ...rest }, ref) {
-    return (
-      <Paragraph asChild size='sm'>
-        <u-summary
-          class={cl(
-            'ds-focus ds-paragraph ds-paragraph--sm ds-line-height--md', // Very TMP fix awaiting CSS modules
-            className,
-          )}
-          ref={ref}
-          {...rest}
-        />
-      </Paragraph>
-    );
+    /* Set `className` as `class` so react is happy */
+    return <u-summary ref={ref} class={className} {...rest} />;
   },
 );
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index 617957cdb0..bbfe42ca25 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -1,7 +1,6 @@
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography';
 
 export type AlertProps = {
   /**
@@ -28,14 +27,12 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
   ref,
 ) {
   return (
-    <Paragraph asChild size={size}>
-      <div
-        className={cl('ds-alert', className)}
-        data-color={color}
-        data-size={size}
-        ref={ref}
-        {...rest}
-      />
-    </Paragraph>
+    <div
+      className={cl('ds-alert', className)}
+      data-color={color}
+      data-size={size}
+      ref={ref}
+      {...rest}
+    />
   );
 });
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index 1d35a677d0..8bed93944a 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -1,6 +1,5 @@
 import cl from 'clsx/lite';
 import { type HTMLAttributes, type ReactNode, forwardRef } from 'react';
-import { Paragraph, type ParagraphProps } from '../Typography';
 
 export type BadgeProps = {
   /**
@@ -41,14 +40,6 @@ export type BadgeProps = {
   children?: ReactNode;
 } & HTMLAttributes<HTMLSpanElement>;
 
-const paragraphSizeMap: {
-  [key in NonNullable<BadgeProps['size']>]: NonNullable<ParagraphProps['size']>;
-} = {
-  sm: 'xs',
-  md: 'sm',
-  lg: 'md',
-};
-
 /**
  * `Badge` is a non-interactive component for displaying status with or without numbers.
  *
@@ -78,19 +69,17 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
   ref,
 ) {
   return (
-    <Paragraph asChild variant='short' size={paragraphSizeMap[size]}>
-      <span
-        className={cl('ds-badge', className)}
-        data-color={color}
-        data-count={
-          count && maxCount && count > maxCount ? `${maxCount}+` : count
-        }
-        data-overlap={rest.children ? overlap : null}
-        data-placement={rest.children ? placement : null}
-        data-size={size}
-        ref={ref}
-        {...rest}
-      />
-    </Paragraph>
+    <span
+      className={cl('ds-badge', className)}
+      data-color={color}
+      data-count={
+        count && maxCount && count > maxCount ? `${maxCount}+` : count
+      }
+      data-overlap={rest.children ? overlap : null}
+      data-placement={rest.children ? placement : null}
+      data-size={size}
+      ref={ref}
+      {...rest}
+    />
   );
 });
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
index c9caf11a2f..304bce93d5 100644
--- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,6 +1,5 @@
 import cl from 'clsx/lite';
 import { type HTMLAttributes, forwardRef } from 'react';
-import { Paragraph } from '../Typography';
 
 export type BreadcrumbsProps = {
   /**
@@ -20,14 +19,12 @@ export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
     { 'aria-label': ariaLabel = 'Du er her:', className, size, ...rest },
     ref,
   ) => (
-    <Paragraph asChild size={size}>
-      <nav
-        aria-label={ariaLabel}
-        className={cl('ds-breadcrumbs', className)}
-        data-size={size}
-        ref={ref}
-        {...rest}
-      />
-    </Paragraph>
+    <nav
+      aria-label={ariaLabel}
+      className={cl('ds-breadcrumbs', className)}
+      data-size={size}
+      ref={ref}
+      {...rest}
+    />
   ),
 );
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index cbc78e1723..c39c955474 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -2,7 +2,6 @@ import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes } from 'react';
-import { Paragraph } from '../Typography';
 import { Spinner } from '../loaders/Spinner';
 
 export type ButtonProps = {
@@ -65,33 +64,26 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     // Fallbacks to undefined to prevent rendering attribute="false"
     return (
-      <Paragraph variant='short' size={size} asChild>
-        <Component
-          aria-busy={Boolean(loading) || undefined}
-          className={cl('ds-button', className)}
-          data-color={color}
-          data-icon={icon || undefined}
-          data-size={size}
-          data-variant={variant}
-          ref={ref}
-          /* don't set type when we use `asChild` */
-          type={asChild ? undefined : 'button'}
-          /* if consumers set type, our default does not set anything, as `rest` contains this */
-          {...rest}
-        >
-          {loading === true ? (
-            <Spinner
-              aria-hidden='true'
-              color={spinnerColor}
-              size='sm'
-              title=''
-            />
-          ) : (
-            loading // Allow custom loading spinner
-          )}
-          <Slottable>{children}</Slottable>
-        </Component>
-      </Paragraph>
+      <Component
+        aria-busy={Boolean(loading) || undefined}
+        className={cl('ds-button', className)}
+        data-color={color}
+        data-icon={icon || undefined}
+        data-size={size}
+        data-variant={variant}
+        ref={ref}
+        /* don't set type when we use `asChild` */
+        type={asChild ? undefined : 'button'}
+        /* if consumers set type, our default does not set anything, as `rest` contains this */
+        {...rest}
+      >
+        {loading === true ? (
+          <Spinner aria-hidden='true' color={spinnerColor} size='sm' title='' />
+        ) : (
+          loading // Allow custom loading spinner
+        )}
+        <Slottable>{children}</Slottable>
+      </Component>
     );
   },
 );
diff --git a/packages/react/src/components/Dropdown/DropdownHeading.tsx b/packages/react/src/components/Dropdown/DropdownHeading.tsx
index 666acef743..7ab35caa42 100644
--- a/packages/react/src/components/Dropdown/DropdownHeading.tsx
+++ b/packages/react/src/components/Dropdown/DropdownHeading.tsx
@@ -1,21 +1,13 @@
 import cl from 'clsx/lite';
-import { type HTMLAttributes, forwardRef, useContext } from 'react';
-import { Paragraph } from '../Typography';
-import { DropdownCtx } from './Dropdown';
+import { type HTMLAttributes, forwardRef } from 'react';
 
 export type DropdownHeadingProps = HTMLAttributes<HTMLHeadingElement>;
 
 export const DropdownHeading = forwardRef<
   HTMLHeadingElement,
   DropdownHeadingProps
->(function DropdownHeading({ children, className, ...rest }, ref) {
-  const { size } = useContext(DropdownCtx);
-
+>(function DropdownHeading({ className, ...rest }, ref) {
   return (
-    <Paragraph asChild size={size}>
-      <h2 ref={ref} className={cl('ds-dropdown__heading', className)} {...rest}>
-        {children}
-      </h2>
-    </Paragraph>
+    <h2 ref={ref} className={cl('ds-dropdown__heading', className)} {...rest} />
   );
 });
diff --git a/packages/react/src/components/List/Lists.tsx b/packages/react/src/components/List/Lists.tsx
index fc03fc6694..3a88ef8805 100644
--- a/packages/react/src/components/List/Lists.tsx
+++ b/packages/react/src/components/List/Lists.tsx
@@ -33,14 +33,12 @@ const render = <T extends HTMLElement>(
   const Component = asChild ? Slot : tagName;
 
   return (
-    <Paragraph size={size} asChild>
-      <Component
-        className={cl(`ds-list`, className)}
-        data-size={size}
-        ref={ref}
-        {...rest}
-      />
-    </Paragraph>
+    <Component
+      className={cl(`ds-list`, className)}
+      data-size={size}
+      ref={ref}
+      {...rest}
+    />
   );
 };
 
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
index cd2365724a..13368a3d98 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/Popover/Popover.tsx
@@ -12,7 +12,6 @@ import cl from 'clsx/lite';
 import { forwardRef, useContext, useRef, useState } from 'react';
 import type { HTMLAttributes } from 'react';
 import { useEffect } from 'react';
-import { Paragraph } from '../Typography';
 import { Context } from './PopoverContext';
 
 const ARROW_HEIGHT = 7;
@@ -159,18 +158,16 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     }, [id]);
 
     return (
-      <Paragraph asChild size={size}>
-        <Component
-          className={cl('ds-popover', className)}
-          data-size={size}
-          data-variant={variant}
-          id={id || popoverId}
-          // @ts-ignore @types/react-dom does not understand popover yet
-          popover='manual'
-          ref={mergedRefs}
-          {...rest}
-        />
-      </Paragraph>
+      <Component
+        className={cl('ds-popover', className)}
+        data-size={size}
+        data-variant={variant}
+        id={id || popoverId}
+        // @ts-ignore @types/react-dom does not understand popover yet
+        popover='manual'
+        ref={mergedRefs}
+        {...rest}
+      />
     );
   },
 );
diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx
index e43af57eb6..7e590a39a5 100644
--- a/packages/react/src/components/Table/Table.tsx
+++ b/packages/react/src/components/Table/Table.tsx
@@ -2,8 +2,6 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { TableHTMLAttributes } from 'react';
 
-import { Paragraph } from '../Typography';
-
 export type TableProps = {
   /**
    * The size of the table
@@ -46,19 +44,17 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
   ref,
 ) {
   return (
-    <Paragraph asChild size={size}>
-      <table
-        className={cl('ds-table', className)}
-        data-border={border || undefined}
-        data-hover={hover || undefined}
-        data-size={size}
-        data-sticky-header={stickyHeader || undefined}
-        data-zebra={zebra || undefined}
-        ref={ref}
-        {...rest}
-      >
-        {children}
-      </table>
-    </Paragraph>
+    <table
+      className={cl('ds-table', className)}
+      data-border={border || undefined}
+      data-hover={hover || undefined}
+      data-size={size}
+      data-sticky-header={stickyHeader || undefined}
+      data-zebra={zebra || undefined}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </table>
   );
 });
diff --git a/packages/react/src/components/Tabs/TabsPanel.tsx b/packages/react/src/components/Tabs/TabsPanel.tsx
index 50230c37bd..3ff2493ee9 100644
--- a/packages/react/src/components/Tabs/TabsPanel.tsx
+++ b/packages/react/src/components/Tabs/TabsPanel.tsx
@@ -2,8 +2,6 @@ import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useContext } from 'react';
 
-import { Paragraph } from '../Typography';
-
 import { Context } from './Tabs';
 
 export type TabsPanelProps = {
@@ -26,15 +24,9 @@ export const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
     return (
       <>
         {active && (
-          <Paragraph asChild variant='short' size={size}>
-            <div
-              className={cl('ds-tabs__panel', className)}
-              ref={ref}
-              {...rest}
-            >
-              {children}
-            </div>
-          </Paragraph>
+          <div className={cl('ds-tabs__panel', className)} ref={ref} {...rest}>
+            {children}
+          </div>
         )}
       </>
     );
diff --git a/packages/react/src/components/Tabs/TabsTab.tsx b/packages/react/src/components/Tabs/TabsTab.tsx
index adbe97248d..67b40f54f8 100644
--- a/packages/react/src/components/Tabs/TabsTab.tsx
+++ b/packages/react/src/components/Tabs/TabsTab.tsx
@@ -3,7 +3,6 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef, useContext, useId } from 'react';
 
 import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem';
-import { Paragraph } from '../Typography';
 import { Context } from './Tabs';
 
 export type TabsTabProps = {
@@ -23,18 +22,16 @@ export const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(
 
     return (
       <RovingFocusItem value={value} {...rest} asChild>
-        <Paragraph asChild variant='short' size={tabs.size}>
-          <button
-            {...rest}
-            aria-selected={tabs.value === value}
-            className={cl('ds-tabs__tab', className)}
-            id={buttonId}
-            onClick={() => tabs.onChange?.(value)}
-            ref={ref}
-            role='tab'
-            type='button'
-          />
-        </Paragraph>
+        <button
+          {...rest}
+          aria-selected={tabs.value === value}
+          className={cl('ds-tabs__tab', className)}
+          id={buttonId}
+          onClick={() => tabs.onChange?.(value)}
+          ref={ref}
+          role='tab'
+          type='button'
+        />
       </RovingFocusItem>
     );
   },
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 8f4791abd6..8dc290aa72 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -2,11 +2,6 @@ import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
-import type { ParagraphProps } from '../Typography';
-import { Paragraph } from '../Typography';
-
-type Size = Exclude<ParagraphProps['size'], 'xs'>;
-
 export type TagProps = {
   /**
    * Color of the tag
@@ -25,7 +20,7 @@ export type TagProps = {
    * Size of the tag
    * @default md
    */
-  size?: Size;
+  size?: 'sm' | 'md' | 'lg';
 } & HTMLAttributes<HTMLSpanElement>;
 
 /**
@@ -38,14 +33,12 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
   ref,
 ) {
   return (
-    <Paragraph asChild size={size}>
-      <span
-        className={cl('ds-tag', className)}
-        data-color={color}
-        data-size={size}
-        ref={ref}
-        {...rest}
-      />
-    </Paragraph>
+    <span
+      className={cl('ds-tag', className)}
+      data-color={color}
+      data-size={size}
+      ref={ref}
+      {...rest}
+    />
   );
 });
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index 021360c80f..d9b8833dbc 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -25,7 +25,6 @@ import type {
 import { Fragment, cloneElement, forwardRef, useRef, useState } from 'react';
 
 import type { PortalProps } from '../../types/Portal';
-import { Paragraph } from '../Typography';
 
 const ARROW_HEIGHT = 7;
 const ARROW_GAP = 4;
@@ -151,26 +150,24 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         )}
         {internalOpen && (
           <Container>
-            <Paragraph size='xs' asChild>
-              <div
-                ref={refs.setFloating}
-                style={{ ...floatingStyles, ...animationStyles, ...style }}
-                role='tooltip'
-                {...getFloatingProps({
-                  className: cl('ds-tooltip', className),
-                  ref: mergedRef,
-                  ...rest,
-                })}
-              >
-                {content}
-                <FloatingArrow
-                  ref={arrowRef}
-                  context={context}
-                  className='ds-tooltip__arrow'
-                  height={ARROW_HEIGHT}
-                />
-              </div>
-            </Paragraph>
+            <div
+              ref={refs.setFloating}
+              style={{ ...floatingStyles, ...animationStyles, ...style }}
+              role='tooltip'
+              {...getFloatingProps({
+                className: cl('ds-tooltip', className),
+                ref: mergedRef,
+                ...rest,
+              })}
+            >
+              {content}
+              <FloatingArrow
+                ref={arrowRef}
+                context={context}
+                className='ds-tooltip__arrow'
+                height={ARROW_HEIGHT}
+              />
+            </div>
           </Container>
         )}
       </>