From ceba1ef67bd93eb2bd9995294a00bd558fd2cef1 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 22 Feb 2024 12:20:17 -0300
Subject: [PATCH 1/8] update the Why and Responsive demos

---
 .../data/system/getting-started/usage/Demo.js | 54 ++++++++++---------
 .../system/getting-started/usage/Demo.tsx     | 54 ++++++++++---------
 docs/data/system/getting-started/usage/Why.js | 19 ++++---
 .../data/system/getting-started/usage/Why.tsx | 19 ++++---
 4 files changed, 80 insertions(+), 66 deletions(-)

diff --git a/docs/data/system/getting-started/usage/Demo.js b/docs/data/system/getting-started/usage/Demo.js
index 1a667fb6092020..db1884da1eb7cd 100644
--- a/docs/data/system/getting-started/usage/Demo.js
+++ b/docs/data/system/getting-started/usage/Demo.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import { alpha } from '@mui/material/styles';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { alpha } from '@mui/system';
+import Box from '@mui/system/Box';
 
 export default function Demo() {
   return (
@@ -10,11 +9,12 @@ export default function Demo() {
         display: 'flex',
         flexDirection: { xs: 'column', md: 'row' },
         alignItems: 'center',
-        bgcolor: 'background.paper',
-        overflow: 'hidden',
-        borderRadius: '12px',
-        boxShadow: 1,
-        fontWeight: 'bold',
+        bgcolor: 'background.default',
+        border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: 2,
+        boxShadow: 2,
+        overflow: 'clip',
       }}
     >
       <Box
@@ -30,38 +30,42 @@ export default function Demo() {
       />
       <Box
         sx={{
+          p: 3,
+          minWidth: { md: 350 },
           display: 'flex',
           flexDirection: 'column',
           alignItems: { xs: 'center', md: 'flex-start' },
-          m: 3,
-          minWidth: { md: 350 },
+          gap: 0.5,
         }}
       >
-        <Box component="span" sx={{ fontSize: 16, mt: 1 }}>
+        <Box component="span" sx={{ fontSize: 14, color: 'text.secondary' }}>
           123 Main St, Phoenix AZ
         </Box>
-        <Box component="span" sx={{ color: 'primary.main', fontSize: 22 }}>
+        <Box
+          component="span"
+          sx={{ color: 'primary.main', fontSize: 24, fontWeight: 'bold' }}
+        >
           $280,000 — $310,000
         </Box>
         <Box
           sx={{
-            mt: 1.5,
-            p: 0.5,
-            backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),
-            borderRadius: '5px',
-            color: 'primary.main',
-            fontWeight: 'medium',
+            py: 0.5,
+            px: 1,
+            backgroundColor: (theme) => alpha(theme.palette.success.dark, 0.1),
+            borderRadius: 10,
             display: 'flex',
-            fontSize: 12,
             alignItems: 'center',
-            '& svg': {
-              fontSize: 21,
-              mr: 0.5,
-            },
+            gap: 0.5,
+            border: '1px solid',
+            borderColor: (theme) => alpha(theme.palette.success.light, 0.1),
+            fontSize: 11,
+            fontWeight: 'bold',
+            letterSpacing: '.05rem',
+            textTransform: 'uppercase',
+            color: 'success.main',
           }}
         >
-          <ErrorOutlineIcon />
-          CONFIDENCE SCORE 85%
+          Confidence score: 85%
         </Box>
       </Box>
     </Box>
diff --git a/docs/data/system/getting-started/usage/Demo.tsx b/docs/data/system/getting-started/usage/Demo.tsx
index 1a667fb6092020..db1884da1eb7cd 100644
--- a/docs/data/system/getting-started/usage/Demo.tsx
+++ b/docs/data/system/getting-started/usage/Demo.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import { alpha } from '@mui/material/styles';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { alpha } from '@mui/system';
+import Box from '@mui/system/Box';
 
 export default function Demo() {
   return (
@@ -10,11 +9,12 @@ export default function Demo() {
         display: 'flex',
         flexDirection: { xs: 'column', md: 'row' },
         alignItems: 'center',
-        bgcolor: 'background.paper',
-        overflow: 'hidden',
-        borderRadius: '12px',
-        boxShadow: 1,
-        fontWeight: 'bold',
+        bgcolor: 'background.default',
+        border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: 2,
+        boxShadow: 2,
+        overflow: 'clip',
       }}
     >
       <Box
@@ -30,38 +30,42 @@ export default function Demo() {
       />
       <Box
         sx={{
+          p: 3,
+          minWidth: { md: 350 },
           display: 'flex',
           flexDirection: 'column',
           alignItems: { xs: 'center', md: 'flex-start' },
-          m: 3,
-          minWidth: { md: 350 },
+          gap: 0.5,
         }}
       >
-        <Box component="span" sx={{ fontSize: 16, mt: 1 }}>
+        <Box component="span" sx={{ fontSize: 14, color: 'text.secondary' }}>
           123 Main St, Phoenix AZ
         </Box>
-        <Box component="span" sx={{ color: 'primary.main', fontSize: 22 }}>
+        <Box
+          component="span"
+          sx={{ color: 'primary.main', fontSize: 24, fontWeight: 'bold' }}
+        >
           $280,000 — $310,000
         </Box>
         <Box
           sx={{
-            mt: 1.5,
-            p: 0.5,
-            backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),
-            borderRadius: '5px',
-            color: 'primary.main',
-            fontWeight: 'medium',
+            py: 0.5,
+            px: 1,
+            backgroundColor: (theme) => alpha(theme.palette.success.dark, 0.1),
+            borderRadius: 10,
             display: 'flex',
-            fontSize: 12,
             alignItems: 'center',
-            '& svg': {
-              fontSize: 21,
-              mr: 0.5,
-            },
+            gap: 0.5,
+            border: '1px solid',
+            borderColor: (theme) => alpha(theme.palette.success.light, 0.1),
+            fontSize: 11,
+            fontWeight: 'bold',
+            letterSpacing: '.05rem',
+            textTransform: 'uppercase',
+            color: 'success.main',
           }}
         >
-          <ErrorOutlineIcon />
-          CONFIDENCE SCORE 85%
+          Confidence score: 85%
         </Box>
       </Box>
     </Box>
diff --git a/docs/data/system/getting-started/usage/Why.js b/docs/data/system/getting-started/usage/Why.js
index a2dc74962d8e61..6bce45f22b7107 100644
--- a/docs/data/system/getting-started/usage/Why.js
+++ b/docs/data/system/getting-started/usage/Why.js
@@ -1,16 +1,18 @@
 import * as React from 'react';
 import TrendingUpIcon from '@mui/icons-material/TrendingUp';
-import Box from '@mui/material/Box';
+import Box from '@mui/system/Box';
 
 export default function Why() {
   return (
     <Box
       sx={{
-        bgcolor: 'background.paper',
-        boxShadow: 1,
-        borderRadius: 1,
         p: 2,
         minWidth: 300,
+        border: '1px solid',
+        borderColor: 'divider',
+        bgcolor: 'background.default',
+        boxShadow: 2,
+        borderRadius: 2,
       }}
     >
       <Box sx={{ color: 'text.secondary' }}>Sessions</Box>
@@ -23,15 +25,16 @@ export default function Why() {
       />
       <Box
         sx={{
-          color: 'success.dark',
           display: 'inline',
-          fontWeight: 'medium',
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: 'success.dark',
           mx: 0.5,
         }}
       >
-        18.77%
+        18.7%
       </Box>
-      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 12 }}>
+      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 14 }}>
         vs. last week
       </Box>
     </Box>
diff --git a/docs/data/system/getting-started/usage/Why.tsx b/docs/data/system/getting-started/usage/Why.tsx
index a2dc74962d8e61..6bce45f22b7107 100644
--- a/docs/data/system/getting-started/usage/Why.tsx
+++ b/docs/data/system/getting-started/usage/Why.tsx
@@ -1,16 +1,18 @@
 import * as React from 'react';
 import TrendingUpIcon from '@mui/icons-material/TrendingUp';
-import Box from '@mui/material/Box';
+import Box from '@mui/system/Box';
 
 export default function Why() {
   return (
     <Box
       sx={{
-        bgcolor: 'background.paper',
-        boxShadow: 1,
-        borderRadius: 1,
         p: 2,
         minWidth: 300,
+        border: '1px solid',
+        borderColor: 'divider',
+        bgcolor: 'background.default',
+        boxShadow: 2,
+        borderRadius: 2,
       }}
     >
       <Box sx={{ color: 'text.secondary' }}>Sessions</Box>
@@ -23,15 +25,16 @@ export default function Why() {
       />
       <Box
         sx={{
-          color: 'success.dark',
           display: 'inline',
-          fontWeight: 'medium',
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: 'success.dark',
           mx: 0.5,
         }}
       >
-        18.77%
+        18.7%
       </Box>
-      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 12 }}>
+      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 14 }}>
         vs. last week
       </Box>
     </Box>

