diff --git a/.changeset/lazy-toes-fetch.md b/.changeset/lazy-toes-fetch.md
new file mode 100644
index 00000000000..d62d18fa171
--- /dev/null
+++ b/.changeset/lazy-toes-fetch.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Initial conversion of SCSS to CSS
diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
new file mode 100644
index 00000000000..1b955a437d0
--- /dev/null
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -0,0 +1,138 @@
+.wrapper {
+  --avatar-x-y: 1.5rem;
+
+  background: var(--color-gray-300);
+  border-radius: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: var(--avatar-x-y);
+  height: var(--avatar-x-y);
+  box-shadow: var(--shadow-small-box-shadow);
+  border: 3px solid var(--color-white);
+}
+
+.small {
+  box-shadow: none;
+  border: none;
+
+  --avatar-x-y: 1.25rem;
+}
+
+.medium {
+  --avatar-x-y: 3rem;
+}
+
+.large {
+  --avatar-x-y: 4.5rem;
+}
+
+.xlarge {
+  --avatar-x-y: 6rem;
+}
+
+.xxlarge {
+  --avatar-x-y: 7.75rem;
+}
+
+/* Themes */
+.personal {
+  background: var(--color-orange-100);
+}
+
+.otherUser {
+  background: var(--color-gray-300);
+}
+
+.company {
+  border: 0;
+  background: var(--color-white);
+  padding: var(--spacing-6);
+  border-radius: var(--border-solid-border-radius);
+}
+
+.small.company {
+  padding: 0;
+}
+
+.avatarImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatarImage.loading {
+  display: none;
+}
+
+.companyAvatarImage {
+  object-fit: contain;
+  box-sizing: border-box;
+  border-radius: var(--spacing-4);
+}
+
+.fallbackIcon {
+  color: rgba(var(--color-purple-800-rgb), 0.7);
+  font-size: calc(var(--avatar-x-y) * 0.7);
+}
+
+.xlarge .fallbackIcon,
+.xxlarge .fallbackIcon {
+  font-size: calc(var(--avatar-x-y) * 0.8);
+}
+
+.initials {
+  box-sizing: border-box;
+  color: var(--color-purple-800);
+  padding-left: 5px;
+  padding-right: 5px;
+  text-align: center;
+  width: 100%;
+  font-size: var(--typography-heading-3-font-size);
+  font-family: var(--typography-heading-1-font-family);
+  font-weight: var(--typography-heading-1-font-weight);
+  letter-spacing: var(--typography-heading-3-letter-spacing);
+}
+
+.initials.longName::before {
+  content: none;
+}
+
+.initials::before {
+  content: '';
+  display: block;
+  margin-top: -0.001em;
+}
+
+.wrapper .initials {
+  text-decoration: none;
+  speak-as: spell-out;
+
+  /* to override materialize.css global styling in performance-ui,
+  * which sets a border-bottom on abbr tags
+  */
+  border-bottom: none;
+}
+
+.xlarge .initials,
+.xxlarge .initials {
+  font-size: var(--typography-heading-1-font-size);
+  letter-spacing: var(--typography-heading-1-letter-spacing);
+}
+
+.medium .initials {
+  font-size: var(--typography-heading-5-font-size);
+}
+
+.small .initials {
+  font-size: 0.5rem;
+}
+
+.small .initials,
+.medium .initials {
+  margin-bottom: -1px;
+  font-weight: var(--typography-heading-5-font-weight);
+  letter-spacing: var(--typography-heading-5-letter-spacing);
+}
diff --git a/packages/components/src/Avatar/Avatar.module.scss b/packages/components/src/Avatar/Avatar.module.scss
deleted file mode 100644
index b0dba7bbcba..00000000000
--- a/packages/components/src/Avatar/Avatar.module.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/border';
-
-$avatar-sm: 1.25rem;
-$avatar-md: 3rem;
-$avatar-lg: 4.5rem;
-$avatar-xl: 6rem;
-$avatar-xxl: 7.75rem;
-
-/* stylelint-disable no-descending-specificity */
-.wrapper {
-  background: $color-gray-300;
-  border-radius: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-
-  &:not(.small) {
-    box-shadow: $shadow-small-box-shadow;
-    border: 3px solid $color-white;
-  }
-
-  // Themes
-  &.personal {
-    background: $color-orange-100;
-  }
-
-  &.otherUser {
-    background: $color-gray-300;
-  }
-
-  &.company {
-    border: 0;
-    background: $color-white;
-    padding: 6px;
-    border-radius: $border-solid-border-radius;
-  }
-
-  // Sizes
-  &.small {
-    width: $avatar-sm;
-    height: $avatar-sm;
-
-    .initials {
-      margin-bottom: -1px;
-    }
-
-    &.company {
-      padding: 0;
-    }
-  }
-
-  &.medium {
-    width: $avatar-md;
-    height: $avatar-md;
-
-    .initials {
-      margin-bottom: -1px;
-    }
-  }
-
-  &.large {
-    width: $avatar-lg;
-    height: $avatar-lg;
-  }
-
-  &.xlarge {
-    width: $avatar-xl;
-    height: $avatar-xl;
-  }
-
-  &.xxlarge {
-    width: $avatar-xxl;
-    height: $avatar-xxl;
-  }
-
-  & .initials {
-    text-decoration: none;
-    speak-as: spell-out;
-
-    // to override materialize.css global styling in performance-ui,
-    // which sets a border-bottom on abbr tags
-    border-bottom: none;
-  }
-}
-
-.avatarImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-
-  .loading & {
-    display: none;
-  }
-}
-
-.companyAvatarImage {
-  object-fit: contain;
-  box-sizing: border-box;
-  border-radius: 4px;
-}
-
-.fallbackIcon {
-  color: rgba($color-purple-800-rgb, 0.7);
-  font-size: var(--avatar-fallback-icon-size);
-
-  .xxlarge & {
-    --avatar-fallback-icon-size: calc(#{$avatar-xxl} * 0.8);
-  }
-
-  .xlarge & {
-    --avatar-fallback-icon-size: calc(#{$avatar-xl} * 0.8);
-  }
-
-  .large & {
-    --avatar-fallback-icon-size: calc(#{$avatar-lg} * 0.7);
-  }
-
-  .medium & {
-    --avatar-fallback-icon-size: calc(#{$avatar-md} * 0.7);
-  }
-
-  .small & {
-    --avatar-fallback-icon-size: calc(#{$avatar-sm} * 0.7);
-  }
-}
-
-.initials {
-  box-sizing: border-box;
-  color: $color-purple-800;
-  padding-left: 5px;
-  padding-right: 5px;
-  text-align: center;
-  width: 100%;
-  font-size: 22px;
-  font-family: $typography-heading-1-font-family;
-  font-weight: $typography-heading-1-font-weight;
-  letter-spacing: $typography-heading-3-letter-spacing;
-
-  // Whitespace cropping
-  &:not(.longName)::before {
-    content: '';
-    display: block;
-    margin-top: -0.001em;
-  }
-
-  .xlarge &,
-  .xxlarge & {
-    font-size: 34px;
-    letter-spacing: $typography-heading-1-letter-spacing;
-  }
-
-  .medium & {
-    font-size: 16px;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-
-  .small & {
-    font-size: 8px;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-}
-/* stylelint-enable no-descending-specificity */
diff --git a/packages/components/src/Avatar/Avatar.tsx b/packages/components/src/Avatar/Avatar.tsx
index c2fde88555b..e4ff1164d70 100644
--- a/packages/components/src/Avatar/Avatar.tsx
+++ b/packages/components/src/Avatar/Avatar.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { Textfit } from 'react-textfit'
 import { Icon } from '~components/__rc__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Avatar.module.scss'
+import styles from './Avatar.module.css'
 
 export type AvatarSizes = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
 
@@ -153,14 +153,17 @@ export const Avatar = ({
         isCompany && styles.company,
         isPersonal && styles.personal,
         isOtherUser && styles.otherUser,
-        (avatarState === 'loading' || avatarState === 'error') && styles.loading,
       )}
       {...restProps}
     >
       {avatarState !== 'none' && (
         <img
           ref={image}
-          className={classnames(styles.avatarImage, isCompany && styles.companyAvatarImage)}
+          className={classnames(
+            styles.avatarImage,
+            isCompany && styles.companyAvatarImage,
+            (avatarState === 'loading' || avatarState === 'error') && styles.loading,
+          )}
           src={avatarSrc}
           onError={onImageFailure}
           onLoad={onImageSuccess}
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.module.css b/packages/components/src/AvatarGroup/AvatarGroup.module.css
new file mode 100644
index 00000000000..ad00235f951
--- /dev/null
+++ b/packages/components/src/AvatarGroup/AvatarGroup.module.css
@@ -0,0 +1,57 @@
+.AvatarGroup {
+  display: inline-flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.AvatarCounter {
+  direction: ltr;
+  align-items: center;
+  background: var(--color-gray-300);
+  border: 3px solid var(--color-white);
+  border-radius: 100%;
+  box-sizing: border-box;
+  box-shadow: var(--shadow-small-box-shadow);
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  width: var(--avatar-x-y, 1.25rem);
+  height: var(--avatar-x-y, 1.25rem);
+  font-family: var(--typography-heading-5-font-family);
+  font-weight: var(--typography-heading-5-font-weight);
+  letter-spacing: var(--typography-heading-5-letter-spacing);
+}
+
+.AvatarGroupItem + .AvatarGroupItem {
+  margin-inline-start: calc((var(--avatar-x-y)) / -2);
+}
+
+.small {
+  --avatar-x-y: 1.25rem;
+}
+
+.small .AvatarCounter {
+  box-shadow: none;
+  border: none;
+  font-size: 0.5rem;
+}
+
+.medium {
+  --avatar-x-y: 3rem;
+}
+
+.medium .AvatarCounter {
+  font-size: var(--typography-heading-5-font-size);
+}
+
+.large {
+  --avatar-x-y: 4.5rem;
+}
+
+.large .AvatarCounter {
+  font-family: var(--typography-heading-3-font-family);
+  font-size: var(--typography-heading-3-font-size);
+  font-weight: var(--typography-heading-3-font-weight);
+  letter-spacing: var(--typography-heading-3-letter-spacing);
+}
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.module.scss b/packages/components/src/AvatarGroup/AvatarGroup.module.scss
deleted file mode 100644
index e61319a504a..00000000000
--- a/packages/components/src/AvatarGroup/AvatarGroup.module.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/color';
-
-// Vars
-$avatar-sm: 1.25rem;
-$avatar-md: 3rem;
-$avatar-lg: 4.5rem;
-
-@mixin overlap($size) {
-  margin-inline-start: calc(#{$size} / -2);
-}
-
-.AvatarGroup {
-  display: inline-flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.AvatarCounter {
-  direction: ltr;
-  align-items: center;
-  background: $color-gray-300;
-  border: 3px solid $color-white;
-  border-radius: 100%;
-  box-sizing: border-box;
-  box-shadow: $shadow-small-box-shadow;
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.small {
-  .AvatarGroupItem + .AvatarGroupItem {
-    @include overlap($avatar-sm);
-  }
-
-  .AvatarCounter {
-    box-shadow: none;
-    border: none;
-    width: $avatar-sm;
-    height: $avatar-sm;
-    font-family: $typography-heading-5-font-family;
-    font-size: 0.5rem;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-}
-
-.medium {
-  .AvatarGroupItem + .AvatarGroupItem {
-    @include overlap($avatar-md);
-  }
-
-  .AvatarCounter {
-    width: $avatar-md;
-    height: $avatar-md;
-    font-family: $typography-heading-5-font-family;
-    font-size: $typography-heading-5-font-size;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-}
-
-.large {
-  .AvatarGroupItem + .AvatarGroupItem {
-    @include overlap($avatar-lg);
-  }
-
-  .AvatarCounter {
-    width: $avatar-lg;
-    height: $avatar-lg;
-    font-family: $typography-heading-3-font-family;
-    font-size: $typography-heading-3-font-size;
-    font-weight: $typography-heading-3-font-weight;
-    letter-spacing: $typography-heading-3-letter-spacing;
-  }
-}
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.tsx b/packages/components/src/AvatarGroup/AvatarGroup.tsx
index 4c0ffcc0830..38dda7e545e 100644
--- a/packages/components/src/AvatarGroup/AvatarGroup.tsx
+++ b/packages/components/src/AvatarGroup/AvatarGroup.tsx
@@ -2,7 +2,7 @@ import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { Avatar, type CompanyAvatarProps, type GenericAvatarProps } from '~components/Avatar'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './AvatarGroup.module.scss'
+import styles from './AvatarGroup.module.css'
 
 export type AvatarGroupAvatarProps =
   | Omit<GenericAvatarProps, 'size'>
diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
new file mode 100644
index 00000000000..a029f3513f6
--- /dev/null
+++ b/packages/components/src/Badge/Badge.module.css
@@ -0,0 +1,101 @@
+.badge {
+  border-radius: var(--spacing-12);
+  color: var(--color-purple-800);
+  display: inline-block;
+  position: relative;
+  font-family: var(--typography-paragraph-extra-small-font-family);
+  font-size: var(--typography-paragraph-extra-small-font-size);
+  font-weight: var(--typography-paragraph-bold-font-weight);
+  letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
+  line-height: var(--typography-paragraph-extra-small-line-height);
+  padding: 1px var(--spacing-6);
+  min-width: 8px;
+  text-align: center;
+  background-color: var(--badge-background-color, var(--color-gray-300));
+}
+
+.reversed {
+  --badge-background-color: rgba(var(--color-white-rgb), 0.1);
+
+  color: var(--color-white);
+}
+
+.reversed.active {
+  --badge-background-color: var(--color-green-300);
+
+  color: var(--color-purple-800);
+}
+
+.reversed.dark {
+  --badge-background-color: var(--color-purple-700);
+
+  color: var(--color-white);
+}
+
+.large {
+  display: inline-flex;
+  justify-content: center;
+  border-radius: var(--spacing-48);
+  font-size: var(--typography-data-medium-font-size);
+  line-height: var(--typography-data-medium-line-height);
+  letter-spacing: var(--typography-data-medium-letter-spacing);
+  padding: 2px 1.875rem;
+  width: 24px;
+}
+
+.default {
+  color: var(--color-purple-800);
+}
+
+.active {
+  --badge-background-color: var(--color-blue-500);
+
+  color: var(--color-white);
+}
+
+.dark {
+  --badge-background-color: rgba(var(--color-purple-700-rgb), 0.1);
+
+  color: var(--color-purple-800);
+}
+
+.dot {
+  --badge-background-color: var(--color-green-300);
+
+  padding: var(--spacing-6);
+  min-width: unset;
+}
+
+.dot.large {
+  padding: 1.875rem;
+  width: unset;
+}
+
+.animation {
+  display: inherit;
+}
+
+.animation .badge {
+  --badge-duration-timing: (var(--animation-duration-slow) / 2)
+    var(--animation-easing-function-ease-in);
+
+  transition:
+    transform var(--badge-duration-timing),
+    background-color var(--badge-duration-timing);
+  transform-origin: center;
+  transform: scale3d(1, 1, 1);
+}
+
+.animationOn .badge {
+  transform: scale3d(1.35, 1.35, 1.35);
+}
+
+.animationOn .badge.dark {
+  --badge-background-color: rgba(var(--color-purple-700-rgb), 0.2);
+}
+
+.animationOn .badge.active {
+  --badge-background-color: var(--color-blue-500);
+
+  color: var(--color-white);
+}
diff --git a/packages/components/src/Badge/Badge.module.scss b/packages/components/src/Badge/Badge.module.scss
deleted file mode 100644
index c9e5e3f315f..00000000000
--- a/packages/components/src/Badge/Badge.module.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-@import '~@kaizen/design-tokens/sass/animation';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
-
-$dt-color-background-default: $color-gray-300;
-
-$small: $spacing-md;
-
-.badge {
-  border-radius: $spacing-sm;
-  color: $color-purple-800;
-  display: inline-block;
-  position: relative;
-  font-family: $typography-paragraph-extra-small-font-family;
-  font-size: $typography-paragraph-extra-small-font-size;
-  font-weight: $typography-paragraph-bold-font-weight;
-  letter-spacing: $typography-paragraph-extra-small-letter-spacing;
-  line-height: $typography-paragraph-extra-small-line-height;
-  padding: 1px $spacing-xs;
-  min-width: 8px;
-  text-align: center;
-}
-
-.badge.large {
-  display: inline-flex;
-  justify-content: center;
-  border-radius: $spacing-xl;
-  font-size: $typography-data-medium-font-size;
-  line-height: $typography-data-medium-line-height;
-  letter-spacing: $typography-data-medium-letter-spacing;
-  padding: 2px 1.875rem;
-  width: 24px;
-}
-
-.default {
-  background-color: $dt-color-background-default;
-  color: $color-purple-800;
-}
-
-.active {
-  background-color: $color-blue-500;
-  color: $color-white;
-}
-
-.reversed.active {
-  background-color: $color-green-300;
-  color: $color-purple-800;
-}
-
-.dark {
-  background-color: rgba($color-purple-700-rgb, 0.1);
-  color: $color-purple-800;
-}
-
-.dot {
-  background-color: $color-green-300;
-  padding: $spacing-xs;
-  min-width: unset;
-}
-
-.dot.large {
-  background-color: $color-green-300;
-  padding: 1.875rem;
-  width: unset;
-}
-
-.reversed.dot {
-  background-color: $color-green-300;
-}
-
-.reversed.dark {
-  background-color: $color-purple-700;
-  color: $color-white;
-}
-
-.reversed {
-  background-color: rgba($color-white-rgb, 0.1);
-  color: $color-white;
-}
-
-$badge-duration-timing: ($animation-duration-slow / 2) $animation-easing-function-ease-in;
-
-$badge-transition:
-  transform $badge-duration-timing,
-  background-color $badge-duration-timing;
-
-.animation {
-  display: inherit;
-
-  .badge {
-    transition: $badge-transition;
-    transform-origin: center;
-    transform: scale3d(1, 1, 1);
-  }
-
-  &.animationOn .badge {
-    transform: scale3d(1.35, 1.35, 1.35);
-
-    &.dark {
-      background-color: rgba($color-purple-700-rgb, 0.2);
-    }
-
-    &.active {
-      background-color: $color-blue-500;
-      color: $color-white;
-    }
-
-    &.dot {
-      background-color: $color-green-300;
-    }
-  }
-}
diff --git a/packages/components/src/Badge/Badge.tsx b/packages/components/src/Badge/Badge.tsx
index 78d7bfce369..f543e9c3c8c 100644
--- a/packages/components/src/Badge/Badge.tsx
+++ b/packages/components/src/Badge/Badge.tsx
@@ -1,7 +1,7 @@
 import React, { useLayoutEffect, useState, type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Badge.module.scss'
+import styles from './Badge.module.css'
 
 type BadgeCommonProps = {
   children?: string
diff --git a/packages/components/src/Brand/Brand.module.scss b/packages/components/src/Brand/Brand.module.css
similarity index 100%
rename from packages/components/src/Brand/Brand.module.scss
rename to packages/components/src/Brand/Brand.module.css
diff --git a/packages/components/src/Brand/Brand.tsx b/packages/components/src/Brand/Brand.tsx
index c06c8ca4279..e31333cd578 100644
--- a/packages/components/src/Brand/Brand.tsx
+++ b/packages/components/src/Brand/Brand.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { BrandCollectiveIntelligence } from './BrandCollectiveIntelligence'
-import styles from './Brand.module.scss'
+import styles from './Brand.module.css'
 
 type MeaningfulSVG = { 'role': 'img'; 'aria-label': string; 'alt'?: never }
 type DecorativeSVG = { 'role': 'presentation'; 'aria-label'?: never; 'alt'?: never }
diff --git a/packages/components/src/BrandMoment/BrandMoment.module.scss b/packages/components/src/BrandMoment/BrandMoment.module.css
similarity index 52%
rename from packages/components/src/BrandMoment/BrandMoment.module.scss
rename to packages/components/src/BrandMoment/BrandMoment.module.css
index d11b0c69571..2c70a8fb5ca 100644
--- a/packages/components/src/BrandMoment/BrandMoment.module.scss
+++ b/packages/components/src/BrandMoment/BrandMoment.module.css
@@ -1,12 +1,3 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/layout';
-
-$breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and replace this out
-
-// --------------------------------
-// Body
-// --------------------------------
 .body {
   width: 100%;
   min-height: 100vh;
@@ -38,67 +29,58 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
   --brand-moment-background-color: var(--color-red-100);
 }
 
-// --------------------------------
-// Reusable container
-// --------------------------------
 .container {
-  max-width: $layout-content-max-width;
+  max-width: var(--layout-content-max-width);
   margin: 0 auto;
-  padding: 0 $spacing-md;
+  padding: 0 var(--spacing-24);
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .container {
-    padding: 0 $spacing-xxl;
+    padding: 0 var(--spacing-64);
   }
 }
 
-@media (min-width: $breakpoint-xl) {
+@media (width >= 1366px) {
   .container {
-    padding: 0 $spacing-xxxxl;
+    padding: 0 var(--spacing-80);
   }
 }
 
-// --------------------------------
-// Header
-// --------------------------------
 .header {
   inline-size: 100%;
-  margin-block-end: $spacing-md;
+  margin-block-end: var(--spacing-24);
 }
 
-// --------------------------------
-// Main
-// --------------------------------
 .main {
   flex: 1 0 auto;
   display: flex;
   align-items: center;
-  margin-block-end: $spacing-xxl;
+  margin-block-end: var(--spacing-64);
 }
 
 .mainInner {
   display: grid;
   grid-template-columns: 1fr;
-  gap: $spacing-xl $spacing-lg;
+  gap: var(--spacing-48) var(--spacing-32);
   align-items: center;
 }
 
-@media (min-width: $layout-breakpoints-medium) {
+@media (width >= 768px) {
   .mainInner {
-    row-gap: $spacing-xxl;
+    row-gap: var(--spacing-64);
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .mainInner {
     grid-template-columns: 1fr 1fr;
   }
 }
 
-@media (min-width: $breakpoint-xl) {
+@media (width >= 1366px) {
   .mainInner {
-    column-gap: $spacing-xxxxl;
+    column-gap: var(--spacing-80);
   }
 }
 
@@ -124,33 +106,33 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
 }
 
 .subtitle {
-  margin-bottom: $spacing-12;
+  margin-bottom: var(--spacing-12);
 }
 
 .title {
-  margin-bottom: $spacing-lg;
+  margin-bottom: var(--spacing-32);
 }
 
 .textBody {
-  margin-bottom: $spacing-lg;
+  margin-bottom: var(--spacing-32);
 }
 
 .secondaryAction {
-  margin-block-start: $spacing-sm;
+  margin-block-start: var(--spacing-12);
 }
 
-@media (min-width: $layout-breakpoints-medium) {
+@media (width >= 768px) {
   .actions {
     display: flex;
   }
 
   .secondaryAction {
     margin-block-start: 0;
-    margin-inline-start: $spacing-sm;
+    margin-inline-start: var(--spacing-12);
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .left {
     justify-content: flex-end;
   }
@@ -160,9 +142,6 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
   }
 }
 
-// --------------------------------
-// Footer
-// --------------------------------
 .footer {
   flex: 0 0 auto;
 }
@@ -170,10 +149,10 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
 .footerInner {
   display: flex;
   flex-direction: column;
-  border-block-start: 1px solid $color-purple-800;
-  border-inline-start: 1px solid $color-purple-800;
-  padding: $spacing-sm $spacing-md;
-  margin-block-end: $spacing-lg;
+  border-block-start: 1px solid var(--color-purple-800);
+  border-inline-start: 1px solid var(--color-purple-800);
+  padding: var(--spacing-12) var(--spacing-24);
+  margin-block-end: var(--spacing-32);
 }
 
 .poweredByContainer {
@@ -185,18 +164,18 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
 .footerTextContainer {
   flex: 1 1 auto;
   order: 1;
-  margin-block-end: $spacing-md;
+  margin-block-end: var(--spacing-24);
 }
 
 .poweredByLogo {
-  margin-inline-start: $spacing-xs;
+  margin-inline-start: var(--spacing-6);
 
   > img {
     max-width: 133px;
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .footerInner {
     flex-direction: row;
     align-items: center;
@@ -205,7 +184,7 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
   .footerTextContainer {
     order: initial;
     margin-block-end: 0;
-    margin-inline-start: $spacing-md;
+    margin-inline-start: var(--spacing-24);
   }
 
   .poweredByContainer {
diff --git a/packages/components/src/BrandMoment/BrandMoment.tsx b/packages/components/src/BrandMoment/BrandMoment.tsx
index cc2be77d6f9..76d7d2455f0 100644
--- a/packages/components/src/BrandMoment/BrandMoment.tsx
+++ b/packages/components/src/BrandMoment/BrandMoment.tsx
@@ -7,7 +7,7 @@ import { Text } from '~components/Text'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { useMediaQueries } from '~components/utils/useMediaQueries'
-import styles from './BrandMoment.module.scss'
+import styles from './BrandMoment.module.css'
 
 type DeprecatedMoodProps = {
   /** @deprecated Use `variant` instead */
diff --git a/packages/components/src/ButtonGroup/ButtonGroup.module.css b/packages/components/src/ButtonGroup/ButtonGroup.module.css
new file mode 100644
index 00000000000..bf3dcea3d49
--- /dev/null
+++ b/packages/components/src/ButtonGroup/ButtonGroup.module.css
@@ -0,0 +1,48 @@
+.buttonGroup {
+  --focus-ring-offset: 1px;
+  --focus-ring-offset-inner: calc(-1 * var(--focus-ring-offset));
+
+  display: inline-flex;
+}
+
+.child {
+  border-radius: 0;
+}
+
+.child:focus-visible::after {
+  border-radius: 0;
+}
+
+.child:not(.firstChild) {
+  border-inline-start: 1px solid var(--color-blue-300);
+}
+
+.child:not(.firstChild, .lastChild) {
+  &:focus-visible {
+    &::after {
+      inset-inline: var(--focus-ring-offset-inner);
+    }
+  }
+}
+
+.child.firstChild {
+  border-start-start-radius: var(--border-focus-ring-border-radius);
+  border-end-start-radius: var(--border-focus-ring-border-radius);
+}
+
+.child.firstChild:focus-visible::after {
+  border-start-start-radius: var(--border-focus-ring-border-radius);
+  border-end-start-radius: var(--border-focus-ring-border-radius);
+  inset-inline-end: var(--focus-ring-offset-inner);
+}
+
+.child.lastChild {
+  border-start-end-radius: var(--border-focus-ring-border-radius);
+  border-end-end-radius: var(--border-focus-ring-border-radius);
+}
+
+.child.lastChild:focus-visible::after {
+  border-start-end-radius: var(--border-focus-ring-border-radius);
+  border-end-end-radius: var(--border-focus-ring-border-radius);
+  inset-inline-start: var(--focus-ring-offset-inner);
+}
diff --git a/packages/components/src/ButtonGroup/ButtonGroup.tsx b/packages/components/src/ButtonGroup/ButtonGroup.tsx
index 5e4e21802df..3945288f50e 100644
--- a/packages/components/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/components/src/ButtonGroup/ButtonGroup.tsx
@@ -6,7 +6,7 @@ import {
 } from '~components/Filter/FilterButton/subcomponents/FilterButtonBase'
 import { Tooltip, type TooltipProps } from '~components/Tooltip'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './ButtonGroup.module.scss'
+import styles from './ButtonGroup.module.css'
 
 const isFilterButton = (node: React.ReactNode): node is React.ReactElement<FilterButtonBaseProps> =>
   React.isValidElement(node) && node.type === FilterButtonBase