diff --git a/apps/ui-generator/src/layouts/Layout.astro b/apps/ui-generator/src/layouts/Layout.astro
index 888c977f..cc1e5413 100644
--- a/apps/ui-generator/src/layouts/Layout.astro
+++ b/apps/ui-generator/src/layouts/Layout.astro
@@ -38,10 +38,6 @@ const { title } = Astro.props;
 <style is:global>
     @import '@nordcode/ui/complete';
 
-    html {
-        font-size: clamp(0.875rem, 0.75rem + 0.2vw, 1rem);
-    }
-
     body {
         max-block-size: 100%;
         overflow: hidden;
diff --git a/apps/ui-generator/src/modules/components/cssVariables/buttonVariables.ts b/apps/ui-generator/src/modules/components/cssVariables/buttonVariables.ts
index c0250aa5..a7d019ff 100644
--- a/apps/ui-generator/src/modules/components/cssVariables/buttonVariables.ts
+++ b/apps/ui-generator/src/modules/components/cssVariables/buttonVariables.ts
@@ -45,7 +45,7 @@ export const buttonVariables = [
         description: 'Set default button inline padding. Default: <var>1ch</var>.',
     },
     {
-        name: '--button-height-base',
+        name: '--control-height-base',
         description: 'Set the min button height. Default: <not set>',
     },
 ];
diff --git a/apps/ui-generator/src/modules/generator/components/Themepicker.astro b/apps/ui-generator/src/modules/generator/components/Themepicker.astro
index e9943872..b9a6f25c 100644
--- a/apps/ui-generator/src/modules/generator/components/Themepicker.astro
+++ b/apps/ui-generator/src/modules/generator/components/Themepicker.astro
@@ -11,7 +11,7 @@
         isolation: isolate;
         flex-shrink: 0;
         background: var(--color-surface-emphasis);
-        block-size: var(--button-height-small);
+        block-size: var(--control-height-small);
         border-radius: var(--border-radius-round);
         padding-inline: 0.5ch;
     }
