diff --git a/formulus-formplayer/package.json b/formulus-formplayer/package.json
index 810f52f75..cbe321cfa 100644
--- a/formulus-formplayer/package.json
+++ b/formulus-formplayer/package.json
@@ -13,6 +13,7 @@
     "@mui/icons-material": "^6.4.8",
     "@mui/material": "^6.4.8",
     "@mui/x-date-pickers": "^7.28.0",
+    "@ode/tokens": "file:../packages/tokens",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
diff --git a/formulus-formplayer/src/App.tsx b/formulus-formplayer/src/App.tsx
index e81813b99..79216069e 100644
--- a/formulus-formplayer/src/App.tsx
+++ b/formulus-formplayer/src/App.tsx
@@ -3,7 +3,8 @@ import "./App.css";
 import { JsonForms } from "@jsonforms/react";
 import { materialRenderers, materialCells } from "@jsonforms/material-renderers";
 import { JsonSchema7 } from "@jsonforms/core";
-import { Alert, Snackbar, CircularProgress, Box, Typography } from '@mui/material';
+import { Alert, Snackbar, CircularProgress, Box, Typography, ThemeProvider } from '@mui/material';
+import { theme } from './theme';
 import Ajv from 'ajv';
 import addErrors from 'ajv-errors';
 import addFormats from 'ajv-formats';
@@ -557,15 +558,16 @@ function App() {
   });
 
   return (
-    <FormContext.Provider value={{ formInitData }}>
-      <div
-        className="App"
-        style={{
-          display: 'flex',
-          height: '100dvh', // Use dynamic viewport height for mobile keyboard support
-          width: '100%'
-        }}
-      >
+    <ThemeProvider theme={theme}>
+      <FormContext.Provider value={{ formInitData }}>
+        <div
+          className="App"
+          style={{
+            display: 'flex',
+            height: '100dvh', // Use dynamic viewport height for mobile keyboard support
+            width: '100%'
+          }}
+        >
         {/* Main app content - 60% width in development mode */}
         <div
           style={{
@@ -641,7 +643,8 @@ function App() {
           </div>
         )}
       </div>
-    </FormContext.Provider>
+      </FormContext.Provider>
+    </ThemeProvider>
   );
 }
 
