diff --git a/@stellar/design-system-website/docs/foundations/colors.mdx b/@stellar/design-system-website/docs/foundations/colors.mdx
index 24e64400..2f3a854b 100644
--- a/@stellar/design-system-website/docs/foundations/colors.mdx
+++ b/@stellar/design-system-website/docs/foundations/colors.mdx
@@ -18,149 +18,316 @@ Product colors in a design system serve as a key element for establishing a
 consistent and recognizable visual identity, fostering brand recognition, and
 creating a cohesive and harmonious user experience across various touchpoints.
 
-### Brand
+### Gray
 
 <ColorPalette
   colors={[
     {
       hex: {
-        light: "#fbfaff",
+        light: "#fcfcfc",
+        dark: "#161616",
+      },
+      variable: "--sds-clr-gray-01",
+      name: "1",
+    },
+    {
+      hex: {
+        light: "#f8f8f8",
+        dark: "#1c1c1c",
+      },
+      variable: "--sds-clr-gray-02",
+      name: "2",
+    },
+    {
+      hex: {
+        light: "#f3f3f3",
+        dark: "#232323",
+      },
+      variable: "--sds-clr-gray-03",
+      name: "3",
+    },
+    {
+      hex: {
+        light: "#ededed",
+        dark: "#282828",
+      },
+      variable: "--sds-clr-gray-04",
+      name: "4",
+    },
+    {
+      hex: {
+        light: "#e8e8e8",
+        dark: "#2e2e2e",
+      },
+      variable: "--sds-clr-gray-05",
+      name: "5",
+    },
+    {
+      hex: {
+        light: "#e2e2e2",
+        dark: "#343434",
+      },
+      variable: "--sds-clr-gray-06",
+      name: "6",
+    },
+    {
+      hex: {
+        light: "#dbdbdb",
+        dark: "#3e3e3e",
+      },
+      variable: "--sds-clr-gray-07",
+      name: "7",
+    },
+    {
+      hex: {
+        light: "#c7c7c7",
+        dark: "#505050",
+      },
+      variable: "--sds-clr-gray-08",
+      name: "8",
+    },
+    {
+      hex: {
+        light: "#8f8f8f",
+        dark: "#707070",
+      },
+      variable: "--sds-clr-gray-09",
+      name: "9",
+    },
+    {
+      hex: {
+        light: "#858585",
+        dark: "#7e7e7e",
+      },
+      variable: "--sds-clr-gray-10",
+      name: "10",
+    },
+    {
+      hex: {
+        light: "#6f6f6f",
+        dark: "#a0a0a0",
+      },
+      variable: "--sds-clr-gray-11",
+      name: "11",
+    },
+    {
+      hex: {
+        light: "#171717",
+        dark: "#ededed",
+      },
+      variable: "--sds-clr-gray-12",
+      name: "12",
+    },
+  ]}
+/>
+
+### Lilac
+
+<ColorPalette
+  colors={[
+    {
+      hex: {
+        light: "#fdfcfe",
         dark: "#17151f",
       },
-      variable: "--color-purple-10",
-      name: "Purple 10",
+      variable: "--sds-clr-lilac-01",
+      name: "1",
     },
     {
       hex: {
-        light: "#f5f2ff",
+        light: "#fbfaff",
         dark: "#1c172b",
       },
-      variable: "--color-purple-20",
-      name: "Purple 20",
+      variable: "--sds-clr-lilac-02",
+      name: "2",
+    },
+    {
+      hex: {
+        light: "#f5f2ff",
+        dark: "#251e40",
+      },
+      variable: "--sds-clr-lilac-03",
+      name: "3",
     },
     {
       hex: {
         light: "#ede9fe",
         dark: "#2c2250",
       },
-      variable: "--color-purple-30",
-      name: "Purple 30",
+      variable: "--sds-clr-lilac-04",
+      name: "4",
     },
     {
       hex: {
         light: "#e4defc",
         dark: "#32275f",
       },
-      variable: "--color-purple-40",
-      name: "Purple 40",
+      variable: "--sds-clr-lilac-05",
+      name: "5",
+    },
+    {
+      hex: {
+        light: "#d7cff9",
+        dark: "#392c72",
+      },
+      variable: "--sds-clr-lilac-06",
+      name: "6",
+    },
+    {
+      hex: {
+        light: "#c4b8f3",
+        dark: "#443592",
+      },
+      variable: "--sds-clr-lilac-07",
+      name: "7",
     },
     {
       hex: {
         light: "#aa99ec",
-        dark: "#634cc9",
+        dark: "#5842c3",
       },
-      variable: "--color-purple-50",
-      name: "Purple 50",
+      variable: "--sds-clr-lilac-08",
+      name: "8",
     },
     {
       hex: {
         light: "#6e56cf",
+        dark: "#6e56cf",
+      },
+      variable: "--sds-clr-lilac-09",
+      name: "9",
+    },
+    {
+      hex: {
+        light: "#644fc1",
         dark: "#7c66dc",
       },
-      variable: "--color-purple-60",
-      name: "Purple 60",
+      variable: "--sds-clr-lilac-10",
+      name: "10",
     },
     {
       hex: {
         light: "#5746af",
         dark: "#9e8cfc",
       },
-      variable: "--color-purple-70",
-      name: "Purple 70",
+      variable: "--sds-clr-lilac-11",
+      name: "11",
     },
     {
       hex: {
         light: "#20134b",
         dark: "#f1eefe",
       },
-      variable: "--color-purple-80",
-      name: "Purple 80",
+      variable: "--sds-clr-lilac-12",
+      name: "12",
     },
   ]}
 />
 
-### Grayscale
+### Gold
 
 <ColorPalette
   colors={[
     {
       hex: {
-        light: "#f9f8f9",
-        dark: "#161618",
+        light: "#fdfdf9",
+        dark: "#1c1500",
+      },
+      variable: "--sds-clr-gold-01",
+      name: "1",
+    },
+    {
+      hex: {
+        light: "#fffce8",
+        dark: "#221a00",
       },
-      variable: "--color-gray-10",
-      name: "Gray 10",
+      variable: "--sds-clr-gold-02",
+      name: "2",
     },
     {
       hex: {
-        light: "#f4f2f4",
-        dark: "#1c1c1f",
+        light: "#fffbd1",
+        dark: "#2c2100",
       },
-      variable: "--color-gray-20",
-      name: "Gray 20",
+      variable: "--sds-clr-gold-03",
+      name: "3",
     },
     {
       hex: {
-        light: "#eeedef",
-        dark: "#28282c",
+        light: "#fff8bb",
+        dark: "#352800",
       },
-      variable: "--color-gray-30",
-      name: "Gray 30",
+      variable: "--sds-clr-gold-04",
+      name: "4",
     },
     {
       hex: {
-        light: "#e9e8ea",
-        dark: "#2e2e32",
+        light: "#fef2a4",
+        dark: "#3e3000",
       },
-      variable: "--color-gray-40",
-      name: "Gray 40",
+      variable: "--sds-clr-gold-05",
+      name: "5",
     },
     {
       hex: {
-        light: "#c8c7cb",
-        dark: "#706f78",
+        light: "#f9e68c",
+        dark: "#493c00",
       },
-      variable: "--color-gray-50",
-      name: "Gray 50",
+      variable: "--sds-clr-gold-06",
+      name: "6",
     },
     {
       hex: {
-        light: "#908e96",
-        dark: "#7e7d86",
+        light: "#efd36c",
+        dark: "#594a05",
       },
-      variable: "--color-gray-60",
-      name: "Gray 60",
+      variable: "--sds-clr-gold-07",
+      name: "7",
     },
     {
       hex: {
-        light: "#6f6e77",
-        dark: "#a09fa6",
+        light: "#ebbc00",
+        dark: "#705e00",
       },
-      variable: "--color-gray-70",
-      name: "Gray 70",
+      variable: "--sds-clr-gold-08",
+      name: "8",
     },
     {
       hex: {
-        light: "#1a1523",
-        dark: "#ededef",
+        light: "#fdda24",
+        dark: "#fdda24",
       },
-      variable: "--color-gray-80",
-      name: "Gray 80",
+      variable: "--sds-clr-gold-09",
+      name: "9",
+    },
+    {
+      hex: {
+        light: "#f7ce00",
+        dark: "#ffef5c",
+      },
+      variable: "--sds-clr-gold-10",
+      name: "10",
+    },
+    {
+      hex: {
+        light: "#946800",
+        dark: "#f0c000",
+      },
+      variable: "--sds-clr-gold-11",
+      name: "11",
+    },
+    {
+      hex: {
+        light: "#35290f",
+        dark: "#fffad1",
+      },
+      variable: "--sds-clr-gold-12",
+      name: "12",
     },
   ]}
 />
 