From 6fb993f1d4b6c5b58ecf877eaa4ad62ba1d1f9bf Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 22 Feb 2024 12:20:25 -0300
Subject: [PATCH 2/8] small edits to the Usage page

---
 .../system/getting-started/usage/usage.md     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/data/system/getting-started/usage/usage.md b/docs/data/system/getting-started/usage/usage.md
index d37f9a66c96814..693fa0582808d5 100644
--- a/docs/data/system/getting-started/usage/usage.md
+++ b/docs/data/system/getting-started/usage/usage.md
@@ -152,18 +152,18 @@ It works with both Emotion and styled-components.
 
 #### Cons
 
-- Runtime performance takes a hit.
+Runtime performance takes a hit.
 
-  | Benchmark case                    | Code snippet          | Time normalized |
-  | :-------------------------------- | :-------------------- | --------------: |
-  | a. Render 1,000 primitives        | `<div className="…">` |           100ms |
-  | b. Render 1,000 components        | `<Div>`               |           112ms |
-  | c. Render 1,000 styled components | `<StyledDiv>`         |           181ms |
-  | d. Render 1,000 Box               | `<Box sx={…}>`        |           296ms |
+| Benchmark case                    | Code snippet          | Time normalized |
+| :-------------------------------- | :-------------------- | --------------: |
+| a. Render 1,000 primitives        | `<div className="…">` |           100ms |
+| b. Render 1,000 components        | `<Div>`               |           112ms |
+| c. Render 1,000 styled components | `<StyledDiv>`         |           181ms |
+| d. Render 1,000 Box               | `<Box sx={…}>`        |           296ms |
 
 <!-- #default-branch-switch -->
 
