diff --git a/playground/src/app.css b/playground/src/app.css
index 80ba942..04b322b 100644
--- a/playground/src/app.css
+++ b/playground/src/app.css
@@ -1,3 +1,12 @@
 *,:before,:after { box-sizing: border-box; }
-html,body { margin: 0; padding: 0; min-height: 100vh; }
+
+/* El root debe ocupar viewport completo para que fillMaxSize funcione */
+html, body, #app {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 body { font-family: Inter, system-ui, sans-serif; }
diff --git a/playground/src/screens/BoxPlayground.svelte b/playground/src/screens/BoxPlayground.svelte
index f31e39b..97f7d60 100644
--- a/playground/src/screens/BoxPlayground.svelte
+++ b/playground/src/screens/BoxPlayground.svelte
@@ -72,8 +72,8 @@
                     <Surface modifier={Modifier.size(110).background(ColorScheme.Secondary).clip({ toCssBorderRadius: () => '16px' }).padding(12)}>
                         <Text color="onSecondary" textStyle="labelSmall">Medio</Text>
                     </Surface>
-                    <Surface modifier={Modifier.size(60).background(ColorScheme.Tertiary).clip({ toCssBorderRadius: () => '16px' }).padding(8)}>
-                         <Text color="onTertiary" textStyle="labelSmall">Top</Text>
+                    <Surface modifier={Modifier.size(60).background(ColorScheme.Outline).clip({ toCssBorderRadius: () => '16px' }).padding(8)}>
+                         <Text color="onSurface" textStyle="labelSmall">Top</Text>
                     </Surface>
                 </Box>
             </Surface>
diff --git a/playground/src/screens/ColumnPlayground.svelte b/playground/src/screens/ColumnPlayground.svelte
index 9a9b05b..df1b00e 100644
--- a/playground/src/screens/ColumnPlayground.svelte
+++ b/playground/src/screens/ColumnPlayground.svelte
@@ -68,7 +68,7 @@
                 >
                     <Surface modifier={Modifier.size(80).background(ColorScheme.Primary).clip({ toCssBorderRadius: () => '12px' })} />
                     <Surface modifier={Modifier.size(60).background(ColorScheme.Secondary).clip({ toCssBorderRadius: () => '12px' })} />
-                    <Surface modifier={Modifier.size(100).background(ColorScheme.Tertiary).clip({ toCssBorderRadius: () => '12px' })} />
+                    <Surface modifier={Modifier.size(100).background(ColorScheme.Outline).clip({ toCssBorderRadius: () => '12px' })} />
                 </Column>
             </Surface>
         </Column>