diff --git a/apps/rhc-templates/src/app/collage/page.tsx b/apps/rhc-templates/src/app/collage/page.tsx
index 50f49434d..27649222b 100644
--- a/apps/rhc-templates/src/app/collage/page.tsx
+++ b/apps/rhc-templates/src/app/collage/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AccordionProvider } from '@rijkshuisstijl-community/components-react';
+import { AccordionProvider, Paragraph } from '@rijkshuisstijl-community/components-react';
 import { Avatar, Pagination } from '@amsterdam/design-system-react';
 import {
   IconAlertTriangle,
@@ -33,7 +33,6 @@ import {
   LinkListLink,
   OrderedList,
   OrderedListItem,
-  Paragraph,
   RadioButton,
   Separator,
   StatusBadge,
@@ -75,18 +74,14 @@ export default function Collage() {
           src="https://raw.githubusercontent.com/nl-design-system/rijkshuisstijl-community/0bfd32af3f34ff7ce62f4769fbec8895720dde75/proprietary/assets/src/placeholder.jpg"
         ></Image>
       </div>
-      <div className="unstarted">
-        <Paragraph lead>
-          In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen.
-        </Paragraph>
-      </div>
-      <div className="unstarted">
-        <Paragraph>
-          In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen. Zo kan de
-          hele Nederlandse overheid samenwerken aan een begrijpelijke, gebruiksvriendelijke én toegankelijke online
-          dienstverlening.
-        </Paragraph>
-      </div>
+      <Paragraph lead>
+        In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen.
+      </Paragraph>
+      <Paragraph>
+        In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen. Zo kan de hele
+        Nederlandse overheid samenwerken aan een begrijpelijke, gebruiksvriendelijke én toegankelijke online
+        dienstverlening.
+      </Paragraph>
       <div className="unstarted">
         <OrderedList>
           <OrderedListItem>Verkies makkelijke korte boven formele lange woorden.</OrderedListItem>
@@ -115,11 +110,9 @@ export default function Collage() {
           <UnorderedListItem>Maak gebruik van opsommingstekens waar dat mogelijk is.</UnorderedListItem>
         </UnorderedList>
       </div>
-      <div className="unstarted">
-        <Paragraph lead>
-          In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen.
-        </Paragraph>
-      </div>
+      <Paragraph lead>
+        In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen.
+      </Paragraph>
       <div className="unstarted">
         <Blockquote attribution="Pippi Langkous">Ik heb het nog nooit gedaan dus ik denk dat ik het wel kan</Blockquote>
       </div>
diff --git a/apps/rhc-templates/src/app/details/page.tsx b/apps/rhc-templates/src/app/details/page.tsx
index 1089ec1ed..42e4dd380 100644
--- a/apps/rhc-templates/src/app/details/page.tsx
+++ b/apps/rhc-templates/src/app/details/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Logo } from '@rijkshuisstijl-community/components-react';
+import { Logo, Paragraph } from '@rijkshuisstijl-community/components-react';
 import {
   BreadcrumbNav,
   BreadcrumbNavLink,
@@ -13,7 +13,6 @@ import {
   PageContent,
   PageFooter,
   PageHeader,
-  Paragraph,
   Separator,
 } from '@utrecht/component-library-react/dist/css-module';
 
@@ -54,13 +53,11 @@ export default function Details() {
       </div>
 
       <PageContent className="container page-content">
-        <div className="unstarted">
-          <Paragraph>
-            De Arbeidstijdenwet geeft regels voor werktijden, pauzes en rusttijden van werknemers. Met deze regels wil
-            de Rijksoverheid werknemers beschermen tegen te lange werkdagen. Maar ook de combinatie van werk, privé en
-            zorgtaken gemakkelijker maken.
-          </Paragraph>
-        </div>
+        <Paragraph>
+          De Arbeidstijdenwet geeft regels voor werktijden, pauzes en rusttijden van werknemers. Met deze regels wil de
+          Rijksoverheid werknemers beschermen tegen te lange werkdagen. Maar ook de combinatie van werk, privé en
+          zorgtaken gemakkelijker maken.
+        </Paragraph>
         <div className="unstarted">
           <Separator></Separator>
         </div>
diff --git a/apps/rhc-templates/src/app/form/page.tsx b/apps/rhc-templates/src/app/form/page.tsx
index 3a22bb18a..e87c14f4d 100644
--- a/apps/rhc-templates/src/app/form/page.tsx
+++ b/apps/rhc-templates/src/app/form/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AccordionProvider, Logo } from '@rijkshuisstijl-community/components-react';
+import { AccordionProvider, Logo, Paragraph } from '@rijkshuisstijl-community/components-react';
 import { FormLabel, Heading } from '@utrecht/component-library-react';
 import {
   BreadcrumbNav,
@@ -16,7 +16,6 @@ import {
   PageContent,
   PageFooter,
   PageHeader,
-  Paragraph,
   RadioButton,
   Textarea,
   Textbox,
@@ -50,12 +49,10 @@ export default function Form() {
         <div className="unstarted">
           <Heading level={1}>Formulier voor vragen over Sisa</Heading>
         </div>
-        <div className="unstarted">
-          <Paragraph>Heeft u vragen over Single information, Single audit (SiSa)?</Paragraph>
-          <Paragraph>Gebruik dan het formulier hieronder.</Paragraph>
-          <br />
-          <Paragraph>Mogelijke vragen:</Paragraph>
-        </div>
+        <Paragraph>Heeft u vragen over Single information, Single audit (SiSa)?</Paragraph>
+        <Paragraph>Gebruik dan het formulier hieronder.</Paragraph>
+        <br />
+        <Paragraph>Mogelijke vragen:</Paragraph>
         <div className="unstarted">
           <UnorderedList>
             <UnorderedListItem>Hoe moet ik extra regels toevoegen bij de macro-versie?</UnorderedListItem>
@@ -70,15 +67,13 @@ export default function Form() {
           </UnorderedList>
         </div>
         <br />
-        <div className="unstarted">
-          <Paragraph>
-            Lees verder over de{' '}
-            <span className="unstarted">
-              <Link href="#">verantwoordingsmethode SiSa</Link>
-            </span>
-            .
-          </Paragraph>
-        </div>
+        <Paragraph>
+          Lees verder over de{' '}
+          <span className="unstarted">
+            <Link href="#">verantwoordingsmethode SiSa</Link>
+          </span>
+          .
+        </Paragraph>
         <form>
           <div className="unstarted">
             <FormField label="Naam">
@@ -162,13 +157,11 @@ export default function Form() {
           <div className="unstarted">
             <Heading level={1}>Informatie over de verwerking van uw persoonsgegevens</Heading>
           </div>
-          <div className="unstarted">
-            <Paragraph>
-              Wij gebruiken gegevens die u heeft ingevuld om uw vraag te beantwoorden. Daarna worden ze volgens in de
-              archiefwet tijdelijk bewaard in de daarvoor bestemde archiefsystemen. Deze zijn van het Ministerie van
-              Binnenlandse Zaken & Koninkrijksrelaties (BZK).
-            </Paragraph>
-          </div>
+          <Paragraph>
+            Wij gebruiken gegevens die u heeft ingevuld om uw vraag te beantwoorden. Daarna worden ze volgens in de
+            archiefwet tijdelijk bewaard in de daarvoor bestemde archiefsystemen. Deze zijn van het Ministerie van
+            Binnenlandse Zaken & Koninkrijksrelaties (BZK).
+          </Paragraph>
           <AccordionProvider
             sections={[
               {
diff --git a/apps/rhc-templates/src/app/page/page.tsx b/apps/rhc-templates/src/app/page/page.tsx
index 70e1b1b4e..17afc6ae6 100644
--- a/apps/rhc-templates/src/app/page/page.tsx
+++ b/apps/rhc-templates/src/app/page/page.tsx
@@ -27,12 +27,11 @@ import {
   NavBar,
   NavList,
   NavListLinkButton,
-  Paragraph,
   Image,
   Figure,
   FigureCaption,
 } from '@utrecht/component-library-react/dist/css-module';
-import { ActionGroup, Logo } from '@rijkshuisstijl-community/components-react';
+import { ActionGroup, Logo, Paragraph } from '@rijkshuisstijl-community/components-react';
 import { HeadingGroup } from '@utrecht/component-library-react';
 
 export default function Page() {
@@ -83,12 +82,8 @@ export default function Page() {
         <div className="unstarted">
           <Heading level={2}>Dit is een H2</Heading>
         </div>
-        <div className="unstarted">
-          <Paragraph>Dit is een paragraaf.</Paragraph>
-        </div>
-        <div className="unstarted">
-          <Paragraph>Opsomming ordered list</Paragraph>
-        </div>
+        <Paragraph>Dit is een paragraaf.</Paragraph>
+        <Paragraph>Opsomming ordered list</Paragraph>
         <div className="unstarted">
           <OrderedList>
             <OrderedListItem>Ordered list item.</OrderedListItem>
@@ -96,9 +91,7 @@ export default function Page() {
             <OrderedListItem>Ordered list item.</OrderedListItem>
           </OrderedList>
         </div>
-        <div className="unstarted">
-          <Paragraph>Opsomming unordered list</Paragraph>
-        </div>
+        <Paragraph>Opsomming unordered list</Paragraph>
         <div className="unstarted">
           <UnorderedList>
             <UnorderedListItem>Unordered list item.</UnorderedListItem>
@@ -106,9 +99,7 @@ export default function Page() {
             <UnorderedListItem>Unordered list item.</UnorderedListItem>
           </UnorderedList>
         </div>
-        <div className="unstarted">
-          <Paragraph>Opsomming link list</Paragraph>
-        </div>
+        <Paragraph>Opsomming link list</Paragraph>
         <div className="unstarted">
           <LinkList
             icon={() => (
@@ -130,9 +121,7 @@ export default function Page() {
         <div className="unstarted">
           <Heading level={3}>Dit is een H3</Heading>
         </div>
-        <div className="unstarted">
-          <Paragraph>Dit is een paragraaf.</Paragraph>
-        </div>
+        <Paragraph>Dit is een paragraaf.</Paragraph>
         <div className="unstarted">
           <Link external={true} href="example.com">
             Dit is een externe link
@@ -167,18 +156,16 @@ export default function Page() {
         <div className="unstarted">
           <Heading level={4}>Dit is een H4</Heading>
         </div>
-        <div className="unstarted">
-          <Paragraph>
-            Dit is een wat langere paragraaf. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-            <span className="unstarted">
-              <Link href="/">Dit is een normale link</Link>
-            </span>
-          </Paragraph>
-        </div>
+        <Paragraph>
+          Dit is een wat langere paragraaf. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+          officia deserunt mollit anim id est laborum.
+          <span className="unstarted">
+            <Link href="/">Dit is een normale link</Link>
+          </span>
+        </Paragraph>
         <div className="unstarted">
           <Blockquote attribution="Label">
             Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *
@@ -187,9 +174,7 @@ export default function Page() {
         <div className="unstarted">
           <Heading level={5}>Dit is een H5</Heading>
         </div>
-        <div className="unstarted">
-          <Paragraph>Dit is een paragraaf.</Paragraph>
-        </div>
+        <Paragraph>Dit is een paragraaf.</Paragraph>
         <div className="unstarted">
           <Separator></Separator>
         </div>
diff --git a/packages/storybook/src/community/paragraph.md b/packages/storybook/src/community/paragraph.md
index b1b34e504..35f81d450 100644
--- a/packages/storybook/src/community/paragraph.md
+++ b/packages/storybook/src/community/paragraph.md
@@ -1 +1,158 @@
+<!-- @license CC0-1.0 -->
+
 # Rijkshuisstijl Community paragraph component
+
+De _paragraph_ component gebruik je voor een alinea met lopende tekst, instructies van formulieren en voor overige losstaande tekstfragmenten.
+
+## HTML
+
+Gebruik hiervoor altijd het `<p>` HTML-element, die heeft automatisch de goede [`paragraph` role](https://w3c.github.io/aria/#paragraph) in de accessibility tree (dat is nodig voor WCAG eis 1.3.1). Voor een _lead paragraph_ gebruik je `<p><b>…</b></p>`. Voor _small print_ gebruik je `<p><small>…</small></p>`.
+
+Zelfs als geen CSS geladen kan worden, blijft de tekst duidelijk. Door het `<p>` element is er tussen alinea's duidelijke witruimte (WCAG 1.4.12). Door het `<b>` element is de _lead paragraph_ visueel herkenbaar. Door `<small>` is _small print_ visueel herkenbaar.
+
+### Lead Paragraph
+
+De _lead paragraph_ is een extra opvallende variant van de _paragraph_. Gebruik de _lead paragraph_ onder de _heading_ van een _article_ voor een introductietekst.
+
+Schrijf in de eerste alinea kort en bondig waar de pagina over gaat, zodat de lezer kan besluiten om verder te lezen. Gebruik hiervoor de _lead paragraph_ variant zodat de tekst extra opvallend is.
+
+Wanneer je meer dan circa 30 woorden of 200 tekens nodig hebt, gebruik dan niet de _lead paragraph_ variant zodat de tekst een leesbare lettergrootte heeft voor langere teksten.
+
+Gebruik de _lead paragraph_ niet wanneer je een _paragraph_ voor een ander doel extra opvallend wil maken, ontwikkel dan een eigen variant.
+
+## Inhoud
+
+Groepeer zinnen die bij elkaar horen in een alinea. Begin een nieuwe alinea wanneer de tekst over een andere onderwerp gaat of een eigen doel heeft. Teksten met alinea's die niet bovengemiddeld lang zijn makkelijker te begrijpen als je pauze neemt, en door het grouperen is informatie sneller terug te vinden.
+
+Overweeg of een alinea met meer dan 7 zinnen of 140 woorden duidelijker is als je tekst indeelt in twee alinea's.
+
+## Layout
+
+### Lettergrootte
+
+Kies de lettergrootte niet te klein, bijvoorbeeld `16px` of groter. Gebruik `rem` in CSS in plaats van `px`, zodat de font-size van de _paragraph_ ook verdubbelt wanneer gebruikers via hun besturingssysteem of _user stylesheet_ de standaard lettergroote 200% groter maken. ([WCAG eis 1.4.4](https://www.w3.org/TR/WCAG21/#resize-text)) Gebruikers moeten de lettergrootte vier keer groter kunnen maken met browser zoom. ([WCAG eis 1.4.10](https://www.w3.org/TR/WCAG21/#reflow)) Maak zoom niet kapot door gebruik van de `vw` of `vh` eenheden in CSS die niet altijd goed werken met zoom.
+
+Gebruik de design token `nl.paragraph.font-size` als je niet de standaard-grootte wilt van `nl.document.font-size`.
+
+Voor de lead paragraph variant is het gebruikelijk de lettergrootte 10% á 20% groter te kiezen (`nl.paragraph.lead.font-size`).
+
+### Regelhoogte
+
+Stel de regelhoogte met `nl.paragraph.line-height` in voor voldoende afstand tussen tekstregels, dit verbetert de leesbaarheid. Standaard gebruiken browsers circa `1.2`, maar `1.5` is voor veel gebruikers beter leesbaar. Voor WCAG 1.4.8 is het ook belangrijk om `1.5` of groter aan te bieden.
+
+### Afstand tussen paragrafen
+
+Kies voldoende afstand tussen alinea's, in elk geval 50% groter dan afstand tussen tekstregels. (WCAG 1.4.8). Gebruik hiervoor de design tokens `nl.paragraph.margin-block-start` en `nl.paragraph.margin-block-end`.
+
+### Kleurgebruik
+
+`nl.paragraph.color`: kies voldoende contrast ten opzichte van de achtergrondkleur, van bijvoorbeeld `nl.document.background-color` of `nl.page.background-color`. Kies in plaats van zwart voor zeer donkergrijs, dat is beter leesbaar op beeldschermen. Een contrastverhouding van 7:1 is ideaal. (WCAG 1.4.3 en WCAG 1.4.6)
+
+### Regellengte
+
+Zorg dat de lengte van de tekst niet te lang wordt, bijvoorbeeld door deze design token in te stellen: `nl.article.max-inline-size`. De ideale regellengte verschilt per schrift en taal, maar ergens tussen de 50 en 75 tekens voor Nederlands is prima. Je kunt in CSS bijvoorbeeld de `ch` eenheid gebruiken: `--nl-article-max-inline-size: 60ch`.
+
+Voor WCAG 1.4.8 is het nodig dat de regellengte beperkt kan worden tot maximaal 80 tekens (`80ch`), bijvoorbeeld door de viewport van de browser kleiner te maken.
+
+### Tekstuitlijning
+
+Tekst dient uitsluitend links uitgelijnd zijn, voor Nederlandse teksten. Gebruik daarvoor `text-align: start`.
+
+`text-align: justify` moet vermeden kunnen worden volgens WCAG 1.4.8, dus gebruik deze voor het gemak helemaal niet. Rechts uitlijnen en tekst centreren moet je ook niet gebruiken voor lopende tekst.
+
+## Hoe het niet moet
+
+### Geen opmaak
+
+Geen `p` gebruiken:
+
+```html
+<section>
+  <h1>Interessante pagina</h1>
+  Deze eerste tekst ziet er misschien prima uit.
+  <p>Maar ook de eerste paragraaf hoort in een p-element te staan.</p>
+</section>
+```
+
+### Lege paragraaf
+
+Een lege `p` gebruiken, bijvoorbeeld om extra afstand te maken:
+
+```html
+<section>
+  <h1>Voorbeeld pagina</h1>
+  <p>Deze pagina ziet er op het oog misschien prima uit.</p>
+  <p>&nbsp;</p>
+  <p>Maar sommige screen readers zeggen dat er drie paragrafen zijn, dat is verwarrend.</p>
+</section>
+```
+
+### Geen semantiek
+
+Een `div` gebruiken:
+
+```html
+<section>
+    <h1>Interessante pagina</h1>
+    <div>Deze eerste tekst ziet er misschien prima uit, maar de paragraph role ontbreek in de accessibility tree.</div>
+    <div role="paragraph">Gebruik gewoon een p-element in plaats van ARIA om de role te verkrijgen.</p>
+</section>
+```
+
+Wanneer je tekstfragmenten na elkaar plaatst is het belangrijk dat je een element zoals paragraaf gebruikt (en niet een `inline` element zoals `span` of `label`), zodat de twee tekstfragmenten los van elkaar worden voorgelezen door screen readers. Wanneer de CSS niet geladen kan worden, dan heeft `p` wel marge en `div` niet, in veel situaties zonder CSS is `p` daarom leesbaarder dan `div`.
+
+### `inline` in plaats van `block`-elementen
+
+```html
+<label for="name">Voornaam</label><span>Voornaam is verplicht</span>
+```
+
+Beter:
+
+```html
+<p><label for="name">Voornaam</label></p>
+<p>Voornaam is verplicht</p>
+```
+
+### Overdreven nadruk
+
+Benadruk niet een hele paragraaf, maar markeer het belangrijke gedeelte.
+
+```html
+<p>
+  <strong
+    >Tenzij anders vermeld is op de inhoud van deze website de Creative Commons zero verklaring (CC0) van toepassing.
+    Dit houdt in dat iedere vorm van hergebruik van de inhoud van deze site is toegestaan, tenzij bij of in een bepaald
+    onderdeel (bijvoorbeeld een logo of een foto) staat aangegeven dat op dat onderdeel een auteursrechtelijke
+    uitzondering van toepassing is.
+  </strong>
+</p>
+```
+
+Beter:
+
+```html
+<p>
+  <em>Tenzij anders vermeld</em> is op de inhoud van deze website de Creative Commons zero verklaring (CC0) van
+  toepassing. Dit houdt in dat <strong>iedere vorm van hergebruik van de inhoud van deze site is toegestaan</strong>,
+  tenzij bij of in een bepaald onderdeel (bijvoorbeeld een logo of een foto) staat aangegeven dat op dat onderdeel een
+  auteursrechtelijke uitzondering van toepassing is.
+</p>
+```
+
+## Links
+
+- [MDN: `<p>`: The Paragraph element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)
+- [HTML specification: The `<b>` element](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-b-element). Bevat een voorbeeld van het `b` element voor lead paragraphs.
+- [HTML specification: The `<small>` element](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-small-element). Bevat een voorbeeld van het `small` element voor _small print_.
+- [Hoe lang mag een alinea zijn? En waar hangt dat van af? - Taaladvies.net](https://taaladvies.net/lengte-van-alineas/)
+
+### Relevante WCAG regels
+
+- [WCAG eis 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships)
+- [WCAG eis 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum)
+- [WCAG eis 1.4.4](https://www.w3.org/TR/WCAG21/#resize-text)
+- [WCAG eis 1.4.8](https://www.w3.org/TR/WCAG21/#visual-presentation)
+- [WCAG eis 1.4.10](https://www.w3.org/TR/WCAG21/#reflow)
+- [WCAG eis 1.4.12](https://www.w3.org/TR/WCAG21/#text-spacing)
+- [WCAG eis 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts)
diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
index 31d10a6d8..843f0cd33 100644
--- a/proprietary/design-tokens/figma/figma.tokens.json
+++ b/proprietary/design-tokens/figma/figma.tokens.json
@@ -810,7 +810,7 @@
         "type": "other"
       },
       "font-size": {
-        "value": "{rhc.font-size.md}",
+        "value": "{rhc.font-size.paragraph.default}",
         "type": "other"
       },
       "line-height": {
@@ -1012,7 +1012,7 @@
         "type": "other"
       },
       "color": {
-        "value": "{rhc.color.zwart}",
+        "value": "{rhc.color.lintblauw.500}",
         "type": "other"
       }
     }
diff --git a/proprietary/design-tokens/token-transformer.mjs b/proprietary/design-tokens/token-transformer.mjs
index fab383701..27b89a15c 100644
--- a/proprietary/design-tokens/token-transformer.mjs
+++ b/proprietary/design-tokens/token-transformer.mjs
@@ -28,7 +28,6 @@ const init = async ({ input, output }) => {
     'components/modal-dialog',
     'components/ordered-list',
     'components/pagination',
-    'components/paragraph',
     'components/radio',
     'components/radio-group',
     'components/select',