diff --git a/apps/docs/docs/learn/06-recipes/02-variants.mdx b/apps/docs/docs/learn/06-recipes/02-variants.mdx
index e84f6edf..677cb92b 100644
--- a/apps/docs/docs/learn/06-recipes/02-variants.mdx
+++ b/apps/docs/docs/learn/06-recipes/02-variants.mdx
@@ -21,6 +21,12 @@ Here’s how you can create a button component with different visual styles base
 import * as stylex from '@stylexjs/stylex';
 
 const styles = stylex.create({
+  base: {
+    appearance: 'none',
+    borderWidth: 0,
+  },
+});
+const variants = stylex.create({
   primary: {
     backgroundColor: {
       default: 'blue',
@@ -36,9 +42,8 @@ const styles = stylex.create({
     color: 'white',
   },
 });
-
 function Button({ variant = 'primary', ...props }) {
-  return <button {...props} {...stylex.props(styles[variant], props.style)} />;
+  return <button {...props} {...stylex.props(styles.base, variants[variant], props.style)} />;
 }
 
 // Usage
diff --git a/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx b/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx
index 294b4823..7204a3f1 100644
--- a/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx	
+++ b/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx	
@@ -42,7 +42,7 @@ const styles = stylex.create({
     },
   },
   child: {
-    color: `var(${vars.childColor})`,
+    color: `vars.childColor`,
   },
 });