-### System
+### Base
 
 <ColorPalette
   colors={[
@@ -169,16 +336,103 @@ creating a cohesive and harmonious user experience across various touchpoints.
         light: "#ffffff",
         dark: "#000000",
       },
-      variable: "--color-gray-00",
-      name: "Gray 0",
+      variable: "--sds-clr-base-00",
+      name: "0",
     },
     {
       hex: {
         light: "#000000",
         dark: "#ffffff",
       },
-      variable: "--color-gray-90",
-      name: "Gray 90",
+      variable: "--sds-clr-base-01",
+      name: "1",
+    },
+  ]}
+/>
+
+### Overlay
+
+<ColorPalette
+  colors={[
+    {
+      hex: {
+        light: "rgba(0, 0, 0, 0.1)",
+        dark: "rgba(255, 255, 255, 0.1)",
+      },
+      variable: "--sds-overlay-01",
+      name: "1",
+    },
+    {
+      hex: {
+        light: "rgba(0, 0, 0, 0.2)",
+        dark: "rgba(255, 255, 255, 0.2)",
+      },
+      variable: "--sds-overlay-02",
+      name: "2",
+    },
+    {
+      hex: {
+        light: "rgba(0, 0, 0, 0.3)",
+        dark: "rgba(255, 255, 255, 0.3)",
+      },
+      variable: "--sds-overlay-03",
+      name: "3",
+    },
+    {
+      hex: {
+        light: "rgba(0, 0, 0, 0.4)",
+        dark: "rgba(255, 255, 255, 0.4)",
+      },
+      variable: "--sds-overlay-04",
+      name: "4",
+    },
+    {
+      hex: {
+        light: "rgba(0, 0, 0, 0.5)",
+        dark: "rgba(255, 255, 255, 0.5)",
+      },
+      variable: "--sds-overlay-05",
+      name: "5",
+    },
+    {
+      hex: {
+        light: "rgba(0, 0, 0, 0.6)",
+        dark: "rgba(255, 255, 255, 0.6)",
+      },
+      variable: "--sds-overlay-06",
+      name: "6",
+    },
+    {
+      hex: {
+        light: "rgba(0, 0, 0, 0.7)",
+        dark: "rgba(255, 255, 255, 0.7)",
+      },
+      variable: "--sds-overlay-07",
+      name: "7",
+    },
+    {
+      hex: {
+        light: "rgba(0, 0, 0, 0.8)",
+        dark: "rgba(255, 255, 255, 0.8)",
+      },
+      variable: "--sds-overlay-08",
+      name: "8",
+    },
+    {
+      hex: {
+        light: "rgba(0, 0, 0, 0.9)",
+        dark: "rgba(255, 255, 255, 0.9)",
+      },
+      variable: "--sds-overlay-09",
+      name: "9",
+    },
+    {
+      hex: {
+        light: "rgba(0, 0, 0, 1)",
+        dark: "rgba(255, 255, 255, 1)",
+      },
+      variable: "--sds-overlay-10",
+      name: "10",
     },
   ]}
 />
@@ -196,67 +450,99 @@ feedback or system messages.
   colors={[
     {
       hex: {
-        light: "#f2fcf5",
+        light: "#fbfefc",
         dark: "#0d1912",
       },
-      variable: "--color-green-10",
-      name: "Green 10",
+      variable: "--sds-clr-green-01",
+      name: "1",
     },
     {
       hex: {
-        light: "#e9f9ee",
+        light: "#f2fcf5",
         dark: "#0c1f17",
       },
-      variable: "--color-green-20",
-      name: "Green 20",
+      variable: "--sds-clr-green-02",
+      name: "2",
+    },
+    {
+      hex: {
+        light: "#e9f9ee",
+        dark: "#0f291e",
+      },
+      variable: "--sds-clr-green-03",
+      name: "3",
     },
     {
       hex: {
         light: "#ddf3e4",
         dark: "#113123",
       },
-      variable: "--color-green-30",
-      name: "Green 30",
+      variable: "--sds-clr-green-04",
+      name: "4",
     },
     {
       hex: {
         light: "#ccebd7",
         dark: "#133929",
       },
-      variable: "--color-green-40",
-      name: "Green 40",
+      variable: "--sds-clr-green-05",
+      name: "5",
+    },
+    {
+      hex: {
+        light: "#b4dfc4",
+        dark: "#164430",
+      },
+      variable: "--sds-clr-green-06",
+      name: "6",
+    },
+    {
+      hex: {
+        light: "#92ceac",
+        dark: "#1b543a",
+      },
+      variable: "--sds-clr-green-07",
+      name: "7",
     },
     {
       hex: {
         light: "#5bb98c",
-        dark: "#30a46c",
+        dark: "#236e4a",
       },
-      variable: "--color-green-50",
-      name: "Green 50",
+      variable: "--sds-clr-green-08",
+      name: "8",
     },
     {
       hex: {
         light: "#30a46c",
+        dark: "#30a46c",
+      },
+      variable: "--sds-clr-green-09",
+      name: "9",
+    },
+    {
+      hex: {
+        light: "#299764",
         dark: "#3cb179",
       },
-      variable: "--color-green-60",
-      name: "Green 60",
+      variable: "--sds-clr-green-10",
+      name: "10",
     },
     {
       hex: {
         light: "#18794e",
         dark: "#4cc38a",
       },
-      variable: "--color-green-70",
-      name: "Green 70",
+      variable: "--sds-clr-green-11",
+      name: "11",
     },
     {
       hex: {
         light: "#153226",
         dark: "#e5fbeb",
       },
-      variable: "--color-green-80",
-      name: "Green 80",
+      variable: "--sds-clr-green-12",
+      name: "12",
     },
   ]}
 />
@@ -267,67 +553,99 @@ feedback or system messages.
   colors={[
     {
       hex: {
-        light: "#fff9ed",
+        light: "#fefdfb",
         dark: "#1f1300",
       },
-      variable: "--color-yellow-10",
-      name: "Yellow 10",
+      variable: "--sds-clr-amber-01",
+      name: "1",
     },
     {
       hex: {
-        light: "#fff4d5",
+        light: "#fff9ed",
         dark: "#271700",
       },
-      variable: "--color-yellow-20",
-      name: "Yellow 20",
+      variable: "--sds-clr-amber-02",
+      name: "2",
+    },
+    {
+      hex: {
+        light: "#fff4d5",
+        dark: "#341c00",
+      },
+      variable: "--sds-clr-amber-03",
+      name: "3",
     },
     {
       hex: {
         light: "#ffecbc",
         dark: "#3f2200",
       },
-      variable: "--color-yellow-30",
-      name: "Yellow 30",
+      variable: "--sds-clr-amber-04",
+      name: "4",
     },
     {
       hex: {
         light: "#ffe3a2",
         dark: "#4a2900",
       },
-      variable: "--color-yellow-40",
-      name: "Yellow 40",
+      variable: "--sds-clr-amber-05",
+      name: "5",
     },
     {
       hex: {
-        light: "#ffb224",
-        dark: "#f1a10d",
+        light: "#ffd386",
+        dark: "#573300",
       },
-      variable: "--color-yellow-50",
-      name: "Yellow 50",
+      variable: "--sds-clr-amber-06",
+      name: "6",
+    },
+    {
+      hex: {
+        light: "#f3ba63",
+        dark: "#693f05",
+      },
+      variable: "--sds-clr-amber-07",
+      name: "7",
     },
     {
       hex: {
         light: "#ee9d2b",
+        dark: "#824e00",
+      },
+      variable: "--sds-clr-amber-08",
+      name: "8",
+    },
+    {
+      hex: {
+        light: "#ffb224",
         dark: "#ffb224",
       },
-      variable: "--color-yellow-60",
-      name: "Yellow 60",
+      variable: "--sds-clr-amber-09",
+      name: "9",
     },
     {
       hex: {
-        light: "#ad5700",
+        light: "#ffa01c",
         dark: "#ffcb47",
       },
-      variable: "--color-yellow-70",
-      name: "Yellow 70",
+      variable: "--sds-clr-amber-10",
+      name: "10",
+    },
+    {
+      hex: {
+        light: "#ad5700",
+        dark: "#f1a10d",
+      },
+      variable: "--sds-clr-amber-11",
+      name: "11",
     },
     {
       hex: {
         light: "#4e2009",
         dark: "#fef3dd",
       },
-      variable: "--color-yellow-80",
-      name: "Yellow 80",
+      variable: "--sds-clr-amber-12",
+      name: "12",
     },
   ]}
 />
