diff --git a/packages/ondevice-backgrounds/src/Swatch.tsx b/packages/ondevice-backgrounds/src/Swatch.tsx
index b1aeee0d23..e510b87b95 100644
--- a/packages/ondevice-backgrounds/src/Swatch.tsx
+++ b/packages/ondevice-backgrounds/src/Swatch.tsx
@@ -6,40 +6,42 @@ interface SwatchProps {
   setBackground: (background: string) => void;
 }
 
-const PressableSwatch = styled.TouchableOpacity(({ theme }: any) => ({
-  marginBottom: theme.tokens.spacing3,
-  borderWidth: theme.inputs.swatch.borderWidth,
-  borderColor: theme.inputs.swatch.borderColor,
-  borderRadius: theme.inputs.swatch.outerBorderRadius,
-  backgroundColor: theme.inputs.swatch.backgroundColor,
-  paddingVertical: theme.inputs.swatch.paddingVertical,
-  paddingHorizontal: theme.inputs.swatch.paddingHorizontal,
+const PressableSwatch = styled.TouchableOpacity(({ theme }) => ({
+  marginBottom: 10,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  borderRadius: 6,
+  backgroundColor: theme.background.content,
+  paddingVertical: 4,
+  paddingHorizontal: 4,
 }));
 
-const ColorSwatch = styled.View(({ theme, color }: any) => ({
-  height: theme.inputs.swatch.height,
+const ColorSwatch = styled.View<{ color: string }>(({ color, theme }) => ({
+  height: 40,
   width: '100%',
-  borderRadius: theme.inputs.swatch.innerBorderRadius,
+  borderRadius: 4,
   backgroundColor: color,
+  borderColor: theme.appBorderColor,
+  borderWidth: 1,
 }));
 
-const ValueContainer = styled.View(({ theme }: any) => ({
+const ValueContainer = styled.View(() => ({
   flex: 1,
   flexDirection: 'row',
   justifyContent: 'space-between',
-  padding: theme.tokens.spacing1,
+  padding: 4,
   paddingBottom: 0,
 }));
 
-const NameText = styled.Text(({ theme }: any) => ({
-  fontSize: theme.inputs.swatch.fontSize,
-  color: theme.inputs.labelTextColor,
-  fontWeight: theme.inputs.swatch.nameTextWeight,
+const NameText = styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+  color: theme.color.defaultText,
+  fontWeight: theme.typography.weight.bold,
 }));
 
-const ValueText = styled.Text(({ theme }: any) => ({
-  fontSize: theme.inputs.swatch.fontSize,
-  color: theme.inputs.labelTextColor,
+const ValueText = styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+  color: theme.color.defaultText,
 }));
 
 const Swatch = ({ name, value, setBackground }: SwatchProps) => (
diff --git a/packages/ondevice-controls/src/NoControlsWarning.tsx b/packages/ondevice-controls/src/NoControlsWarning.tsx
index 855681f4fa..eae3d738d3 100644
--- a/packages/ondevice-controls/src/NoControlsWarning.tsx
+++ b/packages/ondevice-controls/src/NoControlsWarning.tsx
@@ -2,12 +2,13 @@ import { styled } from '@storybook/react-native-theming';
 import { Linking, View } from 'react-native';
 
 const Paragraph = styled.Text(({ theme }) => ({
-  marginBottom: theme.tokens.spacing3,
-  color: theme.text.primaryColor,
+  marginBottom: 16,
+  color: theme.color.defaultText,
 }));
 
 const LinkText = styled.Text(({ theme }) => ({
-  color: theme.text.linkColor,
+  color: theme.color.secondary,
+  textDecorationLine: 'underline',
 }));
 
 const NoControlsWarning = () => {
diff --git a/packages/ondevice-controls/src/PropField.tsx b/packages/ondevice-controls/src/PropField.tsx
index 63b199fb75..fe543c9090 100644
--- a/packages/ondevice-controls/src/PropField.tsx
+++ b/packages/ondevice-controls/src/PropField.tsx
@@ -25,7 +25,7 @@ export interface Knob {
 }
 
 const InvalidTypeText = styled.Text(({ theme }) => ({
-  color: theme.inputs.errorTextColor,
+  color: theme.color.negative,
 }));
 
 const InvalidType = ({ arg }: { arg: ArgType }) => (
diff --git a/packages/ondevice-controls/src/components/RadioSelect.tsx b/packages/ondevice-controls/src/components/RadioSelect.tsx
index a6d7286482..580c70e632 100644
--- a/packages/ondevice-controls/src/components/RadioSelect.tsx
+++ b/packages/ondevice-controls/src/components/RadioSelect.tsx
@@ -1,5 +1,4 @@
 import { styled } from '@storybook/react-native-theming';
-import React from 'react';
 
 interface RadioProps {
   data: Array<Record<string, any>>;
@@ -12,38 +11,37 @@ const RadioContainer = styled.View(({ isInline }: any) => ({
   flexDirection: isInline ? 'row' : 'column',
   alignItems: isInline ? 'center' : 'flex-start',
   flexWrap: 'wrap',
+  rowGap: 10,
 }));
 
-const RadioTouchable = styled.TouchableOpacity(({ theme }) => ({
+const RadioTouchable = styled.TouchableOpacity(() => ({
   alignItems: 'center',
   flexDirection: 'row',
-  paddingVertical: theme.inputs.radio.itemSpacing,
 }));
 
 const RadioCircle = styled.View(({ theme }) => ({
-  width: theme.inputs.radio.height,
-  height: theme.inputs.radio.height,
-  borderWidth: theme.inputs.radio.borderWidth,
-  borderColor: theme.inputs.radio.borderColor,
-  borderRadius: theme.tokens.borderRadius.round,
-  backgroundColor: theme.inputs.radio.backgroundColor,
+  width: 15,
+  height: 15,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  borderRadius: 15,
+  backgroundColor: theme.background.content,
   alignItems: 'center',
   justifyContent: 'center',
-  paddingVertical: theme.inputs.radio.paddingVertical,
-  paddingHorizontal: theme.inputs.radio.paddingHorizontal,
+  padding: 2,
 }));
 
 const RadioInnerCircle = styled.View(({ theme, selected }: any) => ({
   height: '100%',
   width: '100%',
-  borderRadius: theme.tokens.borderRadius.round,
-  backgroundColor: selected ? theme.inputs.radio.activeBackgroundColor : 'transparent',
+  borderRadius: 10,
+  backgroundColor: selected ? theme.color.positive : 'transparent',
 }));
 
 const RadioLabel = styled.Text(({ theme }) => ({
-  fontSize: theme.inputs.radio.fontSize,
-  paddingStart: theme.inputs.radio.labelSpacing,
-  color: theme.inputs.labelTextColor,
+  fontSize: theme.typography.size.s1,
+  paddingStart: 10,
+  color: theme.color.defaultText,
 }));
 
 const RadioSelect = ({ data = [], value = '', onChange, isInline }: RadioProps) => {
diff --git a/packages/ondevice-controls/src/types/Color.tsx b/packages/ondevice-controls/src/types/Color.tsx
index a128375617..3fc3793e7a 100644
--- a/packages/ondevice-controls/src/types/Color.tsx
+++ b/packages/ondevice-controls/src/types/Color.tsx
@@ -19,54 +19,51 @@ export interface ColorProps {
 }
 
 const TouchableContainer = styled.View(({ theme }) => ({
-  width: theme.inputs.swatch.height,
-  height: theme.inputs.swatch.height,
-  borderWidth: theme.inputs.swatch.borderWidth,
-  borderColor: theme.inputs.swatch.borderColor,
-  borderRadius: theme.inputs.swatch.outerBorderRadius,
-  paddingVertical: theme.inputs.swatch.paddingVertical,
-  paddingHorizontal: theme.inputs.swatch.paddingHorizontal,
-  backgroundColor: theme.inputs.swatch.backgroundColor,
+  width: 40,
+  height: 40,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  borderRadius: 6,
+  padding: 3,
+  backgroundColor: theme.background.content,
 }));
 
-const Touchable = styled.TouchableOpacity<{ color: string }>(({ theme, color }) => ({
+const Touchable = styled.TouchableOpacity<{ color: string }>(({ color }) => ({
   width: '100%',
   height: '100%',
-  borderRadius: theme.inputs.swatch.innerBorderRadius,
+  borderRadius: 4,
   backgroundColor: color,
 }));
 
 const WebInput = styled('input' as any)(({ theme }) => ({
-  width: theme.inputs.swatch.height,
-  height: theme.inputs.swatch.height,
-  borderWidth: theme.inputs.swatch.borderWidth,
-  borderColor: theme.inputs.swatch.borderColor,
-  borderRadius: theme.inputs.swatch.outerBorderRadius,
-  paddingVertical: theme.inputs.swatch.paddingVertical,
-  paddingHorizontal: theme.inputs.swatch.paddingHorizontal,
-  backgroundColor: theme.inputs.swatch.backgroundColor,
+  width: 40,
+  height: 40,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  borderRadius: 6,
+  paddingVertical: 2,
+  paddingHorizontal: 2,
+  backgroundColor: theme.background.content,
 }));
 
 const ButtonTouchable = styled.TouchableOpacity<{ primary?: boolean }>(({ theme, primary }) => {
-  const buttonTheme = primary ? theme.button.primary : theme.button.secondary;
   return {
-    backgroundColor: buttonTheme.backgroundColor,
-    borderRadius: buttonTheme.borderRadius,
-    borderWidth: buttonTheme.borderWidth,
-    borderColor: buttonTheme.borderColor,
-    paddingVertical: theme.button.paddingVertical,
-    paddingHorizontal: theme.button.paddingHorizontal,
+    backgroundColor: primary ? theme.color.secondary : theme.button.background,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: primary ? theme.color.secondary : theme.button.border,
+    paddingVertical: 6,
+    paddingHorizontal: 20,
     justifyContent: 'center',
     alignItems: 'center',
   };
 });
 
 const ButtonText = styled.Text<{ primary?: boolean }>(({ theme, primary }) => {
-  const buttonTheme = primary ? theme.button.primary : theme.button.secondary;
   return {
-    color: buttonTheme.textColor,
-    fontSize: theme.button.fontSize,
-    fontWeight: theme.button.fontWeight,
+    color: primary ? theme.color.inverseText : theme.color.defaultText,
+    fontSize: theme.typography.size.s2,
+    fontWeight: theme.typography.weight.bold,
   };
 });
 
@@ -117,7 +114,7 @@ const ColorType = ({ arg, onChange = (value) => value }: ColorProps) => {
             />
             <View style={styles.actionContainer}>
               <ButtonTouchable onPress={closeColorPicker}>
-                <ButtonText>CANCEL</ButtonText>
+                <ButtonText>Cancel</ButtonText>
               </ButtonTouchable>
               <View style={{ width: 12 }} />
               <ButtonTouchable
@@ -127,7 +124,7 @@ const ColorType = ({ arg, onChange = (value) => value }: ColorProps) => {
                   closeColorPicker();
                 }}
               >
-                <ButtonText primary>SELECT</ButtonText>
+                <ButtonText primary>Select</ButtonText>
               </ButtonTouchable>
             </View>
           </InnerContainer>
@@ -138,16 +135,20 @@ const ColorType = ({ arg, onChange = (value) => value }: ColorProps) => {
 };
 
 const InnerContainer = styled.View(({ theme }) => ({
-  backgroundColor: theme.panel.backgroundColor,
-  borderWidth: theme.panel.borderWidth,
-  borderColor: theme.panel.borderColor,
-  borderRadius: theme.tokens.borderRadius.large,
+  backgroundColor: theme.background.content,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  borderRadius: 10,
   margin: 24,
-  padding: theme.tokens.spacing3,
+  padding: 10,
   maxWidth: 350,
   height: 400,
   maxHeight: Dimensions.get('screen').height - 24 * 2,
-  ...theme.tokens.elevation.floating,
+  shadowColor: '#000000',
+  shadowOpacity: 0.2,
+  shadowOffset: { width: 0, height: 0 },
+  shadowRadius: 16,
+  elevation: 10,
 }));
 
 const styles = StyleSheet.create({
diff --git a/packages/ondevice-controls/src/types/Date.tsx b/packages/ondevice-controls/src/types/Date.tsx
index 0e95ad492b..0c280c6a3c 100644
--- a/packages/ondevice-controls/src/types/Date.tsx
+++ b/packages/ondevice-controls/src/types/Date.tsx
@@ -13,17 +13,17 @@ export interface DateProps {
   onChange: (value: Date) => void;
 }
 
-const Touchable = styled.TouchableOpacity(({ theme }: any) => ({
+const Touchable = styled.TouchableOpacity(({ theme }) => ({
   ...inputStyle({ theme, isTextInput: false }),
 }));
 
-const WebInput = styled('input' as any)(({ theme }: any) => ({
+const WebInput = styled('input' as any)(({ theme }) => ({
   ...inputStyle({ theme }),
 }));
 
-const Label = styled.Text(({ theme }: any) => ({
-  fontSize: theme.inputs.text.fontSize,
-  color: theme.inputs.text.textColor,
+const Label = styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+  color: theme.input.color,
 }));
 
 type VisiblePicker = 'date' | 'time' | 'none';
diff --git a/packages/ondevice-controls/src/types/Number.tsx b/packages/ondevice-controls/src/types/Number.tsx
index 3018a2b6a7..f79117b924 100644
--- a/packages/ondevice-controls/src/types/Number.tsx
+++ b/packages/ondevice-controls/src/types/Number.tsx
@@ -6,13 +6,15 @@ import { useResyncValue } from './useResyncValue';
 import { Input } from './common';
 
 const ValueContainer = styled.View({ flexDirection: 'row' });
+
 const LabelText = styled.Text(({ theme }) => ({
-  color: theme.inputs.slider.labelTextColor,
-  fontSize: theme.inputs.slider.fontSize,
+  color: theme.color.mediumdark,
+  fontSize: theme.typography.size.s1,
 }));
+
 const ValueText = styled.Text(({ theme }) => ({
-  color: theme.inputs.slider.valueTextColor,
-  fontSize: theme.inputs.slider.fontSize,
+  color: theme.color.defaultText,
+  fontSize: theme.typography.size.s1,
 }));
 
 export interface NumberProps {
@@ -54,8 +56,10 @@ const NumberType = ({ arg, isPristine, onChange = (value) => value }: NumberProp
       <View key={key}>
         <ValueContainer>
           <LabelText>Value: </LabelText>
+
           <ValueText>{arg.value}</ValueText>
         </ValueContainer>
+
         <Slider
           minimumValue={arg.min}
           maximumValue={arg.max}
diff --git a/packages/react-native-theming/src/theme.ts b/packages/react-native-theming/src/theme.ts
index 7700d50ef6..b989bfdf7c 100644
--- a/packages/react-native-theming/src/theme.ts
+++ b/packages/react-native-theming/src/theme.ts
@@ -1,254 +1,8 @@
-import type { ShadowStyleIOS, ViewStyle, TextStyle } from 'react-native';
-import { StorybookThemeWeb, background, color, light, dark } from './newTheme';
+import type { TextStyle } from 'react-native';
+import { StorybookThemeWeb, background, color, dark, light } from './web-theme';
 
-type ShadowStyle = ShadowStyleIOS | Pick<ViewStyle, 'elevation'>;
+export type StorybookTheme = StorybookThemeWeb;
 
-type FontWeight = TextStyle['fontWeight'];
-
-/**
- * Primitive tokens used to build the theme.
- *
- * Ideally components should not use these values directly, and should prefer
- * to use more semantic values from the theme.
- */
-interface ThemeTokens {
-  spacing1: number;
-  spacing2: number;
-  spacing3: number;
-  spacing4: number;
-  spacing5: number;
-  spacing6: number;
-  fontSize: {
-    small: number;
-    smaller: number;
-    normal: number;
-  };
-  color: {
-    navy: string;
-    offBlack: string;
-    black: string;
-    white: string;
-    grey200: string;
-    grey700: string;
-    grey800: string;
-    red500: string;
-    blue100: string;
-    blue200: string;
-    blue250: string;
-    blue300: string;
-    blue400: string;
-    blue600: string;
-    green500: string;
-  };
-  borderRadius: {
-    small: number;
-    medium: number;
-    large: number;
-    round: number;
-  };
-  borderWidthNormal: number;
-  /** Elevation shadows */
-  elevation: {
-    floating: ShadowStyle;
-  };
-}
-
-interface ThemeButton {
-  textColor: string;
-  backgroundColor: string;
-  borderColor: string;
-  borderWidth: number;
-  borderRadius: number;
-}
-
-export interface StorybookTheme extends StorybookThemeWeb {
-  tokens: ThemeTokens;
-  backgroundColor: string;
-  text: {
-    primaryColor: string;
-    secondaryColor: string;
-    linkColor: string;
-  };
-  preview: {
-    containerBackgroundColor: string;
-    backgroundColor: string;
-  };
-  /** Navigation bar and related area */
-  navigation: {
-    backgroundColor: string;
-    borderColor: string;
-    borderWidth: number;
-    visibilityBorderRadius: number;
-    visibilityInnerBorderColor: string;
-    visibilityOuterBorderColor: string;
-  };
-  /** Side panels (Story list, addons) */
-  panel: {
-    backgroundColor: string;
-    borderWidth: number;
-    borderColor: string;
-    paddingVertical: number;
-    paddingHorizontal: number;
-  };
-  /** Story list and list items */
-  storyList: {
-    fontSize: number;
-    headerPaddingHorizontal: number;
-    headerPaddingVertical: number;
-    headerTextColor: string;
-    headerFontWeight: FontWeight;
-    storyPaddingHorizontal: number;
-    storyPaddingVertical: number;
-    storyIndent: number;
-    storyTextColor: string;
-    storyFontWeight: FontWeight;
-    storySelectedBackgroundColor: string;
-    storySelectedTextColor: string;
-    storySelectedFontWeight: FontWeight;
-    sectionSpacing: number;
-    sectionActiveBackgroundColor: string;
-    sectionBorderRadius: number;
-    search: {
-      fontSize: number;
-      textColor: string;
-      placeholderTextColor: string;
-      borderRadius: number;
-      borderColor: string;
-      borderWidth: number;
-      backgroundColor: string;
-      paddingVertical: number;
-      paddingHorizontal: number;
-    };
-  };
-  /** Buttons */
-  button: {
-    fontSize: number;
-    fontWeight: FontWeight;
-    paddingVertical: number;
-    paddingHorizontal: number;
-    primary: ThemeButton;
-    secondary: ThemeButton;
-  };
-  /** Tabs (navigation and addons) */
-  tabs: {
-    fontSize: number;
-    fontWeight: FontWeight;
-    paddingVertical: number;
-    paddingHorizontal: number;
-    borderWidth: number;
-    borderRadius: number;
-    activeBorderColor: string;
-    activeBackgroundColor: string;
-    activeTextColor: string;
-    inactiveBorderColor: string;
-    inactiveBackgroundColor: string;
-    inactiveTextColor: string;
-  };
-  /** Inputs (text, radio, slider, etc.) */
-  inputs: {
-    errorTextColor: string;
-    labelFontSize: number;
-    labelTextColor: string;
-    text: {
-      fontSize: number;
-      textColor: string;
-      borderWidth: number;
-      borderColor: string;
-      backgroundColor: string;
-      borderRadius: number;
-      paddingVertical: number;
-      paddingHorizontal: number;
-    };
-    radio: {
-      fontSize: number;
-      height: number;
-      borderWidth: number;
-      borderColor: string;
-      backgroundColor: string;
-      paddingVertical: number;
-      paddingHorizontal: number;
-      activeBackgroundColor: string;
-      itemSpacing: number;
-      labelSpacing: number;
-    };
-    swatch: {
-      fontSize: number;
-      height: number;
-      borderWidth: number;
-      borderColor: string;
-      backgroundColor: string;
-      outerBorderRadius: number;
-      innerBorderRadius: number;
-      paddingVertical: number;
-      paddingHorizontal: number;
-      nameTextWeight: FontWeight;
-    };
-    slider: {
-      fontSize: number;
-      labelTextColor: string;
-      valueTextColor: string;
-    };
-  };
-}
-
-const tokens: ThemeTokens = {
-  spacing1: 4,
-  spacing2: 8,
-  spacing3: 12,
-  spacing4: 16,
-  spacing5: 20,
-  spacing6: 24,
-  fontSize: {
-    small: 12,
-    smaller: 14,
-    normal: 16,
-  },
-  color: {
-    navy: '#001a23',
-    black: '#000',
-    offBlack: '#222',
-    white: '#ffffff',
-    grey200: '#dee2e3',
-    grey700: '#859499',
-    grey800: '#575757',
-    red500: '#ff4400',
-    blue100: '#f6f9fc',
-    blue200: '#e0eaf5',
-    blue250: '#dcebf9',
-    blue300: '#b2cbe6',
-    blue400: '#a3c1e0',
-    blue600: '#1ea7fd',
-    green500: '#66bf3c',
-  },
-  borderRadius: {
-    small: 4,
-    medium: 6,
-    large: 8,
-    round: 100,
-  },
-  borderWidthNormal: 1,
-  elevation: {
-    floating: {
-      shadowColor: '#000000',
-      shadowOpacity: 0.2,
-      shadowOffset: { width: 0, height: 0 },
-      shadowRadius: 16,
-      elevation: 10,
-    },
-  },
-} as const;
-
-const text: StorybookTheme['text'] = {
-  primaryColor: tokens.color.navy,
-  secondaryColor: tokens.color.grey700,
-  linkColor: '#0000ff',
-};
-
-const textOnDark: StorybookTheme['text'] = {
-  primaryColor: tokens.color.white,
-  secondaryColor: tokens.color.grey200,
-  linkColor: tokens.color.blue600,
-};
 export const typography = {
   weight: {
     regular: '400' as TextStyle['fontWeight'],
@@ -268,7 +22,7 @@ export const typography = {
   },
 } as const;
 
-export const theme: StorybookTheme = {
+export const theme: StorybookThemeWeb = {
   base: 'light',
   textMutedColor: color.dark,
   color: {
@@ -338,7 +92,7 @@ export const theme: StorybookTheme = {
     paddingVertical: 6,
   },
 
-  button$: {
+  button: {
     background: light.buttonBg || light.inputBg,
     border: light.buttonBorder || light.inputBorder,
   },
@@ -366,140 +120,9 @@ export const theme: StorybookTheme = {
     image: light.brandImage || (light.brandTitle ? null : undefined),
     target: light.brandTarget,
   },
-
-  // ONDEVICE
-  tokens,
-  text,
-  backgroundColor: tokens.color.white,
-  preview: {
-    containerBackgroundColor: tokens.color.white,
-    backgroundColor: tokens.color.white,
-  },
-  navigation: {
-    backgroundColor: tokens.color.white,
-    borderColor: tokens.color.grey200,
-    borderWidth: tokens.borderWidthNormal,
-    visibilityBorderRadius: tokens.borderRadius.small,
-    visibilityInnerBorderColor: tokens.color.grey700,
-    visibilityOuterBorderColor: tokens.color.white,
-  },
-  panel: {
-    backgroundColor: tokens.color.blue100,
-    borderWidth: tokens.borderWidthNormal,
-    borderColor: tokens.color.blue200,
-    paddingVertical: 0,
-    paddingHorizontal: tokens.spacing2,
-  },
-  storyList: {
-    fontSize: tokens.fontSize.normal,
-    headerPaddingHorizontal: tokens.spacing2,
-    headerPaddingVertical: tokens.spacing2,
-    headerTextColor: text.primaryColor,
-    headerFontWeight: '500',
-    storyPaddingHorizontal: tokens.spacing2,
-    storyPaddingVertical: tokens.spacing1 * 1.5,
-    storyIndent: tokens.spacing6,
-    storyTextColor: text.primaryColor,
-    storyFontWeight: '400',
-    storySelectedBackgroundColor: tokens.color.blue600,
-    storySelectedTextColor: tokens.color.white,
-    storySelectedFontWeight: '700',
-    sectionSpacing: tokens.spacing2,
-    sectionActiveBackgroundColor: tokens.color.blue200,
-    sectionBorderRadius: tokens.borderRadius.medium,
-    search: {
-      fontSize: tokens.fontSize.normal,
-      textColor: text.primaryColor,
-      placeholderTextColor: text.secondaryColor,
-      borderRadius: tokens.borderRadius.round,
-      borderColor: tokens.color.blue400,
-      borderWidth: tokens.borderWidthNormal,
-      backgroundColor: tokens.color.white,
-      paddingVertical: tokens.spacing2,
-      paddingHorizontal: tokens.spacing3,
-    },
-  },
-  button: {
-    fontSize: tokens.fontSize.smaller,
-    fontWeight: '600',
-    paddingVertical: tokens.spacing2,
-    paddingHorizontal: tokens.spacing5,
-    primary: {
-      textColor: text.primaryColor,
-      backgroundColor: tokens.color.blue250,
-      borderColor: tokens.color.blue300,
-      borderWidth: tokens.borderWidthNormal,
-      borderRadius: tokens.borderRadius.medium,
-    },
-    secondary: {
-      textColor: text.primaryColor,
-      backgroundColor: 'transparent',
-      borderColor: tokens.color.blue300,
-      borderWidth: tokens.borderWidthNormal,
-      borderRadius: tokens.borderRadius.medium,
-    },
-  },
-  tabs: {
-    fontSize: tokens.fontSize.small,
-    fontWeight: '500',
-    paddingVertical: tokens.spacing2,
-    paddingHorizontal: tokens.spacing2 * 1.25,
-    borderWidth: tokens.borderWidthNormal,
-    borderRadius: tokens.borderRadius.round,
-    activeBorderColor: tokens.color.blue300,
-    activeBackgroundColor: tokens.color.blue250,
-    activeTextColor: text.primaryColor,
-    inactiveBorderColor: 'transparent',
-    inactiveBackgroundColor: 'transparent',
-    inactiveTextColor: text.secondaryColor,
-  },
-  inputs: {
-    errorTextColor: tokens.color.red500,
-    labelFontSize: tokens.fontSize.smaller,
-    labelTextColor: text.primaryColor,
-    text: {
-      fontSize: tokens.fontSize.smaller,
-      textColor: text.primaryColor,
-      borderWidth: tokens.borderWidthNormal,
-      borderColor: tokens.color.blue400,
-      backgroundColor: tokens.color.white,
-      borderRadius: tokens.borderRadius.medium,
-      paddingVertical: tokens.spacing1 * 1.5,
-      paddingHorizontal: tokens.spacing1 * 1.5,
-    },
-    radio: {
-      fontSize: tokens.fontSize.smaller,
-      height: 20,
-      borderWidth: tokens.borderWidthNormal,
-      borderColor: tokens.color.blue400,
-      backgroundColor: tokens.color.white,
-      paddingVertical: 3,
-      paddingHorizontal: 3,
-      activeBackgroundColor: tokens.color.green500,
-      itemSpacing: tokens.spacing1,
-      labelSpacing: tokens.spacing2,
-    },
-    swatch: {
-      fontSize: tokens.fontSize.smaller,
-      height: 40,
-      borderWidth: tokens.borderWidthNormal,
-      borderColor: tokens.color.blue400,
-      backgroundColor: tokens.color.white,
-      outerBorderRadius: tokens.borderRadius.medium,
-      innerBorderRadius: tokens.borderRadius.small,
-      paddingVertical: tokens.spacing1,
-      paddingHorizontal: tokens.spacing1,
-      nameTextWeight: '600',
-    },
-    slider: {
-      fontSize: tokens.fontSize.smaller,
-      labelTextColor: text.secondaryColor,
-      valueTextColor: text.primaryColor,
-    },
-  },
 };
 
-export const darkTheme: StorybookTheme = {
+export const darkTheme: StorybookThemeWeb = {
   base: 'dark',
   textMutedColor: '#798186',
   color: {
@@ -570,7 +193,7 @@ export const darkTheme: StorybookTheme = {
     paddingVertical: 6,
   },
 
-  button$: {
+  button: {
     background: dark.buttonBg || dark.inputBg,
     border: dark.buttonBorder || dark.inputBorder,
   },
@@ -598,135 +221,4 @@ export const darkTheme: StorybookTheme = {
     image: dark.brandImage || (dark.brandTitle ? null : undefined),
     target: dark.brandTarget,
   },
-
-  // ondevice
-  tokens,
-  text: textOnDark,
-  backgroundColor: tokens.color.offBlack,
-  preview: {
-    containerBackgroundColor: tokens.color.black,
-    backgroundColor: tokens.color.offBlack,
-  },
-  navigation: {
-    backgroundColor: tokens.color.offBlack, //tokens.color.black,
-    borderColor: tokens.color.grey800,
-    borderWidth: tokens.borderWidthNormal,
-    visibilityBorderRadius: tokens.borderRadius.small,
-    visibilityInnerBorderColor: tokens.color.navy,
-    visibilityOuterBorderColor: tokens.color.navy,
-  },
-  panel: {
-    backgroundColor: tokens.color.offBlack, //tokens.color.blue100,
-    borderWidth: tokens.borderWidthNormal,
-    borderColor: tokens.color.grey800,
-    paddingVertical: 0,
-    paddingHorizontal: tokens.spacing2,
-  },
-  storyList: {
-    fontSize: tokens.fontSize.normal,
-    headerPaddingHorizontal: tokens.spacing2,
-    headerPaddingVertical: tokens.spacing2,
-    headerTextColor: textOnDark.primaryColor,
-    headerFontWeight: '500',
-    storyPaddingHorizontal: tokens.spacing2,
-    storyPaddingVertical: tokens.spacing1 * 1.5,
-    storyIndent: tokens.spacing6,
-    storyTextColor: textOnDark.primaryColor,
-    storyFontWeight: '400',
-    storySelectedBackgroundColor: tokens.color.navy,
-    storySelectedTextColor: tokens.color.white,
-    storySelectedFontWeight: '700',
-    sectionSpacing: tokens.spacing2,
-    sectionActiveBackgroundColor: tokens.color.grey800,
-    sectionBorderRadius: tokens.borderRadius.medium,
-    search: {
-      fontSize: tokens.fontSize.normal,
-      textColor: textOnDark.primaryColor,
-      placeholderTextColor: textOnDark.secondaryColor,
-      borderRadius: tokens.borderRadius.round,
-      borderColor: tokens.color.grey800, //tokens.color.blue400,
-      borderWidth: tokens.borderWidthNormal,
-      backgroundColor: tokens.color.grey800,
-      paddingVertical: tokens.spacing2,
-      paddingHorizontal: tokens.spacing3,
-    },
-  },
-  button: {
-    fontSize: tokens.fontSize.smaller,
-    fontWeight: '600',
-    paddingVertical: tokens.spacing2,
-    paddingHorizontal: tokens.spacing5,
-    primary: {
-      textColor: textOnDark.primaryColor,
-      backgroundColor: tokens.color.black,
-      borderColor: tokens.color.blue300,
-      borderWidth: tokens.borderWidthNormal,
-      borderRadius: tokens.borderRadius.medium,
-    },
-    secondary: {
-      textColor: textOnDark.primaryColor,
-      backgroundColor: 'transparent',
-      borderColor: tokens.color.blue300,
-      borderWidth: tokens.borderWidthNormal,
-      borderRadius: tokens.borderRadius.medium,
-    },
-  },
-  tabs: {
-    fontSize: tokens.fontSize.small,
-    fontWeight: '500',
-    paddingVertical: tokens.spacing2,
-    paddingHorizontal: tokens.spacing2 * 1.25,
-    borderWidth: tokens.borderWidthNormal,
-    borderRadius: tokens.borderRadius.round,
-    activeBorderColor: tokens.color.blue300,
-    activeBackgroundColor: tokens.color.navy,
-    activeTextColor: textOnDark.primaryColor,
-    inactiveBorderColor: 'transparent',
-    inactiveBackgroundColor: 'transparent',
-    inactiveTextColor: textOnDark.secondaryColor,
-  },
-  inputs: {
-    errorTextColor: tokens.color.red500,
-    labelFontSize: tokens.fontSize.smaller,
-    labelTextColor: textOnDark.primaryColor,
-    text: {
-      fontSize: tokens.fontSize.smaller,
-      textColor: textOnDark.primaryColor,
-      borderWidth: tokens.borderWidthNormal,
-      borderColor: tokens.color.blue400,
-      backgroundColor: tokens.color.black,
-      borderRadius: tokens.borderRadius.medium,
-      paddingVertical: tokens.spacing1 * 1.5,
-      paddingHorizontal: tokens.spacing1 * 1.5,
-    },
-    radio: {
-      fontSize: tokens.fontSize.smaller,
-      height: 20,
-      borderWidth: tokens.borderWidthNormal,
-      borderColor: tokens.color.blue400,
-      backgroundColor: tokens.color.black,
-      paddingVertical: 3,
-      paddingHorizontal: 3,
-      activeBackgroundColor: tokens.color.green500,
-      itemSpacing: tokens.spacing1,
-      labelSpacing: tokens.spacing2,
-    },
-    swatch: {
-      fontSize: tokens.fontSize.smaller,
-      height: 40,
-      borderWidth: tokens.borderWidthNormal,
-      borderColor: tokens.color.blue400,
-      backgroundColor: tokens.color.navy,
-      outerBorderRadius: tokens.borderRadius.medium,
-      innerBorderRadius: tokens.borderRadius.small,
-      paddingVertical: tokens.spacing1,
-      paddingHorizontal: tokens.spacing1,
-      nameTextWeight: '600',
-    },
-    slider: {
-      fontSize: tokens.fontSize.smaller,
-      labelTextColor: textOnDark.secondaryColor,
-      valueTextColor: textOnDark.primaryColor,
-    },
-  },
 };
diff --git a/packages/react-native-theming/src/newTheme.ts b/packages/react-native-theming/src/web-theme.ts
similarity index 95%
rename from packages/react-native-theming/src/newTheme.ts
rename to packages/react-native-theming/src/web-theme.ts
index 4ab99b03d4..c1d488f94a 100644
--- a/packages/react-native-theming/src/newTheme.ts
+++ b/packages/react-native-theming/src/web-theme.ts
@@ -178,10 +178,13 @@ export interface Brand {
 }
 
 export interface StorybookThemeWeb {
+  base: 'light' | 'dark';
   color: Color;
   background: Background;
   typography: Typography;
 
+  textMutedColor: string;
+
   input: {
     border: string;
     background: string;
@@ -191,6 +194,16 @@ export interface StorybookThemeWeb {
     paddingVertical: number;
   };
 
+  button: {
+    background: string;
+    border: string;
+  };
+
+  boolean: {
+    background: string;
+    selectedBackground: string;
+  };
+
   // UI
   layoutMargin: number;
   appBorderColor: string;
@@ -204,7 +217,7 @@ export interface StorybookThemeWeb {
 
   brand: Brand;
 
-  [key: string]: any;
+  // [key: string]: any;
 }
 
 export const dark: ThemeVars = {