diff --git a/apps/smithy/.storybook/global.css b/apps/smithy/.storybook/global.css
index 52de0397..6763a498 100644
--- a/apps/smithy/.storybook/global.css
+++ b/apps/smithy/.storybook/global.css
@@ -1,3 +1,3 @@
 :root {
-  font-family: "Inter";
+  font-family:  "Inter", ui-sans-serif,system-ui,sans-serif;
 }
diff --git a/packages/react/src/components/Button/Button.styles.ts b/packages/react/src/components/Button/Button.styles.ts
index c2816552..7b7ca82c 100644
--- a/packages/react/src/components/Button/Button.styles.ts
+++ b/packages/react/src/components/Button/Button.styles.ts
@@ -4,7 +4,8 @@ const base = {
   borderStyle: 'solid',
   display: 'flex',
   gap: '2',
-  padding: '2 4',
+  padding: '1 3',
+  fontFamily: 'inherit',
 }
 
 export const Primary = {
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 660fb345..bacabfa1 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -24,8 +24,9 @@ function BaseButton({ as, children, part, title, variant = 'Primary', ...props }
             MozOsxFontSmoothing: 'grayscale',
           }}
           flexGrow="1"
-          fontWeight="demibold"
+          fontWeight="medium"
           part="button-title"
+          textWrap="nowrap"
         >
           {title}
         </Text.Body2>