diff --git a/apps/ui-generator/src/modules/presets/DensityPresets.ts b/apps/ui-generator/src/modules/presets/DensityPresets.ts
new file mode 100644
index 00000000..350dc75b
--- /dev/null
+++ b/apps/ui-generator/src/modules/presets/DensityPresets.ts
@@ -0,0 +1,75 @@
+import type { ConfigStore } from '../store/configStore';
+
+export type DensityPresetName = 'compact' | 'default' | 'spacious';
+
+export const DensityPresets: Record<DensityPresetName, Partial<ConfigStore>> = {
+    compact: {
+        controlHeightBase: 2.25,
+        controlHeightSmall: 1.75,
+
+        lineHeightLarge: 1.6,
+        lineHeightBase: 1.4,
+        lineHeightSmall: 1.1,
+
+        spacingTiny: 0.125,
+        spacingNearest: 0.2,
+        spacingNear: 0.375,
+        spacingBase: 0.75,
+        spacingFar: 1.5,
+        spacingFarthest: 3,
+
+        controlSpacingMinimal: 0.0625,
+        controlSpacingTiny: 0.125,
+        controlSpacingNearest: 0.25,
+        controlSpacingNear: 0.37,
+        controlSpacingBase: 0.5,
+        controlSpacingFar: 0.75,
+        controlSpacingFarthest: 1,
+    },
+    default: {
+        controlHeightBase: 2.5,
+        controlHeightSmall: 2,
+
+        lineHeightLarge: 1.85,
+        lineHeightBase: 1.55,
+        lineHeightSmall: 1.1,
+
+        spacingTiny: 0.125,
+        spacingNearest: 0.25,
+        spacingNear: 0.5,
+        spacingBase: 1,
+        spacingFar: 2,
+        spacingFarthest: 4,
+
+        controlSpacingMinimal: 0.125,
+        controlSpacingTiny: 0.25,
+        controlSpacingNearest: 0.375,
+        controlSpacingNear: 0.5,
+        controlSpacingBase: 0.75,
+        controlSpacingFar: 1,
+        controlSpacingFarthest: 1.5,
+    },
+    spacious: {
+        controlHeightBase: 3,
+        controlHeightSmall: 2.5,
+
+        lineHeightLarge: 1.95,
+        lineHeightBase: 1.65,
+        lineHeightSmall: 1.25,
+
+        spacingTiny: 0.25,
+        spacingNearest: 0.5,
+        spacingNear: 0.75,
+        spacingBase: 1.25,
+        spacingFar: 2.5,
+        spacingFarthest: 5,
+
+        controlSpacingMinimal: 0.1875,
+        controlSpacingTiny: 0.375,
+        controlSpacingNearest: 0.5,
+        controlSpacingNear: 0.75,
+        controlSpacingBase: 1,
+        controlSpacingFar: 1.25,
+        controlSpacingFarthest: 1.75,
+    },
+} as const;
diff --git a/apps/ui-generator/src/modules/presets/components/PresetSettings.svelte b/apps/ui-generator/src/modules/presets/components/PresetSettings.svelte
index 4f48cad3..7e1b6227 100644
--- a/apps/ui-generator/src/modules/presets/components/PresetSettings.svelte
+++ b/apps/ui-generator/src/modules/presets/components/PresetSettings.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-import { configStore, setPreset } from '../../store/configStore';
+import { configStore, setDensityPreset, setPreset } from '../../store/configStore';
 </script>
 
 {#if configStore}
     <div class="nc-region content-block">
         <form class="nc-stack -far -full-width -stretched">
-            <div class="settings-container">
-                <fieldset class="nc-fieldset nc-stack">
+            <div class="settings-container nc-stack -far">
+                <fieldset class="nc-fieldset">
                     <legend>Presets</legend>
                     <div class="nc-cluster">
                         <button class="nc-button" type="button" on:click={() => setPreset('modern')}>Modern</button>
@@ -15,6 +15,15 @@ import { configStore, setPreset } from '../../store/configStore';
                         <button class="nc-button" type="button" on:click={() => setPreset('elegant')}>Elegant</button>
                     </div>
                 </fieldset>
+
+                <fieldset class="nc-fieldset">
+                    <legend>Density Presets</legend>
+                    <div class="nc-cluster">
+                        <button class="nc-button" type="button" on:click={() => setDensityPreset('compact')}>Compact</button>
+                        <button class="nc-button" type="button" on:click={() => setDensityPreset('default')}>Default</button>
+                        <button class="nc-button" type="button" on:click={() => setDensityPreset('spacious')}>Spacious</button>
+                    </div>
+                </fieldset>
             </div>
         </form>
     </div>
diff --git a/apps/ui-generator/src/modules/store/configStore.ts b/apps/ui-generator/src/modules/store/configStore.ts
index 3bb4c7f3..04c03ad0 100644
--- a/apps/ui-generator/src/modules/store/configStore.ts
+++ b/apps/ui-generator/src/modules/store/configStore.ts
@@ -1,4 +1,5 @@
 import { localStore } from '@nordcode/forms-svelte';
+import { type DensityPresetName, DensityPresets } from '../presets/DensityPresets';
 import type { PresetName } from '../presets/Presets';
 import { Presets } from '../presets/Presets';
 
@@ -50,6 +51,14 @@ export type ConfigStore = {
 
     spacingScale: number;
 
+    controlSpacingMinimal: number;
+    controlSpacingTiny: number;
+    controlSpacingNearest: number;
+    controlSpacingNear: number;
+    controlSpacingBase: number;
+    controlSpacingFar: number;
+    controlSpacingFarthest: number;
+
     borderRadiusNone: number;
     borderWidthThin: number;
     borderWidthMedium: number;
@@ -118,6 +127,9 @@ export type ConfigStore = {
     darkNeutralBorderLightness: number;
 
     transparencyWeaker: number;
+
+    controlHeightBase: number;
+    controlHeightSmall: number;
 };
 
 const defaultStore: ConfigStore = {
@@ -165,6 +177,14 @@ const defaultStore: ConfigStore = {
 
     spacingScale: 2,
 
+    controlSpacingMinimal: 0.125,
+    controlSpacingTiny: 0.25,
+    controlSpacingNearest: 0.375,
+    controlSpacingNear: 0.5,
+    controlSpacingBase: 0.75,
+    controlSpacingFar: 1,
+    controlSpacingFarthest: 1.5,
+
     borderRadiusNone: 0,
     borderWidthThin: 1,
     borderWidthMedium: 2,
@@ -232,6 +252,9 @@ const defaultStore: ConfigStore = {
     darkTextLightnessScaleFactor: 0.88,
     darkSurfaceLightnessScaleFactor: 1.3,
     darkBorderLightnessScaleFactor: 0.98,
+
+    controlHeightBase: 2.5,
+    controlHeightSmall: 2,
 };
 
 const round = (num: number) => Math.round(num * 1000) / 1000;
@@ -332,6 +355,15 @@ export const setPreset = (preset: PresetName) => {
     });
 };
 
+export const setDensityPreset = (preset: DensityPresetName) => {
+    configStore?.update((store) => {
+        return {
+            ...store,
+            ...DensityPresets[preset],
+        };
+    });
+};
+
 export const configStore =
     typeof localStorage === 'undefined'
         ? undefined
diff --git a/apps/ui-generator/src/modules/store/utils/generateStyleString.ts b/apps/ui-generator/src/modules/store/utils/generateStyleString.ts
index af635e8b..e5e17af0 100644
--- a/apps/ui-generator/src/modules/store/utils/generateStyleString.ts
+++ b/apps/ui-generator/src/modules/store/utils/generateStyleString.ts
@@ -48,6 +48,12 @@ export const generateStyleString = (store: ConfigStore): string => {
         --spacing-far: ${store.spacingFar}rem;
         --spacing-farthest: ${store.spacingFarthest}rem;
 
+        --spacing-tiny: ${store.spacingTiny}rem;
+        --spacing-nearest: ${store.spacingNearest}rem;
+        --spacing-near: ${store.spacingNear}rem;
+        --spacing-base: ${store.spacingBase}rem;
+        --spacing-far: ${store.spacingFar}rem;
+        --spacing-farthest: ${store.spacingFarthest}rem;
 
         /* Borders */
 
@@ -61,6 +67,19 @@ export const generateStyleString = (store: ConfigStore): string => {
         --border-radius-large: ${store.borderRadiusLarge}px;
         --border-radius-round: 1e5px;
 
+        /* UI Density Elements */
+
+        --control-height-base: ${store.controlHeightBase}em;
+        --control-height-small: ${store.controlHeightSmall}em;
+
+        --control-spacing-minimal: ${store.controlSpacingMinimal}em;
+        --control-spacing-tiny: ${store.controlSpacingTiny}em;
+        --control-spacing-nearest: ${store.controlSpacingNearest}em;
+        --control-spacing-near: ${store.controlSpacingNear}em;
+        --control-spacing-base: ${store.controlSpacingBase}em;
+        --control-spacing-far: ${store.controlSpacingFar}em;
+        --control-spacing-farthest: ${store.controlSpacingFarthest}em;
+
         ${getShadows(store)}
 
         ${getStringTheme(store)}
diff --git a/apps/web/TODOS b/apps/web/TODOS
new file mode 100644
index 00000000..2966e8ff
--- /dev/null
+++ b/apps/web/TODOS
@@ -0,0 +1,3 @@
+Landing Page für unsere Hauptdienstleistungen
+- Svelte / Sveltekit
+-
diff --git a/apps/web/src/lib/modules/common/components/Cta.svelte b/apps/web/src/lib/modules/common/components/Cta.svelte
index 23420499..cd6528dd 100644
--- a/apps/web/src/lib/modules/common/components/Cta.svelte
+++ b/apps/web/src/lib/modules/common/components/Cta.svelte
@@ -44,8 +44,7 @@
 	}
 
 	.box {
-		--button-height-base: 3.5rem;
-		--button-padding-inline: 3ch;
+		--control-height-base: 3.5rem;
 
 		z-index: 2;
 		grid-area: cta;
diff --git a/apps/web/src/lib/modules/common/components/Hero.svelte b/apps/web/src/lib/modules/common/components/Hero.svelte
index 90cbd73f..1812628e 100644
--- a/apps/web/src/lib/modules/common/components/Hero.svelte
+++ b/apps/web/src/lib/modules/common/components/Hero.svelte
@@ -87,7 +87,7 @@
         inline-size: 100%;
 
 		@media (--sm-n-above) {
-			--button-height-base: 4rem;
+			--control-height-base: 4rem;
 
 			font-size: var(--font-size-large);
 		}
diff --git a/packages/ui/src/styles/components/alerts.css b/packages/ui/src/styles/components/alerts.css
index 0b0b19fe..39bfeec1 100644
--- a/packages/ui/src/styles/components/alerts.css
+++ b/packages/ui/src/styles/components/alerts.css
@@ -2,7 +2,7 @@
     :where(.nc-alert) {
         background: var(--surface);
         color: var(--text);
-        gap: 0.75em;
+        gap: var(--control-spacing-base, 0.75em);
     }
 
     :where(.nc-alert) > .nc-icon {
diff --git a/packages/ui/src/styles/components/badges.css b/packages/ui/src/styles/components/badges.css
index 0dcecb3b..09fd9b7a 100644
--- a/packages/ui/src/styles/components/badges.css
+++ b/packages/ui/src/styles/components/badges.css
@@ -7,8 +7,7 @@
         border: var(--border-width-thin) solid var(--text, var(--color-text-base));
         border-radius: var(--border-radius-small);
         background: var(--surface, transparent);
-        padding: 0.5em;
+        padding: var(--control-spacing-minimal, 0.125em) var(--control-spacing-near, 0.5em);
         inline-size: max-content;
-        line-height: 1;
     }
 }
diff --git a/packages/ui/src/styles/components/breadcrumbs.css b/packages/ui/src/styles/components/breadcrumbs.css
index 41008b81..4056c7d3 100644
--- a/packages/ui/src/styles/components/breadcrumbs.css
+++ b/packages/ui/src/styles/components/breadcrumbs.css
@@ -14,7 +14,7 @@
         }
 
         &:not(:last-child):after {
-            padding-inline: 0.5em;
+            padding-inline: var(--control-spacing-near, 0.5em);
             color: inherit;
             content: "›";
             font-size: inherit;
diff --git a/packages/ui/src/styles/components/buttons.css b/packages/ui/src/styles/components/buttons.css
index 151d8db3..6d7152e3 100644
--- a/packages/ui/src/styles/components/buttons.css
+++ b/packages/ui/src/styles/components/buttons.css
@@ -32,14 +32,14 @@
         --_button-box-shadow: var(--button-box-shadow, var(--shadow-near));
         --_button-hover-shadow: var(--button-hover-shadow, var(--shadow-nearest));
 
-        --_button-padding-inline: var(--button-padding-inline, 0.5em);
+        --_button-padding-inline: var(--button-padding-inline, var(--control-spacing-base, 0.75em));
 
         background-color: var(--_button-background);
         color: var(--_button-color);
         border: var(--border-width-thin) solid var(--_button-border-color);
         border-radius: var(--_button-border-radius);
         padding-inline: var(--_button-padding-inline);
-        min-block-size: var(--button-height-base);
+        min-block-size: var(--control-height-base);
         padding-block: 0;
         font-family: var(--font-family-button);
         letter-spacing: var(--tracking-tight);
@@ -140,8 +140,8 @@
         }
 
         &.-small {
-            --_button-padding-inline: 0.5em;
-            min-block-size: var(--button-height-small);
+            --_button-padding-inline: var(--control-spacing-near, 0.5em);
+            min-block-size: var(--control-height-small);
         }
 
         &.-round {
@@ -149,8 +149,14 @@
         }
 
         &.-offset {
-            --_button-offset-distance: var(--button-offset-distance, -0.15em);
-            --_button-offset-distance-hover: var(--button-offset-distance-hover, -0.075em);
+            --_button-offset-distance: var(
+                --button-offset-distance,
+                calc(-1 * var(--control-spacing-minimal))
+            );
+            --_button-offset-distance-hover: var(
+                --button-offset-distance-hover,
+                calc(-0.5 * var(--control-spacing-minimal))
+            );
 
             --_button-transform: translate(
                 var(--_button-offset-distance),
@@ -188,7 +194,7 @@
          */
 
         &:has(svg) {
-            gap: 0.25em;
+            gap: var(--control-spacing-tiny, 0.25em);
         }
 
         /*
@@ -206,12 +212,12 @@
 
             &:after {
                 content: "";
-                inline-size: max(var(--button-height-base), 100%);
-                block-size: max(var(--button-height-base), 100%);
+                inline-size: max(var(--control-height-base), 100%);
+                block-size: max(var(--control-height-base), 100%);
                 aspect-ratio: 1;
                 border-radius: 100%;
-                inset-inline-start: calc(-0.5 * (var(--button-height-base) - 100%));
-                inset-block-start: calc(-0.5 * (var(--button-height-base) - 100%));
+                inset-inline-start: calc(-0.5 * (var(--control-height-base) - 100%));
+                inset-block-start: calc(-0.5 * (var(--control-height-base) - 100%));
                 position: absolute;
                 z-index: -1;
                 pointer-events: all;
@@ -235,8 +241,8 @@
         color: var(--_input-color);
         background-color: var(--_input-background);
         border: var(--_input-border);
-        min-block-size: var(--button-height-base);
-        padding-inline-end: 0.5em;
+        min-block-size: var(--control-height-base);
+        padding-inline-end: var(--contol-spacing-near, 0.5em);
         padding-inline-start: 0;
         border-radius: var(--_input-border-radius);
     }
@@ -246,10 +252,10 @@
         background-color: var(--_button-background);
         color: var(--_button-color);
         padding-inline: var(--_button-padding-inline);
-        margin-inline-end: 0.5em;
+        margin-inline-end: var(--contol-spacing-near, 0.5em);
         cursor: pointer;
         box-shadow: none;
-        min-block-size: calc(var(--button-height-base) - var(--border-width-thin));
+        min-block-size: calc(var(--control-height-base) - var(--border-width-thin));
         border: none;
         border-inline-end: var(--border-width-thin) solid var(--color-border-base);
         transform: none;
diff --git a/packages/ui/src/styles/components/dialogs.css b/packages/ui/src/styles/components/dialogs.css
index fda2fb91..b49d499a 100644
--- a/packages/ui/src/styles/components/dialogs.css
+++ b/packages/ui/src/styles/components/dialogs.css
@@ -2,7 +2,7 @@
     :where(.nc-dialog) {
         --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
         --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
-        --_dialog-close-size: var(--dialog-close-size, var(--button-height-base));
+        --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
         --_dialog-transition-duration: var(
             --dialog-transition-duration,
             var(--transition-duration-base)
@@ -28,7 +28,7 @@
         padding: 0;
         border-radius: var(--_dialog-radius);
         overflow: clip;
-        overflow-clip-margin: 1em;
+        overflow-clip-margin: var(--control-spacing-far, 1em);
         pointer-events: all;
 
         @media (min-width: 36rem) {
@@ -63,7 +63,7 @@
             block-size: max-content;
             max-block-size: var(--_dialog-max-block-size);
             overflow: clip;
-            overflow-clip-margin: 1em;
+            overflow-clip-margin: var(--control-spacing-far, 1em);
 
             & > *:first-child {
                 border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
diff --git a/packages/ui/src/styles/components/forms.css b/packages/ui/src/styles/components/forms.css
index 10bf4037..8ae24e4d 100644
--- a/packages/ui/src/styles/components/forms.css
+++ b/packages/ui/src/styles/components/forms.css
@@ -11,7 +11,7 @@
     }
 
     :where(.nc-form-hint) {
-        margin-block: 0.75em;
+        margin-block: var(--control-spacing-base, 0.75em);
         font-size: var(--font-size-large);
         color: var(--color-text-muted);
     }
@@ -30,7 +30,7 @@
         inline-size: 100%;
 
         & + * {
-            margin-block-start: var(--nc-legend-spacing, 1em);
+            margin-block-start: var(--nc-legend-spacing, var(--control-spacing-far, 1em));
         }
     }
 
@@ -41,7 +41,7 @@
                 > :is(legend:not([class]), .nc-legend)
                 + .nc-hint
         ) {
-        --nc-legend-spacing: .2em;
-        margin-block-end: 0.75em;
+        --nc-legend-spacing: var(--control-spacing-tiny, 0.25em);
+        margin-block: var(--control-spacing-base, 0.75em);
     }
 }
diff --git a/packages/ui/src/styles/components/icons.css b/packages/ui/src/styles/components/icons.css
index 8ef39b6c..2ae6ce68 100644
--- a/packages/ui/src/styles/components/icons.css
+++ b/packages/ui/src/styles/components/icons.css
@@ -36,7 +36,7 @@
         }
 
         &[data-size="button"] {
-            --icon-size: var(--button-height-base);
+            --icon-size: var(--control-height-base);
         }
 
         &[data-animation="spinning"] {
@@ -44,7 +44,7 @@
         }
     }
 
-    :where(button, .nc-button)>.nc-icon {
+    :where(button, .nc-button) > .nc-icon {
         --icon-size: 2ex;
     }
 
diff --git a/packages/ui/src/styles/components/inputs/base.css b/packages/ui/src/styles/components/inputs/base.css
index 8106735a..57af0982 100644
--- a/packages/ui/src/styles/components/inputs/base.css
+++ b/packages/ui/src/styles/components/inputs/base.css
@@ -61,8 +61,8 @@
         );
         --_input-disabled-filter: var(--input-disabled-filter, contrast(0.72) opacity(0.72));
 
-        --_input-padding-block: var(--input-padding-block, 0.25em);
-        --_input-padding-inline: var(--input-padding-inline, 0.5em);
+        --_input-padding-block: var(--input-padding-block, var(--control-spacing-tiny, 0.25em));
+        --_input-padding-inline: var(--input-padding-inline, var(--control-spacing-base, 0.75em));
         --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
     }
 
@@ -96,7 +96,7 @@
         background-color: var(--_input-background);
         border: var(--_input-border);
         border-radius: var(--_input-border-radius);
-        block-size: var(--button-height-base);
+        block-size: var(--control-height-base);
         padding-inline: var(--_input-padding-inline);
         box-shadow: var(--_input-box-shadow);
         inline-size: var(--input-inline-size, auto);
@@ -226,7 +226,7 @@
     :where(input[type="color"], .nc-input-color) {
         aspect-ratio: 1;
         inline-size: auto;
-        padding: calc(var(--button-height-base) / 12);
+        padding: var(--control-spacing-minimal, 0.125em);
     }
 
     :where(input[type="date"], .nc-input-date) {
@@ -241,8 +241,8 @@
         &::-webkit-slider-thumb,
         &::-moz-range-thumb {
             appearance: none;
-            inline-size: calc(var(--button-height-base) * 0.7);
-            block-size: calc(var(--button-height-base) * 0.7);
+            inline-size: calc(var(--control-height-base) * 0.625);
+            block-size: calc(var(--control-height-base) * 0.625);
             border-radius: var(--_input-border-radius);
             border: var(--_input-border);
             border-color: var(--color-text-base);
diff --git a/packages/ui/src/styles/components/inputs/fields.css b/packages/ui/src/styles/components/inputs/fields.css
index 0f70a712..5e736fbc 100644
--- a/packages/ui/src/styles/components/inputs/fields.css
+++ b/packages/ui/src/styles/components/inputs/fields.css
@@ -1,7 +1,7 @@
 @layer components.input-fields {
     :where(.nc-input-field) {
         display: grid;
-        gap: 0.35em;
+        gap: var(--control-spacing-near, 0.5em);
         grid-template-columns: minmax(0, 1fr);
         inline-size: 100%;
         min-inline-size: var(--input-field-min-inline-size);
@@ -14,7 +14,7 @@
         }
 
         & > .nc-cluster {
-            gap: 0.5em;
+            gap: var(--control-spacing-base, 0.75em);
         }
     }
 
@@ -33,7 +33,7 @@
             justify-content: center;
             background-color: var(--color-base);
             color: var(--color-surface-subtle);
-            margin-inline-end: 0.5em;
+            margin-inline-end: var(--control-spacing-base, 0.75em);
             inline-size: 1em;
             block-size: 1em;
             flex-shrink: 0;
@@ -50,7 +50,7 @@
 
         & > [data-label] {
             grid-area: label;
-            padding-inline-start: 0.5em;
+            padding-inline-start: var(--control-spacing-base, 0.75em);
         }
 
         & .nc-input-label {
@@ -70,7 +70,7 @@
         gap: 0;
 
         > *:not(:first-child) {
-            margin-block-start: 0.75em;
+            margin-block-start: var(--control-spacing-far, 0.75em);
         }
     }
 }
diff --git a/packages/ui/src/styles/components/inputs/segmented.css b/packages/ui/src/styles/components/inputs/segmented.css
index abd487e9..8b828949 100644
--- a/packages/ui/src/styles/components/inputs/segmented.css
+++ b/packages/ui/src/styles/components/inputs/segmented.css
@@ -15,7 +15,7 @@
 
         container: segmented-control / inline-size;
 
-        --nc-legend-spacing: 0.35em;
+        --nc-legend-spacing: var(--control-spacing-near, 0.5em);
     }
 
     :where(.nc-segmented-control) {
@@ -43,7 +43,7 @@
             display: flex;
             padding-inline: var(--_input-padding-inline);
             padding-block: var(--_input-padding-block);
-            min-block-size: var(--segmented-control-min-height, var(--button-height-base));
+            min-block-size: var(--segmented-control-min-height, var(--control-height-base));
             color: var(--_input-color);
             border: var(--_input-border);
             align-items: center;
diff --git a/packages/ui/src/styles/components/inputs/tag-select.css b/packages/ui/src/styles/components/inputs/tag-select.css
index b141c1ef..d153010f 100644
--- a/packages/ui/src/styles/components/inputs/tag-select.css
+++ b/packages/ui/src/styles/components/inputs/tag-select.css
@@ -9,10 +9,11 @@
             var(--color-brand-primary-base)
         );
         --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
-        --nc-legend-spacing: 0.35em;
+
+        --nc-legend-spacing: var(--control-spacing-near, 0.5em);
 
         &:focus-within:has(:focus-visible) {
-            outline-offset: 0.5em;
+            outline-offset: var(--controls-spacing-near, 0.5em);
             outline: var(--_input-outline);
             border-radius: var(--_tag-select-border-radius);
         }
diff --git a/packages/ui/src/styles/components/lists.css b/packages/ui/src/styles/components/lists.css
index b495b536..07dc670b 100644
--- a/packages/ui/src/styles/components/lists.css
+++ b/packages/ui/src/styles/components/lists.css
@@ -11,7 +11,7 @@
         inline-size: 100%;
 
         &:not(:last-child) {
-            margin-block-end: 0.5em;
+            margin-block-end: var(--control-spacing-base, 0.75em);
         }
     }
 
@@ -22,7 +22,7 @@
             &:not(:last-child):after {
                 content: "";
                 border-right: var(--border-width-medium) solid var(--color-border-muted);
-                margin: 0 0.5em;
+                margin: 0 var(--control-spacing-base, 0.75em);
                 transform: calc(var(--border-width-medium) / 2);
             }
         }
diff --git a/packages/ui/src/styles/components/notifications.css b/packages/ui/src/styles/components/notifications.css
index 174f0fed..1c95fac2 100644
--- a/packages/ui/src/styles/components/notifications.css
+++ b/packages/ui/src/styles/components/notifications.css
@@ -62,7 +62,7 @@
     }
 
     :where(.nc-notification) {
-        padding: 0.5em 1em;
+        padding: var(--control-spacing-near, 0.5em) var(--control-spacing-base, 0.75em);
         background: var(--color-surface-base);
         border: var(--border-width-thin) solid var(--_notification-border-color);
         display: flex;
@@ -99,7 +99,7 @@
         justify-content: space-between;
         align-items: flex-end;
         inline-size: 100%;
-        margin-block-start: 0.25em;
+        margin-block-start: var(--control-spacing-tiny, 0.25em);
     }
 
     :where(.nc-notification .nc-button, .nc-notification-center .nc-button) {
diff --git a/packages/ui/src/styles/config/extras.css b/packages/ui/src/styles/config/extras.css
index 5ddbe545..c84cd043 100644
--- a/packages/ui/src/styles/config/extras.css
+++ b/packages/ui/src/styles/config/extras.css
@@ -1,12 +1,9 @@
 @layer config {
     :where(html) {
-        --button-height-base: 2.5rem;
-        --button-height-small: 2rem;
+        --control-height-base: var(--button-height-base);
+        --control-height-small: var(--button-height-small);
 
         --font-family-link: var(--font-family-default);
         --font-family-button: var(--font-family-default);
-
-        --input-height-base: 2.5rem;
-        --input-height-small: 2rem;
     }
 }
diff --git a/packages/ui/src/styles/utils/base.css b/packages/ui/src/styles/utils/base.css
index 613fb563..7a38ee24 100644
--- a/packages/ui/src/styles/utils/base.css
+++ b/packages/ui/src/styles/utils/base.css
@@ -15,7 +15,7 @@
         color: var(--color-text-base);
 
         &:not(:last-of-type) {
-            padding-block-end: 0.5lh;
+            padding-block-end: var(--control-spacing-base, 0.75em);
             border-bottom: var(--border-width-thin) solid var(--color-border-muted);
         }
     }
@@ -28,7 +28,7 @@
         align-items: flex-start;
         overflow-wrap: anywhere;
         container: description-list / inline-size;
-        row-gap: 0.5lh;
+        row-gap: var(--control-spacing-base, 0.75em);
     }
 
     :where(dd, dt) {
@@ -44,7 +44,7 @@
             min-block-size: 100%;
 
             &:not(:last-of-type) {
-                padding-block-end: 0.5lh;
+                padding-block-end: var(--control-spacing-base, 0.75em);
                 border-bottom: var(--border-width-thin) solid var(--color-border-muted);
             }
         }
@@ -78,12 +78,12 @@
         display: block;
         color: var(--color-surface-subtle);
         background-color: var(--color-text-base);
-        padding: 0.35em 0.5em;
+        padding: var(--control-spacing-nearest, 0.375em) var(--control-spacing-base, 0.75em);
     }
 
     :where(details) {
-        --p-x-details: 1em;
-        --p-y-details: 1em;
+        --p-x-details: var(--control-spacing-far, 1em);
+        --p-y-details: var(--control-spacing-far, 1em);
         --b-r-details: var(--border-radius-medium);
 
         background-color: var(--color-surface-muted);
@@ -112,7 +112,7 @@
     .note,
     blockquote {
         padding: 0;
-        padding-inline-start: 1em;
+        padding-inline-start: var(--control-spacing-far, 1em);
         inline-size: 100%;
         color: var(--color-text-base);
         position: relative;
@@ -148,7 +148,7 @@
 
         & cite:before {
             content: "—";
-            margin-inline-end: 0.5em;
+            margin-inline-end: var(--control-spacing-near, 0.5em);
         }
     }
 
@@ -209,7 +209,7 @@
         color: inherit;
         font-family: var(--font-family-link);
         text-decoration: underline;
-        text-underline-offset: 0.35em;
+        text-underline-offset: var(--control-spacing-nearest, 0.375em);
         text-decoration-thickness: from-font;
         font-weight: var(--font-weight-default);
         text-decoration-color: currentColor;
@@ -254,7 +254,7 @@
     }
 
     :where(del, ins, mark, code, kbd, var) {
-        padding-inline: 0.25em;
+        padding-inline: var(--control-spacing-tiny, 0.25em);
         border-radius: var(--border-radius-small);
         line-height: inherit;
         box-decoration-break: clone;
@@ -265,7 +265,7 @@
         font-family: var(--font-family-mono);
         letter-spacing: 0;
         font-weight: var(--font-weight-default);
-        padding-block: 0.2em;
+        padding-block: var(--control-spacing-minimal, 0.125em);
         max-inline-size: fit-content;
         hyphens: none;
         tab-size: 4;
@@ -292,7 +292,7 @@
     }
 
     :where(pre) {
-        padding: 1em;
+        padding: var(--control-spacing-far, 1em);
         inline-size: 100%;
         overflow-x: auto;
         color: var(--color-text-base);
@@ -336,7 +336,7 @@
     }
 
     :where(td, th) {
-        padding: 0.5em;
+        padding: var(--control-spacing-near, 0.5em);
         line-height: var(--line-height-small);
         white-space: nowrap;
         font-variant-numeric: tabular-nums;
@@ -411,15 +411,15 @@
     }
 
     :where(ul, ol) {
-        padding-inline-start: 1em;
+        padding-inline-start: var(--control-spacing-farthest, 1.5em);
     }
 
     :where(li + li) {
-        margin-block-start: 0.5em;
+        margin-block-start: var(--control-spacing-near, 0.5em);
     }
 
     :where(li > :is(ul, ol)) {
-        margin-block-start: 0.5em;
+        margin-block-start: var(--control-spacing-near, 0.5em);
     }
 
     @supports (font-variant-position: sub) {
@@ -465,7 +465,7 @@
     }
 
     :where(.quoted p:first-of-type::before) {
-        margin-inline-start: -0.5em;
+        margin-inline-start: calc(-1 * var(--control-spacing-near, 0.5em));
     }
     :where(.quoted p) {
         hanging-punctuation: first last;
diff --git a/packages/ui/src/styles/utils/reset.css b/packages/ui/src/styles/utils/reset.css
index 91ce1408..d81f717c 100644
--- a/packages/ui/src/styles/utils/reset.css
+++ b/packages/ui/src/styles/utils/reset.css
@@ -28,7 +28,7 @@
 
     :where(:not(:active):focus-visible) {
         outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-        outline-offset: 0.5em;
+        outline-offset: var(--control-spacing-near, 0.5em);
     }
 
     :where(:focus:not(:focus-visible)) {