diff --git a/packages/yoga/src/BottomSheet/web/__snapshots__/BottomSheet.test.jsx.snap b/packages/yoga/src/BottomSheet/web/__snapshots__/BottomSheet.test.jsx.snap
index 1e0cb17622..cd1ade5224 100644
--- a/packages/yoga/src/BottomSheet/web/__snapshots__/BottomSheet.test.jsx.snap
+++ b/packages/yoga/src/BottomSheet/web/__snapshots__/BottomSheet.test.jsx.snap
@@ -1,22 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<BottomSheet /> should match snapshot 1`] = `
-.c4 {
-  margin-bottom: 24px;
-  color: #231B22;
-  font-size: 24px;
-  font-weight: 500;
-  text-align: center;
-}
-
-.c6 {
-  margin-bottom: 32px;
-  color: #6B6B78;
-  font-size: 16px;
-  font-weight: 400;
-  text-align: center;
-}
-
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -91,6 +75,30 @@ exports[`<BottomSheet /> should match snapshot 1`] = `
   fill: #FFFFFF;
 }
 
+.c4 {
+  margin: 0;
+  padding: 0;
+  font-size: 24px;
+  line-height: 32px;
+  color: #231B22;
+  font-family: Rubik;
+  font-weight: 500;
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.c6 {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  line-height: 24px;
+  color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
+  margin-bottom: 32px;
+  text-align: center;
+}
+
 .c1 {
   padding: 16px  16px 16px  16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
@@ -199,16 +207,14 @@ exports[`<BottomSheet /> should match snapshot 1`] = `
         >
           <header
             class="c4 c5"
-            color="text.primary"
           >
             Title
           </header>
-          <div
+          <p
             class="c6 c7"
-            color="text.secondary"
           >
             Subtitle
-          </div>
+          </p>
           <footer
             class="c8 c9"
             d="flex"
diff --git a/packages/yoga/src/Dialog/web/Content.jsx b/packages/yoga/src/Dialog/web/Content.jsx
index 497488f9f7..5fa81512ea 100644
--- a/packages/yoga/src/Dialog/web/Content.jsx
+++ b/packages/yoga/src/Dialog/web/Content.jsx
@@ -1,16 +1,7 @@
 import React from 'react';
-import Box from '../../Box';
+import Text from '../../Text';
 
-const Content = props => (
-  <Box
-    ta="center"
-    color="text.secondary"
-    fw="regular"
-    fs="medium"
-    mb="xlarge"
-    {...props}
-  />
-);
+const Content = props => <Text.Body1 ta="center" mb="xlarge" {...props} />;
 
 Content.displayName = 'Dialog.Content';
 
diff --git a/packages/yoga/src/Dialog/web/Header.jsx b/packages/yoga/src/Dialog/web/Header.jsx
index b706a66a3c..25ca8a29a1 100644
--- a/packages/yoga/src/Dialog/web/Header.jsx
+++ b/packages/yoga/src/Dialog/web/Header.jsx
@@ -1,16 +1,8 @@
 import React from 'react';
-import Box from '../../Box';
+import Text from '../../Text';
 
 const Header = props => (
-  <Box
-    as="header"
-    ta="center"
-    color="text.primary"
-    fw="medium"
-    fs="xlarge"
-    mb="large"
-    {...props}
-  />
+  <Text.H4 bold as="header" ta="center" mb="large" {...props} />
 );
 
 Header.displayName = 'Dialog.Header';
diff --git a/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap b/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap
index 6588983b3a..1ad9dfcb2a 100644
--- a/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap
+++ b/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap
@@ -1,22 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Dialog /> should match snapshot 1`] = `
-.c3 {
-  margin-bottom: 24px;
-  color: #231B22;
-  font-size: 24px;
-  font-weight: 500;
-  text-align: center;
-}
-
-.c4 {
-  margin-bottom: 32px;
-  color: #6B6B78;
-  font-size: 16px;
-  font-weight: 400;
-  text-align: center;
-}
-
 .c5 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -91,6 +75,30 @@ exports[`<Dialog /> should match snapshot 1`] = `
   fill: #FFFFFF;
 }
 
+.c3 {
+  margin: 0;
+  padding: 0;
+  font-size: 24px;
+  line-height: 32px;
+  color: #231B22;
+  font-family: Rubik;
+  font-weight: 500;
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.c4 {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  line-height: 24px;
+  color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
+  margin-bottom: 32px;
+  text-align: center;
+}
+
 .c1 {
   padding: 16px  16px 16px  16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
@@ -152,16 +160,14 @@ exports[`<Dialog /> should match snapshot 1`] = `
         >
           <header
             class="c3"
-            color="text.primary"
           >
             Title
           </header>
-          <div
+          <p
             class="c4"
-            color="text.secondary"
           >
             Subtitle
-          </div>
+          </p>
           <footer
             class="c5"
             d="flex"
@@ -182,23 +188,7 @@ exports[`<Dialog /> should match snapshot 1`] = `
 exports[`<Dialog /> should match snapshot with close button 1`] = `
 <body>
   <div />
-  .c7 {
-  margin-bottom: 24px;
-  color: #231B22;
-  font-size: 24px;
-  font-weight: 500;
-  text-align: center;
-}
-
-.c8 {
-  margin-bottom: 32px;
-  color: #6B6B78;
-  font-size: 16px;
-  font-weight: 400;
-  text-align: center;
-}
-
-.c9 {
+  .c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -381,6 +371,30 @@ exports[`<Dialog /> should match snapshot with close button 1`] = `
   transition: fill 0.2s;
 }
 
+.c7 {
+  margin: 0;
+  padding: 0;
+  font-size: 24px;
+  line-height: 32px;
+  color: #231B22;
+  font-family: Rubik;
+  font-weight: 500;
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.c8 {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  line-height: 24px;
+  color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
+  margin-bottom: 32px;
+  text-align: center;
+}
+
 .c1 {
   padding: 16px  16px 16px  16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
@@ -471,16 +485,14 @@ exports[`<Dialog /> should match snapshot with close button 1`] = `
           </div>
           <header
             class="c7"
-            color="text.primary"
           >
             Title
           </header>
-          <div
+          <p
             class="c8"
-            color="text.secondary"
           >
             Subtitle
-          </div>
+          </p>
           <footer
             class="c9"
             d="flex"
diff --git a/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap b/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap
index b719784bd6..c8efcf4547 100644
--- a/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap
+++ b/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap
@@ -6,14 +6,6 @@ exports[`<Drawer /> should match snapshot 1`] = `
   color: #231B22;
 }
 
-.c5 {
-  margin-bottom: 32px;
-  color: #6B6B78;
-  font-size: 16px;
-  font-weight: 400;
-  text-align: center;
-}
-
 .c7 {
   width: 100%;
   display: -webkit-box;
@@ -84,6 +76,18 @@ exports[`<Drawer /> should match snapshot 1`] = `
   fill: #FFFFFF;
 }
 
+.c5 {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  line-height: 24px;
+  color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
+  margin-bottom: 32px;
+  text-align: center;
+}
+
 .c1 {
   padding: 16px  16px 16px  16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
@@ -180,12 +184,11 @@ exports[`<Drawer /> should match snapshot 1`] = `
           >
             Title
           </header>
-          <div
+          <p
             class="c5 c6"
-            color="text.secondary"
           >
             Subtitle
-          </div>
+          </p>
           <footer
             class="c7"
             d="flex"