diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index e079318..6ff8f5e 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -51,13 +51,13 @@ $accordion_padding_y: calc(var(--spacing-lg) * 1.25);
   cursor: pointer;
   outline: inherit;
   display: flex;
-  color: var(--colors-text-body);
+  color: var(--color-text-body);
   font-size: var(--font-size-body);
   gap: var(--spacing-sm);
   align-items: center;
 
   .accordion__icon {
-    fill: var(--colors-text-body);
+    fill: var(--color-text-body);
     height: var(--size-lg);
     width: var(--size-lg);
   }
diff --git a/src/components/docs/examples/_basic.scss b/src/components/docs/examples/_basic.scss
new file mode 100644
index 0000000..9aca746
--- /dev/null
+++ b/src/components/docs/examples/_basic.scss
@@ -0,0 +1,33 @@
+.example {
+  .basic {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: var(--spacing-2xl) 0;
+
+    h1.page-title {
+      margin-block-start: 0;
+      margin-block-end: var(--spacing-2xl);
+    }
+
+    h2 {
+      line-height: var(--line-height-tight);
+    }
+
+    p {
+      line-height: var(--line-height-relaxed);
+    }
+
+    .faux-form {
+      .two-col {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--spacing-2xl);
+        margin-block-end: var(--spacing-lg);
+      }
+    }
+  }
+
+  &.basic .header {
+    border-bottom: 40px solid var(--color-primary-default);
+  }
+}
diff --git a/src/components/docs/examples/_home.scss b/src/components/docs/examples/_home.scss
index 32ee86f..609c4fc 100644
--- a/src/components/docs/examples/_home.scss
+++ b/src/components/docs/examples/_home.scss
@@ -3,9 +3,8 @@
 .example {
   display: flex;
   flex-flow: column nowrap;
-  background-color: var(--colors-white);
+  background-color: var(--color-white);
   padding: 0 !important;
-  // max-width: var(--max-width);
   margin: 0 auto;
   min-height: 100vh;
 
@@ -21,11 +20,11 @@
   }
 
   .logo-text {
-    fill: var(--colors-text-body);
+    fill: var(--color-text-body);
   }
 
   .logo-mark {
-    fill: var(--colors-primary-darker);
+    fill: var(--color-primary-default);
   }
 
   .logo + nav {
@@ -36,7 +35,7 @@
     display: flex;
     flex-flow: column nowrap;
     justify-content: center;
-    color: var(--colors-white);
+    color: var(--color-white);
     aspect-ratio: 16/7;
     background-size: cover;
     text-align: center;
@@ -46,7 +45,7 @@
     &::after {
       content: '';
       position: absolute;
-      background: var(--colors-primary-dark);
+      background: var(--color-primary-dark);
       top: 0;
       left: 0;
       bottom: 0;
@@ -62,21 +61,23 @@
 
     h1 {
       font-size: var(--font-size-uber);
-      line-height: var(--line-heights-none);
+      line-height: var(--line-height-none);
       letter-spacing: var(--letter-spacing-tight);
-      max-width: 1000px;
-      margin: 0 auto;
+      margin: 0 auto var(--spacing-lg);
     }
 
     h2 {
       font-size: var(--font-size-display);
-      line-height: var(--line-heights-none);
+      line-height: var(--line-height-none);
       letter-spacing: var(--letter-spacing-tight);
       max-width: 1000px;
       margin: 0 auto;
     }
   }
 
+  /**
+   * Watch section
+   */
   .watch {
     text-align: center;
     padding: var(--spacing-2xl) var(--spacing-xl);
@@ -98,7 +99,7 @@
   }
 
   .celebrating {
-    background: var(--colors-primary-lighter);
+    background: var(--color-primary-lighter);
     text-align: center;
     padding: var(--spacing-2xl) var(--spacing-xl);
 
@@ -120,8 +121,8 @@
   }
 
   .footer {
-    background: var(--colors-primary-darker);
-    color: var(--colors-white);
+    background: var(--color-primary-darker);
+    color: var(--color-white);
     padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
     margin-top: auto;
     display: flex;
@@ -137,11 +138,11 @@
     }
 
     .logo-text {
-      fill: var(--colors-white);
+      fill: var(--color-white);
     }
 
     .logo-mark {
-      fill: var(--colors-primary-lighter);
+      fill: var(--color-white);
     }
 
     .social-menu--footer {
@@ -150,11 +151,11 @@
     }
 
     .social-menu--footer .social-menu__link {
-      color: var(--colors-primary-lighter);
+      color: var(--color-primary-lighter);
       font-size: var(--font-size-display);
 
       &:hover {
-        color: var(--colors-primary-light);
+        color: var(--color-primary-light);
       }
     }
 
@@ -168,7 +169,7 @@
     }
 
     .footer-h3 {
-      color: var(--colors-primary-lighter);
+      color: var(--color-primary-lighter);
       font-size: var(--font-size-body);
     }
 
@@ -179,7 +180,7 @@
       max-width: 450px;
       font-size: var(--font-size-small);
       gap: var(--spacing-lg);
