From f8fd1e475cafc42696642c1022eb071182079535 Mon Sep 17 00:00:00 2001
From: Emily Jablonski <65367387+emilyjablonski@users.noreply.github.com>
Date: Tue, 20 Jun 2023 17:17:29 -0600
Subject: [PATCH] fix: fix style conflicts (#43)

---
 documentation/components/Swatch.tsx           |   6 +-
 documentation/storybook.css                   |  20 +-
 src/blocks/Alert.scss                         |  16 +-
 src/blocks/Alert.tsx                          |   2 +-
 src/blocks/Card.scss                          |  32 +--
 src/blocks/Card.tsx                           |   8 +-
 src/blocks/Message.scss                       |  16 +-
 src/blocks/Message.tsx                        |   2 +-
 src/blocks/Toast.scss                         |  28 +--
 src/blocks/Toast.tsx                          |  22 +-
 src/blocks/__stories__/Alert.docs.mdx         |  14 +-
 src/blocks/__stories__/Alert.stories.tsx      |   6 +-
 src/blocks/__stories__/Card.docs.mdx          |  18 +-
 src/blocks/__stories__/Card.stories.tsx       |  22 +-
 src/blocks/__stories__/Message.docs.mdx       |  14 +-
 src/blocks/__stories__/Message.stories.tsx    |   4 +-
 src/blocks/__stories__/Toast.docs.mdx         |  22 +-
 src/blocks/__tests__/Toast.test.tsx           |  10 +-
 src/blocks/shared/CommonMessage.scss          |  61 ++---
 src/blocks/shared/CommonMessage.tsx           |   2 +-
 src/expandableText/ExpandableText.scss        |   9 +-
 src/expandableText/ExpandableText.tsx         |   4 +-
 src/forms/FieldValue.scss                     |  18 +-
 src/forms/FieldValue.tsx                      |   2 +-
 src/forms/FormErrorMessage.scss               |   6 +-
 src/forms/FormErrorMessage.tsx                |   2 +-
 src/forms/__stories_/FieldValue.docs.mdx      |  20 +-
 src/forms/__stories_/FieldValue.stories.tsx   |   6 +-
 .../__stories_/FormErrorMessage.docs.mdx      |   4 +-
 .../__stories_/FormErrorMessage.stories.tsx   |   6 +-
 src/global/app-css.scss                       |  16 +-
 src/global/text.scss                          |  46 ++--
 src/global/tokens/borders.scss                |  26 +-
 src/global/tokens/colors.scss                 | 220 ++++++++--------
 src/global/tokens/fonts.scss                  | 113 ++++-----
 src/global/tokens/screens.scss                |  12 +-
 src/global/tokens/sizes.scss                  | 106 ++++----
 src/icons/Icon.scss                           |   4 +-
 src/icons/Icon.tsx                            |   2 +-
 src/icons/__stories__/Icon.stories.tsx        |   8 +-
 src/layout/Grid.scss                          |  28 +--
 src/layout/Grid.tsx                           |  24 +-
 src/layout/__stories__/Grid.docs.mdx          |  16 +-
 src/layout/__stories__/Grid.stories.tsx       |  40 +--
 src/navigation/Tabs.scss                      |  57 +++--
 src/navigation/Tabs.tsx                       |  24 +-
 src/navigation/__stories__/Tabs.docs.mdx      |  42 ++--
 src/navigation/__stories__/Tabs.stories.tsx   |   4 +-
 src/stories/tokens/colors.stories.mdx         | 237 +++++++++---------
 src/stories/tokens/typography.stories.mdx     |  95 +++----
 src/text/HeadingGroup.scss                    |   6 +-
 src/text/HeadingGroup.tsx                     |   2 +-
 src/text/__stories__/Heading.docs.mdx         |  20 +-
 src/text/__stories__/HeadingGroup.docs.mdx    |   4 +-
 src/text/__stories__/HeadingGroup.stories.tsx |  27 +-
 55 files changed, 817 insertions(+), 764 deletions(-)

diff --git a/documentation/components/Swatch.tsx b/documentation/components/Swatch.tsx
index 5ba62e3..2f1647c 100644
--- a/documentation/components/Swatch.tsx
+++ b/documentation/components/Swatch.tsx
@@ -5,12 +5,12 @@ export const Swatch = (props: { color: string; border?: boolean; label?: string
     <span
       style={{
         backgroundColor: `var(--${props.color})`,
-        width: "var(--bloom-s6)",
-        borderRadius: "var(--bloom-rounded-sm)",
+        width: "var(--seeds-s6)",
+        borderRadius: "var(--seeds-rounded-sm)",
         display: "block",
         borderWidth: "1px",
         borderStyle: "solid",
-        borderColor: props.border ? "var(--bloom-color-gray-500)" : "transparent",
+        borderColor: props.border ? "var(--seeds-color-gray-500)" : "transparent",
       }}
       title={props.color}
     >
diff --git a/documentation/storybook.css b/documentation/storybook.css
index 9e7df6e..1b21e07 100644
--- a/documentation/storybook.css
+++ b/documentation/storybook.css
@@ -1,5 +1,5 @@
 :root {
-  --link-color: #1EA7FD;
+  --link-color: #1ea7fd;
 }
 
 .sbdocs-table {
@@ -15,22 +15,22 @@
 }
 
 :is(.sbdocs-table, .docblock-argstable) {
-  font-family: var(--bloom-font-sans) !important;
-  font-size: var(--bloom-font-size-sm) !important;
-  border: 1px solid var(--bloom-border-color);
-  color: var(--bloom-text-color-darker);
+  font-family: var(--seeds-font-sans) !important;
+  font-size: var(--seeds-font-size-sm) !important;
+  border: 1px solid var(--seeds-border-color);
+  color: var(--seeds-text-color-darker);
 }
 
 :is(.sbdocs-table, .docblock-argstable) thead th {
-  font-size: var(--bloom-font-size-base);
+  font-size: var(--seeds-font-size-base);
   text-align: left;
   text-transform: uppercase;
-  color: var(--bloom-input-text-placeholder-color) !important;
-  background-color: var(--bloom-color-primary-lighter);
-  border-bottom: 1px solid var(--bloom-border-color) !important;
+  color: var(--seeds-input-text-placeholder-color) !important;
+  background-color: var(--seeds-color-primary-lighter);
+  border-bottom: 1px solid var(--seeds-border-color) !important;
   border-radius: none !important;
 }
 
 :is(.sbdocs-table, .docblock-argstable) :is(th, td) {
   border-inline: none !important;
-}
\ No newline at end of file
+}
diff --git a/src/blocks/Alert.scss b/src/blocks/Alert.scss
index d3afa80..e3664f8 100644
--- a/src/blocks/Alert.scss
+++ b/src/blocks/Alert.scss
@@ -1,14 +1,14 @@
-.alert {
-  --alert-padding: var(--bloom-s4);
+.seeds-alert {
+  --alert-padding: var(--seeds-s4);
   --alert-border-radius: 0;
   --alert-border: none;
-  --alert-flex-gap: var(--bloom-s3);
+  --alert-flex-gap: var(--seeds-s3);
   --alert-icon-size: 1em;
-  --alert-max-width: var(--bloom-width-sm);
-  --alert-font: var(--bloom-font-sans);
-  --alert-font-size: var(--bloom-type-caption-size);
-  --alert-link-gap: var(--bloom-s1);
-  --alert-link-font-weight: var(--bloom-font-weight-semibold);
+  --alert-max-width: var(--seeds-width-sm);
+  --alert-font: var(--seeds-font-sans);
+  --alert-font-size: var(--seeds-type-caption-size);
+  --alert-link-gap: var(--seeds-s1);
+  --alert-link-font-weight: var(--seeds-font-weight-semibold);
 
   --common-message-padding: var(--alert-padding);
   --common-message-border-radius: var(--alert-border-radius);
diff --git a/src/blocks/Alert.tsx b/src/blocks/Alert.tsx
index a7db996..c7eafe4 100644
--- a/src/blocks/Alert.tsx
+++ b/src/blocks/Alert.tsx
@@ -6,7 +6,7 @@ import "./Alert.scss"
 interface AlertProps extends Omit<CommonMessageProps, "role" | "closeable"> {}
 
 const Alert = (props: AlertProps) => {
-  const classNames = ["alert"]
+  const classNames = ["seeds-alert"]
   if (props.className) classNames.push(props.className)
 
   return <CommonMessage {...props} role="alert" closeable className={classNames.join(" ")} />
diff --git a/src/blocks/Card.scss b/src/blocks/Card.scss
index 24cc198..4b493d5 100644
--- a/src/blocks/Card.scss
+++ b/src/blocks/Card.scss
@@ -1,23 +1,23 @@
-.card {
+.seeds-card {
   /* Component Variables */
-  --card-spacing-sm: var(--bloom-s4);
-  --card-spacing-md: var(--bloom-s6);
-  --card-spacing-lg: var(--bloom-s8);
-  --card-spacing-xl: var(--bloom-s12); 
+  --card-spacing-sm: var(--seeds-s4);
+  --card-spacing-md: var(--seeds-s6);
+  --card-spacing-lg: var(--seeds-s8);
+  --card-spacing-xl: var(--seeds-s12);
 
   --card-spacing: var(--card-spacing-md);
 
-  --card-background-color: var(--bloom-color-white);
-  --card-border-radius: var(--bloom-rounded-lg);
-  --card-border-width: var(--bloom-border-1);
-  --card-border-color: var(--bloom-color-gray-450);
+  --card-background-color: var(--seeds-color-white);
+  --card-border-radius: var(--seeds-rounded-lg);
+  --card-border-width: var(--seeds-border-1);
+  --card-border-color: var(--seeds-color-gray-450);
   --card-divider-width: var(--card-border-width);
   --card-divider-color: var(--card-border-color);
 
   --card-content-padding-block: var(--card-spacing);
   --card-content-padding-inline-desktop: var(--card-content-padding-block);
   --card-content-padding-inline-mobile: var(--card-content-padding-block);
-  
+
   --card-header-padding-block: var(--card-spacing);
   --card-header-padding-inline-desktop: var(--card-header-padding-block);
   --card-header-padding-inline-mobile: var(--card-header-padding-block);
@@ -63,7 +63,7 @@
   }
 }
 
-.card-header {
+.seeds-card-header {
   padding-block-start: var(--card-header-padding-block);
   padding-inline: var(--card-header-padding-inline);
 
@@ -85,7 +85,7 @@
   }
 }
 
-.card-section {
+.seeds-card-section {
   padding-block-start: var(--card-content-padding-block);
   padding-inline: var(--card-content-padding-inline);
 
@@ -118,12 +118,12 @@
   }
 }
 
-.card-section:not([data-divider]):last-child {
+.seeds-card-section:not([data-divider]):last-child {
   padding-block-end: var(--card-content-padding-block);
 }
 
-.card-header,
-.card-footer {
+.seeds-card-header,
+.seeds-card-footer {
   > * {
     margin-block: 0;
   }
@@ -133,7 +133,7 @@
   }
 }
 
-.card-footer {
+.seeds-card-footer {
   background-color: var(--card-footer-background-color);
 
   &:not([data-divider]):first-of-type {
diff --git a/src/blocks/Card.tsx b/src/blocks/Card.tsx
index 39d055b..c28381f 100644
--- a/src/blocks/Card.tsx
+++ b/src/blocks/Card.tsx
@@ -12,7 +12,7 @@ export interface CardHeaderProps {
 }
 
 const CardHeader = (props: CardHeaderProps) => {
-  const classNames = ["card-header"]
+  const classNames = ["seeds-card-header"]
   if (props.className) classNames.push(props.className)
 
   return (
@@ -33,7 +33,7 @@ export interface CardSectionProps {
 }
 
 const CardSection = (props: CardSectionProps) => {
-  const classNames = ["card-section"]
+  const classNames = ["seeds-card-section"]
   if (props.className) classNames.push(props.className)
 
   return (
@@ -54,7 +54,7 @@ export interface CardFooterProps {
 }
 
 const CardFooter = (props: CardFooterProps) => {
-  const classNames = ["card-footer"]
+  const classNames = ["seeds-card-footer"]
   if (props.className) classNames.push(props.className)
 
   return (
@@ -77,7 +77,7 @@ export interface CardProps {
 }
 
 const Card = (props: CardProps) => {
-  const classNames = ["card"]
+  const classNames = ["seeds-card"]
   const spacing = props.spacing || "base"
   if (props.className) classNames.push(props.className)
 
diff --git a/src/blocks/Message.scss b/src/blocks/Message.scss
index 8c7daf3..1a81896 100644
--- a/src/blocks/Message.scss
+++ b/src/blocks/Message.scss
@@ -1,14 +1,14 @@
-.message {
-  --message-padding: var(--bloom-s4);
+.seeds-message {
+  --message-padding: var(--seeds-s4);
   --message-border-radius: 0;
   --message-border: none;
-  --message-flex-gap: var(--bloom-s3);
+  --message-flex-gap: var(--seeds-s3);
   --message-icon-size: 1em;
-  --message-max-width: var(--bloom-width-sm);
-  --message-font: var(--bloom-font-sans);
-  --message-font-size: var(--bloom-type-caption-size);
-  --message-link-gap: var(--bloom-s1);
-  --message-link-font-weight: var(--bloom-font-weight-semibold);
+  --message-max-width: var(--seeds-width-sm);
+  --message-font: var(--seeds-font-sans);
+  --message-font-size: var(--seeds-type-caption-size);
+  --message-link-gap: var(--seeds-s1);
+  --message-link-font-weight: var(--seeds-font-weight-semibold);
 
   --common-message-padding: var(--message-padding);
   --common-message-border-radius: var(--message-border-radius);
diff --git a/src/blocks/Message.tsx b/src/blocks/Message.tsx
index fdb8caf..f8030be 100644
--- a/src/blocks/Message.tsx
+++ b/src/blocks/Message.tsx
@@ -4,7 +4,7 @@ import CommonMessage, { CommonMessageProps } from "./shared/CommonMessage"
 import "./Message.scss"
 
 const Message = (props: CommonMessageProps) => {
-  const classNames = ["message"]
+  const classNames = ["seeds-message"]
   if (props.className) classNames.push(props.className)
 
   return <CommonMessage {...props} className={classNames.join(" ")} />
diff --git a/src/blocks/Toast.scss b/src/blocks/Toast.scss
index 6c9084f..0361a79 100644
--- a/src/blocks/Toast.scss
+++ b/src/blocks/Toast.scss
@@ -1,11 +1,11 @@
-#toast-stack {
-  --toast-stack-gap: var(--bloom-s4);
-  --toast-stack-inset-top: var(--bloom-s3);
-  --toast-stack-inset-right: var(--bloom-s3);
-  --toast-stack-max-width: var(--bloom-width-sm);
+#seeds-toast-stack {
+  --toast-stack-gap: var(--seeds-s4);
+  --toast-stack-inset-top: var(--seeds-s3);
+  --toast-stack-inset-right: var(--seeds-s3);
+  --toast-stack-max-width: var(--seeds-width-sm);
 
   position: fixed;
-  z-index: var(--bloom-z-index-overlay);
+  z-index: var(--seeds-z-index-overlay);
   display: flex;
   flex-direction: column;
   gap: var(--toast-stack-gap);
@@ -15,17 +15,17 @@
   max-width: calc(100% - var(--toast-stack-inset-right) * 2);
 }
 
-.toast {
-  --toast-padding: var(--bloom-s4);
+.seeds-toast {
+  --toast-padding: var(--seeds-s4);
   --toast-border-radius: 0;
   --toast-border: none;
-  --toast-flex-gap: var(--bloom-s3);
+  --toast-flex-gap: var(--seeds-s3);
   --toast-icon-size: 1em;
-  --toast-max-width: var(--bloom-width-sm);
-  --toast-font: var(--bloom-font-sans);
-  --toast-font-size: var(--bloom-type-caption-size);
-  --toast-link-gap: var(--bloom-s1);
-  --toast-link-font-weight: var(--bloom-font-weight-semibold);
+  --toast-max-width: var(--seeds-width-sm);
+  --toast-font: var(--seeds-font-sans);
+  --toast-font-size: var(--seeds-type-caption-size);
+  --toast-link-gap: var(--seeds-s1);
+  --toast-link-font-weight: var(--seeds-font-weight-semibold);
 
   --common-message-padding: var(--toast-padding);
   --common-message-border-radius: var(--toast-border-radius);
diff --git a/src/blocks/Toast.tsx b/src/blocks/Toast.tsx
index c3e46d3..0cccd83 100644
--- a/src/blocks/Toast.tsx
+++ b/src/blocks/Toast.tsx
@@ -10,17 +10,17 @@ interface ToastProps extends Omit<CommonMessageProps, "role" | "closeable"> {
 }
 
 const Toast = (props: ToastProps) => {
-  const classNames = ["toast"]
+  const classNames = ["seeds-toast"]
   if (props.className) classNames.push(props.className)
 
   const toastStack = useRef<Element>()
   const [mount, setMount] = useState(false)
 
   useEffect(() => {
-    let el: HTMLElement | null = document.querySelector("#toast-stack")
+    let el: HTMLElement | null = document.querySelector("#seeds-toast-stack")
     if (!el) {
       el = document.createElement("div")
-      el.id = "toast-stack"
+      el.id = "seeds-toast-stack"
       el.ariaLive = "polite"
       el.ariaAtomic = "true"
       document.body.append(el)
@@ -40,10 +40,18 @@ const Toast = (props: ToastProps) => {
     setMount(false)
   }, props.hideTimeout)
 
-  return (mount && toastStack.current) ? createPortal(
-    <CommonMessage {...props} tabIndex={0} role="alert" closeable className={classNames.join(" ")} />,
-    toastStack.current
-  ) : null
+  return mount && toastStack.current
+    ? createPortal(
+        <CommonMessage
+          {...props}
+          tabIndex={0}
+          role="alert"
+          closeable
+          className={classNames.join(" ")}
+        />,
+        toastStack.current
+      )
+    : null
 }
 
 export default Toast
diff --git a/src/blocks/__stories__/Alert.docs.mdx b/src/blocks/__stories__/Alert.docs.mdx
index 2ee6c58..1067bc4 100644
--- a/src/blocks/__stories__/Alert.docs.mdx
+++ b/src/blocks/__stories__/Alert.docs.mdx
@@ -11,13 +11,13 @@ import Alert from "../Alert"
 
 | Name                       | Description                   | Default                        |
 | -------------------------- | ----------------------------- | ------------------------------ |
-| `--alert-padding`          | Interior spacing              | `--bloom-s4`                   |
+| `--alert-padding`          | Interior spacing              | `--seeds-s4`                   |
 | `--alert-border-radius`    | Radius                        | `0`                            |
 | `--alert-border`           | Border shorthand              | `none`                         |
-| `--alert-flex-gap`         | Space between icons/text      | `--bloom-s3`                   |
+| `--alert-flex-gap`         | Space between icons/text      | `--seeds-s3`                   |
 | `--alert-icon-size`        | Size                          | `1em`                          |
-| `--alert-max-width`        | Size                          | `--bloom-width-sm`             |
-| `--alert-font`             | Font                          | `--bloom-font-sans`            |
-| `--alert-font-size`        | Component font size           | `--bloom-type-caption-size`    |
-| `--alert-link-gap`         | Space between text and a link | `--bloom-s1`                   |
-| `--alert-link-font-weight` | Font weight                   | `--bloom-font-weight-semibold` |
+| `--alert-max-width`        | Size                          | `--seeds-width-sm`             |
+| `--alert-font`             | Font                          | `--seeds-font-sans`            |
+| `--alert-font-size`        | Component font size           | `--seeds-type-caption-size`    |
+| `--alert-link-gap`         | Space between text and a link | `--seeds-s1`                   |
+| `--alert-link-font-weight` | Font weight                   | `--seeds-font-weight-semibold` |
diff --git a/src/blocks/__stories__/Alert.stories.tsx b/src/blocks/__stories__/Alert.stories.tsx
index 63615f8..050a069 100644
--- a/src/blocks/__stories__/Alert.stories.tsx
+++ b/src/blocks/__stories__/Alert.stories.tsx
@@ -20,7 +20,7 @@ export default {
 export const defaultAlert = () => <Alert>Primary alert</Alert>
 
 export const standardVariants = () => (
-  <div style={{ display: "grid", gap: "var(--bloom-s3)" }}>
+  <div style={{ display: "grid", gap: "var(--seeds-s3)" }}>
     <Alert variant="primary">Primary alert</Alert>
     <Alert variant="success">Success alert</Alert>
     <Alert variant="warn">Warning alert</Alert>
@@ -30,7 +30,7 @@ export const standardVariants = () => (
 )
 
 export const inverseVariants = () => (
-  <div style={{ display: "grid", gap: "var(--bloom-s3)" }}>
+  <div style={{ display: "grid", gap: "var(--seeds-s3)" }}>
     <Alert variant="primary-inverse">Primary alert</Alert>
     <Alert variant="success-inverse">Success alert</Alert>
     <Alert variant="warn-inverse">Warning alert</Alert>
@@ -60,7 +60,7 @@ export const wideContainerLayout = () => (
     <style>
       {`
       #in-container {
-        --alert-max-width: var(--bloom-width-4xl);
+        --alert-max-width: var(--seeds-width-4xl);
       }
       `}
     </style>
diff --git a/src/blocks/__stories__/Card.docs.mdx b/src/blocks/__stories__/Card.docs.mdx
index d5c8365..831a0ff 100644
--- a/src/blocks/__stories__/Card.docs.mdx
+++ b/src/blocks/__stories__/Card.docs.mdx
@@ -24,16 +24,16 @@ import { Swatch } from "../../../documentation/components/Swatch.tsx"
 
 | Name                                    | Description                                                          | Default                   |
 | --------------------------------------- | -------------------------------------------------------------------- | ------------------------- |
-| `--card-spacing-sm`                     | Small card spacing                                                   | `--bloom-s4`              |
-| `--card-spacing-md`                   | Medium card spacing (default)                                 | `--bloom-s6`              |
-| `--card-spacing-lg`                     | Large card spacing                                                  | `--bloom-s8`              |
-| `--card-spacing-xl`                     | Extra Large card spacing                                                   | `--bloom-s12`             |
-| `--card-background-color`               | Background of the card                                               | `--bloom-color-white`     |
-| `--card-border-radius`                  | Card corner radius                                                   | `--bloom-rounded-lg`      |
-| `--card-border-width`                   | Border width                                                         | `--bloom-border-1`        |
-| `--card-border-color`                   | <Swatch color="bloom-color-gray-450" /> Border color                 | `--bloom-color-gray-450`  |
+| `--card-spacing-sm`                     | Small card spacing                                                   | `--seeds-s4`              |
+| `--card-spacing-md`                     | Medium card spacing (default)                                        | `--seeds-s6`              |
+| `--card-spacing-lg`                     | Large card spacing                                                   | `--seeds-s8`              |
+| `--card-spacing-xl`                     | Extra Large card spacing                                             | `--seeds-s12`             |
+| `--card-background-color`               | Background of the card                                               | `--seeds-color-white`     |
+| `--card-border-radius`                  | Card corner radius                                                   | `--seeds-rounded-lg`      |
+| `--card-border-width`                   | Border width                                                         | `--seeds-border-1`        |
+| `--card-border-color`                   | <Swatch color="seeds-color-gray-450" /> Border color                 | `--seeds-color-gray-450`  |
 | `--card-divider-width`                  | Width of intra-card dividers                                         | `--card-border-width`     |
-| `--card-divider-color`                  | <Swatch color="bloom-color-gray-450" /> Color of intra-card dividers | `--card-border-color`     |
+| `--card-divider-color`                  | <Swatch color="seeds-color-gray-450" /> Color of intra-card dividers | `--card-border-color`     |
 | `--card-footer-background-color`        | Background of the footer                                             | `--card-background-color` |
 | `--card-content-padding-block`          | Vertical padding between elements                                    | (card spacing)            |
 | `--card-content-padding-inline-desktop` | Horizontal padding                                                   | (card spacing)            |
diff --git a/src/blocks/__stories__/Card.stories.tsx b/src/blocks/__stories__/Card.stories.tsx
index d83c0c0..ad96667 100644
--- a/src/blocks/__stories__/Card.stories.tsx
+++ b/src/blocks/__stories__/Card.stories.tsx
@@ -18,7 +18,7 @@ export const TextContent = () => (
   <div style={{ maxWidth: "500px" }}>
     <Card>
       <Card.Header className="test-card-header">
-        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)"  />
+        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)" />
       </Card.Header>
 
       <Card.Section>
@@ -44,7 +44,7 @@ export const FlushDividers = () => (
   <div style={{ maxWidth: "500px" }}>
     <Card>
       <Card.Header divider="flush" className="test-card-header">
-        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)"  />
+        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)" />
       </Card.Header>
 
       <Card.Section divider="flush">
@@ -70,7 +70,7 @@ export const InsetDividers = () => (
   <div style={{ maxWidth: "500px" }}>
     <Card>
       <Card.Header className="test-card-header" divider="inset">
-        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)"  />
+        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)" />
       </Card.Header>
 
       <Card.Section divider="inset">
@@ -96,7 +96,7 @@ export const WithFooter = () => (
   <div style={{ maxWidth: "500px" }}>
     <Card>
       <Card.Header className="test-card-header">
-        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)"  />
+        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)" />
       </Card.Header>
 
       <Card.Section>
@@ -128,7 +128,7 @@ export const WithFooter = () => (
     </Card>
 
     <style>
-      {"#test-card-footer { --card-footer-background-color: var(--bloom-color-primary-lighter) }"}
+      {"#test-card-footer { --card-footer-background-color: var(--seeds-color-primary-lighter) }"}
     </style>
   </div>
 )
@@ -137,10 +137,10 @@ export const Spacings = () => (
   <div style={{ maxWidth: "500px", display: "grid", gap: "2rem" }}>
     <Card spacing="none">
       <Card.Header className="test-card-header">
-        <HeadingGroup size="2xl" heading="none" subheading="No Spacing"  />
+        <HeadingGroup size="2xl" heading="none" subheading="No Spacing" />
       </Card.Header>
 
-      <br/>
+      <br />
       <Card.Section>
         <p>
           The term can refer to the flowering plant as a whole, even when not in bloom, and not just
@@ -151,7 +151,7 @@ export const Spacings = () => (
 
     <Card spacing="sm">
       <Card.Header className="test-card-header">
-        <HeadingGroup size="2xl" heading="sm" subheading="Small Spacing"  />
+        <HeadingGroup size="2xl" heading="sm" subheading="Small Spacing" />
       </Card.Header>
 
       <Card.Section>
@@ -164,7 +164,7 @@ export const Spacings = () => (
 
     <Card spacing="md">
       <Card.Header className="test-card-header">
-      <HeadingGroup size="2xl" heading="md" subheading="Medium (Default) Spacing"  />
+        <HeadingGroup size="2xl" heading="md" subheading="Medium (Default) Spacing" />
       </Card.Header>
 
       <Card.Section>
@@ -177,7 +177,7 @@ export const Spacings = () => (
 
     <Card spacing="lg">
       <Card.Header className="test-card-header">
-        <HeadingGroup size="2xl" heading="lg" subheading="Large Spacing"  />
+        <HeadingGroup size="2xl" heading="lg" subheading="Large Spacing" />
       </Card.Header>
 
       <Card.Section>
@@ -190,7 +190,7 @@ export const Spacings = () => (
 
     <Card spacing="xl">
       <Card.Header className="test-card-header">
-        <HeadingGroup size="2xl" heading="xl" subheading="Extra Large Spacing"  />
+        <HeadingGroup size="2xl" heading="xl" subheading="Extra Large Spacing" />
       </Card.Header>
 
       <Card.Section>
diff --git a/src/blocks/__stories__/Message.docs.mdx b/src/blocks/__stories__/Message.docs.mdx
index c7c679a..5b5bfb0 100644
--- a/src/blocks/__stories__/Message.docs.mdx
+++ b/src/blocks/__stories__/Message.docs.mdx
@@ -11,13 +11,13 @@ import Message from "../Message"
 
 | Name                         | Description                   | Default                        |
 | ---------------------------- | ----------------------------- | ------------------------------ |
-| `--message-padding`          | Interior spacing              | `--bloom-s4`                   |
+| `--message-padding`          | Interior spacing              | `--seeds-s4`                   |
 | `--message-border-radius`    | Radius                        | `0`                            |
 | `--message-border`           | Border shorthand              | `none`                         |
-| `--message-flex-gap`         | Space between icons/text      | `--bloom-s3`                   |
+| `--message-flex-gap`         | Space between icons/text      | `--seeds-s3`                   |
 | `--message-icon-size`        | Size                          | `1em`                          |
-| `--message-max-width`        | Size                          | `--bloom-width-sm`             |
-| `--message-font`             | Font                          | `--bloom-font-sans`            |
-| `--message-font-size`        | Component font size           | `--bloom-type-caption-size`    |
-| `--message-link-gap`         | Space between text and a link | `--bloom-s1`                   |
-| `--message-link-font-weight` | Font weight                   | `--bloom-font-weight-semibold` |
+| `--message-max-width`        | Size                          | `--seeds-width-sm`             |
+| `--message-font`             | Font                          | `--seeds-font-sans`            |
+| `--message-font-size`        | Component font size           | `--seeds-type-caption-size`    |
+| `--message-link-gap`         | Space between text and a link | `--seeds-s1`                   |
+| `--message-link-font-weight` | Font weight                   | `--seeds-font-weight-semibold` |
diff --git a/src/blocks/__stories__/Message.stories.tsx b/src/blocks/__stories__/Message.stories.tsx
index 940668b..bd15ef7 100644
--- a/src/blocks/__stories__/Message.stories.tsx
+++ b/src/blocks/__stories__/Message.stories.tsx
@@ -34,7 +34,7 @@ export const status = () => (
 )
 
 export const standardVariants = () => (
-  <div style={{ display: "grid", gap: "var(--bloom-s3)" }}>
+  <div style={{ display: "grid", gap: "var(--seeds-s3)" }}>
     <Message variant="primary">Primary Message</Message>
     <Message variant="success">Success Message</Message>
     <Message variant="warn">Warning Message</Message>
@@ -44,7 +44,7 @@ export const standardVariants = () => (
 )
 
 export const inverseVariants = () => (
-  <div style={{ display: "grid", gap: "var(--bloom-s3)" }}>
+  <div style={{ display: "grid", gap: "var(--seeds-s3)" }}>
     <Message variant="primary-inverse">Primary Message</Message>
     <Message variant="success-inverse">Success Message</Message>
     <Message variant="warn-inverse">Warning Message</Message>
diff --git a/src/blocks/__stories__/Toast.docs.mdx b/src/blocks/__stories__/Toast.docs.mdx
index 6cbd730..67d1faf 100644
--- a/src/blocks/__stories__/Toast.docs.mdx
+++ b/src/blocks/__stories__/Toast.docs.mdx
@@ -11,22 +11,22 @@ import Toast from "../Toast"
 
 | Name                       | Description                   | Default                        |
 | -------------------------- | ----------------------------- | ------------------------------ |
-| `--toast-padding`          | Interior spacing              | `--bloom-s4`                   |
+| `--toast-padding`          | Interior spacing              | `--seeds-s4`                   |
 | `--toast-border-radius`    | Radius                        | `0`                            |
 | `--toast-border`           | Border shorthand              | `none`                         |
-| `--toast-flex-gap`         | Space between icons/text      | `--bloom-s3`                   |
+| `--toast-flex-gap`         | Space between icons/text      | `--seeds-s3`                   |
 | `--toast-icon-size`        | Size                          | `1em`                          |
-| `--toast-max-width`        | Size                          | `--bloom-width-sm`             |
-| `--toast-font`             | Font                          | `--bloom-font-sans`            |
-| `--toast-font-size`        | Component font size           | `--bloom-type-caption-size`    |
-| `--toast-link-gap`         | Space between text and a link | `--bloom-s1`                   |
-| `--toast-link-font-weight` | Font weight                   | `--bloom-font-weight-semibold` |
+| `--toast-max-width`        | Size                          | `--seeds-width-sm`             |
+| `--toast-font`             | Font                          | `--seeds-font-sans`            |
+| `--toast-font-size`        | Component font size           | `--seeds-type-caption-size`    |
+| `--toast-link-gap`         | Space between text and a link | `--seeds-s1`                   |
+| `--toast-link-font-weight` | Font weight                   | `--seeds-font-weight-semibold` |
 
 In addition, there are a set of variables you can customize via `#toast-stack` which affects the fixed container within which toasts are rendered:
 
 | Name                        | Description                      | Default            |
 | --------------------------- | -------------------------------- | ------------------ |
-| `--toast-stack-gap`         | Spacing between toasts           | `--bloom-s4`       |
-| `--toast-stack-inset-top`   | Window top edge -> stack space   | `--bloom-s3`       |
-| `--toast-stack-inset-right` | Window right edge -> stack space | `--bloom-s3`       |
-| `--toast-stack-max-width`   | Size                             | `--bloom-width-sm` |
+| `--toast-stack-gap`         | Spacing between toasts           | `--seeds-s4`       |
+| `--toast-stack-inset-top`   | Window top edge -> stack space   | `--seeds-s3`       |
+| `--toast-stack-inset-right` | Window right edge -> stack space | `--seeds-s3`       |
+| `--toast-stack-max-width`   | Size                             | `--seeds-width-sm` |
diff --git a/src/blocks/__tests__/Toast.test.tsx b/src/blocks/__tests__/Toast.test.tsx
index 2a79844..a255e81 100644
--- a/src/blocks/__tests__/Toast.test.tsx
+++ b/src/blocks/__tests__/Toast.test.tsx
@@ -6,11 +6,15 @@ afterEach(cleanup)
 describe("<Toast>", () => {
   it("displays the notification", () => {
     const content = "Toast message here"
-    const { getByText, baseElement } = render(<Toast id="test-id" className="test-class">{content}</Toast>)
+    const { getByText, baseElement } = render(
+      <Toast id="test-id" className="test-class">
+        {content}
+      </Toast>
+    )
     expect(getByText(content)).toBeInTheDocument()
-    expect(baseElement.querySelector("#toast-stack .toast")).not.toBeNull()
+    expect(baseElement.querySelector("#seeds-toast-stack .seeds-toast")).not.toBeNull()
     expect(baseElement.querySelector("#test-id")).not.toBeNull()
     expect(baseElement.querySelector("#test-id.test-class")).not.toBeNull()
     expect(baseElement.querySelector("[role=alert]")).not.toBeNull()
   })
-})
\ No newline at end of file
+})
diff --git a/src/blocks/shared/CommonMessage.scss b/src/blocks/shared/CommonMessage.scss
index 3b4b250..2149094 100644
--- a/src/blocks/shared/CommonMessage.scss
+++ b/src/blocks/shared/CommonMessage.scss
@@ -1,16 +1,16 @@
-.common-message {
+.seeds-common-message {
   /* These are mainly here for reference…they're overridden by specific tokens from
      Alert, Message, and Toast */
-  --common-message-padding: var(--bloom-s4);
+  --common-message-padding: var(--seeds-s4);
   --common-message-border-radius: 0;
   --common-message-border: none;
-  --common-message-flex-gap: var(--bloom-s3);
+  --common-message-flex-gap: var(--seeds-s3);
   --common-message-icon-size: 1em;
-  --common-message-max-width: var(--bloom-width-sm);
-  --common-message-font: var(--bloom-font-sans);
-  --common-message-font-size: var(--bloom-type-caption-size);
-  --common-message-link-gap: var(--bloom-s1);
-  --common-message-link-font-weight: var(--bloom-font-weight-semibold);
+  --common-message-max-width: var(--seeds-width-sm);
+  --common-message-font: var(--seeds-font-sans);
+  --common-message-font-size: var(--seeds-type-caption-size);
+  --common-message-link-gap: var(--seeds-s1);
+  --common-message-link-font-weight: var(--seeds-font-weight-semibold);
 
   padding: var(--common-message-padding);
   display: flex;
@@ -29,53 +29,53 @@
   }
 
   &[data-variant="primary"] {
-    background: var(--bloom-color-primary-light);
-    color: var(--bloom-color-on-surface);
+    background: var(--seeds-color-primary-light);
+    color: var(--seeds-color-on-surface);
   }
 
   &[data-variant="primary-inverse"] {
-    background: var(--bloom-color-primary);
-	  color: var(--bloom-color-on-inverse);
+    background: var(--seeds-color-primary);
+    color: var(--seeds-color-on-inverse);
   }
 
   &[data-variant="success"] {
-    background: var(--bloom-color-success-light);
-    color: var(--bloom-color-on-surface);
+    background: var(--seeds-color-success-light);
+    color: var(--seeds-color-on-surface);
   }
 
   &[data-variant="success-inverse"] {
-    background: var(--bloom-color-success);
-    color: var(--bloom-color-on-inverse);
+    background: var(--seeds-color-success);
+    color: var(--seeds-color-on-inverse);
   }
 
   &[data-variant="alert"] {
-    background: var(--bloom-color-alert-light);
-    color: var(--bloom-color-on-surface);
+    background: var(--seeds-color-alert-light);
+    color: var(--seeds-color-on-surface);
   }
 
   &[data-variant="alert-inverse"] {
-    background: var(--bloom-color-alert);
-    color: var(--bloom-color-on-inverse);
+    background: var(--seeds-color-alert);
+    color: var(--seeds-color-on-inverse);
   }
 
   &[data-variant="warn"] {
-    background: var(--bloom-color-warn-light);
-    color: var(--bloom-color-on-surface);
+    background: var(--seeds-color-warn-light);
+    color: var(--seeds-color-on-surface);
   }
 
   &[data-variant="warn-inverse"] {
-    background: var(--bloom-color-warn);
-    color: var(--bloom-color-on-surface);
+    background: var(--seeds-color-warn);
+    color: var(--seeds-color-on-surface);
   }
 
   &[data-variant="secondary"] {
-    background: var(--bloom-color-secondary-light);
-    color: var(--bloom-color-on-surface);
+    background: var(--seeds-color-secondary-light);
+    color: var(--seeds-color-on-surface);
   }
 
   &[data-variant="secondary-inverse"] {
-    background: var(--bloom-color-secondary-darker);
-    color: var(--bloom-color-on-inverse);
+    background: var(--seeds-color-secondary-darker);
+    color: var(--seeds-color-on-inverse);
   }
 
   &:not(.is-fullwidth) > [data-part="content"] {
@@ -89,6 +89,9 @@
 
   > button {
     padding: 0;
+    background-color: transparent;
+    background-image: none;
+    border: none;
   }
 
   .icon {
@@ -97,7 +100,7 @@
   }
 
   a {
-    // margin-inline-start: var(--bloom-s1);
+    // margin-inline-start: var(--seeds-s1);
     margin-inline-start: var(--common-message-link-gap);
     color: currentColor;
     text-decoration: underline;
diff --git a/src/blocks/shared/CommonMessage.tsx b/src/blocks/shared/CommonMessage.tsx
index 3ee6c5d..568a1ad 100644
--- a/src/blocks/shared/CommonMessage.tsx
+++ b/src/blocks/shared/CommonMessage.tsx
@@ -59,7 +59,7 @@ export interface CommonMessageProps {
 
 const CommonMessage = (props: CommonMessageProps) => {
   const [visible, toggler] = useToggle(true)
-  const classNames = ["common-message"]
+  const classNames = ["seeds-common-message"]
   if (props.fullwidth) classNames.push("is-fullwidth")
   if (props.className) classNames.push(props.className)
 
diff --git a/src/expandableText/ExpandableText.scss b/src/expandableText/ExpandableText.scss
index 63d0861..3a95f08 100644
--- a/src/expandableText/ExpandableText.scss
+++ b/src/expandableText/ExpandableText.scss
@@ -1,4 +1,4 @@
- .expandable-text {
+.seeds-expandable-text {
   p:not(:last-child),
   ul:not(:last-child) {
     margin-bottom: 0.9em;
@@ -9,10 +9,13 @@
   }
 }
 
-.button-toggle {
-  color: var(--bloom-color-primary);
+.seeds-button-toggle {
+  color: var(--seeds-color-primary);
   cursor: pointer;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
+  background-color: transparent;
+  background-image: none;
+  border: none;
 }
diff --git a/src/expandableText/ExpandableText.tsx b/src/expandableText/ExpandableText.tsx
index 412ae0d..87b5f13 100644
--- a/src/expandableText/ExpandableText.tsx
+++ b/src/expandableText/ExpandableText.tsx
@@ -33,7 +33,7 @@ const moreLessButton = (
   strings: ExpandableTextProps["strings"],
   buttonClassName: ExpandableTextProps["buttonClassName"]
 ) => {
-  const classes = ["button-toggle"]
+  const classes = ["seeds-button-toggle"]
   if (buttonClassName) {
     classes.push(buttonClassName)
   }
@@ -56,7 +56,7 @@ const ExpandableText = (props: ExpandableTextProps) => {
     button = moreLessButton(expanded, setExpanded, props.strings, props.buttonClassName)
   }
   return (
-    <div className={`expandable-text ${props?.className}`}>
+    <div className={`seeds-expandable-text ${props?.className}`}>
       <Markdown
         children={getText(props.children, expanded, maxLength)}
         options={props.markdownProps}
diff --git a/src/forms/FieldValue.scss b/src/forms/FieldValue.scss
index 926c2e3..5f5d22f 100644
--- a/src/forms/FieldValue.scss
+++ b/src/forms/FieldValue.scss
@@ -1,13 +1,13 @@
-.field-value {
+.seeds-field-value {
   /* Theme Variables */
-  --field-value-label-spacer: var(--bloom-spacer-label);
-  --field-value-content-spacer: var(--bloom-s1);
-  --field-value-font: var(--bloom-font-alt-sans);
-  --field-value-label-font-size: var(--bloom-type-label-size);
-  --field-value-help-text-font-size: var(--bloom-type-label-size);
-  --field-value-label-color: var(--bloom-input-text-label-color);
-  --field-value-value-color: var(--bloom-input-text-highlight-color);
-  --field-value-help-text-color: var(--bloom-text-color-light);
+  --field-value-label-spacer: var(--seeds-spacer-label);
+  --field-value-content-spacer: var(--seeds-s1);
+  --field-value-font: var(--seeds-font-alt-sans);
+  --field-value-label-font-size: var(--seeds-type-label-size);
+  --field-value-help-text-font-size: var(--seeds-type-label-size);
+  --field-value-label-color: var(--seeds-input-text-label-color);
+  --field-value-value-color: var(--seeds-input-text-highlight-color);
+  --field-value-help-text-color: var(--seeds-text-color-light);
 
   font-family: var(--field-value-font);
 
diff --git a/src/forms/FieldValue.tsx b/src/forms/FieldValue.tsx
index effc0dc..60e469c 100644
--- a/src/forms/FieldValue.tsx
+++ b/src/forms/FieldValue.tsx
@@ -16,7 +16,7 @@ export interface FieldValueProps {
 }
 
 const FieldValue = (props: FieldValueProps) => {
-  const classNames = ["field-value"]
+  const classNames = ["seeds-field-value"]
   if (props.className) classNames.push(props.className)
 
   return (
diff --git a/src/forms/FormErrorMessage.scss b/src/forms/FormErrorMessage.scss
index 8319ed9..0664acd 100644
--- a/src/forms/FormErrorMessage.scss
+++ b/src/forms/FormErrorMessage.scss
@@ -1,6 +1,6 @@
-.form-error-message {
-  --form-error-message-color: var(--bloom-color-alert);
-  --form-error-message-font-size: var(--bloom-font-size-xs);
+.seeds-form-error-message {
+  --form-error-message-color: var(--seeds-color-alert);
+  --form-error-message-font-size: var(--seeds-font-size-xs);
 
   display: inline-block;
   color: var(--form-error-message-color);
diff --git a/src/forms/FormErrorMessage.tsx b/src/forms/FormErrorMessage.tsx
index af1e527..283df93 100644
--- a/src/forms/FormErrorMessage.tsx
+++ b/src/forms/FormErrorMessage.tsx
@@ -15,7 +15,7 @@ export interface FormErrorMessageProps {
  * Component used to display an error message under a form field when the user input is invalid.
  */
 const FormErrorMessage = (props: FormErrorMessageProps) => {
-  const classNames = ["form-error-message"]
+  const classNames = ["seeds-form-error-message"]
   if (props.className) classNames.push(props.className)
 
   return (
diff --git a/src/forms/__stories_/FieldValue.docs.mdx b/src/forms/__stories_/FieldValue.docs.mdx
index b5cf963..cf866a5 100644
--- a/src/forms/__stories_/FieldValue.docs.mdx
+++ b/src/forms/__stories_/FieldValue.docs.mdx
@@ -10,13 +10,13 @@ import { Swatch } from "../../../documentation/components/Swatch.tsx"
 
 ## Theme Variables
 
-| Name                                | Description                                                      | Default                              |
-| ----------------------------------- | ---------------------------------------------------------------- | ------------------------------------ |
-| `--field-value-label-spacer`        | Space between the label and the value                            | `--bloom-spacer-label`               |
-| `--field-value-content-spacer`      | Space between the value and help text | `--bloom-s1`                         |
-| `--field-value-font`                | Font used in the component                                       | `--bloom-font-alt-sans`              |
-| `--field-value-label-font-size`     | Font size of the label                                           | `--bloom-type-label-size`                 |
-| `--field-value-help-text-font-size` | Font size of the help text                                       | `--bloom-type-label-size`                 |
-| `--field-value-label-color`         | <Swatch color="bloom-input-text-label-color" /> Color of the label                                                | `--bloom-input-text-label-color`      |
-| `--field-value-value-color`         | <Swatch color="bloom-input-text-highlight-color" /> Color of the value                                                | `--bloom-input-text-highlight-color` |
-| `--field-value-help-text-color`     | <Swatch color="bloom-text-color-light" /> Color of the help text                                            | `--bloom-text-color-light`           |
+| Name                                | Description                                                            | Default                              |
+| ----------------------------------- | ---------------------------------------------------------------------- | ------------------------------------ |
+| `--field-value-label-spacer`        | Space between the label and the value                                  | `--seeds-spacer-label`               |
+| `--field-value-content-spacer`      | Space between the value and help text                                  | `--seeds-s1`                         |
+| `--field-value-font`                | Font used in the component                                             | `--seeds-font-alt-sans`              |
+| `--field-value-label-font-size`     | Font size of the label                                                 | `--seeds-type-label-size`            |
+| `--field-value-help-text-font-size` | Font size of the help text                                             | `--seeds-type-label-size`            |
+| `--field-value-label-color`         | <Swatch color="seeds-input-text-label-color" /> Color of the label     | `--seeds-input-text-label-color`     |
+| `--field-value-value-color`         | <Swatch color="seeds-input-text-highlight-color" /> Color of the value | `--seeds-input-text-highlight-color` |
+| `--field-value-help-text-color`     | <Swatch color="seeds-text-color-light" /> Color of the help text       | `--seeds-text-color-light`           |
diff --git a/src/forms/__stories_/FieldValue.stories.tsx b/src/forms/__stories_/FieldValue.stories.tsx
index db02b61..caacb20 100644
--- a/src/forms/__stories_/FieldValue.stories.tsx
+++ b/src/forms/__stories_/FieldValue.stories.tsx
@@ -27,8 +27,8 @@ export const withHelperText = () => (
 )
 
 export const inAGrid = () => (
-  <div role="grid" style={{maxWidth: "var(--bloom-width-4xl)"}}>
-    <div role="row" style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr"}}>
+  <div role="grid" style={{ maxWidth: "var(--seeds-width-4xl)" }}>
+    <div role="row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr" }}>
       <FieldValue label="Property Amenities" helpText="All good stuff">
         Pool, BBQ, Rooftop View
       </FieldValue>
@@ -40,4 +40,4 @@ export const inAGrid = () => (
       </FieldValue>
     </div>
   </div>
-)
\ No newline at end of file
+)
diff --git a/src/forms/__stories_/FormErrorMessage.docs.mdx b/src/forms/__stories_/FormErrorMessage.docs.mdx
index 2f516a4..d62c72d 100644
--- a/src/forms/__stories_/FormErrorMessage.docs.mdx
+++ b/src/forms/__stories_/FormErrorMessage.docs.mdx
@@ -12,5 +12,5 @@ import FormErrorMessage from "../FormErrorMessage"
 
 | Name                             | Description               | Default                                                    |
 | -------------------------------- | ------------------------- | ---------------------------------------------------------- |
-| `--form-error-message-color`     | Color of the text content | `--bloom-color-alert` <Swatch color="bloom-color-alert" /> |
-| `--form-error-message-font-size` | Component font size       | `--bloom-font-size-xs`                                     |
+| `--form-error-message-color`     | Color of the text content | `--seeds-color-alert` <Swatch color="seeds-color-alert" /> |
+| `--form-error-message-font-size` | Component font size       | `--seeds-font-size-xs`                                     |
diff --git a/src/forms/__stories_/FormErrorMessage.stories.tsx b/src/forms/__stories_/FormErrorMessage.stories.tsx
index 7417903..aca6a7b 100644
--- a/src/forms/__stories_/FormErrorMessage.stories.tsx
+++ b/src/forms/__stories_/FormErrorMessage.stories.tsx
@@ -27,9 +27,9 @@ export const singleFieldError = () => (
         value="Invalid content"
         aria-describedby="example-error"
         style={{
-          border: "1px solid var(--bloom-color-alert)",
-          padding: "var(--bloom-s2) var(--bloom-s3)",
-          borderRadius: "var(--bloom-rounded)",
+          border: "1px solid var(--seeds-color-alert)",
+          padding: "var(--seeds-s2) var(--seeds-s3)",
+          borderRadius: "var(--seeds-rounded)",
         }}
       />
     </div>
diff --git a/src/global/app-css.scss b/src/global/app-css.scss
index 3abd802..e2768ff 100644
--- a/src/global/app-css.scss
+++ b/src/global/app-css.scss
@@ -47,7 +47,7 @@ figure {
 }
 
 :where(a) {
-  color: var(--bloom-color-primary);
+  color: var(--seeds-color-primary);
   text-decoration: inherit;
 }
 
@@ -59,12 +59,6 @@ figure {
   letter-spacing: inherit;
 }
 
-:where(button) {
-  background-color: transparent;
-  background-image: none;
-  border: none;
-}
-
 [hidden] {
   display: none !important;
 }
@@ -73,13 +67,13 @@ figure {
  * Global Styles
  */
 html {
-  font-family: var(--bloom-font-sans);
-  line-height: var(--bloom-line-height-normal);
+  font-family: var(--seeds-font-sans);
+  line-height: var(--seeds-line-height-normal);
 }
 
 body {
-  background-color: var(--bloom-bg-color-surface);
-  color: var(--bloom-color-on-surface);
+  background-color: var(--seeds-bg-color-surface);
+  color: var(--seeds-color-on-surface);
   line-height: inherit;
 }
 
diff --git a/src/global/text.scss b/src/global/text.scss
index 5fd6f81..43cfd86 100644
--- a/src/global/text.scss
+++ b/src/global/text.scss
@@ -16,21 +16,21 @@
 .text-heading-4xl,
 .text-heading-3xl,
 .text-heading-2xl {
-  font-family: var(--bloom-font-serif);
+  font-family: var(--seeds-font-serif);
   font-weight: normal;
-  line-height: var(--bloom-line-height-heading);
+  line-height: var(--seeds-line-height-heading);
 }
 
 .text-heading-4xl {
-  font-size: var(--bloom-type-heading-size-4xl);
+  font-size: var(--seeds-type-heading-size-4xl);
 }
 
 .text-heading-3xl {
-  font-size: var(--bloom-type-heading-size-3xl);
+  font-size: var(--seeds-type-heading-size-3xl);
 }
 
 .text-heading-2xl {
-  font-size: var(--bloom-type-heading-size-2xl);
+  font-size: var(--seeds-type-heading-size-2xl);
 }
 
 .text-heading-xl,
@@ -38,61 +38,61 @@
 .text-heading-md,
 .text-heading-sm,
 .text-heading-xs {
-  font-family: var(--bloom-font-alt-sans);
-  font-weight: var(--bloom-font-weight-semibold);
+  font-family: var(--seeds-font-alt-sans);
+  font-weight: var(--seeds-font-weight-semibold);
 }
 
 .text-heading-xl {
-  font-size: var(--bloom-type-heading-size-xl);
-  line-height: var(--bloom-line-height-heading);
+  font-size: var(--seeds-type-heading-size-xl);
+  line-height: var(--seeds-line-height-heading);
 }
 
 .text-heading-lg {
-  font-size: var(--bloom-type-heading-size-lg);
-  line-height: var(--bloom-line-height-heading);
+  font-size: var(--seeds-type-heading-size-lg);
+  line-height: var(--seeds-line-height-heading);
 }
 
 .text-heading-md,
 .text-heading-sm,
 .text-heading-xs {
-  line-height: var(--bloom-line-height-content);
+  line-height: var(--seeds-line-height-content);
 }
 
 .text-heading-md {
-  font-size: var(--bloom-type-heading-size-md);
+  font-size: var(--seeds-type-heading-size-md);
 }
 
 .text-heading-sm {
-  font-size: var(--bloom-type-heading-size-sm);
+  font-size: var(--seeds-type-heading-size-sm);
 }
 
 .text-heading-xs {
-  font-size: var(--bloom-type-heading-size-xs);
+  font-size: var(--seeds-type-heading-size-xs);
 }
 
 .text-body {
-  font-size: var(--bloom-type-body-size);
+  font-size: var(--seeds-type-body-size);
 }
 
 .text-label {
-  font-size: var(--bloom-type-label-size);
+  font-size: var(--seeds-type-label-size);
 }
 
 .text-caption {
-  font-size: var(--bloom-type-caption-size);
+  font-size: var(--seeds-type-caption-size);
 }
 
 /* Stop largest headings down one size for mobile */
 @media (--sm-only) {
   .text-heading-4xl {
-    font-size: var(--bloom-type-heading-size-3xl);
+    font-size: var(--seeds-type-heading-size-3xl);
   }
-  
+
   .text-heading-3xl {
-    font-size: var(--bloom-type-heading-size-2xl);
+    font-size: var(--seeds-type-heading-size-2xl);
   }
-  
+
   .text-heading-2xl {
-    font-size: var(--bloom-type-heading-size-xl);
+    font-size: var(--seeds-type-heading-size-xl);
   }
 }
diff --git a/src/global/tokens/borders.scss b/src/global/tokens/borders.scss
index 500b8f5..cb00cce 100644
--- a/src/global/tokens/borders.scss
+++ b/src/global/tokens/borders.scss
@@ -1,17 +1,17 @@
 :root {
-  --bloom-rounded-sm: 0.125rem;
-  --bloom-rounded: 0.25rem;
-  --bloom-rounded-md: 0.375rem;
-  --bloom-rounded-lg: 0.5rem;
-  --bloom-rounded-xl: 0.75rem;
-  --bloom-rounded-2xl: 1rem;
-  --bloom-rounded-3xl: 1.5rem;
-  --bloom-rounded-full: 9999px;
+  --seeds-rounded-sm: 0.125rem;
+  --seeds-rounded: 0.25rem;
+  --seeds-rounded-md: 0.375rem;
+  --seeds-rounded-lg: 0.5rem;
+  --seeds-rounded-xl: 0.75rem;
+  --seeds-rounded-2xl: 1rem;
+  --seeds-rounded-3xl: 1.5rem;
+  --seeds-rounded-full: 9999px;
 
-  --bloom-border-1: 1px;
-  --bloom-border-2: 2px;
-  --bloom-border-4: 4px;
-  --bloom-border-8: 8px;
+  --seeds-border-1: 1px;
+  --seeds-border-2: 2px;
+  --seeds-border-4: 4px;
+  --seeds-border-8: 8px;
 
-  --bloom-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --seeds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
diff --git a/src/global/tokens/colors.scss b/src/global/tokens/colors.scss
index b0e43d9..d8a3ab0 100644
--- a/src/global/tokens/colors.scss
+++ b/src/global/tokens/colors.scss
@@ -3,160 +3,160 @@
    * Base Colors
    */
 
-  --bloom-color-white: #ffffff;
-  --bloom-color-black: #000000;
+  --seeds-color-white: #ffffff;
+  --seeds-color-black: #000000;
 
   /* Red */
-  --bloom-color-red-900: #6a0c1b;
-  --bloom-color-red-700: #b21d38;
-  --bloom-color-red-500: #e41d3d;
-  --bloom-color-red-300: #f9d2d8;
-  --bloom-color-red-100: #fdebee;
+  --seeds-color-red-900: #6a0c1b;
+  --seeds-color-red-700: #b21d38;
+  --seeds-color-red-500: #e41d3d;
+  --seeds-color-red-300: #f9d2d8;
+  --seeds-color-red-100: #fdebee;
 
   /* Green */
-  --bloom-color-green-900: #1a4c25;
-  --bloom-color-green-700: #216e1f;
-  --bloom-color-green-500: #2e8540;
-  --bloom-color-green-300: #b4e5be;
-  --bloom-color-green-100: #e7f7ea;
+  --seeds-color-green-900: #1a4c25;
+  --seeds-color-green-700: #216e1f;
+  --seeds-color-green-500: #2e8540;
+  --seeds-color-green-300: #b4e5be;
+  --seeds-color-green-100: #e7f7ea;
 
   /* Blue */
-  --bloom-color-blue-900: #205493;
-  --bloom-color-blue-700: #0067be;
-  --bloom-color-blue-500: #0077da;
-  --bloom-color-blue-300: #daeeff;
-  --bloom-color-blue-100: #f5f8f9;
+  --seeds-color-blue-900: #205493;
+  --seeds-color-blue-700: #0067be;
+  --seeds-color-blue-500: #0077da;
+  --seeds-color-blue-300: #daeeff;
+  --seeds-color-blue-100: #f5f8f9;
 
   /* Cyan */
-  --bloom-color-cyan-900: #005863;
-  --bloom-color-cyan-700: #009db0;
-  --bloom-color-cyan-500: #00bed5;
-  --bloom-color-cyan-300: #c8f1ff;
-  --bloom-color-cyan-100: #eafdff;
+  --seeds-color-cyan-900: #005863;
+  --seeds-color-cyan-700: #009db0;
+  --seeds-color-cyan-500: #00bed5;
+  --seeds-color-cyan-300: #c8f1ff;
+  --seeds-color-cyan-100: #eafdff;
 
   /* Orange */
-  --bloom-color-orange-900: #8d2900;
-  --bloom-color-orange-700: #d54309;
-  --bloom-color-orange-500: #ff6627;
-  --bloom-color-orange-300: #ffd2c0;
-  --bloom-color-orange-100: #fff8f6;
+  --seeds-color-orange-900: #8d2900;
+  --seeds-color-orange-700: #d54309;
+  --seeds-color-orange-500: #ff6627;
+  --seeds-color-orange-300: #ffd2c0;
+  --seeds-color-orange-100: #fff8f6;
 
   /* Yellow */
-  --bloom-color-yellow-900: #825a01;
-  --bloom-color-yellow-700: #e5a000;
-  --bloom-color-yellow-500: #fdb81e;
-  --bloom-color-yellow-300: #fee8b6;
-  --bloom-color-yellow-100: #fff2d5;
+  --seeds-color-yellow-900: #825a01;
+  --seeds-color-yellow-700: #e5a000;
+  --seeds-color-yellow-500: #fdb81e;
+  --seeds-color-yellow-300: #fee8b6;
+  --seeds-color-yellow-100: #fff2d5;
 
   /* Gray */
-  --bloom-color-gray-950: #222222;
-  --bloom-color-gray-900: #292929;
-  --bloom-color-gray-850: #333333;
-  --bloom-color-gray-800: #373737;
-  --bloom-color-gray-750: #555555;
-  --bloom-color-gray-700: #767676;
-  --bloom-color-gray-650: #888888;
-  --bloom-color-gray-600: #999999;
-  --bloom-color-gray-550: #aaaaaa;
-  --bloom-color-gray-500: #cccccc;
-  --bloom-color-gray-450: #dedee0;
-  --bloom-color-gray-400: #efefef;
-  --bloom-color-gray-300: #f6f6f6;
-  --bloom-color-gray-200: #f7f7f7;
-  --bloom-color-gray-100: #f9f9f9;
+  --seeds-color-gray-950: #222222;
+  --seeds-color-gray-900: #292929;
+  --seeds-color-gray-850: #333333;
+  --seeds-color-gray-800: #373737;
+  --seeds-color-gray-750: #555555;
+  --seeds-color-gray-700: #767676;
+  --seeds-color-gray-650: #888888;
+  --seeds-color-gray-600: #999999;
+  --seeds-color-gray-550: #aaaaaa;
+  --seeds-color-gray-500: #cccccc;
+  --seeds-color-gray-450: #dedee0;
+  --seeds-color-gray-400: #efefef;
+  --seeds-color-gray-300: #f6f6f6;
+  --seeds-color-gray-200: #f7f7f7;
+  --seeds-color-gray-100: #f9f9f9;
 
   /**
    * Semantic Colors
    */
 
   /* Primary */
-  --bloom-color-primary: var(--bloom-color-blue-500);
-  --bloom-color-primary-dark: var(--bloom-color-blue-700);
-  --bloom-color-primary-darker: var(--bloom-color-blue-900);
-  --bloom-color-primary-light: var(--bloom-color-blue-300);
-  --bloom-color-primary-lighter: var(--bloom-color-blue-100);
+  --seeds-color-primary: var(--seeds-color-blue-500);
+  --seeds-color-primary-dark: var(--seeds-color-blue-700);
+  --seeds-color-primary-darker: var(--seeds-color-blue-900);
+  --seeds-color-primary-light: var(--seeds-color-blue-300);
+  --seeds-color-primary-lighter: var(--seeds-color-blue-100);
 
   /* Secondary */
-  --bloom-color-secondary: var(--bloom-color-gray-700);
-  --bloom-color-secondary-light: var(--bloom-color-gray-400);
-  --bloom-color-secondary-lighter: var(--bloom-color-gray-100);
-  --bloom-color-secondary-dark: var(--bloom-color-gray-750);
-  --bloom-color-secondary-darker: var(--bloom-color-gray-900);
+  --seeds-color-secondary: var(--seeds-color-gray-700);
+  --seeds-color-secondary-light: var(--seeds-color-gray-400);
+  --seeds-color-secondary-lighter: var(--seeds-color-gray-100);
+  --seeds-color-secondary-dark: var(--seeds-color-gray-750);
+  --seeds-color-secondary-darker: var(--seeds-color-gray-900);
 
   /* Alert */
-  --bloom-color-alert: var(--bloom-color-red-500);
-  --bloom-color-alert-light: var(--bloom-color-red-300);
-  --bloom-color-alert-lighter: var(--bloom-color-red-100);
-  --bloom-color-alert-dark: var(--bloom-color-red-700);
-  --bloom-color-alert-darker: var(--bloom-color-red-900);
+  --seeds-color-alert: var(--seeds-color-red-500);
+  --seeds-color-alert-light: var(--seeds-color-red-300);
+  --seeds-color-alert-lighter: var(--seeds-color-red-100);
+  --seeds-color-alert-dark: var(--seeds-color-red-700);
+  --seeds-color-alert-darker: var(--seeds-color-red-900);
 
   /* Success */
-  --bloom-color-success: var(--bloom-color-green-500);
-  --bloom-color-success-light: var(--bloom-color-green-300);
-  --bloom-color-success-lighter: var(--bloom-color-green-100);
-  --bloom-color-success-dark: var(--bloom-color-green-700);
-  --bloom-color-success-darker: var(--bloom-color-green-900);
+  --seeds-color-success: var(--seeds-color-green-500);
+  --seeds-color-success-light: var(--seeds-color-green-300);
+  --seeds-color-success-lighter: var(--seeds-color-green-100);
+  --seeds-color-success-dark: var(--seeds-color-green-700);
+  --seeds-color-success-darker: var(--seeds-color-green-900);
 
   /* Warn */
-  --bloom-color-warn: var(--bloom-color-yellow-500);
-  --bloom-color-warn-light: var(--bloom-color-yellow-300);
-  --bloom-color-warn-lighter: var(--bloom-color-yellow-100);
-  --bloom-color-warn-dark: var(--bloom-color-yellow-700);
-  --bloom-color-warn-darker: var(--bloom-color-yellow-900);
+  --seeds-color-warn: var(--seeds-color-yellow-500);
+  --seeds-color-warn-light: var(--seeds-color-yellow-300);
+  --seeds-color-warn-lighter: var(--seeds-color-yellow-100);
+  --seeds-color-warn-dark: var(--seeds-color-yellow-700);
+  --seeds-color-warn-darker: var(--seeds-color-yellow-900);
 
   /* Accent (Cool) */
-  --bloom-color-accent-cool: var(--bloom-color-cyan-500);
-  --bloom-color-accent-cool-light: var(--bloom-color-cyan-300);
-  --bloom-color-accent-cool-lighter: var(--bloom-color-cyan-100);
-  --bloom-color-accent-cool-dark: var(--bloom-color-cyan-700);
-  --bloom-color-accent-cool-darker: var(--bloom-color-cyan-900);
+  --seeds-color-accent-cool: var(--seeds-color-cyan-500);
+  --seeds-color-accent-cool-light: var(--seeds-color-cyan-300);
+  --seeds-color-accent-cool-lighter: var(--seeds-color-cyan-100);
+  --seeds-color-accent-cool-dark: var(--seeds-color-cyan-700);
+  --seeds-color-accent-cool-darker: var(--seeds-color-cyan-900);
 
   /* Accent (Warm) */
-  --bloom-color-accent-warm: var(--bloom-color-orange-500);
-  --bloom-color-accent-warm-dark: var(--bloom-color-orange-700);
-  --bloom-color-accent-warm-darker: var(--bloom-color-orange-900);
-  --bloom-color-accent-warm-light: var(--bloom-color-orange-300);
-  --bloom-color-accent-warm-lighter: var(--bloom-color-orange-100);
+  --seeds-color-accent-warm: var(--seeds-color-orange-500);
+  --seeds-color-accent-warm-dark: var(--seeds-color-orange-700);
+  --seeds-color-accent-warm-darker: var(--seeds-color-orange-900);
+  --seeds-color-accent-warm-light: var(--seeds-color-orange-300);
+  --seeds-color-accent-warm-lighter: var(--seeds-color-orange-100);
 
   /**
    * Common Component Colors
    */
 
   /* Text Colors */
-  --bloom-text-color: var(--bloom-color-gray-750);
-  --bloom-text-color-light: var(--bloom-color-gray-700);
-  --bloom-text-color-disabled: var(--bloom-color-gray-450);
-  --bloom-text-color-dark: var(--bloom-color-gray-800);
-  --bloom-text-color-darker: var(--bloom-color-gray-950);
+  --seeds-text-color: var(--seeds-color-gray-750);
+  --seeds-text-color-light: var(--seeds-color-gray-700);
+  --seeds-text-color-disabled: var(--seeds-color-gray-450);
+  --seeds-text-color-dark: var(--seeds-color-gray-800);
+  --seeds-text-color-darker: var(--seeds-color-gray-950);
 
   /* Form Input Colors */
-  --bloom-input-text-label-color: var(--bloom-color-gray-750);
-  --bloom-input-text-placeholder-color: var(--bloom-color-gray-700);
-  --bloom-input-text-highlight-color: var(--bloom-color-gray-900);
-  --bloom-input-icon-color: var(--bloom-color-gray-750);
-  --bloom-input-bg-color: var(--bloom-color-gray-100);
-  --bloom-input-border-color: var(--bloom-color-gray-450);
-  --bloom-input-text-color-disabled: var(--bloom-color-gray-700);
-  --bloom-input-icon-color-disabled: var(--bloom-color-gray-650);
-  --bloom-input-bg-color-disabled: var(--bloom-color-gray-400);
-  --bloom-input-border-color-disabled: var(--bloom-color-gray-500);
+  --seeds-input-text-label-color: var(--seeds-color-gray-750);
+  --seeds-input-text-placeholder-color: var(--seeds-color-gray-700);
+  --seeds-input-text-highlight-color: var(--seeds-color-gray-900);
+  --seeds-input-icon-color: var(--seeds-color-gray-750);
+  --seeds-input-bg-color: var(--seeds-color-gray-100);
+  --seeds-input-border-color: var(--seeds-color-gray-450);
+  --seeds-input-text-color-disabled: var(--seeds-color-gray-700);
+  --seeds-input-icon-color-disabled: var(--seeds-color-gray-650);
+  --seeds-input-bg-color-disabled: var(--seeds-color-gray-400);
+  --seeds-input-border-color-disabled: var(--seeds-color-gray-500);
 
   /* Background Colors */
-  --bloom-bg-color-canvas: var(--bloom-color-gray-300);
-  --bloom-bg-color-surface: var(--bloom-color-white);
-  --bloom-bg-color-muted: var(--bloom-color-gray-100);
-  --bloom-bg-color-disabled: var(--bloom-color-gray-450);
-  --bloom-bg-color-inverse: var(--bloom-colors-gray-800);
-  --bloom-bg-color-surface-primary: var(--bloom-color-blue-100);
-  --bloom-bg-color-surface-primary-inverse: var(--bloom-color-blue-900);
+  --seeds-bg-color-canvas: var(--seeds-color-gray-300);
+  --seeds-bg-color-surface: var(--seeds-color-white);
+  --seeds-bg-color-muted: var(--seeds-color-gray-100);
+  --seeds-bg-color-disabled: var(--seeds-color-gray-450);
+  --seeds-bg-color-inverse: var(--seeds-colors-gray-800);
+  --seeds-bg-color-surface-primary: var(--seeds-color-blue-100);
+  --seeds-bg-color-surface-primary-inverse: var(--seeds-color-blue-900);
 
   /* Border Color */
-  --bloom-border-color: var(--bloom-color-gray-450);
+  --seeds-border-color: var(--seeds-color-gray-450);
 
   /* Text / Element Colors */
-  --bloom-color-on-canvas: var(--bloom-color-gray-950);
-  --bloom-color-on-surface: var(--bloom-color-gray-950);
-  --bloom-color-on-disabled: var(--bloom-color-gray-700);
-  --bloom-color-on-inverse: var(--bloom-color-white);
-  --bloom-color-on-inverse-muted: var(--bloom-color-gray-500);
+  --seeds-color-on-canvas: var(--seeds-color-gray-950);
+  --seeds-color-on-surface: var(--seeds-color-gray-950);
+  --seeds-color-on-disabled: var(--seeds-color-gray-700);
+  --seeds-color-on-inverse: var(--seeds-color-white);
+  --seeds-color-on-inverse-muted: var(--seeds-color-gray-500);
 }
diff --git a/src/global/tokens/fonts.scss b/src/global/tokens/fonts.scss
index c4b66c1..2a4f231 100644
--- a/src/global/tokens/fonts.scss
+++ b/src/global/tokens/fonts.scss
@@ -3,71 +3,72 @@
    * Base Typography
    */
 
-  --bloom-font-sans: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
-  --bloom-font-serif: "Noto Serif", Georgia, Times, serif;
-  --bloom-font-alt-sans: Lato, Helvetica, Arial, Verdana, sans-serif;
-  --bloom-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --seeds-font-sans: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
+  --seeds-font-serif: "Noto Serif", Georgia, Times, serif;
+  --seeds-font-alt-sans: Lato, Helvetica, Arial, Verdana, sans-serif;
+  --seeds-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
 
-  --bloom-font-size-3xs: 0.6875rem;
-  --bloom-font-size-2xs: 0.75rem;
-  --bloom-font-size-xs: 0.8125rem;
-  --bloom-font-size-sm: 0.875rem;
-  --bloom-font-size-base: 1rem;
-  --bloom-font-size-lg: 1.125rem;
-  --bloom-font-size-xl: 1.25rem;
-  --bloom-font-size-2xl: 1.625rem;
-  --bloom-font-size-3xl: 2rem;
-  --bloom-font-size-4xl: 2.5rem;
-  --bloom-font-size-5xl: 3rem;
-  --bloom-font-size-6xl: 4rem;
-  --bloom-font-size-7xl: 4.5rem;
+  --seeds-font-size-3xs: 0.6875rem;
+  --seeds-font-size-2xs: 0.75rem;
+  --seeds-font-size-xs: 0.8125rem;
+  --seeds-font-size-sm: 0.875rem;
+  --seeds-font-size-base: 1rem;
+  --seeds-font-size-lg: 1.125rem;
+  --seeds-font-size-xl: 1.25rem;
+  --seeds-font-size-2xl: 1.625rem;
+  --seeds-font-size-3xl: 2rem;
+  --seeds-font-size-4xl: 2.5rem;
+  --seeds-font-size-5xl: 3rem;
+  --seeds-font-size-6xl: 4rem;
+  --seeds-font-size-7xl: 4.5rem;
 
-  --bloom-font-weight-regular: 400;
-  --bloom-font-weight-semibold: 600;
-  --bloom-font-weight-bold: 700;
+  --seeds-font-weight-regular: 400;
+  --seeds-font-weight-semibold: 600;
+  --seeds-font-weight-bold: 700;
 
-  --bloom-letter-spacing-tight: -0.25em;
-  --bloom-letter-spacing-normal: 0em;
-  --bloom-letter-spacing-wide: 0.05em;
-  --bloom-letter-spacing-wider: 0.12em;
-  --bloom-letter-spacing-widest: 0.25em;
+  --seeds-letter-spacing-tight: -0.25em;
+  --seeds-letter-spacing-normal: 0em;
+  --seeds-letter-spacing-wide: 0.05em;
+  --seeds-letter-spacing-wider: 0.12em;
+  --seeds-letter-spacing-widest: 0.25em;
 
-  --bloom-line-height-3: 0.75rem;
-  --bloom-line-height-4: 1rem;
-  --bloom-line-height-5: 1.25rem;
-  --bloom-line-height-6: 1.5rem;
-  --bloom-line-height-7: 1.75rem;
-  --bloom-line-height-8: 2rem;
-  --bloom-line-height-9: 2.25rem;
-  --bloom-line-height-10: 2.5rem;
-  --bloom-line-height-none: 1;
-  --bloom-line-height-tight: 1.25;
-  --bloom-line-height-snug: 1.375;
-  --bloom-line-height-normal: 1.5;
-  --bloom-line-height-relaxed: 1.625;
-  --bloom-line-height-loose: 2;
+  --seeds-line-height-3: 0.75rem;
+  --seeds-line-height-4: 1rem;
+  --seeds-line-height-5: 1.25rem;
+  --seeds-line-height-6: 1.5rem;
+  --seeds-line-height-7: 1.75rem;
+  --seeds-line-height-8: 2rem;
+  --seeds-line-height-9: 2.25rem;
+  --seeds-line-height-10: 2.5rem;
+  --seeds-line-height-none: 1;
+  --seeds-line-height-tight: 1.25;
+  --seeds-line-height-snug: 1.375;
+  --seeds-line-height-normal: 1.5;
+  --seeds-line-height-relaxed: 1.625;
+  --seeds-line-height-loose: 2;
 
   /**
    * Semantic Typography
    */
 
-  --bloom-type-body-size: var(--bloom-font-size-base);
-  --bloom-type-label-size: var(--bloom-font-size-sm);
-  --bloom-type-caption-size: var(--bloom-font-size-xs);
- 
-  --bloom-type-heading-size-4xl: var(--bloom-font-size-4xl);
-  --bloom-type-heading-size-3xl: var(--bloom-font-size-3xl);
-  --bloom-type-heading-size-2xl: var(--bloom-font-size-2xl);
-  --bloom-type-heading-size-xl: var(--bloom-font-size-xl);
-  --bloom-type-heading-size-lg: var(--bloom-font-size-lg);
-  --bloom-type-heading-size-md: var(--bloom-font-size-base);
-  --bloom-type-heading-size-sm: var(--bloom-font-size-sm);
-  --bloom-type-heading-size-xs: var(--bloom-font-size-xs);
+  --seeds-type-body-size: var(--seeds-font-size-base);
+  --seeds-type-label-size: var(--seeds-font-size-sm);
+  --seeds-type-caption-size: var(--seeds-font-size-xs);
 
-  --bloom-type-heading-size-4xl-mobile: var(--bloom-type-heading-size-3xl);
-  --bloom-type-heading-size-3xl-mobile: var(--bloom-type-heading-size-2xl);
-  --bloom-type-heading-size-2xl-mobile: var(--bloom-type-heading-size-xl);
+  --seeds-type-heading-size-4xl: var(--seeds-font-size-4xl);
+  --seeds-type-heading-size-3xl: var(--seeds-font-size-3xl);
+  --seeds-type-heading-size-2xl: var(--seeds-font-size-2xl);
+  --seeds-type-heading-size-xl: var(--seeds-font-size-xl);
+  --seeds-type-heading-size-lg: var(--seeds-font-size-lg);
+  --seeds-type-heading-size-md: var(--seeds-font-size-base);
+  --seeds-type-heading-size-sm: var(--seeds-font-size-sm);
+  --seeds-type-heading-size-xs: var(--seeds-font-size-xs);
 
-  --bloom-line-height-heading: var(--bloom-line-height-tight);
-  --bloom-line-height-content: var(--bloom-line-height-normal);
+  --seeds-type-heading-size-4xl-mobile: var(--seeds-type-heading-size-3xl);
+  --seeds-type-heading-size-3xl-mobile: var(--seeds-type-heading-size-2xl);
+  --seeds-type-heading-size-2xl-mobile: var(--seeds-type-heading-size-xl);
+
+  --seeds-line-height-heading: var(--seeds-line-height-tight);
+  --seeds-line-height-content: var(--seeds-line-height-normal);
 }
diff --git a/src/global/tokens/screens.scss b/src/global/tokens/screens.scss
index 14ab638..e95928f 100644
--- a/src/global/tokens/screens.scss
+++ b/src/global/tokens/screens.scss
@@ -10,11 +10,11 @@
 @custom-media --2xl-and-up (min-width: 1440px);
 
 :root {
-  --bloom-screen-sm: 640px;
-  --bloom-screen-md: 768px;
-  --bloom-screen-lg: 1024px;
-  --bloom-screen-xl: 1280px;
-  --bloom-screen-2xl: 1440px;
+  --seeds-screen-sm: 640px;
+  --seeds-screen-md: 768px;
+  --seeds-screen-lg: 1024px;
+  --seeds-screen-xl: 1280px;
+  --seeds-screen-2xl: 1440px;
 
-  --bloom-z-index-overlay: 10;
+  --seeds-z-index-overlay: 10;
 }
diff --git a/src/global/tokens/sizes.scss b/src/global/tokens/sizes.scss
index c305b6b..7cd9df0 100644
--- a/src/global/tokens/sizes.scss
+++ b/src/global/tokens/sizes.scss
@@ -3,63 +3,63 @@
    * Base Sizes
    */
 
-  --bloom-s0_5: 0.125rem;
-  --bloom-s1: 0.25rem;
-  --bloom-s1_5: 0.375rem;
-  --bloom-s2: 0.5rem;
-  --bloom-s2_5: 0.625rem;
-  --bloom-s3: 0.75rem;
-  --bloom-s3_5: 0.875rem;
-  --bloom-s4: 1rem;
-  --bloom-s5: 1.25rem;
-  --bloom-s6: 1.5rem;
-  --bloom-s7: 1.75rem;
-  --bloom-s8: 2rem;
-  --bloom-s9: 2.25rem;
-  --bloom-s10: 2.5rem;
-  --bloom-s11: 2.75rem;
-  --bloom-s12: 3rem;
-  --bloom-s14: 3.5rem;
-  --bloom-s16: 4rem;
-  --bloom-s20: 5rem;
-  --bloom-s24: 6rem;
-  --bloom-s28: 7rem;
-  --bloom-s32: 8rem;
-  --bloom-s36: 9rem;
-  --bloom-s40: 10rem;
-  --bloom-s44: 11rem;
-  --bloom-s48: 12rem;
-  --bloom-s52: 13rem;
-  --bloom-s56: 14rem;
-  --bloom-s60: 15rem;
-  --bloom-s64: 16rem;
-  --bloom-s72: 18rem;
-  --bloom-s80: 20rem;
-  --bloom-s96: 24rem;
+  --seeds-s0_5: 0.125rem;
+  --seeds-s1: 0.25rem;
+  --seeds-s1_5: 0.375rem;
+  --seeds-s2: 0.5rem;
+  --seeds-s2_5: 0.625rem;
+  --seeds-s3: 0.75rem;
+  --seeds-s3_5: 0.875rem;
+  --seeds-s4: 1rem;
+  --seeds-s5: 1.25rem;
+  --seeds-s6: 1.5rem;
+  --seeds-s7: 1.75rem;
+  --seeds-s8: 2rem;
+  --seeds-s9: 2.25rem;
+  --seeds-s10: 2.5rem;
+  --seeds-s11: 2.75rem;
+  --seeds-s12: 3rem;
+  --seeds-s14: 3.5rem;
+  --seeds-s16: 4rem;
+  --seeds-s20: 5rem;
+  --seeds-s24: 6rem;
+  --seeds-s28: 7rem;
+  --seeds-s32: 8rem;
+  --seeds-s36: 9rem;
+  --seeds-s40: 10rem;
+  --seeds-s44: 11rem;
+  --seeds-s48: 12rem;
+  --seeds-s52: 13rem;
+  --seeds-s56: 14rem;
+  --seeds-s60: 15rem;
+  --seeds-s64: 16rem;
+  --seeds-s72: 18rem;
+  --seeds-s80: 20rem;
+  --seeds-s96: 24rem;
 
-  --bloom-width-xs: 20rem;
-  --bloom-width-sm: 24rem;
-  --bloom-width-md: 28rem;
-  --bloom-width-lg: 32rem;
-  --bloom-width-xl: 36rem;
-  --bloom-width-2xl: 42rem;
-  --bloom-width-3xl: 48rem;
-  --bloom-width-4xl: 56rem;
-  --bloom-width-5xl: 64rem;
-  --bloom-width-6xl: 72rem;
-  --bloom-width-7xl: 80rem;
-  --bloom-width-prose: 65ch;
-  --bloom-width-1-3rd: 33.333333%;
-  --bloom-width-2-3rd: 66.666667%;
+  --seeds-width-xs: 20rem;
+  --seeds-width-sm: 24rem;
+  --seeds-width-md: 28rem;
+  --seeds-width-lg: 32rem;
+  --seeds-width-xl: 36rem;
+  --seeds-width-2xl: 42rem;
+  --seeds-width-3xl: 48rem;
+  --seeds-width-4xl: 56rem;
+  --seeds-width-5xl: 64rem;
+  --seeds-width-6xl: 72rem;
+  --seeds-width-7xl: 80rem;
+  --seeds-width-prose: 65ch;
+  --seeds-width-1-3rd: 33.333333%;
+  --seeds-width-2-3rd: 66.666667%;
 
   /** 
    * Semantic Sizes
    */
 
-  --bloom-spacer-container: var(--bloom-s12);
-  --bloom-spacer-section: var(--bloom-s8);
-  --bloom-spacer-content: var(--bloom-s6);
-  --bloom-spacer-header: var(--bloom-s4);
-  --bloom-spacer-label: var(--bloom-s3);
-  --bloom-spacer-text: var(--bloom-s2);
+  --seeds-spacer-container: var(--seeds-s12);
+  --seeds-spacer-section: var(--seeds-s8);
+  --seeds-spacer-content: var(--seeds-s6);
+  --seeds-spacer-header: var(--seeds-s4);
+  --seeds-spacer-label: var(--seeds-s3);
+  --seeds-spacer-text: var(--seeds-s2);
 }
diff --git a/src/icons/Icon.scss b/src/icons/Icon.scss
index 2f66976..97ff892 100644
--- a/src/icons/Icon.scss
+++ b/src/icons/Icon.scss
@@ -1,4 +1,4 @@
-.icon {
+.seeds-icon {
   --icon-sm: 0.75rem;
   --icon-sm-alignment: -0.05rem;
   --icon-md: 1rem;
@@ -35,7 +35,7 @@
   }
 }
 
-.icon svg {
+.seeds-icon svg {
   display: block;
   height: 100%;
   aspect-ratio: 1 / 1;
diff --git a/src/icons/Icon.tsx b/src/icons/Icon.tsx
index 32faf5d..fefe211 100644
--- a/src/icons/Icon.tsx
+++ b/src/icons/Icon.tsx
@@ -22,7 +22,7 @@ export interface IconProps {
 }
 
 const Icon = (props: IconProps) => {
-  const classNames = ["icon"]
+  const classNames = ["seeds-icon"]
   if (props.className) classNames.push(props.className)
   const isHidden = !(props["aria-hidden"] === false)
 
diff --git a/src/icons/__stories__/Icon.stories.tsx b/src/icons/__stories__/Icon.stories.tsx
index e59009b..48abb9e 100644
--- a/src/icons/__stories__/Icon.stories.tsx
+++ b/src/icons/__stories__/Icon.stories.tsx
@@ -59,13 +59,13 @@ icons.args = {
 
 export const containerBasedSizes = () => (
   <>
-    <div style={{ fontSize: "var(--bloom-font-size-sm)" }}>
+    <div style={{ fontSize: "var(--seeds-font-size-sm)" }}>
       <Icon icon={faDoorOpen} /> door-open
     </div>
-    <div style={{ fontSize: "var(--bloom-font-size-lg)" }}>
+    <div style={{ fontSize: "var(--seeds-font-size-lg)" }}>
       <Icon icon={faDoorOpen} /> door-open
     </div>
-    <div style={{ fontSize: "var(--bloom-font-size-2xl)" }}>
+    <div style={{ fontSize: "var(--seeds-font-size-2xl)" }}>
       <Icon icon={faDoorOpen} /> door-open
     </div>
   </>
@@ -111,4 +111,4 @@ export const customIconUsingSvg: Story<IconProps> = CustomTemplate.bind({})
 // es-ignore-next-line
 customIconUsingSvg.args = {
   size: undefined,
-}
\ No newline at end of file
+}
diff --git a/src/layout/Grid.scss b/src/layout/Grid.scss
index 6937ed9..8ff6297 100644
--- a/src/layout/Grid.scss
+++ b/src/layout/Grid.scss
@@ -1,13 +1,13 @@
-.grid {
-  --grid-gap-sm: var(--bloom-s4);
-  --grid-gap-md: var(--bloom-s6);
-  --grid-gap-lg: var(--bloom-s8);
-  --grid-gap-xl: var(--bloom-s12);
+.seeds-grid {
+  --grid-gap-sm: var(--seeds-s4);
+  --grid-gap-md: var(--seeds-s6);
+  --grid-gap-lg: var(--seeds-s8);
+  --grid-gap-xl: var(--seeds-s12);
 
   --grid-gap-tablet: var(--grid-gap-sm);
 
   --grid-gap: var(--grid-gap-md);
-  
+
   @media (--lg-down) {
     --grid-gap: var(--grid-gap-tablet);
   }
@@ -34,7 +34,7 @@
   }
 }
 
-.grid-row {
+.seeds-grid-row {
   --grid-columns: auto-fit;
   --grid-minimum-column-size: 0;
 
@@ -47,28 +47,28 @@
   grid-template-columns: repeat(var(--grid-columns), minmax(var(--grid-minimum-column-size), 1fr));
 }
 
-.grid-row > * {
+.seeds-grid-row > * {
   overflow-wrap: break-word;
 }
 
 @media (--sm-and-up) {
-  .grid-row[data-columns="4"] {
+  .seeds-grid-row[data-columns="4"] {
     --grid-columns: 4;
   }
 
-  .grid-row[data-columns="3"] {
+  .seeds-grid-row[data-columns="3"] {
     --grid-columns: 3;
   }
 
-  .grid-row[data-columns="2"] {
+  .seeds-grid-row[data-columns="2"] {
     --grid-columns: 2;
   }
 
-  .grid-row[data-columns="1"] {
+  .seeds-grid-row[data-columns="1"] {
     --grid-columns: 1;
   }
 
-  .grid-row[data-columns="1+2"] {
+  .seeds-grid-row[data-columns="1+2"] {
     --grid-columns: 4;
 
     > *:first-child {
@@ -76,7 +76,7 @@
     }
   }
 
-  .grid-row[data-columns="2+1"] {
+  .seeds-grid-row[data-columns="2+1"] {
     --grid-columns: 4;
 
     > *:last-child {
diff --git a/src/layout/Grid.tsx b/src/layout/Grid.tsx
index bd3b113..f6994a6 100644
--- a/src/layout/Grid.tsx
+++ b/src/layout/Grid.tsx
@@ -9,10 +9,14 @@ export interface GridCellProps {
 }
 
 const GridCell = (props: GridCellProps) => {
-  const classNames = ["grid-cell"]
+  const classNames = ["seeds-grid-cell"]
   if (props.className) classNames.push(props.className)
 
-  return <div id={props.id} className={classNames.join(" ")} role="gridcell">{props.children}</div>
+  return (
+    <div id={props.id} className={classNames.join(" ")} role="gridcell">
+      {props.children}
+    </div>
+  )
 }
 
 export interface GridRowProps extends GridCellProps {
@@ -20,10 +24,14 @@ export interface GridRowProps extends GridCellProps {
 }
 
 const GridRow = (props: GridRowProps) => {
-  const classNames = ["grid-row"]
+  const classNames = ["seeds-grid-row"]
   if (props.className) classNames.push(props.className)
 
-  return <div id={props.id} className={classNames.join(" ")} role="row" data-columns={props.columns}>{props.children}</div>
+  return (
+    <div id={props.id} className={classNames.join(" ")} role="row" data-columns={props.columns}>
+      {props.children}
+    </div>
+  )
 }
 
 export interface GridProps extends GridCellProps {
@@ -35,10 +43,14 @@ export interface GridProps extends GridCellProps {
 }
 
 const Grid = (props: GridProps) => {
-  const classNames = ["grid"]
+  const classNames = ["seeds-grid"]
   if (props.className) classNames.push(props.className)
 
-  return <div id={props.id} className={classNames.join(" ")} data-spacing={props.spacing} role="grid">{props.children}</div>
+  return (
+    <div id={props.id} className={classNames.join(" ")} data-spacing={props.spacing} role="grid">
+      {props.children}
+    </div>
+  )
 }
 
 Grid.Cell = GridCell
diff --git a/src/layout/__stories__/Grid.docs.mdx b/src/layout/__stories__/Grid.docs.mdx
index 3a0e3e8..3a90859 100644
--- a/src/layout/__stories__/Grid.docs.mdx
+++ b/src/layout/__stories__/Grid.docs.mdx
@@ -18,11 +18,11 @@ import Grid from "../Grid"
 
 ## Theme Variables
 
-| Name                                | Description                                                      | Default                              |
-| ----------------------------------- | ---------------------------------------------------------------- | ------------------------------------ |
-| `--grid-gap-sm`        |                             | `--bloom-s4`               |
-| `--grid-gap-md`        |                             | `--bloom-s6`               |
-| `--grid-gap-lg`        |                             | `--bloom-s8`               |
-| `--grid-gap-xl`        |                             | `--bloom-s12`               |
-| `--grid-gap-tablet`        |                             | `--grid-gap-sm`               |
-| `--grid-gap`        |                             | `--grid-gap-md`               |
+| Name                | Description | Default         |
+| ------------------- | ----------- | --------------- |
+| `--grid-gap-sm`     |             | `--seeds-s4`    |
+| `--grid-gap-md`     |             | `--seeds-s6`    |
+| `--grid-gap-lg`     |             | `--seeds-s8`    |
+| `--grid-gap-xl`     |             | `--seeds-s12`   |
+| `--grid-gap-tablet` |             | `--grid-gap-sm` |
+| `--grid-gap`        |             | `--grid-gap-md` |
diff --git a/src/layout/__stories__/Grid.stories.tsx b/src/layout/__stories__/Grid.stories.tsx
index db19b7f..990d0a3 100644
--- a/src/layout/__stories__/Grid.stories.tsx
+++ b/src/layout/__stories__/Grid.stories.tsx
@@ -75,7 +75,11 @@ export const gridExample = () => (
       </Grid.Row>
     </Grid>
 
-    <style>{".grid {  margin-block: var(--bloom-spacer-content); } .grid-row > * { background: #eee; padding: .5rem }"}</style>
+    <style>
+      {
+        ".seeds-grid {  margin-block: var(--seeds-spacer-content); } .grid-row > * { background: #eee; padding: .5rem }"
+      }
+    </style>
   </>
 )
 
@@ -90,7 +94,7 @@ export const gridSpacings = () => (
         <Grid.Cell>3</Grid.Cell>
       </Grid.Row>
     </Grid>
-    
+
     <Heading size="xl">Medium (Default) Spacing</Heading>
 
     <Grid spacing="md">
@@ -121,7 +125,11 @@ export const gridSpacings = () => (
       </Grid.Row>
     </Grid>
 
-    <style>{".grid {  margin-block: var(--bloom-spacer-content); } .grid-row > * { background: #eee; padding: .5rem }"}</style>
+    <style>
+      {
+        ".seeds-grid {  margin-block: var(--seeds-spacer-content); } .grid-row > * { background: #eee; padding: .5rem }"
+      }
+    </style>
   </>
 )
 
@@ -131,27 +139,21 @@ export const sectionsAndForms = () => (
       <Heading size="xl">Form Values</Heading>
       <Grid spacing="md">
         <Grid.Row>
-          <FieldValue label="Property Amenities">
-            Pool, BBQ, Rooftop View
-          </FieldValue>
-          <FieldValue label="Property Amenities">
-            Pool, BBQ, Rooftop View
-          </FieldValue>
-          <FieldValue label="Property Amenities">
-            Pool, BBQ, Rooftop View
-          </FieldValue>
+          <FieldValue label="Property Amenities">Pool, BBQ, Rooftop View</FieldValue>
+          <FieldValue label="Property Amenities">Pool, BBQ, Rooftop View</FieldValue>
+          <FieldValue label="Property Amenities">Pool, BBQ, Rooftop View</FieldValue>
         </Grid.Row>
         <Grid.Row>
-          <FieldValue label="Property Amenities">
-            Pool, BBQ, Rooftop View
-          </FieldValue>
-          <FieldValue label="Property Amenities">
-            Pool, BBQ, Rooftop View
-          </FieldValue>
+          <FieldValue label="Property Amenities">Pool, BBQ, Rooftop View</FieldValue>
+          <FieldValue label="Property Amenities">Pool, BBQ, Rooftop View</FieldValue>
         </Grid.Row>
       </Grid>
     </section>
 
-    <style>{".grid { background: var(--bloom-bg-color-surface-primary); padding: var(--bloom-spacer-content); margin-block: var(--bloom-spacer-content) }"}</style>
+    <style>
+      {
+        ".seeds-grid { background: var(--seeds-bg-color-surface-primary); padding: var(--seeds-spacer-content); margin-block: var(--seeds-spacer-content) }"
+      }
+    </style>
   </>
 )
diff --git a/src/navigation/Tabs.scss b/src/navigation/Tabs.scss
index c3c5388..b31cdc1 100644
--- a/src/navigation/Tabs.scss
+++ b/src/navigation/Tabs.scss
@@ -1,24 +1,24 @@
-.tabs {
-  --tab-font: var(--bloom-font-alt-sans);
-  --tab-font-size: var(--bloom-type-body);
-  --tab-font-size-sm: var(--bloom-type-label);
-  --tab-font-weight: var(--bloom-font-weight-semibold);
-  --tab-font-weight-sm: var(--bloom-font-weight-regular);
-  --tab-background-color: var(--bloom-bg-color-surface);
-  --tab-label-color: var(--bloom-text-color-light);
-  --tab-padding-inline: var(--bloom-s6);
-  --tab-padding-block: var(--bloom-s4);
-  --tab-padding-inline-sm: var(--bloom-s6);
-  --tab-padding-block-sm: var(--bloom-s3);
-  --tab-border-radius: var(--bloom-rounded-lg);
-  --tab-border-color: var(--bloom-border-color);
-  --tab-border-width: var(--bloom-border-1);
-  --tab-hover-background-color: var(--bloom-bg-color-surface-primary);
-  --tab-active-label-color: var(--bloom-color-on-surface);
-  --tab-active-indicator-width: var(--bloom-border-2);
-  --tab-active-indicator-color: var(--bloom-color-primary);
-  --tab-panel-padding: var(--bloom-spacer-section);
-  --tab-panel-background-color: var(--bloom-bg-color-surface);
+.seeds-tabs {
+  --tab-font: var(--seeds-font-alt-sans);
+  --tab-font-size: var(--seeds-type-body);
+  --tab-font-size-sm: var(--seeds-type-label);
+  --tab-font-weight: var(--seeds-font-weight-semibold);
+  --tab-font-weight-sm: var(--seeds-font-weight-regular);
+  --tab-background-color: var(--seeds-bg-color-surface);
+  --tab-label-color: var(--seeds-text-color-light);
+  --tab-padding-inline: var(--seeds-s6);
+  --tab-padding-block: var(--seeds-s4);
+  --tab-padding-inline-sm: var(--seeds-s6);
+  --tab-padding-block-sm: var(--seeds-s3);
+  --tab-border-radius: var(--seeds-rounded-lg);
+  --tab-border-color: var(--seeds-border-color);
+  --tab-border-width: var(--seeds-border-1);
+  --tab-hover-background-color: var(--seeds-bg-color-surface-primary);
+  --tab-active-label-color: var(--seeds-color-on-surface);
+  --tab-active-indicator-width: var(--seeds-border-2);
+  --tab-active-indicator-color: var(--seeds-color-primary);
+  --tab-panel-padding: var(--seeds-spacer-section);
+  --tab-panel-background-color: var(--seeds-bg-color-surface);
 }
 
 .tabs-tablist {
@@ -41,7 +41,8 @@
   background-color: var(--tab-background-color);
   color: var(--tab-label-color);
   padding-inline: var(--tab-padding-inline);
-  padding-block: var(--tab-padding-block) calc(var(--tab-padding-block) - var(--tab-active-indicator-width));
+  padding-block: var(--tab-padding-block)
+    calc(var(--tab-padding-block) - var(--tab-active-indicator-width));
 
   border: var(--tab-border-width) solid var(--tab-border-color);
   border-radius: 0;
@@ -51,11 +52,12 @@
 
   [data-size="sm"] > & {
     padding-inline: var(--tab-padding-inline-sm);
-    padding-block: var(--tab-padding-block-sm) calc(var(--tab-padding-block-sm) - var(--tab-active-indicator-width));
+    padding-block: var(--tab-padding-block-sm)
+      calc(var(--tab-padding-block-sm) - var(--tab-active-indicator-width));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--bloom-color-accent-cool);
+    outline: 2px solid var(--seeds-color-accent-cool);
     outline-offset: 2px;
   }
 
@@ -87,7 +89,7 @@
   }
 
   &[aria-disabled="true"] {
-    color: var(--bloom-text-color-disabled);
+    color: var(--seeds-text-color-disabled);
     border-bottom-width: var(--tab-border-width);
     cursor: not-allowed;
   }
@@ -130,11 +132,12 @@
 
     &[aria-selected="true"] {
       border-bottom-color: var(--tab-border-color);
-      box-shadow: inset calc(var(--tab-active-indicator-width) + var(--tab-border-width)) 0px 0px var(--tab-active-indicator-color);
+      box-shadow: inset calc(var(--tab-active-indicator-width) + var(--tab-border-width)) 0px 0px
+        var(--tab-active-indicator-color);
     }
   }
 
   .tabs-panel {
-    margin-block-start: var(--bloom-spacer-label);
+    margin-block-start: var(--seeds-spacer-label);
   }
 }
diff --git a/src/navigation/Tabs.tsx b/src/navigation/Tabs.tsx
index 4d664f3..8d0b0b1 100644
--- a/src/navigation/Tabs.tsx
+++ b/src/navigation/Tabs.tsx
@@ -25,13 +25,11 @@ export interface TabsProps {
 }
 
 const Tabs = (props: TabsProps) => {
-  const className = ["tabs"]
+  const className = ["seeds-tabs"]
   if (props.className) className.push(props.className)
   const focusTab = typeof props.focusTabOnClick !== "undefined" ? props.focusTabOnClick : false
 
-  return (
-    <ReactTabs {...props} focusTabOnClick={focusTab} className={className.join(" ")} />
-  )
+  return <ReactTabs {...props} focusTabOnClick={focusTab} className={className.join(" ")} />
 }
 
 export interface TabProps {
@@ -46,9 +44,7 @@ export interface TabProps {
 const Tab = (props: TabProps) => {
   const className = ["tabs-tab"]
   if (props.className) className.push(props.className)
-  return (
-    <ReactTab selectedClassName="is-active" {...props} className={className} />
-  )
+  return <ReactTab selectedClassName="is-active" {...props} className={className} />
 }
 
 Tab.tabsRole = "Tab"
@@ -63,7 +59,13 @@ const TabList = (props: TabListProps) => {
   const className = ["tabs-tablist"]
   if (props.className) className.push(props.className)
 
-  return <ReactTabList data-size={props.size || "base"} className={className} children={props.children} />
+  return (
+    <ReactTabList
+      data-size={props.size || "base"}
+      className={className}
+      children={props.children}
+    />
+  )
 }
 
 TabList.tabsRole = "TabList"
@@ -78,9 +80,7 @@ export interface TabPanelProps {
 const TabPanel = (props: TabPanelProps) => {
   const className = ["tabs-panel"]
   if (props.className) className.push(props.className)
-  return (
-    <ReactTabPanel selectedClassName="is-active" {...props} className={className} />
-  )
+  return <ReactTabPanel selectedClassName="is-active" {...props} className={className} />
 }
 
 TabPanel.tabsRole = "TabPanel"
@@ -89,4 +89,4 @@ Tabs.Tab = Tab
 Tabs.TabList = TabList
 Tabs.TabPanel = TabPanel
 
-export {Tabs as default, Tab, TabList, TabPanel}
+export { Tabs as default, Tab, TabList, TabPanel }
diff --git a/src/navigation/__stories__/Tabs.docs.mdx b/src/navigation/__stories__/Tabs.docs.mdx
index b375faf..7cb9b27 100644
--- a/src/navigation/__stories__/Tabs.docs.mdx
+++ b/src/navigation/__stories__/Tabs.docs.mdx
@@ -22,24 +22,24 @@ import { Swatch } from "../../../documentation/components/Swatch.tsx"
 
 ## Theme Variables
 
-| Name                           | Description                               | Default                        |
-| ------------------------------ | ----------------------------------------- | ------------------------------ |
-| `--tab-font`                   | Font family                               | `--bloom-font-alt-sans`        |
-| `--tab-font-size`              | Font size                                 | `--bloom-type-body`            |
-| `--tab-font-size-sm`           | Font size on mobile screens               | `--bloom-type-label`           |
-| `--tab-font-weight`            | Font weight                               | `--bloom-font-weight-semibold` |
-| `--tab-font-weight-sm`         | Font weight on mobile screens             | `--bloom-font-weight-regular`  |
-| `--tab-background-color`       | <Swatch color="bloom-bg-color-surface" border={true} /> | `--bloom-bg-color-surface`     |
-| `--tab-label-color`            | <Swatch color="bloom-text-color-light" /> | `--bloom-text-color-light`     |
-| `--tab-padding-inline`         | Horizontal spacing within tab interior    | `--bloom-s6`                   |
-| `--tab-padding-block`          | Vertical spacing within tab interior      | `--bloom-s4`                   |
-| `--tab-padding-inline-sm`      | Horizontal spacing on mobile screens      | `--bloom-s6`                   |
-| `--tab-padding-block-sm`       | Vertical spacing on mobile screens        | `--bloom-s3`                   |
-| `--tab-border-radius`          | Tab border radius                         | `--bloom-rounded-lg`           |
-| `--tab-border-color`           | <Swatch color="bloom-border-color" />     | `--bloom-border-color`         |
-| `--tab-border-width`           | Tab border radius                         | `--bloom-border-1`             |
-| `--tab-active-label-color`     | <Swatch color="bloom-color-on-surface" /> | `--bloom-color-on-surface`     |
-| `--tab-active-indicator-width` | Width of the colorful border              | `--bloom-border-2`             |
-| `--tab-active-indicator-color` | <Swatch color="bloom-color-primary" />    | `--bloom-color-primary`        |
-| `--tab-panel-padding`          | Spacing within the panel interior         | `--bloom-spacer-section`       |
-| `--tab-panel-background-color` | <Swatch color="bloom-bg-color-surface" border={true} /> | `--bloom-bg-color-surface`     |
+| Name                           | Description                                             | Default                        |
+| ------------------------------ | ------------------------------------------------------- | ------------------------------ |
+| `--tab-font`                   | Font family                                             | `--seeds-font-alt-sans`        |
+| `--tab-font-size`              | Font size                                               | `--seeds-type-body`            |
+| `--tab-font-size-sm`           | Font size on mobile screens                             | `--seeds-type-label`           |
+| `--tab-font-weight`            | Font weight                                             | `--seeds-font-weight-semibold` |
+| `--tab-font-weight-sm`         | Font weight on mobile screens                           | `--seeds-font-weight-regular`  |
+| `--tab-background-color`       | <Swatch color="bloom-bg-color-surface" border={true} /> | `--seeds-bg-color-surface`     |
+| `--tab-label-color`            | <Swatch color="bloom-text-color-light" />               | `--seeds-text-color-light`     |
+| `--tab-padding-inline`         | Horizontal spacing within tab interior                  | `--seeds-s6`                   |
+| `--tab-padding-block`          | Vertical spacing within tab interior                    | `--seeds-s4`                   |
+| `--tab-padding-inline-sm`      | Horizontal spacing on mobile screens                    | `--seeds-s6`                   |
+| `--tab-padding-block-sm`       | Vertical spacing on mobile screens                      | `--seeds-s3`                   |
+| `--tab-border-radius`          | Tab border radius                                       | `--seeds-rounded-lg`           |
+| `--tab-border-color`           | <Swatch color="bloom-border-color" />                   | `--seeds-border-color`         |
+| `--tab-border-width`           | Tab border radius                                       | `--seeds-border-1`             |
+| `--tab-active-label-color`     | <Swatch color="bloom-color-on-surface" />               | `--seeds-color-on-surface`     |
+| `--tab-active-indicator-width` | Width of the colorful border                            | `--seeds-border-2`             |
+| `--tab-active-indicator-color` | <Swatch color="bloom-color-primary" />                  | `--seeds-color-primary`        |
+| `--tab-panel-padding`          | Spacing within the panel interior                       | `--seeds-spacer-section`       |
+| `--tab-panel-background-color` | <Swatch color="bloom-bg-color-surface" border={true} /> | `--seeds-bg-color-surface`     |
diff --git a/src/navigation/__stories__/Tabs.stories.tsx b/src/navigation/__stories__/Tabs.stories.tsx
index 076361a..e90c555 100644
--- a/src/navigation/__stories__/Tabs.stories.tsx
+++ b/src/navigation/__stories__/Tabs.stories.tsx
@@ -11,10 +11,10 @@ export default {
         <style>
           {`
       .funky {
-        color: var(--bloom-color-accent-warm-dark) !important;
+        color: var(--seeds-color-accent-warm-dark) !important;
       }
       .styled {
-        color: var(--bloom-color-accent-cool) !important;
+        color: var(--seeds-color-accent-cool) !important;
         font-weight: bold;
       }
       .tabs-panel.styled {
diff --git a/src/stories/tokens/colors.stories.mdx b/src/stories/tokens/colors.stories.mdx
index 8f1236c..6257a36 100644
--- a/src/stories/tokens/colors.stories.mdx
+++ b/src/stories/tokens/colors.stories.mdx
@@ -1,13 +1,13 @@
-import { Meta } from "@storybook/addon-docs";
-import { Swatch } from "../../../documentation/components/Swatch.tsx";
+import { Meta } from "@storybook/addon-docs"
+import { Swatch } from "../../../documentation/components/Swatch.tsx"
 
-<Meta title="Tokens/Color Tokens" parameters={{ previewTabs: { 'canvas': { hidden: true }}}} />
+<Meta title="Tokens/Color Tokens" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
 
 # Color Tokens
 
-* [Global Tokens](#global-tokens)
-* [Semantic Tokens](#semantic-tokens)
-* [Common Component Tokens](#common-component-tokens)
+- [Global Tokens](#global-tokens)
+- [Semantic Tokens](#semantic-tokens)
+- [Common Component Tokens](#common-component-tokens)
 
 ## Global Tokens
 
@@ -15,51 +15,50 @@ Global color tokens are the complete palette of color tokens from which any proj
 
 | Name                  | Swatch                                             |
 | --------------------- | -------------------------------------------------- |
-| `--bloom-color-white` | <Swatch color="bloom-color-white" border={true} /> |
-| `--bloom-color-black` | <Swatch color="bloom-color-black" />               |
+| `--seeds-color-white` | <Swatch color="seeds-color-white" border={true} /> |
+| `--seeds-color-black` | <Swatch color="seeds-color-black" />               |
 
 ### Red
 
-| Name                                      | Swatch                                                                                                                                                                                             |
-| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--bloom-color-red-{x}` | <Swatch color="bloom-color-red-900" label="900" /> <Swatch color="bloom-color-red-700" label="700" /> <Swatch color="bloom-color-red-500" label="500" /> <Swatch color="bloom-color-red-300" label="300" /> <Swatch color="bloom-color-red-100" label="100" /> |
+| Name                    | Swatch                                                                                                                                                                                                                                                         |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--seeds-color-red-{x}` | <Swatch color="seeds-color-red-900" label="900" /> <Swatch color="seeds-color-red-700" label="700" /> <Swatch color="seeds-color-red-500" label="500" /> <Swatch color="seeds-color-red-300" label="300" /> <Swatch color="seeds-color-red-100" label="100" /> |
 
 ### Green
 
-| Name                                        | Swatch                                                                                                                                                                                                       |
-| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `--bloom-color-green-{x}` | <Swatch color="bloom-color-green-900" label="900" /> <Swatch color="bloom-color-green-700" label="700" /> <Swatch color="bloom-color-green-500" label="500" /> <Swatch color="bloom-color-green-300" label="300" /> <Swatch color="bloom-color-green-100" label="100" /> |
+| Name                      | Swatch                                                                                                                                                                                                                                                                   |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `--seeds-color-green-{x}` | <Swatch color="seeds-color-green-900" label="900" /> <Swatch color="seeds-color-green-700" label="700" /> <Swatch color="seeds-color-green-500" label="500" /> <Swatch color="seeds-color-green-300" label="300" /> <Swatch color="seeds-color-green-100" label="100" /> |
 
 ### Blue
 
-| Name                                        | Swatch                                                                                                                                                                                                       |
-| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `--bloom-color-blue-{x}` | <Swatch color="bloom-color-blue-900" label="900" /> <Swatch color="bloom-color-blue-700" label="700" /> <Swatch color="bloom-color-blue-500" label="500" /> <Swatch color="bloom-color-blue-300" label="300" /> <Swatch color="bloom-color-blue-100" label="100" /> |
+| Name                     | Swatch                                                                                                                                                                                                                                                              |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--seeds-color-blue-{x}` | <Swatch color="seeds-color-blue-900" label="900" /> <Swatch color="seeds-color-blue-700" label="700" /> <Swatch color="seeds-color-blue-500" label="500" /> <Swatch color="seeds-color-blue-300" label="300" /> <Swatch color="seeds-color-blue-100" label="100" /> |
 
 ### Cyan
 
-| Name                                        | Swatch                                                                                                                                                                                                       |
-| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `--bloom-color-cyan-{x}` | <Swatch color="bloom-color-cyan-900" label="900" /> <Swatch color="bloom-color-cyan-700" label="700" /> <Swatch color="bloom-color-cyan-500" label="500" /> <Swatch color="bloom-color-cyan-300" label="300" /> <Swatch color="bloom-color-cyan-100" label="100" /> |
+| Name                     | Swatch                                                                                                                                                                                                                                                              |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--seeds-color-cyan-{x}` | <Swatch color="seeds-color-cyan-900" label="900" /> <Swatch color="seeds-color-cyan-700" label="700" /> <Swatch color="seeds-color-cyan-500" label="500" /> <Swatch color="seeds-color-cyan-300" label="300" /> <Swatch color="seeds-color-cyan-100" label="100" /> |
 
 ### Orange
 
-| Name                                        | Swatch                                                                                                                                                                                                       |
-| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `--bloom-color-orange-{x}` | <Swatch color="bloom-color-orange-900" label="900" /> <Swatch color="bloom-color-orange-700" label="700" /> <Swatch color="bloom-color-orange-500" label="500" /> <Swatch color="bloom-color-orange-300" label="300" /> <Swatch color="bloom-color-orange-100" label="100" /> |
+| Name                       | Swatch                                                                                                                                                                                                                                                                        |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--seeds-color-orange-{x}` | <Swatch color="seeds-color-orange-900" label="900" /> <Swatch color="seeds-color-orange-700" label="700" /> <Swatch color="seeds-color-orange-500" label="500" /> <Swatch color="seeds-color-orange-300" label="300" /> <Swatch color="seeds-color-orange-100" label="100" /> |
 
 ### Yellow
 
-| Name                                        | Swatch                                                                                                                                                                                                       |
-| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `--bloom-color-yellow-{x}` | <Swatch color="bloom-color-yellow-900" label="900" /> <Swatch color="bloom-color-yellow-700" label="700" /> <Swatch color="bloom-color-yellow-500" label="500" /> <Swatch color="bloom-color-yellow-300" label="300" /> <Swatch color="bloom-color-yellow-100" label="100" /> |
+| Name                       | Swatch                                                                                                                                                                                                                                                                        |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--seeds-color-yellow-{x}` | <Swatch color="seeds-color-yellow-900" label="900" /> <Swatch color="seeds-color-yellow-700" label="700" /> <Swatch color="seeds-color-yellow-500" label="500" /> <Swatch color="seeds-color-yellow-300" label="300" /> <Swatch color="seeds-color-yellow-100" label="100" /> |
 
 ### Gray
 
-| Name                                        | Swatch                                                                                                                                                                                                       |
-| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `--bloom-color-gray-{x}` | <Swatch color="bloom-color-gray-950" label="950" /> <Swatch color="bloom-color-gray-900" label="900" /> <Swatch color="bloom-color-gray-850" label="850" /> <Swatch color="bloom-color-gray-800" label="800" /> <Swatch color="bloom-color-gray-750" label="750" /> <Swatch color="bloom-color-gray-700" label="700" /> <Swatch color="bloom-color-gray-650" label="650" /> <Swatch color="bloom-color-gray-600" label="600" /> <Swatch color="bloom-color-gray-550" label="550" /> <Swatch color="bloom-color-gray-500" label="500" /> <Swatch color="bloom-color-gray-450" label="450" /> <Swatch color="bloom-color-gray-400" label="400" /> <Swatch color="bloom-color-gray-300" label="300" /> <Swatch color="bloom-color-gray-200" label="200" /> <Swatch color="bloom-color-gray-100" label="100" /> |
-
+| Name                     | Swatch                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--seeds-color-gray-{x}` | <Swatch color="seeds-color-gray-950" label="950" /> <Swatch color="seeds-color-gray-900" label="900" /> <Swatch color="seeds-color-gray-850" label="850" /> <Swatch color="seeds-color-gray-800" label="800" /> <Swatch color="seeds-color-gray-750" label="750" /> <Swatch color="seeds-color-gray-700" label="700" /> <Swatch color="seeds-color-gray-650" label="650" /> <Swatch color="seeds-color-gray-600" label="600" /> <Swatch color="seeds-color-gray-550" label="550" /> <Swatch color="seeds-color-gray-500" label="500" /> <Swatch color="seeds-color-gray-450" label="450" /> <Swatch color="seeds-color-gray-400" label="400" /> <Swatch color="seeds-color-gray-300" label="300" /> <Swatch color="seeds-color-gray-200" label="200" /> <Swatch color="seeds-color-gray-100" label="100" /> |
 
 ## Semantic Tokens
 
@@ -67,125 +66,123 @@ Global tokens map to semantic color tokens and provide accessible, customizable
 
 ### Primary
 
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-color-primary`         | <Swatch color="bloom-color-primary" />         | Used as the primary color throughout the system |
-| `--bloom-color-primary-dark`    | <Swatch color="bloom-color-primary-dark" />    |
-| `--bloom-color-primary-darker`  | <Swatch color="bloom-color-primary-darker" />  |
-| `--bloom-color-primary-light`   | <Swatch color="bloom-color-primary-light" border={true} />   |
-| `--bloom-color-primary-lighter` | <Swatch color="bloom-color-primary-lighter" border={true} /> |
+| Name                            | Swatch                                                       | Description                                     |
+| ------------------------------- | ------------------------------------------------------------ | ----------------------------------------------- |
+| `--seeds-color-primary`         | <Swatch color="seeds-color-primary" />                       | Used as the primary color throughout the system |
+| `--seeds-color-primary-dark`    | <Swatch color="seeds-color-primary-dark" />                  |
+| `--seeds-color-primary-darker`  | <Swatch color="seeds-color-primary-darker" />                |
+| `--seeds-color-primary-light`   | <Swatch color="seeds-color-primary-light" border={true} />   |
+| `--seeds-color-primary-lighter` | <Swatch color="seeds-color-primary-lighter" border={true} /> |
 
 ### Secondary
 
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-color-secondary`         | <Swatch color="bloom-color-secondary" />         | Used as the secondary color throughout the system |
-| `--bloom-color-secondary-dark`    | <Swatch color="bloom-color-secondary-dark" />    |
-| `--bloom-color-secondary-darker`  | <Swatch color="bloom-color-secondary-darker" />  |
-| `--bloom-color-secondary-light`   | <Swatch color="bloom-color-secondary-light" border={true} />   |
-| `--bloom-color-secondary-lighter` | <Swatch color="bloom-color-secondary-lighter" border={true} /> |
+| Name                              | Swatch                                                         | Description                                       |
+| --------------------------------- | -------------------------------------------------------------- | ------------------------------------------------- |
+| `--seeds-color-secondary`         | <Swatch color="seeds-color-secondary" />                       | Used as the secondary color throughout the system |
+| `--seeds-color-secondary-dark`    | <Swatch color="seeds-color-secondary-dark" />                  |
+| `--seeds-color-secondary-darker`  | <Swatch color="seeds-color-secondary-darker" />                |
+| `--seeds-color-secondary-light`   | <Swatch color="seeds-color-secondary-light" border={true} />   |
+| `--seeds-color-secondary-lighter` | <Swatch color="seeds-color-secondary-lighter" border={true} /> |
 
 ### Alert
 
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-color-alert`         | <Swatch color="bloom-color-alert" />         | Used as the alert color throughout the system |
-| `--bloom-color-alert-dark`    | <Swatch color="bloom-color-alert-dark" />    |
-| `--bloom-color-alert-darker`  | <Swatch color="bloom-color-alert-darker" />  |
-| `--bloom-color-alert-light`   | <Swatch color="bloom-color-alert-light" />   |
-| `--bloom-color-alert-lighter` | <Swatch color="bloom-color-alert-lighter" border={true} /> |
+| Name                          | Swatch                                                     | Description                                   |
+| ----------------------------- | ---------------------------------------------------------- | --------------------------------------------- |
+| `--seeds-color-alert`         | <Swatch color="seeds-color-alert" />                       | Used as the alert color throughout the system |
+| `--seeds-color-alert-dark`    | <Swatch color="seeds-color-alert-dark" />                  |
+| `--seeds-color-alert-darker`  | <Swatch color="seeds-color-alert-darker" />                |
+| `--seeds-color-alert-light`   | <Swatch color="seeds-color-alert-light" />                 |
+| `--seeds-color-alert-lighter` | <Swatch color="seeds-color-alert-lighter" border={true} /> |
 
 ### Success
 
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-color-success`         | <Swatch color="bloom-color-success" />         | Used as the success color throughout the system |
-| `--bloom-color-success-dark`    | <Swatch color="bloom-color-success-dark" />    |
-| `--bloom-color-success-darker`  | <Swatch color="bloom-color-success-darker" />  |
-| `--bloom-color-success-light`   | <Swatch color="bloom-color-success-light" />   |
-| `--bloom-color-success-lighter` | <Swatch color="bloom-color-success-lighter" border={true} /> |
+| Name                            | Swatch                                                       | Description                                     |
+| ------------------------------- | ------------------------------------------------------------ | ----------------------------------------------- |
+| `--seeds-color-success`         | <Swatch color="seeds-color-success" />                       | Used as the success color throughout the system |
+| `--seeds-color-success-dark`    | <Swatch color="seeds-color-success-dark" />                  |
+| `--seeds-color-success-darker`  | <Swatch color="seeds-color-success-darker" />                |
+| `--seeds-color-success-light`   | <Swatch color="seeds-color-success-light" />                 |
+| `--seeds-color-success-lighter` | <Swatch color="seeds-color-success-lighter" border={true} /> |
 
 ### Warn
 
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-color-warn`         | <Swatch color="bloom-color-warn" />         | Used as the warning color throughout the system |
-| `--bloom-color-warn-dark`    | <Swatch color="bloom-color-warn-dark" />    |
-| `--bloom-color-warn-darker`  | <Swatch color="bloom-color-warn-darker" />  |
-| `--bloom-color-warn-light`   | <Swatch color="bloom-color-warn-light" />   |
-| `--bloom-color-warn-lighter` | <Swatch color="bloom-color-warn-lighter" border={true} /> |
+| Name                         | Swatch                                                    | Description                                     |
+| ---------------------------- | --------------------------------------------------------- | ----------------------------------------------- |
+| `--seeds-color-warn`         | <Swatch color="seeds-color-warn" />                       | Used as the warning color throughout the system |
+| `--seeds-color-warn-dark`    | <Swatch color="seeds-color-warn-dark" />                  |
+| `--seeds-color-warn-darker`  | <Swatch color="seeds-color-warn-darker" />                |
+| `--seeds-color-warn-light`   | <Swatch color="seeds-color-warn-light" />                 |
+| `--seeds-color-warn-lighter` | <Swatch color="seeds-color-warn-lighter" border={true} /> |
 
 ### Accent
 
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-color-accent-warm`         | <Swatch color="bloom-color-accent-warm" />         | Used for a warm accent color throughout the system |
-| `--bloom-color-accent-warm-dark`    | <Swatch color="bloom-color-accent-warm-dark" />    |
-| `--bloom-color-accent-warm-darker`  | <Swatch color="bloom-color-accent-warm-darker" />  |
-| `--bloom-color-accent-warm-light`   | <Swatch color="bloom-color-accent-warm-light" />   |
-| `--bloom-color-accent-warm-lighter` | <Swatch color="bloom-color-accent-warm-lighter" border={true} /> |
-
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-color-accent-cool`         | <Swatch color="bloom-color-accent-cool" />         | Used for a cool accent color throughout the system |
-| `--bloom-color-accent-cool-dark`    | <Swatch color="bloom-color-accent-cool-dark" />    |
-| `--bloom-color-accent-cool-darker`  | <Swatch color="bloom-color-accent-cool-darker" />  |
-| `--bloom-color-accent-cool-light`   | <Swatch color="bloom-color-accent-cool-light" />   |
-| `--bloom-color-accent-cool-lighter` | <Swatch color="bloom-color-accent-cool-lighter" border={true} /> |
+| Name                                | Swatch                                                           | Description                                        |
+| ----------------------------------- | ---------------------------------------------------------------- | -------------------------------------------------- |
+| `--seeds-color-accent-warm`         | <Swatch color="seeds-color-accent-warm" />                       | Used for a warm accent color throughout the system |
+| `--seeds-color-accent-warm-dark`    | <Swatch color="seeds-color-accent-warm-dark" />                  |
+| `--seeds-color-accent-warm-darker`  | <Swatch color="seeds-color-accent-warm-darker" />                |
+| `--seeds-color-accent-warm-light`   | <Swatch color="seeds-color-accent-warm-light" />                 |
+| `--seeds-color-accent-warm-lighter` | <Swatch color="seeds-color-accent-warm-lighter" border={true} /> |
+
+| Name                                | Swatch                                                           | Description                                        |
+| ----------------------------------- | ---------------------------------------------------------------- | -------------------------------------------------- |
+| `--seeds-color-accent-cool`         | <Swatch color="seeds-color-accent-cool" />                       | Used for a cool accent color throughout the system |
+| `--seeds-color-accent-cool-dark`    | <Swatch color="seeds-color-accent-cool-dark" />                  |
+| `--seeds-color-accent-cool-darker`  | <Swatch color="seeds-color-accent-cool-darker" />                |
+| `--seeds-color-accent-cool-light`   | <Swatch color="seeds-color-accent-cool-light" />                 |
+| `--seeds-color-accent-cool-lighter` | <Swatch color="seeds-color-accent-cool-lighter" border={true} /> |
 
 ## Common Component Tokens
 
 ### Text
 
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-text-color`         | <Swatch color="bloom-text-color" />         | Used for text color throughout the system |
-| `--bloom-text-color-light`    | <Swatch color="bloom-text-color-light" />    |
-| `--bloom-text-color-disabled`  | <Swatch color="bloom-text-color-disabled" />  |
-| `--bloom-text-color-dark`   | <Swatch color="bloom-text-color-dark" />   |
-| `--bloom-text-color-darker` | <Swatch color="bloom-text-color-darker" /> |
+| Name                          | Swatch                                       | Description                               |
+| ----------------------------- | -------------------------------------------- | ----------------------------------------- |
+| `--seeds-text-color`          | <Swatch color="seeds-text-color" />          | Used for text color throughout the system |
+| `--seeds-text-color-light`    | <Swatch color="seeds-text-color-light" />    |
+| `--seeds-text-color-disabled` | <Swatch color="seeds-text-color-disabled" /> |
+| `--seeds-text-color-dark`     | <Swatch color="seeds-text-color-dark" />     |
+| `--seeds-text-color-darker`   | <Swatch color="seeds-text-color-darker" />   |
 
 ### Form Inputs
 
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-input-text-label-color` | <Swatch color="bloom-input-text-label-color" /> | Text color for input labels |
-| `--bloom-input-text-placeholder-color` | <Swatch color="bloom-input-text-placeholder-color" /> |
-| `--bloom-input-text-highlight-color` | <Swatch color="bloom-input-text-highlight-color" /> |
-| `--bloom-input-icon-color` | <Swatch color="bloom-input-icon-color" /> |
-| `--bloom-input-bg-color` | <Swatch color="bloom-input-bg-color" border={true} /> |
-| `--bloom-input-border-color` | <Swatch color="bloom-input-border-color" /> |
-| `--bloom-input-text-color-disabled` | <Swatch color="bloom-input-text-color-disabled" /> |
-| `--bloom-input-icon-color-disabled` | <Swatch color="bloom-input-icon-color-disabled" /> |
-| `--bloom-input-bg-color-disabled` | <Swatch color="bloom-input-bg-color-disabled" border={true} /> |
-| `--bloom-input-border-color-disabled` | <Swatch color="bloom-input-border-color-disabled" /> |
+| Name                                   | Swatch                                                         | Description                 |
+| -------------------------------------- | -------------------------------------------------------------- | --------------------------- |
+| `--seeds-input-text-label-color`       | <Swatch color="seeds-input-text-label-color" />                | Text color for input labels |
+| `--seeds-input-text-placeholder-color` | <Swatch color="seeds-input-text-placeholder-color" />          |
+| `--seeds-input-text-highlight-color`   | <Swatch color="seeds-input-text-highlight-color" />            |
+| `--seeds-input-icon-color`             | <Swatch color="seeds-input-icon-color" />                      |
+| `--seeds-input-bg-color`               | <Swatch color="seeds-input-bg-color" border={true} />          |
+| `--seeds-input-border-color`           | <Swatch color="seeds-input-border-color" />                    |
+| `--seeds-input-text-color-disabled`    | <Swatch color="seeds-input-text-color-disabled" />             |
+| `--seeds-input-icon-color-disabled`    | <Swatch color="seeds-input-icon-color-disabled" />             |
+| `--seeds-input-bg-color-disabled`      | <Swatch color="seeds-input-bg-color-disabled" border={true} /> |
+| `--seeds-input-border-color-disabled`  | <Swatch color="seeds-input-border-color-disabled" />           |
 
 ### Backgrounds
 
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-bg-color-canvas` | <Swatch color="bloom-bg-color-canvas" border={true} /> |
-| `--bloom-bg-color-surface` | <Swatch color="bloom-bg-color-surface" border={true} /> |
-| `--bloom-bg-color-muted` | <Swatch color="bloom-bg-color-muted" border={true} /> |
-| `--bloom-bg-color-disabled` | <Swatch color="bloom-bg-color-disabled" /> |
-| `--bloom-bg-color-inverse` | <Swatch color="bloom-bg-color-inverse" border={true} /> |
-| `--bloom-bg-color-surface-primary` | <Swatch color="bloom-bg-color-surface-primary" border={true} /> |
-| `--bloom-bg-color-surface-primary-inverse` | <Swatch color="bloom-bg-color-surface-primary-inverse" /> |
+| Name                                       | Swatch                                                          | Description |
+| ------------------------------------------ | --------------------------------------------------------------- | ----------- |
+| `--seeds-bg-color-canvas`                  | <Swatch color="seeds-bg-color-canvas" border={true} />          |
+| `--seeds-bg-color-surface`                 | <Swatch color="seeds-bg-color-surface" border={true} />         |
+| `--seeds-bg-color-muted`                   | <Swatch color="seeds-bg-color-muted" border={true} />           |
+| `--seeds-bg-color-disabled`                | <Swatch color="seeds-bg-color-disabled" />                      |
+| `--seeds-bg-color-inverse`                 | <Swatch color="seeds-bg-color-inverse" border={true} />         |
+| `--seeds-bg-color-surface-primary`         | <Swatch color="seeds-bg-color-surface-primary" border={true} /> |
+| `--seeds-bg-color-surface-primary-inverse` | <Swatch color="seeds-bg-color-surface-primary-inverse" />       |
 
 ### Borders
 
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-border-color` | <Swatch color="bloom-border-color" /> |
+| Name                   | Swatch                                | Description |
+| ---------------------- | ------------------------------------- | ----------- |
+| `--seeds-border-color` | <Swatch color="seeds-border-color" /> |
 
 ### Colors on Top of Backgrounds
 
-| Name                            | Swatch                                         | Description            |
-| ------------------------------- | ---------------------------------------------- | ---------------------- |
-| `--bloom-color-on-canvas` | <Swatch color="bloom-color-gray-950" /> |
-| `--bloom-color-on-surface` | <Swatch color="bloom-color-gray-950" /> |
-| `--bloom-color-on-disabled` | <Swatch color="bloom-color-gray-700" /> |
-| `--bloom-color-on-inverse` | <Swatch color="bloom-color-white" border={true} /> |
-| `--bloom-color-on-inverse-muted` | <Swatch color="bloom-color-gray-500" /> |
-
-
+| Name                             | Swatch                                             | Description |
+| -------------------------------- | -------------------------------------------------- | ----------- |
+| `--seeds-color-on-canvas`        | <Swatch color="seeds-color-gray-950" />            |
+| `--seeds-color-on-surface`       | <Swatch color="seeds-color-gray-950" />            |
+| `--seeds-color-on-disabled`      | <Swatch color="seeds-color-gray-700" />            |
+| `--seeds-color-on-inverse`       | <Swatch color="seeds-color-white" border={true} /> |
+| `--seeds-color-on-inverse-muted` | <Swatch color="seeds-color-gray-500" />            |
diff --git a/src/stories/tokens/typography.stories.mdx b/src/stories/tokens/typography.stories.mdx
index 458c33a..bef18a9 100644
--- a/src/stories/tokens/typography.stories.mdx
+++ b/src/stories/tokens/typography.stories.mdx
@@ -1,58 +1,67 @@
-import { Meta } from "@storybook/addon-docs";
-import { Swatch } from "../../../documentation/components/Swatch.tsx";
+import { Meta } from "@storybook/addon-docs"
+import { Swatch } from "../../../documentation/components/Swatch.tsx"
 
-export const sansStyle = { fontFamily: "var(--bloom-font-sans)", lineHeight: "var(--bloom-line-height-snug)" }
-export const serifStyle = { fontFamily: "var(--bloom-font-serif)", lineHeight: "var(--bloom-line-height-snug)" }
-export const altSansStyle = { fontFamily: "var(--bloom-font-alt-sans)", lineHeight: "var(--bloom-line-height-snug)" }
+export const sansStyle = {
+  fontFamily: "var(--seeds-font-sans)",
+  lineHeight: "var(--seeds-line-height-snug)",
+}
+export const serifStyle = {
+  fontFamily: "var(--seeds-font-serif)",
+  lineHeight: "var(--seeds-line-height-snug)",
+}
+export const altSansStyle = {
+  fontFamily: "var(--seeds-font-alt-sans)",
+  lineHeight: "var(--seeds-line-height-snug)",
+}
 
-<Meta title="Tokens/Typography Tokens" parameters={{ previewTabs: { 'canvas': { hidden: true }}}} />
+<Meta title="Tokens/Typography Tokens" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
 
 # Typography Tokens
 
 ## Sans-Serif Font
 
-Use the `--bloom-font-sans` token.
+Use the `--seeds-font-sans` token.
 
-<p style={{ ...sansStyle, fontSize: "var(--bloom-font-size-xs)" }}>--bloom-font-size-xs</p>
-<p style={{ ...sansStyle, fontSize: "var(--bloom-font-size-sm)" }}>--bloom-font-size-sm</p>
-<p style={{ ...sansStyle, fontSize: "var(--bloom-font-size-base)" }}>--bloom-font-size-base</p>
-<p style={{ ...sansStyle, fontSize: "var(--bloom-font-size-lg)" }}>--bloom-font-size-lg</p>
-<p style={{ ...sansStyle, fontSize: "var(--bloom-font-size-xl)" }}>--bloom-font-size-xl</p>
-<p style={{ ...sansStyle, fontSize: "var(--bloom-font-size-2xl)" }}>--bloom-font-size-2xl</p>
-<p style={{ ...sansStyle, fontSize: "var(--bloom-font-size-3xl)" }}>--bloom-font-size-3xl</p>
-<p style={{ ...sansStyle, fontSize: "var(--bloom-font-size-4xl)" }}>--bloom-font-size-4xl</p>
-<p style={{ ...sansStyle, fontSize: "var(--bloom-font-size-5xl)" }}>--bloom-font-size-5xl</p>
-<p style={{ ...sansStyle, fontSize: "var(--bloom-font-size-6xl)" }}>--bloom-font-size-6xl</p>
-<p style={{ ...sansStyle, fontSize: "var(--bloom-font-size-7xl)" }}>--bloom-font-size-7xl</p>
+<p style={{ ...sansStyle, fontSize: "var(--seeds-font-size-xs)" }}>--seeds-font-size-xs</p>
+<p style={{ ...sansStyle, fontSize: "var(--seeds-font-size-sm)" }}>--seeds-font-size-sm</p>
+<p style={{ ...sansStyle, fontSize: "var(--seeds-font-size-base)" }}>--seeds-font-size-base</p>
+<p style={{ ...sansStyle, fontSize: "var(--seeds-font-size-lg)" }}>--seeds-font-size-lg</p>
+<p style={{ ...sansStyle, fontSize: "var(--seeds-font-size-xl)" }}>--seeds-font-size-xl</p>
+<p style={{ ...sansStyle, fontSize: "var(--seeds-font-size-2xl)" }}>--seeds-font-size-2xl</p>
+<p style={{ ...sansStyle, fontSize: "var(--seeds-font-size-3xl)" }}>--seeds-font-size-3xl</p>
+<p style={{ ...sansStyle, fontSize: "var(--seeds-font-size-4xl)" }}>--seeds-font-size-4xl</p>
+<p style={{ ...sansStyle, fontSize: "var(--seeds-font-size-5xl)" }}>--seeds-font-size-5xl</p>
+<p style={{ ...sansStyle, fontSize: "var(--seeds-font-size-6xl)" }}>--seeds-font-size-6xl</p>
+<p style={{ ...sansStyle, fontSize: "var(--seeds-font-size-7xl)" }}>--seeds-font-size-7xl</p>
 
 ## Serif Font
 
-Use the `--bloom-font-serif` token.
+Use the `--seeds-font-serif` token.
 
-<p style={{ ...serifStyle, fontSize: "var(--bloom-font-size-xs)" }}>--bloom-font-size-xs</p>
-<p style={{ ...serifStyle, fontSize: "var(--bloom-font-size-sm)" }}>--bloom-font-size-sm</p>
-<p style={{ ...serifStyle, fontSize: "var(--bloom-font-size-base)" }}>--bloom-font-size-base</p>
-<p style={{ ...serifStyle, fontSize: "var(--bloom-font-size-lg)" }}>--bloom-font-size-lg</p>
-<p style={{ ...serifStyle, fontSize: "var(--bloom-font-size-xl)" }}>--bloom-font-size-xl</p>
-<p style={{ ...serifStyle, fontSize: "var(--bloom-font-size-2xl)" }}>--bloom-font-size-2xl</p>
-<p style={{ ...serifStyle, fontSize: "var(--bloom-font-size-3xl)" }}>--bloom-font-size-3xl</p>
-<p style={{ ...serifStyle, fontSize: "var(--bloom-font-size-4xl)" }}>--bloom-font-size-4xl</p>
-<p style={{ ...serifStyle, fontSize: "var(--bloom-font-size-5xl)" }}>--bloom-font-size-5xl</p>
-<p style={{ ...serifStyle, fontSize: "var(--bloom-font-size-6xl)" }}>--bloom-font-size-6xl</p>
-<p style={{ ...serifStyle, fontSize: "var(--bloom-font-size-7xl)" }}>--bloom-font-size-7xl</p>
+<p style={{ ...serifStyle, fontSize: "var(--seeds-font-size-xs)" }}>--seeds-font-size-xs</p>
+<p style={{ ...serifStyle, fontSize: "var(--seeds-font-size-sm)" }}>--seeds-font-size-sm</p>
+<p style={{ ...serifStyle, fontSize: "var(--seeds-font-size-base)" }}>--seeds-font-size-base</p>
+<p style={{ ...serifStyle, fontSize: "var(--seeds-font-size-lg)" }}>--seeds-font-size-lg</p>
+<p style={{ ...serifStyle, fontSize: "var(--seeds-font-size-xl)" }}>--seeds-font-size-xl</p>
+<p style={{ ...serifStyle, fontSize: "var(--seeds-font-size-2xl)" }}>--seeds-font-size-2xl</p>
+<p style={{ ...serifStyle, fontSize: "var(--seeds-font-size-3xl)" }}>--seeds-font-size-3xl</p>
+<p style={{ ...serifStyle, fontSize: "var(--seeds-font-size-4xl)" }}>--seeds-font-size-4xl</p>
+<p style={{ ...serifStyle, fontSize: "var(--seeds-font-size-5xl)" }}>--seeds-font-size-5xl</p>
+<p style={{ ...serifStyle, fontSize: "var(--seeds-font-size-6xl)" }}>--seeds-font-size-6xl</p>
+<p style={{ ...serifStyle, fontSize: "var(--seeds-font-size-7xl)" }}>--seeds-font-size-7xl</p>
 
 ## Alternative Sans-Serif Font
 
-Use the `--bloom-font-alt-sans` token.
-
-<p style={{ ...altSansStyle, fontSize: "var(--bloom-font-size-xs)" }}>--bloom-font-size-xs</p>
-<p style={{ ...altSansStyle, fontSize: "var(--bloom-font-size-sm)" }}>--bloom-font-size-sm</p>
-<p style={{ ...altSansStyle, fontSize: "var(--bloom-font-size-base)" }}>--bloom-font-size-base</p>
-<p style={{ ...altSansStyle, fontSize: "var(--bloom-font-size-lg)" }}>--bloom-font-size-lg</p>
-<p style={{ ...altSansStyle, fontSize: "var(--bloom-font-size-xl)" }}>--bloom-font-size-xl</p>
-<p style={{ ...altSansStyle, fontSize: "var(--bloom-font-size-2xl)" }}>--bloom-font-size-2xl</p>
-<p style={{ ...altSansStyle, fontSize: "var(--bloom-font-size-3xl)" }}>--bloom-font-size-3xl</p>
-<p style={{ ...altSansStyle, fontSize: "var(--bloom-font-size-4xl)" }}>--bloom-font-size-4xl</p>
-<p style={{ ...altSansStyle, fontSize: "var(--bloom-font-size-5xl)" }}>--bloom-font-size-5xl</p>
-<p style={{ ...altSansStyle, fontSize: "var(--bloom-font-size-6xl)" }}>--bloom-font-size-6xl</p>
-<p style={{ ...altSansStyle, fontSize: "var(--bloom-font-size-7xl)" }}>--bloom-font-size-7xl</p>
\ No newline at end of file
+Use the `--seeds-font-alt-sans` token.
+
+<p style={{ ...altSansStyle, fontSize: "var(--seeds-font-size-xs)" }}>--seeds-font-size-xs</p>
+<p style={{ ...altSansStyle, fontSize: "var(--seeds-font-size-sm)" }}>--seeds-font-size-sm</p>
+<p style={{ ...altSansStyle, fontSize: "var(--seeds-font-size-base)" }}>--seeds-font-size-base</p>
+<p style={{ ...altSansStyle, fontSize: "var(--seeds-font-size-lg)" }}>--seeds-font-size-lg</p>
+<p style={{ ...altSansStyle, fontSize: "var(--seeds-font-size-xl)" }}>--seeds-font-size-xl</p>
+<p style={{ ...altSansStyle, fontSize: "var(--seeds-font-size-2xl)" }}>--seeds-font-size-2xl</p>
+<p style={{ ...altSansStyle, fontSize: "var(--seeds-font-size-3xl)" }}>--seeds-font-size-3xl</p>
+<p style={{ ...altSansStyle, fontSize: "var(--seeds-font-size-4xl)" }}>--seeds-font-size-4xl</p>
+<p style={{ ...altSansStyle, fontSize: "var(--seeds-font-size-5xl)" }}>--seeds-font-size-5xl</p>
+<p style={{ ...altSansStyle, fontSize: "var(--seeds-font-size-6xl)" }}>--seeds-font-size-6xl</p>
+<p style={{ ...altSansStyle, fontSize: "var(--seeds-font-size-7xl)" }}>--seeds-font-size-7xl</p>
diff --git a/src/text/HeadingGroup.scss b/src/text/HeadingGroup.scss
index a23b73a..f5cadbf 100644
--- a/src/text/HeadingGroup.scss
+++ b/src/text/HeadingGroup.scss
@@ -1,9 +1,9 @@
-.heading-group {
+.seeds-heading-group {
   --heading-margin: 0rem;
-  --subheading-margin: var(--bloom-s4);
+  --subheading-margin: var(--seeds-s4);
   --heading-color: inherit;
   --subheading-color: inherit;
-  --subheading-font-size: var(--bloom-font-size-base);
+  --subheading-font-size: var(--seeds-font-size-base);
 
   h1,
   h2,
diff --git a/src/text/HeadingGroup.tsx b/src/text/HeadingGroup.tsx
index c92738a..70498fe 100644
--- a/src/text/HeadingGroup.tsx
+++ b/src/text/HeadingGroup.tsx
@@ -19,7 +19,7 @@ export interface HeadingGroupProps extends Pick<HeadingProps, "size"> {
 }
 
 const HeadingGroup = (props: HeadingGroupProps) => {
-  const classNames = ["heading-group"]
+  const classNames = ["seeds-heading-group"]
   if (props.className) classNames.push(props.className)
 
   return (
diff --git a/src/text/__stories__/Heading.docs.mdx b/src/text/__stories__/Heading.docs.mdx
index c0ec629..b748557 100644
--- a/src/text/__stories__/Heading.docs.mdx
+++ b/src/text/__stories__/Heading.docs.mdx
@@ -16,15 +16,15 @@ The heading typography styles are provided by global text utilities:
 
 | Name                            | Description | Default                      |
 | ------------------------------- | ----------- | ---------------------------- |
-| `--bloom-line-height-heading`   | Line height | `--bloom-line-height-tight`  |
-| `--bloom-line-height-content`   | Line height | `--bloom-line-height-normal` |
-| `--bloom-type-heading-size-4xl` | Font size   | `--bloom-font-size-4xl`      |
-| `--bloom-type-heading-size-3xl` | Font size   | `--bloom-font-size-3xl`      |
-| `--bloom-type-heading-size-2xl` | Font size   | `--bloom-font-size-2xl`      |
-| `--bloom-type-heading-size-xl`  | Font size   | `--bloom-font-size-xl`       |
-| `--bloom-type-heading-size-lg`  | Font size   | `--bloom-font-size-lg`       |
-| `--bloom-type-heading-size-md`  | Font size   | `--bloom-font-size-base`     |
-| `--bloom-type-heading-size-sm`  | Font size   | `--bloom-font-size-sm`       |
-| `--bloom-type-heading-size-xs`  | Font size   | `--bloom-font-size-xs`       |
+| `--seeds-line-height-heading`   | Line height | `--seeds-line-height-tight`  |
+| `--seeds-line-height-content`   | Line height | `--seeds-line-height-normal` |
+| `--seeds-type-heading-size-4xl` | Font size   | `--seeds-font-size-4xl`      |
+| `--seeds-type-heading-size-3xl` | Font size   | `--seeds-font-size-3xl`      |
+| `--seeds-type-heading-size-2xl` | Font size   | `--seeds-font-size-2xl`      |
+| `--seeds-type-heading-size-xl`  | Font size   | `--seeds-font-size-xl`       |
+| `--seeds-type-heading-size-lg`  | Font size   | `--seeds-font-size-lg`       |
+| `--seeds-type-heading-size-md`  | Font size   | `--seeds-font-size-base`     |
+| `--seeds-type-heading-size-sm`  | Font size   | `--seeds-font-size-sm`       |
+| `--seeds-type-heading-size-xs`  | Font size   | `--seeds-font-size-xs`       |
 
 Note that on a mobile screen size (640px and below), the heading 2xl-4xl utiliies are stepped down to use heading xl-3xl font sizes.
diff --git a/src/text/__stories__/HeadingGroup.docs.mdx b/src/text/__stories__/HeadingGroup.docs.mdx
index 384fe47..3f87841 100644
--- a/src/text/__stories__/HeadingGroup.docs.mdx
+++ b/src/text/__stories__/HeadingGroup.docs.mdx
@@ -13,7 +13,7 @@ import HeadingGroup from "../HeadingGroup"
 | Name                     | Description                                         | Default                  |
 | ------------------------ | --------------------------------------------------- | ------------------------ |
 | `--heading-margin`       | Vertical space added around the top heading, if any | `0rem`                   |
-| `--subheading-margin`    | The space between the heading and subheading        | `--bloom-s4`             |
+| `--subheading-margin`    | The space between the heading and subheading        | `--seeds-s4`             |
 | `--heading-color`        | The heading text color                              | `inherit`                |
 | `--subheading-color`     | The subheading text color                           | `inherit`                |
-| `--subheading-font-size` | The subheading font size                            | `--bloom-font-size-base` |
+| `--subheading-font-size` | The subheading font size                            | `--seeds-font-size-base` |
diff --git a/src/text/__stories__/HeadingGroup.stories.tsx b/src/text/__stories__/HeadingGroup.stories.tsx
index 20c88cc..b9a26d2 100644
--- a/src/text/__stories__/HeadingGroup.stories.tsx
+++ b/src/text/__stories__/HeadingGroup.stories.tsx
@@ -15,12 +15,29 @@ export default {
   },
 }
 
-export const headingGroup = () => <HeadingGroup heading="Poppy" subheading="The tiny, kidney-shaped seeds have been harvested from dried seed pods by various civilizations for thousands of years." />
+export const headingGroup = () => (
+  <HeadingGroup
+    heading="Poppy"
+    subheading="The tiny, kidney-shaped seeds have been harvested from dried seed pods by various civilizations for thousands of years."
+  />
+)
 
 export const headingGroups = () => (
-  <div style={{display: "grid", gap: "var(--bloom-s6)"}}>
-    <HeadingGroup size="3xl" heading="Poppy" subheading="The tiny, kidney-shaped seeds have been harvested from dried seed pods by various civilizations for thousands of years." />
-    <HeadingGroup size="2xl" heading="Sunflower" subheading="For commercial purposes, sunflower seeds are usually classified by the pattern on their husks." />
-    <HeadingGroup size="xl" heading="Pumpkin" subheading="Some  pumpkin cultivars are huskless, and are grown only for their edible seed." />
+  <div style={{ display: "grid", gap: "var(--seeds-s6)" }}>
+    <HeadingGroup
+      size="3xl"
+      heading="Poppy"
+      subheading="The tiny, kidney-shaped seeds have been harvested from dried seed pods by various civilizations for thousands of years."
+    />
+    <HeadingGroup
+      size="2xl"
+      heading="Sunflower"
+      subheading="For commercial purposes, sunflower seeds are usually classified by the pattern on their husks."
+    />
+    <HeadingGroup
+      size="xl"
+      heading="Pumpkin"
+      subheading="Some  pumpkin cultivars are huskless, and are grown only for their edible seed."
+    />
   </div>
 )