diff --git a/src/Button/IconicButton.tsx b/src/Button/IconicButton.tsx
index 003b0276a..66d7b7feb 100644
--- a/src/Button/IconicButton.tsx
+++ b/src/Button/IconicButton.tsx
@@ -103,7 +103,7 @@ const WrapperButton = styled.button<IconicButtonProps>(
     paddingRight: theme.space.none,
   }),
   variant({
-    prop: "foo",
+    prop: "scale",
     variants: {
       touch: {
         py: "x1",
diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx
index f82a34a99..1b0ba3e99 100644
--- a/src/Checkbox/Checkbox.tsx
+++ b/src/Checkbox/Checkbox.tsx
@@ -99,9 +99,9 @@ const VisualCheckbox = styled.div<VisualCheckboxProps>(
       content: "''",
       display: "none",
       position: "relative",
-      left: "4px",
-      width: "3px",
-      height: "9px",
+      left: theme.space.half,
+      width: theme.sizes.half,
+      height: theme.sizes.x1,
       border: `solid ${theme.colors.white}`,
       ...(indeterminate ? indeterminateStyles : checkedStyles),
     },
diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx
index 6554ab2a7..eed4e4be6 100644
--- a/src/DatePicker/DatePicker.tsx
+++ b/src/DatePicker/DatePicker.tsx
@@ -118,7 +118,7 @@ const DatePicker = forwardRef<unknown, DatePickerProps>(
 
     const customInputProps = {
       ...InputFieldDefaultProps,
-      inputWidth: componentVariant === "touch" ? "240px" : "184px",
+      inputWidth: componentVariant === "touch" ? "280px" : "184px",
       error: !!(errorMessage || errorList),
       ...inputProps,
       placeholder:
@@ -167,6 +167,7 @@ const DatePicker = forwardRef<unknown, DatePickerProps>(
               onFocus={onFocus}
               onBlur={onBlur}
               popperModifiers={{
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 flip: { enabled: !disableFlipping },
               }}
diff --git a/src/DatePicker/DatePickerInput.tsx b/src/DatePicker/DatePickerInput.tsx
index ddaf5cccd..5b494ac3f 100644
--- a/src/DatePicker/DatePickerInput.tsx
+++ b/src/DatePicker/DatePickerInput.tsx
@@ -71,6 +71,7 @@ const DatePickerInput = forwardRef<HTMLInputElement, DatePickerInputProps>(
         value={value}
         placeholder={placeholder}
         icon="calendarToday"
+        iconSize="x2"
         onClick={onClick}
         onKeyDown={handleKeyDown}
         onChange={handleChange}
diff --git a/src/DatePicker/DatePickerStyles.ts b/src/DatePicker/DatePickerStyles.ts
index c335ab943..a1bc5b3f5 100644
--- a/src/DatePicker/DatePickerStyles.ts
+++ b/src/DatePicker/DatePickerStyles.ts
@@ -56,7 +56,7 @@ export const DatePickerStyles = createGlobalStyle<{ theme: DefaultNDSThemeType }
       display: "inline-block",
       lineHeight: theme.space.x4,
       textAlign: "center",
-      width: `calc(${theme.space.x3}+${theme.space.half})`,
+      width: `calc(${theme.space.x3} + ${theme.space.half})`,
       margin: theme.space.half,
       boxSizing: "content-box",
       "&:hover": {
@@ -83,9 +83,10 @@ export const DatePickerStyles = createGlobalStyle<{ theme: DefaultNDSThemeType }
         cursor: "pointer",
       },
     },
-    ".react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover": {
-      backgroundColor: "transparent",
-    },
+    ".react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover":
+      {
+        backgroundColor: "transparent",
+      },
     ".react-datepicker__day-names, .react-datepicker__week": {
       whiteSpace: "nowrap",
     },
diff --git a/src/DateRange/DateRange.story.tsx b/src/DateRange/DateRange.story.tsx
index 313dd1a72..2b97db019 100644
--- a/src/DateRange/DateRange.story.tsx
+++ b/src/DateRange/DateRange.story.tsx
@@ -53,13 +53,13 @@ export const CustomizingInputProps = () => (
   <DateRange
     startDateInputProps={{
       placeholder: "From (Mon YYYY)",
-      inputWidth: "200px",
+      inputWidth: "280px",
       labelText: "From",
       error: true,
     }}
     endDateInputProps={{
       placeholder: "To (Mon YYYY)",
-      inputWidth: "180px",
+      inputWidth: "260px",
       labelText: "To",
     }}
     labelProps={{ labelText: "" }}
@@ -126,8 +126,8 @@ export const WithTimes = () => (
 
 export const CustomizingInputPropsWithTimes = () => (
   <DateRange
-    startDateInputProps={{ placeholder: "From", inputWidth: "130px" }}
-    endDateInputProps={{ placeholder: "To", inputWidth: "130px" }}
+    startDateInputProps={{ placeholder: "From", inputWidth: "280px" }}
+    endDateInputProps={{ placeholder: "To", inputWidth: "280px" }}
     onRangeChange={action("range changed")}
     onStartDateChange={action("start date changed")}
     onEndDateChange={action("end date changed")}
diff --git a/src/DropdownMenu/DropdownButton.tsx b/src/DropdownMenu/DropdownButton.tsx
index bf2ac61d2..12ce79e4e 100644
--- a/src/DropdownMenu/DropdownButton.tsx
+++ b/src/DropdownMenu/DropdownButton.tsx
@@ -47,7 +47,7 @@ const DropdownButton = styled.button<DropdownButtonProps>(
     },
   }),
   variant({
-    prop: "foo",
+    prop: "scale",
     variants: {
       touch: {
         pt: "x2",
diff --git a/src/DropdownMenu/DropdownLink.tsx b/src/DropdownMenu/DropdownLink.tsx
index 5fc678dc3..3eac019a0 100644
--- a/src/DropdownMenu/DropdownLink.tsx
+++ b/src/DropdownMenu/DropdownLink.tsx
@@ -40,7 +40,7 @@ const DropdownLink = styled.a.withConfig<Props>({
       outline: "none",
       color: theme.colors[hoverColor],
       backgroundColor: theme.colors[bgHoverColor],
-      borderLeft: `${theme.space.half}  solid ${theme.colors.blue}`,
+      borderLeft: `${theme.space.half} solid ${theme.colors.blue}`,
     },
     "&:disabled": {
       opacity: ".5",
@@ -48,10 +48,10 @@ const DropdownLink = styled.a.withConfig<Props>({
     paddingTop: theme.space.x1,
     paddingRight: theme.space.x2,
     paddingBottom: theme.space.x1,
-    paddingLeft: "12px",
+    paddingLeft: `calc(${theme.space.x2} - ${theme.space.half})`,
   }),
   variant({
-    prop: "foo",
+    prop: "scale",
     variants: {
       touch: {
         pt: "x2",
diff --git a/src/FieldLabel/FieldLabel.tsx b/src/FieldLabel/FieldLabel.tsx
index 3fa51964e..7e027824b 100644
--- a/src/FieldLabel/FieldLabel.tsx
+++ b/src/FieldLabel/FieldLabel.tsx
@@ -26,7 +26,7 @@ export default function FieldLabel({
           </Flex>
           {hint && (
             <Flex display="inline-flex" ml="half">
-              <FramedIcon iconSize="20px" icon="info" tooltip={hint} />
+              <FramedIcon iconSize="x2_5" icon="info" tooltip={hint} />
             </Flex>
           )}
         </Flex>
diff --git a/src/FieldLabel/RequirementText.tsx b/src/FieldLabel/RequirementText.tsx
index ec5440463..926558468 100644
--- a/src/FieldLabel/RequirementText.tsx
+++ b/src/FieldLabel/RequirementText.tsx
@@ -2,6 +2,6 @@ import React from "react";
 import { Text } from "../Type";
 import { TextProps } from "../Type/Text";
 
-const RequirementText = (props: TextProps) => <Text inline ml="x1" fontSize="12px" color="darkGrey" {...props} />;
+const RequirementText = (props: TextProps) => <Text inline ml="x1" fontSize="smaller" color="darkGrey" {...props} />;
 
 export default RequirementText;
diff --git a/src/Icon/Icon.tsx b/src/Icon/Icon.tsx
index 0059085f4..f1c989dbb 100644
--- a/src/Icon/Icon.tsx
+++ b/src/Icon/Icon.tsx
@@ -30,7 +30,7 @@ const Svg = React.forwardRef<SVGSVGElement, IconProps>(
       color: fillColor = "currentColor",
       className = undefined,
       title = undefined,
-      size = "24px",
+      size,
       focusable = false,
       icon,
       ...props
@@ -38,12 +38,18 @@ const Svg = React.forwardRef<SVGSVGElement, IconProps>(
     ref
   ) => {
     const theme = useTheme();
+    size ||= theme.sizes.x3;
 
     if (icon === "loading") {
       return (
         <LoadingIcon
-          color={theme.colors[fillColor] ? theme.colors[fillColor] : fillColor}
-          className={className}
+          ref={ref}
+          aria-hidden={title == null}
+          width={theme.space[size] || size}
+          height={theme.space[size] || size}
+          fill={theme.colors[fillColor] ? theme.colors[fillColor] : fillColor}
+          focusable={focusable}
+          className={`${className} nds-icon--${icon}`}
           {...props}
         />
       );
diff --git a/src/Icon/LoadingIcon.tsx b/src/Icon/LoadingIcon.tsx
index 3a728a62c..4821135a2 100644
--- a/src/Icon/LoadingIcon.tsx
+++ b/src/Icon/LoadingIcon.tsx
@@ -1,13 +1,20 @@
 import React from "react";
+import { useTheme } from "styled-components";
 
-type LoadingIconProps = React.ComponentPropsWithoutRef<"svg">;
+interface LoadingIconProps extends React.ComponentPropsWithRef<"svg"> {
+  size?: string;
+}
+
+const LoadingIcon = React.forwardRef<SVGSVGElement, LoadingIconProps>(({ size, ...props }, ref) => {
+  const theme = useTheme();
+  size ||= theme.sizes.x3;
 
-const LoadingIcon: React.FC<React.PropsWithChildren<LoadingIconProps>> = (props) => {
   return (
     <svg
+      ref={ref}
       viewBox="0 0 24px 24px"
-      width="24px"
-      height="24px"
+      width={size}
+      height={size}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       preserveAspectRatio="xMidYMid"
@@ -102,6 +109,6 @@ const LoadingIcon: React.FC<React.PropsWithChildren<LoadingIconProps>> = (props)
       </g>
     </svg>
   );
-};
+});
 
 export default LoadingIcon;
diff --git a/src/Input/InputField.tsx b/src/Input/InputField.tsx
index 1ed9b116c..9a685d5cb 100644
--- a/src/Input/InputField.tsx
+++ b/src/Input/InputField.tsx
@@ -113,7 +113,7 @@ const StyledInput = styled.input<StyledInputProps>(
   }),
   ({ theme }) =>
     variant({
-      prop: "foo",
+      prop: "scale",
       variants: {
         touch: {
           padding: `${subPx(theme.space.x2)}`,
@@ -137,7 +137,7 @@ const StyledInputIcon = styled(Icon)<{ variant: ComponentVariant }>(
     pointerEvents: "none",
   }),
   variant({
-    prop: "foo",
+    prop: "scale",
     variants: {
       touch: {
         right: "x2",
diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx
index 9f676091a..c2d84e6a6 100644
--- a/src/Link/Link.tsx
+++ b/src/Link/Link.tsx
@@ -49,10 +49,7 @@ const StyledLink = styled.a<LinkProps>(
   }),
   variant({
     variants: {
-      touch: {
-        py: "x2",
-        px: "0",
-      },
+      touch: {},
       medium: {},
     },
   }),
diff --git a/src/NDSProvider/ComponentVariantContext.tsx b/src/NDSProvider/ComponentVariantContext.tsx
index c521b3da1..e1b8653ba 100644
--- a/src/NDSProvider/ComponentVariantContext.tsx
+++ b/src/NDSProvider/ComponentVariantContext.tsx
@@ -7,6 +7,10 @@ type ComponentVariantContextValue = {
   children?: React.ReactNode;
 };
 
+export default function ComponentVariantContextProvider({ variant, children }: ComponentVariantContextValue) {
+  return <ComponentVariantContext.Provider value={{ variant: variant }}>{children}</ComponentVariantContext.Provider>;
+}
+
 export const ComponentVariantContext = createContext<ComponentVariantContextValue>(undefined);
 
 export function useComponentVariant(selectedVariant?: ComponentVariant) {
@@ -18,8 +22,14 @@ export function useComponentVariant(selectedVariant?: ComponentVariant) {
   return selectedVariant ?? context.variant;
 }
 
-const ComponentVariantContextProvider = ({ variant, children }: ComponentVariantContextValue) => {
-  return <ComponentVariantContext.Provider value={{ variant: variant }}>{children}</ComponentVariantContext.Provider>;
+type WithVariantProps = {
+  variant?: ComponentVariant;
 };
 
-export default ComponentVariantContextProvider;
+export function withComponentVariant<P extends WithVariantProps>(WrappedComponent: React.ComponentType<P>) {
+  return function ComponentWithVariant(props: P) {
+    const variant = useComponentVariant(props.variant);
+
+    return <WrappedComponent {...(props as P)} variant={variant} />;
+  };
+}
diff --git a/src/Pagination/PaginationButton.tsx b/src/Pagination/PaginationButton.tsx
index fb81567ff..57a93498f 100644
--- a/src/Pagination/PaginationButton.tsx
+++ b/src/Pagination/PaginationButton.tsx
@@ -11,21 +11,23 @@ const getHoverBackground = (currentPage: boolean, disabled: boolean, theme: Defa
   return theme.colors.lightGrey;
 };
 
-const PaginationButton = styled.button(({ theme, disabled, currentPage }: any) => ({
-  fontSize: theme.fontSizes.small,
-  padding: `${theme.space.x1} ${theme.space.x2}`,
-  lineHeight: theme.lineHeights.smallTextBase,
-  display: "flex",
-  borderRadius: theme.radii.medium,
-  border: `1px solid ${currentPage ? theme.colors.darkBlue : theme.colors.lightGrey}`,
-  color: disabled ? theme.colors.grey : theme.colors.black,
-  "&:not(:last-child)": {
-    marginRight: theme.space.x2,
-  },
-  cursor: disabled ? "default" : "pointer",
-  "&:hover": {
-    background: getHoverBackground(currentPage, disabled, theme),
-  },
-}));
+const PaginationButton = styled.button<{ disabled?: boolean; currentPage?: boolean }>(
+  ({ theme, disabled, currentPage }) => ({
+    fontSize: theme.fontSizes.small,
+    padding: `${theme.space.x1} ${theme.space.x2}`,
+    lineHeight: theme.lineHeights.smallTextBase,
+    display: "flex",
+    borderRadius: theme.radii.medium,
+    border: `1px solid ${currentPage ? theme.colors.darkBlue : theme.colors.lightGrey}`,
+    color: disabled ? theme.colors.grey : theme.colors.black,
+    "&:not(:last-child)": {
+      marginRight: theme.space.x2,
+    },
+    cursor: disabled ? "default" : "pointer",
+    "&:hover": {
+      background: getHoverBackground(currentPage, disabled, theme),
+    },
+  })
+);
 
 export default PaginationButton;
diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx
index 1a6b00499..b992bc767 100644
--- a/src/Radio/Radio.tsx
+++ b/src/Radio/Radio.tsx
@@ -59,6 +59,9 @@ type VisualRadioProps = {
 
 const VisualRadio = styled.div<VisualRadioProps>(
   ({ disabled, theme }: VisualRadioProps): CSSObject => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     minWidth: theme.space.x2,
     height: theme.space.x2,
     marginRight: theme.space.x1,
@@ -70,13 +73,9 @@ const VisualRadio = styled.div<VisualRadioProps>(
       cursor: disabled ? undefined : "pointer",
       content: "''",
       display: "none",
-      position: "relative",
-      left: "4px",
-      top: "4px",
-      width: "2px",
-      height: "2px",
+      width: theme.sizes.x1,
+      height: theme.sizes.x1,
       background: theme.colors.white,
-      border: `2px solid ${theme.colors.white}`,
       borderRadius: theme.radii.circle,
     },
   })
diff --git a/src/Radio/RadioGroup.story.tsx b/src/Radio/RadioGroup.story.tsx
index 58a30e36a..c5e82198d 100644
--- a/src/Radio/RadioGroup.story.tsx
+++ b/src/Radio/RadioGroup.story.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Radio, RadioGroup, Icon, Tooltip } from "../index";
+import { Radio, RadioGroup, Icon, Tooltip, Flex } from "../index";
 
 const errorList = ["Error message 1", "Error message 2"];
 
@@ -34,12 +34,12 @@ export const RadioGroupWithAllProps = () => (
     <Radio
       value="a"
       labelText={
-        <>
+        <Flex alignItems="center">
           Option A
           <Tooltip placement="bottom" tooltip="Option A is a special option with extra information" defaultOpen>
-            <Icon icon="help" color="darkBlue" size="16px" ml="x1" />
+            <Icon icon="help" color="darkBlue" size="x2" ml="x1" />
           </Tooltip>
-        </>
+        </Flex>
       }
     />
     <Radio value="b" labelText="Option B" />
diff --git a/src/Radio/RadioGroup.tsx b/src/Radio/RadioGroup.tsx
index d0e8c4238..f757104c0 100644
--- a/src/Radio/RadioGroup.tsx
+++ b/src/Radio/RadioGroup.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { CSSObject, ThemeContext } from "styled-components";
+import { CSSObject, ThemeContext, useTheme } from "styled-components";
 import { HelpText, RequirementText } from "../FieldLabel";
 import { InlineValidation } from "../Validation";
 import { Fieldset } from "../Form";
@@ -15,7 +15,7 @@ interface RadioGroupProps {
   helpText?: string;
   required?: boolean;
   requirementText?: string;
-  children?: any;
+  children?: React.ReactNode;
   name?: string;
   disabled?: boolean;
   defaultValue?: string;
@@ -35,12 +35,12 @@ export default function RadioGroup({
   ...props
 }: RadioGroupProps) {
   const otherProps = { ...props, errorMessage, errorList };
-  const themeContext = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <Fieldset className={className} id={id}>
-      <legend style={{ marginBottom: themeContext.space.x1 }}>
-        <span style={labelTextStyles(themeContext)}>{labelText}</span>
+      <legend style={{ marginBottom: theme.space.x1 }}>
+        <span style={labelTextStyles(theme)}>{labelText}</span>
         {requirementText && <RequirementText>{requirementText}</RequirementText>}
       </legend>
       {helpText && <HelpText>{helpText}</HelpText>}
diff --git a/src/Switcher/Switch.tsx b/src/Switcher/Switch.tsx
index 99f05efc2..72e61a7be 100644
--- a/src/Switcher/Switch.tsx
+++ b/src/Switcher/Switch.tsx
@@ -48,7 +48,7 @@ const SwitchButton = styled.button<SwitchProps>(
   }),
   ({ theme }) =>
     variant({
-      prop: "foo",
+      prop: "scale",
       variants: {
         touch: {
           padding: `${numberFromDimension(theme.space.x2) - 1}px ${theme.space.x3}`,
diff --git a/src/Tabs/Tab.tsx b/src/Tabs/Tab.tsx
index 0b11581db..c2447e9bb 100644
--- a/src/Tabs/Tab.tsx
+++ b/src/Tabs/Tab.tsx
@@ -83,7 +83,7 @@ const TabButton = styled.button<TabButtonProps>(
     },
   }),
   variant({
-    prop: "foo",
+    prop: "scale",
     variants: {
       touch: {
         py: "x2",
diff --git a/src/Textarea/StyledTextarea.tsx b/src/Textarea/StyledTextarea.tsx
index 0e6b509ae..aa4b22679 100644
--- a/src/Textarea/StyledTextarea.tsx
+++ b/src/Textarea/StyledTextarea.tsx
@@ -70,7 +70,7 @@ const StyledTextarea = styled.textarea<StyledTextareaProps>(
   }),
   ({ theme }) =>
     variant({
-      prop: "foo",
+      prop: "scale",
       variants: {
         touch: {
           padding: `${subPx(theme.space.x2)}`,
diff --git a/src/TimePicker/TimePicker.tsx b/src/TimePicker/TimePicker.tsx
index 3f54355b5..fb72455ce 100644
--- a/src/TimePicker/TimePicker.tsx
+++ b/src/TimePicker/TimePicker.tsx
@@ -283,7 +283,7 @@ const TimePicker: React.FC<React.PropsWithChildren<TimePickerProps>> = forwardRe
             onKeyDown={(e) => handleKeyDown(e)}
             aria-label={ariaLabel || t("Select a time")}
             inputWidth={componentVariant === "touch" ? "208px" : "130px"}
-            iconSize="20px"
+            iconSize="x2"
             data-testid="select-input"
             type="text"
             ref={inputRef}
diff --git a/src/TimePicker/TimePickerOption.tsx b/src/TimePicker/TimePickerOption.tsx
index 970cd439b..2a021d209 100644
--- a/src/TimePicker/TimePickerOption.tsx
+++ b/src/TimePicker/TimePickerOption.tsx
@@ -21,7 +21,7 @@ const TimePickerOption = styled.li<TimePickerOptionProps>(
     padding: theme.space.x1,
   }),
   variant({
-    prop: "foo",
+    prop: "scale",
     variants: {
       touch: {
         px: "x1",
diff --git a/src/Type/Headings.tsx b/src/Type/Headings.tsx
index 89d999858..82f303e70 100644
--- a/src/Type/Headings.tsx
+++ b/src/Type/Headings.tsx
@@ -1,55 +1,101 @@
+import { variant } from "styled-system";
 import styled from "styled-components";
 import { addStyledProps } from "../StyledProps";
+import { withComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import Text, { TextProps } from "./Text";
 
-export const Heading1 = styled(Text).attrs(() => ({
-  as: "h1",
-}))<TextProps>(
-  ({ theme }) => ({
-    fontSize: theme.fontSizes.heading1,
-    lineHeight: theme.lineHeights.heading1,
-    fontWeight: theme.fontWeights.light,
-    marginTop: 0,
-    marginBottom: theme.space.x6,
-  }),
-  addStyledProps
+export const Heading1 = withComponentVariant(
+  styled(Text).attrs(() => ({
+    as: "h1",
+  }))<TextProps>(
+    ({ theme }) => ({
+      fontSize: theme.fontSizes.heading1,
+      lineHeight: theme.lineHeights.heading1,
+      fontWeight: theme.fontWeights.light,
+      marginTop: 0,
+      marginBottom: theme.space.x6,
+    }),
+    ({ theme }) =>
+      variant({
+        variants: {
+          touch: {
+            fontWeight: theme.fontWeights.bold,
+            marginBottom: theme.space.none,
+          },
+        },
+      }),
+    addStyledProps
+  )
 );
 
-export const Heading2 = styled(Text).attrs(() => ({
-  as: "h2",
-}))(
-  ({ theme }) => ({
-    fontSize: theme.fontSizes.heading2,
-    lineHeight: theme.lineHeights.heading2,
-    fontWeight: theme.fontWeights.normal,
-    marginTop: 0,
-    marginBottom: theme.space.x2,
-  }),
-  addStyledProps
+export const Heading2 = withComponentVariant(
+  styled(Text).attrs(() => ({
+    as: "h2",
+  }))(
+    ({ theme }) => ({
+      fontSize: theme.fontSizes.heading2,
+      lineHeight: theme.lineHeights.heading2,
+      fontWeight: theme.fontWeights.normal,
+      marginTop: 0,
+      marginBottom: theme.space.x2,
+    }),
+    ({ theme }) =>
+      variant({
+        variants: {
+          touch: {
+            fontWeight: theme.fontWeights.bold,
+            marginBottom: theme.space.none,
+          },
+        },
+      }),
+    addStyledProps
+  )
 );
 
-export const Heading3 = styled(Text).attrs(() => ({
-  as: "h3",
-}))(
-  ({ theme }) => ({
-    fontSize: theme.fontSizes.heading3,
-    lineHeight: theme.lineHeights.heading3,
-    fontWeight: theme.fontWeights.medium,
-    marginTop: 0,
-    marginBottom: theme.space.x1,
-  }),
-  addStyledProps
+export const Heading3 = withComponentVariant(
+  styled(Text).attrs(() => ({
+    as: "h3",
+  }))(
+    ({ theme }) => ({
+      fontSize: theme.fontSizes.heading3,
+      lineHeight: theme.lineHeights.heading3,
+      fontWeight: theme.fontWeights.medium,
+      marginTop: 0,
+      marginBottom: theme.space.x1,
+    }),
+    ({ theme }) =>
+      variant({
+        variants: {
+          touch: {
+            fontWeight: theme.fontWeights.bold,
+            marginBottom: theme.space.none,
+          },
+        },
+      }),
+    addStyledProps
+  )
 );
 
-export const Heading4 = styled(Text).attrs(() => ({
-  as: "h4",
-}))(
-  ({ theme }) => ({
-    fontSize: theme.fontSizes.heading4,
-    lineHeight: theme.lineHeights.heading4,
-    fontWeight: theme.fontWeights.bold,
-    marginTop: 0,
-    marginBottom: theme.space.x1,
-  }),
-  addStyledProps
+export const Heading4 = withComponentVariant(
+  styled(Text).attrs(() => ({
+    as: "h4",
+  }))(
+    ({ theme }) => ({
+      fontSize: theme.fontSizes.heading4,
+      lineHeight: theme.lineHeights.heading4,
+      fontWeight: theme.fontWeights.bold,
+      marginTop: 0,
+      marginBottom: theme.space.x1,
+    }),
+    ({ theme }) =>
+      variant({
+        variants: {
+          touch: {
+            fontWeight: theme.fontWeights.bold,
+            marginBottom: theme.space.none,
+          },
+        },
+      }),
+    addStyledProps
+  )
 );
diff --git a/src/Type/Text.tsx b/src/Type/Text.tsx
index bbe0d1c9a..f663a1785 100644
--- a/src/Type/Text.tsx
+++ b/src/Type/Text.tsx
@@ -1,7 +1,9 @@
 import styled from "styled-components";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { addStyledProps, StyledProps } from "../StyledProps";
 
 export type TextProps = React.HTMLAttributes<HTMLParagraphElement> & {
+  variant?: ComponentVariant;
   inline?: boolean;
   disabled?: boolean;
   textTransform?:
diff --git a/src/theme.ts b/src/theme.ts
index 936269667..4dcc0944a 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -69,6 +69,7 @@ const BASE_THEME: DefaultNDSThemeType = {
     x1: tokens.size_base_x_1,
     x1_5: "12px",
     x2: tokens.size_base_x_2,
+    x2_5: "20px",
     x3: tokens.size_base_x_3,
     x4: tokens.size_base_x_4,
     x5: tokens.size_base_x_5,
@@ -83,6 +84,7 @@ const BASE_THEME: DefaultNDSThemeType = {
     x1: tokens.size_base_x_1,
     x1_5: "12px",
     x2: tokens.size_base_x_2,
+    x2_5: "20px",
     x3: tokens.size_base_x_3,
     x4: tokens.size_base_x_4,
     x5: tokens.size_base_x_5,
@@ -169,6 +171,7 @@ const themes: Record<ThemeKey, DefaultNDSThemeType> = {
       x1: "10.8px",
       x1_5: "16.2px",
       x2: "21.6px",
+      x2_5: "27px",
       x3: "32.4px",
       x4: "43.2px",
       x5: "54px",
@@ -183,6 +186,7 @@ const themes: Record<ThemeKey, DefaultNDSThemeType> = {
       x1: "10.8px",
       x1_5: "16.2px",
       x2: "21.6px",
+      x2_5: "27px",
       x3: "32.4px",
       x4: "43.2px",
       x5: "54px",
diff --git a/src/theme.type.ts b/src/theme.type.ts
index d7085db11..2181d04a1 100644
--- a/src/theme.type.ts
+++ b/src/theme.type.ts
@@ -69,6 +69,7 @@ interface Space {
   x1: string;
   x1_5: string;
   x2: string;
+  x2_5: string;
   x3: string;
   x4: string;
   x5: string;
diff --git a/src/utils/ClickInputLabel.tsx b/src/utils/ClickInputLabel.tsx
index 68694540d..654b35d3a 100644
--- a/src/utils/ClickInputLabel.tsx
+++ b/src/utils/ClickInputLabel.tsx
@@ -17,7 +17,7 @@ const ClickInputLabel = styled.label<{ variant?: ComponentVariant; disabled?: bo
     paddingRight: 0,
   }),
   variant({
-    prop: "foo",
+    prop: "scale",
     variants: {
       touch: {
         py: "x2",