diff --git a/DESIGN.md b/DESIGN.md
index 600c5dd651..3763b8f53b 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -135,6 +135,30 @@ All hex values in this file (frontmatter included) are the light-theme palette m
 - **Body** (400, 16px): Default text.
 - **Label** (400, 13px): Table meta, menus, dense secondary text; 12px and 10px steps exist for the tightest spots.
 
+### Standard Component Sizes
+
+`Button`, `Text` and `Input` accept a `size` prop: `small` | `medium` | `large` | `extra-large` (the `ComponentSize` vocabulary in `packages/component-library/src/tokens.ts`). Omitting the prop renders exactly as before — fully backward compatible. Sizes are responsive: they step up one notch on mobile/narrow for readability and touch targets, and collapse to the compact desktop scale from 512px/730px up. Breakpoint groups mirror the `useResponsive` view modes: narrow <512, small 512–729, medium 730–1099, wide ≥1100.
+
+Text values (fontSize / lineHeight, px):
+
+| Size        | narrow  | small   | medium  | wide    |
+| ----------- | ------- | ------- | ------- | ------- |
+| small       | 12 / 16 | 12 / 16 | 12 / 16 | 12 / 16 |
+| medium      | 13 / 18 | 13 / 18 | 13 / 18 | 13 / 18 |
+| large       | 16 / 22 | 15 / 20 | 15 / 20 | 15 / 20 |
+| extra-large | 17 / 24 | 17 / 24 | 16 / 22 | 16 / 22 |
+
+Control values for Button/Input (paddingY / paddingX / min-height, px):
+
+| Size        | narrow       | small       | medium      | wide        |
+| ----------- | ------------ | ----------- | ----------- | ----------- |
+| small       | 3 / 8 / 24   | 3 / 8 / 24  | 3 / 8 / 24  | 3 / 8 / 24  |
+| medium      | 5 / 10 / —   | 5 / 10 / —  | 5 / 10 / —  | 5 / 10 / —  |
+| large       | 8 / 12 / 36  | 6 / 12 / 32 | 6 / 12 / 32 | 6 / 12 / 32 |
+| extra-large | 10 / 14 / 40 | 8 / 12 / 36 | 8 / 12 / 36 | 8 / 12 / 36 |
+
+`size="medium"` reproduces today's default control look exactly (5px/10px padding, 13px text, no min-height) and, on controls, inherits line-height like the default; the other sizes apply their scale line-height. `Text` always applies its size's line-height, while the omitted prop forces no line-height at all. `extra-large` narrow hits the 40px mobile touch target. The touch-target guarantee applies to touch-primary controls: at narrow, use `large` or `extra-large` for controls the user taps; `small` stays the compact 24px desktop-density choice at every breakpoint and is not meant for touch-primary controls.
+
 ### Named Rules
 
 **The Tabular Number Rule.** Every standalone financial figure renders with `font-feature-settings: "tnum", "ss01", "ss04"` (via `FinancialText` or `styles.tnum`) so digits align in columns and disambiguate. A proportional-figure money column is a bug.
diff --git a/packages/component-library/src/Button.stories.tsx b/packages/component-library/src/Button.stories.tsx
new file mode 100644
index 0000000000..868ca486d5
--- /dev/null
+++ b/packages/component-library/src/Button.stories.tsx
@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from './Button';
+import { View } from './View';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A basic button. Without an explicit size it keeps the legacy compact look.',
+      },
+    },
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 10 }}>
+      <Button>Normal</Button>
+      <Button variant="primary">Primary</Button>
+      <Button variant="bare">Bare</Button>
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'The available button variants: normal, primary and bare.',
+      },
+    },
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}>
+      <Button size="small">Small</Button>
+      <Button size="medium">Medium</Button>
+      <Button size="large">Large</Button>
+      <Button size="extra-large">Extra Large</Button>
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Standard sizes. Values adapt to the viewport: resize the story canvas below 512px, 730px and 1100px to see the responsive steps.',
+      },
+    },
+  },
+};
+
+export const SizeVariantGrid: Story = {
+  render: () => (
+    <View style={{ gap: 10 }}>
+      {(['small', 'medium', 'large', 'extra-large'] as const).map(size => (
+        <View
+          key={size}
+          style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}
+        >
+          <View style={{ width: 90 }}>
+            {size === 'extra-large' ? 'extra-large' : size}
+          </View>
+          <Button size={size}>Normal</Button>
+          <Button size={size} variant="primary">
+            Primary
+          </Button>
+          <Button size={size} variant="bare">
+            Bare
+          </Button>
+        </View>
+      ))}
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Every size across the normal, primary and bare variants.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled button',
+    isDisabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled buttons prevent user interaction.',
+      },
+    },
+  },
+};
diff --git a/packages/component-library/src/Button.tsx b/packages/component-library/src/Button.tsx
index c03cd3fc4b..e2a78b4dc6 100644
--- a/packages/component-library/src/Button.tsx
+++ b/packages/component-library/src/Button.tsx
@@ -7,6 +7,12 @@ import { css, cx } from '@emotion/css';
 import { AnimatedLoading } from './icons/AnimatedLoading';
 import { styles } from './styles';
 import { theme } from './theme';
+import {
+  componentSizeControl,
+  componentSizeText,
+  sizeResponsiveStyles,
+  type ComponentSize,
+} from './tokens';
 import { View } from './View';
 
 const backgroundColor: {
@@ -123,8 +129,66 @@ const _getActiveStyles = (
   }
 };
 
