diff --git a/apps/sv/frontend/src/components/form-components/ConfigField.tsx b/apps/sv/frontend/src/components/form-components/ConfigField.tsx
index 61a0216eaa..689d88c619 100644
--- a/apps/sv/frontend/src/components/form-components/ConfigField.tsx
+++ b/apps/sv/frontend/src/components/form-components/ConfigField.tsx
@@ -8,6 +8,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import { useFieldContext } from '../../hooks/formContext';
 import type { ConfigChange, PendingConfigFieldInfo } from '../../utils/types';
 import { nextScheduledSynchronizerUpgradeFormat } from '@canton-network/splice-common-frontend-utils';
+import { configFieldFieldSx, configFieldInputSx } from '../../themes/fieldStyles';
 
 dayjs.extend(relativeTime);
 
@@ -55,12 +56,16 @@ export const ConfigField: React.FC<ConfigFieldProps> = props => {
 
   const textFieldProps = {
     variant: 'outlined' as const,
-    size: 'small' as const,
     color: field.state.meta.isDefaultValue ? ('primary' as const) : ('secondary' as const),
     focused: !field.state.meta.isDefaultValue,
     autoComplete: 'off' as const,
+    sx: configFieldFieldSx,
+    slotProps: {
+      input: {
+        sx: configFieldInputSx,
+      },
+    },
     inputProps: {
-      sx: { textAlign: 'right' },
       'data-testid': `config-field-${configChange.fieldName}`,
     },
     disabled: isDisabled,
@@ -89,7 +94,7 @@ export const ConfigField: React.FC<ConfigFieldProps> = props => {
           </Typography>
         </Box>
 
-        <Box sx={{ width: 250 }}>
+        <Box sx={{ width: 238, maxWidth: '100%' }}>
           <MuiTextField
             {...textFieldProps}
             // We choose empty string to represent fields that could be undefined because their values have not been set.
diff --git a/apps/sv/frontend/src/components/form-components/DateField.tsx b/apps/sv/frontend/src/components/form-components/DateField.tsx
index 0e0bd7ba1f..b783a2a27c 100644
--- a/apps/sv/frontend/src/components/form-components/DateField.tsx
+++ b/apps/sv/frontend/src/components/form-components/DateField.tsx
@@ -2,12 +2,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useMemo } from 'react';
+import { KeyboardArrowDown } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { DesktopDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import dayjs, { Dayjs } from 'dayjs';
 import { dateTimeFormatISO } from '@canton-network/splice-common-frontend-utils';
 import { useFieldContext } from '../../hooks/formContext';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import {
+  datePickerFieldSx,
+  fieldDescriptionSx,
+  fieldSectionSx,
+  fieldSectionTitleSx,
+} from '../../themes/fieldStyles';
 
 export interface DateFieldProps {
   title?: string;
@@ -23,18 +30,10 @@ export const DateField: React.FC<DateFieldProps> = props => {
   const dateValue = useMemo(() => dayjs(field.state.value), [field.state.value]);
 
   return (
-    <Box>
-      {title && (
-        <Typography variant="h5" gutterBottom>
-          {title}
-        </Typography>
-      )}
+    <Box sx={fieldSectionSx}>
+      {title && <Typography sx={fieldSectionTitleSx}>{title}</Typography>}
 
-      {description && (
-        <Typography variant="body2" color="text.secondary" gutterBottom>
-          {description}
-        </Typography>
-      )}
+      {description && <Typography sx={fieldDescriptionSx}>{description}</Typography>}
 
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DesktopDateTimePicker
@@ -42,19 +41,36 @@ export const DateField: React.FC<DateFieldProps> = props => {
           format={dateTimeFormatISO}
           minDateTime={minDate || dayjs()}
           ampm={false}
+          onClose={() => field.handleBlur()}
           onChange={newDate => field.handleChange(newDate?.format(dateTimeFormatISO)!)}
           enableAccessibleFieldDOMStructure={false}
+          slots={{
+            openPickerIcon: KeyboardArrowDown,
+          }}
           slotProps={{
             textField: {
               fullWidth: true,
               variant: 'outlined',
               id: `${id}-field`,
+              error: !field.state.meta.isValid,
               helperText: field.state.meta.errors?.[0],
               onBlur: field.handleBlur,
+              sx: datePickerFieldSx,
               inputProps: {
                 'data-testid': `${id}-field`,
               },
             },
+            openPickerButton: {
+              sx: {
+                color: 'text.light',
+                marginRight: 0,
+                padding: 0,
+                cursor: 'pointer',
+                '& .MuiSvgIcon-root': {
+                  fontSize: 16,
+                },
+              },
+            },
           }}
         />
       </LocalizationProvider>
diff --git a/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx b/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
index 26c6b0216c..fa09b9fc9b 100644
--- a/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
+++ b/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
@@ -10,6 +10,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { EffectivityType } from '../../utils/types';
 import React, { useMemo } from 'react';
 import { RadioSelector } from './RadioSelector';
+import { datePickerFieldSx } from '../../themes/fieldStyles';
 
 const effectiveAtDisplayFormat = 'YYYY-MM-DD HH:mm';
 
@@ -106,46 +107,10 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
                       error: !field.state.meta.isValid,
                       helperText: field.state.meta.errors?.[0],
                       onBlur: field.handleBlur,
+                      sx: datePickerFieldSx,
                       inputProps: {
                         'data-testid': `${id}-field`,
                       },
-                      sx: theme => ({
-                        width: '100%',
-                        '& .MuiOutlinedInput-root': {
-                          backgroundColor: '#363636',
-                          borderRadius: '4px',
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                          alignSelf: 'stretch',
-                          flexWrap: 'nowrap',
-                          padding: '13px 16px',
-                          overflow: 'hidden',
-                          minHeight: 'unset',
-                          '& fieldset': {
-                            border: 'none',
-                            borderRadius: '4px',
-                          },
-                        },
-                        '& .MuiOutlinedInput-input': {
-                          ...theme.typography.body2,
-                          flex: 1,
-                          minWidth: 0,
-                          padding: 0,
-                          lineHeight: '22px',
-                          color: theme.palette.text.light,
-                          backgroundColor: 'transparent',
-                          borderRadius: 0,
-                          WebkitBoxShadow: 'none',
-                        },
-                        '& .MuiInputAdornment-root': {
-                          flexShrink: 0,
-                          marginLeft: theme.spacing(1.25),
-                        },
-                        '& .MuiFormHelperText-root': {
-                          mx: 0,
-                        },
-                      }),
                     },
                   }}
                 />
diff --git a/apps/sv/frontend/src/components/form-components/ProposalSummaryField.tsx b/apps/sv/frontend/src/components/form-components/ProposalSummaryField.tsx
index f6a7a83e53..0ff342eb9c 100644
--- a/apps/sv/frontend/src/components/form-components/ProposalSummaryField.tsx
+++ b/apps/sv/frontend/src/components/form-components/ProposalSummaryField.tsx
@@ -9,6 +9,12 @@ import {
   PROPOSAL_SUMMARY_SUBTITLE,
   PROPOSAL_SUMMARY_TITLE,
 } from '../../utils/constants';
+import {
+  fieldDescriptionSx,
+  fieldSectionSx,
+  fieldSectionTitleSx,
+  proposalSummaryFieldSx,
+} from '../../themes/fieldStyles';
 
 export interface ProposalSummaryFieldProps {
   id: string;
@@ -27,11 +33,17 @@ export const ProposalSummaryField: React.FC<ProposalSummaryFieldProps> = props =
   const currentLength = field.state.value.length;
 
   return (
-    <Box>
-      <Typography variant="h6" gutterBottom>
+    <Box sx={fieldSectionSx}>
+      <Typography sx={fieldSectionTitleSx}>
         {title || PROPOSAL_SUMMARY_TITLE}
         {optional && (
-          <Typography component="span" variant="body2" color="text.secondary" sx={{ ml: 1 }}>
+          <Typography
+            component="span"
+            fontSize={12}
+            lineHeight="22px"
+            color="text.light"
+            sx={{ ml: 1 }}
+          >
             optional
           </Typography>
         )}
@@ -39,32 +51,32 @@ export const ProposalSummaryField: React.FC<ProposalSummaryFieldProps> = props =
       <MuiTextField
         fullWidth
         multiline
-        rows={5}
         variant="outlined"
         autoComplete="off"
+        sx={proposalSummaryFieldSx}
+        id={id}
         value={field.state.value}
         onBlur={field.handleBlur}
         onChange={e => field.handleChange(e.target.value)}
         error={!field.state.meta.isValid}
         helperText={field.state.meta.errors?.[0]}
         inputProps={{ 'data-testid': id, maxLength }}
-        id={id}
       />
       <Box
         sx={{
           display: 'flex',
           justifyContent: 'space-between',
-          alignItems: 'center',
-          mt: 1,
+          alignItems: 'flex-start',
           gap: 2,
         }}
       >
-        <Typography variant="body2" data-testid={`${id}-subtitle`}>
+        <Typography sx={fieldDescriptionSx} data-testid={`${id}-subtitle`}>
           {subtitle || PROPOSAL_SUMMARY_SUBTITLE}
         </Typography>
         <Typography
-          variant="body2"
-          color={'text.secondary'}
+          fontSize={12}
+          lineHeight="22px"
+          color="text.secondary"
           data-testid={`${id}-character-counter`}
           sx={{ flexShrink: 0 }}
         >
diff --git a/apps/sv/frontend/src/components/form-components/SelectField.tsx b/apps/sv/frontend/src/components/form-components/SelectField.tsx
index 95bb6d8fb5..354e4350d9 100644
--- a/apps/sv/frontend/src/components/form-components/SelectField.tsx
+++ b/apps/sv/frontend/src/components/form-components/SelectField.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2024 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { KeyboardArrowDown } from '@mui/icons-material';
 import {
   Box,
   FormControl,
@@ -13,6 +14,7 @@ import {
 import type { FormEvent } from 'react';
 import { useFieldContext } from '../../hooks/formContext';
 import { scrollableSelectFieldSx } from '../beta/identifierStyles';
+import { fieldSectionSx, fieldSectionTitleSx, selectFieldSx } from '../../themes/fieldStyles';
 
 export type Option = { key: string; value: string };
 export interface SelectFieldProps {
@@ -38,16 +40,19 @@ export const SelectField: React.FC<SelectFieldProps> = props => {
   const isError = !field.state.meta.isValid && !showPlaceholder;
 
   return (
-    <Box data-testid={`${id}-select-component`}>
-      <Typography variant="h6" gutterBottom>
-        {title}
-      </Typography>
+    <Box sx={fieldSectionSx} data-testid={`${id}-select-component`}>
+      <Typography sx={fieldSectionTitleSx}>{title}</Typography>
 
-      <FormControl variant="outlined" error={isError} fullWidth>
+      <FormControl
+        variant="outlined"
+        error={isError}
+        fullWidth
+        sx={{ '& .MuiFormHelperText-root': { mx: 0, mt: 1 } }}
+      >
         <Select
+          IconComponent={KeyboardArrowDown}
           value={field.state.value}
           displayEmpty
-          sx={scrollableIdentifier ? scrollableSelectFieldSx : undefined}
           renderValue={selected => {
             if (!selected) {
               return showPlaceholder ? (
@@ -68,6 +73,14 @@ export const SelectField: React.FC<SelectFieldProps> = props => {
           disabled={disabled}
           id={`${id}-dropdown`}
           data-testid={id}
+          sx={
+            scrollableIdentifier
+              ? theme => ({
+                  ...(typeof selectFieldSx === 'function' ? selectFieldSx(theme) : selectFieldSx),
+                  ...scrollableSelectFieldSx,
+                })
+              : selectFieldSx
+          }
           inputProps={{
             'data-testid': `${id}-dropdown`,
             onChange: (e: FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
diff --git a/apps/sv/frontend/src/components/form-components/TextField.tsx b/apps/sv/frontend/src/components/form-components/TextField.tsx
index be820eb58f..fd1cfa7931 100644
--- a/apps/sv/frontend/src/components/form-components/TextField.tsx
+++ b/apps/sv/frontend/src/components/form-components/TextField.tsx
@@ -9,6 +9,12 @@ import {
 } from '@mui/material';
 import { useFieldContext } from '../../hooks/formContext';
 import { scrollableTextFieldSx } from '../beta/identifierStyles';
+import {
+  fieldDescriptionSx,
+  fieldSectionSx,
+  fieldSectionTitleSx,
+  singleLineFieldSx,
+} from '../../themes/fieldStyles';
 
 export interface TextFieldProps {
   id: string;
@@ -32,8 +38,8 @@ export const TextField: React.FC<TextFieldProps> = props => {
   } = props;
   const field = useFieldContext<string>();
   return (
-    <Box>
-      <Typography variant="h6" id={`${id}-title`} data-testid={`${id}-title`} gutterBottom>
+    <Box sx={fieldSectionSx}>
+      <Typography sx={fieldSectionTitleSx} id={`${id}-title`} data-testid={`${id}-title`}>
         {title}
       </Typography>
 
@@ -48,7 +54,12 @@ export const TextField: React.FC<TextFieldProps> = props => {
         }}
         error={!field.state.meta.isValid}
         helperText={
-          <Typography variant="caption" id={`${id}-error`} data-testid={`${id}-error`}>
+          <Typography
+            component="span"
+            sx={fieldDescriptionSx}
+            id={`${id}-error`}
+            data-testid={`${id}-error`}
+          >
             {field.state.meta.errors?.[0]}
           </Typography>
         }
@@ -58,11 +69,20 @@ export const TextField: React.FC<TextFieldProps> = props => {
         }}
         inputProps={{ 'data-testid': id }}
         id={id}
-        sx={scrollableIdentifier ? scrollableTextFieldSx : undefined}
+        sx={
+          scrollableIdentifier
+            ? theme => ({
+                ...(typeof singleLineFieldSx === 'function'
+                  ? singleLineFieldSx(theme)
+                  : singleLineFieldSx),
+                ...scrollableTextFieldSx,
+              })
+            : singleLineFieldSx
+        }
         {...muiTextFieldProps}
       />
       {subtitle && (
-        <Typography variant="body2" color="text.secondary" data-testid={`${id}-subtitle`} mt={1}>
+        <Typography sx={fieldDescriptionSx} data-testid={`${id}-subtitle`}>
           {subtitle}
         </Typography>
       )}
diff --git a/apps/sv/frontend/src/components/forms/CreateUnallocatedUnclaimedActivityRecordForm.tsx b/apps/sv/frontend/src/components/forms/CreateUnallocatedUnclaimedActivityRecordForm.tsx
index 6a303b2b50..81f722e465 100644
--- a/apps/sv/frontend/src/components/forms/CreateUnallocatedUnclaimedActivityRecordForm.tsx
+++ b/apps/sv/frontend/src/components/forms/CreateUnallocatedUnclaimedActivityRecordForm.tsx
@@ -227,7 +227,7 @@ export const CreateUnallocatedUnclaimedActivityRecordForm: React.FC = _ => {
             >
               {field => (
                 <field.TextField
-                  title="URL"
+                  title="SUPPORTING URL"
                   id="create-unallocated-unclaimed-activity-record-url"
                 />
               )}
diff --git a/apps/sv/frontend/src/components/forms/GrantRevokeFeaturedAppForm.tsx b/apps/sv/frontend/src/components/forms/GrantRevokeFeaturedAppForm.tsx
index 472174b800..042b0341c0 100644
--- a/apps/sv/frontend/src/components/forms/GrantRevokeFeaturedAppForm.tsx
+++ b/apps/sv/frontend/src/components/forms/GrantRevokeFeaturedAppForm.tsx
@@ -373,7 +373,7 @@ export const GrantRevokeFeaturedAppForm: React.FC<GrantRevokeFeaturedAppFormProp
                 onChange: ({ value }) => validateUrl(value),
               }}
             >
-              {field => <field.TextField title="URL" id={`${testIdPrefix}-url`} />}
+              {field => <field.TextField title="SUPPORTING URL" id={`${testIdPrefix}-url`} />}
             </form.AppField>
           </>
         )}
diff --git a/apps/sv/frontend/src/components/forms/OffboardSvForm.tsx b/apps/sv/frontend/src/components/forms/OffboardSvForm.tsx
index 3f93cdfcbd..722fe87d9b 100644
--- a/apps/sv/frontend/src/components/forms/OffboardSvForm.tsx
+++ b/apps/sv/frontend/src/components/forms/OffboardSvForm.tsx
@@ -175,7 +175,7 @@ export const OffboardSvForm: React.FC = _ => {
                 onChange: ({ value }) => validateUrl(value),
               }}
             >
-              {field => <field.TextField title="URL" id="offboard-sv-url" />}
+              {field => <field.TextField title="SUPPORTING URL" id="offboard-sv-url" />}
             </form.AppField>
           </>
         )}
diff --git a/apps/sv/frontend/src/components/forms/SetAmuletConfigRulesForm.tsx b/apps/sv/frontend/src/components/forms/SetAmuletConfigRulesForm.tsx
index 0af20b6170..56a7a311b9 100644
--- a/apps/sv/frontend/src/components/forms/SetAmuletConfigRulesForm.tsx
+++ b/apps/sv/frontend/src/components/forms/SetAmuletConfigRulesForm.tsx
@@ -288,7 +288,7 @@ export const SetAmuletConfigRulesForm: () => JSX.Element = () => {
               onChange: ({ value }) => validateUrl(value),
             }}
           >
-            {field => <field.TextField title="URL" id="set-amulet-config-rules-url" />}
+            {field => <field.TextField title="SUPPORTING URL" id="set-amulet-config-rules-url" />}
           </form.AppField>
         </>
       )}
diff --git a/apps/sv/frontend/src/components/forms/SetDsoConfigRulesForm.tsx b/apps/sv/frontend/src/components/forms/SetDsoConfigRulesForm.tsx
index 624e9c4daf..3d9b2be85d 100644
--- a/apps/sv/frontend/src/components/forms/SetDsoConfigRulesForm.tsx
+++ b/apps/sv/frontend/src/components/forms/SetDsoConfigRulesForm.tsx
@@ -304,7 +304,7 @@ export const SetDsoConfigRulesForm: () => JSX.Element = () => {
               onChange: ({ value }) => validateUrl(value),
             }}
           >
-            {field => <field.TextField title="URL" id="set-dso-config-rules-url" />}
+            {field => <field.TextField title="SUPPORTING URL" id="set-dso-config-rules-url" />}
           </form.AppField>
         </>
       )}
diff --git a/apps/sv/frontend/src/components/forms/UpdateSvRewardWeightForm.tsx b/apps/sv/frontend/src/components/forms/UpdateSvRewardWeightForm.tsx
index 8a535d255a..94838d058d 100644
--- a/apps/sv/frontend/src/components/forms/UpdateSvRewardWeightForm.tsx
+++ b/apps/sv/frontend/src/components/forms/UpdateSvRewardWeightForm.tsx
@@ -220,7 +220,7 @@ export const UpdateSvRewardWeightForm: React.FC = _ => {
                 onChange: ({ value }) => validateUrl(value),
               }}
             >
-              {field => <field.TextField title="URL" id="update-sv-reward-weight-url" />}
+              {field => <field.TextField title="SUPPORTING URL" id="update-sv-reward-weight-url" />}
             </form.AppField>
           </>
         )}
diff --git a/apps/sv/frontend/src/themes/fieldStyles.ts b/apps/sv/frontend/src/themes/fieldStyles.ts
new file mode 100644
index 0000000000..53c308d5b1
--- /dev/null
+++ b/apps/sv/frontend/src/themes/fieldStyles.ts
@@ -0,0 +1,319 @@
+// Copyright (c) 2024 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { SxProps, Theme } from '@mui/material/styles';
+
+const fieldSurfaceBackground = '#363636';
+
+export const fieldSectionTitleSx: SxProps<Theme> = {
+  fontSize: 12,
+  lineHeight: '22px',
+  fontWeight: 600,
+  textTransform: 'uppercase',
+  color: 'common.white',
+};
+
+export const fieldDescriptionSx: SxProps<Theme> = {
+  fontSize: 12,
+  lineHeight: '22px',
+  color: 'text.light',
+};
+
+export const fieldSectionSx: SxProps<Theme> = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 1,
+};
+
+const fieldHelperSx: SxProps<Theme> = {
+  '& .MuiFormHelperText-root': {
+    mx: 0,
+    mt: 1,
+  },
+};
+
+const inputTypographySx = (theme: Theme) => ({
+  fontSize: theme.typography.body2.fontSize,
+  fontWeight: theme.typography.body2.fontWeight,
+  fontFamily: theme.typography.body2.fontFamily,
+  lineHeight: '22px',
+  letterSpacing: 0,
+  color: theme.palette.text.light,
+  backgroundColor: 'transparent',
+  boxSizing: 'border-box' as const,
+  WebkitBoxShadow: 'none',
+});
+
+const fieldOutlineSx = (theme: Theme) => ({
+  '& .MuiOutlinedInput-notchedOutline, & fieldset': {
+    border: 'none',
+    borderRadius: '4px',
+  },
+  '&.Mui-error .MuiOutlinedInput-notchedOutline, &.Mui-error fieldset': {
+    border: `1px solid ${theme.palette.error.main}`,
+  },
+});
+
+const fieldAdornmentSx = {
+  '& .MuiInputAdornment-root': {
+    margin: 0,
+    maxHeight: '22px',
+    height: '22px',
+    alignSelf: 'center',
+  },
+  '& .MuiInputAdornment-positionEnd': {
+    marginLeft: 'auto',
+  },
+  '& .MuiInputAdornment-root .MuiIconButton-root': {
+    color: 'common.white',
+    padding: 0,
+    width: 16,
+    height: 16,
+    '& svg': {
+      fontSize: 16,
+    },
+  },
+  '& .MuiSelect-icon': {
+    color: 'common.white',
+    fontSize: 16,
+    top: 'calc(50% - 0.5em)',
+  },
+};
+
+const multilineSurfaceSx = (theme: Theme) => ({
+  display: 'flex',
+  padding: '13px 16px',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  alignContent: 'flex-start',
+  flexWrap: 'wrap',
+  rowGap: '10px',
+  alignSelf: 'stretch',
+  backgroundColor: fieldSurfaceBackground,
+  borderRadius: '4px',
+  overflow: 'hidden',
+  ...fieldOutlineSx(theme),
+});
+
+const multilineInputSx = (theme: Theme) => ({
+  ...inputTypographySx(theme),
+  flex: 1,
+  width: '100%',
+  minWidth: '100%',
+  padding: 0,
+});
+
+export const singleLineInputRootSx: SxProps<Theme> = theme => ({
+  ...inputTypographySx(theme),
+  display: 'flex',
+  padding: '13px 16px',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  alignContent: 'center',
+  flexWrap: 'wrap',
+  rowGap: '10px',
+  alignSelf: 'stretch',
+  minHeight: 0,
+  height: 'auto',
+  backgroundColor: fieldSurfaceBackground,
+  borderRadius: '4px',
+  overflow: 'hidden',
+  ...fieldOutlineSx(theme),
+  ...fieldAdornmentSx,
+  '&.MuiInputBase-root, &.MuiOutlinedInput-root, &.MuiInputBase-adornedEnd': {
+    minHeight: 0,
+    height: 'auto',
+  },
+  // Override common MuiInputBase global `.MuiOutlinedInput-input` background (neutral[10]).
+  '& .MuiOutlinedInput-input, & .MuiInputBase-input, & input, & .MuiSelect-select': {
+    ...inputTypographySx(theme),
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    minHeight: 0,
+    height: 'auto',
+  },
+  '&.MuiInputBase-sizeSmall': {
+    minHeight: 0,
+  },
+  '& .MuiOutlinedInput-inputSizeSmall': {
+    padding: 0,
+  },
+});
+
+const proposalSummaryInputRootSx: SxProps<Theme> = theme => ({
+  ...multilineSurfaceSx(theme),
+  height: '130px',
+  '& textarea, & .MuiOutlinedInput-input': {
+    ...multilineInputSx(theme),
+    alignSelf: 'stretch',
+    minHeight: 0,
+    height: '100%',
+    resize: 'none',
+    overflow: 'auto',
+  },
+});
+
+const configFieldInputRootSx: SxProps<Theme> = theme => ({
+  ...inputTypographySx(theme),
+  display: 'flex',
+  width: '238px',
+  maxWidth: '100%',
+  height: '48px',
+  padding: '14px 24px',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  gap: '10px',
+  boxSizing: 'border-box',
+  minHeight: 0,
+  backgroundColor: fieldSurfaceBackground,
+  borderRadius: '4px',
+  overflow: 'hidden',
+  ...fieldOutlineSx(theme),
+  // Edited state: ConfigField sets focused when value differs from default (Figma: #F3FF97 border).
+  '&.Mui-focused .MuiOutlinedInput-notchedOutline, &.Mui-focused fieldset': {
+    border: `1px solid ${theme.palette.secondary.main}`,
+  },
+  '&.MuiInputBase-root, &.MuiOutlinedInput-root': {
+    minHeight: 0,
+    height: '48px',
+  },
+  '& .MuiOutlinedInput-input, & .MuiInputBase-input, & input': {
+    ...inputTypographySx(theme),
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    minHeight: 0,
+    height: 'auto',
+    textAlign: 'right',
+  },
+});
+
+/** Single-line TextField wrapper — overrides common MuiInputBase global styles. */
+export const singleLineFieldSx: SxProps<Theme> = theme => ({
+  ...fieldHelperSx,
+  '& .MuiOutlinedInput-root':
+    typeof singleLineInputRootSx === 'function'
+      ? singleLineInputRootSx(theme)
+      : singleLineInputRootSx,
+});
+
+/** Proposal summary — fixed 130px height. */
+export const proposalSummaryFieldSx: SxProps<Theme> = theme => ({
+  ...fieldHelperSx,
+  '& .MuiOutlinedInput-root':
+    typeof proposalSummaryInputRootSx === 'function'
+      ? proposalSummaryInputRootSx(theme)
+      : proposalSummaryInputRootSx,
+});
+
+/** Date picker OutlinedInput root — single row; 16px inset for chevron via root padding. */
+const datePickerInputRootSx: SxProps<Theme> = theme => ({
+  ...inputTypographySx(theme),
+  display: 'flex',
+  flexWrap: 'nowrap',
+  padding: '13px 16px',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  width: '100%',
+  minHeight: 0,
+  height: 'auto',
+  backgroundColor: fieldSurfaceBackground,
+  borderRadius: '4px',
+  overflow: 'hidden',
+  ...fieldOutlineSx(theme),
+  ...fieldAdornmentSx,
+  '&.MuiInputBase-root, &.MuiOutlinedInput-root, &.MuiInputBase-adornedEnd': {
+    minHeight: 0,
+    height: 'auto',
+  },
+  '& .MuiOutlinedInput-input, & .MuiInputBase-input, & input': {
+    ...inputTypographySx(theme),
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    minHeight: 0,
+    height: 'auto',
+  },
+  '& .MuiInputAdornment-positionEnd': {
+    marginLeft: 'auto',
+    marginRight: 0,
+    flexShrink: 0,
+  },
+});
+
+/** Date picker TextField wrapper (helper text spacing + OutlinedInput surface). */
+export const datePickerFieldSx: SxProps<Theme> = theme => ({
+  ...fieldHelperSx,
+  width: '100%',
+  '& .MuiOutlinedInput-root':
+    typeof datePickerInputRootSx === 'function'
+      ? datePickerInputRootSx(theme)
+      : datePickerInputRootSx,
+});
+
+/** Date picker OutlinedInput root — apply via `slotProps.input.sx` when needed. */
+export const datePickerInputSx: SxProps<Theme> = datePickerInputRootSx;
+
+/** Select OutlinedInput root — single row; chevron inset matches date picker. */
+const selectInputRootSx: SxProps<Theme> = theme => ({
+  ...inputTypographySx(theme),
+  display: 'flex',
+  flexWrap: 'nowrap',
+  padding: '13px 16px',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  alignContent: 'center',
+  alignSelf: 'stretch',
+  minHeight: 0,
+  height: 'auto',
+  backgroundColor: fieldSurfaceBackground,
+  borderRadius: '4px',
+  overflow: 'hidden',
+  ...fieldOutlineSx(theme),
+  ...fieldAdornmentSx,
+  '&.MuiInputBase-root, &.MuiOutlinedInput-root, &.MuiInputBase-adornedEnd': {
+    minHeight: 0,
+    height: 'auto',
+  },
+  '& .MuiOutlinedInput-input, & .MuiInputBase-input, & input, & .MuiSelect-select': {
+    ...inputTypographySx(theme),
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    minHeight: 0,
+    height: 'auto',
+  },
+  '&.MuiSelect-outlined .MuiSelect-select': {
+    paddingRight: 0,
+  },
+  '& .MuiSelect-icon': {
+    color: 'common.white',
+    fontSize: 16,
+    marginLeft: 'auto',
+    marginRight: 0,
+    flexShrink: 0,
+    position: 'static',
+    top: 'auto',
+    right: 'auto',
+  },
+  '&.MuiInputBase-sizeSmall': {
+    minHeight: 0,
+  },
+  '& .MuiOutlinedInput-inputSizeSmall': {
+    padding: 0,
+  },
+});
+
+export const selectFieldSx: SxProps<Theme> = selectInputRootSx;
+
+/** DSO config table TextField wrapper (helper text spacing). */
+export const configFieldFieldSx: SxProps<Theme> = {
+  ...fieldHelperSx,
+  width: '238px',
+  maxWidth: '100%',
+};
+
+/** DSO config table OutlinedInput root — apply via `slotProps.input.sx`. */
+export const configFieldInputSx: SxProps<Theme> = configFieldInputRootSx;