diff --git a/formulus-formplayer/src/FormLayout.tsx b/formulus-formplayer/src/FormLayout.tsx
index 6eefdba9b..66933ea0f 100644
--- a/formulus-formplayer/src/FormLayout.tsx
+++ b/formulus-formplayer/src/FormLayout.tsx
@@ -145,14 +145,14 @@ const FormLayout: React.FC<FormLayoutProps> = ({
           >
             {previousButton && (
               <Button
-                variant="contained"
+                variant="outlined"
                 onClick={previousButton.onClick}
                 disabled={previousButton.disabled}
                 fullWidth={false}
                 sx={{
-                  // Ensure buttons are touch-friendly
-                  minHeight: { xs: '44px', sm: '36px' }, // iOS recommended touch target
-                  fontSize: { xs: '1rem', sm: '0.875rem' },
+                  // Ensure buttons are touch-friendly (Material Design minimum: 48dp)
+                  minHeight: { xs: '48px', sm: '48px' },
+                  fontSize: { xs: '0.875rem', sm: '0.875rem' },
                 }}
               >
                 {previousButton.label || 'Previous'}
@@ -165,9 +165,9 @@ const FormLayout: React.FC<FormLayoutProps> = ({
                 disabled={nextButton.disabled}
                 fullWidth={false}
                 sx={{
-                  // Ensure buttons are touch-friendly
-                  minHeight: { xs: '44px', sm: '36px' }, // iOS recommended touch target
-                  fontSize: { xs: '1rem', sm: '0.875rem' },
+                  // Ensure buttons are touch-friendly (Material Design minimum: 48dp)
+                  minHeight: { xs: '48px', sm: '48px' },
+                  fontSize: { xs: '0.875rem', sm: '0.875rem' },
                 }}
               >
                 {nextButton.label || 'Next'}
diff --git a/formulus-formplayer/src/PhotoQuestionRenderer.tsx b/formulus-formplayer/src/PhotoQuestionRenderer.tsx
index c34798401..733012c17 100644
--- a/formulus-formplayer/src/PhotoQuestionRenderer.tsx
+++ b/formulus-formplayer/src/PhotoQuestionRenderer.tsx
@@ -240,13 +240,14 @@ const PhotoQuestionRenderer: React.FC<PhotoQuestionProps> = ({
         </Card>
       ) : (
         <Box sx={{ 
-          border: '2px dashed #ccc', 
+          border: '2px dashed', 
+          borderColor: 'divider',
           borderRadius: 2, 
           p: 3, 
           textAlign: 'center',
-          backgroundColor: '#fafafa'
+          backgroundColor: 'grey.50'
         }}>
-          <PhotoCamera sx={{ fontSize: 48, color: '#ccc', mb: 2 }} />
+          <PhotoCamera sx={{ fontSize: 48, color: 'text.disabled', mb: 2 }} />
           <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
             {currentPhotoData?.filename ? 'Photo taken' : 'No photo taken yet'}
           </Typography>
diff --git a/formulus-formplayer/src/QrcodeQuestionRenderer.tsx b/formulus-formplayer/src/QrcodeQuestionRenderer.tsx
index 2dd12b337..a4587afc6 100644
--- a/formulus-formplayer/src/QrcodeQuestionRenderer.tsx
+++ b/formulus-formplayer/src/QrcodeQuestionRenderer.tsx
@@ -220,13 +220,14 @@ const QrcodeQuestionRenderer: React.FC<QrcodeQuestionProps> = ({
         </Card>
       ) : (
         <Box sx={{ 
-          border: '2px dashed #ccc', 
+          border: '2px dashed', 
+          borderColor: 'divider',
           borderRadius: 2, 
           p: 3, 
           textAlign: 'center',
-          backgroundColor: '#fafafa'
+          backgroundColor: 'grey.50'
         }}>
-          <QrCodeScanner sx={{ fontSize: 48, color: '#ccc', mb: 2 }} />
+          <QrCodeScanner sx={{ fontSize: 48, color: 'text.disabled', mb: 2 }} />
           <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
             No QR code scanned yet
           </Typography>
@@ -255,7 +256,6 @@ const QrcodeQuestionRenderer: React.FC<QrcodeQuestionProps> = ({
               disabled={!enabled}
               variant="outlined"
               placeholder="Enter QR code value manually..."
-              size="small"
             />
           </Box>
         </Box>
diff --git a/formulus-formplayer/src/SignatureQuestionRenderer.tsx b/formulus-formplayer/src/SignatureQuestionRenderer.tsx
index 89579e831..dc3539773 100644
--- a/formulus-formplayer/src/SignatureQuestionRenderer.tsx
+++ b/formulus-formplayer/src/SignatureQuestionRenderer.tsx
@@ -259,13 +259,14 @@ const SignatureQuestionRenderer: React.FC<ControlProps> = ({
             Draw your signature below:
           </Typography>
           <Box sx={{ 
-            border: '2px dashed #ccc', 
+            border: '2px dashed', 
+            borderColor: 'divider',
             borderRadius: 1, 
             p: 1, 
             mb: 2,
             display: 'flex',
             justifyContent: 'center',
-            backgroundColor: '#fafafa'
+            backgroundColor: 'grey.50'
           }}>
             <canvas
               ref={canvasRef}
diff --git a/formulus-formplayer/src/theme.ts b/formulus-formplayer/src/theme.ts
new file mode 100644
index 000000000..bae9c85f3
--- /dev/null
+++ b/formulus-formplayer/src/theme.ts
@@ -0,0 +1,464 @@
+import { createTheme, ThemeOptions } from '@mui/material/styles';
+import { tokens } from './tokens-adapter';
+
+/**
+ * Material Design 3 Theme Configuration with ODE Design Tokens
+ * 
+ * This theme implements modern Android / Material Design 3 guidelines
+ * while using ODE design tokens for brand consistency:
+ * - ODE brand colors (green primary #4F7F4E, gold secondary #E9B85B)
+ * - Rounded corners (12dp for buttons, 4dp for text fields)
+ * - Proper elevation and shadows from tokens
+ * - Typography from ODE tokens
+ * - Better focus states
+ * - Touch targets ≥ 48dp (from tokens)
+ * - Consistent spacing from tokens
+ */
+
+// Helper to parse pixel values
+const parsePx = (value: string): number => {
+  return parseInt(value.replace('px', ''), 10);
+};
+
+const themeOptions: ThemeOptions = {
+  palette: {
+    mode: 'light',
+    primary: {
+      main: tokens.color.brand.primary[500], // #4F7F4E - ODE Primary Green
+      light: tokens.color.brand.primary[400],
+      dark: tokens.color.brand.primary[600],
+      contrastText: tokens.color.neutral.white,
+    },
+    secondary: {
+      main: tokens.color.brand.secondary[500], // #E9B85B - ODE Secondary Gold
+      light: tokens.color.brand.secondary[400],
+      dark: tokens.color.brand.secondary[600],
+      contrastText: tokens.color.neutral.white,
+    },
+    error: {
+      main: tokens.color.semantic.error[500],
+      light: tokens.color.semantic.error[50],
+      dark: tokens.color.semantic.error[600],
+      contrastText: tokens.color.neutral.white,
+    },
+    warning: {
+      main: tokens.color.semantic.warning[500],
+      light: tokens.color.semantic.warning[50],
+      dark: tokens.color.semantic.warning[600],
+      contrastText: tokens.color.neutral.white,
+    },
+    info: {
+      main: tokens.color.semantic.info[500],
+      light: tokens.color.semantic.info[50],
+      dark: tokens.color.semantic.info[600],
+      contrastText: tokens.color.neutral.white,
+    },
+    success: {
+      main: tokens.color.semantic.success[500],
+      light: tokens.color.semantic.success[50],
+      dark: tokens.color.semantic.success[600],
+      contrastText: tokens.color.neutral.white,
+    },
+    background: {
+      default: tokens.color.neutral[50], // #FAFAFA
+      paper: tokens.color.neutral.white,
+    },
+    text: {
+      primary: tokens.color.neutral[900], // #212121
+      secondary: tokens.color.neutral[600], // #757575
+      disabled: tokens.color.neutral[400], // #BDBDBD
+    },
+    divider: tokens.color.neutral[200], // #EEEEEE
+    grey: {
+      50: tokens.color.neutral[50],
+      100: tokens.color.neutral[100],
+      200: tokens.color.neutral[200],
+      300: tokens.color.neutral[300],
+      400: tokens.color.neutral[400],
+      500: tokens.color.neutral[500],
+      600: tokens.color.neutral[600],
+      700: tokens.color.neutral[700],
+      800: tokens.color.neutral[800],
+      900: tokens.color.neutral[900],
+    },
+  },
+  typography: {
+    fontFamily: tokens.typography.fontFamily.sans,
+    fontSize: parsePx(tokens.typography.fontSize.base),
+    h1: {
+      fontSize: parsePx(tokens.typography.fontSize['5xl']),
+      fontWeight: tokens.typography.fontWeight.regular,
+      lineHeight: parseFloat(tokens.typography.lineHeight.tight),
+      letterSpacing: tokens.typography.letterSpacing.tight,
+    },
+    h2: {
+      fontSize: parsePx(tokens.typography.fontSize['4xl']),
+      fontWeight: tokens.typography.fontWeight.regular,
+      lineHeight: parseFloat(tokens.typography.lineHeight.tight),
+      letterSpacing: tokens.typography.letterSpacing.tight,
+    },
+    h3: {
+      fontSize: parsePx(tokens.typography.fontSize['3xl']),
+      fontWeight: tokens.typography.fontWeight.regular,
+      lineHeight: parseFloat(tokens.typography.lineHeight.tight),
+    },
+    h4: {
+      fontSize: parsePx(tokens.typography.fontSize['2xl']),
+      fontWeight: tokens.typography.fontWeight.regular,
+      lineHeight: parseFloat(tokens.typography.lineHeight.tight),
+    },
+    h5: {
+      fontSize: parsePx(tokens.typography.fontSize.xl),
+      fontWeight: tokens.typography.fontWeight.medium,
+      lineHeight: parseFloat(tokens.typography.lineHeight.tight),
+    },
+    h6: {
+      fontSize: parsePx(tokens.typography.fontSize.base),
+      fontWeight: tokens.typography.fontWeight.medium,
+      lineHeight: parseFloat(tokens.typography.lineHeight.tight),
+    },
+    body1: {
+      fontSize: parsePx(tokens.typography.fontSize.base),
+      fontWeight: tokens.typography.fontWeight.regular,
+      lineHeight: parseFloat(tokens.typography.lineHeight.normal),
+      letterSpacing: tokens.typography.letterSpacing.normal,
+    },
+    body2: {
+      fontSize: parsePx(tokens.typography.fontSize.sm),
+      fontWeight: tokens.typography.fontWeight.regular,
+      lineHeight: parseFloat(tokens.typography.lineHeight.normal),
+      letterSpacing: tokens.typography.letterSpacing.normal,
+    },
+    button: {
+      fontSize: parsePx(tokens.typography.fontSize.sm),
+      fontWeight: tokens.typography.fontWeight.medium,
+      lineHeight: 1.75,
+      letterSpacing: tokens.typography.letterSpacing.wider,
+      textTransform: 'none', // Material Design 3 uses lowercase buttons
+    },
+  },
+  spacing: parsePx(tokens.spacing[1]), // Base spacing unit (4px)
+  shape: {
+    borderRadius: parsePx(tokens.border.radius.lg), // 12px - Material Design 3 default
+  },
+  components: {
+    // Button styling - Material Design 3 with ODE tokens
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: tokens.border.radius.full, // Fully rounded buttons (pill shape)
+          padding: `${parsePx(tokens.spacing[3])}px ${parsePx(tokens.spacing[6])}px`, // 12px 24px
+          minHeight: `${tokens.touchTarget.comfortable}px`, // 48px - from tokens
+          fontSize: parsePx(tokens.typography.fontSize.sm),
+          fontWeight: tokens.typography.fontWeight.medium,
+          textTransform: 'none',
+          boxShadow: 'none',
+          '&:hover': {
+            boxShadow: tokens.shadow.sm,
+          },
+          '&:active': {
+            boxShadow: tokens.shadow.md,
+          },
+          '&:disabled': {
+            opacity: 0.38,
+            backgroundColor: tokens.color.neutral[300],
+            color: tokens.color.neutral[500],
+          },
+        },
+        contained: {
+          boxShadow: tokens.shadow.sm,
+          '&:hover': {
+            boxShadow: tokens.shadow.md,
+          },
+        },
+        outlined: {
+          borderWidth: parsePx(tokens.border.width.thin),
+          borderStyle: 'solid',
+          '&:hover': {
+            borderWidth: parsePx(tokens.border.width.thin),
+          },
+        },
+        text: {
+          '&:hover': {
+            backgroundColor: `${tokens.color.brand.primary[500]}14`, // 8% opacity
+          },
+        },
+        sizeSmall: {
+          minHeight: `${tokens.touchTarget.comfortable}px`, // Still maintain 48dp for accessibility
+          padding: `${parsePx(tokens.spacing[3])}px ${parsePx(tokens.spacing[4])}px`,
+          fontSize: parsePx(tokens.typography.fontSize.sm),
+        },
+        sizeLarge: {
+          minHeight: `${tokens.touchTarget.large}px`, // 56px
+          padding: `${parsePx(tokens.spacing[4])}px ${parsePx(tokens.spacing[8])}px`,
+          fontSize: parsePx(tokens.typography.fontSize.base),
+        },
+      },
+    },
+    // TextField / Input styling - Material Design 3 with ODE tokens
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            borderRadius: parsePx(tokens.border.radius.sm), // 4px - Material Design 3 text field
+            backgroundColor: 'transparent',
+            '& fieldset': {
+              borderColor: tokens.color.neutral[400],
+              borderWidth: parsePx(tokens.border.width.thin),
+            },
+            '&:hover fieldset': {
+              borderColor: tokens.color.neutral[900],
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: tokens.color.brand.primary[500],
+              borderWidth: parsePx(tokens.border.width.medium), // 2px on focus
+            },
+            '&.Mui-error fieldset': {
+              borderColor: tokens.color.semantic.error[500],
+            },
+            '&.Mui-disabled': {
+              backgroundColor: tokens.color.neutral[100],
+              '& fieldset': {
+                borderColor: tokens.color.neutral[300],
+              },
+            },
+          },
+          '& .MuiInputLabel-root': {
+            color: tokens.color.neutral[600],
+            '&.Mui-focused': {
+              color: tokens.color.brand.primary[500],
+            },
+            '&.Mui-error': {
+              color: tokens.color.semantic.error[500],
+            },
+          },
+          '& .MuiInputBase-input': {
+            padding: `${parsePx(tokens.spacing[4])}px`,
+            fontSize: parsePx(tokens.typography.fontSize.base),
+            lineHeight: parseFloat(tokens.typography.lineHeight.normal),
+            minHeight: `${tokens.touchTarget.large}px`, // 56px - Minimum touch target
+            '&::placeholder': {
+              color: tokens.color.neutral[400],
+              opacity: 1,
+            },
+          },
+          '& .MuiInputBase-inputMultiline': {
+            padding: parsePx(tokens.spacing[4]),
+            minHeight: `${tokens.touchTarget.large}px`,
+          },
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: parsePx(tokens.border.radius.sm),
+          '& fieldset': {
+            borderColor: tokens.color.neutral[400],
+            borderWidth: parsePx(tokens.border.width.thin),
+          },
+          '&:hover fieldset': {
+            borderColor: tokens.color.neutral[900],
+          },
+          '&.Mui-focused fieldset': {
+            borderColor: tokens.color.brand.primary[500],
+            borderWidth: parsePx(tokens.border.width.medium),
+          },
+          '&.Mui-error fieldset': {
+            borderColor: tokens.color.semantic.error[500],
+          },
+        },
+        input: {
+          padding: parsePx(tokens.spacing[4]),
+          fontSize: parsePx(tokens.typography.fontSize.base),
+          lineHeight: parseFloat(tokens.typography.lineHeight.normal),
+          minHeight: `${tokens.touchTarget.large}px`,
+        },
+      },
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          fontSize: parsePx(tokens.typography.fontSize.base),
+          '&.Mui-focused': {
+            '& .MuiOutlinedInput-notchedOutline': {
+              borderColor: tokens.color.brand.primary[500],
+              borderWidth: parsePx(tokens.border.width.medium),
+            },
+          },
+        },
+        input: {
+          '&::placeholder': {
+            color: tokens.color.neutral[400],
+            opacity: 1,
+          },
+        },
+      },
+    },
+    // FormControlLabel styling
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: {
+          marginLeft: 0,
+          marginRight: 0,
+        },
+        label: {
+          fontSize: parsePx(tokens.typography.fontSize.base),
+          '&.Mui-disabled': {
+            color: tokens.color.neutral[400],
+          },
+        },
+      },
+    },
+    // Checkbox styling
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          padding: parsePx(tokens.spacing[3]),
+          color: tokens.color.neutral[400],
+          '&.Mui-checked': {
+            color: tokens.color.brand.primary[500],
+          },
+          '&.Mui-disabled': {
+            color: tokens.color.neutral[300],
+          },
+        },
+      },
+    },
+    // Radio styling
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          padding: parsePx(tokens.spacing[3]),
+          color: tokens.color.neutral[400],
+          '&.Mui-checked': {
+            color: tokens.color.brand.primary[500],
+          },
+          '&.Mui-disabled': {
+            color: tokens.color.neutral[300],
+          },
+        },
+      },
+    },
+    // Switch styling
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          width: 52,
+          height: 32,
+          padding: 0,
+          '& .MuiSwitch-switchBase': {
+            padding: 0,
+            margin: 2,
+            transitionDuration: '300ms',
+            '&.Mui-checked': {
+              transform: 'translateX(20px)',
+              color: tokens.color.neutral.white,
+              '& + .MuiSwitch-track': {
+                backgroundColor: tokens.color.brand.primary[500],
+                opacity: 1,
+                border: 0,
+              },
+              '&.Mui-disabled + .MuiSwitch-track': {
+                opacity: 0.5,
+              },
+            },
+            '&.Mui-disabled .MuiSwitch-thumb': {
+              color: tokens.color.neutral[200],
+            },
+          },
+          '& .MuiSwitch-thumb': {
+            boxSizing: 'border-box',
+            width: 28,
+            height: 28,
+          },
+          '& .MuiSwitch-track': {
+            borderRadius: 16,
+            backgroundColor: tokens.color.neutral[400],
+            opacity: 1,
+          },
+        },
+      },
+    },
+    // Select styling
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          borderRadius: parsePx(tokens.border.radius.sm),
+          minHeight: `${tokens.touchTarget.large}px`,
+          '&.Mui-focused': {
+            '& .MuiOutlinedInput-notchedOutline': {
+              borderColor: tokens.color.brand.primary[500],
+              borderWidth: parsePx(tokens.border.width.medium),
+            },
+          },
+        },
+      },
+    },
+    // Paper/Card styling for elevation
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          borderRadius: parsePx(tokens.border.radius.lg),
+        },
+        elevation1: {
+          boxShadow: tokens.shadow.sm,
+        },
+        elevation2: {
+          boxShadow: tokens.shadow.md,
+        },
+        elevation3: {
+          boxShadow: tokens.shadow.lg,
+        },
+      },
+    },
+    // Card styling
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: parsePx(tokens.border.radius.lg),
+          boxShadow: tokens.shadow.sm,
+        },
+      },
+    },
+    // IconButton styling
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          padding: parsePx(tokens.spacing[3]),
+          minWidth: `${tokens.touchTarget.comfortable}px`,
+          minHeight: `${tokens.touchTarget.comfortable}px`,
+          '&:hover': {
+            backgroundColor: `${tokens.color.brand.primary[500]}14`, // 8% opacity
+          },
+        },
+        sizeSmall: {
+          padding: parsePx(tokens.spacing[2]),
+          minWidth: `${tokens.touchTarget.min}px`,
+          minHeight: `${tokens.touchTarget.min}px`,
+        },
+      },
+    },
+    // Chip styling
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: parsePx(tokens.border.radius.md),
+          height: '32px',
+          fontSize: parsePx(tokens.typography.fontSize.sm),
+        },
+      },
+    },
+    // Alert styling
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          borderRadius: parsePx(tokens.border.radius.sm),
+        },
+      },
+    },
+  },
+};
+
+// Create and export the theme
+export const theme = createTheme(themeOptions);
diff --git a/formulus-formplayer/src/tokens-adapter.ts b/formulus-formplayer/src/tokens-adapter.ts
new file mode 100644
index 000000000..8095ece6e
--- /dev/null
+++ b/formulus-formplayer/src/tokens-adapter.ts
@@ -0,0 +1,62 @@
+/**
+ * Tokens Adapter
+ * 
+ * Adapts the @ode/tokens JSON export to match the structure expected by theme.ts
+ * The JSON format from Style Dictionary includes { value: "..." } wrappers,
+ * and uses "font" instead of "typography", so we transform it to match.
+ */
+
+import tokensJson from '@ode/tokens/dist/json/tokens.json';
+
+// Helper to recursively extract values from { value: "..." } structure
+const extractValues = (obj: any): any => {
+  if (obj && typeof obj === 'object' && 'value' in obj && Object.keys(obj).length === 1) {
+    // This is a { value: "..." } wrapper, extract the value
+    return obj.value;
+  }
+  
+  if (Array.isArray(obj)) {
+    return obj.map(extractValues);
+  }
+  
+  if (obj && typeof obj === 'object') {
+    const result: any = {};
+    for (const key in obj) {
+      result[key] = extractValues(obj[key]);
+    }
+    return result;
+  }
+  
+  return obj;
+};
+
+// Helper to parse pixel values to numbers
+const parsePx = (value: string): number => {
+  return parseInt(value.replace('px', ''), 10);
+};
+
+// Transform the tokens and map font -> typography structure
+const transformed = extractValues(tokensJson);
+
+// Map font structure to typography structure to match theme.ts expectations
+if (transformed.font) {
+  transformed.typography = {
+    fontFamily: transformed.font.family,
+    fontSize: transformed.font.size,
+    fontWeight: transformed.font.weight,
+    lineHeight: transformed.font.lineHeight,
+    letterSpacing: transformed.font.letterSpacing,
+  };
+  // Keep font for backwards compatibility, but typography is the primary
+}
+
+// Parse touchTarget values from "48px" strings to numbers (48)
+if (transformed.touchTarget) {
+  transformed.touchTarget = {
+    min: parsePx(transformed.touchTarget.min),
+    comfortable: parsePx(transformed.touchTarget.comfortable),
+    large: parsePx(transformed.touchTarget.large),
+  };
+}
+
+export const tokens = transformed as any;