diff --git a/packages/palette-docs/content/docs/tokens/Typography.mdx b/packages/palette-docs/content/docs/tokens/Typography.mdx
index c808d6c5f..173c6a6fb 100644
--- a/packages/palette-docs/content/docs/tokens/Typography.mdx
+++ b/packages/palette-docs/content/docs/tokens/Typography.mdx
@@ -9,152 +9,26 @@ should be contextually applied. The goal is for this system to increase overall
 design consistency for our product as well as to increase efficiency for both
 the design and engineering teams.
 
-<Playground showToggle={true} title="Sans" expanded={true}>
+<Playground showToggle={true} title="Text" expanded={true}>
   <Flex mt={4} justifyContent="space-between">
     <Box>
-      <Sans size="16">Sans 16</Sans>
-      <Sans size="14">Sans 14</Sans>
-      <Sans size="12">Sans 12</Sans>
-      <Sans size="10">Sans 10</Sans>
-      <Sans size="8">Sans 8</Sans>
-      <Sans size="6">Sans 6</Sans>
-      <Sans size="5t">Sans 5t</Sans>
-      <Sans size="5">Sans 5</Sans>
-      <Sans size="4t">Sans 4t</Sans>
-      <Sans size="4">Sans 4</Sans>
-      <Sans size="3t">Sans 3t</Sans>
-      <Sans size="3">Sans 3</Sans>
-      <Sans size="2">Sans 2</Sans>
-      <Sans size="1">Sans 1</Sans>
+      <Text variant="largeTitle">Text largeTitle</Text>
+      <Text variant="title">Text title</Text>
+      <Text variant="subtitle">Text subtitle</Text>
+      <Text variant="text">Text text</Text>
+      <Text variant="mediumText">Text mediumText</Text>
+      <Text variant="caption">Text caption</Text>
+      <Text variant="small">Text small</Text>
     </Box>
-    <Flex width="50%" px={2} alignItems="center">
-      <BorderBox>
-        <Sans size="5">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </Sans>
-      </BorderBox>
-    </Flex>
-  </Flex>
-</Playground>
-
-<Spacer my={4} />
-
-<Playground showToggle={true} title="Sans with unstable_trackIn (narrow)" expanded={false}>
-  <Flex mt={4} justifyContent="space-between">
-    <Box>
-      <Sans size="16" unstable_trackIn>Sans 16</Sans>
-      <Sans size="14" unstable_trackIn>Sans 14</Sans>
-      <Sans size="12" unstable_trackIn>Sans 12</Sans>
-      <Sans size="10" unstable_trackIn>Sans 10</Sans>
-      <Sans size="8" unstable_trackIn>Sans 8</Sans>
-      <Sans size="6" unstable_trackIn>Sans 6</Sans>
-      <Sans size="5t" unstable_trackIn>Sans 5t</Sans>
-      <Sans size="5" unstable_trackIn>Sans 5</Sans>
-      <Sans size="4t" unstable_trackIn>Sans 4t</Sans>
-      <Sans size="4" unstable_trackIn>Sans 4</Sans>
-      <Sans size="3t" unstable_trackIn>Sans 3t</Sans>
-      <Sans size="3" unstable_trackIn>Sans 3</Sans>
-      <Sans size="2" unstable_trackIn>Sans 2</Sans>
-      <Sans size="1" unstable_trackIn>Sans 1</Sans>
-    </Box>
-    <Flex width="50%" px={2} alignItems="center">
-      <BorderBox>
-        <Sans size="5">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </Sans>
-      </BorderBox>
-    </Flex>
-  </Flex>
-</Playground>
-
-<Spacer my={4} />
-
-<Playground showToggle={true} title="Serif" expanded={true}>
-  <Flex justifyContent="space-between">
-    <Box>
-      <Serif size="12">Serif 12</Serif>
-      <Serif size="10">Serif 10</Serif>
-      <Serif size="8">Serif 8</Serif>
-      <Serif size="6">Serif 6</Serif>
-      <Serif size="5t">Serif 5t</Serif>
-      <Serif size="5">Serif 5</Serif>
-      <Serif size="4t">Serif 4t</Serif>
-      <Serif size="4">Serif 4</Serif>
-      <Serif size="3t">Serif 3t</Serif>
-      <Serif size="3">Serif 3</Serif>
-      <Serif size="2">Serif 2</Serif>
-      <Serif size="1">Serif 1</Serif>
-    </Box>
-    <Flex width="50%" px={2} alignItems="center">
-      <BorderBox>
-        <Serif size="5">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </Serif>
-      </BorderBox>
-    </Flex>
-  </Flex>
-</Playground>
-
-<Spacer my={4} />
 