-type ButtonProps = ComponentPropsWithoutRef<typeof ReactAriaButton> & {
+// Builds the padding/typography overrides for an explicit `size`, varying
+// by breakpoint via media queries (no per-instance hooks). Bare buttons
+// use uniform padding; framed buttons use the paddingX/paddingY split.
+const getButtonSizeOverrides = (
+  size: ComponentSize,
+  isBare: boolean,
+): Record<string, unknown> => {
+  const control = componentSizeControl[size];
+  const text = componentSizeText[size];
+
+  const getGroupStyles = (group: keyof typeof control) => {
+    const { paddingY, paddingX, minHeight } = control[group];
+    const { fontSize, lineHeight } = text[group];
+
+    return {
+      padding: isBare ? `${paddingY}px` : `${paddingY}px ${paddingX}px`,
+      ...(minHeight != null ? { minHeight } : null),
+      fontSize,
+      // Medium matches today's default look, which inherits line-height;
+      // only the other sizes force their scale line-height.
+      ...(size === 'medium' ? {} : { lineHeight }),
+    };
+  };
+
+  return sizeResponsiveStyles({
+    narrow: getGroupStyles('narrow'),
+    small: getGroupStyles('small'),
+    medium: getGroupStyles('medium'),
+    wide: getGroupStyles('wide'),
+  });
+};
+
+const buttonSizeOverrides: Record<
+  ComponentSize,
+  { bare: Record<string, unknown>; framed: Record<string, unknown> }
+> = {
+  small: {
+    bare: getButtonSizeOverrides('small', true),
+    framed: getButtonSizeOverrides('small', false),
+  },
+  medium: {
+    bare: getButtonSizeOverrides('medium', true),
+    framed: getButtonSizeOverrides('medium', false),
+  },
+  large: {
+    bare: getButtonSizeOverrides('large', true),
+    framed: getButtonSizeOverrides('large', false),
+  },
+  'extra-large': {
+    bare: getButtonSizeOverrides('extra-large', true),
+    framed: getButtonSizeOverrides('extra-large', false),
+  },
+};
+
+type ButtonProps = Omit<
+  ComponentPropsWithoutRef<typeof ReactAriaButton>,
+  'size'
+> & {
   variant?: ButtonVariant;
+  size?: ComponentSize;
   bounce?: boolean;
   children?: ReactNode;
 };
@@ -133,11 +197,21 @@ type ButtonVariant = 'normal' | 'primary' | 'bare' | 'menu' | 'menuSelected';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
-    const { children, variant = 'normal', bounce = true, ...restProps } = props;
+    const {
+      children,
+      variant = 'normal',
+      bounce = true,
+      size,
+      ...restProps
+    } = props;
 
     const variantWithDisabled: ButtonVariant | `${ButtonVariant}Disabled` =
       props.isDisabled ? `${variant}Disabled` : variant;
 
+    const sizeOverrides = size
+      ? buttonSizeOverrides[size][variant === 'bare' ? 'bare' : 'framed']
+      : null;
+
     const defaultButtonClassName: string = useMemo(
       () =>
         css({
@@ -155,10 +229,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           transition: 'box-shadow .25s',
           WebkitAppRegion: 'no-drag',
           ...styles.smallText,
+          ...sizeOverrides,
           '&[data-hovered]': _getHoveredStyles(variant),
           '&[data-pressed]': _getActiveStyles(variant, bounce),
         }),
-      [bounce, variant, variantWithDisabled],
+      [bounce, variant, variantWithDisabled, sizeOverrides],
     );
 
     const className = restProps.className;
diff --git a/packages/component-library/src/ComponentSize.web.test.tsx b/packages/component-library/src/ComponentSize.web.test.tsx
new file mode 100644
index 0000000000..71d251ef2e
--- /dev/null
+++ b/packages/component-library/src/ComponentSize.web.test.tsx
@@ -0,0 +1,190 @@
+import { render, screen } from '@testing-library/react';
+
+import { Button } from './Button';
+import { BigInput, Input } from './Input';
+import { Text } from './Text';
+
+// jsdom's getComputedStyle does not evaluate media queries, so the base
+// (narrow) values always win there. Responsive steps are asserted
+// against the generated stylesheet instead: find the media block and
+// check that one of the element's emotion classes declares the expected
+// value inside it.
+
+const getStyleText = () =>
+  Array.from(document.querySelectorAll('style'))
+    .map(style => style.textContent ?? '')
+    .join('');
+
+const expectMediaDeclaration = (
+  element: Element,
+  media: string,
+  declaration: string,
+) => {
+  const cssText = getStyleText();
+  const classCandidates = [...element.classList].filter(className =>
+    className.startsWith('css-'),
+  );
+  expect(classCandidates.length).toBeGreaterThan(0);
+
+  // Several emotion classes may carry the same media query, so scan
+  // every occurrence of it and check each following rule block.
+  let searchFrom = 0;
+  let isMatched = false;
+
+  for (;;) {
+    const mediaIndex = cssText.indexOf(media, searchFrom);
+    if (mediaIndex === -1) {
+      break;
+    }
+
+    const segment = cssText.slice(mediaIndex);
+    const nextMedia = segment.indexOf('@media', 1);
+    const block = nextMedia === -1 ? segment : segment.slice(0, nextMedia);
+
+    if (
+      classCandidates.some(
+        className =>
+          block.includes(`.${className}`) && block.includes(declaration),
+      )
+    ) {
+      isMatched = true;
+      break;
+    }
+
+    searchFrom = mediaIndex + media.length;
+  }
+
+  expect(isMatched).toBe(true);
+};
+
+describe('Button size', () => {
+  it('keeps the legacy look when size is omitted', () => {
+    render(<Button>Default</Button>);
+
+    const button = screen.getByRole('button', { name: 'Default' });
+    const computed = getComputedStyle(button);
+
+    expect(computed.padding).toBe('5px 10px');
+    expect(computed.fontSize).toBe('13px');
+  });
+
+  it('applies small size styles', () => {
+    render(<Button size="small">Small</Button>);
+
+    const button = screen.getByRole('button', { name: 'Small' });
+    const computed = getComputedStyle(button);
+
+    expect(computed.padding).toBe('3px 8px');
+    expect(computed.fontSize).toBe('12px');
+    expect(computed.minHeight).toBe('24px');
+  });
+
+  it('applies extra-large size styles with responsive steps', () => {
+    render(<Button size="extra-large">Extra Large</Button>);
+
+    const button = screen.getByRole('button', { name: 'Extra Large' });
+    const computed = getComputedStyle(button);
+
+    // Base (narrow): comfortable mobile / tap-target scale.
+    expect(computed.fontSize).toBe('17px');
+    expect(computed.minHeight).toBe('40px');
+
+    // Steps down at the small and medium breakpoints.
+    expectMediaDeclaration(
+      button,
+      '@media (min-width: 512px)',
+      'min-height:36px',
+    );
+    expectMediaDeclaration(
+      button,
+      '@media (min-width: 730px)',
+      'font-size:16px',
+    );
+  });
+
+  it('uses uniform padding for bare buttons with an explicit size', () => {
+    render(
+      <Button size="large" variant="bare">
+        Bare
+      </Button>,
+    );
+
+    const button = screen.getByRole('button', { name: 'Bare' });
+    const computed = getComputedStyle(button);
+
+    expect(computed.padding).toBe('8px');
+    expectMediaDeclaration(button, '@media (min-width: 512px)', 'padding:6px');
+  });
+});
+
+describe('Text size', () => {
+  it('applies no font-size opinion when size is omitted', () => {
+    render(<Text data-testid="plain">Plain</Text>);
+
+    const plain = screen.getByTestId('plain');
+    const reference = plain.ownerDocument.createElement('span');
+    plain.ownerDocument.body.appendChild(reference);
+
+    expect(getComputedStyle(plain).fontSize).toBe(
+      getComputedStyle(reference).fontSize,
+    );
+  });
+
+  it('applies size styles when provided', () => {
+    render(<Text size="large">Large text</Text>);
+
+    const text = screen.getByText('Large text');
+    const computed = getComputedStyle(text);
+
+    // Base (narrow) value; steps down to 15px from the small breakpoint.
+    expect(computed.fontSize).toBe('16px');
+    expect(computed.lineHeight).toBe('22px');
+    expectMediaDeclaration(text, '@media (min-width: 512px)', 'font-size:15px');
+  });
+});
+
+describe('Input size', () => {
+  it('keeps the legacy look when size is omitted', () => {
+    render(<Input placeholder="Default" />);
+
+    const input = screen.getByPlaceholderText('Default');
+    const computed = getComputedStyle(input);
+
+    expect(computed.padding).toBe('5px');
+    expect(computed.fontSize).toBe('13px');
+  });
+
+  it('applies size styles when provided', () => {
+    render(<Input size="large" placeholder="Large" />);
+
+    const input = screen.getByPlaceholderText('Large');
+    const computed = getComputedStyle(input);
+
+    expect(computed.padding).toBe('8px');
+    expect(computed.fontSize).toBe('16px');
+    expectMediaDeclaration(input, '@media (min-width: 512px)', 'padding:6px');
+  });
+
+  it('keeps the legacy BigInput look when size is omitted', () => {
+    render(<BigInput placeholder="Big" />);
+
+    const input = screen.getByPlaceholderText('Big');
+    const computed = getComputedStyle(input);
+
+    expect(computed.padding).toBe('10px');
+    expect(computed.fontSize).toBe('15px');
+    expect(computed.borderStyle).toBe('none');
+  });
+
+  it('applies size styles to BigInput while keeping its chrome', () => {
+    render(<BigInput size="extra-large" placeholder="Big XL" />);
+
+    const input = screen.getByPlaceholderText('Big XL');
+    const computed = getComputedStyle(input);
+
+    expect(computed.padding).toBe('10px');
+    expect(computed.fontSize).toBe('17px');
+    expect(computed.borderStyle).toBe('none');
+    expectMediaDeclaration(input, '@media (min-width: 730px)', 'padding:8px');
+  });
+});
diff --git a/packages/component-library/src/Input.stories.tsx b/packages/component-library/src/Input.stories.tsx
index fa6f673cea..5663918183 100644
--- a/packages/component-library/src/Input.stories.tsx
+++ b/packages/component-library/src/Input.stories.tsx
@@ -213,3 +213,29 @@ export const PasswordInput: Story = {
     },
   },
 };
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ gap: 10 }}>
+      <Input size="small" placeholder="Small" />
+      <Input size="medium" placeholder="Medium" />
+      <Input size="large" placeholder="Large" />
+      <Input size="extra-large" placeholder="Extra Large" />
+    </View>
+  ),
+  decorators: [
+    Story => (
+      <View style={{ width: 250 }}>
+        <Story />
+      </View>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The standard size vocabulary. Values adapt to the viewport: resize the story canvas below 512px, 730px and 1100px to see the responsive steps.',
+      },
+    },
+  },
+};
diff --git a/packages/component-library/src/Input.tsx b/packages/component-library/src/Input.tsx
index 553f8117a2..3f566c2110 100644
--- a/packages/component-library/src/Input.tsx
+++ b/packages/component-library/src/Input.tsx
@@ -12,6 +12,12 @@ import { css, cx } from '@emotion/css';
 import { useResponsive } from './hooks/useResponsive';
 import { styles } from './styles';
 import { theme } from './theme';
