diff --git a/src/app/components/message/attachment/Attachment.css.ts b/src/app/components/message/attachment/Attachment.css.ts
index 4c417611..486ef763 100644
--- a/src/app/components/message/attachment/Attachment.css.ts
+++ b/src/app/components/message/attachment/Attachment.css.ts
@@ -14,7 +14,7 @@ export const Attachment = recipe({
   variants: {
     outlined: {
       true: {
-        boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
+        boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.Surface.Container}`,
       },
     },
   },
diff --git a/src/app/components/message/attachment/StreamMedia.css.ts b/src/app/components/message/attachment/StreamMedia.css.ts
index cd46cf7f..e0a48daf 100644
--- a/src/app/components/message/attachment/StreamMedia.css.ts
+++ b/src/app/components/message/attachment/StreamMedia.css.ts
@@ -26,7 +26,7 @@ export const StreamMediaBubble = recipe({
         content: '""',
         position: 'absolute',
         inset: 0,
-        border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
+        border: `1.2px solid ${color.Surface.Container}`,
         borderRadius: 'inherit',
         pointerEvents: 'none',
         zIndex: 1,
@@ -96,7 +96,7 @@ export const StreamMediaCaption = style({
   marginTop: toRem(4),
   backgroundColor: color.SurfaceVariant.Container,
   color: color.SurfaceVariant.OnContainer,
-  border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
+  border: `1px solid ${color.Surface.Container}`,
   borderRadius: StreamMediaCornerRound,
   paddingLeft: config.space.S300,
   paddingRight: config.space.S300,
diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index 5a301542..9f422639 100644
--- a/src/app/components/message/layout/layout.css.ts
+++ b/src/app/components/message/layout/layout.css.ts
@@ -283,7 +283,7 @@ export const StreamRail = style({
   left: '50%',
   transform: 'translateX(-50%)',
   width: StreamRailLineWidth,
-  background: color.Surface.ContainerLine,
+  background: color.Surface.Container,
   pointerEvents: 'none',
   zIndex: 0,
 });
@@ -325,8 +325,8 @@ export const StreamDotHalo = style({
   width: StreamDotSize,
   height: StreamDotSize,
   borderRadius: '50%',
-  background: color.Surface.Container,
-  boxShadow: `0 0 0 3px ${color.Surface.Container}`,
+  background: color.SurfaceVariant.Container,
+  boxShadow: `0 0 0 3px ${color.SurfaceVariant.Container}`,
   pointerEvents: 'none',
   position: 'relative',
   zIndex: 2,
@@ -413,9 +413,9 @@ export const StreamThreadSummary = style({
 
 export const StreamBubble = recipe({
   base: {
-    backgroundColor: color.SurfaceVariant.Container,
+    backgroundColor: color.Surface.Container,
     color: color.SurfaceVariant.OnContainer,
-    border: `${StreamBubbleBorderWidth} solid ${color.SurfaceVariant.ContainerLine}`,
+    border: `${StreamBubbleBorderWidth} solid ${color.Surface.ContainerLine}`,
     paddingTop: config.space.S200,
     paddingBottom: config.space.S200,
     minWidth: 0,
@@ -613,7 +613,7 @@ export const StreamDayDot = style({
   height: StreamDayDotSize,
   borderRadius: '50%',
   background: color.Primary.MainHover,
-  boxShadow: `0 0 0 4px ${color.Surface.Container}`,
+  boxShadow: `0 0 0 4px ${color.SurfaceVariant.Container}`,
   pointerEvents: 'none',
   zIndex: 2,
 });
@@ -631,7 +631,7 @@ export const StreamDayLineWrap = style({
 export const StreamDayLineSegment = style({
   flex: 1,
   height: 1,
-  background: color.Surface.ContainerLine,
+  background: color.Surface.Container,
   minWidth: toRem(8),
 });
 
diff --git a/src/app/components/url-preview/UrlPreview.css.tsx b/src/app/components/url-preview/UrlPreview.css.tsx
index cd0b2528..1656dec7 100644
--- a/src/app/components/url-preview/UrlPreview.css.tsx
+++ b/src/app/components/url-preview/UrlPreview.css.tsx
@@ -8,7 +8,7 @@ export const UrlPreview = style([
     minHeight: toRem(102),
     backgroundColor: color.SurfaceVariant.Container,
     color: color.SurfaceVariant.OnContainer,
-    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+    border: `${config.borderWidth.B300} solid ${color.Surface.Container}`,
     borderRadius: config.radii.R300,
     overflow: 'hidden',
   },
diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index db32715a..b2fc4e63 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import { Box, Text, config } from 'folds';
+import { Box, Text, color, config } from 'folds';
 import { EventType } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
 import { isKeyHotkey } from 'is-hotkey';
@@ -103,7 +103,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
   );
 
   return (
-    <Page ref={roomViewRef}>
+    <Page ref={roomViewRef} style={{ backgroundColor: color.SurfaceVariant.Container }}>
       <Box grow="Yes" direction="Column">
         <RoomTimeline
           key={roomId}
diff --git a/src/app/features/room/RoomViewHeaderDm.tsx b/src/app/features/room/RoomViewHeaderDm.tsx
index 20979211..1588d81a 100644
--- a/src/app/features/room/RoomViewHeaderDm.tsx
+++ b/src/app/features/room/RoomViewHeaderDm.tsx
@@ -632,7 +632,7 @@ export function RoomViewHeaderDm({ callView }: { callView?: boolean }) {
 
   return (
     <PageHeader
-      className={`${ContainerColor({ variant: 'Surface' })} ${css.HeaderShell}`}
+      className={`${ContainerColor({ variant: 'SurfaceVariant' })} ${css.HeaderShell}`}
       balance={isMobile}
     >
       {/* `gap="200"` (= S200 = 8px) keeps the avatar's right side flush with
diff --git a/src/app/features/room/RoomViewTyping.css.ts b/src/app/features/room/RoomViewTyping.css.ts
index 5c90a178..7c01249d 100644
--- a/src/app/features/room/RoomViewTyping.css.ts
+++ b/src/app/features/room/RoomViewTyping.css.ts
@@ -15,7 +15,7 @@ export const RoomViewTyping = style([
   {
     padding: `0 ${config.space.S500}`,
     width: '100%',
-    backgroundColor: color.Surface.Container,
+    backgroundColor: color.SurfaceVariant.Container,
     color: color.Surface.OnContainer,
     position: 'absolute',
     bottom: 0,