-_Head to the [benchmark folder](https://github.com/mui/material-ui/tree/master/benchmark/browser) for a reproduction of these metrics._
+Visit the [benchmark folder](https://github.com/mui/material-ui/tree/master/benchmark/browser) for a reproduction of the metrics above.
 
 We believe that for most use cases it's fast enough, but there are simple workarounds when performance becomes critical.
 For instance, when rendering a list with many items, you can use a CSS child selector to have a single "style injection" point (using d. for the wrapper and a. for each item).
@@ -183,7 +183,7 @@ The `sx` prop can be used in four different locations:
 
 ### Core components
 
-All Material UI, and Joy UI components support the `sx` prop.
+All Material UI and Joy UI components support the `sx` prop.
 
 ### Box
 
@@ -202,7 +202,7 @@ const Div = styled('div')``;
 
 ### Any element with the babel plugin
 
-TODO [#23220](https://github.com/mui/material-ui/issues/23220).
+Visit [the to-do GitHub issue](https://github.com/mui/material-ui/issues/23220) about it.
 
 ## How to use MUI System
 

From e2d583bdfc992745697d2cb7bd8d140daad67a6f Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 22 Feb 2024 15:08:29 -0300
Subject: [PATCH 3/8] trigger CI checks


From a1900999e14a54c8e41178c257025ff2fb97bdec Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 22 Feb 2024 19:15:57 -0300
Subject: [PATCH 4/8] Sam's review

---
 docs/data/system/getting-started/usage/usage.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/system/getting-started/usage/usage.md b/docs/data/system/getting-started/usage/usage.md
index 693fa0582808d5..611d8a91a22eba 100644
--- a/docs/data/system/getting-started/usage/usage.md
+++ b/docs/data/system/getting-started/usage/usage.md
@@ -202,7 +202,7 @@ const Div = styled('div')``;
 
 ### Any element with the babel plugin
 
-Visit [the to-do GitHub issue](https://github.com/mui/material-ui/issues/23220) about it.
+Visit [the open GitHub issue](https://github.com/mui/material-ui/issues/23220) regarding this topic to learn more.
 
 ## How to use MUI System
 

From 2b8b945ccbbcdbaa4e41b62970e64231b9b75784 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 22 Feb 2024 19:17:02 -0300
Subject: [PATCH 5/8] Olivier's review: remove box-shadow

---
 docs/data/system/getting-started/usage/Demo.js  | 1 -
 docs/data/system/getting-started/usage/Demo.tsx | 1 -
 docs/data/system/getting-started/usage/Why.js   | 1 -
 docs/data/system/getting-started/usage/Why.tsx  | 1 -
 4 files changed, 4 deletions(-)

diff --git a/docs/data/system/getting-started/usage/Demo.js b/docs/data/system/getting-started/usage/Demo.js
index db1884da1eb7cd..d101e5e2407769 100644
--- a/docs/data/system/getting-started/usage/Demo.js
+++ b/docs/data/system/getting-started/usage/Demo.js
@@ -13,7 +13,6 @@ export default function Demo() {
         border: '1px solid',
         borderColor: 'divider',
         borderRadius: 2,
-        boxShadow: 2,
         overflow: 'clip',
       }}
     >
diff --git a/docs/data/system/getting-started/usage/Demo.tsx b/docs/data/system/getting-started/usage/Demo.tsx
index db1884da1eb7cd..d101e5e2407769 100644
--- a/docs/data/system/getting-started/usage/Demo.tsx
+++ b/docs/data/system/getting-started/usage/Demo.tsx
@@ -13,7 +13,6 @@ export default function Demo() {
         border: '1px solid',
         borderColor: 'divider',
         borderRadius: 2,
-        boxShadow: 2,
         overflow: 'clip',
       }}
     >
diff --git a/docs/data/system/getting-started/usage/Why.js b/docs/data/system/getting-started/usage/Why.js
index 6bce45f22b7107..bd0e9a31216690 100644
--- a/docs/data/system/getting-started/usage/Why.js
+++ b/docs/data/system/getting-started/usage/Why.js
@@ -11,7 +11,6 @@ export default function Why() {
         border: '1px solid',
         borderColor: 'divider',
         bgcolor: 'background.default',
-        boxShadow: 2,
         borderRadius: 2,
       }}
     >
diff --git a/docs/data/system/getting-started/usage/Why.tsx b/docs/data/system/getting-started/usage/Why.tsx
index 6bce45f22b7107..bd0e9a31216690 100644
--- a/docs/data/system/getting-started/usage/Why.tsx
+++ b/docs/data/system/getting-started/usage/Why.tsx
@@ -11,7 +11,6 @@ export default function Why() {
         border: '1px solid',
         borderColor: 'divider',
         bgcolor: 'background.default',
-        boxShadow: 2,
         borderRadius: 2,
       }}
     >

From ee7b9c336bbca4e30a9c83171157f1f6d95c4d96 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 26 Feb 2024 08:56:19 -0300
Subject: [PATCH 6/8] trigger CI checks


From ef646ea9f8aa9748b7451c8dcc5a5d7b769d3f11 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 4 Mar 2024 12:28:55 -0300
Subject: [PATCH 7/8] use the main color key instead of light/dark

---
 docs/data/system/getting-started/usage/Demo.js  | 4 ++--
 docs/data/system/getting-started/usage/Demo.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/data/system/getting-started/usage/Demo.js b/docs/data/system/getting-started/usage/Demo.js
index d101e5e2407769..a566306cf4ea15 100644
--- a/docs/data/system/getting-started/usage/Demo.js
+++ b/docs/data/system/getting-started/usage/Demo.js
@@ -50,13 +50,13 @@ export default function Demo() {
           sx={{
             py: 0.5,
             px: 1,
-            backgroundColor: (theme) => alpha(theme.palette.success.dark, 0.1),
+            backgroundColor: (theme) => alpha(theme.palette.success.main, 0.1),
             borderRadius: 10,
             display: 'flex',
             alignItems: 'center',
             gap: 0.5,
             border: '1px solid',
-            borderColor: (theme) => alpha(theme.palette.success.light, 0.1),
+            borderColor: (theme) => alpha(theme.palette.success.main, 0.1),
             fontSize: 11,
             fontWeight: 'bold',
             letterSpacing: '.05rem',
diff --git a/docs/data/system/getting-started/usage/Demo.tsx b/docs/data/system/getting-started/usage/Demo.tsx
index d101e5e2407769..a566306cf4ea15 100644
--- a/docs/data/system/getting-started/usage/Demo.tsx
+++ b/docs/data/system/getting-started/usage/Demo.tsx
@@ -50,13 +50,13 @@ export default function Demo() {
           sx={{
             py: 0.5,
             px: 1,
-            backgroundColor: (theme) => alpha(theme.palette.success.dark, 0.1),
+            backgroundColor: (theme) => alpha(theme.palette.success.main, 0.1),
             borderRadius: 10,
             display: 'flex',
             alignItems: 'center',
             gap: 0.5,
             border: '1px solid',
-            borderColor: (theme) => alpha(theme.palette.success.light, 0.1),
+            borderColor: (theme) => alpha(theme.palette.success.main, 0.1),
             fontSize: 11,
             fontWeight: 'bold',
             letterSpacing: '.05rem',

From d9f54a8cab10e821c6ee5b11c66acc36ee05353a Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 4 Mar 2024 16:24:46 -0300
Subject: [PATCH 8/8] update the demos to use rem and hardcoded color values

---
 docs/data/system/getting-started/usage/Demo.js  | 11 +++++------
 docs/data/system/getting-started/usage/Demo.tsx | 11 +++++------
 docs/data/system/getting-started/usage/Why.js   | 10 ++++++----
 docs/data/system/getting-started/usage/Why.tsx  | 10 ++++++----
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/docs/data/system/getting-started/usage/Demo.js b/docs/data/system/getting-started/usage/Demo.js
index a566306cf4ea15..f07c23b3a7cc45 100644
--- a/docs/data/system/getting-started/usage/Demo.js
+++ b/docs/data/system/getting-started/usage/Demo.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { alpha } from '@mui/system';
 import Box from '@mui/system/Box';
 
 export default function Demo() {
@@ -37,12 +36,12 @@ export default function Demo() {
           gap: 0.5,
         }}
       >
-        <Box component="span" sx={{ fontSize: 14, color: 'text.secondary' }}>
+        <Box component="span" sx={{ fontSize: '0.875rem', color: 'text.secondary' }}>
           123 Main St, Phoenix AZ
         </Box>
         <Box
           component="span"
-          sx={{ color: 'primary.main', fontSize: 24, fontWeight: 'bold' }}
+          sx={{ color: 'primary.main', fontSize: '1.5rem', fontWeight: 'bold' }}
         >
           $280,000 — $310,000
         </Box>
@@ -50,14 +49,14 @@ export default function Demo() {
           sx={{
             py: 0.5,
             px: 1,
-            backgroundColor: (theme) => alpha(theme.palette.success.main, 0.1),
+            backgroundColor: 'rgba(46, 125, 50, 0.1)',
             borderRadius: 10,
             display: 'flex',
             alignItems: 'center',
             gap: 0.5,
             border: '1px solid',
-            borderColor: (theme) => alpha(theme.palette.success.main, 0.1),
-            fontSize: 11,
+            borderColor: 'rgba(46, 125, 50, 0.1)',
+            fontSize: '0.7rem',
             fontWeight: 'bold',
             letterSpacing: '.05rem',
             textTransform: 'uppercase',
diff --git a/docs/data/system/getting-started/usage/Demo.tsx b/docs/data/system/getting-started/usage/Demo.tsx
index a566306cf4ea15..f07c23b3a7cc45 100644
--- a/docs/data/system/getting-started/usage/Demo.tsx
+++ b/docs/data/system/getting-started/usage/Demo.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { alpha } from '@mui/system';
 import Box from '@mui/system/Box';
 
 export default function Demo() {
@@ -37,12 +36,12 @@ export default function Demo() {
           gap: 0.5,
         }}
       >
-        <Box component="span" sx={{ fontSize: 14, color: 'text.secondary' }}>
+        <Box component="span" sx={{ fontSize: '0.875rem', color: 'text.secondary' }}>
           123 Main St, Phoenix AZ
         </Box>
         <Box
           component="span"
-          sx={{ color: 'primary.main', fontSize: 24, fontWeight: 'bold' }}
+          sx={{ color: 'primary.main', fontSize: '1.5rem', fontWeight: 'bold' }}
         >
           $280,000 — $310,000
         </Box>
@@ -50,14 +49,14 @@ export default function Demo() {
           sx={{
             py: 0.5,
             px: 1,
-            backgroundColor: (theme) => alpha(theme.palette.success.main, 0.1),
+            backgroundColor: 'rgba(46, 125, 50, 0.1)',
             borderRadius: 10,
             display: 'flex',
             alignItems: 'center',
             gap: 0.5,
             border: '1px solid',
-            borderColor: (theme) => alpha(theme.palette.success.main, 0.1),
-            fontSize: 11,
+            borderColor: 'rgba(46, 125, 50, 0.1)',
+            fontSize: '0.7rem',
             fontWeight: 'bold',
             letterSpacing: '.05rem',
             textTransform: 'uppercase',
diff --git a/docs/data/system/getting-started/usage/Why.js b/docs/data/system/getting-started/usage/Why.js
index bd0e9a31216690..dd6d81e8faa518 100644
--- a/docs/data/system/getting-started/usage/Why.js
+++ b/docs/data/system/getting-started/usage/Why.js
@@ -15,17 +15,19 @@ export default function Why() {
       }}
     >
       <Box sx={{ color: 'text.secondary' }}>Sessions</Box>
-      <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'medium' }}>
+      <Box
+        sx={{ color: 'text.primary', fontSize: '2.125rem', fontWeight: 'medium' }}
+      >
         98.3 K
       </Box>
       <Box
         component={TrendingUpIcon}
-        sx={{ color: 'success.dark', fontSize: 16, verticalAlign: 'sub' }}
+        sx={{ color: 'success.dark', fontSize: '1rem', verticalAlign: 'sub' }}
       />
       <Box
         sx={{
           display: 'inline',
-          fontSize: 14,
+          fontSize: '0.875rem',
           fontWeight: 'bold',
           color: 'success.dark',
           mx: 0.5,
@@ -33,7 +35,7 @@ export default function Why() {
       >
         18.7%
       </Box>
-      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 14 }}>
+      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: '0.875rem' }}>
         vs. last week
       </Box>
     </Box>
diff --git a/docs/data/system/getting-started/usage/Why.tsx b/docs/data/system/getting-started/usage/Why.tsx
index bd0e9a31216690..dd6d81e8faa518 100644
--- a/docs/data/system/getting-started/usage/Why.tsx
+++ b/docs/data/system/getting-started/usage/Why.tsx
@@ -15,17 +15,19 @@ export default function Why() {
       }}
     >
       <Box sx={{ color: 'text.secondary' }}>Sessions</Box>
-      <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'medium' }}>
+      <Box
+        sx={{ color: 'text.primary', fontSize: '2.125rem', fontWeight: 'medium' }}
+      >
         98.3 K
       </Box>
       <Box
         component={TrendingUpIcon}
-        sx={{ color: 'success.dark', fontSize: 16, verticalAlign: 'sub' }}
+        sx={{ color: 'success.dark', fontSize: '1rem', verticalAlign: 'sub' }}
       />
       <Box
         sx={{
           display: 'inline',
-          fontSize: 14,
+          fontSize: '0.875rem',
           fontWeight: 'bold',
           color: 'success.dark',
           mx: 0.5,
@@ -33,7 +35,7 @@ export default function Why() {
       >
         18.7%
       </Box>
-      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 14 }}>
+      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: '0.875rem' }}>
         vs. last week
       </Box>
     </Box>