-      line-height: var(--line-heights-tight);
+      line-height: var(--line-height-tight);
 
       li {
         margin-bottom: var(--spacing-sm);
diff --git a/src/components/docs/examples/_program.scss b/src/components/docs/examples/_program.scss
index 727d6e4..caefd9e 100644
--- a/src/components/docs/examples/_program.scss
+++ b/src/components/docs/examples/_program.scss
@@ -1,6 +1,6 @@
 .example {
   .dynamic {
-    background: var(--colors-primary-lighter);
+    background: var(--color-primary-lighter);
     text-align: center;
     padding: var(--spacing-2xl) var(--spacing-xl);
 
diff --git a/src/components/docs/examples/assets/_header.twig b/src/components/docs/examples/assets/_header.twig
index a712439..044fad1 100644
--- a/src/components/docs/examples/assets/_header.twig
+++ b/src/components/docs/examples/assets/_header.twig
@@ -1,5 +1,5 @@
 <header class="header">
 	{% include "@components/docs/examples/assets/_logo.twig" %}
 	{% include "@components/menus/main-menu/main-menu.twig" %}
-	{% include "@components/button/button.twig" with { button__content: 'Donate' } %}
+	{% include "@components/button/button.twig" with { button__content: 'Apply' } %}
 </header>
diff --git a/src/components/docs/examples/basic.stories.js b/src/components/docs/examples/basic.stories.js
new file mode 100644
index 0000000..642c283
--- /dev/null
+++ b/src/components/docs/examples/basic.stories.js
@@ -0,0 +1,13 @@
+import template from './basic.twig';
+import image from '../../../images/example/basic-camera-image.png';
+import data from './basic.yml';
+
+export default {
+  title: 'Pages/Basic',
+  decorators: [
+    (story) =>
+      `<div style="background: var(--color-grays-700); padding: 0;margin:0;">${story()}</div>`,
+  ],
+};
+
+export const Basic = () => template({ data, image });
diff --git a/src/components/docs/examples/basic.twig b/src/components/docs/examples/basic.twig
new file mode 100644
index 0000000..d48e52e
--- /dev/null
+++ b/src/components/docs/examples/basic.twig
@@ -0,0 +1,42 @@
+<div class="example basic">
+	{% include "@components/docs/examples/assets/_header.twig" %}
+	<main class="basic text-long">
+		{% include "@components/menus/breadcrumbs/breadcrumbs.twig" with {
+			breadcrumb: data.breadcrumb
+		} %}
+		<h1 class="page-title">Undergraduate Courses</h1>
+		<h2>Unveiling the Rich Tapestry of Film History</h2>
+		<p>In the first semester, students embark on a captivating journey through time, exploring the evolution of cinema from its early beginnings to the present day. They delve into the works of influential filmmakers, iconic films, and significant movements, cultivating a deep appreciation for the artistic, cultural, and social impact of cinema.</p>
+
+		<img src="{{_context.image}}" alt="" style="margin: var(--spacing-xl) 0"/>
+
+		<h2>Analyzing Films: Unraveling the Layers of Meaning</h2>
+		<p>Diving into the realm of film theory, aesthetics, and analysis, students develop the skills to interpret films through multiple lenses. They delve into narrative structures, visual storytelling techniques, and the nuanced role of cinematography, sound, and editing. Through rigorous analysis and thought-provoking discussions, students gain a profound understanding of the intricate layers of meaning embedded within films.</p>
+		<h2>Hands-On Filmmaking Experience: From Vision to Creation</h2>
+		<p>Empowering students with practical skills, our program offers hands-on production courses where they transform their creative visions into reality. From scriptwriting to directing, cinematography to editing, students master the technical aspects of filmmaking. Collaborating with fellow students, they navigate the complexities of teamwork, effective communication, and project organization.</p>
+		<p>Our program goes beyond the classroom, providing valuable industry insights and connections. Guest lectures, workshops, and internships offer students opportunities to learn from and network with professionals in the field. Through these engagements, students gain real-world perspectives, understand industry trends, and lay the foundation for future career opportunities.</p>
+		<p>In the final semesters, students have the freedom to specialize in areas of interest. Whether it's documentary filmmaking, film criticism, or screenwriting, advanced courses refine their skills and knowledge, empowering them to delve deeper into their chosen field. The program culminates in a capstone project, where students showcase their expertise through a comprehensive film analysis, research paper, or creative work.</p>
+		<p>Led by passionate faculty and supported by state-of-the-art facilities, our Film Studies program offers a transformative educational experience. Students emerge with a profound appreciation for cinema's artistic power, a strong foundation in critical thinking and analysis, and the practical skills required to succeed in the film industry or pursue further academic studies in the field. Join us on this remarkable journey of cinematic exploration and discovery.</p>
+
+		<section class="faux-form">
+			<h2>Fill out this form</h2>
+			<div class="two-col">
+				<div class="form-item">
+					<label for="edit-name" class="form-item__label form-item__label--required form-item__label--textfield">Name</label>
+					<input id="edit-name" autocorrect="none" autocapitalize="none" spellcheck="false" type="text" name="name" value="" size="60" maxlength="60" class="form-item__textfield form-item__textfield--required" required="required" aria-required="true" placeholder="First, Middle, Last">
+				</div>
+				<div class="form-item">
+					<label for="emailaddress" class="form-item__label form-item__label--textfield">Email Address</label>
+					<input id="emailaddress" type="email" class="form-item__textfield" placeholder="name@email.com">
+				</div>
+			</div>
+
+			{% include "@components/button/button.twig" with { button__content: 'Apply today' } %}
+
+		</section>
+
+
+	</main>
+	{% include "@components/docs/examples/assets/_footer.twig" %}
+
+</div>
diff --git a/src/components/docs/examples/basic.yml b/src/components/docs/examples/basic.yml
new file mode 100644
index 0000000..700e230
--- /dev/null
+++ b/src/components/docs/examples/basic.yml
@@ -0,0 +1,5 @@
+breadcrumb:
+  - url: '#'
+    text: 'Home'
+  - url: '#'
+    text: 'Your Education'
diff --git a/src/components/docs/examples/home.stories.js b/src/components/docs/examples/home.stories.js
index 2831fdf..de1781d 100644
--- a/src/components/docs/examples/home.stories.js
+++ b/src/components/docs/examples/home.stories.js
@@ -21,7 +21,7 @@ export default {
   title: 'Pages/Home',
   decorators: [
     (story) =>
-      `<div style="background: var(--colors-grays-700); padding: 0;">${story()}</div>`,
+      `<div style="background: var(--color-grays-700); padding: 0;margin:0;">${story()}</div>`,
   ],
 };
 
diff --git a/src/components/docs/examples/home.twig b/src/components/docs/examples/home.twig
index d67e881..d7f5c29 100644
--- a/src/components/docs/examples/home.twig
+++ b/src/components/docs/examples/home.twig
@@ -2,8 +2,8 @@
 	{% include "@components/docs/examples/assets/_header.twig" %}
 	<main>
 		<section class="hero" style="background-image: url({{_context.heroImage}})">
-			<h1>The Future of Education</h1>
-			<h2>Innovative Approaches for Tomorrow's Learners</h2>
+			<h1>Future of Education</h1>
+			<h2>Innovative Approaches for Tomorrow&rsquo;s Learners</h2>
 		</section>
 
 		<section class="watch">
diff --git a/src/components/docs/examples/program.stories.js b/src/components/docs/examples/program.stories.js
deleted file mode 100644
index a3b7f1d..0000000
--- a/src/components/docs/examples/program.stories.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// import template from './program.twig';
-// import data from './program.yml';
-// import heroImage from '../../../images/example/hero.jpg';
-// import watchImage1 from '../../../images/example/watch-Image.png';
-// import watchImage2 from '../../../images/example/watch-Image-1.png';
-// import watchImage3 from '../../../images/example/watch-Image-2.png';
-// import dynamicImage1 from '../../../images/example/dynamic-Image-1.png';
-// import dynamicImage2 from '../../../images/example/dynamic-Image-2.png';
-// import dynamicImage3 from '../../../images/example/dynamic-Image-3.png';
-
-// const dynamicImages = [dynamicImage1, dynamicImage2, dynamicImage3];
-// const watchImages = [watchImage1, watchImage2, watchImage3];
-
-// export default {
-//   title: 'Pages/Program',
-//   decorators: [
-//     (story) =>
-//       `<div style="background: var(--colors-grays-700); padding: 0;">${story()}</div>`,
-//   ],
-// };
-
-// export const Program = () =>
-//   template({ data, heroImage, watchImages, dynamicImages });
diff --git a/src/components/docs/examples/program.twig b/src/components/docs/examples/program.twig
deleted file mode 100644
index 75e7740..0000000
--- a/src/components/docs/examples/program.twig
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="example">
-	{% include "@components/docs/examples/assets/_header.twig" %}
-	<main>
-		<section class="dynamic">
-			<h2 class="dynamic-h2">Our Dynamic and Immersive Film and Media Studies Program</h2>
-			<p class="dynamic-p">Embark on an exhilarating cinematic journey, exploring the captivating art of storytelling through film, television, and new media. With hands-on practical experiences, thought-provoking courses, and expert faculty, our program fosters creativity, critical thinking, and a deep understanding of the powerful influence of visual media in today's society.</p>
-			<h3 class="dynamic-h3">Get Involved!</h3>
-			<div class="dynamic-grid">
-				{% for card in data.cards %}
-					{% include "@components/card/card.twig" with {
-						card__image__output_image_tag: card.card__image__output_image_tag,
-						card__image__src: watchImages[loop.index0],
-						card__image__alt: card.card__image__alt,
-						card__heading: card.card__heading,
-						card__subheading: card.card__subheading,
-						card__body: card.card__body,
-						card__link__text: card.card__link__text,
-						card__link__url: card.card__link__url,
-					} %}
-				{% endfor %}
-			</div>
-		</section>
-
-		<section class="celebrating">
-			<h2 class="celebrating-h2">Celebrating Academic Excellence: Top Stories from Our University</h2>
-			<div class="celebrating-grid">
-				{% for card in data.celebratingCards %}
-					{% include "@components/card/card.twig" with {
-						card__image__output_image_tag: card.card__image__output_image_tag,
-						card__image__src: celebratingImages[loop.index0],
-						card__image__alt: card.card__image__alt,
-						card__heading: card.card__heading,
-						card__subheading: card.card__subheading,
-						card__body: card.card__body,
-						card__link__text: card.card__link__text,
-						card__link__url: card.card__link__url,
-						card__modifiers: card.card__modifiers,
-					} %}
-				{% endfor %}
-			</div>
-		</section>
-	</main>
-	{% include "@components/docs/examples/assets/_footer.twig" %}
-
-</div>
diff --git a/src/components/docs/examples/program.yml b/src/components/docs/examples/program.yml
deleted file mode 100644
index 67eb71c..0000000
--- a/src/components/docs/examples/program.yml
+++ /dev/null
@@ -1,106 +0,0 @@
-menu_items:
-  - title: 'Academics'
-    url: '#'
-    below:
-      - title: 'Menu Item 1 Sub 1'
-        url: '#'
-      - title: 'Menu Item 1 Sub 2'
-        url: '#'
-        below:
-          - title: 'Menu Item 1 Sub Sub 1'
-            url: '#'
-          - title: 'Menu Item 1 Sub Sub 2'
-            url: '#'
-      - title: 'Menu Item 1 Sub 3'
-        url: '#'
-      - title: 'Menu Item 1 Sub 4'
-        url: '#'
-  - title: 'Admissions'
-    url: '#'
-    below:
-      - title: 'Menu Item 2 Sub 1'
-        url: '#'
-      - title: 'Menu Item 2 Sub 2'
-        url: '#'
-      - title: 'Menu Item 2 Sub 3'
-        url: '#'
-  - title: 'Research'
-    url: '#'
-    below:
-      - title: 'Menu Item 3 Sub 1'
-        url: '#'
-      - title: 'Menu Item 3 Sub 2'
-        url: '#'
-      - title: 'Menu Item 3 Sub 3'
-        url: '#'
-      - title: 'Menu Item 3 Sub 4'
-        url: '#'
-  - title: 'About'
-    url: '#'
-cards:
-  - card__image__src: './static/images/example/watch-Image-1.png'
-    card__image__alt: "This is the card image's alt text"
-    card__image__output_image_tag: true
-    card__subheading: 'visiting scholars'
-    card__heading: 'Renowned Director to Host Masterclass'
-    card__body: 'Learn from industry titans in this intimate and inspiring session, enriching your understanding of the craft and igniting your passion for filmmaking.'
-    card__modifiers: 
-      - 'horizontal'
-  - card__image__src: 'https://placehold.co/400'
-    card__image__alt: "This is the card image's alt text"
-    card__image__output_image_tag: true
-    card__subheading: 'Visiting scholars'
-    card__heading: 'Filmmaker Series Brings Hollywood Elite to Campus'
-    card__body: 'Hollywood elite grace our campus as part of our Filmmaker Series, offering students exclusive access to industry giants and a chance to be inspired by their wisdom and expertise'
-  - card__image__src: 'https://placehold.co/400'
-    card__image__alt: "This is the card image's alt text"
-    card__image__output_image_tag: true
-    card__subheading: 'Discussion'
-    card__heading: 'Ethical Dilemmas in Documentary Filmmaking'
-    card__body: 'Our program engages students in thought-provoking discussions and critical analysis, examining the moral challenges faced by filmmakers in their pursuit of truth and storytelling.'
-celebratingCards:
-  - card__image__src: 'https://placehold.co/250x200'
-    card__image__alt: "This is the card image's alt text"
-    card__image__output_image_tag: true
-    card__subheading: 'Student Opportunities'
-    card__heading: 'Recent Honors College Graduate Selected for Fulbright English Teaching Award to Spain'
-    card__body: 'May 09, 2023'
-    card__modifiers: 
-      - 'horizontal'
-  - card__image__src: 'https://placehold.co/250x200'
-    card__image__alt: "This is the card image's alt text"
-    card__image__output_image_tag: true
-    card__subheading: 'University News'
-    card__heading: 'Council of Trustees approved three naming resolutions'
-    card__body: 'May 09, 2023'
-    card__modifiers: 
-      - 'horizontal'
-  - card__image__src: 'https://placehold.co/250x200'
-    card__image__alt: "This is the card image's alt text"
-    card__image__output_image_tag: true
-    card__subheading: 'Research'
-    card__heading: 'WUP is set to "level up" its quantum capabilities with an $11.6 million investment'
-    card__body: 'May 01, 2023'
-    card__modifiers: 
-      - 'horizontal'
-  - card__image__src: 'https://placehold.co/250x200'
-    card__image__alt: "This is the card image's alt text"
-    card__image__output_image_tag: true
-    card__subheading: 'Arts and Humanities'
-    card__heading: 'How to live more creatively, according to a faculty poet'
-    card__body: 'May 01, 2023'
-    card__modifiers: 
-      - 'horizontal'
-social_menu_items:
-  - title: 'Instagram'
-    url: '#'
-    icon: 'instagram'
-  - title: 'Mastodon'
-    url: '#'
-    icon: 'mastodon'
-  - title: 'Slack'
-    url: '#'
-    icon: 'slack'
-  - title: 'YouTube'
-    url: '#'
-    icon: 'youtube'
diff --git a/src/components/forms/select/_select.scss b/src/components/forms/select/_select.scss
index 57d4265..7700b66 100644
--- a/src/components/forms/select/_select.scss
+++ b/src/components/forms/select/_select.scss
@@ -12,7 +12,7 @@
   &::after {
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 9px solid var(--colors-text-body);
+    border-top: 9px solid var(--color-text-body);
     content: ' ';
     position: absolute;
     top: 42%;
@@ -30,7 +30,7 @@
 }
 
 .form-item__select {
-  border: var(--border-sm) solid var(--selectdropdown-button-stroke);
+  border: var(--border-sm) solid var(--selectdropdown-color-button-stroke);
   border-radius: var(--selectdropdown-radius);
   height: 41px; // set height required for discrepancy between .form-item__dropdown border and the select :focus border
   font-size: 16px;
@@ -38,8 +38,8 @@
   outline: none;
   padding: 0.6em 0.8em 0.5em;
   width: 100%;
-  color: var(--selectdropdown-label);
-  background: var(--selectdropdown-button-fill);
+  color: var(--selectdropdown-color-label);
+  background: var(--selectdropdown-color-button-fill);
 
   :focus {
     outline: none;
diff --git a/src/components/menus/main-menu/_02-main-menu-link.scss b/src/components/menus/main-menu/_02-main-menu-link.scss
index ece9681..f98c7fb 100644
--- a/src/components/menus/main-menu/_02-main-menu-link.scss
+++ b/src/components/menus/main-menu/_02-main-menu-link.scss
@@ -4,7 +4,7 @@
   color: var(--main-menu-color-link-label);
   display: block;
   font-size: var(--font-size-h5);
-  line-height: var(--line-heights-none);
+  line-height: var(--line-height-none);
   padding: var(--spacing-md) var(--spacing-lg);
   text-decoration: none;
   font-weight: bold;
diff --git a/src/components/storybook-styles/storybook.scss b/src/components/storybook-styles/storybook.scss
index 34d346d..5de04a0 100644
--- a/src/components/storybook-styles/storybook.scss
+++ b/src/components/storybook-styles/storybook.scss
@@ -13,7 +13,7 @@
 
 .sb-show-main {
   background: var(--colors-sb-background);
-  // color: var(--colors-sb-text-body);
+  // color: var(--color-sb-text-body);
   font-family: var(--font-family-body), serif !important;
 }
 
@@ -30,7 +30,7 @@
     display: block;
     position: absolute;
     left: 0;
-    bottom: calc(-1 * var(--spacing-lg));
+    bottom: calc(-3 * var(--spacing-lg));
     border-bottom: 10px solid var(--colors-sb-text-heading);
     width: 100px;
   }
diff --git a/src/components/text/text/_body.scss b/src/components/text/text/_body.scss
index 348435b..687a66a 100644
--- a/src/components/text/text/_body.scss
+++ b/src/components/text/text/_body.scss
@@ -1,3 +1,3 @@
 body {
-  color: var(--colors-text-body);
+  color: var(--color-text-body);
 }
diff --git a/src/components/text/text/_text.scss b/src/components/text/text/_text.scss
index a5ebdc2..192e73a 100644
--- a/src/components/text/text/_text.scss
+++ b/src/components/text/text/_text.scss
@@ -11,7 +11,7 @@
 }
 
 .blockquote {
-  border-left: 4px solid var(--colors-text-body);
+  border-left: 4px solid var(--color-text-body);
   font-family: var(--font-families-secondary);
   font-size: var(--font-size-h5);
   padding: var(--spacing-lg) var(--spacing-xl);
diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss
index ae35d9b..131866f 100644
--- a/src/components/tokens/_tokens.scss
+++ b/src/components/tokens/_tokens.scss
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Jul 2024 17:58:36 GMT
+ * Generated on Thu, 08 Aug 2024 18:32:01 GMT
  */
 
 :root {
@@ -189,6 +189,46 @@
   --color-grays-800: #192125;
   --color-grays-900: #101618;
   --color-grays-1000: #080b0c;
+  --color-wup-gold-100: #fff9f2;
+  --color-wup-gold-200: #fff2e4;
+  --color-wup-gold-300: #ffe5c6;
+  --color-wup-gold-400: #ffd7a3;
+  --color-wup-gold-500: #ffc875;
+  --color-wup-gold-600: #ffb81c;
+  --color-wup-gold-700: #e4a519;
+  --color-wup-gold-800: #c68f16;
+  --color-wup-gold-900: #a17412;
+  --color-wup-gold-1000: #72520d;
+  --color-wup-blue-100: #f2f2f6;
+  --color-wup-blue-200: #e4e5ed;
+  --color-wup-blue-300: #c6c8db;
+  --color-wup-blue-400: #a1a6c6;
+  --color-wup-blue-500: #727baf;
+  --color-wup-blue-600: #003594;
+  --color-wup-blue-700: #002f84;
+  --color-wup-blue-800: #002973;
+  --color-wup-blue-900: #00225e;
+  --color-wup-blue-1000: #001842;
+  --color-wup-legacy-gold-100: #f9f6f2;
+  --color-wup-legacy-gold-200: #f2ece4;
+  --color-wup-legacy-gold-300: #e4d7c6;
+  --color-wup-legacy-gold-400: #d6bfa1;
+  --color-wup-legacy-gold-500: #c6a572;
+  --color-wup-legacy-gold-600: #b58500;
+  --color-wup-legacy-gold-700: #a27700;
+  --color-wup-legacy-gold-800: #8c6700;
+  --color-wup-legacy-gold-900: #725400;
+  --color-wup-legacy-gold-1000: #513b00;
+  --color-wup-legacy-blue-100: #f2f2f3;
+  --color-wup-legacy-blue-200: #e4e4e7;
+  --color-wup-legacy-blue-300: #c6c6cb;
+  --color-wup-legacy-blue-400: #a2a3ac;
+  --color-wup-legacy-blue-500: #737585;
+  --color-wup-legacy-blue-600: #141b4d;
+  --color-wup-legacy-blue-700: #121845;
+  --color-wup-legacy-blue-800: #0f153c;
+  --color-wup-legacy-blue-900: #0d1131;
+  --color-wup-legacy-blue-1000: #090c22;
   --font-family-body: Inter;
   --font-family-heading: Inter;
   --spacing-xs: 0.125rem;
@@ -345,4 +385,6 @@
   --emulsify-semantic: [object Object];
   --emulsify-storybook-only: [object Object];
   --emulsify-components: [object Object];
+  --main: [object Object];
+  --gold: [object Object];
 }
diff --git a/src/components/tokens/border-radius-tokens/border-radius-tokens.twig b/src/components/tokens/border-radius-tokens/border-radius-tokens.twig
index 04e4697..400dffd 100644
--- a/src/components/tokens/border-radius-tokens/border-radius-tokens.twig
+++ b/src/components/tokens/border-radius-tokens/border-radius-tokens.twig
@@ -1,16 +1,16 @@
 <div>
-  <h2 class="sb-title">Border Radius Tokens</h2>
+	<h2 class="sb-title">Border Radius Tokens</h2>
 
-  <ul class="sb-list">
-    {% for radius, value in _context.radius %}
-      <li class="sb-list__item">
-        <span class="sb-list__label">{{radius}}</span>
-        <span class="sb-list__value">{{value.value}}px</span>
-        <span class="sb-list__custom-property">
-          <code class="sb-custom-property-name">var(--radius-{{radius}})</code>
-        </span>
-        <span class="sb-list__visualization" style="border-radius: {{value.value}}px; width: 75px; height: 75px; background: var(--colors-sb-visualization);"></span>
-      </li>
-    {% endfor %}
-  </ul>
+	<ul class="sb-list">
+		{% for radius, value in _context.radius %}
+			<li class="sb-list__item">
+				<span class="sb-list__label">{{radius}}</span>
+				<span class="sb-list__value">{{value.value}}px</span>
+				<span class="sb-list__custom-property">
+					<code class="sb-custom-property-name">var(--radius-{{radius}})</code>
+				</span>
+				<span class="sb-list__visualization" style="border-radius: {{value.value}}px; width: 75px; height: 75px; background: var(--color-sb-visualization);"></span>
+			</li>
+		{% endfor %}
+	</ul>
 </div>
diff --git a/src/components/tokens/border-tokens/border-tokens.twig b/src/components/tokens/border-tokens/border-tokens.twig
index c13bbdd..5f794fd 100644
--- a/src/components/tokens/border-tokens/border-tokens.twig
+++ b/src/components/tokens/border-tokens/border-tokens.twig
@@ -1,16 +1,16 @@
 <div>
-  <h2 class="sb-title">Border Tokens</h2>
+	<h2 class="sb-title">Border Tokens</h2>
 
-  <ul class="sb-list">
-    {% for border, value in _context.border %}
-      <li class="sb-list__item">
-        <span class="sb-list__label">{{border}}</span>
-        <span class="sb-list__value">{{value.value}}px</span>
-        <span class="sb-list__custom-property">
-          <code class=" sb-custom-property-name">var(--border-{{border}})</code>
-        </span>
-        <span class="sb-list__visualization" style="height: {{value.value}}px; background-color: var(--colors-sb-visualization); width: 300px;"></span>
-      </li>
-    {% endfor %}
-  </ul>
+	<ul class="sb-list">
+		{% for border, value in _context.border %}
+			<li class="sb-list__item">
+				<span class="sb-list__label">{{border}}</span>
+				<span class="sb-list__value">{{value.value}}px</span>
+				<span class="sb-list__custom-property">
+					<code class=" sb-custom-property-name">var(--border-{{border}})</code>
+				</span>
+				<span class="sb-list__visualization" style="height: {{value.value}}px; background-color: var(--color-sb-visualization); width: 300px;"></span>
+			</li>
+		{% endfor %}
+	</ul>
 </div>
diff --git a/src/components/tokens/breakpoint-tokens/breakpoint-tokens.twig b/src/components/tokens/breakpoint-tokens/breakpoint-tokens.twig
index 69b1cfe..c70cfc7 100644
--- a/src/components/tokens/breakpoint-tokens/breakpoint-tokens.twig
+++ b/src/components/tokens/breakpoint-tokens/breakpoint-tokens.twig
@@ -1,16 +1,16 @@
 <div>
-  <h2 class="sb-title">Breakpoint Tokens</h2>
+	<h2 class="sb-title">Breakpoint Tokens</h2>
 
-  <ul class="sb-list" style="overflow: scroll;">
-    {% for breakpoint, value in _context.breakpoint %}
-      <li class="sb-list__item" style="min-width: max-content;">
-        <span class="sb-list__label">{{breakpoint}}</span>
-        <span class="sb-list__value">{{value.value}}px</span>
-        <span class="sb-list__custom-property">
-          <code class=" sb-custom-property-name">var(--breakpoint-{{breakpoint}})</code>
-        </span>
-        <span class="sb-list__visualization" style="width: {{value.value}}px; height: 25px; background: var(--colors-sb-visualization); display: block; border-radius: var(--radius-sm);"></span>
-      </li>
-    </li>
-  </li>
+	<ul class="sb-list" style="overflow: scroll;">
+		{% for breakpoint, value in _context.breakpoint %}
+			<li class="sb-list__item" style="min-width: max-content;">
+				<span class="sb-list__label">{{breakpoint}}</span>
+				<span class="sb-list__value">{{value.value}}px</span>
+				<span class="sb-list__custom-property">
+					<code class=" sb-custom-property-name">var(--breakpoint-{{breakpoint}})</code>
+				</span>
+				<span class="sb-list__visualization" style="width: {{value.value}}px; height: 25px; background: var(--color-sb-visualization); display: block; border-radius: var(--radius-sm);"></span>
+			</li>
+		</li>
+	</li>
 {% endfor %}</ul></div>
diff --git a/src/components/tokens/color-tokens/color-tokens.twig b/src/components/tokens/color-tokens/color-tokens.twig
index 1317507..085caed 100644
--- a/src/components/tokens/color-tokens/color-tokens.twig
+++ b/src/components/tokens/color-tokens/color-tokens.twig
@@ -1,30 +1,30 @@
 <div>
-  {% for color, value in _context.colors %}
-    <h2 class="sb-title">{{color}}</h2>
-    {% if value.value is defined %}
-      <ul class="sb-list">
-        <li style="background: var(--colors-{{color}});" class="token-card">
-          <span>
-            {{color}}
-            <span>
-              <code class="sb-custom-property-name">var(--color-{{color}})</code>
-            </span>
-          </span>
-        </li>
-      </ul>
-    {% else %}
-      <ul class="sb-list">
-        {% for nestedColor, nestedValue in value %}
-          <li style="background: var(--colors-{{color}}-{{nestedColor}});" class="token-card">
-            <span>
-              {{nestedColor}}
-              <span>
-                <code class="sb-custom-property-name">var(--color-{{color}}-{{nestedColor}})</code>
-              </span>
-            </span>
-          </li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-  {% endfor %}
+	{% for color, value in _context.colors %}
+		<h2 class="sb-title">{{color}}</h2>
+		{% if value.value is defined %}
+			<ul class="sb-list">
+				<li style="background: var(--color-{{color}});" class="token-card">
+					<span>
+						{{color}}
+						<span>
+							<code class="sb-custom-property-name">var(--color-{{color}})</code>
+						</span>
+					</span>
+				</li>
+			</ul>
+		{% else %}
+			<ul class="sb-list">
+				{% for nestedColor, nestedValue in value %}
+					<li style="background: var(--color-{{color}}-{{nestedColor}});" class="token-card">
+						<span>
+							{{nestedColor}}
+							<span>
+								<code class="sb-custom-property-name">var(--color-{{color}}-{{nestedColor}})</code>
+							</span>
+						</span>
+					</li>
+				{% endfor %}
+			</ul>
+		{% endif %}
+	{% endfor %}
 </div>
diff --git a/src/components/tokens/fontSize-tokens/font-sizes.stories.js b/src/components/tokens/fontSize-tokens/font-sizes.stories.js
index e2be94b..2855a3d 100644
--- a/src/components/tokens/fontSize-tokens/font-sizes.stories.js
+++ b/src/components/tokens/fontSize-tokens/font-sizes.stories.js
@@ -6,6 +6,6 @@ import tokens from '../../../tokens/transformed.tokens.json';
  */
 export default { title: 'Tokens/Font Sizes' };
 
-const fontSizeData = { fontSize: tokens.fontSize };
+const fontSizeData = { fontSize: tokens['font-size'] };
 
 export const FontSizes = () => fontSizeTemplate(fontSizeData);
diff --git a/src/components/tokens/line-height/line-height.stories.js b/src/components/tokens/line-height/line-height.stories.js
index 67ca34f..1f076cf 100644
--- a/src/components/tokens/line-height/line-height.stories.js
+++ b/src/components/tokens/line-height/line-height.stories.js
@@ -2,7 +2,7 @@ import template from './line-height.twig';
 import tokens from '../../../tokens/transformed.tokens.json';
 import figma from '../../../../.storybook/configma.json';
 
-const data = { lineHeight: tokens.lineHeights };
+const data = { lineHeight: tokens['line-height'] };
 
 export default {
   title: 'Tokens/Line Height',
diff --git a/src/components/tokens/line-height/line-height.twig b/src/components/tokens/line-height/line-height.twig
index a600871..8d53f8f 100644
--- a/src/components/tokens/line-height/line-height.twig
+++ b/src/components/tokens/line-height/line-height.twig
@@ -1,18 +1,18 @@
 {% set text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." %}
 
 <div>
-  <h2 class="sb-title">Line Heights</h2>
+	<h2 class="sb-title">Line Heights</h2>
 
-  <ul class="sb-list" style="overflow: scroll;">
-    {% for lineHeight, value in _context.lineHeight|reverse %}
-      <li class="sb-list__item" style="min-width: max-content;">
-        <span class="sb-list__label" style="width: 100px;">{{lineHeight}}</span>
-        <span class="sb-list__value">{{value.value}}</span>
-        <span class="sb-list__custom-property" style="width: 272px;">
-          <code class="sb-custom-property-name">var(--line-heights-{{lineHeight}})</code>
-        </span>
-        <span class="sb-list__visualization" style="max-width: 600px; line-height:var(--line-heights-{{lineHeight}})">{{text}}</span>
-      </li>
-    {% endfor %}
-  </ul>
+	<ul class="sb-list" style="overflow: scroll;">
+		{% for lineHeight, value in _context.lineHeight|reverse %}
+			<li class="sb-list__item" style="min-width: max-content;">
+				<span class="sb-list__label" style="width: 100px;">{{lineHeight}}</span>
+				<span class="sb-list__value">{{value.value}}</span>
+				<span class="sb-list__custom-property" style="width: 272px;">
+					<code class="sb-custom-property-name">var(--line-height-{{lineHeight}})</code>
+				</span>
+				<span class="sb-list__visualization" style="max-width: 600px; line-height:var(--line-height-{{lineHeight}})">{{text}}</span>
+			</li>
+		{% endfor %}
+	</ul>
 </div>
diff --git a/src/components/tokens/opacity-tokens/opacity-tokens.twig b/src/components/tokens/opacity-tokens/opacity-tokens.twig
index 6c135b7..4516bf5 100644
--- a/src/components/tokens/opacity-tokens/opacity-tokens.twig
+++ b/src/components/tokens/opacity-tokens/opacity-tokens.twig
@@ -1,16 +1,16 @@
 <div>
-  <h2 class="sb-title">Opacity Tokens</h2>
+	<h2 class="sb-title">Opacity Tokens</h2>
 
-  <ul class="sb-list">
-    {% for opacity, value in _context.opacity %}
-      <li class="sb-list__item">
-        <span class="sb-list__label">{{opacity}}</span>
-        <span class="sb-list__value">{{value.value}}</span>
-        <span class="sb-list__custom-property">
-          <code class=" sb-custom-property-name">var(--radius-{{opacity}})</code>
-        </span>
-        <span class="sb-list__visualization" style="opacity: {{value.value}}; display: block; width: 50px; height: 50px; background-color: var(--colors-sb-visualization); border-radius: var(--radius-sm);"></span>
-      </li>
-    {% endfor %}
-  </ul>
+	<ul class="sb-list">
+		{% for opacity, value in _context.opacity %}
+			<li class="sb-list__item">
+				<span class="sb-list__label">{{opacity}}</span>
+				<span class="sb-list__value">{{value.value}}</span>
+				<span class="sb-list__custom-property">
+					<code class=" sb-custom-property-name">var(--radius-{{opacity}})</code>
+				</span>
+				<span class="sb-list__visualization" style="opacity: {{value.value}}; display: block; width: 50px; height: 50px; background-color: var(--color-sb-visualization); border-radius: var(--radius-sm);"></span>
+			</li>
+		{% endfor %}
+	</ul>
 </div>
diff --git a/src/components/tokens/size-tokens/size-tokens.twig b/src/components/tokens/size-tokens/size-tokens.twig
index a727eee..a5a9ec7 100644
--- a/src/components/tokens/size-tokens/size-tokens.twig
+++ b/src/components/tokens/size-tokens/size-tokens.twig
@@ -1,16 +1,16 @@
 <div>
-  <h2 class="sb-title">Size Tokens</h2>
+	<h2 class="sb-title">Size Tokens</h2>
 
-  <ul class="sb-list">
-    {% for size, value in _context.size %}
-      <li class="sb-list__item">
-        <span class="sb-list__label">{{size}}</span>
-        <span class="sb-list__value">{{value.value}}px</span>
-        <span class="sb-list__custom-property">
-          <code class=" sb-custom-property-name">var(--size-{{size}})</code>
-        </span>
-        <span class="sb-list__visualization" style="width: {{value.value}}px; height: {{value.value}}px; background-color: var(--colors-sb-visualization);"></span>
-      </li>
-    {% endfor %}
-  </ul>
+	<ul class="sb-list">
+		{% for size, value in _context.size %}
+			<li class="sb-list__item">
+				<span class="sb-list__label">{{size}}</span>
+				<span class="sb-list__value">{{value.value}}px</span>
+				<span class="sb-list__custom-property">
+					<code class=" sb-custom-property-name">var(--size-{{size}})</code>
+				</span>
+				<span class="sb-list__visualization" style="width: {{value.value}}px; height: {{value.value}}px; background-color: var(--color-sb-visualization);"></span>
+			</li>
+		{% endfor %}
+	</ul>
 </div>
diff --git a/src/components/tokens/spacing-tokens/spacing-tokens.twig b/src/components/tokens/spacing-tokens/spacing-tokens.twig
index 1f84cb1..807469f 100644
--- a/src/components/tokens/spacing-tokens/spacing-tokens.twig
+++ b/src/components/tokens/spacing-tokens/spacing-tokens.twig
@@ -1,21 +1,21 @@
 <div>
-  <h2 class="sb-title">Spacing Tokens</h2>
+	<h2 class="sb-title">Spacing Tokens</h2>
 
-  <ul class="sb-list">
-    {% for spacing, value in _context.spacing %}
-      <li class="sb-list__item">
-        <span class="sb-list__label">{{spacing}}</span>
-        <span class="sb-list__value">{{value.value}}px</span>
-        <span class="sb-list__custom-property">
-          <code class=" sb-custom-property-name">var(--spacing-{{spacing}})</code>
-        </span>
+	<ul class="sb-list">
+		{% for spacing, value in _context.spacing %}
+			<li class="sb-list__item">
+				<span class="sb-list__label">{{spacing}}</span>
+				<span class="sb-list__value">{{value.value}}px</span>
+				<span class="sb-list__custom-property">
+					<code class=" sb-custom-property-name">var(--spacing-{{spacing}})</code>
+				</span>
 
-        <ul class="sb-spacing-wrapper" style="gap: {{value.value}}px; padding-left: 0;">
-          {% for i in [1,1,1,1,1,1,1] %}
-            <li class="sb-list__visualization" style="width: 50px; height: 50px; background-color: var(--colors-sb-visualization);"></li>
-          {% endfor %}
-        </ul>
-      </li>
-    {% endfor %}
-  </ul>
+				<ul class="sb-spacing-wrapper" style="gap: {{value.value}}px; padding-left: 0;">
+					{% for i in [1,1,1,1,1,1,1] %}
+						<li class="sb-list__visualization" style="width: 50px; height: 50px; background-color: var(--color-sb-visualization);"></li>
+					{% endfor %}
+				</ul>
+			</li>
+		{% endfor %}
+	</ul>
 </div>
diff --git a/src/components/tokens/type-scale/type-scale.stories.js b/src/components/tokens/type-scale/type-scale.stories.js
deleted file mode 100644
index 3379ee9..0000000
--- a/src/components/tokens/type-scale/type-scale.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import template from './type-scale.twig';
-import tokens from '../../../tokens/transformed.tokens.json';
-import figma from '../../../../.storybook/configma.json';
-
-const data = { fontSize: tokens.fontSize };
-
-export default {
-  title: 'Tokens/Type Scale',
-};
-
-export const TypeScale = () => template(data);
-
-TypeScale.parameters = {
-  design: {
-    type: 'figma',
-    url: figma.url + figma.typeScale,
-  },
-};
diff --git a/src/components/tokens/type-scale/type-scale.twig b/src/components/tokens/type-scale/type-scale.twig
deleted file mode 100644
index 976b94e..0000000
--- a/src/components/tokens/type-scale/type-scale.twig
+++ /dev/null
@@ -1,15 +0,0 @@
-<div>
-  <h2 class="sb-title">Type Scale</h2>
-
-  <ul class="sb-list">
-    {% for fontSize, value in _context.fontSize|reverse %}
-      <li class="sb-list__item">
-        <span class="sb-list__value">{{value.value}}px</span>
-        <span class="sb-list__custom-property">
-          <code class="sb-custom-property-name">var(--font-size-{{fontSize}})</code>
-        </span>
-        <span class="sb-list__label" style="font-size: {{value.value}}px;">{{fontSize}}</span>
-      </li>
-    {% endfor %}
-  </ul>
-</div>
diff --git a/src/images/example/basic-camera-image.png b/src/images/example/basic-camera-image.png
new file mode 100644
index 0000000..ad54222
Binary files /dev/null and b/src/images/example/basic-camera-image.png differ
diff --git a/src/style.scss b/src/style.scss
index ed1e1fa..02e1bb4 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,13 +1,14 @@
 // External Libraries
 @import '~normalize.css/normalize';
 @import '~breakpoint-sass/stylesheets/breakpoint';
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
 
 html {
   box-sizing: border-box;
 }
 
 body {
-  color: var(--colors-text-body);
+  color: var(--color-text-body);
   font-family: var(--font-family-body);
   font-size: var(--font-size-body);
   line-height: var(--line-height-normal);
diff --git a/src/stylesheets/mixins.scss b/src/stylesheets/mixins.scss
index cfa3d02..81613d3 100644
--- a/src/stylesheets/mixins.scss
+++ b/src/stylesheets/mixins.scss
@@ -57,12 +57,12 @@ $outer-container-break: var(--breakpoint-sm);
 
 @mixin heading-xl($font-family: var(--font-family-heading),
   $font-size: var(--font-size-h1),
-  $line-height: var(--line-heights-none),
-  $color: var(--colors-text-heading),
+  $line-height: var(--line-height-none),
+  $color: var(--color-text-heading),
   $color-link: inherit,
   $color-link-hover: inherit,
   $font-weight: 700,
-  $margin: var(--spacing-2xl) 0 var(--spacing-lg)) {
+  $margin: var(--spacing-xl) 0 var(--spacing-lg)) {
   color: $color;
   font-family: $font-family;
   font-weight: $font-weight;
@@ -71,6 +71,7 @@ $outer-container-break: var(--breakpoint-sm);
   line-height: $line-height;
   margin: $margin;
   width: auto;
+  text-wrap: balance;
 
   &__link {
     color: $color-link;
@@ -83,12 +84,12 @@ $outer-container-break: var(--breakpoint-sm);
 
 @mixin heading-large($font-family: var(--font-family-heading),
   $font-size: var(--font-size-h2),
-  $line-height: var(--line-heights-none),
-  $color: var(--colors-text-heading),
+  $line-height: var(--line-height-none),
+  $color: var(--color-text-heading),
   $color-link: inherit,
   $color-link-hover: inherit,
   $font-weight: 700,
-  $margin: var(--spacing-2xl) 0 var(--spacing-lg)) {
+  $margin: var(--spacing-xl) 0 var(--spacing-lg)) {
   color: $color;
   font-family: $font-family;
   font-weight: $font-weight;
@@ -97,6 +98,7 @@ $outer-container-break: var(--breakpoint-sm);
   line-height: $line-height;
   margin: $margin;
   width: auto;
+  text-wrap: balance;
 
   &__link {
     color: $color-link;
@@ -109,12 +111,12 @@ $outer-container-break: var(--breakpoint-sm);
 
 @mixin heading-medium($font-family: var(--font-family-heading),
   $font-size: var(--font-size-h3),
-  $line-height: var(--line-heights-tight),
-  $color: var(--colors-text-heading),
+  $line-height: var(--line-height-tight),
+  $color: var(--color-text-heading),
   $color-link: inherit,
   $color-link-hover: inherit,
   $font-weight: 700,
-  $margin: var(--spacing-2xl) 0 var(--spacing-lg)) {
+  $margin: var(--spacing-xl) 0 var(--spacing-lg)) {
   color: $color;
   font-family: $font-family;
   font-weight: $font-weight;
@@ -123,6 +125,7 @@ $outer-container-break: var(--breakpoint-sm);
   line-height: $line-height;
   margin: $margin;
   width: auto;
+  text-wrap: balance;
 
   &__link {
     color: $color-link;
@@ -135,12 +138,12 @@ $outer-container-break: var(--breakpoint-sm);
 
 @mixin heading-small($font-family: var(--font-family-heading),
   $font-size: var(--font-size-h4),
-  $line-height: var(--line-heights-tight),
-  $color: var(--colors-text-heading),
+  $line-height: var(--line-height-tight),
+  $color: var(--color-text-heading),
   $color-link: inherit,
   $color-link-hover: inherit,
   $font-weight: 600,
-  $margin: var(--spacing-2xl) 0 var(--spacing-lg)) {
+  $margin: var(--spacing-xl) 0 var(--spacing-lg)) {
   color: $color;
   font-family: $font-family;
   font-weight: $font-weight;
@@ -149,6 +152,7 @@ $outer-container-break: var(--breakpoint-sm);
   line-height: $line-height;
   margin: $margin;
   width: auto;
+  text-wrap: balance;
 
   &__link {
     color: $color-link;
@@ -161,8 +165,8 @@ $outer-container-break: var(--breakpoint-sm);
 
 @mixin heading-xs($font-family: var(--font-family-heading),
   $font-size: var(--font-size-h5),
-  $line-height: var(--line-heights-tight),
-  $color: var(--colors-text-heading),
+  $line-height: var(--line-height-tight),
+  $color: var(--color-text-heading),
   $color-link: inherit,
   $color-link-hover: inherit,
   $font-weight: 600,
@@ -175,6 +179,7 @@ $outer-container-break: var(--breakpoint-sm);
   line-height: $line-height;
   margin: $margin;
   width: auto;
+  text-wrap: balance;
 
   &__link {
     color: $color-link;
diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json
index 470b334..a4768c1 100644
--- a/src/tokens/figma.tokens.json
+++ b/src/tokens/figma.tokens.json
@@ -241,6 +241,178 @@
           "value": "#080b0c",
           "type": "color"
         }
+      },
+      "WUP": {
+        "gold": {
+          "100": {
+            "value": "#fff9f2",
+            "type": "color"
+          },
+          "200": {
+            "value": "#fff2e4",
+            "type": "color"
+          },
+          "300": {
+            "value": "#ffe5c6",
+            "type": "color"
+          },
+          "400": {
+            "value": "#ffd7a3",
+            "type": "color"
+          },
+          "500": {
+            "value": "#ffc875",
+            "type": "color"
+          },
+          "600": {
+            "value": "#ffb81c",
+            "type": "color"
+          },
+          "700": {
+            "value": "#e4a519",
+            "type": "color"
+          },
+          "800": {
+            "value": "#c68f16",
+            "type": "color"
+          },
+          "900": {
+            "value": "#a17412",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#72520d",
+            "type": "color"
+          }
+        },
+        "blue": {
+          "100": {
+            "value": "#f2f2f6",
+            "type": "color"
+          },
+          "200": {
+            "value": "#e4e5ed",
+            "type": "color"
+          },
+          "300": {
+            "value": "#c6c8db",
+            "type": "color"
+          },
+          "400": {
+            "value": "#a1a6c6",
+            "type": "color"
+          },
+          "500": {
+            "value": "#727baf",
+            "type": "color"
+          },
+          "600": {
+            "value": "#003594",
+            "type": "color"
+          },
+          "700": {
+            "value": "#002f84",
+            "type": "color"
+          },
+          "800": {
+            "value": "#002973",
+            "type": "color"
+          },
+          "900": {
+            "value": "#00225e",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#001842",
+            "type": "color"
+          }
+        },
+        "legacy": {
+          "gold": {
+            "100": {
+              "value": "#f9f6f2",
+              "type": "color"
+            },
+            "200": {
+              "value": "#f2ece4",
+              "type": "color"
+            },
+            "300": {
+              "value": "#e4d7c6",
+              "type": "color"
+            },
+            "400": {
+              "value": "#d6bfa1",
+              "type": "color"
+            },
+            "500": {
+              "value": "#c6a572",
+              "type": "color"
+            },
+            "600": {
+              "value": "#b58500",
+              "type": "color"
+            },
+            "700": {
+              "value": "#a27700",
+              "type": "color"
+            },
+            "800": {
+              "value": "#8c6700",
+              "type": "color"
+            },
+            "900": {
+              "value": "#725400",
+              "type": "color"
+            },
+            "1000": {
+              "value": "#513b00",
+              "type": "color"
+            }
+          },
+          "blue": {
+            "100": {
+              "value": "#f2f2f3",
+              "type": "color"
+            },
+            "200": {
+              "value": "#e4e4e7",
+              "type": "color"
+            },
+            "300": {
+              "value": "#c6c6cb",
+              "type": "color"
+            },
+            "400": {
+              "value": "#a2a3ac",
+              "type": "color"
+            },
+            "500": {
+              "value": "#737585",
+              "type": "color"
+            },
+            "600": {
+              "value": "#141b4d",
+              "type": "color"
+            },
+            "700": {
+              "value": "#121845",
+              "type": "color"
+            },
+            "800": {
+              "value": "#0f153c",
+              "type": "color"
+            },
+            "900": {
+              "value": "#0d1131",
+              "type": "color"
+            },
+            "1000": {
+              "value": "#090c22",
+              "type": "color"
+            }
+          }
+        }
       }
     },
     "font-family": {
@@ -2435,7 +2607,6 @@
       },
       "selectedTokenSets": {
         "global": "enabled",
-        "semantic": "enabled",
         "storybook": "enabled",
         "components/accordion": "enabled",
         "components/blockQuote": "enabled",
@@ -2454,7 +2625,8 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled"
+        "components/textField": "enabled",
+        "semantic": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:16908",
       "$figmaModeId": "23237:10",
@@ -2642,7 +2814,8 @@
       "name": "Emulsify Global",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "global": "enabled"
+        "global": "enabled",
+        "semantic": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17089",
       "$figmaModeId": "23237:11",
@@ -2716,7 +2889,8 @@
       "name": "Emulsify Storybook only",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "storybook": "source"
+        "storybook": "source",
+        "semantic": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17144",
       "$figmaModeId": "23237:13",
@@ -2744,7 +2918,8 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled"
+        "components/textField": "enabled",
+        "semantic": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17145",
       "$figmaModeId": "23237:14",
@@ -2872,6 +3047,62 @@
         "checkbox.color.label": "d2a0283754f673d1b92c74eef12f3bbe06845d3b",
         "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838"
       }
+    },
+    {
+      "id": "865132ed4de1f234ac10e07b09e233a0fbadd978",
+      "name": "Main",
+      "$figmaStyleReferences": {},
+      "selectedTokenSets": {
+        "global": "enabled",
+        "components/accordion": "enabled",
+        "components/blockQuote": "enabled",
+        "components/breadcrumbs": "enabled",
+        "components/button": "enabled",
+        "components/card": "enabled",
+        "components/checkbox": "enabled",
+        "components/cta": "enabled",
+        "components/fieldset": "enabled",
+        "components/input": "enabled",
+        "components/link": "enabled",
+        "components/mainMenu": "enabled",
+        "components/pager": "enabled",
+        "components/radioButton": "enabled",
+        "components/selectdropdown": "enabled",
+        "components/status": "enabled",
+        "components/table": "enabled",
+        "components/tabs": "enabled",
+        "components/textField": "enabled",
+        "semantic": "enabled"
+      },
+      "group": "WUP"
+    },
+    {
+      "id": "14ff327c549a6b3a1dd78f86615f1e5bed0e367d",
+      "name": "Gold",
+      "$figmaStyleReferences": {},
+      "selectedTokenSets": {
+        "global": "enabled",
+        "components/accordion": "enabled",
+        "components/blockQuote": "enabled",
+        "components/breadcrumbs": "enabled",
+        "components/button": "enabled",
+        "components/card": "enabled",
+        "components/checkbox": "enabled",
+        "components/cta": "enabled",
+        "components/fieldset": "enabled",
+        "components/input": "enabled",
+        "components/link": "enabled",
+        "components/mainMenu": "enabled",
+        "components/pager": "enabled",
+        "components/radioButton": "enabled",
+        "components/selectdropdown": "enabled",
+        "components/status": "enabled",
+        "components/table": "enabled",
+        "components/tabs": "enabled",
+        "components/textField": "enabled",
+        "semantic": "disabled"
+      },
+      "group": "WUP"
     }
   ],
   "$metadata": {
diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
index 0ff172f..871d0a0 100644
--- a/src/tokens/transformed.tokens.json
+++ b/src/tokens/transformed.tokens.json
@@ -957,6 +957,178 @@
         "value": "#080b0c",
         "type": "color"
       }
+    },
+    "WUP": {
+      "gold": {
+        "100": {
+          "value": "#fff9f2",
+          "type": "color"
+        },
+        "200": {
+          "value": "#fff2e4",
+          "type": "color"
+        },
+        "300": {
+          "value": "#ffe5c6",
+          "type": "color"
+        },
+        "400": {
+          "value": "#ffd7a3",
+          "type": "color"
+        },
+        "500": {
+          "value": "#ffc875",
+          "type": "color"
+        },
+        "600": {
+          "value": "#ffb81c",
+          "type": "color"
+        },
+        "700": {
+          "value": "#e4a519",
+          "type": "color"
+        },
+        "800": {
+          "value": "#c68f16",
+          "type": "color"
+        },
+        "900": {
+          "value": "#a17412",
+          "type": "color"
+        },
+        "1000": {
+          "value": "#72520d",
+          "type": "color"
+        }
+      },
+      "blue": {
+        "100": {
+          "value": "#f2f2f6",
+          "type": "color"
+        },
+        "200": {
+          "value": "#e4e5ed",
+          "type": "color"
+        },
+        "300": {
+          "value": "#c6c8db",
+          "type": "color"
+        },
+        "400": {
+          "value": "#a1a6c6",
+          "type": "color"
+        },
+        "500": {
+          "value": "#727baf",
+          "type": "color"
+        },
+        "600": {
+          "value": "#003594",
+          "type": "color"
+        },
+        "700": {
+          "value": "#002f84",
+          "type": "color"
+        },
+        "800": {
+          "value": "#002973",
+          "type": "color"
+        },
+        "900": {
+          "value": "#00225e",
+          "type": "color"
+        },
+        "1000": {
+          "value": "#001842",
+          "type": "color"
+        }
+      },
+      "legacy": {
+        "gold": {
+          "100": {
+            "value": "#f9f6f2",
+            "type": "color"
+          },
+          "200": {
+            "value": "#f2ece4",
+            "type": "color"
+          },
+          "300": {
+            "value": "#e4d7c6",
+            "type": "color"
+          },
+          "400": {
+            "value": "#d6bfa1",
+            "type": "color"
+          },
+          "500": {
+            "value": "#c6a572",
+            "type": "color"
+          },
+          "600": {
+            "value": "#b58500",
+            "type": "color"
+          },
+          "700": {
+            "value": "#a27700",
+            "type": "color"
+          },
+          "800": {
+            "value": "#8c6700",
+            "type": "color"
+          },
+          "900": {
+            "value": "#725400",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#513b00",
+            "type": "color"
+          }
+        },
+        "blue": {
+          "100": {
+            "value": "#f2f2f3",
+            "type": "color"
+          },
+          "200": {
+            "value": "#e4e4e7",
+            "type": "color"
+          },
+          "300": {
+            "value": "#c6c6cb",
+            "type": "color"
+          },
+          "400": {
+            "value": "#a2a3ac",
+            "type": "color"
+          },
+          "500": {
+            "value": "#737585",
+            "type": "color"
+          },
+          "600": {
+            "value": "#141b4d",
+            "type": "color"
+          },
+          "700": {
+            "value": "#121845",
+            "type": "color"
+          },
+          "800": {
+            "value": "#0f153c",
+            "type": "color"
+          },
+          "900": {
+            "value": "#0d1131",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#090c22",
+            "type": "color"
+          }
+        }
+      }
     }
   },
   "fontFamily": {
@@ -2437,7 +2609,6 @@
     },
     "selectedTokenSets": {
       "global": "enabled",
-      "semantic": "enabled",
       "storybook": "enabled",
       "components/accordion": "enabled",
       "components/blockQuote": "enabled",
@@ -2456,7 +2627,8 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled"
+      "components/textField": "enabled",
+      "semantic": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:16908",
     "$figmaModeId": "23237:10",
@@ -2645,7 +2817,8 @@
     "id": "0a5c4562bd35f00ce8a339239980a3842147c0bd",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "global": "enabled"
+      "global": "enabled",
+      "semantic": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17089",
     "$figmaModeId": "23237:11",
@@ -2721,7 +2894,8 @@
     "id": "16a10d373d39988a75c7d612cd449a633f373c44",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "storybook": "source"
+      "storybook": "source",
+      "semantic": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17144",
     "$figmaModeId": "23237:13",
@@ -2750,7 +2924,8 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled"
+      "components/textField": "enabled",
+      "semantic": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17145",
     "$figmaModeId": "23237:14",
@@ -2880,5 +3055,63 @@
     },
     "type": "other",
     "value": "[object Object]"
+  },
+  "Main": {
+    "id": "865132ed4de1f234ac10e07b09e233a0fbadd978",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "global": "enabled",
+      "components/accordion": "enabled",
+      "components/blockQuote": "enabled",
+      "components/breadcrumbs": "enabled",
+      "components/button": "enabled",
+      "components/card": "enabled",
+      "components/checkbox": "enabled",
+      "components/cta": "enabled",
+      "components/fieldset": "enabled",
+      "components/input": "enabled",
+      "components/link": "enabled",
+      "components/mainMenu": "enabled",
+      "components/pager": "enabled",
+      "components/radioButton": "enabled",
+      "components/selectdropdown": "enabled",
+      "components/status": "enabled",
+      "components/table": "enabled",
+      "components/tabs": "enabled",
+      "components/textField": "enabled",
+      "semantic": "enabled"
+    },
+    "group": "WUP",
+    "type": "other",
+    "value": "[object Object]"
+  },
+  "Gold": {
+    "id": "14ff327c549a6b3a1dd78f86615f1e5bed0e367d",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "global": "enabled",
+      "components/accordion": "enabled",
+      "components/blockQuote": "enabled",
+      "components/breadcrumbs": "enabled",
+      "components/button": "enabled",
+      "components/card": "enabled",
+      "components/checkbox": "enabled",
+      "components/cta": "enabled",
+      "components/fieldset": "enabled",
+      "components/input": "enabled",
+      "components/link": "enabled",
+      "components/mainMenu": "enabled",
+      "components/pager": "enabled",
+      "components/radioButton": "enabled",
+      "components/selectdropdown": "enabled",
+      "components/status": "enabled",
+      "components/table": "enabled",
+      "components/tabs": "enabled",
+      "components/textField": "enabled",
+      "semantic": "disabled"
+    },
+    "group": "WUP",
+    "type": "other",
+    "value": "[object Object]"
   }
 }
\ No newline at end of file