+import {
+  componentSizeControl,
+  componentSizeText,
+  sizeResponsiveStyles,
+  type ComponentSize,
+} from './tokens';
 
 export const baseInputStyle = {
   outline: 0,
@@ -23,24 +29,82 @@ export const baseInputStyle = {
   border: '1px solid ' + theme.formInputBorder,
 };
 
-export const defaultInputClassName = css({
-  ...baseInputStyle,
-  color: theme.formInputText,
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  flexShrink: 0,
-  '&[data-focused]': {
-    border: '1px solid ' + theme.formInputBorderSelected,
-    boxShadow: '0 1px 1px ' + theme.formInputShadowSelected,
-  },
-  '&[data-disabled]': {
-    color: theme.formInputTextPlaceholder,
-  },
-  '::placeholder': { color: theme.formInputTextPlaceholder },
-  ...styles.smallText,
-});
+// Builds the padding/typography overrides for an explicit `size`,
+// varying by breakpoint via media queries (no hooks). Inputs use a
+// uniform padding on all sides, like today's default.
+const getInputSizeStyles = (size: ComponentSize): Record<string, unknown> => {
+  const control = componentSizeControl[size];
+  const text = componentSizeText[size];
 
-export type InputProps = ComponentPropsWithRef<typeof ReactAriaInput> & {
+  const getGroupStyles = (group: keyof typeof control) => {
+    const { paddingY, minHeight } = control[group];
+    const { fontSize, lineHeight } = text[group];
+
+    return {
+      padding: paddingY,
+      ...(minHeight != null ? { minHeight } : null),
+      fontSize,
+      // Medium matches today's default look, which inherits line-height;
+      // only the other sizes force their scale line-height.
+      ...(size === 'medium' ? {} : { lineHeight }),
+    };
+  };
+
+  return sizeResponsiveStyles({
+    narrow: getGroupStyles('narrow'),
+    small: getGroupStyles('small'),
+    medium: getGroupStyles('medium'),
+    wide: getGroupStyles('wide'),
+  });
+};
+
+const inputSizeStyles = {
+  small: getInputSizeStyles('small'),
+  medium: getInputSizeStyles('medium'),
+  large: getInputSizeStyles('large'),
+  'extra-large': getInputSizeStyles('extra-large'),
+} satisfies Record<ComponentSize, Record<string, unknown>>;
+
+// Single source of truth for input class composition: base chrome, then
+// either the default typography (styles.smallText) or the explicit size
+// overrides, then any extra overrides — all in one css() call so there
+// is never a cross-class specificity race.
+const buildInputClassName = (
+  size?: ComponentSize,
+  overrides?: Record<string, unknown>,
+) =>
+  css({
+    ...baseInputStyle,
+    color: theme.formInputText,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    flexShrink: 0,
+    '&[data-focused]': {
+      border: '1px solid ' + theme.formInputBorderSelected,
+      boxShadow: '0 1px 1px ' + theme.formInputShadowSelected,
+    },
+    '&[data-disabled]': {
+      color: theme.formInputTextPlaceholder,
+    },
+    '::placeholder': { color: theme.formInputTextPlaceholder },
+    ...(size ? inputSizeStyles[size] : styles.smallText),
+    ...overrides,
+  });
+
+export const defaultInputClassName = buildInputClassName();
+
+const inputSizeClassNames = {
+  small: buildInputClassName('small'),
+  medium: buildInputClassName('medium'),
+  large: buildInputClassName('large'),
+  'extra-large': buildInputClassName('extra-large'),
+} satisfies Record<ComponentSize, string>;
+
+export type InputProps = Omit<
+  ComponentPropsWithRef<typeof ReactAriaInput>,
+  'size'
+> & {
+  size?: ComponentSize;
   onEnter?: (value: string, event: KeyboardEvent<HTMLInputElement>) => void;
   onEscape?: (value: string, event: KeyboardEvent<HTMLInputElement>) => void;
   onChangeValue?: (
@@ -57,15 +121,20 @@ export function Input({
   onChangeValue,
   onUpdate,
   className,
+  size,
   ...props
 }: InputProps) {
+  const baseClassName = size
+    ? inputSizeClassNames[size]
+    : defaultInputClassName;
+
   return (
     <ReactAriaInput
       ref={ref}
       className={
         typeof className === 'function'
-          ? renderProps => cx(defaultInputClassName, className(renderProps))
-          : cx(defaultInputClassName, className)
+          ? renderProps => cx(baseClassName, className(renderProps))
+          : cx(baseClassName, className)
       }
       {...props}
       onKeyUp={e => {
@@ -91,22 +160,40 @@ export function Input({
   );
 }
 
-const defaultBigInputClassName = css({
-  padding: 10,
-  fontSize: 15,
+// BigInput chrome: borderless with the ambient shadow instead. The
+// legacy look (size omitted) keeps today's exact values (padding 10,
+// fontSize 15); an explicit size swaps in the size tokens.
+const bigInputChrome: Record<string, unknown> = {
   border: 'none',
   ...styles.shadow,
   '&[data-focused]': { border: 'none', ...styles.shadow },
+};
+
+const defaultBigInputClassName = buildInputClassName(undefined, {
+  padding: 10,
+  fontSize: 15,
+  ...bigInputChrome,
 });
 
-export function BigInput({ className, ...props }: InputProps) {
+const bigInputSizeClassNames = {
+  small: buildInputClassName('small', bigInputChrome),
+  medium: buildInputClassName('medium', bigInputChrome),
+  large: buildInputClassName('large', bigInputChrome),
+  'extra-large': buildInputClassName('extra-large', bigInputChrome),
+} satisfies Record<ComponentSize, string>;
+
+export function BigInput({ size, className, ...props }: InputProps) {
+  const baseClassName = size
+    ? bigInputSizeClassNames[size]
+    : defaultBigInputClassName;
+
   return (
     <Input
       {...props}
       className={
         typeof className === 'function'
-          ? renderProps => cx(defaultBigInputClassName, className(renderProps))
-          : cx(defaultBigInputClassName, className)
+          ? renderProps => cx(baseClassName, className(renderProps))
+          : cx(baseClassName, className)
       }
     />
   );
diff --git a/packages/component-library/src/Text.stories.tsx b/packages/component-library/src/Text.stories.tsx
index 93258ea497..46adc5616e 100644
--- a/packages/component-library/src/Text.stories.tsx
+++ b/packages/component-library/src/Text.stories.tsx
@@ -110,3 +110,24 @@ export const InlineUsage: Story = {
     },
   },
 };
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ gap: 8 }}>
+      <Text size="small">Small (12px)</Text>
+      <Text size="medium">Medium (13px)</Text>
+      <Text size="large">Large (15px, 16px on mobile)</Text>
+      <Text size="extra-large">
+        Extra Large (17px on mobile/tablet, 16px on desktop)
+      </Text>
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The standard size vocabulary. Values adapt to the viewport: resize the story canvas below 512px, 730px and 1100px to see the responsive steps.',
+      },
+    },
+  },
+};
diff --git a/packages/component-library/src/Text.tsx b/packages/component-library/src/Text.tsx
index c2eb79adb3..ad2a22413e 100644
--- a/packages/component-library/src/Text.tsx
+++ b/packages/component-library/src/Text.tsx
@@ -4,21 +4,57 @@ import type { HTMLProps, ReactNode, Ref } from 'react';
 import { css, cx } from '@emotion/css';
 
 import type { CSSProperties } from './styles';
+import {
+  componentSizeText,
+  sizeResponsiveStyles,
+  type ComponentSize,
+} from './tokens';
 
-type TextProps = Omit<HTMLProps<HTMLSpanElement>, 'style'> & {
+type TextProps = Omit<HTMLProps<HTMLSpanElement>, 'size' | 'style'> & {
   innerRef?: Ref<HTMLSpanElement>;
   className?: string;
+  size?: ComponentSize;
   children?: ReactNode;
   style?: CSSProperties;
 };
 
+// Per-size typography, varying by breakpoint via media queries (no
+// hooks). Precomputed once at module level so rendering stays cheap.
+const getTextSizeStyles = (size: ComponentSize): Record<string, unknown> => {
+  const text = componentSizeText[size];
+
+  const getGroupStyles = (group: keyof typeof text) => {
+    const { fontSize, lineHeight } = text[group];
+
+    return { fontSize, lineHeight };
+  };
+
+  return sizeResponsiveStyles({
+    narrow: getGroupStyles('narrow'),
+    small: getGroupStyles('small'),
+    medium: getGroupStyles('medium'),
+    wide: getGroupStyles('wide'),
+  });
+};
+
+const textSizeStyles = {
+  small: getTextSizeStyles('small'),
+  medium: getTextSizeStyles('medium'),
+  large: getTextSizeStyles('large'),
+  'extra-large': getTextSizeStyles('extra-large'),
+} satisfies Record<ComponentSize, Record<string, unknown>>;
+
 export const Text = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
-  const { className = '', style, innerRef, ...restProps } = props;
+  const { className = '', style, innerRef, size, ...restProps } = props;
   return (
     <span
       {...restProps}
       ref={innerRef ?? ref}
-      className={cx(className, css(style))}
+      className={
+        size
+          ? cx(className, css({ ...textSizeStyles[size], ...style }))
+          : cx(className, css(style))
+      }
     />
   );
 });
diff --git a/packages/component-library/src/tokens.ts b/packages/component-library/src/tokens.ts
index 2970f161dd..4a130fe3d8 100644
--- a/packages/component-library/src/tokens.ts
+++ b/packages/component-library/src/tokens.ts
@@ -51,3 +51,127 @@ export const radius: Record<RadiusSize, number> = {
   sm: 4,
   pill: 999,
 };
+
+// Standard component size vocabulary shared by Button, Text and Input.
+// Values are looked up per breakpoint group so components can render
+// denser on desktop and more comfortable on mobile without hooks.
+export type ComponentSize = 'small' | 'medium' | 'large' | 'extra-large';
+
+// Breakpoint groups mirror the view modes in useResponsive:
+// narrow <512, small 512-729, medium 730-1099, wide >=1100.
+// `narrow` is the base (no media query); every other group is a
+// `min-width` query at its breakpoint.
+type BreakpointGroup = 'narrow' | 'small' | 'medium' | 'wide';
+
+const breakpointGroupMediaQueries: Record<
+  Exclude<BreakpointGroup, 'narrow'>,
+  string
+> = {
+  small: `@media (min-width: ${tokens.breakpoint_small})`,
+  medium: `@media (min-width: ${tokens.breakpoint_medium})`,
+  wide: `@media (min-width: ${tokens.breakpoint_wide})`,
+};
+
+type ComponentSizeTextValues = {
+  fontSize: number;
+  // lineHeight is on emotion's unitless list, so a plain number would
+  // render as a multiplier (e.g. `line-height: 18` = 18x). Always a
+  // px string so the value renders as an absolute line box.
+  lineHeight: string;
+};
+
+type ComponentSizeControlValues = {
+  paddingY: number;
+  paddingX: number;
+  minHeight?: number;
+};
+
+// Typographic scale, aligned with styles.ts (smallText 13, mediumText 15,
+// verySmallText 12, mobileMenuItem 17). Mobile steps sizes up one notch
+// for readability; desktop stays compact.
+export const componentSizeText: Record<
+  ComponentSize,
+  Record<BreakpointGroup, ComponentSizeTextValues>
+> = {
+  small: {
+    narrow: { fontSize: 12, lineHeight: '16px' },
+    small: { fontSize: 12, lineHeight: '16px' },
+    medium: { fontSize: 12, lineHeight: '16px' },
+    wide: { fontSize: 12, lineHeight: '16px' },
+  },
+  medium: {
+    narrow: { fontSize: 13, lineHeight: '18px' },
+    small: { fontSize: 13, lineHeight: '18px' },
+    medium: { fontSize: 13, lineHeight: '18px' },
+    wide: { fontSize: 13, lineHeight: '18px' },
+  },
+  large: {
+    narrow: { fontSize: 16, lineHeight: '22px' },
+    small: { fontSize: 15, lineHeight: '20px' },
+    medium: { fontSize: 15, lineHeight: '20px' },
+    wide: { fontSize: 15, lineHeight: '20px' },
+  },
+  'extra-large': {
+    narrow: { fontSize: 17, lineHeight: '24px' },
+    small: { fontSize: 17, lineHeight: '24px' },
+    medium: { fontSize: 16, lineHeight: '22px' },
+    wide: { fontSize: 16, lineHeight: '22px' },
+  },
+};
+
+// Padding and min-height for controls (Button, Input). The `medium` row
+// reproduces today's default look exactly (5px / 5px 10px, no
+// min-height). `extra-large` narrow hits the 40px mobile touch target.
+export const componentSizeControl: Record<
+  ComponentSize,
+  Record<BreakpointGroup, ComponentSizeControlValues>
+> = {
+  small: {
+    narrow: { paddingY: 3, paddingX: spacing.sm, minHeight: 24 },
+    small: { paddingY: 3, paddingX: spacing.sm, minHeight: 24 },
+    medium: { paddingY: 3, paddingX: spacing.sm, minHeight: 24 },
+    wide: { paddingY: 3, paddingX: spacing.sm, minHeight: 24 },
+  },
+  medium: {
+    narrow: { paddingY: 5, paddingX: 10 },
+    small: { paddingY: 5, paddingX: 10 },
+    medium: { paddingY: 5, paddingX: 10 },
+    wide: { paddingY: 5, paddingX: 10 },
+  },
+  large: {
+    narrow: { paddingY: spacing.sm, paddingX: spacing.md, minHeight: 36 },
+    small: { paddingY: 6, paddingX: spacing.md, minHeight: 32 },
+    medium: { paddingY: 6, paddingX: spacing.md, minHeight: 32 },
+    wide: { paddingY: 6, paddingX: spacing.md, minHeight: 32 },
+  },
+  'extra-large': {
+    narrow: { paddingY: 10, paddingX: 14, minHeight: 40 },
+    small: { paddingY: spacing.sm, paddingX: spacing.md, minHeight: 36 },
+    medium: { paddingY: spacing.sm, paddingX: spacing.md, minHeight: 36 },
+    wide: { paddingY: spacing.sm, paddingX: spacing.md, minHeight: 36 },
+  },
+};
+
+type ResponsiveStyleObject = Record<string, unknown>;
+
+// Flattens a per-breakpoint-group value table into a single emotion style
+// object: the `narrow` values become the base and each larger group is
+// emitted as a min-width media query — but only when its values actually
+// differ from the previous group, keeping generated CSS lean.
+export function sizeResponsiveStyles(
+  values: Record<BreakpointGroup, ResponsiveStyleObject>,
+): ResponsiveStyleObject {
+  const styles: ResponsiveStyleObject = { ...values.narrow };
+  let previousGroup: BreakpointGroup = 'narrow';
+
+  for (const group of ['small', 'medium', 'wide'] as const) {
+    if (
+      JSON.stringify(values[group]) !== JSON.stringify(values[previousGroup])
+    ) {
+      styles[breakpointGroupMediaQueries[group]] = values[group];
+    }
+    previousGroup = group;
+  }
+
+  return styles;
+}
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-1-chromium-linux.png
index ac1ed90da6..3ecc27465a 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png
index 5f52450ded..bdb809a334 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png
index 159e3961df..4d6fa027fd 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png
index 00b9315263..a001bf0527 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png
index b731372559..4843eef7ad 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png
index bcbe639487..c89e24bcbe 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-7-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-7-chromium-linux.png
index 62edc43fe0..3251c1f1c0 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-7-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-7-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-8-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-8-chromium-linux.png
index 381def43e7..4bd1eb8234 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-8-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-8-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-9-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-9-chromium-linux.png
index ba1863d688..de43099bfa 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-9-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-9-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-1-chromium-linux.png
index 86a431db41..12e24f8658 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-2-chromium-linux.png
index 327b9a46bc..310103b71e 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-3-chromium-linux.png
index 8acf41ccd2..f94a165382 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-4-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-4-chromium-linux.png
index fb98661f07..939827edf8 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-4-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-5-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-5-chromium-linux.png
index 069abe6385..c242a9bc01 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-5-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-6-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-6-chromium-linux.png
index fdcbf52e1d..ddc53a9d5e 100644
Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-6-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-reconciles-an-account-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png
index 57de7f15c6..84281cf8ea 100644
Binary files a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png
index fa03e90777..92a0a9dedd 100644
Binary files a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png
index e1c91a0e2b..810b360659 100644
Binary files a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png
index 912f3abde9..954a71c361 100644
Binary files a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png
index 84a942efb2..5779f5cc49 100644
Binary files a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png
index b433d9468c..0da67f654e 100644
Binary files a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-1-chromium-linux.png
index 4573137038..c0d76666a4 100644
Binary files a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-2-chromium-linux.png
index 32be9df2b1..ef1e7dab3a 100644
Binary files a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-3-chromium-linux.png
index 9e79a200de..16de6508a3 100644
Binary files a/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-1-chromium-linux.png
index 97aa140709..ac719fe87b 100644
Binary files a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-2-chromium-linux.png
index f1ac2a11d7..a6c375eab0 100644
Binary files a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-3-chromium-linux.png
index 606f98a5fd..c0718a988d 100644
Binary files a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-checks-the-page-visuals-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-1-chromium-linux.png b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-1-chromium-linux.png
index 840ecd2915..c7733aaefa 100644
Binary files a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-1-chromium-linux.png and b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-2-chromium-linux.png b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-2-chromium-linux.png
index 1bcf7fe7b2..71568fd73c 100644
Binary files a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-2-chromium-linux.png and b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-3-chromium-linux.png b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-3-chromium-linux.png
index 28236f1646..7f000938cd 100644
Binary files a/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-3-chromium-linux.png and b/packages/desktop-client/e2e/bank-sync.mobile.test.ts-snapshots/Mobile-Bank-Sync-searches-for-accounts-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png
index 7f4532c0a5..1dc63cc8e9 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png
index 0f6f9a7d0d..df18353657 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png
index 7b14971a7f..5304aed3d5 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png
index f242ea60f2..c0e32f1b89 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png
index d82ac51fae..941f9464e6 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png
index 1db6ee395c..20d838c866 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png
index e7a1fca3b6..39e84aafc7 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png
index af78de581c..809489100d 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png
index 3e784414e3..5f4d0ef479 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png
index ed8ccd614c..f5cdc8560f 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png
index ff900fd502..7da9d8f0a0 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png
index 24a4df6adc..dd23719b82 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-1-chromium-linux.png
index 4bedeb132c..de312d6eeb 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-2-chromium-linux.png
index 57e04a2020..65b8b826c9 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-3-chromium-linux.png
index 45e5ce6a62..d18fa17240 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-checks-the-page-visuals-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-1-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-1-chromium-linux.png
index 4bedeb132c..de312d6eeb 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-1-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-2-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-2-chromium-linux.png
index 57e04a2020..65b8b826c9 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-2-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-3-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-3-chromium-linux.png
index 45e5ce6a62..d18fa17240 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-3-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-displays-schedule-details-correctly-in-list-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-1-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-1-chromium-linux.png
index 42e7153316..fed3b694fc 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-1-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-2-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-2-chromium-linux.png
index 791e87d6a8..f273b72616 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-2-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-3-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-3-chromium-linux.png
index 1f7534b41d..aca91ac45d 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-3-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-4-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-4-chromium-linux.png
index d117157d38..019f257c2e 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-4-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-5-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-5-chromium-linux.png
index 12bf1efc8d..0156b1b916 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-5-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-6-chromium-linux.png b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-6-chromium-linux.png
index d110fc78f4..46abdb6ac0 100644
Binary files a/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-6-chromium-linux.png and b/packages/desktop-client/e2e/schedules.mobile.test.ts-snapshots/Mobile-Schedules-searches-and-filters-schedules-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-1-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-1-chromium-linux.png
index 30e163aa14..865a178251 100644
Binary files a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-1-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-2-chromium-linux.png
index ecec75fe52..d8b49f3747 100644
Binary files a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-2-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-3-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-3-chromium-linux.png
index 3f289e9d4a..fa37073b59 100644
Binary files a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-3-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-column-manager-hides-and-reorders-columns-3-chromium-linux.png differ
diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
index 6b5ebc80ba..53d0d34bd3 100644
--- a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
@@ -495,7 +495,7 @@ function SingleAutocomplete<T extends AutocompleteItem>({
             <View ref={triggerRef} style={{ flexShrink: 0 }}>
               {renderInput(
                 (() => {
-                  const { className, style, ...restInputProps } =
+                  const { className, style, size, ...restInputProps } =
                     inputProps || {};
                   const downshiftProps = getInputProps({
                     ref: inputRef,
@@ -616,6 +616,7 @@ function SingleAutocomplete<T extends AutocompleteItem>({
                     ...downshiftProps,
                     ...(className && { className }),
                     ...(style && { style }),
+                    ...(size && { size }),
                   };
                 })(),
               )}
diff --git a/packages/desktop-client/src/components/banksync/BankSyncCheckboxOptions.tsx b/packages/desktop-client/src/components/banksync/BankSyncCheckboxOptions.tsx
index e8460f268a..68f7805638 100644
--- a/packages/desktop-client/src/components/banksync/BankSyncCheckboxOptions.tsx
+++ b/packages/desktop-client/src/components/banksync/BankSyncCheckboxOptions.tsx
@@ -132,8 +132,8 @@ function CheckboxOptionWithHelp({
       </SpaceBetween>
       {showHelp && (
         <Text
+          size="medium"
           style={{
-            fontSize: 13,
             color: theme.pageTextSubdued,
           }}
         >
diff --git a/packages/desktop-client/src/components/banksync/BuiltInProviders.tsx b/packages/desktop-client/src/components/banksync/BuiltInProviders.tsx
index 5b45c49180..3b7415d6a7 100644
--- a/packages/desktop-client/src/components/banksync/BuiltInProviders.tsx
+++ b/packages/desktop-client/src/components/banksync/BuiltInProviders.tsx
@@ -149,17 +149,17 @@ export function BuiltInProviders({
                       flexWrap: 'wrap',
                     }}
                   >
-                    <Text style={{ fontSize: 17, fontWeight: 600 }}>
+                    <Text size="extra-large" style={{ fontWeight: 600 }}>
                       {provider.displayName}
                     </Text>
                     {provider.isConfigured && provider.credentialSource && (
                       <Text
+                        size="small"
                         style={{
                           alignSelf: 'flex-start',
                           borderRadius: 999,
                           backgroundColor: theme.buttonPrimaryBackground,
                           color: theme.buttonPrimaryText,
-                          fontSize: 12,
                           fontWeight: 500,
                           padding: '2px 8px',
                         }}
@@ -173,11 +173,11 @@ export function BuiltInProviders({
                     )}
                   </View>
                   <Text
+                    size="medium"
                     style={{
                       color: provider.isConfigured
                         ? theme.noticeTextDark
                         : theme.pageTextSubdued,
-                      fontSize: 13,
                       fontWeight: 500,
                     }}
                   >
@@ -259,7 +259,7 @@ export function BuiltInProviders({
               {provider.supportsPerBudgetFile &&
                 provider.credentialSource === 'global' &&
                 !provider.canConfigure && (
-                  <Text style={{ color: theme.pageTextSubdued, fontSize: 13 }}>
+                  <Text size="medium" style={{ color: theme.pageTextSubdued }}>
                     <Trans>
                       Reset credentials before setting credentials for this
                       budget file.
diff --git a/packages/desktop-client/src/components/banksync/EditSyncAccount.tsx b/packages/desktop-client/src/components/banksync/EditSyncAccount.tsx
index 1c5c76a98c..60df2f531c 100644
--- a/packages/desktop-client/src/components/banksync/EditSyncAccount.tsx
+++ b/packages/desktop-client/src/components/banksync/EditSyncAccount.tsx
@@ -214,7 +214,7 @@ export function EditSyncAccount({ account }: EditSyncAccountProps) {
             rightContent={<ModalCloseButton onPress={() => state.close()} />}
           />
 
-          <Text style={{ fontSize: 15 }}>
+          <Text size="large">
             <Trans>Field mapping</Trans>
           </Text>
 
@@ -226,7 +226,7 @@ export function EditSyncAccount({ account }: EditSyncAccountProps) {
             setMapping={setMapping}
           />
 
-          <Text style={{ fontSize: 15, margin: '1em 0 .5em 0' }}>
+          <Text size="large" style={{ margin: '1em 0 .5em 0' }}>
             <Trans>Options</Trans>
           </Text>
 
diff --git a/packages/desktop-client/src/components/banksync/FieldMapping.tsx b/packages/desktop-client/src/components/banksync/FieldMapping.tsx
index 803dbb0edf..d3610d2703 100644
--- a/packages/desktop-client/src/components/banksync/FieldMapping.tsx
+++ b/packages/desktop-client/src/components/banksync/FieldMapping.tsx
@@ -112,7 +112,8 @@ export function FieldMapping({
               plain
             >
               <Text
-                style={{ whiteSpace: 'nowrap', fontSize: 13, fontWeight: 500 }}
+                size="medium"
+                style={{ whiteSpace: 'nowrap', fontWeight: 500 }}
               >
                 {calculatedActualFieldWidth > 70 ? t('Actual field') : 'Actual'}
               </Text>
@@ -150,7 +151,7 @@ export function FieldMapping({
                   style={{ ...commonCellStyle, paddingLeft: '10px' }}
                   plain
                 >
-                  <Text style={{ whiteSpace: 'nowrap', fontSize: 13 }}>
+                  <Text size="medium" style={{ whiteSpace: 'nowrap' }}>
                     {field.actualField}
                   </Text>
                 </Cell>
diff --git a/packages/desktop-client/src/components/budget/goals/editor/CleanupAutomation.tsx b/packages/desktop-client/src/components/budget/goals/editor/CleanupAutomation.tsx
index be5a0c81b8..5e6fe3a218 100644
--- a/packages/desktop-client/src/components/budget/goals/editor/CleanupAutomation.tsx
+++ b/packages/desktop-client/src/components/budget/goals/editor/CleanupAutomation.tsx
@@ -72,7 +72,7 @@ export function CleanupAutomation({
 
   return (
     <View style={{ gap: 14 }}>
-      <Text style={{ fontSize: 12, color: theme.pageTextLight }}>
+      <Text size="small" style={{ color: theme.pageTextLight }}>
         <Trans>
           End of month cleanup is a one-click reallocation of funds. Categories
           you choose to <strong>send leftover</strong> return their surplus to a
diff --git a/packages/desktop-client/src/components/budget/goals/editor/LimitAutomation.tsx b/packages/desktop-client/src/components/budget/goals/editor/LimitAutomation.tsx
index c460a5328a..6f9b2148db 100644
--- a/packages/desktop-client/src/components/budget/goals/editor/LimitAutomation.tsx
+++ b/packages/desktop-client/src/components/budget/goals/editor/LimitAutomation.tsx
@@ -4,6 +4,7 @@ import { Select } from '@actual-app/components/select';
 import { SpaceBetween } from '@actual-app/components/space-between';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
+import { spacing } from '@actual-app/components/tokens';
 import {
   dayFromDate,
   firstDayOfMonth,
@@ -129,11 +130,11 @@ export const LimitAutomation = ({
       </SpaceBetween>
 
       <Text
+        size="small"
         style={{
-          fontSize: 12,
           color: theme.pageTextLight,
           display: 'block',
-          marginTop: 8,
+          marginTop: spacing.sm,
         }}
       >
         <Trans>
diff --git a/packages/desktop-client/src/components/budget/goals/editor/RemainderAutomation.tsx b/packages/desktop-client/src/components/budget/goals/editor/RemainderAutomation.tsx
index 75794eb1ed..39a24fdbd7 100644
--- a/packages/desktop-client/src/components/budget/goals/editor/RemainderAutomation.tsx
+++ b/packages/desktop-client/src/components/budget/goals/editor/RemainderAutomation.tsx
@@ -51,7 +51,7 @@ export const RemainderAutomation = ({
           onBlur={commitWeight}
         />
       </FormField>
-      <Text style={{ flex: 2, color: theme.pageTextLight, fontSize: 12 }}>
+      <Text size="small" style={{ flex: 2, color: theme.pageTextLight }}>
         <Trans>
           Categories with higher weights get a bigger share of the leftover To
           Budget.
diff --git a/packages/desktop-client/src/components/formula/QueryManager.tsx b/packages/desktop-client/src/components/formula/QueryManager.tsx
index 945cd9c2fe..37aac78386 100644
--- a/packages/desktop-client/src/components/formula/QueryManager.tsx
+++ b/packages/desktop-client/src/components/formula/QueryManager.tsx
@@ -11,6 +11,7 @@ import { Input } from '@actual-app/components/input';
 import { Popover } from '@actual-app/components/popover';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
+import { spacing } from '@actual-app/components/tokens';
 import { View } from '@actual-app/components/view';
 import { send } from '@actual-app/core/platform/client/connection';
 import * as monthUtils from '@actual-app/core/shared/months';
@@ -254,7 +255,7 @@ export function QueryManager({ queries, onQueriesChange }: QueryManagerProps) {
               No queries defined. Click 'Add Query' to create your first query.
             </Trans>
           </Text>
-          <Text style={{ fontSize: 12, marginTop: 8 }}>
+          <Text size="small" style={{ marginTop: spacing.sm }}>
             <Trans>
               Queries allow you to reference filtered transaction data in your
               formulas using QUERY("queryName") or QUERY_COUNT("queryName")
@@ -665,10 +666,10 @@ function QueryItem({
                       <Trans>Import Query Configuration</Trans>
                     </Text>
                     <Text
+                      size="small"
                       style={{
-                        fontSize: 12,
                         color: theme.pageTextSubdued,
-                        marginBottom: 8,
+                        marginBottom: spacing.sm,
                       }}
                     >
                       <Trans>Paste the JSON configuration below:</Trans>
@@ -845,10 +846,10 @@ function QueryItem({
         ) : null}
       </View>
 
-      <View style={{ marginBottom: 8, flex: 1 }}>
+      <View style={{ marginBottom: spacing.sm, flex: 1 }}>
         <Text
+          size="small"
           style={{
-            fontSize: 12,
             fontWeight: 500,
             marginBottom: 6,
             color: theme.pageTextSubdued,
diff --git a/packages/desktop-client/src/components/manager/BudgetFileSelection.tsx b/packages/desktop-client/src/components/manager/BudgetFileSelection.tsx
index c044026a9c..0bcf1c5e52 100644
--- a/packages/desktop-client/src/components/manager/BudgetFileSelection.tsx
+++ b/packages/desktop-client/src/components/manager/BudgetFileSelection.tsx
@@ -249,8 +249,8 @@ function BudgetFileState({ file, currentUserId }: BudgetFileStateProps) {
               <Trans>Owner:</Trans>
             </Text>
             <Text
+              size="small"
               style={{
-                ...styles.verySmallText,
                 color: theme.pageTextLight,
                 paddingLeft: 10,
               }}
diff --git a/packages/desktop-client/src/components/manager/ConfigServer.tsx b/packages/desktop-client/src/components/manager/ConfigServer.tsx
index b44787767c..d4ac1ed334 100644
--- a/packages/desktop-client/src/components/manager/ConfigServer.tsx
+++ b/packages/desktop-client/src/components/manager/ConfigServer.tsx
@@ -455,11 +455,11 @@ export function ConfigServer() {
           {error && (
             <>
               <Text
+                size="large"
                 style={{
                   marginTop: 20,
                   color: theme.errorText,
                   borderRadius: 4,
-                  fontSize: 15,
                 }}
               >
                 {getErrorMessage(error)}
@@ -473,10 +473,10 @@ export function ConfigServer() {
                   }}
                 >
                   <Text
+                    size="large"
                     style={{
                       color: theme.errorText,
                       borderRadius: 4,
-                      fontSize: 15,
                     }}
                   >
                     <Trans>
diff --git a/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx b/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx
index 224c5e5591..b9ee29c347 100644
--- a/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx
+++ b/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx
@@ -89,11 +89,11 @@ export function Bootstrap() {
 
       {error && (
         <Text
+          size="large"
           style={{
             marginTop: 20,
             color: theme.errorText,
             borderRadius: 4,
-            fontSize: 15,
           }}
         >
           {getErrorMessage(error)}
diff --git a/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx b/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx
index d50292168e..37c78221e3 100644
--- a/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx
+++ b/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx
@@ -64,11 +64,11 @@ export function ChangePassword() {
 
       {error && (
         <Text
+          size="large"
           style={{
             marginTop: 20,
             color: theme.errorText,
             borderRadius: 4,
-            fontSize: 15,
           }}
         >
           {getErrorMessage(error)}
@@ -77,11 +77,11 @@ export function ChangePassword() {
 
       {msg && (
         <Text
+          size="large"
           style={{
             marginTop: 20,
             color: theme.noticeTextLight,
             borderRadius: 4,
-            fontSize: 15,
           }}
         >
           {msg}
diff --git a/packages/desktop-client/src/components/manager/subscribe/Login.tsx b/packages/desktop-client/src/components/manager/subscribe/Login.tsx
index 64c517966e..d817266d3c 100644
--- a/packages/desktop-client/src/components/manager/subscribe/Login.tsx
+++ b/packages/desktop-client/src/components/manager/subscribe/Login.tsx
@@ -228,8 +228,8 @@ function OpenIdLogin({ setError }) {
       {reviewOpenIdConfiguration && (
         <View style={{ marginTop: 20 }}>
           <Text
+            size="small"
             style={{
-              ...styles.verySmallText,
               color: theme.pageTextLight,
               fontWeight: 'bold ',
               width: '100%',
@@ -433,11 +433,11 @@ export function Login() {
 
       {error && (
         <Text
+          size="large"
           style={{
             marginTop: 20,
             color: theme.errorText,
             borderRadius: 4,
-            fontSize: 15,
           }}
         >
           {getErrorMessage(error)}
diff --git a/packages/desktop-client/src/components/manager/subscribe/OpenIdForm.tsx b/packages/desktop-client/src/components/manager/subscribe/OpenIdForm.tsx
index 21eb9835d5..fc97ea89bd 100644
--- a/packages/desktop-client/src/components/manager/subscribe/OpenIdForm.tsx
+++ b/packages/desktop-client/src/components/manager/subscribe/OpenIdForm.tsx
@@ -162,8 +162,8 @@ export function OpenIdForm({
       >
         {!submitButtonDisabled && t('The OpenID provider URL.')}{' '}
         <Text
+          size="small"
           style={{
-            ...styles.verySmallText,
             color: theme.pageTextLight,
           }}
         >
diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountPage.tsx b/packages/desktop-client/src/components/mobile/accounts/AccountPage.tsx
index ebcfb540f6..cc435e1821 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountPage.tsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountPage.tsx
@@ -246,8 +246,8 @@ function AccountHeader({ account }: { readonly account: AccountEntity }) {
       )}
       <Button variant="bare" onPress={onClick}>
         <Text
+          size="extra-large"
           style={{
-            fontSize: 17,
             fontWeight: 500,
             ...styles.underlinedText,
             ...(styles.lineClamp(2) as CSSProperties),
diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountsPage.tsx b/packages/desktop-client/src/components/mobile/accounts/AccountsPage.tsx
index 054cf8580c..3acc2c339f 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountsPage.tsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountsPage.tsx
@@ -91,13 +91,7 @@ function AccountHeader<SheetFieldName extends SheetFields<'account'>>({
       ])}
     >
       <View style={{ flex: 1, alignItems: 'center', flexDirection: 'row' }}>
-        <Text
-          style={{
-            ...styles.text,
-            fontSize: 17,
-          }}
-          data-testid="name"
-        >
+        <Text size="extra-large" data-testid="name">
           {name}
         </Text>
         <Cheveron
diff --git a/packages/desktop-client/src/components/mobile/banksync/BankSyncAccountsListItem.tsx b/packages/desktop-client/src/components/mobile/banksync/BankSyncAccountsListItem.tsx
index 37898369bf..ce88ba8b16 100644
--- a/packages/desktop-client/src/components/mobile/banksync/BankSyncAccountsListItem.tsx
+++ b/packages/desktop-client/src/components/mobile/banksync/BankSyncAccountsListItem.tsx
@@ -3,6 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { SpaceBetween } from '@actual-app/components/space-between';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
+import { spacing } from '@actual-app/components/tokens';
 import { View } from '@actual-app/components/view';
 import { tsToRelativeTime } from '@actual-app/core/shared/util';
 import type { AccountEntity } from '@actual-app/core/types/models';
@@ -37,21 +38,21 @@ export function BankSyncAccountsListItem({
         borderBottomWidth: 1,
         borderBottomColor: theme.tableBorder,
         borderBottomStyle: 'solid',
-        padding: 16,
+        padding: spacing.lg,
         width: '100%',
         cursor: 'pointer',
       }}
       onClick={() => onAction(account, isLinked ? 'edit' : 'link')}
     >
-      <SpaceBetween gap={60}>
+      <SpaceBetween gap={spacing.lg}>
         <SpaceBetween
           direction="vertical"
           gap={5}
           style={{ flex: 1, alignItems: 'flex-start' }}
         >
           <Text
+            size="large"
             style={{
-              fontSize: 15,
               fontWeight: 500,
               color: theme.tableText,
             }}
@@ -60,8 +61,8 @@ export function BankSyncAccountsListItem({
           </Text>
           {isLinked && (
             <Text
+              size="medium"
               style={{
-                fontSize: 13,
                 color: theme.pageTextSubdued,
               }}
             >
@@ -70,8 +71,8 @@ export function BankSyncAccountsListItem({
           )}
           {isLinked && lastSyncString && (
             <Text
+              size="medium"
               style={{
-                fontSize: 13,
                 color: theme.pageTextSubdued,
               }}
               data-vrt-mask
diff --git a/packages/desktop-client/src/components/mobile/banksync/MobileBankSyncAccountEditPage.tsx b/packages/desktop-client/src/components/mobile/banksync/MobileBankSyncAccountEditPage.tsx
index 07ca6c2173..325cb87f73 100644
--- a/packages/desktop-client/src/components/mobile/banksync/MobileBankSyncAccountEditPage.tsx
+++ b/packages/desktop-client/src/components/mobile/banksync/MobileBankSyncAccountEditPage.tsx
@@ -6,6 +6,7 @@ import { Button } from '@actual-app/components/button';
 import { SpaceBetween } from '@actual-app/components/space-between';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
+import { spacing } from '@actual-app/components/tokens';
 import { View } from '@actual-app/components/view';
 
 import { useUnlinkAccountMutation } from '#accounts';
@@ -126,8 +127,8 @@ export function MobileBankSyncAccountEditPage() {
             overflow: 'auto',
           }}
         >
-          <View style={{ padding: 16 }}>
-            <Text style={{ fontSize: 15, marginBottom: 10 }}>
+          <View style={{ padding: spacing.lg }}>
+            <Text size="large" style={{ marginBottom: 10 }}>
               <Trans>Field mapping</Trans>
             </Text>
 
@@ -140,7 +141,7 @@ export function MobileBankSyncAccountEditPage() {
               isMobile
             />
 
-            <Text style={{ fontSize: 15, marginTop: 20, marginBottom: 10 }}>
+            <Text size="large" style={{ marginTop: 20, marginBottom: 10 }}>
               <Trans>Options</Trans>
             </Text>
 
diff --git a/packages/desktop-client/src/components/mobile/schedules/SchedulesListItem.tsx b/packages/desktop-client/src/components/mobile/schedules/SchedulesListItem.tsx
index a624e57544..148a8bdd49 100644
--- a/packages/desktop-client/src/components/mobile/schedules/SchedulesListItem.tsx
+++ b/packages/desktop-client/src/components/mobile/schedules/SchedulesListItem.tsx
@@ -77,8 +77,8 @@ export function SchedulesListItem({
         >
           {/* Schedule name */}
           <Text
+            size="large"
             style={{
-              fontSize: 15,
               fontWeight: 600,
               color: schedule.name
                 ? theme.pageText
diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionList.tsx b/packages/desktop-client/src/components/mobile/transactions/TransactionList.tsx
index 8d947f9692..ba67ff81a6 100644
--- a/packages/desktop-client/src/components/mobile/transactions/TransactionList.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/TransactionList.tsx
@@ -201,7 +201,7 @@ export function TransactionList({
                     backgroundColor: theme.mobilePageBackground,
                   }}
                 >
-                  <Text style={{ fontSize: 15 }}>
+                  <Text size="large">
                     <Trans>No transactions</Trans>
                   </Text>
                 </View>
diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
index 6f7fe96648..5a560b3a9e 100644
--- a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
@@ -196,7 +196,7 @@ function AppliedFiltersChip() {
       }}
     >
       <SvgFilter width={12} height={12} style={{ flexShrink: 0 }} />
-      <Text style={{ fontSize: 12, fontWeight: 500 }}>
+      <Text size="small" style={{ fontWeight: 500 }}>
         <Trans>Filters applied</Trans>
       </Text>
     </View>
diff --git a/packages/desktop-client/src/components/modals/BudgetAutomationsModal/AutomationEditorPane.tsx b/packages/desktop-client/src/components/modals/BudgetAutomationsModal/AutomationEditorPane.tsx
index 3e3efe8e3c..2dee4b53c7 100644
--- a/packages/desktop-client/src/components/modals/BudgetAutomationsModal/AutomationEditorPane.tsx
+++ b/packages/desktop-client/src/components/modals/BudgetAutomationsModal/AutomationEditorPane.tsx
@@ -7,7 +7,7 @@ import { Input } from '@actual-app/components/input';
 import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
-import { tokens } from '@actual-app/components/tokens';
+import { spacing, tokens } from '@actual-app/components/tokens';
 import { View } from '@actual-app/components/view';
 import { dayFromDate, firstDayOfMonth } from '@actual-app/core/shared/months';
 import type {
@@ -230,9 +230,9 @@ export function AutomationEditorPane({
                 <AutomationErrorTitle error={activeError} />
               </Text>
               <Text
+                size="small"
                 style={{
-                  fontSize: 12,
-                  marginTop: 2,
+                  marginTop: spacing.xxs,
                   color: 'inherit',
                   display: 'block',
                 }}
@@ -288,11 +288,11 @@ export function AutomationEditorPane({
             >
               {NON_CONTRIBUTION_TYPES.has(state.displayType) && (
                 <Text
+                  size="small"
                   style={{
-                    fontSize: 12,
                     color: theme.pageTextLight,
                     display: 'block',
-                    marginBottom: 4,
+                    marginBottom: spacing.xs,
                   }}
                 >
                   {getDisplayTemplateMeta(state.displayType).description}
diff --git a/packages/desktop-client/src/components/modals/BudgetAutomationsModal/AutomationListRow.tsx b/packages/desktop-client/src/components/modals/BudgetAutomationsModal/AutomationListRow.tsx
index c59b2446f3..a6932e406b 100644
--- a/packages/desktop-client/src/components/modals/BudgetAutomationsModal/AutomationListRow.tsx
+++ b/packages/desktop-client/src/components/modals/BudgetAutomationsModal/AutomationListRow.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { SvgAlertTriangle } from '@actual-app/components/icons/v2';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
+import { spacing } from '@actual-app/components/tokens';
 import { Tooltip } from '@actual-app/components/tooltip';
 import { View } from '@actual-app/components/view';
 
@@ -165,12 +166,12 @@ export function AutomationListRow({
           style={{
             flexShrink: 0,
             alignItems: 'flex-end',
-            gap: 2,
+            gap: spacing.xxs,
           }}
         >
           <Text
+            size="small"
             style={{
-              fontSize: 12,
               fontWeight: 600,
               fontVariantNumeric: 'tabular-nums',
               color:
diff --git a/packages/desktop-client/src/components/modals/BudgetAutomationsModal/BudgetAutomationsBody.tsx b/packages/desktop-client/src/components/modals/BudgetAutomationsModal/BudgetAutomationsBody.tsx
index 6ab02285a5..5d551e7bd2 100644
--- a/packages/desktop-client/src/components/modals/BudgetAutomationsModal/BudgetAutomationsBody.tsx
+++ b/packages/desktop-client/src/components/modals/BudgetAutomationsModal/BudgetAutomationsBody.tsx
@@ -185,7 +185,7 @@ export function BudgetAutomationsBody({
         }}
       >
         <View style={{ minWidth: 0 }}>
-          <Text style={{ fontSize: 12, color: theme.pageTextLight }}>
+          <Text size="small" style={{ color: theme.pageTextLight }}>
             <Trans>Budget automation</Trans>
           </Text>
           <Text
diff --git a/packages/desktop-client/src/components/modals/BudgetAutomationsModal/CleanupListRow.tsx b/packages/desktop-client/src/components/modals/BudgetAutomationsModal/CleanupListRow.tsx
index 54e2876d4d..61e54450eb 100644
--- a/packages/desktop-client/src/components/modals/BudgetAutomationsModal/CleanupListRow.tsx
+++ b/packages/desktop-client/src/components/modals/BudgetAutomationsModal/CleanupListRow.tsx
@@ -68,8 +68,8 @@ export function CleanupListRow({
       </View>
       <View style={{ minWidth: 0, flex: 1 }}>
         <Text
+          size="small"
           style={{
-            fontSize: 12,
             fontWeight: 600,
             color: theme.pageText,
             display: 'block',
diff --git a/packages/desktop-client/src/components/modals/BudgetAutomationsModal/EmptyState.tsx b/packages/desktop-client/src/components/modals/BudgetAutomationsModal/EmptyState.tsx
index 43e7c9c140..a111d46737 100644
--- a/packages/desktop-client/src/components/modals/BudgetAutomationsModal/EmptyState.tsx
+++ b/packages/desktop-client/src/components/modals/BudgetAutomationsModal/EmptyState.tsx
@@ -3,6 +3,7 @@ import { Trans } from 'react-i18next';
 import { SvgAlertTriangle } from '@actual-app/components/icons/v2';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
+import { spacing } from '@actual-app/components/tokens';
 import { View } from '@actual-app/components/view';
 
 import { getAutomationExamples } from '#components/budget/goals/automationExamples';
@@ -50,10 +51,10 @@ export function EmptyState({ onAdd }: EmptyStateProps) {
         <Trans>No automations yet</Trans>
       </Text>
       <Text
+        size="medium"
         style={{
-          fontSize: 13,
           color: theme.pageTextLight,
-          marginTop: 4,
+          marginTop: spacing.xs,
           marginBottom: 22,
           display: 'block',
         }}
@@ -112,8 +113,8 @@ export function EmptyState({ onAdd }: EmptyStateProps) {
                 <Icon width={16} height={16} />
               </View>
               <Text
+                size="medium"
                 style={{
-                  fontSize: 13,
                   fontWeight: 600,
                   color: theme.pageText,
                 }}
diff --git a/packages/desktop-client/src/components/modals/CloseAccountModal.tsx b/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
index 867f961b26..29fc81d2ff 100644
--- a/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
+++ b/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
@@ -270,7 +270,7 @@ export function CloseAccountModal({
 
               {!canDelete && (
                 <View style={{ marginBottom: 15 }}>
-                  <Text style={{ fontSize: 12 }}>
+                  <Text size="small">
                     <Trans>
                       You can also{' '}
                       <Link
diff --git a/packages/desktop-client/src/components/modals/EnableBankingInitialiseModal.tsx b/packages/desktop-client/src/components/modals/EnableBankingInitialiseModal.tsx
index 951395b3da..8388a39d47 100644
--- a/packages/desktop-client/src/components/modals/EnableBankingInitialiseModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnableBankingInitialiseModal.tsx
@@ -196,7 +196,7 @@ export function EnableBankingInitialiseModal({
                 <SvgCheckCircle1
                   style={{ width: 14, height: 14, color: theme.noticeText }}
                 />
-                <Text style={{ fontSize: 12, color: theme.pageTextSubdued }}>
+                <Text size="small" style={{ color: theme.pageTextSubdued }}>
                   {keyFileName}
                 </Text>
               </View>
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
index 7b8427ec87..8a5f720093 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
@@ -62,12 +62,7 @@ export function EnvelopeBalanceMenuModal({
               marginBottom: 20,
             }}
           >
-            <Text
-              style={{
-                fontSize: 17,
-                fontWeight: 400,
-              }}
-            >
+            <Text size="extra-large" style={{ fontWeight: 400 }}>
               <Trans>Balance</Trans>
             </Text>
             <BalanceWithCarryover
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
index 88dc5fe72c..07847fad5a 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
@@ -107,12 +107,7 @@ export function EnvelopeBudgetMenuModal({
               alignItems: 'center',
             }}
           >
-            <Text
-              style={{
-                fontSize: 17,
-                fontWeight: 400,
-              }}
-            >
+            <Text size="extra-large" style={{ fontWeight: 400 }}>
               <Trans>Budgeted</Trans>
             </Text>
             <AmountInput
diff --git a/packages/desktop-client/src/components/modals/EnvelopeIncomeBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeIncomeBalanceMenuModal.tsx
index 914aef9557..e38fb4d238 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeIncomeBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeIncomeBalanceMenuModal.tsx
@@ -67,12 +67,7 @@ export function EnvelopeIncomeBalanceMenuModal({
               marginBottom: 20,
             }}
           >
-            <Text
-              style={{
-                fontSize: 17,
-                fontWeight: 400,
-              }}
-            >
+            <Text size="extra-large" style={{ fontWeight: 400 }}>
               <Trans>Balance</Trans>
             </Text>
             <BalanceWithCarryover
diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/SubLabel.tsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/SubLabel.tsx
index c82e43b47d..a31101e927 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactionsModal/SubLabel.tsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactionsModal/SubLabel.tsx
@@ -9,7 +9,7 @@ type SubLabelProps = {
 
 export function SubLabel({ title }: SubLabelProps) {
   return (
-    <Text style={{ fontSize: 13, marginBottom: 3, color: theme.pageText }}>
+    <Text size="medium" style={{ marginBottom: 3, color: theme.pageText }}>
       {title}
     </Text>
   );
diff --git a/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx b/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx
index a599e8f01f..c3a3f70442 100644
--- a/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx
+++ b/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx
@@ -564,7 +564,7 @@ export function KeyboardShortcutModal() {
                     padding: 20,
                   }}
                 >
-                  <Text style={{ fontSize: 15 }}>
+                  <Text size="large">
                     <Trans>
                       {isSearching
                         ? 'No matching shortcuts'
diff --git a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
index 44398cac1b..b38443b984 100644
--- a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
@@ -76,10 +76,10 @@ export function ScheduledTransactionMenuModal({
               marginBottom: 20,
             }}
           >
-            <Text style={{ fontSize: 17, fontWeight: 400 }}>
+            <Text size="extra-large" style={{ fontWeight: 400 }}>
               <Trans>Scheduled date</Trans>
             </Text>
-            <Text style={{ fontSize: 17, fontWeight: 700 }}>
+            <Text size="extra-large" style={{ fontWeight: 700 }}>
               {format(schedule?.next_date || '', 'MMMM dd, yyyy', locale)}
             </Text>
           </View>
diff --git a/packages/desktop-client/src/components/modals/SelectLinkedAccountsModal.tsx b/packages/desktop-client/src/components/modals/SelectLinkedAccountsModal.tsx
index 463ceb9d7c..348736a8fa 100644
--- a/packages/desktop-client/src/components/modals/SelectLinkedAccountsModal.tsx
+++ b/packages/desktop-client/src/components/modals/SelectLinkedAccountsModal.tsx
@@ -8,6 +8,7 @@ import { SpaceBetween } from '@actual-app/components/space-between';
 import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
+import { spacing } from '@actual-app/components/tokens';
 import { Tooltip } from '@actual-app/components/tooltip';
 import { View } from '@actual-app/components/view';
 import { currentDay, subDays } from '@actual-app/core/shared/months';
@@ -982,9 +983,9 @@ function StartingOptionsFields({
       <View style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
         <View>
           <Text
+            size="medium"
             style={{
-              marginBottom: 4,
-              fontSize: 13,
+              marginBottom: spacing.xs,
               color: theme.pageTextSubdued,
             }}
           >
@@ -1004,9 +1005,9 @@ function StartingOptionsFields({
         </View>
         <View>
           <Text
+            size="medium"
             style={{
-              marginBottom: 4,
-              fontSize: 13,
+              marginBottom: spacing.xs,
               color: theme.pageTextSubdued,
             }}
           >
diff --git a/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
index d147b6a399..39c1f526be 100644
--- a/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
@@ -60,12 +60,7 @@ export function TrackingBalanceMenuModal({
               marginBottom: 20,
             }}
           >
-            <Text
-              style={{
-                fontSize: 17,
-                fontWeight: 400,
-              }}
-            >
+            <Text size="extra-large" style={{ fontWeight: 400 }}>
               <Trans>Balance</Trans>
             </Text>
             <BalanceWithCarryover
diff --git a/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx
index 5c536bdfad..f311f0056b 100644
--- a/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx
@@ -107,12 +107,7 @@ export function TrackingBudgetMenuModal({
               alignItems: 'center',
             }}
           >
-            <Text
-              style={{
-                fontSize: 17,
-                fontWeight: 400,
-              }}
-            >
+            <Text size="extra-large" style={{ fontWeight: 400 }}>
               <Trans>Budgeted</Trans>
             </Text>
             <AmountInput
diff --git a/packages/desktop-client/src/components/modals/TransactionTableColumnListItem.tsx b/packages/desktop-client/src/components/modals/TransactionTableColumnListItem.tsx
index 57179c16de..396c858b76 100644
--- a/packages/desktop-client/src/components/modals/TransactionTableColumnListItem.tsx
+++ b/packages/desktop-client/src/components/modals/TransactionTableColumnListItem.tsx
@@ -79,10 +79,10 @@ export function TransactionTableColumnListItem({
       </Text>
       {isLocked ? (
         <Text
+          size="small"
           style={{
             color: theme.pageTextSubdued,
             fontStyle: 'italic',
-            fontSize: 12,
           }}
         >
           <Trans>Always shown</Trans>
diff --git a/packages/desktop-client/src/components/modals/TransactionTableColumnsModal.tsx b/packages/desktop-client/src/components/modals/TransactionTableColumnsModal.tsx
index d63e3dfed6..7b3557f292 100644
--- a/packages/desktop-client/src/components/modals/TransactionTableColumnsModal.tsx
+++ b/packages/desktop-client/src/components/modals/TransactionTableColumnsModal.tsx
@@ -6,6 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Button } from '@actual-app/components/button';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
+import { spacing } from '@actual-app/components/tokens';
 import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
 
@@ -170,11 +171,11 @@ export function TransactionTableColumnsModal({
                   <Trans>Apply to all transaction tables</Trans>
                 </Text>
                 <Text
+                  size="small"
                   style={{
                     display: 'block',
                     color: theme.pageTextSubdued,
-                    fontSize: 12,
-                    marginTop: 2,
+                    marginTop: spacing.xxs,
                   }}
                 >
                   <Trans>
diff --git a/packages/desktop-client/src/components/news/MarkdownBlockquote.tsx b/packages/desktop-client/src/components/news/MarkdownBlockquote.tsx
index abc9aeaf35..b9c4146aef 100644
--- a/packages/desktop-client/src/components/news/MarkdownBlockquote.tsx
+++ b/packages/desktop-client/src/components/news/MarkdownBlockquote.tsx
@@ -9,6 +9,7 @@ import {
 } from '@actual-app/components/icons/v1';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
+import { spacing } from '@actual-app/components/tokens';
 import { View } from '@actual-app/components/view';
 
 import { Alert } from '#components/alerts';
@@ -96,11 +97,11 @@ export function MarkdownBlockquote({
 
   return (
     <Alert {...admonitionStyles[marker.type]} style={{ margin: '10px 0' }}>
-      <View style={{ gap: 4 }}>
+      <View style={{ gap: spacing.xs }}>
         <Text
+          size="small"
           style={{
             fontWeight: 700,
-            fontSize: 12,
             textTransform: 'uppercase',
             letterSpacing: 0.5,
           }}
diff --git a/packages/desktop-client/src/components/reports/reports/Sankey.tsx b/packages/desktop-client/src/components/reports/reports/Sankey.tsx
index c364920774..595f46f01a 100644
--- a/packages/desktop-client/src/components/reports/reports/Sankey.tsx
+++ b/packages/desktop-client/src/components/reports/reports/Sankey.tsx
@@ -994,7 +994,7 @@ function SankeyInner({ widget }: SankeyInnerProps) {
                       color: theme.warningText,
                     }}
                   >
-                    <Text style={{ fontSize: 13 }}>
+                    <Text size="medium">
                       <Trans>
                         Filters on <strong>{ignoredFilterFieldsList}</strong>{' '}
                         are ignored in <strong>Budgeted</strong> mode.
diff --git a/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloContributions.tsx b/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloContributions.tsx
index 28b3ef4c59..35c59801ce 100644
--- a/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloContributions.tsx
+++ b/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloContributions.tsx
@@ -409,7 +409,7 @@ export function MonteCarloContributions({
                       padding: '2px 10px 8px',
                     }}
                   >
-                    <Text style={{ color: theme.warningText, fontSize: 13 }}>
+                    <Text size="medium" style={{ color: theme.warningText }}>
                       <Trans>
                         {{ stream: getIncomeStreamLabel(sourceIndex) }} pays{' '}
                         <PrivacyFilter>
diff --git a/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloRunDetailTable.tsx b/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloRunDetailTable.tsx
index c5ce2c4851..29c331dea1 100644
--- a/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloRunDetailTable.tsx
+++ b/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloRunDetailTable.tsx
@@ -10,6 +10,7 @@ import {
 import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
+import { spacing } from '@actual-app/components/tokens';
 import { View } from '@actual-app/components/view';
 
 import { FinancialText } from '#components/FinancialText';
@@ -421,7 +422,7 @@ export function MonteCarloRunDetailTable({
 
       {cashflowGraph}
 
-      <Text style={{ fontSize: 13, color: theme.pageText, marginBottom: 10 }}>
+      <Text size="medium" style={{ color: theme.pageText, marginBottom: 10 }}>
         <PrivacyFilter>
           <FinancialText as="span">{getTotalsSentence()}</FinancialText>
         </PrivacyFilter>
@@ -657,10 +658,10 @@ export function MonteCarloRunDetailTable({
                     style={{
                       borderBottom: `1px solid ${theme.tableBorder}`,
                       padding: '10px 12px 12px 46px',
-                      gap: 4,
+                      gap: spacing.xs,
                     }}
                   >
-                    <Text style={{ fontSize: 13, color: theme.pageText }}>
+                    <Text size="medium" style={{ color: theme.pageText }}>
                       <PrivacyFilter>
                         <FinancialText as="span">
                           {buildMonteCarloYearStory({
@@ -691,9 +692,9 @@ export function MonteCarloRunDetailTable({
                       )}
                     </Button>
                     {showsWorking && (
-                      <View style={{ gap: 4, marginTop: 6 }}>
+                      <View style={{ gap: spacing.xs, marginTop: 6 }}>
                         {row.ruleExplanation != null && (
-                          <Text style={{ fontSize: 13, color: theme.pageText }}>
+                          <Text size="medium" style={{ color: theme.pageText }}>
                             <PrivacyFilter>
                               <FinancialText as="span">
                                 {getRuleExplanationSentence(
@@ -704,7 +705,7 @@ export function MonteCarloRunDetailTable({
                           </Text>
                         )}
                         {row.minimumApplied && (
-                          <Text style={{ fontSize: 13, color: theme.pageText }}>
+                          <Text size="medium" style={{ color: theme.pageText }}>
                             <PrivacyFilter>
                               <FinancialText as="span">
                                 {t(
@@ -721,7 +722,7 @@ export function MonteCarloRunDetailTable({
                           </Text>
                         )}
                         {row.income > 0 && (
-                          <Text style={{ fontSize: 13, color: theme.pageText }}>
+                          <Text size="medium" style={{ color: theme.pageText }}>
                             <PrivacyFilter>
                               <FinancialText as="span">
                                 {row.incomeTax > 0
@@ -755,7 +756,7 @@ export function MonteCarloRunDetailTable({
                             </PrivacyFilter>
                           </Text>
                         )}
-                        <Text style={{ fontSize: 13, color: theme.pageText }}>
+                        <Text size="medium" style={{ color: theme.pageText }}>
                           <PrivacyFilter>
                             <FinancialText as="span">
                               {row.taxPaid > 0
@@ -776,7 +777,7 @@ export function MonteCarloRunDetailTable({
                             </FinancialText>
                           </PrivacyFilter>
                         </Text>
-                        <Text style={{ fontSize: 13, color: theme.pageText }}>
+                        <Text size="medium" style={{ color: theme.pageText }}>
                           <PrivacyFilter>
                             <FinancialText as="span">
                               {getSpentSentence(row)}
@@ -784,7 +785,7 @@ export function MonteCarloRunDetailTable({
                           </PrivacyFilter>
                         </Text>
                         {row.surplusSaved > 0 && (
-                          <Text style={{ fontSize: 13, color: theme.pageText }}>
+                          <Text size="medium" style={{ color: theme.pageText }}>
                             <PrivacyFilter>
                               <FinancialText as="span">
                                 {getSavedSentence(row)}
@@ -793,7 +794,7 @@ export function MonteCarloRunDetailTable({
                           </Text>
                         )}
                         {row.unspentIncome > 0 && row.surplusSaved === 0 && (
-                          <Text style={{ fontSize: 13, color: theme.pageText }}>
+                          <Text size="medium" style={{ color: theme.pageText }}>
                             <PrivacyFilter>
                               <FinancialText as="span">
                                 {t(
@@ -810,7 +811,7 @@ export function MonteCarloRunDetailTable({
                           </Text>
                         )}
                         {row.contributions > 0 && (
-                          <Text style={{ fontSize: 13, color: theme.pageText }}>
+                          <Text size="medium" style={{ color: theme.pageText }}>
                             <PrivacyFilter>
                               <FinancialText as="span">
                                 {t(
@@ -827,7 +828,7 @@ export function MonteCarloRunDetailTable({
                           </Text>
                         )}
                         {row.feesPaid > 0 && (
-                          <Text style={{ fontSize: 13, color: theme.pageText }}>
+                          <Text size="medium" style={{ color: theme.pageText }}>
                             <PrivacyFilter>
                               <FinancialText as="span">
                                 {t(
@@ -841,7 +842,7 @@ export function MonteCarloRunDetailTable({
                           </Text>
                         )}
                         {row.inaccessibleBalance != null && (
-                          <Text style={{ fontSize: 13, color: theme.pageText }}>
+                          <Text size="medium" style={{ color: theme.pageText }}>
                             <PrivacyFilter>
                               <FinancialText as="span">
                                 {t(
diff --git a/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloWithdrawalRuleConfiguration.tsx b/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloWithdrawalRuleConfiguration.tsx
index 9cec5c92f3..9f554bfec0 100644
--- a/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloWithdrawalRuleConfiguration.tsx
+++ b/packages/desktop-client/src/components/reports/reports/monte-carlo/MonteCarloWithdrawalRuleConfiguration.tsx
@@ -314,7 +314,7 @@ export function MonteCarloWithdrawalRuleConfiguration({
       )}
 
       {rule.type !== 'none' && (
-        <Text style={{ color: theme.pageText, fontSize: 13 }}>
+        <Text size="medium" style={{ color: theme.pageText }}>
           {rule.type === 'guardrails'
             ? t(
                 'A deliberate spending-phase change is not counted as drift. The rule adjusts your planned spending year by year, independently in every scenario, and only looks at the pots you can currently access - locked pots count from the moment they unlock.',
diff --git a/packages/desktop-client/src/components/rules/RuleEditor.tsx b/packages/desktop-client/src/components/rules/RuleEditor.tsx
index 1af6f686ac..60bbf80cf8 100644
--- a/packages/desktop-client/src/components/rules/RuleEditor.tsx
+++ b/packages/desktop-client/src/components/rules/RuleEditor.tsx
@@ -240,8 +240,8 @@ function EditorButtons({ onAdd, onDelete }) {
 function FieldError({ type }) {
   return (
     <Text
+      size="small"
       style={{
-        fontSize: 12,
         textAlign: 'center',
         color: theme.errorText,
         marginBottom: 5,
@@ -556,8 +556,8 @@ function ActionEditor({
             </View>
             {templated && (
               <Text
+                size="medium"
                 style={{
-                  ...styles.smallText,
                   color: theme.warningText,
                   marginTop: 3,
                 }}
@@ -1445,8 +1445,8 @@ export function RuleEditor({
                       style={{ justifyContent: 'space-between' }}
                     >
                       <Text
+                        size="medium"
                         style={{
-                          ...styles.smallText,
                           marginBottom: '10px',
                         }}
                       >
diff --git a/packages/desktop-client/src/components/rules/RuleRow.tsx b/packages/desktop-client/src/components/rules/RuleRow.tsx
index 63b533413d..8a91d29fa0 100644
--- a/packages/desktop-client/src/components/rules/RuleRow.tsx
+++ b/packages/desktop-client/src/components/rules/RuleRow.tsx
@@ -5,7 +5,6 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Button } from '@actual-app/components/button';
 import { SvgRightArrow2 } from '@actual-app/components/icons/v0';
 import { SpaceBetween } from '@actual-app/components/space-between';
-import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
 import { View } from '@actual-app/components/view';
@@ -166,8 +165,8 @@ export const RuleRow = memo(
                       }}
                     >
                       <Text
+                        size="medium"
                         style={{
-                          ...styles.smallText,
                           color: theme.pageTextLight,
                           marginBottom: 6,
                         }}
diff --git a/packages/desktop-client/src/components/schedules/ScheduleEditForm.tsx b/packages/desktop-client/src/components/schedules/ScheduleEditForm.tsx
index dc930cea7b..57bb0aa9e4 100644
--- a/packages/desktop-client/src/components/schedules/ScheduleEditForm.tsx
+++ b/packages/desktop-client/src/components/schedules/ScheduleEditForm.tsx
@@ -400,11 +400,8 @@ export function ScheduleEditForm({
               );
             })()}
             <Text
-              style={{
-                color: theme.pageTextLight,
-                fontSize: 12,
-                marginTop: 3,
-              }}
+              size="small"
+              style={{ color: theme.pageTextLight, marginTop: 3 }}
             >
               <Trans>
                 How far in advance this schedule appears as upcoming
@@ -441,11 +438,8 @@ export function ScheduleEditForm({
               </label>
             </View>
             <Text
-              style={{
-                color: theme.pageTextLight,
-                fontSize: 12,
-                marginTop: 3,
-              }}
+              size="small"
+              style={{ color: theme.pageTextLight, marginTop: 3 }}
             >
               <Trans>
                 Automatically create transactions in the specified account
@@ -464,9 +458,9 @@ export function ScheduleEditForm({
             <SpaceBetween style={{ marginTop: 10, alignItems: 'center' }}>
               {isCustom && (
                 <Text
+                  size="medium"
                   style={{
                     color: theme.pageTextLight,
-                    fontSize: 13,
                     textAlign: 'right',
                     width: 350,
                   }}
diff --git a/packages/desktop-client/src/components/settings/ThemeInstaller.tsx b/packages/desktop-client/src/components/settings/ThemeInstaller.tsx
index 3da290c225..8addfc30f4 100644
--- a/packages/desktop-client/src/components/settings/ThemeInstaller.tsx
+++ b/packages/desktop-client/src/components/settings/ThemeInstaller.tsx
@@ -10,6 +10,7 @@ import { SpaceBetween } from '@actual-app/components/space-between';
 import { Text } from '@actual-app/components/text';
 import { TextOneLine } from '@actual-app/components/text-one-line';
 import { theme as themeStyle } from '@actual-app/components/theme';
+import { spacing } from '@actual-app/components/tokens';
 import { View } from '@actual-app/components/view';
 
 import { Link } from '#components/common/Link';
@@ -219,10 +220,10 @@ export function ThemeInstaller({
       </Text>
       {catalogError ? (
         <Text
+          size="small"
           style={{
             color: themeStyle.errorText,
-            marginBottom: 12,
-            fontSize: 12,
+            marginBottom: spacing.md,
           }}
         >
           <Trans>
@@ -447,10 +448,10 @@ export function ThemeInstaller({
       {/* Error Message */}
       {error && (
         <Text
+          size="small"
           style={{
             color: themeStyle.errorText,
-            marginBottom: 12,
-            fontSize: 12,
+            marginBottom: spacing.md,
           }}
         >
           {error}
diff --git a/packages/desktop-client/src/components/sidebar/redesign/SidebarBudgetName.tsx b/packages/desktop-client/src/components/sidebar/redesign/SidebarBudgetName.tsx
index 421cb3e7ae..1cebc8426c 100644
--- a/packages/desktop-client/src/components/sidebar/redesign/SidebarBudgetName.tsx
+++ b/packages/desktop-client/src/components/sidebar/redesign/SidebarBudgetName.tsx
@@ -56,7 +56,8 @@ export function SidebarBudgetName() {
     return (
       <InitialFocus>
         <Input
-          style={{ fontSize: 13, fontWeight: 600 }}
+          size="medium"
+          style={{ fontWeight: 600 }}
           defaultValue={budgetName}
           onEnter={newBudgetName => {
             if (newBudgetName.trim() !== '') {
diff --git a/upcoming-release-notes/add-component-size-tokens.md b/upcoming-release-notes/add-component-size-tokens.md
new file mode 100644
index 0000000000..588d294f6e
--- /dev/null
+++ b/upcoming-release-notes/add-component-size-tokens.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [flafleur]
+---
+
+Add standard size presets to the shared UI components