From a574c4841d6558bdf35d778ae04ce9d9cdee89a4 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 2 Feb 2024 11:24:02 -0800
Subject: [PATCH] Fix nested `<p>` DOM validation error on page

---
 src-docs/src/views/theme/color/tokens.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/theme/color/tokens.tsx b/src-docs/src/views/theme/color/tokens.tsx
index 4d58a2c09bd1..cf9433c7545f 100644
--- a/src-docs/src/views/theme/color/tokens.tsx
+++ b/src-docs/src/views/theme/color/tokens.tsx
@@ -32,8 +32,8 @@ export const colorsInfo = {
   title: 'Colors',
   notice: <ThemeNotice />,
   showThemeLanguageToggle: true,
-  description: (
-    <>
+  intro: (
+    <EuiText grow={false}>
       <p>
         Elastic UI builds with a very limited palette. It uses a core set of
         three colors with a green / orange / red qualitative set and combined
@@ -46,7 +46,7 @@ export const colorsInfo = {
         their <strong>evaluated</strong> value but by their{' '}
         <strong>purpose</strong>.
       </p>
-    </>
+    </EuiText>
   ),
 };