diff --git a/packages/mobile/src/alpha/select/DefaultSelectControl.tsx b/packages/mobile/src/alpha/select/DefaultSelectControl.tsx
index 5f8f4bc4ba..0ce1266471 100644
--- a/packages/mobile/src/alpha/select/DefaultSelectControl.tsx
+++ b/packages/mobile/src/alpha/select/DefaultSelectControl.tsx
@@ -21,6 +21,7 @@ import { isSelectOptionGroup } from './Select';
 const LABEL_VARIANT_INSIDE_HEIGHT = 24;
 const COMPACT_HEIGHT = 40;
 const DEFAULT_HEIGHT = 56;
+const selectControlBorderRadius = 400;
 
 const variantColor: Record<string, ThemeVars.Color> = {
   foreground: 'fg',
@@ -157,12 +158,18 @@ export const DefaultSelectControlComponent = memo(
         value,
       ]);
 
-      // Prop value doesn't have default value because it affects the color of the
-      // animated caret
-      const focusedVariant = useInputVariant(!!open, variant ?? 'foregroundMuted');
+      const resolvedVariant = variant ?? 'foregroundMuted';
+      const defaultFocusedVariant = useInputVariant(!!open, resolvedVariant);
+      const focusedVariant = useMemo(() => {
+        if (resolvedVariant === 'foreground' || resolvedVariant === 'foregroundMuted') {
+          return 'foreground';
+        }
+
+        return defaultFocusedVariant;
+      }, [defaultFocusedVariant, resolvedVariant]);
       const { borderFocusedStyle, borderUnfocusedStyle } = useInputBorderStyle(
         !!open,
-        variant ?? 'foregroundMuted',
+        resolvedVariant,
         focusedVariant,
         bordered,
         borderWidth,
@@ -193,7 +200,7 @@ export const DefaultSelectControlComponent = memo(
               style={styles?.controlLabelNode}
             >
               <InputLabel
-                color="fg"
+                color="fgMuted"
                 paddingEnd={0}
                 paddingStart={labelVariant === 'inside' ? 2 : 0}
                 paddingY={labelVariant === 'inside' || compact ? 0 : 0.5}
@@ -396,6 +403,7 @@ export const DefaultSelectControlComponent = memo(
       return (
         <InputStack
           borderFocusedStyle={borderFocusedStyle}
+          borderRadius={selectControlBorderRadius}
           borderStyle={borderUnfocusedStyle}
           borderWidth={borderWidth}
           disabled={disabled}
diff --git a/packages/mobile/src/controls/InputLabel.tsx b/packages/mobile/src/controls/InputLabel.tsx
index e09cf160d4..0502768076 100644
--- a/packages/mobile/src/controls/InputLabel.tsx
+++ b/packages/mobile/src/controls/InputLabel.tsx
@@ -5,7 +5,7 @@ import { Text } from '../typography/Text';
 import type { HelperTextProps } from './HelperText';
 
 export const InputLabel = memo(function InputLabel({
-  color = 'fg',
+  color = 'fgMuted',
   font = 'label1',
   ...props
 }: HelperTextProps) {
diff --git a/packages/mobile/src/controls/InputStack.tsx b/packages/mobile/src/controls/InputStack.tsx
index a0cd2e0a50..d1dd992280 100644
--- a/packages/mobile/src/controls/InputStack.tsx
+++ b/packages/mobile/src/controls/InputStack.tsx
@@ -95,7 +95,7 @@ const variantColorMap: Record<InputVariant, ThemeVars.Color> = {
   positive: 'fgPositive',
   negative: 'fgNegative',
   foreground: 'fg',
-  foregroundMuted: 'fgMuted',
+  foregroundMuted: 'bgLine',
   secondary: 'bgSecondary',
 };
 
@@ -127,6 +127,17 @@ export const InputStack = memo(function InputStack(_props: InputStackProps) {
   } = mergedProps;
   const theme = useTheme();
   const [inputAreaSize, onInputAreaLayout] = useLayout();
+  const resolvedInputBackground = useMemo(() => {
+    if (variant === 'secondary') {
+      return 'bgSecondary';
+    }
+
+    if (variant === 'negative' && inputBackground === 'bg') {
+      return 'bgNegativeWash';
+    }
+
+    return inputBackground;
+  }, [variant, inputBackground]);
 
   const inputAreaStyle: ViewStyle = useMemo(() => {
     const inputBorderRadius: ViewStyle = {
@@ -149,13 +160,12 @@ export const InputStack = memo(function InputStack(_props: InputStackProps) {
         variant === 'secondary'
           ? 'transparent'
           : theme.color[
-              variant === 'foregroundMuted' || !variant ? 'bgLineHeavy' : variantColorMap[variant]
+              variant === 'foregroundMuted' || !variant ? 'bgLine' : variantColorMap[variant]
             ],
       borderWidth: theme.borderWidth[borderWidth],
       flexDirection: 'row',
       flexGrow: 1,
-      backgroundColor:
-        variant === 'secondary' ? theme.color.bgSecondary : theme.color[inputBackground],
+      backgroundColor: theme.color[resolvedInputBackground],
       borderRadius: theme.borderRadius[borderRadius],
       overflow: 'hidden',
       ...inputBorderRadius,
@@ -168,7 +178,7 @@ export const InputStack = memo(function InputStack(_props: InputStackProps) {
     theme.borderWidth,
     theme.borderRadius,
     borderWidth,
-    inputBackground,
+    resolvedInputBackground,
     borderRadius,
   ]);
 
diff --git a/packages/mobile/src/controls/NativeInput.tsx b/packages/mobile/src/controls/NativeInput.tsx
index 16473d7a97..a525bb0f8e 100644
--- a/packages/mobile/src/controls/NativeInput.tsx
+++ b/packages/mobile/src/controls/NativeInput.tsx
@@ -11,6 +11,8 @@ import type { TextBaseProps } from '../typography/Text';
 
 import type { TextInputBaseProps } from './TextInput';
 
+const defaultNativeInputBorderRadius: ThemeVars.BorderRadius = 400;
+
 export type NativeInputProps = {
   /**
    * Text Align Input
@@ -90,13 +92,15 @@ export const NativeInput = memo(
           ...containerSpacing,
           ...(!disabled &&
             editableInputAddonProps.readOnly && {
-              backgroundColor: theme.color.bgSecondary,
+              backgroundColor: theme.color.bgSecondaryWash,
+              borderRadius: theme.borderRadius[defaultNativeInputBorderRadius],
             }),
         };
       }, [
         containerSpacing,
         theme.space,
         theme.color,
+        theme.borderRadius,
         compact,
         editableInputAddonProps.readOnly,
         disabled,
diff --git a/packages/mobile/src/controls/Select.tsx b/packages/mobile/src/controls/Select.tsx
index 5bba5dbcd8..7cce4db1ab 100644
--- a/packages/mobile/src/controls/Select.tsx
+++ b/packages/mobile/src/controls/Select.tsx
@@ -29,6 +29,7 @@ import { useSelect } from './useSelect';
 const selectTriggerMinHeight = 56;
 const selectTriggerCompactMinHeight = 40;
 const selectTriggerInsideLabelMinHeight = 24;
+const selectTriggerBorderRadius = 400;
 
 const variantColorMap: Record<InputVariant, ThemeVars.Color> = {
   primary: 'fgPrimary',
@@ -97,7 +98,14 @@ export const Select = memo(
       const [isSelectTrayOpen, toggleSelectTray] = useState(false);
       const toggleSelectTrayOff = useCallback(() => toggleSelectTray(false), [toggleSelectTray]);
       const toggleSelectTrayOn = useCallback(() => toggleSelectTray(true), [toggleSelectTray]);
-      const focusedVariant = useInputVariant(!!isSelectTrayOpen, variant);
+      const defaultFocusedVariant = useInputVariant(!!isSelectTrayOpen, variant);
+      const focusedVariant = useMemo(() => {
+        if (variant === 'foreground' || variant === 'foregroundMuted') {
+          return 'foreground';
+        }
+
+        return defaultFocusedVariant;
+      }, [defaultFocusedVariant, variant]);
       const sanitizedValue = defaultValue === '' ? undefined : defaultValue;
       const internalRef = useRef(null);
       const refs = useMergeRefs(ref, internalRef);
@@ -180,6 +188,7 @@ export const Select = memo(
               <InputStack
                 animated
                 borderFocusedStyle={borderFocusedStyle}
+                borderRadius={selectTriggerBorderRadius}
                 borderStyle={borderUnfocusedStyle}
                 disabled={disabled}
                 endNode={
@@ -209,7 +218,7 @@ export const Select = memo(
                 inputNode={
                   <HStack
                     alignItems="center"
-                    borderRadius={200}
+                    borderRadius={selectTriggerBorderRadius}
                     flexBasis={1}
                     flexGrow={1}
                     flexShrink={1}
diff --git a/packages/mobile/src/controls/TextInput.tsx b/packages/mobile/src/controls/TextInput.tsx
index 1d8c7730c6..9c46ae8d08 100644
--- a/packages/mobile/src/controls/TextInput.tsx
+++ b/packages/mobile/src/controls/TextInput.tsx
@@ -18,7 +18,6 @@ import type {
   ViewStyle,
 } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
-import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import type {
   SharedAccessibilityProps,
@@ -133,6 +132,8 @@ const variantColorMap: Record<InputVariant, ThemeVars.Color> = {
   secondary: 'bgSecondary',
 };
 
+const defaultTextInputBorderRadius: InputStackBaseProps['borderRadius'] = 400;
+
 export const TextInput = memo(
   forwardRef((_props: TextInputProps, ref: ForwardedRef<RNTextInput>) => {
     const mergedProps = useComponentConfig('TextInput', _props);
@@ -153,7 +154,7 @@ export const TextInput = memo(
       compact,
       suffix = '',
       accessibilityLabel,
-      borderRadius,
+      borderRadius = defaultTextInputBorderRadius,
       enableColorSurge = false,
       helperTextErrorIconAccessibilityLabel = 'error',
       bordered = true,
@@ -165,11 +166,20 @@ export const TextInput = memo(
     } = mergedProps;
     const theme = useTheme();
     const [focused, setFocused] = useState(false);
-    const focusedVariant = useInputVariant(focused, variant);
+    const isReadOnly = !!editableInputProps.readOnly;
+    const disableFocusedStyle = disabled || isReadOnly;
+    const shouldShowFocusedState = focused && !disableFocusedStyle;
+    const focusedVariant = useMemo(() => {
+      if (variant === 'foreground' || variant === 'foregroundMuted') {
+        return 'foreground';
+      }
+
+      return variant;
+    }, [variant]);
     const internalRef = useRef<RNTextInput>(null);
     const refs = useMergeRefs(ref, internalRef);
     const { borderFocusedStyle, borderUnfocusedStyle } = useInputBorderStyle(
-      focused,
+      shouldShowFocusedState,
       variant,
       focusedVariant,
       bordered,
@@ -181,7 +191,7 @@ export const TextInput = memo(
       ...editableInputProps,
       onFocus: (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
         editableInputProps?.onFocus?.(e);
-        setFocused(true);
+        setFocused(!disableFocusedStyle);
       },
       onBlur: (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
         editableInputProps?.onBlur?.(e);
@@ -190,11 +200,11 @@ export const TextInput = memo(
     };
 
     const handleNodePress = useCallback(() => {
-      if (!editableInputAddonProps.readOnly) {
-        setFocused(true);
-        internalRef.current?.focus();
-      }
-    }, [setFocused, internalRef, editableInputAddonProps.readOnly]);
+      if (disableFocusedStyle) return;
+
+      setFocused(true);
+      internalRef.current?.focus();
+    }, [disableFocusedStyle]);
 
     const hasLabel = useMemo(() => !!label || !!labelNode, [label, labelNode]);
 
@@ -236,11 +246,11 @@ export const TextInput = memo(
     }, [start]);
 
     const readOnlyInputBackground = useMemo(() => {
-      if (!disabled && editableInputAddonProps.readOnly) {
-        return 'bgSecondary';
+      if (!disabled && isReadOnly) {
+        return 'bgSecondaryWash';
       }
       return undefined;
-    }, [disabled, editableInputAddonProps.readOnly]);
+    }, [disabled, isReadOnly]);
 
     return (
       <InputStack
@@ -276,7 +286,7 @@ export const TextInput = memo(
             </HStack>
           )
         }
-        focused={focused}
+        focused={shouldShowFocusedState}
         focusedBorderWidth={focusedBorderWidth}
         helperTextNode={
           !!helperText &&
diff --git a/packages/mobile/src/controls/__stories__/TextInput.stories.tsx b/packages/mobile/src/controls/__stories__/TextInput.stories.tsx
index 32fe0b8e0c..f80e656334 100644
--- a/packages/mobile/src/controls/__stories__/TextInput.stories.tsx
+++ b/packages/mobile/src/controls/__stories__/TextInput.stories.tsx
@@ -436,50 +436,32 @@ const InputScreen = () => {
           placeholder="Placeholder"
         />
       </Example>
-      <Example inline title="TextInput with inside label">
-        <MockTextInput label="Username" labelVariant="inside" placeholder="john.doe@coinbase.com" />
-      </Example>
-      <Example inline title="TextInput with inside label and start node">
-        <MockTextInput
-          label="Username"
-          labelVariant="inside"
-          placeholder="john.doe@coinbase.com"
-          start={<InputIconButton transparent name="search" />}
-        />
-      </Example>
-      <Example inline title="TextInput with inside label and end node">
-        <MockTextInput
-          end={<InputIconButton transparent name="lightningBolt" />}
-          label="Username"
-          labelVariant="inside"
-          placeholder="john.doe@coinbase.com"
-        />
-      </Example>
-      <Example inline title="TextInput with inside label and both nodes">
-        <MockTextInput
-          end={<InputIconButton transparent name="close" />}
-          label="Username"
-          labelVariant="inside"
-          placeholder="john.doe@coinbase.com"
-          start={<InputIconButton transparent name="search" />}
-        />
-      </Example>
-      <Example inline title="TextInput with inside label and compact">
-        <MockTextInput
-          compact
-          label="Username"
-          labelVariant="inside"
-          placeholder="john.doe@coinbase.com"
-        />
-      </Example>
-      <Example inline title="TextInput with inside label and error state">
-        <MockTextInput
-          helperText="Error: Your favorite color is not orange"
-          label="Error state"
-          labelVariant="inside"
-          placeholder="Enter your favorite color"
-          variant="negative"
-        />
+      <Example inline title="TextInput inside label (Figma + existing variations)">
+        <Box width="100%">
+          <VStack gap={2} width="100%">
+            <Text color="fgMuted" font="caption">
+              Figma inside-label states
+            </Text>
+            <VStack gap={1} width="100%">
+              <Text color="fgMuted" font="caption">
+                Default
+              </Text>
+              <MockTextInput label="Label" labelVariant="inside" placeholder="Placeholder" />
+              <Text color="fgMuted" font="caption">
+                Filled
+              </Text>
+              <MockTextInput label="Label" labelVariant="inside" value="Text" />
+              <Text color="fgMuted" font="caption">
+                Read only
+              </Text>
+              <MockTextInput label="Label" labelVariant="inside" readOnly value="Text" />
+              <Text color="fgMuted" font="caption">
+                Negative
+              </Text>
+              <MockTextInput label="Label" labelVariant="inside" value="Text" variant="negative" />
+            </VStack>
+          </VStack>
+        </Box>
       </Example>
       <Example inline title="TextInput with custom label">
         <MockTextInput
diff --git a/packages/mobile/src/controls/__tests__/TextInput.test.tsx b/packages/mobile/src/controls/__tests__/TextInput.test.tsx
index 27d67eab28..24a763deec 100644
--- a/packages/mobile/src/controls/__tests__/TextInput.test.tsx
+++ b/packages/mobile/src/controls/__tests__/TextInput.test.tsx
@@ -356,6 +356,44 @@ describe('TextInput', () => {
     );
   });
 
+  it('uses inverse focused border color for foreground-muted variant', () => {
+    const testID = 'input-testid';
+    render(
+      <DefaultThemeProvider>
+        <TextInput
+          accessibilityHint="Text input field"
+          accessibilityLabel="Text input field"
+          testID={testID}
+          variant="foregroundMuted"
+        />
+      </DefaultThemeProvider>,
+    );
+
+    fireEvent(screen.getByTestId(testID), 'focus');
+    const focusedBorderOverlayStyle = getFocusedBorderOverlayStyle();
+    expect(focusedBorderOverlayStyle).toEqual(
+      expect.objectContaining({ borderColor: defaultTheme.lightColor.bgInverse }),
+    );
+  });
+
+  it('does not show focused border styling when readOnly', () => {
+    const testID = 'input-readonly-testid';
+    render(
+      <DefaultThemeProvider>
+        <TextInput
+          accessibilityHint="Text input field"
+          accessibilityLabel="Text input field"
+          readOnly
+          testID={testID}
+        />
+      </DefaultThemeProvider>,
+    );
+
+    fireEvent(screen.getByTestId(testID), 'focus');
+    const focusedBorderOverlayStyle = getFocusedBorderOverlayStyle();
+    expect(focusedBorderOverlayStyle).toBeUndefined();
+  });
+
   it('renders label outside by default', () => {
     const labelTestID = 'label-test';
     render(
diff --git a/packages/mobile/src/dates/__stories__/DateInput.stories.tsx b/packages/mobile/src/dates/__stories__/DateInput.stories.tsx
index c9858542fa..bbf4b1bf04 100644
--- a/packages/mobile/src/dates/__stories__/DateInput.stories.tsx
+++ b/packages/mobile/src/dates/__stories__/DateInput.stories.tsx
@@ -23,27 +23,40 @@ const sharedProps = {
   requiredError: 'This field is required',
 };
 
-export const Examples = () => {
-  const [date, setDate] = useState<Date | null>(today);
+const DateInputExample = ({
+  initialDate = today,
+  ...props
+}: Omit<
+  React.ComponentProps<typeof DateInput>,
+  'date' | 'onChangeDate' | 'error' | 'onErrorDate'
+> & {
+  initialDate?: Date | null;
+}) => {
+  const [date, setDate] = useState<Date | null>(initialDate);
   const [error, setError] = useState<DateInputValidationError | null>(null);
-  const props = { date, onChangeDate: setDate, error, onErrorDate: setError };
+
+  return (
+    <DateInput {...props} date={date} error={error} onChangeDate={setDate} onErrorDate={setError} />
+  );
+};
+
+export const Examples = () => {
   return (
     <ExampleScreen>
       <Example>
         <Group gap={8} paddingEnd={8}>
-          <DateInput {...sharedProps} {...props} />
+          <DateInputExample {...sharedProps} />
           <LocaleProvider locale="ES-es">
-            <DateInput {...sharedProps} {...props} />
+            <DateInputExample {...sharedProps} />
           </LocaleProvider>
           <ThemeProvider activeColorScheme="dark" theme={defaultTheme}>
-            <DateInput {...sharedProps} {...props} />
+            <DateInputExample {...sharedProps} />
           </ThemeProvider>
-          <DateInput compact {...sharedProps} {...props} />
-          <DateInput {...sharedProps} {...props} maxDate={today} minDate={oneDayAgo} />
-          <DateInput {...sharedProps} {...props} separator="-" />
-          <DateInput
+          <DateInputExample compact {...sharedProps} />
+          <DateInputExample {...sharedProps} maxDate={today} minDate={oneDayAgo} />
+          <DateInputExample {...sharedProps} separator="-" />
+          <DateInputExample
             {...sharedProps}
-            {...props}
             accessibilityLabel="Date of birth"
             labelNode={
               <HStack alignItems="center">
@@ -54,17 +67,16 @@ export const Examples = () => {
               </HStack>
             }
           />
-          <DateInput
+          <DateInputExample
             {...sharedProps}
-            {...props}
             end={<Icon active name="camera" padding={2} size="m" />}
             placeholder="Hello world"
             start={<Icon name="blockchain" padding={2} size="m" />}
           />
-          <DateInput disabled {...sharedProps} {...props} />
-          <DateInput bordered={false} {...sharedProps} {...props} />
-          <DateInput bordered={false} focusedBorderWidth={200} {...sharedProps} {...props} />
-          <DateInput required {...sharedProps} {...props} />
+          <DateInputExample disabled {...sharedProps} />
+          <DateInputExample bordered={false} {...sharedProps} />
+          <DateInputExample bordered={false} focusedBorderWidth={200} {...sharedProps} />
+          <DateInputExample required {...sharedProps} />
         </Group>
       </Example>
     </ExampleScreen>
diff --git a/packages/mobile/src/hooks/useInputBorderAnimation.tsx b/packages/mobile/src/hooks/useInputBorderAnimation.tsx
index 4793a3187c..e5370e4ffd 100644
--- a/packages/mobile/src/hooks/useInputBorderAnimation.tsx
+++ b/packages/mobile/src/hooks/useInputBorderAnimation.tsx
@@ -29,7 +29,7 @@ const variantColorMap: Record<InputVariant, ThemeVars.Color> = {
   positive: 'bgPositive',
   negative: 'bgNegative',
   foreground: 'bgInverse',
-  foregroundMuted: 'bgLineHeavy',
+  foregroundMuted: 'bgLine',
   secondary: 'bgSecondary',
 };
 
diff --git a/packages/web/src/alpha/select/DefaultSelectControl.tsx b/packages/web/src/alpha/select/DefaultSelectControl.tsx
index 2c93074c3f..3f7a09a7ab 100644
--- a/packages/web/src/alpha/select/DefaultSelectControl.tsx
+++ b/packages/web/src/alpha/select/DefaultSelectControl.tsx
@@ -26,6 +26,7 @@ import {
 const LABEL_VARIANT_INSIDE_HEIGHT = 32;
 const COMPACT_HEIGHT = 40;
 const DEFAULT_HEIGHT = 56;
+const selectControlBorderRadius = 400;
 
 const noFocusOutlineCss = css`
   &:focus,
@@ -246,7 +247,7 @@ const DefaultSelectControlComponent = memo(
             <Pressable noScaleOnPress onClick={() => setOpen((s) => !s)} tabIndex={-1}>
               <InputLabel
                 className={classNames?.controlLabelNode}
-                color="fg"
+                color="fgMuted"
                 paddingBottom={0}
                 paddingStart={2}
                 style={styles?.controlLabelNode}
@@ -257,7 +258,7 @@ const DefaultSelectControlComponent = memo(
           ) : typeof label === 'string' ? (
             <InputLabel
               className={classNames?.controlLabelNode}
-              color="fg"
+              color="fgMuted"
               style={styles?.controlLabelNode}
             >
               {label}
@@ -491,6 +492,7 @@ const DefaultSelectControlComponent = memo(
         <InputStack
           ref={ref}
           blendStyles={interactableBlendStyles}
+          borderRadius={selectControlBorderRadius}
           borderWidth={borderWidth}
           disabled={disabled}
           endNode={endNode}
diff --git a/packages/web/src/alpha/select/Select.tsx b/packages/web/src/alpha/select/Select.tsx
index 91b6fda3b6..5ee1191547 100644
--- a/packages/web/src/alpha/select/Select.tsx
+++ b/packages/web/src/alpha/select/Select.tsx
@@ -120,6 +120,13 @@ const SelectBase = memo(
         classNames,
         testID,
       } = mergedProps;
+
+      if (type === 'multi' && !Array.isArray(value))
+        throw Error('Select component value must be an array when "type" is "multi".');
+
+      if (type === 'single' && Array.isArray(value))
+        throw Error('Select component value must not be an array when "type" is "single".');
+
       const hasMounted = useHasMounted();
       const [openInternal, setOpenInternal] = useState(defaultOpen ?? false);
       const open = openProp ?? openInternal;
diff --git a/packages/web/src/alpha/select/__tests__/Select.test.tsx b/packages/web/src/alpha/select/__tests__/Select.test.tsx
index 29b82019b6..f4c9c1abd8 100644
--- a/packages/web/src/alpha/select/__tests__/Select.test.tsx
+++ b/packages/web/src/alpha/select/__tests__/Select.test.tsx
@@ -524,6 +524,46 @@ describe('Select', () => {
 
       consoleError.mockRestore();
     });
+
+    it('throws error when multi select receives a non-array value', () => {
+      const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+      expect(() => {
+        render(
+          <DefaultThemeProvider>
+            <Select
+              // @ts-expect-error Runtime guard test for invalid value shape.
+              value="option1"
+              onChange={jest.fn()}
+              options={mockOptions}
+              type="multi"
+            />
+          </DefaultThemeProvider>,
+        );
+      }).toThrow('Select component value must be an array when "type" is "multi".');
+
+      consoleError.mockRestore();
+    });
+
+    it('throws error when single select receives an array value', () => {
+      const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+      expect(() => {
+        render(
+          <DefaultThemeProvider>
+            <Select
+              // @ts-expect-error Runtime guard test for invalid value shape.
+              value={['option1']}
+              onChange={jest.fn()}
+              options={mockOptions}
+              type="single"
+            />
+          </DefaultThemeProvider>,
+        );
+      }).toThrow('Select component value must not be an array when "type" is "single".');
+
+      consoleError.mockRestore();
+    });
   });
 
   describe('Keyboard Navigation', () => {
diff --git a/packages/web/src/controls/InputLabel.tsx b/packages/web/src/controls/InputLabel.tsx
index 7168159bb6..3e7db5b627 100644
--- a/packages/web/src/controls/InputLabel.tsx
+++ b/packages/web/src/controls/InputLabel.tsx
@@ -5,7 +5,7 @@ import { Text, type TextProps } from '../typography/Text';
 export type InputLabelProps = TextProps<'label'>;
 
 export const InputLabel = memo(function InputLabel({
-  color = 'fg',
+  color = 'fgMuted',
   disabled = false,
   font = 'label1',
   ...props
diff --git a/packages/web/src/controls/InputStack.tsx b/packages/web/src/controls/InputStack.tsx
index 3081d0c944..2dfc81f3f7 100644
--- a/packages/web/src/controls/InputStack.tsx
+++ b/packages/web/src/controls/InputStack.tsx
@@ -66,7 +66,7 @@ const variantColorMap: Record<InputVariant, ThemeVars.Color> = {
   positive: 'bgPositive',
   negative: 'bgNegative',
   foreground: 'bgInverse',
-  foregroundMuted: 'bgLineHeavy',
+  foregroundMuted: 'bgLine',
   secondary: 'bgSecondary',
 };
 
@@ -204,12 +204,19 @@ export const InputStack = memo(
         return 'transparent';
       }
 
+      if (variant === 'secondary') {
+        return 'transparent';
+      }
+
+      if (variant === 'foreground' || variant === 'foregroundMuted') {
+        return 'var(--color-bgInverse)';
+      }
+
       if (variant === 'positive' || variant === 'negative') {
         return `var(--color-${variantColorMap[variant]})`;
       }
 
-      // all variants except for positive/negative receive the primary focus color
-      return 'var(--color-bgPrimary)';
+      return `var(--color-${variantColorMap[variant]})`;
     }, [disableFocusedStyle, variant]);
 
     const borderColorUnfocused = useMemo(() => {
@@ -229,6 +236,18 @@ export const InputStack = memo(
       };
     }, [borderColorUnfocused, borderColorFocused, focusedBorderWidth, inputBorderRadius]);
 
+    const resolvedInputBackground = useMemo(() => {
+      if (variant === 'secondary') {
+        return 'bgSecondary';
+      }
+
+      if (variant === 'negative' && inputBackground === 'bg') {
+        return 'bgNegativeWash';
+      }
+
+      return inputBackground;
+    }, [variant, inputBackground]);
+
     return (
       <VStack
         gap={inputStackGap}
@@ -246,7 +265,7 @@ export const InputStack = memo(
             <Interactable
               ref={ref}
               as="span"
-              background={variant === 'secondary' ? 'bgSecondary' : inputBackground}
+              background={resolvedInputBackground}
               blendStyles={blendStyles}
               borderRadius={borderRadius}
               borderWidth={borderWidth}
diff --git a/packages/web/src/controls/NativeInput.tsx b/packages/web/src/controls/NativeInput.tsx
index 85231ba795..98947c3542 100644
--- a/packages/web/src/controls/NativeInput.tsx
+++ b/packages/web/src/controls/NativeInput.tsx
@@ -8,6 +8,8 @@ import { cx } from '../cx';
 import { useTheme } from '../hooks/useTheme';
 import { Box, type BoxBaseProps, type BoxProps } from '../layout';
 
+const autofillBorderRadius = 'var(--borderRadius-400)';
+
 const baseCss = css`
   min-width: 0;
   flex-grow: 2;
@@ -37,7 +39,7 @@ const baseCss = css`
   }
 
   &[readonly]:not(:disabled) {
-    background-color: var(--color-bgSecondary);
+    background-color: var(--color-bgSecondaryWash);
   }
 
   /* stylelint-disable a11y/no-display-none */
@@ -65,7 +67,7 @@ const baseCss = css`
   &:-webkit-autofill:hover,
   &:-webkit-autofill:focus,
   &:-webkit-autofill:active {
-    border-radius: var(--borderRadius-200);
+    border-radius: ${autofillBorderRadius};
     -webkit-text-fill-color: var(--color-fg);
     transition: background-color 0s ease-in-out 5000s;
   }
diff --git a/packages/web/src/controls/NativeTextArea.tsx b/packages/web/src/controls/NativeTextArea.tsx
index d223167ac7..e52def11bb 100644
--- a/packages/web/src/controls/NativeTextArea.tsx
+++ b/packages/web/src/controls/NativeTextArea.tsx
@@ -32,7 +32,7 @@ const baseCss = css`
   }
 
   &:-webkit-autofill {
-    border-radius: var(--borderRadius-200);
+    border-radius: var(--borderRadius-400);
   }
 `;
 
diff --git a/packages/web/src/controls/SelectStack.tsx b/packages/web/src/controls/SelectStack.tsx
index ad08ec88d8..919b564690 100644
--- a/packages/web/src/controls/SelectStack.tsx
+++ b/packages/web/src/controls/SelectStack.tsx
@@ -30,6 +30,8 @@ const variantToHelperTextColor: Record<
   secondary: 'fgMuted',
 };
 
+const defaultSelectBorderRadius: ThemeVars.BorderRadius = 400;
+
 export const SelectStack = memo(
   forwardRef<HTMLElement, SelectStackProps>(function SelectStack(
     {
@@ -86,6 +88,7 @@ export const SelectStack = memo(
         }
         labelVariant={labelVariant}
         variant={variant}
+        borderRadius={defaultSelectBorderRadius}
         width="100%"
       />
     );
diff --git a/packages/web/src/controls/SelectTrigger.tsx b/packages/web/src/controls/SelectTrigger.tsx
index 219aefd3ad..03625d57a0 100644
--- a/packages/web/src/controls/SelectTrigger.tsx
+++ b/packages/web/src/controls/SelectTrigger.tsx
@@ -18,6 +18,7 @@ import { SelectStack } from './SelectStack';
 const selectTriggerMinHeight = 56;
 const selectTriggerCompactMinHeight = 40;
 const selectTriggerInsideLabelMinHeight = 62;
+const selectTriggerBorderRadius = 400;
 
 export type SelectTriggerProps = Omit<
   SelectBaseProps,
@@ -129,7 +130,7 @@ export const SelectTrigger = memo(
           ) : null}
           <HStack
             alignItems="center"
-            borderRadius={200}
+            borderRadius={selectTriggerBorderRadius}
             height="100%"
             justifyContent="space-between"
             minWidth={0}
diff --git a/packages/web/src/controls/TextInput.tsx b/packages/web/src/controls/TextInput.tsx
index 84d91dcd40..3af965fd05 100644
--- a/packages/web/src/controls/TextInput.tsx
+++ b/packages/web/src/controls/TextInput.tsx
@@ -132,13 +132,6 @@ export type TextInputBaseProps = NativeInputBaseProps &
 
 export type TextInputProps = TextInputBaseProps & NativeInputProps;
 
-const useInputVariant = (focused: boolean, variant: InputVariant) => {
-  return useMemo(
-    () => (focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant),
-    [focused, variant],
-  );
-};
-
 const variantColorMap: Record<InputVariant, ThemeVars.Color> = {
   primary: 'fgPrimary',
   positive: 'fgPositive',
@@ -148,6 +141,8 @@ const variantColorMap: Record<InputVariant, ThemeVars.Color> = {
   secondary: 'fg',
 };
 
+const defaultTextInputBorderRadius: InputStackBaseProps['borderRadius'] = 400;
+
 export const TextInput = memo(
   forwardRef(function TextInput(_props: TextInputProps, ref: React.ForwardedRef<HTMLInputElement>) {
     const mergedProps = useComponentConfig('TextInput', _props);
@@ -170,7 +165,7 @@ export const TextInput = memo(
       suffix = '',
       onFocus,
       onBlur,
-      borderRadius = 200,
+      borderRadius = defaultTextInputBorderRadius,
       height,
       inputNode,
       bordered = true,
@@ -182,8 +177,11 @@ export const TextInput = memo(
       inputBackground,
       ...nativeInputRestProps
     } = mergedProps;
+    const isReadOnly = !!nativeInputRestProps.readOnly;
+    const disableFocusedStyle = disabled || isReadOnly;
     const [focused, setFocused] = useState(false);
-    const focusedVariant = useInputVariant(focused, variant);
+    const shouldShowFocusedState = focused && !disableFocusedStyle;
+    const focusedVariant = variant;
     const internalRef = useRef<HTMLInputElement>();
     const refs = useMergeRefs(ref, internalRef);
 
@@ -204,11 +202,13 @@ export const TextInput = memo(
 
     const handleOnFocus = useCallback(
       (e: React.FocusEvent<HTMLInputElement>) => {
-        setFocused(true);
+        setFocused(!disableFocusedStyle);
         onFocus?.(e);
-        internalRef.current?.addEventListener('wheel', preventWheelScroll);
+        if (!disableFocusedStyle) {
+          internalRef.current?.addEventListener('wheel', preventWheelScroll);
+        }
       },
-      [onFocus, internalRef, preventWheelScroll],
+      [disableFocusedStyle, onFocus, internalRef, preventWheelScroll],
     );
 
     const handleOnBlur = useCallback(
@@ -221,14 +221,16 @@ export const TextInput = memo(
     );
 
     const handleNodePress = useCallback(() => {
+      if (disableFocusedStyle) return;
+
       setFocused(true);
       internalRef.current?.focus();
-    }, [setFocused, internalRef]);
+    }, [disableFocusedStyle]);
 
     // Define a distinct read-only style to differentiate it from the disabled style.
     const readOnlyInputBackground = useMemo(() => {
       if (!disabled && nativeInputRestProps.readOnly) {
-        return 'bgSecondary';
+        return 'bgSecondaryWash';
       }
       return undefined;
     }, [disabled, nativeInputRestProps.readOnly]);
@@ -297,11 +299,15 @@ export const TextInput = memo(
     ]);
 
     return (
-      <TextInputFocusVariantContext.Provider value={focused ? focusedVariant : undefined}>
+      <TextInputFocusVariantContext.Provider
+        value={shouldShowFocusedState ? focusedVariant : undefined}
+      >
         <InputStack
           borderRadius={borderRadius}
           borderWidth={bordered ? 100 : 0}
-          disableFocusedStyle={!bordered && typeof focusedBorderWidth === 'undefined'}
+          disableFocusedStyle={
+            disableFocusedStyle || (!bordered && typeof focusedBorderWidth === 'undefined')
+          }
           disabled={disabled}
           enableColorSurge={enableColorSurge}
           endNode={
@@ -323,7 +329,7 @@ export const TextInput = memo(
               </HStack>
             )
           }
-          focused={focused}
+          focused={shouldShowFocusedState}
           focusedBorderWidth={focusedBorderWidth}
           height={height}
           helperTextNode={
diff --git a/packages/web/src/controls/__stories__/TextInput.stories.tsx b/packages/web/src/controls/__stories__/TextInput.stories.tsx
index df28ee49c4..de420bcc68 100644
--- a/packages/web/src/controls/__stories__/TextInput.stories.tsx
+++ b/packages/web/src/controls/__stories__/TextInput.stories.tsx
@@ -62,38 +62,78 @@ export const Basic = function Basic() {
 };
 
 export const InsideLabel = function InsideLabel() {
+  const figmaStates = [
+    {
+      title: 'Default',
+      node: <TextInput label="Label" labelVariant="inside" placeholder="Placeholder" />,
+    },
+    {
+      title: 'Filled',
+      node: (
+        <TextInput label="Label" labelVariant="inside" onChange={() => undefined} value="Text" />
+      ),
+    },
+    {
+      title: 'Read only',
+      node: <TextInput label="Label" labelVariant="inside" readOnly value="Text" />,
+    },
+    {
+      title: 'Negative',
+      node: <TextInput label="Label" labelVariant="inside" value="Text" variant="negative" />,
+    },
+  ] as const;
+
   return (
-    <VStack gap={2}>
-      <TextInput label="Inside Label" labelVariant="inside" placeholder="Placeholder" />
-      <TextInput
-        label="Secondary Start"
-        labelVariant="inside"
-        placeholder="Placeholder"
-        start={<InputIconButton transparent accessibilityLabel="Add" name="add" />}
-        variant="secondary"
-      />
-      <TextInput
-        end={<InputIconButton transparent accessibilityLabel="Add" name="add" />}
-        label=" Secondary End"
-        labelVariant="inside"
-        placeholder="Placeholder"
-        variant="secondary"
-      />
-      <TextInput
-        compact
-        label="Compact+Inside"
-        labelVariant="inside"
-        placeholder="Placeholder"
-        variant="secondary"
-      />
-      <TextInput
-        helperText="Error: Your favorite color is not orange"
-        label="Error state"
-        labelVariant="inside"
-        placeholder="Enter your favorite color"
-        variant="negative"
-      />
-    </VStack>
+    <Box paddingX={2} paddingY={1} width={'100%'}>
+      <VStack gap={2} width={'100%'}>
+        <Text color="fgMuted" font="caption">
+          Figma inside-label states
+        </Text>
+        <Box display="grid" gap={2} gridTemplateColumns="repeat(2, minmax(0, 1fr))">
+          {figmaStates.map((state) => (
+            <VStack key={state.title} gap={0.5}>
+              <Text color="fgMuted" font="caption">
+                {state.title}
+              </Text>
+              {state.node}
+            </VStack>
+          ))}
+        </Box>
+
+        <Text color="fgMuted" font="caption" paddingTop={1}>
+          Existing inside-label variations
+        </Text>
+        <TextInput label="Inside Label" labelVariant="inside" placeholder="Placeholder" />
+        <TextInput
+          label="Secondary Start"
+          labelVariant="inside"
+          placeholder="Placeholder"
+          start={<InputIconButton transparent accessibilityLabel="Add" name="add" />}
+          variant="secondary"
+        />
+        <TextInput
+          end={<InputIconButton transparent accessibilityLabel="Add" name="add" />}
+          label=" Secondary End"
+          labelVariant="inside"
+          placeholder="Placeholder"
+          variant="secondary"
+        />
+        <TextInput
+          compact
+          label="Compact+Inside"
+          labelVariant="inside"
+          placeholder="Placeholder"
+          variant="secondary"
+        />
+        <TextInput
+          helperText="Error: Your favorite color is not orange"
+          label="Error state"
+          labelVariant="inside"
+          placeholder="Enter your favorite color"
+          variant="negative"
+        />
+      </VStack>
+    </Box>
   );
 };
 
diff --git a/packages/web/src/controls/__tests__/TextInput.test.tsx b/packages/web/src/controls/__tests__/TextInput.test.tsx
index e4a12169c1..752d4d5699 100644
--- a/packages/web/src/controls/__tests__/TextInput.test.tsx
+++ b/packages/web/src/controls/__tests__/TextInput.test.tsx
@@ -280,10 +280,32 @@ describe('TextInput', () => {
     );
 
     const inputArea = screen.getByTestId('input-interactable-area');
-    expect(inputArea).toHaveStyle('--border-color-focused: var(--color-bgPrimary)');
+    expect(inputArea).toHaveStyle('--border-color-focused: var(--color-bgInverse)');
     expect(inputArea).toHaveStyle('--border-width-focused: var(--borderWidth-200)');
   });
 
+  it('disables focus border styling when readOnly', () => {
+    render(
+      <DefaultThemeProvider>
+        <TextInput readOnly />
+      </DefaultThemeProvider>,
+    );
+
+    const inputArea = screen.getByTestId('input-interactable-area');
+    expect(inputArea).toHaveStyle('--border-color-focused: transparent');
+  });
+
+  it('disables focus border styling when disabled', () => {
+    render(
+      <DefaultThemeProvider>
+        <TextInput disabled />
+      </DefaultThemeProvider>,
+    );
+
+    const inputArea = screen.getByTestId('input-interactable-area');
+    expect(inputArea).toHaveStyle('--border-color-focused: transparent');
+  });
+
   it('focuses input when start node is pressed', () => {
     const onFocus = jest.fn();
     const startNodeText = 'Start';