diff --git a/src/components/AnonymousEditWarning.vue b/src/components/AnonymousEditWarning.vue
index ec7ac614..4d998e9c 100644
--- a/src/components/AnonymousEditWarning.vue
+++ b/src/components/AnonymousEditWarning.vue
@@ -33,7 +33,9 @@ const warning = computed(
 </template>
 
 <style lang="scss" scoped>
+@import '@/styles/custom-variables.css';
+
 .wbl-snl-anonymous-edit-warning {
-	margin: 1rem 0;
+	margin: var( --dimension-layout-xsmall ) 0;
 }
 </style>
diff --git a/src/components/LanguageInput.vue b/src/components/LanguageInput.vue
index bab445d3..d632bde5 100644
--- a/src/components/LanguageInput.vue
+++ b/src/components/LanguageInput.vue
@@ -79,11 +79,11 @@ export default {
 </template>
 
 <style lang="scss">
-@import '@wmde/wikit-tokens/variables';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 /* stylelint-disable selector-class-pattern */
 .wbl-snl-language-lookup .wikit .wikit-Lookup__label-wrapper {
-	gap: $dimension-spacing-xsmall;
+	gap: $spacing-50;
 }
 /* stylelint-enable selector-class-pattern */
 
diff --git a/src/components/LemmaInput.vue b/src/components/LemmaInput.vue
index 7f77697a..8df746e2 100644
--- a/src/components/LemmaInput.vue
+++ b/src/components/LemmaInput.vue
@@ -83,11 +83,3 @@ export default {
 		</template>
 	</cdx-field>
 </template>
-
-<style lang="scss">
-@import '@wmde/wikit-tokens/variables';
-
-.wbl-snl-required-asterisk {
-	margin-inline-start: $dimension-spacing-xsmall;
-}
-</style>
diff --git a/src/components/LexicalCategoryInput.vue b/src/components/LexicalCategoryInput.vue
index 54427801..b93ead0b 100644
--- a/src/components/LexicalCategoryInput.vue
+++ b/src/components/LexicalCategoryInput.vue
@@ -73,10 +73,10 @@ export default {
 </template>
 
 <style lang="scss">
-@import '@wmde/wikit-tokens/variables';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 /* stylelint-disable selector-class-pattern */
 .wbl-snl-lexical-category-lookup .wikit .wikit-Lookup__label-wrapper {
-	gap: $dimension-spacing-xsmall;
+	gap: $spacing-50;
 }
 /* stylelint-enable selector-class-pattern */
 
diff --git a/src/components/NewLexemeForm.vue b/src/components/NewLexemeForm.vue
index 07d5ed76..d5999e31 100644
--- a/src/components/NewLexemeForm.vue
+++ b/src/components/NewLexemeForm.vue
@@ -191,30 +191,31 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import '@wmde/wikit-tokens/variables';
-@import '@wmde/wikit-vue-components/src/styles/mixins/Typography';
+@import '@/styles/custom-variables.css';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 .wbl-snl-form {
 	& > * + * {
-		margin-top: $dimension-layout-xsmall;
+		margin-top: var( --dimension-layout-xsmall );
 	}
 
 	// Box model
-	padding: $dimension-layout-small;
+	padding: var( --dimension-layout-small );
 
 	// Border
 	border-style: $border-style-base;
-	border-width: $border-width-thin;
+	border-width: $border-width-base;
 	border-radius: $border-radius-base;
-	border-color: $border-color-base-subtle;
+	border-color: $border-color-muted;
 }
 
 .wbl-snl-copyright {
-	@include small-text;
-
-	font-size: 0.8125rem;
-	font-style: italic;
-	font-synthesis: none;
+	/* codex Body S */
+	font-family: $font-family-system-sans;
+	font-size: $font-size-small;
+	font-weight: $font-weight-normal;
+	line-height: $line-height-medium;
+	color: $color-base;
 	margin-bottom: 0;
 }
 
diff --git a/src/components/RequiredAsterisk.vue b/src/components/RequiredAsterisk.vue
index a1018c16..31aad707 100644
--- a/src/components/RequiredAsterisk.vue
+++ b/src/components/RequiredAsterisk.vue
@@ -21,18 +21,12 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import '@wmde/wikit-tokens/variables';
+@import '../styles/custom-variables.css';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 .wbl-snl-required-asterisk {
-	font-size: $font-size-xxlarge;
+	font-size: $font-size-x-large;
 	line-height: 0;
-
-	&:not( :first-child ) {
-		margin-inline-start: $dimension-spacing-small;
-	}
-
-	&:not( :last-child ) {
-		margin-inline-end: $dimension-spacing-small;
-	}
+	margin-inline-start: var( --dimension-spacing-xsmall );
 }
 </style>
diff --git a/src/components/SearchExisting.vue b/src/components/SearchExisting.vue
index 3bd87532..b421e5bf 100644
--- a/src/components/SearchExisting.vue
+++ b/src/components/SearchExisting.vue
@@ -24,13 +24,19 @@ const searchMessage = computed( () => messages.get(
 </template>
 
 <style lang="scss" scoped>
-@import '@wmde/wikit-tokens/variables';
-@import '@wmde/wikit-vue-components/src/styles/mixins/Typography';
+@import '@/styles/custom-variables.css';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 .wbl-snl-search-existing {
-	@include body;
+	/* font Codex Body */
+	font-family: $font-family-system-sans;
+	font-size: $font-size-small;
+	font-weight: $font-weight-normal;
+	line-height: $line-height-medium;
+	color: $color-base;
 
-	margin-top: 1rem;
-	margin-bottom: 1rem;
+	/* margins */
+	margin-top: var( --dimension-layout-xsmall );
+	margin-bottom: var( --dimension-layout-xsmall );
 }
 </style>
diff --git a/src/components/SpellingVariantInput.vue b/src/components/SpellingVariantInput.vue
index 901dae2f..d5b8bbf6 100644
--- a/src/components/SpellingVariantInput.vue
+++ b/src/components/SpellingVariantInput.vue
@@ -127,13 +127,18 @@ export default {
 </template>
 
 <style lang="scss">
-@import '@wmde/wikit-tokens/variables';
+@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
 
 .wbl-snl-spelling-variant-lookup {
 	/* stylelint-disable plugin/stylelint-bem-namics, selector-class-pattern */
 	&.wikit .wikit-Lookup__label-wrapper {
-		gap: $dimension-spacing-xsmall;
+		gap: $spacing-50;
 	}
 	/* stylelint-enable plugin/stylelint-bem-namics, selector-class-pattern */
+
+	&__help-link {
+		padding-bottom: $spacing-50;
+		display: inline-block;
+	}
 }
 </style>
diff --git a/src/styles/custom-variables.css b/src/styles/custom-variables.css
new file mode 100644
index 00000000..17aadaa6
--- /dev/null
+++ b/src/styles/custom-variables.css
@@ -0,0 +1,8 @@
+* {
+	/* layout */
+	--dimension-layout-xsmall: 1rem;
+	--dimension-layout-small: 1.5rem;
+
+	/* spacing */
+	--dimension-spacing-xsmall: 0.25rem;
+}