@@ -338,67 +656,99 @@ feedback or system messages.
   colors={[
     {
       hex: {
-        light: "#fff8f8",
+        light: "#fffcfc",
         dark: "#1f1315",
       },
-      variable: "--color-red-10",
-      name: "Red 10",
+      variable: "--sds-clr-red-01",
+      name: "1",
     },
     {
       hex: {
-        light: "#ffefef",
+        light: "#fff8f8",
         dark: "#291415",
       },
-      variable: "--color-red-20",
-      name: "Red 20",
+      variable: "--sds-clr-red-02",
+      name: "2",
+    },
+    {
+      hex: {
+        light: "#ffefef",
+        dark: "#3c181a",
+      },
+      variable: "--sds-clr-red-03",
+      name: "3",
     },
     {
       hex: {
         light: "#ffe5e5",
         dark: "#481a1d",
       },
-      variable: "--color-red-30",
-      name: "Red 30",
+      variable: "--sds-clr-red-04",
+      name: "4",
     },
     {
       hex: {
         light: "#fdd8d8",
         dark: "#541b1f",
       },
-      variable: "--color-red-40",
-      name: "Red 40",
+      variable: "--sds-clr-red-05",
+      name: "5",
+    },
+    {
+      hex: {
+        light: "#f9c6c6",
+        dark: "#671e22",
+      },
+      variable: "--sds-clr-red-06",
+      name: "6",
+    },
+    {
+      hex: {
+        light: "#f3aeaf",
+        dark: "#822025",
+      },
+      variable: "--sds-clr-red-07",
+      name: "7",
     },
     {
       hex: {
         light: "#eb9091",
-        dark: "#e5484d",
+        dark: "#aa2429",
       },
-      variable: "--color-red-50",
-      name: "Red 50",
+      variable: "--sds-clr-red-08",
+      name: "8",
     },
     {
       hex: {
         light: "#e5484d",
+        dark: "#e5484d",
+      },
+      variable: "--sds-clr-red-09",
+      name: "9",
+    },
+    {
+      hex: {
+        light: "#dc3d43",
         dark: "#f2555a",
       },
-      variable: "--color-red-60",
-      name: "Red 60",
+      variable: "--sds-clr-red-10",
+      name: "10",
     },
     {
       hex: {
         light: "#cd2b31",
         dark: "#ff6369",
       },
-      variable: "--color-red-70",
-      name: "Red 70",
+      variable: "--sds-clr-red-11",
+      name: "11",
     },
     {
       hex: {
         light: "#381316",
         dark: "#feecee",
       },
-      variable: "--color-red-80",
-      name: "Red 80",
+      variable: "--sds-clr-red-12",
+      name: "12",
     },
   ]}
 />
diff --git a/@stellar/design-system-website/docs/foundations/typography/_category_.json b/@stellar/design-system-website/docs/foundations/typography/_category_.json
index c99f54a5..82fb080d 100644
--- a/@stellar/design-system-website/docs/foundations/typography/_category_.json
+++ b/@stellar/design-system-website/docs/foundations/typography/_category_.json
@@ -2,6 +2,6 @@
   "label": "Typography",
   "link": {
     "type": "generated-index",
-    "description": "Typography (including headings, paragraph, and other text types) examples and documentation. These components don’t have any special props, and inherit their native HTML attributes."
+    "description": "Typography (including headings, paragraph, and other text types) examples and documentation."
   }
 }
diff --git a/@stellar/design-system-website/docs/foundations/typography/caption.mdx b/@stellar/design-system-website/docs/foundations/typography/caption.mdx
deleted file mode 100644
index aecda01e..00000000
--- a/@stellar/design-system-website/docs/foundations/typography/caption.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-slug: /caption
-description: "Text for single-line scenarios."
----
-
-# Caption
-
-<ComponentDescription componentName="Caption" />
-
-## Example
-
-```tsx live
-<PreviewBlock componentName="Caption">
-  <Caption size="xs">Caption</Caption>
-</PreviewBlock>
-```
-
-## Props
-
-<ComponentProps componentName="Caption" />
diff --git a/@stellar/design-system-website/docs/foundations/typography/code.mdx b/@stellar/design-system-website/docs/foundations/typography/code.mdx
new file mode 100644
index 00000000..cea6e379
--- /dev/null
+++ b/@stellar/design-system-website/docs/foundations/typography/code.mdx
@@ -0,0 +1,20 @@
+---
+slug: /code
+description: "Display text in computer code style."
+---
+
+# Code
+
+<ComponentDescription componentName="Code" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Code">
+  <Code size="xs">Code</Code>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Code" />
diff --git a/@stellar/design-system-website/docs/foundations/typography/display.mdx b/@stellar/design-system-website/docs/foundations/typography/display.mdx
new file mode 100644
index 00000000..07506bf9
--- /dev/null
+++ b/@stellar/design-system-website/docs/foundations/typography/display.mdx
@@ -0,0 +1,20 @@
+---
+slug: /display
+description: "Generic titles and captions that are not headings."
+---
+
+# Display
+
+<ComponentDescription componentName="Display" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Display">
+  <Display size="xs">Display</Caption>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Display" />
diff --git a/@stellar/design-system-website/docs/foundations/typography/paragraph.mdx b/@stellar/design-system-website/docs/foundations/typography/paragraph.mdx
deleted file mode 100644
index bb19ed9e..00000000
--- a/@stellar/design-system-website/docs/foundations/typography/paragraph.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-slug: /paragraph
-description: "Text paragraph is an HTML p tag, not a custom component."
----
-
-# Paragraph
-
-<ComponentDescription componentName="Paragraph" />
-
-## Example
-
-```tsx live
-<PreviewBlock componentName="Paragraph">
-  <Paragraph size="xs">Paragraph</Paragraph>
-</PreviewBlock>
-```
-
-## Props
-
-<ComponentProps componentName="Paragraph" />
diff --git a/@stellar/design-system-website/docs/foundations/typography/text.mdx b/@stellar/design-system-website/docs/foundations/typography/text.mdx
new file mode 100644
index 00000000..0128b020
--- /dev/null
+++ b/@stellar/design-system-website/docs/foundations/typography/text.mdx
@@ -0,0 +1,22 @@
+---
+slug: /text
+description: "Display text as p, div, or span."
+---
+
+# Text
+
+<ComponentDescription componentName="Text" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Text">
+  <Text as="p" size="xs">
+    Text
+  </Text>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Text" />
diff --git a/@stellar/design-system-website/docs/foundations/typography/title.mdx b/@stellar/design-system-website/docs/foundations/typography/title.mdx
deleted file mode 100644
index c653fc6d..00000000
--- a/@stellar/design-system-website/docs/foundations/typography/title.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-slug: /title
-description: "Non-semantic heading (banner title, navigation item, label)."
----
-
-# Title
-
-<ComponentDescription componentName="Title" />
-
-## Example
-
-```tsx live
-<PreviewBlock componentName="Title">
-  <Title size="xs">Title</Title>
-</PreviewBlock>
-```
-
-## Props
-
-<ComponentProps componentName="Title" />
diff --git a/@stellar/design-system-website/docs/get-started/introduction.mdx b/@stellar/design-system-website/docs/get-started/introduction.mdx
index 80c6de29..9d347e29 100644
--- a/@stellar/design-system-website/docs/get-started/introduction.mdx
+++ b/@stellar/design-system-website/docs/get-started/introduction.mdx
@@ -35,20 +35,20 @@ Install SDS by using the package manager of your choice.
 npm install @stellar/design-system
 ```
 
-Add Google Fonts (`Inter Tight`, `Inter`, and `Roboto Mono`) to the `index.html`
-file or CSS/styles file.
+Add Google Fonts (`Inter` and `Inconsolata`) to the `index.html` file or
+CSS/styles file.
 
 ```html
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
-  href="https://fonts.googleapis.com/css2?family=Inter+Tight&family=Inter:wght@400;500;600&family=Roboto+Mono&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Inconsolata:wght@500&display=swap"
   rel="stylesheet"
 />
 ```
 
 ```css
