diff --git a/dapp/public/acre.svg b/dapp/public/acre.svg
index 59e8dbf1c..557d8a50e 100644
--- a/dapp/public/acre.svg
+++ b/dapp/public/acre.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" rx="12" fill="black"/>
-<path d="M15.7333 14.5231L14.752 13.1692H9.248L8.26667 14.5231H11.3643V16H4V14.5231H6.49173L10.1781 9.47692H7.968V8H16.032V9.47692H13.8219L17.5083 14.5231H20V16H12.6443V14.5231H15.7419H15.7333ZM10.1781 11.881H13.8133L11.9957 9.39487L10.1781 11.881Z" fill="white"/>
+<circle cx="12" cy="12" r="12" fill="#F34900"/>
+<path d="M15.4926 14.1188L14.57 12.7961H9.39512L8.47246 14.1188H11.3848V15.5617H4.46094V14.1188H6.80367L10.2696 9.18897H8.19166V7.74609H15.7734V9.18897H13.6955L17.1614 14.1188H19.5042V15.5617H12.5883V14.1188H15.5007H15.4926ZM10.2696 11.5376H13.6874L11.9785 9.10881L10.2696 11.5376Z" fill="#F3E5C1"/>
 </svg>
diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx
index f38c6379e..ec668e5e8 100644
--- a/dapp/src/DApp.tsx
+++ b/dapp/src/DApp.tsx
@@ -5,6 +5,7 @@ import theme from "./theme"
 import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts"
 import Header from "./components/Header"
 import Overview from "./components/Overview"
