diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index 65f88fb70f106faafd2cbb52860402c1f3d1b59c..ca5deffa0090859a67b1b4d33e8d48f8efcc9df0 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -130,7 +130,32 @@ dl dl {
 }
 
 blockquote {
-  margin: 1em 2.5rem;
+  position: relative;
+  margin: var(--space-l);
+  margin-left: 2.5rem; /* LTR */
+  font-size: var(--font-size-h6);
+}
+
+[dir="rtl"] blockquote {
+  margin-right: 2.5rem;
+}
+
+blockquote::before {
+  position: absolute;
+  left: -2.5rem; /* LTR */
+  content: open-quote;
+  color: var(--color-absolutezero);
+  font-family: var(--font-family-serif);
+  font-size: var(--space-xl);
+  line-height: 1em;
+}
+
+[dir="rtl"] blockquote::before {
+  right: -2.5rem;
+}
+
+blockquote::after {
+  content: no-close-quote;
 }
 
 address {
diff --git a/core/themes/claro/css/base/elements.pcss.css b/core/themes/claro/css/base/elements.pcss.css
index 2e1ce76f00739dac1fb855fca0405c9f2e6b535c..e716912562ce76046f054964219a8dd806f116fc 100644
--- a/core/themes/claro/css/base/elements.pcss.css
+++ b/core/themes/claro/css/base/elements.pcss.css
@@ -107,7 +107,28 @@ dl dl {
   margin-right: 20px;
 }
 blockquote {
-  margin: 1em 40px;
+  position: relative;
+  margin: var(--space-l);
+  margin-left: 2.5rem; /* LTR */
+  font-size: var(--font-size-h6);
+}
+[dir="rtl"] blockquote {
+  margin-right: 2.5rem;
+}
+blockquote::before {
+  position: absolute;
+  left: -2.5rem; /* LTR */
+  content: open-quote;
+  color: var(--color-absolutezero);
+  font-family: var(--font-family-serif);
+  font-size: var(--space-xl);
+  line-height: 1em;
+}
+[dir="rtl"] blockquote::before {
+  right: -2.5rem;
+}
+blockquote::after {
+  content: no-close-quote;
 }
 address {
   font-style: italic;
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 903b4a8850bf96cd7e2094a80f16a47b0266824e..0119a07891613b13a3767cb4b36189b7e8118758 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -55,6 +55,7 @@
    * Typography.
    */
   --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --font-family-serif: "Times New Roman", times, serif;
   --line-height: 1.5;
   --line-height-heading: 1.3;
   --line-height-form-label: 1.125rem; /* 18px */
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index 62163019d4d43fc15fce72540232aa8d3d2ccbff..636deea2300abf054435cac78ff18a793e1e863d 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -49,6 +49,7 @@
    * Typography.
    */
   --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --font-family-serif: "Times New Roman", times, serif;
   --line-height: 1.5;
   --line-height-heading: 1.3;
   --line-height-form-label: calc(18rem / 16); /* 18px */