-@import url("https://fonts.googleapis.com/css2?family=Inter+Tight&family=Inter:wght@400;500;600&family=Roboto+Mono&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Inconsolata:wght@500&display=swap");
 ```
 
 Add the main CSS file to your project (for example, the main `index` file of
diff --git a/@stellar/design-system-website/src/componentPreview/captionPreview.tsx b/@stellar/design-system-website/src/componentPreview/captionPreview.tsx
deleted file mode 100644
index 0882a4be..00000000
--- a/@stellar/design-system-website/src/componentPreview/captionPreview.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ComponentPreview } from "@site/src/components/PreviewBlock";
-
-export const captionPreview: ComponentPreview = {
-  options: [
-    {
-      type: "select",
-      prop: "size",
-      options: [
-        {
-          value: "xs",
-          label: "XS",
-        },
-        {
-          value: "sm",
-          label: "SM",
-        },
-        {
-          value: "md",
-          label: "MD",
-        },
-        {
-          value: "lg",
-          label: "LG",
-        },
-      ],
-    },
-  ],
-};
diff --git a/@stellar/design-system-website/src/componentPreview/titlePreview.tsx b/@stellar/design-system-website/src/componentPreview/codePreview.tsx
similarity index 76%
rename from @stellar/design-system-website/src/componentPreview/titlePreview.tsx
rename to @stellar/design-system-website/src/componentPreview/codePreview.tsx
index 261f3a66..02f0838d 100644
--- a/@stellar/design-system-website/src/componentPreview/titlePreview.tsx
+++ b/@stellar/design-system-website/src/componentPreview/codePreview.tsx
@@ -1,6 +1,6 @@
 import { ComponentPreview } from "@site/src/components/PreviewBlock";
 
-export const titlePreview: ComponentPreview = {
+export const codePreview: ComponentPreview = {
   options: [
     {
       type: "select",
@@ -18,10 +18,6 @@ export const titlePreview: ComponentPreview = {
           value: "md",
           label: "MD",
         },
-        {
-          value: "lg",
-          label: "LG",
-        },
       ],
     },
   ],
diff --git a/@stellar/design-system-website/src/componentPreview/displayPreview.tsx b/@stellar/design-system-website/src/componentPreview/displayPreview.tsx
new file mode 100644
index 00000000..5ae40a15
--- /dev/null
+++ b/@stellar/design-system-website/src/componentPreview/displayPreview.tsx
@@ -0,0 +1,68 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const displayPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "as",
+      options: [
+        {
+          value: "div",
+          label: "div",
+        },
+        {
+          value: "span",
+          label: "span",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "size",
+      options: [
+        {
+          value: "xs",
+          label: "XS",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
+        },
+        {
+          value: "xl",
+          label: "XL",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "weight",
+      options: [
+        {
+          value: "regular",
+          label: "Regular",
+        },
+        {
+          value: "medium",
+          label: "Medium",
+        },
+        {
+          value: "semi-bold",
+          label: "Semi-Bold",
+        },
+        {
+          value: "bold",
+          label: "Bold",
+        },
+      ],
+    },
+  ],
+};
diff --git a/@stellar/design-system-website/src/componentPreview/headingPreview.tsx b/@stellar/design-system-website/src/componentPreview/headingPreview.tsx
index e2b787a9..dc4a3c50 100644
--- a/@stellar/design-system-website/src/componentPreview/headingPreview.tsx
+++ b/@stellar/design-system-website/src/componentPreview/headingPreview.tsx
@@ -56,9 +56,27 @@ export const headingPreview: ComponentPreview = {
           value: "xl",
           label: "XL",
         },
+      ],
+    },
+    {
+      type: "select",
+      prop: "weight",
+      options: [
+        {
+          value: "regular",
+          label: "Regular",
+        },
+        {
+          value: "medium",
+          label: "Medium",
+        },
+        {
+          value: "semi-bold",
+          label: "Semi-Bold",
+        },
         {
-          value: "xxl",
-          label: "XXL",
+          value: "bold",
+          label: "Bold",
         },
       ],
     },
diff --git a/@stellar/design-system-website/src/componentPreview/paragraphPreview.tsx b/@stellar/design-system-website/src/componentPreview/paragraphPreview.tsx
deleted file mode 100644
index 61659f4c..00000000
--- a/@stellar/design-system-website/src/componentPreview/paragraphPreview.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ComponentPreview } from "@site/src/components/PreviewBlock";
-
-export const paragraphPreview: ComponentPreview = {
-  options: [
-    {
-      type: "select",
-      prop: "size",
-      options: [
-        {
-          value: "xs",
-          label: "XS",
-        },
-        {
-          value: "sm",
-          label: "SM",
-        },
-        {
-          value: "md",
-          label: "MD",
-        },
-        {
-          value: "lg",
-          label: "LG",
-        },
-      ],
-    },
-    {
-      type: "checkbox",
-      prop: "asDiv",
-      label: "As div",
-    },
-  ],
-};
diff --git a/@stellar/design-system-website/src/componentPreview/textPreview.tsx b/@stellar/design-system-website/src/componentPreview/textPreview.tsx
new file mode 100644
index 00000000..e5563f4b
--- /dev/null
+++ b/@stellar/design-system-website/src/componentPreview/textPreview.tsx
@@ -0,0 +1,72 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const textPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "as",
+      options: [
+        {
+          value: "p",
+          label: "p",
+        },
+        {
+          value: "div",
+          label: "div",
+        },
+        {
+          value: "span",
+          label: "span",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "size",
+      options: [
+        {
+          value: "xs",
+          label: "XS",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
+        },
+        {
+          value: "xl",
+          label: "XL",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "weight",
+      options: [
+        {
+          value: "regular",
+          label: "Regular",
+        },
+        {
+          value: "medium",
+          label: "Medium",
+        },
+        {
+          value: "semi-bold",
+          label: "Semi-Bold",
+        },
+        {
+          value: "bold",
+          label: "Bold",
+        },
+      ],
+    },
+  ],
+};
diff --git a/@stellar/design-system-website/src/components/ColorPalette/index.tsx b/@stellar/design-system-website/src/components/ColorPalette/index.tsx
index d8739381..ece2dd38 100644
--- a/@stellar/design-system-website/src/components/ColorPalette/index.tsx
+++ b/@stellar/design-system-website/src/components/ColorPalette/index.tsx
@@ -33,6 +33,20 @@ export const ColorPalette = ({
     };
   }, []);
 
+  const renderColor = (color: string) => {
+    if (color.startsWith("rgba")) {
+      // Turn RGBA opacity into %
+      const opacity = color
+        .match(/\((.*?)\)/)[1]
+        .split(",")[3]
+        .trim();
+
+      return `${Number(opacity) * 100}%`;
+    }
+
+    return color;
+  };
+
   if (!theme) {
     return null;
   }
@@ -50,7 +64,9 @@ export const ColorPalette = ({
             }
           ></div>
           <div className="ColorPalette__color__name">{c.name}</div>
-          <div className="ColorPalette__color__hex">{c.hex[theme]}</div>
+          <div className="ColorPalette__color__hex">
+            {renderColor(c.hex[theme])}
+          </div>
         </div>
       ))}
     </div>
diff --git a/@stellar/design-system-website/src/components/ColorPalette/styles.css b/@stellar/design-system-website/src/components/ColorPalette/styles.css
index b0e2aeda..20f1ef8b 100644
--- a/@stellar/design-system-website/src/components/ColorPalette/styles.css
+++ b/@stellar/design-system-website/src/components/ColorPalette/styles.css
@@ -1,6 +1,6 @@
 .ColorPalette {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(5.75rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
   gap: 0.5rem;
 }
 
diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
index a7a19819..ca02d9ca 100644
--- a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
+++ b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
@@ -12,10 +12,11 @@ import { badgePreview } from "@site/src/componentPreview/badgePreview";
 import { bannerPreview } from "@site/src/componentPreview/bannerPreview";
 import { buttonPreview } from "@site/src/componentPreview/buttonPreview";
 import { buttonPresetPreview } from "@site/src/componentPreview/buttonPresetPreview";
-import { captionPreview } from "@site/src/componentPreview/captionPreview";
 import { cardPreview } from "@site/src/componentPreview/cardPreview";
 import { checkboxPreview } from "@site/src/componentPreview/checkboxPreview";
+import { codePreview } from "@site/src/componentPreview/codePreview";
 import { copyTextPreview } from "@site/src/componentPreview/copyTextPreview";
+import { displayPreview } from "@site/src/componentPreview/displayPreview";
 import { headingPreview } from "@site/src/componentPreview/headingPreview";
 import { iconButtonPreview } from "@site/src/componentPreview/iconButtonPreview";
 import { inputPreview } from "@site/src/componentPreview/inputPreview";
@@ -26,14 +27,13 @@ import { modalPreview } from "@site/src/componentPreview/modalPreview";
 import { navButtonPreview } from "@site/src/componentPreview/navButtonPreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
 import { paginationPreview } from "@site/src/componentPreview/paginationPreview";
-import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { profilePreview } from "@site/src/componentPreview/profilePreview";
 import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview";
 import { radioButtonPreview } from "@site/src/componentPreview/radioButtonPreview";
 import { selectPreview } from "@site/src/componentPreview/selectPreview";
 import { tablePreview } from "@site/src/componentPreview/tablePreview";
 import { textareaPreview } from "@site/src/componentPreview/textareaPreview";
-import { titlePreview } from "@site/src/componentPreview/titlePreview";
+import { textPreview } from "@site/src/componentPreview/textPreview";
 import { togglePreview } from "@site/src/componentPreview/togglePreview";
 import { tooltipPreview } from "@site/src/componentPreview/tooltipPreview";
 
@@ -47,12 +47,13 @@ const previews: { [key: string]: ComponentPreview } = {
   Banner: bannerPreview,
   Button: buttonPreview,
   ButtonPreset: buttonPresetPreview,
-  Caption: captionPreview,
   Card: cardPreview,
   Checkbox: checkboxPreview,
+  Code: codePreview,
   Content: layoutPreview,
   CopyText: copyTextPreview,
   Footer: layoutPreview,
+  Display: displayPreview,
   Heading: headingPreview,
   Header: layoutPreview,
   IconButton: iconButtonPreview,
@@ -65,14 +66,13 @@ const previews: { [key: string]: ComponentPreview } = {
   NavButton: navButtonPreview,
   Notification: notificationPreview,
   Pagination: paginationPreview,
-  Paragraph: paragraphPreview,
   Profile: profilePreview,
   ProjectLogo: projectLogoPreview,
   RadioButton: radioButtonPreview,
   Select: selectPreview,
   Table: tablePreview,
   Textarea: textareaPreview,
-  Title: titlePreview,
+  Text: textPreview,
   Toggle: togglePreview,
   Tooltip: tooltipPreview,
 };
@@ -119,7 +119,7 @@ export const PreviewBlock = ({
   children: React.ReactElement;
 }) => {
   const [sds, setSds] = useState<any>({});
-  const { Checkbox, Select, Notification, Button, Modal } = sds;
+  const { Checkbox, Select, Notification, Text, Button, Modal } = sds;
 
   // Importing SDS here because we need it async for server-side-rendering
   useEffect(() => {
@@ -244,7 +244,7 @@ export const PreviewBlock = ({
   );
 
   const renderPreview = () => {
-    // Need to handle Notification manually because of name collision that
+    // Need to handle these manually because of name collision that
     // breaks rendering
     if (componentName === "Notification") {
       return Notification ? (
@@ -252,6 +252,14 @@ export const PreviewBlock = ({
       ) : null;
     }
 
+    if (componentName === "Text") {
+      return Text ? (
+        <Text as="p" size="xs" {...props}>
+          Text
+        </Text>
+      ) : null;
+    }
+
     // Need to handle Modal manually because of button on click trigger to show
     // or hide
     if (componentName === "Modal") {
diff --git a/@stellar/design-system/src/components/Typography/index.tsx b/@stellar/design-system/src/components/Typography/index.tsx
index e3755d8e..eaa9e357 100644
--- a/@stellar/design-system/src/components/Typography/index.tsx
+++ b/@stellar/design-system/src/components/Typography/index.tsx
@@ -1,157 +1,175 @@
 import "./styles.scss";
 
 // =============================================================================
-// Heading
+// Display
 // =============================================================================
 /** */
-export interface HeadingProps {
-  /** Heading level h1-h6 */
-  as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export interface DisplayProps {
+  /** Display as `div` or `span` @defaultValue `div` */
+  as?: "div" | "span";
   /** Additional classes */
   addlClassName?: string;
-  /** Heading size */
-  size: "xxl" | "xl" | "lg" | "md" | "sm" | "xs";
-  /** Heading text */
+  /** Display size */
+  size: "xl" | "lg" | "md" | "sm" | "xs";
+  /** Display font weight @defaultValue `regular` */
+  weight?: "bold" | "semi-bold" | "medium" | "regular";
+  /** Display text */
   children: string | React.ReactNode;
 }
 
-interface HProps
-  extends HeadingProps,
-    React.HtmlHTMLAttributes<HTMLHeadingElement> {
+interface DProps
+  extends DisplayProps,
+    React.HtmlHTMLAttributes<HTMLDivElement | HTMLSpanElement> {
   children: string | React.ReactNode;
 }
 
 /**
- * Use `Heading` for HTML headings `h1` through `h6`.
+ * Use `Display` for generic titles and captions using `div` and `span` elements.
  */
-export const Heading: React.FC<HProps> = ({
+export const Display: React.FC<DProps> = ({
   addlClassName,
-  as: HtmlTag,
+  as: HtmlTag = "div",
   size,
+  weight = "regular",
   children,
   ...props
-}): JSX.Element => (
+}) => (
   <HtmlTag
-    className={`Heading Heading--${size} ${addlClassName || ""}`}
+    className={`Display Display--${size} ${
+      weight !== "regular" ? `Display--${weight}` : ""
+    } ${addlClassName || ""}`}
     {...props}
   >
     {children}
   </HtmlTag>
 );
 
-Heading.displayName = "Heading";
+Display.displayName = "Display";
 
 // =============================================================================
-// Caption
+// Heading
 // =============================================================================
 /** */
-export interface CaptionProps {
-  /** Caption size */
-  size: "lg" | "md" | "sm" | "xs";
+export interface HeadingProps {
+  /** Heading level h1-h6 */
+  as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
   /** Additional classes */
   addlClassName?: string;
-  /** Caption text */
+  /** Heading size */
+  size: "xl" | "lg" | "md" | "sm" | "xs";
+  /** Heading font weight @defaultValue `regular` */
+  weight?: "bold" | "semi-bold" | "medium" | "regular";
+  /** Heading text */
   children: string | React.ReactNode;
 }
 
-interface CProps
-  extends CaptionProps,
-    React.HtmlHTMLAttributes<HTMLDivElement> {
+interface HProps
+  extends HeadingProps,
+    React.HtmlHTMLAttributes<HTMLHeadingElement> {
   children: string | React.ReactNode;
 }
 
 /**
- * Use the `Caption` component for eyebrow subtitles paired with a title and
- * secondary accent text in elements like badges and network status.
+ * Use `Heading` for HTML headings `h1` through `h6`.
  */
-export const Caption: React.FC<CProps> = ({
+export const Heading: React.FC<HProps> = ({
   addlClassName,
+  as: HtmlTag,
   size,
+  weight = "regular",
   children,
   ...props
-}: CaptionProps) => (
-  <div className={`Caption Caption--${size} ${addlClassName || ""}`} {...props}>
+}) => (
+  <HtmlTag
+    className={`Heading Heading--${size} ${
+      weight !== "regular" ? `Heading--${weight}` : ""
+    } ${addlClassName || ""}`}
+    {...props}
+  >
     {children}
-  </div>
+  </HtmlTag>
 );
 
-Caption.displayName = "Caption";
+Heading.displayName = "Heading";
 
 // =============================================================================
-// Paragraph
+// Text
 // =============================================================================
 /** */
-export interface ParagraphProps {
+export interface TextProps {
+  /** Text as `p`, `div`, or `span` */
+  as: "p" | "div" | "span";
   /** Additional classes */
   addlClassName?: string;
-  /** Paragraph size */
-  size: "lg" | "md" | "sm" | "xs";
-  /** Render paragraph as div */
-  asDiv?: boolean;
-  /** Paragraph text */
+  /** Text size */
+  size: "xl" | "lg" | "md" | "sm" | "xs";
+  /** Text font weight @defaultValue `regular` */
+  weight?: "bold" | "semi-bold" | "medium" | "regular";
+  /** Text content */
   children: string | React.ReactNode;
 }
 
-interface PProps
-  extends ParagraphProps,
-    React.HtmlHTMLAttributes<HTMLParagraphElement | HTMLDivElement> {
+interface TProps
+  extends TextProps,
+    React.HtmlHTMLAttributes<
+      HTMLParagraphElement | HTMLDivElement | HTMLSpanElement
+    > {
   children: string | React.ReactNode;
 }
 
 /**
- * The text paragraph is an HTML `p` (or `div`) tag, not a custom component.
+ * `Text` is an HTML `p`, `div`, or `span` tag used to display text.
  */
-export const Paragraph: React.FC<PProps> = ({
+export const Text: React.FC<TProps> = ({
+  as: HtmlTag,
   addlClassName,
   size,
+  weight = "regular",
   children,
-  asDiv,
   ...props
-}: ParagraphProps) => {
-  const HtmlTag = asDiv ? "div" : "p";
-
-  return (
-    <HtmlTag
-      className={`Paragraph Paragraph--${size} ${addlClassName || ""}`}
-      {...props}
-    >
-      {children}
-    </HtmlTag>
-  );
-};
+}) => (
+  <HtmlTag
+    className={`Text Text--${size} ${
+      weight !== "regular" ? `Text--${weight}` : ""
+    } ${addlClassName || ""}`}
+    {...props}
+  >
+    {children}
+  </HtmlTag>
+);
 
-Paragraph.displayName = "Paragraph";
+Text.displayName = "Text";
 
 // =============================================================================
-// Title
+// Code
 // =============================================================================
 /** */
-export interface TitleProps {
+export interface CodeProps {
   /** Additional classes */
   addlClassName?: string;
-  /** Title size */
-  size: "lg" | "md" | "sm" | "xs";
-  /** Title text */
+  /** Code size */
+  size: "md" | "sm" | "xs";
+  /** Code content */
   children: string | React.ReactNode;
 }
 
-interface TProps extends TitleProps, React.HtmlHTMLAttributes<HTMLDivElement> {
+interface CProps extends CodeProps, React.HtmlHTMLAttributes<HTMLElement> {
   children: string | React.ReactNode;
 }
 
 /**
- * Use the `Title` component when a semantic heading is not needed. For example, in a
- * banner title, navigation item, label, etc.
+ * `Code` is an HTML `code` tag used to display text in computer code style
+ * (monospace font).
  */
-export const Title: React.FC<TProps> = ({
+export const Code: React.FC<CProps> = ({
   addlClassName,
   size,
   children,
   ...props
 }) => (
-  <div className={`Title Title--${size} ${addlClassName || ""}`} {...props}>
+  <code className={`Code Code--${size} ${addlClassName || ""}`} {...props}>
     {children}
-  </div>
+  </code>
 );
 
-Title.displayName = "Title";
+Code.displayName = "code";
diff --git a/@stellar/design-system/src/components/Typography/styles.scss b/@stellar/design-system/src/components/Typography/styles.scss
index 1207c54d..ac5030e0 100644
--- a/@stellar/design-system/src/components/Typography/styles.scss
+++ b/@stellar/design-system/src/components/Typography/styles.scss
@@ -1,69 +1,60 @@
 @use "../../utils.scss" as *;
 
+.Display,
 .Heading {
   font-family: var(--font-family-heading);
   font-weight: var(--font-weight-regular);
-  letter-spacing: 0;
+  letter-spacing: -4%;
   padding: 0;
+  margin: 0;
 
-  &--xxl {
-    font-size: pxToRem(40px);
-    line-height: pxToRem(48px);
-  }
+  // Size
   &--xl {
-    font-size: pxToRem(36px);
-    line-height: pxToRem(44px);
+    font-size: pxToRem(56px);
+    line-height: pxToRem(64px);
   }
   &--lg {
-    font-size: pxToRem(32px);
-    line-height: pxToRem(40px);
+    font-size: pxToRem(48px);
+    line-height: pxToRem(56px);
   }
   &--md {
-    font-size: pxToRem(28px);
-    line-height: pxToRem(36px);
+    font-size: pxToRem(40px);
+    line-height: pxToRem(48px);
   }
   &--sm {
-    font-size: pxToRem(24px);
-    line-height: pxToRem(32px);
+    font-size: pxToRem(32px);
+    line-height: pxToRem(40px);
   }
   &--xs {
-    font-size: pxToRem(20px);
-    line-height: pxToRem(28px);
+    font-size: pxToRem(24px);
+    line-height: pxToRem(32px);
   }
-}
 
-.Caption {
-  font-family: var(--font-family-base);
-  font-weight: var(--font-weight-semi-bold);
-  text-transform: uppercase;
-  letter-spacing: 0;
-
-  &--lg {
-    font-size: pxToRem(16px);
-    line-height: pxToRem(24px);
-  }
-  &--md {
-    font-size: pxToRem(14px);
-    line-height: pxToRem(22px);
+  // Font weight
+  &--bold {
+    font-weight: var(--font-weight-bold);
   }
-  &--sm {
-    font-size: pxToRem(12px);
-    line-height: pxToRem(20px);
+  &--semi-bold {
+    font-weight: var(--font-weight-semi-bold);
   }
-  &--xs {
-    font-size: pxToRem(10px);
-    line-height: pxToRem(16px);
+  &--medium {
+    font-weight: var(--font-weight-medium);
   }
 }
 
-p.Paragraph,
-div.Paragraph {
+p.Text,
+div.Text,
+span.Text {
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-regular);
   letter-spacing: 0;
   padding: 0;
   margin: 0;
 
+  &--xl {
+    font-size: pxToRem(20px);
+    line-height: pxToRem(28px);
+  }
   &--lg {
     font-size: pxToRem(18px);
     line-height: pxToRem(26px);
@@ -80,17 +71,24 @@ div.Paragraph {
     font-size: pxToRem(12px);
     line-height: pxToRem(20px);
   }
+
+  // Font weight
+  &--bold {
+    font-weight: var(--font-weight-bold);
+  }
+  &--semi-bold {
+    font-weight: var(--font-weight-semi-bold);
+  }
+  &--medium {
+    font-weight: var(--font-weight-medium);
+  }
 }
 
-.Title {
-  font-family: var(--font-family-base);
+code.Code {
+  font-family: var(--font-family-monospace);
   font-weight: var(--font-weight-medium);
   letter-spacing: 0;
 
-  &--lg {
-    font-size: pxToRem(18px);
-    line-height: pxToRem(26px);
-  }
   &--md {
     font-size: pxToRem(16px);
     line-height: pxToRem(24px);
@@ -101,6 +99,6 @@ div.Paragraph {
   }
   &--xs {
     font-size: pxToRem(12px);
-    line-height: pxToRem(20px);
+    line-height: pxToRem(18px);
   }
 }
diff --git a/@stellar/design-system/src/global.scss b/@stellar/design-system/src/global.scss
index b6eaf3f4..322fcf87 100644
--- a/@stellar/design-system/src/global.scss
+++ b/@stellar/design-system/src/global.scss
@@ -34,20 +34,13 @@
     font-size: 1rem;
     line-height: 1.75rem;
     margin: 0;
-    color: var(--color-gray-80);
+    color: inherit;
 
     &:not(:last-child) {
       margin-bottom: 1.5rem;
     }
   }
 
-  p {
-    &.Paragraph--secondary {
-      font-size: 0.875rem;
-      line-height: 1.375rem;
-    }
-  }
-
   ul {
     padding: 0 0 0 1rem;
     list-style-type: none;
@@ -64,15 +57,15 @@
   }
 
   code {
-    color: inherit;
+    color: var(--sds-clr-gray-11);
     font-family: var(--font-family-monospace);
-    border-radius: 0.1875rem;
-    border: 0.5px solid var(--color-gray-30);
-    background-color: var(--color-gray-10);
-    padding: 0.125em 0.25em;
-    font-size: 0.875em;
-    line-height: 1.5em;
     font-weight: var(--font-weight-medium);
+    font-size: 0.875em;
+    line-height: inherit;
+    border-radius: 0.375rem;
+    border: 1px solid var(--sds-clr-gray-06);
+    background-color: var(--sds-clr-gray-03);
+    padding: 0.125rem 0.625rem;
     display: inline;
 
     &[data-break] {
diff --git a/@stellar/design-system/src/theme.scss b/@stellar/design-system/src/theme.scss
index f9cb9aa1..d43f5dc0 100644
--- a/@stellar/design-system/src/theme.scss
+++ b/@stellar/design-system/src/theme.scss
@@ -4,122 +4,219 @@
 @mixin theme-light {
   color-scheme: light;
 
-  // Purple
-  --color-purple-10: #fbfaff;
-  --color-purple-20: #f5f2ff;
-  --color-purple-30: #ede9fe;
-  --color-purple-40: #e4defc;
-  --color-purple-50: #aa99ec;
-  --color-purple-60: #6e56cf;
-  --color-purple-70: #5746af;
-  --color-purple-80: #20134b;
+  // Gray
+  --sds-clr-gray-01: #fcfcfc;
+  --sds-clr-gray-02: #f8f8f8;
+  --sds-clr-gray-03: #f3f3f3;
+  --sds-clr-gray-04: #ededed;
+  --sds-clr-gray-05: #e8e8e8;
+  --sds-clr-gray-06: #e2e2e2;
+  --sds-clr-gray-07: #dbdbdb;
+  --sds-clr-gray-08: #c7c7c7;
+  --sds-clr-gray-09: #8f8f8f;
+  --sds-clr-gray-10: #858585;
+  --sds-clr-gray-11: #6f6f6f;
+  --sds-clr-gray-12: #171717;
 
-  // White
-  --color-white: #ffffff;
-
-  // Grayscale
-  --color-gray-00: #ffffff;
-  --color-gray-10: #f9f8f9;
-  --color-gray-20: #f4f2f4;
-  --color-gray-30: #eeedef;
-  --color-gray-40: #e9e8ea;
-  --color-gray-50: #c8c7cb;
-  --color-gray-60: #908e96;
-  --color-gray-70: #6f6e77;
-  --color-gray-80: #1a1523;
-  --color-gray-90: #000000;
+  // Lilac
+  --sds-clr-lilac-01: #fdfcfe;
+  --sds-clr-lilac-02: #fbfaff;
+  --sds-clr-lilac-03: #f5f2ff;
+  --sds-clr-lilac-04: #ede9fe;
+  --sds-clr-lilac-05: #e4defc;
+  --sds-clr-lilac-06: #d7cff9;
+  --sds-clr-lilac-07: #c4b8f3;
+  --sds-clr-lilac-08: #aa99ec;
+  --sds-clr-lilac-09: #6e56cf;
+  --sds-clr-lilac-10: #644fc1;
+  --sds-clr-lilac-11: #5746af;
+  --sds-clr-lilac-12: #20134b;
+
+  // Gold
+  --sds-clr-gold-01: #fdfdf9;
+  --sds-clr-gold-02: #fffce8;
+  --sds-clr-gold-03: #fffbd1;
+  --sds-clr-gold-04: #fff8bb;
+  --sds-clr-gold-05: #fef2a4;
+  --sds-clr-gold-06: #f9e68c;
+  --sds-clr-gold-07: #efd36c;
+  --sds-clr-gold-08: #ebbc00;
+  --sds-clr-gold-09: #fdda24;
+  --sds-clr-gold-10: #f7ce00;
+  --sds-clr-gold-11: #946800;
+  --sds-clr-gold-12: #35290f;
+
+  // Base
+  --sds-clr-base-00: #ffffff;
+  --sds-clr-base-01: #000000;
+
+  // Overlay
+  --sds-overlay-01: rgba(0, 0, 0, 0.1);
+  --sds-overlay-02: rgba(0, 0, 0, 0.2);
+  --sds-overlay-03: rgba(0, 0, 0, 0.3);
+  --sds-overlay-04: rgba(0, 0, 0, 0.4);
+  --sds-overlay-05: rgba(0, 0, 0, 0.5);
+  --sds-overlay-06: rgba(0, 0, 0, 0.6);
+  --sds-overlay-07: rgba(0, 0, 0, 0.7);
+  --sds-overlay-08: rgba(0, 0, 0, 0.8);
+  --sds-overlay-09: rgba(0, 0, 0, 0.9);
+  --sds-overlay-10: rgba(0, 0, 0, 1);
 
   // Green
-  --color-green-10: #f2fcf5;
-  --color-green-20: #e9f9ee;
-  --color-green-30: #ddf3e4;
-  --color-green-40: #ccebd7;
-  --color-green-50: #5bb98c;
-  --color-green-60: #30a46c;
-  --color-green-70: #18794e;
-  --color-green-80: #153226;
-
-  // Yellow
-  --color-yellow-10: #fff9ed;
-  --color-yellow-20: #fff4d5;
-  --color-yellow-30: #ffecbc;
-  --color-yellow-40: #ffe3a2;
-  --color-yellow-50: #ffb224;
-  --color-yellow-60: #ee9d2b;
-  --color-yellow-70: #ad5700;
-  --color-yellow-80: #4e2009;
+  --sds-clr-green-01: #fbfefc;
+  --sds-clr-green-02: #f2fcf5;
+  --sds-clr-green-03: #e9f9ee;
+  --sds-clr-green-04: #ddf3e4;
+  --sds-clr-green-05: #ccebd7;
+  --sds-clr-green-06: #b4dfc4;
+  --sds-clr-green-07: #92ceac;
+  --sds-clr-green-08: #5bb98c;
+  --sds-clr-green-09: #30a46c;
+  --sds-clr-green-10: #299764;
+  --sds-clr-green-11: #18794e;
+  --sds-clr-green-12: #153226;
+
+  // Amber
+  --sds-clr-amber-01: #fefdfb;
+  --sds-clr-amber-02: #fff9ed;
+  --sds-clr-amber-03: #fff4d5;
+  --sds-clr-amber-04: #ffecbc;
+  --sds-clr-amber-05: #ffe3a2;
+  --sds-clr-amber-06: #ffd386;
+  --sds-clr-amber-07: #f3ba63;
+  --sds-clr-amber-08: #ee9d2b;
+  --sds-clr-amber-09: #ffb224;
+  --sds-clr-amber-10: #ffa01c;
+  --sds-clr-amber-11: #ad5700;
+  --sds-clr-amber-12: #4e2009;
 
   // Red
-  --color-red-10: #fff8f8;
-  --color-red-20: #ffefef;
-  --color-red-30: #ffe5e5;
-  --color-red-40: #fdd8d8;
-  --color-red-50: #eb9091;
-  --color-red-60: #e5484d;
-  --color-red-70: #cd2b31;
-  --color-red-80: #381316;
+  --sds-clr-red-01: #fffcfc;
+  --sds-clr-red-02: #fff8f8;
+  --sds-clr-red-03: #ffefef;
+  --sds-clr-red-04: #ffe5e5;
+  --sds-clr-red-05: #fdd8d8;
+  --sds-clr-red-06: #f9c6c6;
+  --sds-clr-red-07: #f3aeaf;
+  --sds-clr-red-08: #eb9091;
+  --sds-clr-red-09: #e5484d;
+  --sds-clr-red-10: #dc3d43;
+  --sds-clr-red-11: #cd2b31;
+  --sds-clr-red-12: #381316;
+
+  // White
+  --sds-clr-white: #ffffff;
 }
 
 @mixin theme-dark {
   color-scheme: dark;
 
-  // Purple
-  --color-purple-10: #17151f;
-  --color-purple-20: #1c172b;
-  --color-purple-30: #2c2250;
-  --color-purple-40: #32275f;
-  --color-purple-50: #634cc9;
-  --color-purple-60: #7c66dc;
-  --color-purple-70: #9e8cfc;
-  --color-purple-80: #f1eefe;
+  // Gray
+  --sds-clr-gray-01: #161616;
+  --sds-clr-gray-02: #1c1c1c;
+  --sds-clr-gray-03: #232323;
+  --sds-clr-gray-04: #282828;
+  --sds-clr-gray-05: #2e2e2e;
+  --sds-clr-gray-06: #343434;
+  --sds-clr-gray-07: #3e3e3e;
+  --sds-clr-gray-08: #505050;
+  --sds-clr-gray-09: #707070;
+  --sds-clr-gray-10: #7e7e7e;
+  --sds-clr-gray-11: #a0a0a0;
+  --sds-clr-gray-12: #ededed;
 
-  // White
-  --color-white: #ffffff;
-
-  // Grayscale
-  --color-gray-00: #000000;
-  --color-gray-10: #161618;
-  --color-gray-20: #1c1c1f;
-  --color-gray-30: #28282c;
-  --color-gray-40: #2e2e32;
-  --color-gray-50: #706f78;
-  --color-gray-60: #7e7d86;
-  --color-gray-70: #a09fa6;
-  --color-gray-80: #ededef;
-  --color-gray-90: #ffffff;
+  // Lilac
+  --sds-clr-lilac-01: #17151f;
+  --sds-clr-lilac-02: #1c172b;
+  --sds-clr-lilac-03: #251e40;
+  --sds-clr-lilac-04: #2c2250;
+  --sds-clr-lilac-05: #32275f;
+  --sds-clr-lilac-06: #392c72;
+  --sds-clr-lilac-07: #443592;
+  --sds-clr-lilac-08: #5842c3;
+  --sds-clr-lilac-09: #6e56cf;
+  --sds-clr-lilac-10: #7c66dc;
+  --sds-clr-lilac-11: #9e8cfc;
+  --sds-clr-lilac-12: #f1eefe;
+
+  // Gold
+  --sds-clr-gold-01: #1c1500;
+  --sds-clr-gold-02: #221a00;
+  --sds-clr-gold-03: #2c2100;
+  --sds-clr-gold-04: #352800;
+  --sds-clr-gold-05: #3e3000;
+  --sds-clr-gold-06: #493c00;
+  --sds-clr-gold-07: #594a05;
+  --sds-clr-gold-08: #705e00;
+  --sds-clr-gold-09: #fdda24;
+  --sds-clr-gold-10: #ffef5c;
+  --sds-clr-gold-11: #f0c000;
+  --sds-clr-gold-12: #fffad1;
+
+  // Base
+  --sds-clr-base-01: #000000;
+  --sds-clr-base-02: #ffffff;
+
+  // Overlay
+  --sds-overlay-01: rgba(255, 255, 255, 0.1);
+  --sds-overlay-02: rgba(255, 255, 255, 0.2);
+  --sds-overlay-03: rgba(255, 255, 255, 0.3);
+  --sds-overlay-04: rgba(255, 255, 255, 0.4);
+  --sds-overlay-05: rgba(255, 255, 255, 0.5);
+  --sds-overlay-06: rgba(255, 255, 255, 0.6);
+  --sds-overlay-07: rgba(255, 255, 255, 0.7);
+  --sds-overlay-08: rgba(255, 255, 255, 0.8);
+  --sds-overlay-09: rgba(255, 255, 255, 0.9);
+  --sds-overlay-10: rgba(255, 255, 255, 1);
 
   // Green
-  --color-green-10: #0d1912;
-  --color-green-20: #0c1f17;
-  --color-green-30: #113123;
-  --color-green-40: #133929;
-  --color-green-50: #30a46c;
-  --color-green-60: #3cb179;
-  --color-green-70: #4cc38a;
-  --color-green-80: #e5fbeb;
-
-  // Yellow
-  --color-yellow-10: #1f1300;
-  --color-yellow-20: #271700;
-  --color-yellow-30: #3f2200;
-  --color-yellow-40: #4a2900;
-  --color-yellow-50: #f1a10d;
-  --color-yellow-60: #ffb224;
-  --color-yellow-70: #ffcb47;
-  --color-yellow-80: #fef3dd;
+  --sds-clr-green-01: #0d1912;
+  --sds-clr-green-02: #0c1f17;
+  --sds-clr-green-03: #0f291e;
+  --sds-clr-green-04: #113123;
+  --sds-clr-green-05: #133929;
+  --sds-clr-green-06: #164430;
+  --sds-clr-green-07: #1b543a;
+  --sds-clr-green-08: #236e4a;
+  --sds-clr-green-09: #30a46c;
+  --sds-clr-green-10: #3cb179;
+  --sds-clr-green-11: #4cc38a;
+  --sds-clr-green-12: #e5fbeb;
+
+  // Amber
+  --sds-clr-amber-01: #1f1300;
+  --sds-clr-amber-02: #271700;
+  --sds-clr-amber-03: #341c00;
+  --sds-clr-amber-04: #3f2200;
+  --sds-clr-amber-05: #4a2900;
+  --sds-clr-amber-06: #573300;
+  --sds-clr-amber-07: #693f05;
+  --sds-clr-amber-08: #824e00;
+  --sds-clr-amber-09: #ffb224;
+  --sds-clr-amber-10: #ffcb47;
+  --sds-clr-amber-11: #f1a10d;
+  --sds-clr-amber-12: #fef3dd;
 
   // Red
-  --color-red-10: #1f1315;
-  --color-red-20: #291415;
-  --color-red-30: #481a1d;
-  --color-red-40: #541b1f;
-  --color-red-50: #e5484d;
-  --color-red-60: #f2555a;
-  --color-red-70: #ff6369;
-  --color-red-80: #feecee;
+  --sds-clr-red-01: #1f1315;
+  --sds-clr-red-02: #291415;
+  --sds-clr-red-03: #3c181a;
+  --sds-clr-red-04: #481a1d;
+  --sds-clr-red-05: #541b1f;
+  --sds-clr-red-06: #671e22;
+  --sds-clr-red-07: #822025;
+  --sds-clr-red-08: #aa2429;
+  --sds-clr-red-09: #e5484d;
+  --sds-clr-red-10: #f2555a;
+  --sds-clr-red-11: #ff6369;
+  --sds-clr-red-12: #feecee;
+
+  // White
+  --sds-clr-white: #ffffff;
 }
 
 @mixin theme-common {
+  // TODO: update var names using --sds- prefix
   // Font size
   --font-size: 16px;
   --font-size-secondary: 14px;
@@ -129,11 +226,12 @@
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semi-bold: 600;
+  --font-weight-bold: 700;
 
   // Font family
-  --font-family-heading: "Inter Tight", sans-serif;
+  --font-family-heading: "Inter", sans-serif;
   --font-family-base: "Inter", sans-serif;
-  --font-family-monospace: "Roboto Mono", monospace;
+  --font-family-monospace: "Inconsolata", monospace;
 
   // Z-index
   --z-index-tooltip: 20;