diff --git a/src/components/KeyFigure/index.tsx b/src/components/KeyFigure/index.tsx
index c200c70e..d388383d 100644
--- a/src/components/KeyFigure/index.tsx
+++ b/src/components/KeyFigure/index.tsx
@@ -3,29 +3,59 @@ import { _cs } from '@togglecorp/fujs';
 
 import TextOutput from '../TextOutput';
 import { genericMemo } from '../../utils';
+import { SpacingTypes } from '../../types';
 
 import styles from './styles.css';
 
+const spacingToStyleMap: {
+    [key in SpacingTypes]: string;
+} = {
+    none: styles.noSpacing,
+    compact: styles.compactSpacing,
+    comfortable: styles.comfortableSpacing,
+    loose: styles.looseSpacing,
+};
+
 export interface Props {
     className?: string;
     label: string;
     value?: number;
+    valueClassName?: string;
+    descriptionClassName?: string;
+    spacing?: SpacingTypes;
+    small?: boolean;
 }
 
 function KeyFigure(props: Props) {
     const {
         className,
         label,
+        spacing = 'comfortable',
+        valueClassName,
+        descriptionClassName,
+        small,
         value,
     } = props;
 
     return (
         <TextOutput
-            className={_cs(styles.keyFigure, className)}
+            className={_cs(
+                styles.keyFigure,
+                className,
+                spacingToStyleMap[spacing],
+            )}
             value={value}
             valueType="number"
-            valueContainerClassName={styles.value}
-            descriptionContainerClassName={styles.description}
+            valueContainerClassName={_cs(
+                styles.value,
+                small && styles.small,
+                valueClassName,
+            )}
+            descriptionContainerClassName={_cs(
+                styles.description,
+                small && styles.small,
+                descriptionClassName,
+            )}
             description={label}
         />
     );
diff --git a/src/components/KeyFigure/styles.css b/src/components/KeyFigure/styles.css
index 0bc36105..6fbe69ca 100644
--- a/src/components/KeyFigure/styles.css
+++ b/src/components/KeyFigure/styles.css
@@ -1,19 +1,44 @@
 .key-figure {
+    --spacing: var(--dui-spacing-medium);
+
     border-radius: var(--dui-radius-border-medium);
     background-color: var(--dui-color-surface-information);
-    padding: calc(var(--dui-spacing-large) - var(--dui-spacing-small)) calc(var(--dui-spacing-extra-large) - var(--dui-spacing-small));
+    padding: var(--spacing);
+    gap: var(--dui-spacing-small);
 
     .value {
-        padding: var(--dui-spacing-small);
         color: var(--dui-color-accent);
         font-size: var(--dui-font-size-super-large);
         font-weight: var(--dui-font-weight-bold);
+
+        &.small {
+            font-size: var(--dui-font-size-extra-large);
+        }
     }
 
     .description {
-        padding: var(--dui-spacing-small);
         color: var(--dui-color-accent);
         font-size: var(--dui-font-size-large);
         font-weight: var(--dui-font-weight-bold);
+
+        &.small {
+            font-size: var(--dui-font-size-medium);
+        }
+    }
+
+    &.no-spacing {
+        --spacing: 0;
+    }
+
+    &.compact-spacing {
+        --spacing: var(--dui-spacing-small);
+    }
+
+    &.comfortable-spacing {
+        --spacing: var(--dui-spacing-medium);
+    }
+
+    &.loose-spacing {
+        --spacing: var(--dui-spacing-large);
     }
 }