diff --git a/index.html b/index.html
index a0003f9..65df412 100644
--- a/index.html
+++ b/index.html
@@ -234,7 +234,7 @@ <h6>Heading 6</h6>
 				<h4>Heading 5</h4>
 				<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 				<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
-					<rect width="800" height="450" fill="var(--system-gray-surface)"></rect>
+					<rect width="800" height="450" fill="var(--system-surface-color)"></rect>
 					<text
 						x="50%"
 						y="50%"
@@ -242,7 +242,7 @@ <h4>Heading 5</h4>
 						text-anchor="middle"
 						font-family="system-ui"
 						font-size="72px"
-						fill="var(--system-gray-type)"
+						fill="var(--system-gray-text)"
 					>
 						Aspect Ratio 16:9
 					</text>
@@ -256,7 +256,7 @@ <h4>Heading 5</h4>
 			<hr />
 			<figure>
 				<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
-					<rect width="800" height="450" fill="var(--system-gray-surface)"></rect>
+					<rect width="800" height="450" fill="var(--system-surface-color)"></rect>
 					<text
 						x="50%"
 						y="50%"
@@ -264,7 +264,7 @@ <h4>Heading 5</h4>
 						text-anchor="middle"
 						font-family="system-ui"
 						font-size="72px"
-						fill="var(--system-gray-type)"
+						fill="var(--system-gray-text)"
 					>
 						Aspect Ratio 16:9
 					</text>