+import GlobalStyles from "./components/GlobalStyles"
 
 function DApp() {
   useDetectThemeMode()
@@ -24,6 +25,7 @@ function DAppProviders() {
     <LedgerWalletAPIProvider>
       <WalletContextProvider>
         <ChakraProvider theme={theme}>
+          <GlobalStyles />
           <DApp />
         </ChakraProvider>
       </WalletContextProvider>
diff --git a/dapp/src/components/GlobalStyles/index.tsx b/dapp/src/components/GlobalStyles/index.tsx
new file mode 100644
index 000000000..80b36e6e8
--- /dev/null
+++ b/dapp/src/components/GlobalStyles/index.tsx
@@ -0,0 +1,47 @@
+import React from "react"
+import { Global } from "@emotion/react"
+
+import SegmentRegular from "../../fonts/Segment-Regular.otf"
+import SegmentMedium from "../../fonts/Segment-Medium.otf"
+import SegmentSemiBold from "../../fonts/Segment-SemiBold.otf"
+import SegmentBold from "../../fonts/Segment-Bold.otf"
+import SegmentBlack from "../../fonts/Segment-Black.otf"
+
+export default function GlobalStyles() {
+  return (
+    <Global
+      styles={`
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentRegular}) format("opentype");
+          font-weight: 400;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentMedium}) format("opentype");
+          font-weight: 500;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentSemiBold}) format("opentype");
+          font-weight: 600;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBold}) format("opentype");
+          font-weight: 700;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBlack}) format("opentype");
+          font-weight: 900;
+          font-style: normal;
+        }
+      `}
+    />
+  )
+}
diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
index 8b35a010b..bec7df49e 100644
--- a/dapp/src/components/Header/ConnectWallet.tsx
+++ b/dapp/src/components/Header/ConnectWallet.tsx
@@ -1,12 +1,5 @@
 import React from "react"
-import {
-  Button,
-  HStack,
-  Icon,
-  Text,
-  Tooltip,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { Button, HStack, Icon, Text, Tooltip } from "@chakra-ui/react"
 import { Account } from "@ledgerhq/wallet-api-client"
 import { Bitcoin, Ethereum, Info } from "../../static/icons"
 import { BITCOIN } from "../../constants"
@@ -30,8 +23,9 @@ function ConnectButton({
   account,
   requestAccount,
 }: ConnectButtonsProps) {
-  const styles = !account ? { color: "error", borderColor: "error" } : undefined
-  const colorRightIcon = useColorModeValue("black", "grey.80")
+  const styles = !account
+    ? { color: "red.400", borderColor: "red.400" }
+    : undefined
 
   return (
     <Button
@@ -42,7 +36,7 @@ function ConnectButton({
         !account ? (
           // TODO: Add correct text for tooltip
           <Tooltip label="Template">
-            <Icon as={rightIcon} color={colorRightIcon} />
+            <Icon as={rightIcon} color="grey.700" />
           </Tooltip>
         ) : undefined
       }
@@ -60,7 +54,7 @@ export default function ConnectWallet() {
 
   return (
     <HStack spacing={4}>
-      <HStack>
+      <HStack display={{ base: "none", md: "flex" }}>
         <Text>Balance</Text>
         <Text as="b">
           {!btcAccount || btcAccount?.balance.isZero()
diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx
index 838ed37b2..09d7fc1ed 100644
--- a/dapp/src/components/Header/index.tsx
+++ b/dapp/src/components/Header/index.tsx
@@ -1,11 +1,15 @@
 import React from "react"
-import { Flex } from "@chakra-ui/react"
+import { Flex, HStack, Icon } from "@chakra-ui/react"
 import ConnectWallet from "./ConnectWallet"
+import { AcreLogo } from "../../static/icons"
 
 export default function Header() {
   return (
-    <Flex justifyContent="end" p={6}>
-      <ConnectWallet />
-    </Flex>
+    <HStack as="header" p={6}>
+      <Icon as={AcreLogo} boxSize={20} />
+      <Flex ml="auto">
+        <ConnectWallet />
+      </Flex>
+    </HStack>
   )
 }
diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx
index e07b4a1c1..9b48a21bb 100644
--- a/dapp/src/components/Overview/PositionDetails.tsx
+++ b/dapp/src/components/Overview/PositionDetails.tsx
@@ -4,7 +4,6 @@ import {
   Button,
   Tooltip,
   Icon,
-  useColorModeValue,
   CardBody,
   Card,
   CardFooter,
@@ -22,7 +21,7 @@ export default function PositionDetails(props: CardProps) {
           <Text>Your positions</Text>
           {/* TODO: Add correct text for tooltip */}
           <Tooltip label="Template">
-            <Icon as={Info} color={useColorModeValue("black", "grey.80")} />
+            <Icon as={Info} color="grey.700" />
           </Tooltip>
         </HStack>
         <Text>
diff --git a/dapp/src/components/Overview/Statistics.tsx b/dapp/src/components/Overview/Statistics.tsx
index 221f22f60..8b9c5979e 100644
--- a/dapp/src/components/Overview/Statistics.tsx
+++ b/dapp/src/components/Overview/Statistics.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { CardBody, Card, CardProps } from "@chakra-ui/react"
-import { TextMd } from "../Typography"
+import { TextMd } from "../shared/Typography"
 
 export default function Statistics(props: CardProps) {
   return (
diff --git a/dapp/src/components/Overview/TransactionHistory.tsx b/dapp/src/components/Overview/TransactionHistory.tsx
index 7b03b3b9f..e0ff1fb26 100644
--- a/dapp/src/components/Overview/TransactionHistory.tsx
+++ b/dapp/src/components/Overview/TransactionHistory.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { CardBody, Card, CardProps } from "@chakra-ui/react"
-import { TextMd } from "../Typography"
+import { TextMd } from "../shared/Typography"
 
 export default function TransactionHistory(props: CardProps) {
   return (
diff --git a/dapp/src/components/Overview/index.tsx b/dapp/src/components/Overview/index.tsx
index d5fde912e..e60bab881 100644
--- a/dapp/src/components/Overview/index.tsx
+++ b/dapp/src/components/Overview/index.tsx
@@ -14,7 +14,8 @@ import { USD } from "../../constants"
 import { ChevronRight } from "../../static/icons"
 
 export default function Overview() {
-  const bg = useColorModeValue("white", "grey.400")
+  // TODO: Create a custom theme for card component
+  const bg = useColorModeValue("gold.100", "gold.100")
   return (
     <Flex direction="column" gap={2} p={6}>
       <Flex justifyContent="space-between">
diff --git a/dapp/src/components/Typography/index.tsx b/dapp/src/components/Typography/index.tsx
deleted file mode 100644
index 1ffbd9ff1..000000000
--- a/dapp/src/components/Typography/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react"
-import { Text, TextProps } from "@chakra-ui/react"
-
-export function TextXl(props: TextProps) {
-  return (
-    <Text as="p" fontWeight="medium" fontSize="xl" lineHeight="xl" {...props} />
-  )
-}
-
-export function TextLg(props: TextProps) {
-  return (
-    <Text as="p" fontWeight="medium" fontSize="lg" lineHeight="lg" {...props} />
-  )
-}
-
-export function TextMd(props: TextProps) {
-  return (
-    <Text as="p" fontWeight="medium" fontSize="md" lineHeight="md" {...props} />
-  )
-}
-
-export function TextSm(props: TextProps) {
-  return (
-    <Text as="p" fontWeight="medium" fontSize="sm" lineHeight="sm" {...props} />
-  )
-}
-
-export function TextXs(props: TextProps) {
-  return (
-    <Text as="p" fontWeight="medium" fontSize="xs" lineHeight="xs" {...props} />
-  )
-}
diff --git a/dapp/src/components/shared/Typography/index.tsx b/dapp/src/components/shared/Typography/index.tsx
new file mode 100644
index 000000000..1e2080c48
--- /dev/null
+++ b/dapp/src/components/shared/Typography/index.tsx
@@ -0,0 +1,56 @@
+import React from "react"
+import { Heading, HeadingProps, Text, TextProps } from "@chakra-ui/react"
+
+export function H1(props: HeadingProps) {
+  return <Heading as="h1" size={{ base: "6xl", md: "7xl" }} {...props} />
+}
+
+export function H2(props: HeadingProps) {
+  return <Heading as="h2" size={{ base: "5xl", md: "6xl" }} {...props} />
+}
+
+export function H3(props: HeadingProps) {
+  return <Heading as="h3" size={{ base: "4xl", md: "5xl" }} {...props} />
+}
+
+export function H4(props: HeadingProps) {
+  return <Heading as="h4" size={{ base: "3xl", md: "4xl" }} {...props} />
+}
+
+export function H5(props: HeadingProps) {
+  return <Heading as="h5" size={{ base: "2xl", md: "3xl" }} {...props} />
+}
+
+export function H6(props: HeadingProps) {
+  return <Heading as="h6" size={{ base: "xl", md: "2xl" }} {...props} />
+}
+
+export function TextXl(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xl" lineHeight="xl" {...props} />
+  )
+}
+
+export function TextLg(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="lg" lineHeight="lg" {...props} />
+  )
+}
+
+export function TextMd(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="md" lineHeight="md" {...props} />
+  )
+}
+
+export function TextSm(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="sm" lineHeight="sm" {...props} />
+  )
+}
+
+export function TextXs(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xs" lineHeight="xs" {...props} />
+  )
+}
diff --git a/dapp/src/fonts/Segment-Black.otf b/dapp/src/fonts/Segment-Black.otf
new file mode 100644
index 000000000..11d290a00
Binary files /dev/null and b/dapp/src/fonts/Segment-Black.otf differ
diff --git a/dapp/src/fonts/Segment-Bold.otf b/dapp/src/fonts/Segment-Bold.otf
new file mode 100644
index 000000000..b1f708029
Binary files /dev/null and b/dapp/src/fonts/Segment-Bold.otf differ
diff --git a/dapp/src/fonts/Segment-Medium.otf b/dapp/src/fonts/Segment-Medium.otf
new file mode 100644
index 000000000..9df63cbd5
Binary files /dev/null and b/dapp/src/fonts/Segment-Medium.otf differ
diff --git a/dapp/src/fonts/Segment-Regular.otf b/dapp/src/fonts/Segment-Regular.otf
new file mode 100644
index 000000000..124d0b60e
Binary files /dev/null and b/dapp/src/fonts/Segment-Regular.otf differ
diff --git a/dapp/src/fonts/Segment-SemiBold.otf b/dapp/src/fonts/Segment-SemiBold.otf
new file mode 100644
index 000000000..79a8e6489
Binary files /dev/null and b/dapp/src/fonts/Segment-SemiBold.otf differ
diff --git a/dapp/src/static/icons/AcreLogo.tsx b/dapp/src/static/icons/AcreLogo.tsx
new file mode 100644
index 000000000..94059f58a
--- /dev/null
+++ b/dapp/src/static/icons/AcreLogo.tsx
@@ -0,0 +1,13 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const AcreLogo = createIcon({
+  displayName: "AcreLogo",
+  viewBox: "0 0 120 71",
+  path: (
+    <path
+      d="M74.474 34.348H67.257V31.4056H74.5672C75.8322 31.4056 77.3102 31.4056 77.3102 32.8905C77.3102 34.3753 75.739 34.348 74.474 34.348ZM120 18.7097V51.3486C120 53.569 118.549 55.5034 116.445 56.0755L63.7284 70.5015C61.2916 71.169 58.7217 71.169 56.2716 70.5015L3.55526 56.0755C1.46471 55.5034 0 53.5554 0 51.3486V18.7097C0 16.462 1.49134 14.5004 3.62184 13.9555L56.498 0.442247C58.7883 -0.14351 61.1984 -0.14351 63.4887 0.442247L116.365 13.9555C118.495 14.5004 119.987 16.462 119.987 18.7097H120ZM39.3475 39.6062H35.5393L29.9068 31.4056H33.2889V29.0081H20.972V31.4056H24.3542L18.7217 39.6062H14.9134V42.0037H26.1651V39.6062H21.4381L22.9427 37.3994H31.3582L32.8629 39.6062H28.1358V42.0037H39.3875V39.6062H39.3475ZM59.1744 36.8H56.8309C56.245 38.1623 54.8202 39.9059 49.494 39.9059C44.1678 39.9059 41.8642 38.1078 41.8642 35.5059C41.8642 32.9041 44.2077 31.1059 49.2943 31.1059C54.3808 31.1059 56.2317 32.6044 57.0439 34.3072H59.0945V29.0081H56.9241V30.7109H56.8708C55.3662 29.5121 53.7017 28.5041 48.7217 28.5041C42.2636 28.5041 39.1345 31.4056 39.1345 35.5059C39.1345 39.6062 42.0639 42.5078 49.3076 42.5078C56.5513 42.5078 58.8948 39.6062 59.1877 36.8H59.1744ZM83.755 37.3994H81.5979C81.3981 38.7072 80.6791 39.7016 79.2543 39.7016C77.6831 39.7016 77.0972 39.1431 75.6724 36.9635L75.3529 36.4867C76.6977 36.3914 77.5766 36.2007 78.4687 35.683C79.3475 35.1654 79.9334 34.1982 79.9334 32.8087C79.9334 31.3103 79.3608 30.4112 78.5087 29.8936C77.5899 29.335 76.5113 29.0081 73.7816 29.0081H60.2929V31.4056H64.7936V39.6062H60.2929V42.0037H72.024V39.6062H67.257V36.5412H69.8136C72.4501 36.5412 72.6365 36.8273 73.9148 38.8025L74.3009 39.4019C75.5925 41.3771 76.6445 42.3988 79.3475 42.3988C82.0506 42.3988 83.6485 40.5598 83.7417 37.3994H83.755ZM105.087 28.9945H84.4474V31.392H88.5486V39.5926H84.4474V41.9901H105.087V36.6911H102.863V39.5926H91.0253V36.5548H96.1118V37.8898H98.2423V33.0948H96.1118V34.4298H91.0253V31.392H102.863V34.2935H105.087V28.9945ZM24.3276 35.3016H29.8802L27.0972 31.2558L24.3142 35.3016H24.3276Z"
+      fill="#F34900"
+    />
+  ),
+})
diff --git a/dapp/src/static/icons/index.ts b/dapp/src/static/icons/index.ts
index 66c6e3aa9..c625a102e 100644
--- a/dapp/src/static/icons/index.ts
+++ b/dapp/src/static/icons/index.ts
@@ -2,3 +2,4 @@ export * from "./Info"
 export * from "./Bitcoin"
 export * from "./Ethereum"
 export * from "./ChevronRight"
+export * from "./AcreLogo"
diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts
index 0a3947861..cb59ad1b8 100644
--- a/dapp/src/theme/Button.ts
+++ b/dapp/src/theme/Button.ts
@@ -8,15 +8,17 @@ const Button: ComponentSingleStyleConfig = {
   },
   variants: {
     solid: (props: StyleFunctionProps) => ({
-      backgroundColor: mode("black", "purple")(props),
+      // TODO: Update when the dark theme is ready
+      backgroundColor: mode("brand.400", "brand.400")(props),
       color: "white",
     }),
     outline: (props: StyleFunctionProps) => ({
-      color: mode("black", "grey.80")(props),
-      borderColor: mode("black", "grey.50")(props),
+      // TODO: Update when the dark theme is ready
+      color: mode("grey.700", "grey.700")(props),
+      borderColor: mode("grey.700", "grey.700")(props),
     }),
     link: (props: StyleFunctionProps) => ({
-      color: mode("black", "grey.50")(props),
+      color: mode("grey.700", "grey.700")(props),
       textDecoration: "underline",
     }),
   },
diff --git a/dapp/src/theme/Heading.ts b/dapp/src/theme/Heading.ts
new file mode 100644
index 000000000..fbdf450d1
--- /dev/null
+++ b/dapp/src/theme/Heading.ts
@@ -0,0 +1,32 @@
+import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+
+const Heading: ComponentSingleStyleConfig = {
+  sizes: {
+    "7xl": {
+      fontSize: "4.5rem",
+      lineHeight: "5.625rem",
+    },
+    "6xl": {
+      fontSize: "3.75rem",
+      lineHeight: "4.5rem",
+    },
+    "5xl": {
+      fontSize: "3rem",
+      lineHeight: "3.75rem",
+    },
+    "4xl": {
+      fontSize: "2.25rem",
+      lineHeight: "2.75rem",
+    },
+    "3xl": {
+      fontSize: "1.875rem",
+      lineHeight: "2.375rem",
+    },
+    "2xl": {
+      fontSize: "1.5rem",
+      lineHeight: "2rem",
+    },
+  },
+}
+
+export default Heading
diff --git a/dapp/src/theme/Switch.ts b/dapp/src/theme/Switch.ts
index 1529dda02..52ca179b0 100644
--- a/dapp/src/theme/Switch.ts
+++ b/dapp/src/theme/Switch.ts
@@ -5,10 +5,10 @@ const Switch: ComponentSingleStyleConfig = {
     track: {
       _checked: {
         _dark: {
-          bg: "purple",
+          bg: "grey.700",
         },
         _light: {
-          bg: "grey.200",
+          bg: "grey.700",
         },
       },
     },
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index de73c60c8..b90c220da 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -2,7 +2,8 @@ import { StyleFunctionProps, Tooltip, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import Switch from "./Switch"
-import { colors, fontSizes, fontWeights, lineHeights } from "./utils"
+import { colors, fonts, lineHeights } from "./utils"
+import Heading from "./Heading"
 
 // Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
 // Let's override the defaultProps as follows.
@@ -10,20 +11,21 @@ Tooltip.defaultProps = { ...Tooltip.defaultProps, hasArrow: true }
 
 const defaultTheme = {
   colors,
-  fontSizes,
-  fontWeights,
+  fonts,
   lineHeights,
   styles: {
     global: (props: StyleFunctionProps) => ({
       body: {
-        backgroundColor: mode("grey.100", "grey.300")(props),
-        color: mode("black", "grey.80")(props),
+        // TODO: Update when the dark theme is ready
+        backgroundColor: mode("gold.300", "gold.300")(props),
+        color: mode("grey.700", "grey.700")(props),
       },
     }),
   },
   components: {
     Button,
     Switch,
+    Heading,
   },
 }
 
diff --git a/dapp/src/theme/utils/colors.ts b/dapp/src/theme/utils/colors.ts
index 4d8352bb2..ed006c76e 100644
--- a/dapp/src/theme/utils/colors.ts
+++ b/dapp/src/theme/utils/colors.ts
@@ -1,16 +1,56 @@
-// TODO: Currently, the correct colors have not yet been defined.
-// Let's update them later.
 export const colors = {
-  white: "#FFF",
-  black: "#000",
-  purple: "#7D00FF",
-  error: "#F00",
+  brand: {
+    100: "#FFEDEB",
+    200: "#FFC5BF",
+    300: "#FF8B7B",
+    400: "#F34900", // Acre Orange
+    500: "#B53400",
+    600: "#7A2000",
+    700: "#450E00",
+  },
+  gold: {
+    100: "#FBF7EC",
+    200: "#F8EFDA",
+    300: "#F3E5C1", // Acre Dust
+    400: "#EDD8A2",
+    500: "#EACF88",
+    600: "#E2B950",
+    700: "#D69B04", // Acre Wheat
+  },
+  green: {
+    100: "#D6F2CE",
+    200: "#AFE7A1",
+    300: "#79CA52",
+    400: "#43AD02", // Acre Grass
+    500: "#318401",
+    600: "#205C01",
+    700: "#103800",
+  },
+  blue: {
+    100: "#EEF0FF",
+    200: "#CDD4FE",
+    300: "#9AAAFD",
+    400: "#5E80FC",
+    500: "#1059E6", // Acre Aqua
+    600: "#073B9E",
+    700: "#021F5C",
+  },
+  red: {
+    100: "#FDDADA",
+    200: "#FAA3A4",
+    300: "#F86165",
+    400: "#DA1E28",
+    500: "#9A1219",
+    600: "#5F070B",
+    700: "#2B0102",
+  },
   grey: {
-    50: "rgba(255, 255, 255, 0.50)",
-    80: "rgba(255, 255, 255, 0.80)",
-    100: "#ECECEC",
-    200: "#37393C",
-    300: "#1D1E20",
-    400: "#1A1B1D",
+    100: "#F1F0F1",
+    200: "#D3D0D1",
+    300: "#AFA8A9",
+    400: "#8D8184",
+    500: "#675E60",
+    600: "#443D3F",
+    700: "#231F20", // Acre Dirt
   },
 }
diff --git a/dapp/src/theme/utils/fonts.ts b/dapp/src/theme/utils/fonts.ts
index 18a482760..5fdcc15a6 100644
--- a/dapp/src/theme/utils/fonts.ts
+++ b/dapp/src/theme/utils/fonts.ts
@@ -1,22 +1,12 @@
-export const fontSizes = {
-  xs: "0.75rem",
-  sm: "0.875rem",
-  md: "1rem",
-  lg: "1.125rem",
-  xl: "1.25rem",
-}
-
-export const fontWeights = {
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  black: 900,
-}
-
 export const lineHeights = {
-  xs: "1.125rem",
-  sm: "1.25rem",
-  md: "1.5rem",
-  lg: "1.75rem",
   xl: "1.875rem",
+  lg: "1.75rem",
+  md: "1.5rem",
+  sm: "1.25rem",
+  xs: "1.125rem",
+}
+
+export const fonts = {
+  heading: "Segment, sans-serif",
+  body: "Segment, sans-serif",
 }