-<Playground showToggle={true} title="Serif with unstable_trackIn (narrow)" expanded={false}>
-  <Flex justifyContent="space-between">
-    <Box>
-      <Serif size="12" unstable_trackIn>Serif 12</Serif>
-      <Serif size="10" unstable_trackIn>Serif 10</Serif>
-      <Serif size="8" unstable_trackIn>Serif 8</Serif>
-      <Serif size="6" unstable_trackIn>Serif 6</Serif>
-      <Serif size="5t" unstable_trackIn>Serif 5t</Serif>
-      <Serif size="5" unstable_trackIn>Serif 5</Serif>
-      <Serif size="4t" unstable_trackIn>Serif 4t</Serif>
-      <Serif size="4" unstable_trackIn>Serif 4</Serif>
-      <Serif size="3t" unstable_trackIn>Serif 3t</Serif>
-      <Serif size="3" unstable_trackIn>Serif 3</Serif>
-      <Serif size="2" unstable_trackIn>Serif 2</Serif>
-      <Serif size="1" unstable_trackIn>Serif 1</Serif>
-    </Box>
     <Flex width="50%" px={2} alignItems="center">
       <BorderBox>
-        <Serif size="5">
+        <Text variant="text">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </Serif>
+        </Text>
       </BorderBox>
     </Flex>
-  </Flex>
-</Playground>
 
-<Spacer my={4} />
-
-<Playground
-  showToggle={true}
-  title="Specifying the element type"
-  expanded={true}
->
-  <Flex justifyContent="space-between" flexDirection="column">
-    <Box>
-      <Serif size="8" element="h1">
-        This is an h1
-      </Serif>
-      <Serif size="6" element="h2">
-        This is an h2
-      </Serif>
-      <Sans size="4" element="p">
-        And this content is all within a p.
-      </Sans>
-    </Box>
-  </Flex>
-</Playground>
-
-<Playground showToggle={true} title="Using endash in ranges" expanded={true}>
-  <Flex justifyContent="space-between" flexDirection="column">
-    <Box>
-      <Serif size="8" element="h1">
-        {range("$10k", "$20k")}
-      </Serif>
-    </Box>
   </Flex>
 </Playground>
diff --git a/packages/palette/src/elements/Text/Text.story.tsx b/packages/palette/src/elements/Text/Text.story.tsx
index e6d9814f0..f9a2fae7c 100644
--- a/packages/palette/src/elements/Text/Text.story.tsx
+++ b/packages/palette/src/elements/Text/Text.story.tsx
@@ -131,7 +131,6 @@ storiesOf("Components/Text", module)
         letterSpacing: "tightest",
       },
       {
-        fontFamily: "serif",
         fontSize: "70px",
         lineHeight: "solid",
         letterSpacing: "tight",
@@ -143,13 +142,15 @@ storiesOf("Components/Text", module)
         letterSpacing: "tightest",
       },
       {
-        fontFamily: "serif",
         fontSize: "55px",
         lineHeight: "solid",
         letterSpacing: "tightest",
       },
-      { fontFamily: "serif" },
-    ]
+      {
+        variant: 'text',
+        lineHeight: 'solid'
+      }
+    ] as const
 
     return (
       <Table>
@@ -181,3 +182,15 @@ storiesOf("Components/Text", module)
       </Table>
     )
   })
+  .add("overflowEllipsis", () => {
+    return (
+      <Text variant="text" overflowEllipsis>
+        All their equipment and instruments are alive. All their equipment and
+        instruments are alive. All their equipment and instruments are alive.
+        All their equipment and instruments are alive. All their equipment and
+        instruments are alive. All their equipment and instruments are alive.
+        All their equipment and instruments are alive. All their equipment and
+        instruments are alive. All their equipment and instruments are alive.
+      </Text>
+    )
+  })
diff --git a/packages/palette/src/elements/Text/Text.tsx b/packages/palette/src/elements/Text/Text.tsx
index 838a05631..c51e2a825 100644
--- a/packages/palette/src/elements/Text/Text.tsx
+++ b/packages/palette/src/elements/Text/Text.tsx
@@ -1,20 +1,27 @@
 import { themeGet } from "@styled-system/theme-get"
+import styled, { css } from "styled-components"
 import { variant } from "styled-system"
-import { styled as primitives } from "../../platform/primitives"
 import { textMixin, TextProps } from "./Text.shared"
 import { TEXT_VARIANTS } from "./tokens"
 
-/**
- * Text
- */
-export const Text = primitives.Text<TextProps>`
+/** Adds ellipsis to overflowing text */
+export const overflowEllipsisMixin = css`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`
+
+/** Text */
+export const Text = styled.div<TextProps & { overflowEllipsis?: boolean }>`
   ${variant({ variants: TEXT_VARIANTS.small })}
+  ${textMixin}
 
   @media (min-width: ${themeGet("breakpoints.0")}) {
     ${variant({ variants: TEXT_VARIANTS.large })}
+    ${textMixin}
   }
 
-  ${textMixin}
+  ${({ overflowEllipsis }) => overflowEllipsis && overflowEllipsisMixin}
 `
 
 Text.displayName = "Text"
diff --git a/packages/palette/src/elements/Text/tokens.ts b/packages/palette/src/elements/Text/tokens.ts
index 6ecd8be9d..a25e4fe7a 100644
--- a/packages/palette/src/elements/Text/tokens.ts
+++ b/packages/palette/src/elements/Text/tokens.ts
@@ -5,5 +5,4 @@ export * from "./tokens.shared"
  */
 export const TEXT_FONTS = {
   sans: '"ll-unica77", "Helvetica Neue", Helvetica, Arial, sans-serif',
-  serif: '"adobe-garamond-pro", "Times New Roman", Times, serif',
 }