diff --git a/packages/react/src/components/Card/FlowCard.tsx b/packages/react/src/components/Card/FlowCard.tsx
index 18ff0359..1dfb11e7 100644
--- a/packages/react/src/components/Card/FlowCard.tsx
+++ b/packages/react/src/components/Card/FlowCard.tsx
@@ -7,6 +7,7 @@ export function FlowCard({ part, ...props }: FlowProps) {
     <Flow
       as={Card}
       gap={5}
+      padding={4}
       borderColor="neutral.border"
       borderStyle="solid"
       borderWidth="md"
@@ -28,9 +29,9 @@ export function FlowCard({ part, ...props }: FlowProps) {
 
             <Card.Media src={step.imageUri} css={{ objectFit: 'contain', width: '100%' }} />
 
-            <Flex.Row gap={3} justifyContent="flex-end" part="card-footer">
-              <Card.Secondary title={secondaryButtonTitle} onClick={handleSecondary} />
+            <Flex.Row gap={3} justifyContent="flex-start" part="card-footer">
               <Card.Primary title={primaryButtonTitle} onClick={handlePrimary} />
+              <Card.Secondary title={secondaryButtonTitle} onClick={handleSecondary} />
             </Flex.Row>
           </>
         )
diff --git a/packages/react/src/components/Card/index.tsx b/packages/react/src/components/Card/index.tsx
index a65860f7..0f9adfae 100644
--- a/packages/react/src/components/Card/index.tsx
+++ b/packages/react/src/components/Card/index.tsx
@@ -1,7 +1,7 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react'
 import * as React from 'react'
 import { EmotionJSX } from '@emotion/react/types/jsx-namespace'
-import { XMarkIcon } from '@heroicons/react/24/solid'
+import { XMarkIcon } from '@heroicons/react/20/solid'
 
 import type { BoxProps } from '@/components/Box'
 import { Button, type ButtonProps } from '@/components/Button'
@@ -64,7 +64,7 @@ export const Card = React.forwardRef(({ children, flowId, ...props }: CardProps,
 Card.Dismiss = (props: ButtonProps) => {
   return (
     <Button.Plain part="dismiss" padding={0} {...props}>
-      <XMarkIcon height="24" fill="currentColor" />
+      <XMarkIcon height="20" fill="currentColor" />
     </Button.Plain>
   )
 }
@@ -74,7 +74,7 @@ Card.Header = ({ dismissible, handleDismiss, subtitle, title, ...props }) => {
     <Flex.Row alignItems="flex-start" flexWrap="wrap" gap={1} part="card-header" {...props}>
       <Card.Title maxWidth="calc(100% - 32px)">{title}</Card.Title>
       {dismissible && <Card.Dismiss onClick={handleDismiss} marginLeft="auto" />}
-      <Card.Subtitle color="gray500" flexBasis="100%">
+      <Card.Subtitle color="neutral400" flexBasis="100%">
         {subtitle}
       </Card.Subtitle>
     </Flex.Row>
@@ -103,7 +103,7 @@ Card.Subtitle = ({ children, ...props }: TextProps) => {
   if (children == null) return null
 
   return (
-    <Text.Body2 display="block" part="subtitle" {...props}>
+    <Text.Body2 display="block" color="neutral400" part="subtitle" {...props}>
       {children}
     </Text.Body2>
   )
diff --git a/packages/react/src/components/Checklist/Collapsible.tsx b/packages/react/src/components/Checklist/Collapsible.tsx
index 42507ac5..33555407 100644
--- a/packages/react/src/components/Checklist/Collapsible.tsx
+++ b/packages/react/src/components/Checklist/Collapsible.tsx
@@ -82,7 +82,7 @@ function DefaultCollapsibleStep({
           src={step.videoUri ?? step.imageUri}
           type={step.videoUri ? 'video' : 'image'}
         />
-        <Card.Subtitle color="gray500">{subtitle}</Card.Subtitle>
+        <Card.Subtitle color="neutral400">{subtitle}</Card.Subtitle>
         <Flex.Row gap={3}>
           <Card.Secondary
             disabled={disabled}
diff --git a/packages/react/src/components/Checklist/CollapsibleStep.tsx b/packages/react/src/components/Checklist/CollapsibleStep.tsx
index 14b0ce55..a08c774a 100644
--- a/packages/react/src/components/Checklist/CollapsibleStep.tsx
+++ b/packages/react/src/components/Checklist/CollapsibleStep.tsx
@@ -151,7 +151,7 @@ export function Trigger({ isCompleted, title }) {
 
         <Box
           as={ChevronDownIcon}
-          color="gray100"
+          color="neutral100"
           css={{
             '& path': {
               vectorEffect: 'non-scaling-stroke',
diff --git a/packages/react/src/components/Dialog/index.tsx b/packages/react/src/components/Dialog/index.tsx
index ebe9518d..c5fd0edd 100644
--- a/packages/react/src/components/Dialog/index.tsx
+++ b/packages/react/src/components/Dialog/index.tsx
@@ -1,6 +1,6 @@
 import { keyframes } from '@emotion/react'
 import * as RadixDialog from '@radix-ui/react-dialog'
-import { XMarkIcon } from '@heroicons/react/24/solid'
+import { XMarkIcon } from '@heroicons/react/20/solid'
 
 import { Box } from '@/components/Box'
 import { Button, ButtonProps } from '@/components/Button'
@@ -103,8 +103,8 @@ export function Dialog({ children, className, modal = true, ...props }: DialogPr
 Dialog.Dismiss = (props: ButtonProps) => {
   return (
     <RadixDialog.Close aria-label="Close" asChild>
-      <Button.Plain part="close" position="absolute" right="-4px" top="4px" {...props}>
-        <XMarkIcon height="24" fill="currentColor" />
+      <Button.Plain part="close" position="absolute" right="2px" top="2px" {...props}>
+        <XMarkIcon height="20" fill="currentColor" />
       </Button.Plain>
     </RadixDialog.Close>
   )
@@ -174,9 +174,9 @@ Dialog.Secondary = ({ onClick, title, ...props }: ButtonProps) => {
 Dialog.Title = ({ children, ...props }: TextProps) => {
   return (
     <RadixDialog.Title asChild>
-      <Text.H3 part="title" {...props}>
+      <Text.H4 part="title" {...props}>
         {children}
-      </Text.H3>
+      </Text.H4>
     </RadixDialog.Title>
   )
 }
diff --git a/packages/react/src/components/Form/fields/Label.tsx b/packages/react/src/components/Form/fields/Label.tsx
index 4c261eca..6a696360 100644
--- a/packages/react/src/components/Form/fields/Label.tsx
+++ b/packages/react/src/components/Form/fields/Label.tsx
@@ -2,9 +2,16 @@ import { Text } from '@/components/Text'
 
 export function Label({ children, id, required = false }) {
   return (
-    <Text.Body2 as="label" htmlFor={id} part="field-label" fontWeight="bold" mb="2" display="block">
+    <Text.Body2
+      as="label"
+      htmlFor={id}
+      part="field-label"
+      fontWeight="medium"
+      mb="2"
+      display="block"
+    >
       {children}
-      {required && ' *'}
+      {required && '*'}
     </Text.Body2>
   )
 }
diff --git a/packages/react/src/components/Form/fields/SelectField.tsx b/packages/react/src/components/Form/fields/SelectField.tsx
index f4e922eb..6c45cca1 100644
--- a/packages/react/src/components/Form/fields/SelectField.tsx
+++ b/packages/react/src/components/Form/fields/SelectField.tsx
@@ -61,7 +61,7 @@ export function SelectField(props: FormFieldProps) {
               <Select.Icon>
                 <Box
                   as={ChevronDownIcon}
-                  color="gray100"
+                  color="neutral100"
                   display="block"
                   height="24px"
                   part="field-select-icon"
diff --git a/packages/react/src/components/Media/Video.tsx b/packages/react/src/components/Media/Video.tsx
index cb5894fa..3623aa94 100644
--- a/packages/react/src/components/Media/Video.tsx
+++ b/packages/react/src/components/Media/Video.tsx
@@ -46,7 +46,7 @@ export function Video({ part, src, ...props }: VideoProps) {
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
       allowFullScreen
       as="iframe"
-      backgroundColor="gray100"
+      backgroundColor="neutral100"
       borderWidth="0"
       part={['video', part]}
       src={videoEmbedSrc}
diff --git a/packages/react/src/components/Survey/NPS.tsx b/packages/react/src/components/Survey/NPS.tsx
index d0e2fe98..5bc91305 100644
--- a/packages/react/src/components/Survey/NPS.tsx
+++ b/packages/react/src/components/Survey/NPS.tsx
@@ -35,7 +35,7 @@ export function NPS({ as = Dialog, flowId, fieldTypes, part, ...props }: FormPro
         '.fr-form': {
           padding: '20px',
           '@media (min-width: 660px)': {
-            minWidth: '620px',
+            minWidth: '520px',
           },
           minWidth: '100%',
         },
diff --git a/packages/react/src/components/Survey/NPSField.tsx b/packages/react/src/components/Survey/NPSField.tsx
index 54cfeb91..1a4e0ed0 100644
--- a/packages/react/src/components/Survey/NPSField.tsx
+++ b/packages/react/src/components/Survey/NPSField.tsx
@@ -40,10 +40,10 @@ export function NPSField({ field, submit }: FormFieldProps) {
         {buttons}
       </Flex.Row>
       <Flex.Row justifyContent="space-between" part="field-nps-label">
-        <Text.Caption part="field-nps-left-label" color="gray600">
+        <Text.Caption part="field-nps-left-label" color="neutral600">
           Not likely at all
         </Text.Caption>
-        <Text.Caption part="field-nps-right-label" color="gray600">
+        <Text.Caption part="field-nps-right-label" color="neutral600">
           Extremely likely
         </Text.Caption>
       </Flex.Row>
diff --git a/packages/react/src/components/Tooltip/index.tsx b/packages/react/src/components/Tooltip/index.tsx
index 352f3ad9..85ca9dd4 100644
--- a/packages/react/src/components/Tooltip/index.tsx
+++ b/packages/react/src/components/Tooltip/index.tsx
@@ -1,7 +1,7 @@
 import { keyframes } from '@emotion/react'
 import React, { useEffect, useRef, useState } from 'react'
 
-import { XMarkIcon } from '@heroicons/react/24/solid'
+import { XMarkIcon } from '@heroicons/react/20/solid'
 import * as Popover from '@radix-ui/react-popover'
 
 import { useBoundingClientRect } from '@/hooks/useBoundingClientRect'
@@ -241,14 +241,14 @@ Tooltip.Close = (props: ButtonProps) => {
     <Popover.Close aria-label="Close" asChild>
       <Button.Plain
         css={{
-          top: '12px',
-          right: '4px',
+          top: '0px',
+          right: '-6px',
         }}
         part="close"
         position="absolute"
         {...props}
       >
-        <XMarkIcon height="24" fill="currentColor" />
+        <XMarkIcon height="20" fill="currentColor" />
       </Button.Plain>
     </Popover.Close>
   )
@@ -282,9 +282,9 @@ Tooltip.Progress = ({ children, ...props }: TextProps) => {
   if (children == null) return null
 
   return (
-    <Text.H4 part="progress" {...props}>
+    <Text.Body2 part="progress" {...props}>
       {children}
-    </Text.H4>
+    </Text.Body2>
   )
 }
 
diff --git a/packages/react/src/components/Tour/TourStep.tsx b/packages/react/src/components/Tour/TourStep.tsx
index 6d7b2866..25548822 100644
--- a/packages/react/src/components/Tour/TourStep.tsx
+++ b/packages/react/src/components/Tour/TourStep.tsx
@@ -66,7 +66,7 @@ export function TourStep({
 
       <Flex.Column gap={1} part="tooltip-header">
         <Tooltip.Title>{step.title}</Tooltip.Title>
-        <Tooltip.Subtitle color="gray500">{step.subtitle}</Tooltip.Subtitle>
+        <Tooltip.Subtitle color="neutral400">{step.subtitle}</Tooltip.Subtitle>
       </Flex.Column>
 
       <Flex.Row alignItems="center" gap={3} justifyContent="flex-end" part="tooltip-footer">
diff --git a/packages/react/src/shared/tokens/radii.ts b/packages/react/src/shared/tokens/radii.ts
index 768c62a7..2151c367 100644
--- a/packages/react/src/shared/tokens/radii.ts
+++ b/packages/react/src/shared/tokens/radii.ts
@@ -1,5 +1,5 @@
 export const radii = {
-  md: '10px',
+  md: '8px',
   lg: '20px',
   round: '50%',
 }