diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 9ce40c071d..f21a3fa84c 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -22,14 +22,31 @@
             class="flex gap-3"
             v-if="socialButtons"
           >
-            <LinkButton
+            <!--
+              Ghost icon buttons, straight from the design system. webkit calls
+              that kind `transparent`: no fill and no border at rest, with the
+              hover/active layers coming from the component's own ghost
+              overlays.
+
+              Consuming IconButton directly rather than routing through
+              LinkButton (as this used to, via `outlined iconPos="center"`):
+              LinkButton is the compatibility adapter for the ~1.5k content
+              call sites, and it puts `w-fit` on its root for the label case --
+              which overrode IconButton's `size-10` and rendered these six
+              icons as 18x40 slivers instead of 40px squares. First-party
+              components in this repo already go direct (Header.vue for Button,
+              Divider above), and it also puts `ariaLabel` on the prop the
+              design system actually reads instead of relying on attribute
+              fallthrough to fill it in.
+            -->
+            <IconButton
               v-for="({ icon, link, title, target }, index) in socialButtons"
-              outlined
-              iconPos="center"
-              :aria-label="title"
               :key="index"
               :icon="icon"
-              :link="link"
+              :ariaLabel="title"
+              kind="transparent"
+              size="large"
+              :href="link"
               :target="target || '_blank'"
             />
           </div>
@@ -82,9 +99,22 @@
 </template>
 
 <script setup>
-  import Divider from '~/components/webkit/Divider.vue'
+  /*
+    Divider comes straight from the design system. The local
+    webkit/Divider.vue wrapper existed only to carry the hand-written
+    `border-t-[var(--border-default)]` rule that webkit's Divider now owns;
+    with no props to translate and no docs-specific default, a pass-through
+    file would just be a redirect that makes this import ambiguous.
+
+    Both call sites below already sit inside `hidden md:block` / `md:hidden`
+    wrappers, so webkit's `flex w-full` classes never compete with the
+    visibility utilities -- which matters because Tailwind runs in important
+    mode here and `.hidden` is emitted before `.flex`.
+  */
+  import Divider from '@aziontech/webkit/divider'
   import AzionLogo from '~/components/webkit/AzionLogo.vue'
   import Overline from '~/components/webkit/Overline.vue'
+  import IconButton from '@aziontech/webkit/icon-button'
   import LinkButton from '~/components/webkit/LinkButton.vue'
 
   defineProps({
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 9348e6b59d..0aa17b694f 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -9,27 +9,38 @@
       </div>
 
       <div class="flex gap-2">
-        <a
+        <!--
+          Header CTAs come from @aziontech/webkit's Button instead of the
+          `.wk-header-button` CSS this file used to carry (a hand-made port of
+          azion-theme's PrimeVue `.p-button`).
+
+          Visibility lives on the wrapper, NOT on the Button. Tailwind emits
+          `.hidden{display:none}` *before* `.inline-flex{display:inline-flex}`
+          at equal specificity, so a `hidden` class sitting next to webkit's own
+          `inline-flex` loses the cascade and the element stays visible. It used
+          to work because the old anchor took its `inline-flex` from unlayered
+          scoped CSS, which any utility outranks. A wrapper with no display
+          utility of its own sidesteps the fight entirely.
+
+          `title` does not survive the move: webkit's Button declares
+          `inheritAttrs: false` and forwards only `class` and `data-testid`, so
+          the tooltip attribute these anchors carried cannot reach the DOM. The
+          visible label is the accessible name either way.
+        -->
+        <span
           v-for="(menu, index) in menuSecondary"
           :key="index"
-          :target="menu.target"
-          :href="menu.link"
-          :title="menu.title"
-          :class="[
-            menu.destak ? menuClasses.destak : menuClasses.default,
-            { 'wk-header-button-info': menu.severity === 'info' },
-            { 'wk-header-button-outlined': menu.outlined === true },
-            menu.minBreakpoint && menu.minBreakpoint === 'sm' && 'block',
-            menu.minBreakpoint && menu.minBreakpoint === 'md' && 'hidden md:block',
-            menu.minBreakpoint && menu.minBreakpoint === 'lg' && 'hidden lg:block',
-            menu.minBreakpoint && menu.minBreakpoint === 'xl' && 'hidden xl:block',
-            menu.minBreakpoint && menu.minBreakpoint === '2xl' && 'hidden 2xl:block'
-          ]"
+          :class="visibilityClass(menu)"
         >
-          <span>
-            {{ menu.text }}
-          </span>
-        </a>
+          <Button
+            :label="menu.text"
+            :href="menu.link"
+            :target="menu.target"
+            :kind="menuKind(menu)"
+            size="medium"
+            class="whitespace-nowrap"
+          />
+        </span>
 
         <div
           v-if="$slots.dialog"
@@ -45,88 +56,46 @@
 </template>
 
 <script setup>
+  import Button from '@aziontech/webkit/button'
+
   const props = defineProps({ menuSecondary: Object })
   const { menuSecondary } = props
-  const menuClasses = {
-    destak: 'header-button-destak wk-header-button wk-header-button-secondary whitespace-nowrap hidden',
-    default: 'wk-header-button wk-header-button-text whitespace-nowrap'
-  }
-</script>
 
-<style scoped>
   /*
-    Visual port of azion-theme's PrimeVue `.p-button` (small size) variants used
-    by the header's secondary menu, rebuilt on @aziontech/theme v4 tokens.
-
-    `.wk-header-button-primary` / `.wk-header-button-secondary` are intentionally kept as class
-    names here: they are the two state hooks that the inline scroll script in
-    BaseLayout.astro toggles on `.header-button-destak` (white call-to-action at
-    the top of the page, orange once scrolled past 500px). Renaming them would
-    silently break that behavior.
+    `severity: 'info'` has no counterpart among webkit's kinds (theme@4's
+    `--info` is a tinted surface, not a button kind) and falls back to
+    `outlined`, the same fallback used by LinkButton and HeaderRightSidebar.
+    Non-destak entries were the transparent `text` variant.
   */
-  .wk-header-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacing-xxs);
-    padding: var(--spacing-xxs) var(--spacing-xs);
-    border: var(--border-width-default) solid transparent;
-    border-radius: var(--shape-button);
-    color: var(--text-default);
-    font-size: var(--text-sm);
-    font-weight: 500;
-    line-height: 1.25rem;
-    text-decoration: none;
-    cursor: pointer;
-    user-select: none;
-    transition:
-      background-color var(--transition-duration-fast-02) var(--ease-productive-entrance),
-      border-color var(--transition-duration-fast-02) var(--ease-productive-entrance),
-      color var(--transition-duration-fast-02) var(--ease-productive-entrance);
-  }
-
-  /* text: transparent, surface only on hover (Contact / Sign in) */
-  .wk-header-button-text {
-    background: transparent;
-    border-color: transparent;
-  }
+  function menuKind(menu) {
+    if (menu.severity === 'info' || menu.outlined === true) return 'outlined'
+    if (menu.destak) return 'secondary'
 
-  .wk-header-button-text:hover,
-  .wk-header-button-text:active {
-    background: var(--bg-hover);
+    return 'text'
   }
 
-  /* outlined */
-  .wk-header-button-outlined {
-    background: transparent;
-    border-color: var(--border-default);
-  }
-
-  .wk-header-button-outlined:hover,
-  .wk-header-button-outlined:active {
-    background: var(--bg-hover);
-  }
+  /*
+    `destak` keeps the `hidden` it has always had: this entry ships hidden and
+    the docs' header data sets no `minBreakpoint` that would reveal it, so the
+    CTA has never been displayed here. The inline script in BaseLayout.astro
+    that used to swap its variant on scroll was therefore mutating an invisible
+    element; it was removed along with the CSS hooks it toggled. Showing the
+    CTA is a content decision (give the entry a `minBreakpoint`), and reviving
+    the scrolled state needs a variant source other than a class swap on
+    webkit's internals, since this component is not hydrated.
+  */
+  function visibilityClass(menu) {
+    const breakpoint = {
+      sm: 'block',
+      md: 'hidden md:block',
+      lg: 'hidden lg:block',
+      xl: 'hidden xl:block',
+      '2xl': 'hidden 2xl:block'
+    }[menu.minBreakpoint]
 
-  /* primary — destak, scrolled state */
-  .wk-header-button.wk-header-button-primary {
-    background: var(--primary);
-    border-color: var(--primary);
-    color: var(--primary-contrast);
-  }
+    if (breakpoint) return breakpoint
 
-  /* secondary — destak, top-of-page state */
-  .wk-header-button.wk-header-button-secondary {
-    background: var(--secondary);
-    border-color: var(--secondary);
-    color: var(--secondary-contrast);
+    return menu.destak ? 'hidden' : ''
   }
+</script>
 
-  /* info severity (last, so it wins over the text/outlined variants) */
-  .wk-header-button-info,
-  .wk-header-button-info:hover,
-  .wk-header-button-info:active {
-    background: var(--info);
-    border-color: var(--info-border);
-    color: var(--info-contrast);
-  }
-</style>
diff --git a/src/components/sidebarpanelmenu/PanelMenuTree.vue b/src/components/sidebarpanelmenu/PanelMenuTree.vue
index b1ca984b84..6da520b80c 100644
--- a/src/components/sidebarpanelmenu/PanelMenuTree.vue
+++ b/src/components/sidebarpanelmenu/PanelMenuTree.vue
@@ -27,9 +27,16 @@
 					>
 						{{ item.text }}
 					</p>
+					<!--
+						`text-default`, not `text-primary`: the disclosure chevron is
+						part of the row's label, so it takes the same neutral text
+						colour the label next to it uses instead of the brand orange.
+						Being a token, it follows the theme -- near-white on dark,
+						near-black on light -- rather than being pinned to one value.
+					-->
 					<i
 						v-if="item.items && item.items.length"
-						class="pi pi-angle-right text-primary ml-auto pr-1"
+						class="pi pi-angle-right text-default ml-auto pr-1"
 						:class="{ 'rotate-90': expandedKeys[item.key] }"
 					></i>
 				</div>
@@ -50,7 +57,7 @@
 					></i>
 
 					<span @click="$emit('itemClick', item, $event)">
-						<i class="pi pi-angle-right text-primary ml-auto pr-1"></i>
+						<i class="pi pi-angle-right text-default ml-auto pr-1"></i>
 					</span>
 				</a>
 				<a
diff --git a/src/components/webkit/AskAISplitButton.vue b/src/components/webkit/AskAISplitButton.vue
index 21723d61ac..c796389682 100644
--- a/src/components/webkit/AskAISplitButton.vue
+++ b/src/components/webkit/AskAISplitButton.vue
@@ -1,59 +1,75 @@
 <template>
-	<div
-		ref='rootRef'
-		class='relative flex h-8'
+	<!--
+		Composed exactly the way @aziontech/webkit builds its own SplitButton --
+		Button + IconButton joined inside a Dropdown -- rather than the two
+		hand-painted <button>s (and hand-written outside-click / Escape
+		handling) this component used to carry. SplitButton itself is not used
+		directly because its `model` renders label-only rows, and these actions
+		each carry a description line; Dropdown.Option's default slot keeps
+		them.
+	-->
+	<Dropdown
+		placement='bottom-end'
+		@select='onSelect'
 	>
-		<button
-			type='button'
-			class='text-sm min-w-32 group cursor-pointer bg-neutral-950 text-neutral-100 duration-300 px-3 transition ease-in-out rounded-l-md active:bg-neutral-900 border border-neutral-900 hover:bg-neutral-900 hover:text-orange-500'
-			@click='getPageMarkdown'
-		>
-			{{ label }}
-		</button>
-
-		<button
-			type='button'
-			aria-haspopup='menu'
-			:aria-expanded='isMenuOpen'
-			aria-label='More options'
-			class='group cursor-pointer bg-neutral-950 text-neutral-100 duration-300 transition px-3 rounded-r-md rounded-l-none active:bg-neutral-900 border border-l-0 border-neutral-900 hover:bg-neutral-900'
-			@click='toggleMenu'
-		>
-			<i class='pi pi-chevron-down group-hover:text-orange-500 h-3 w-3 text-xs'></i>
-		</button>
-
-		<ul
-			v-if='isMenuOpen'
-			role='menu'
-			class='absolute right-0 top-full z-50 mt-1 w-64 list-none p-3 m-0 rounded-md bg-neutral-950 border border-neutral-900'
-		>
-			<li
-				v-for='(item, index) in menuItems[props.lang as keyof typeof menuItems]'
+		<div class='inline-flex w-fit items-stretch'>
+			<Button
+				:label='label'
+				kind='secondary'
+				size='medium'
+				class='min-w-32 rounded-r-none! focus-visible:z-[1]'
+				@click='getPageMarkdown'
+			/>
+
+			<Dropdown.Trigger>
+				<IconButton
+					icon='pi pi-chevron-down'
+					:ariaLabel='toggleAriaLabel'
+					kind='secondary'
+					size='medium'
+					class='rounded-l-none! -ml-px border-l border-[var(--border-default)] focus-visible:z-[1]'
+				/>
+			</Dropdown.Trigger>
+		</div>
+
+		<Dropdown.Group>
+			<!--
+				Dropdown.Option is a single-line row (`h-8 min-h-8`, and it puts
+				`whitespace-nowrap` on its content). These actions each carry a
+				description line, so the row is relaxed to grow with its content
+				and the text is allowed to wrap -- otherwise the two lines
+				overlap and long labels get clipped by the panel's
+				`overflow-hidden`.
+			-->
+			<Dropdown.Option
+				v-for='(item, index) in items'
 				:key='index'
-				role='menuitem'
+				:value='String(index)'
+				class='h-auto py-[var(--spacing-xs)]'
 			>
-				<div
-					class='flex gap-2 hover:bg-neutral-900 p-1 rounded-md cursor-pointer'
-					@click='runItemCommand(item)'
-				>
+				<template #left>
 					<i
 						:class='item.icon'
-						class='text-neutral-500 text-xs pt-0.5'
+						class='text-[length:inherit] leading-none'
+						aria-hidden='true'
 					/>
-					<div class='flex flex-col gap-1'>
-						<p class='text-neutral-100 text-sm'>
-							{{ item.label }}
-						</p>
-						<p class='text-neutral-500 text-xs'>{{ item.description }}</p>
-					</div>
-				</div>
-			</li>
-		</ul>
-	</div>
+				</template>
+
+				<span class='flex min-w-0 flex-col gap-1 whitespace-normal'>
+					<span>{{ item.label }}</span>
+					<span class='text-xs text-muted'>{{ item.description }}</span>
+				</span>
+			</Dropdown.Option>
+		</Dropdown.Group>
+	</Dropdown>
 </template>
 
 <script setup lang="ts">
-	import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+	import { computed, ref } from 'vue'
+
+	import Button from '@aziontech/webkit/button'
+	import IconButton from '@aziontech/webkit/icon-button'
+	import Dropdown from '@aziontech/webkit/dropdown'
 
 	interface AskAISplitButtonMenuItem {
 		label: string
@@ -73,8 +89,6 @@
 	})
 
 	const isCopied = ref(false)
-	const isMenuOpen = ref(false)
-	const rootRef = ref<HTMLElement | null>(null)
 
 	const label = computed(() => {
 		const lang = props.lang as AskAISplitButtonLang
@@ -92,38 +106,14 @@
 		}[lang]
 	})
 
-	const toggleMenu = () => {
-		isMenuOpen.value = !isMenuOpen.value
-	}
-
-	const closeMenu = () => {
-		isMenuOpen.value = false
-	}
-
-	const runItemCommand = (item: AskAISplitButtonMenuItem) => {
-		item.command()
-		closeMenu()
-	}
+	const toggleAriaLabel = computed(() => `${label.value} \u2014 more actions`)
 
-	const onDocumentClick = (event: MouseEvent) => {
-		if (!isMenuOpen.value) return
-		if (rootRef.value && !rootRef.value.contains(event.target as Node)) closeMenu()
+	// Dropdown owns open state, outside-click and Escape now; it hands back the
+	// activated option's value, which is the item's index in `items`.
+	const onSelect = (_event: MouseEvent | KeyboardEvent, value: string | number) => {
+		items.value[Number(value)]?.command()
 	}
 
-	const onDocumentKeydown = (event: KeyboardEvent) => {
-		if (event.key === 'Escape') closeMenu()
-	}
-
-	onMounted(() => {
-		document.addEventListener('click', onDocumentClick)
-		document.addEventListener('keydown', onDocumentKeydown)
-	})
-
-	onBeforeUnmount(() => {
-		document.removeEventListener('click', onDocumentClick)
-		document.removeEventListener('keydown', onDocumentKeydown)
-	})
-
 	const pageMarkdown = ref<string | null>(null)
 
 	const getPageMarkdown = async () => {
@@ -345,4 +335,8 @@
 			}
 		]
 	}
+
+	const items = computed(
+		() => menuItems[props.lang as AskAISplitButtonLang] ?? menuItems.en
+	)
 </script>
diff --git a/src/components/webkit/AzionLogo.vue b/src/components/webkit/AzionLogo.vue
index b1422c1c38..80fb036124 100644
--- a/src/components/webkit/AzionLogo.vue
+++ b/src/components/webkit/AzionLogo.vue
@@ -1,53 +1,64 @@
 <template>
-	<AzionLogoSvgMin
-		v-if="version === 'min'"
-		:href="href"
-		:title="hrefTitle"
-		:target="target"
-		aria-label="Azion Logo"
-	/>
+	<!--
+		The anchor lives here now. webkit's Brand renders a bare
+		`<span role="img">` with no link affordance, so the `href` / `hrefTitle` /
+		`target` half of this component's contract -- previously satisfied by the
+		five AzionLogoSvg*.vue files, each carrying its own copy of the same
+		`<a>` -- has to come from this wrapper instead.
 
-	<AzionLogoSvgDefault
-		v-else-if="version === 'default'"
+		Keeping the anchor as the single root also keeps automatic attribute
+		fallthrough working: Footer.vue passes `class="mb-4 block"`, and those
+		utilities land on the anchor rather than on Brand's span. That matters
+		because Tailwind runs in important mode here, so a display utility sitting
+		*next to* Brand's own `inline-flex` would lose the cascade; on a different
+		element there is nothing to compete with.
+	-->
+	<a
 		:href="href"
 		:title="hrefTitle"
 		:target="target"
 		aria-label="Azion Logo"
-	/>
+	>
+		<!--
+			`aria-hidden` is load-bearing. Brand hardcodes `role="img"
+			aria-label="Azion"` on its span, so without it this link would expose two
+			competing accessible names: "Azion Logo" from the anchor and "Azion" from
+			the graphic nested inside it. The name belongs on the interactive element,
+			so the anchor keeps the label and the decorative mark leaves the
+			accessibility tree. Brand declares `inheritAttrs: false` and re-binds
+			`$attrs` on that span, so the attribute does reach the DOM.
 
-	<AzionLogoSvgMoveToTheEdge
-		v-else-if="version === 'move to the edge'"
-		:href="href"
-		:title="hrefTitle"
-		:target="target"
-		aria-label="Azion Logo"
-	/>
-
-	<AzionLogoSvgTechnologies
-		v-else-if="version === 'technologies'"
-		:href="href"
-		:title="hrefTitle"
-		:target="target"
-		aria-label="Azion Logo"
-	/>
-
-	<AzionLogoSvgFull
-		v-else-if="version === 'full'"
-		:href="href"
-		:title="hrefTitle"
-		:target="target"
-		aria-label="Azion Logo"
-	/>
+			The anchor's `aria-label` stays a *static* attribute precisely so a
+			fallthrough `aria-label` from a call site still overrides it -- Footer.vue
+			relies on that to say "Azion logo", exactly as it did before.
+		-->
+		<Brand
+			:kind="kind"
+			size="small"
+			aria-hidden="true"
+		/>
+	</a>
 </template>
 
 <script setup>
-	import AzionLogoSvgMin from './AzionLogoSvgMin.vue';
-	import AzionLogoSvgDefault from './AzionLogoSvgDefault.vue';
-	import AzionLogoSvgMoveToTheEdge from './AzionLogoSvgMoveToTheEdge.vue';
-	import AzionLogoSvgTechnologies from './AzionLogoSvgTechnologies.vue';
-	import AzionLogoSvgFull from './AzionLogoSvgFull.vue';
+	import { computed } from 'vue';
+
+	import Brand from '@aziontech/webkit/brand';
 
-	defineProps({
+	/*
+		Adapter over @aziontech/webkit's Brand. Brand is the same
+		version-selector this file used to be, over the same assets: the path data
+		in AzionLogoSvgDefault.vue and AzionLogoSvgMin.vue was byte-identical to
+		webkit's own src/svg/azion/{default,min}, down to the Figma-generated
+		clipPath ids. Keeping local copies meant maintaining a fork of the brand
+		mark, so the five AzionLogoSvg*.vue files are gone.
+
+		The public prop surface (`href`, `hrefTitle`, `target`, `version`) is
+		unchanged apart from the two `version` values noted below, so neither
+		BaseLayout.astro nor Footer.vue -- the only two call sites -- needs to
+		change.
+	*/
+	const props = defineProps({
 		href: {
 			type: String
 		},
@@ -58,11 +69,51 @@
 			type: String,
 			default: '_self'
 		},
+		/*
+			`full` and `move to the edge` are deliberately no longer accepted.
+			Neither has a Brand `kind`, and neither could be mapped without silently
+			swapping the artwork: the old local versions composed their taglines as
+			HTML text at hardcoded sizes (12.88px / 8.4px / 15.96px) in
+			titillium-web and roboto-condensed, tinted with `text-default`, while
+			webkit ships them as separate vector exports
+			(`@aziontech/webkit/svg/azion/{full,move-to-the-edge}`) with different
+			aspect ratios (250x46 and 207x19 vs the old 126x26 and 90x19) and, for
+			move-to-the-edge, a hardcoded `#B5B5B5` tagline fill that would not
+			follow the light/dark theme.
+
+			Nothing in the repo instantiates either value, so rather than wire up two
+			unexercised branches with known theming bugs, the validator now rejects
+			them -- a dev-time Vue warning is a much better failure mode than
+			quietly rendering the wrong lockup. Re-adding them later means importing
+			the corresponding webkit svg export and fixing its fill.
+		*/
 		version: {
 			type: String,
-			default: () => 'default',
-			validator: (value) =>
-				['min', 'default', 'move to the edge', 'technologies', 'full'].includes(value)
+			default: 'default',
+			validator: (value) => ['min', 'default', 'technologies'].includes(value)
 		}
 	});
+
+	// The three surviving versions map 1:1 onto Brand's kinds.
+	const KIND_BY_VERSION = {
+		min: 'reduced',
+		default: 'default',
+		technologies: 'extended'
+	};
+
+	const kind = computed(() => KIND_BY_VERSION[props.version] ?? 'default');
+
+	/*
+		`size` is fixed at `small` rather than exposed as a prop, because the goal
+		here is to keep the current rendering. Brand drives the lockup height from
+		the size token (small/medium/large = 16/24/32px, width auto), and the old
+		SVGs rendered at their intrinsic 18px. `small` lands 2px under that;
+		`medium` would be a 33% jump, which the 32px-tall header row
+		(Header.vue's `h-8`) cannot absorb gracefully.
+
+		Overriding the height with a utility is not an option: Brand sets it via
+		`[&[data-size=small]>svg]:h-4`, whose attribute selector outranks any plain
+		`[&>svg]:h-[18px]` we could add, and in important mode both sides would be
+		`!important` anyway.
+	*/
 </script>
diff --git a/src/components/webkit/AzionLogoSvgDefault.vue b/src/components/webkit/AzionLogoSvgDefault.vue
deleted file mode 100644
index 3464d8fa72..0000000000
--- a/src/components/webkit/AzionLogoSvgDefault.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-	<a
-		:href="href"
-		:title="hrefTitle"
-		:target="target"
-		aria-label="Azion Logo"
-	>
-		<svg
-			width="90"
-			height="18"
-			viewBox="0 0 90 18"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<g clip-path="url(#clip0_4263_8239)">
-				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-					d="M86.637 0L85.1445 7.79033L87.861 11.1671L90 0H86.637ZM72.5099 0L69.1465 17.561H72.5111L74.8163 5.52224L84.5333 17.561H86.637L87.0518 15.4112L74.6131 0H72.5099Z"
-					fill="#F3652B"
-				/>
-				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-					d="M51.6563 0L48.293 17.561H65.7833L69.1466 0H51.6563ZM54.3884 3.31794H65.1392L63.0467 14.243H52.296L54.3884 3.31794Z"
-					fill="#F3652B"
-				/>
-				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-					d="M45.0001 0L41.707 17.561H44.9994L48.2924 0H45.0001Z"
-					fill="#F3652B"
-				/>
-				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-					d="M24.217 0L23.5814 3.31801H35.1962L21.3511 14.9756L20.8535 17.561H38.3437L38.9793 14.243H27.3646L41.2126 2.58289L41.7072 0H24.217Z"
-					fill="#F3652B"
-				/>
-				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-					d="M18.2868 0L0.490892 14.9821L0 17.561H2.5639L16.349 5.96141L14.1271 17.561H17.4898L20.8537 0H18.2868Z"
-					fill="#F3652B"
-				/>
-			</g>
-			<defs>
-				<clipPath id="clip0_4263_8239">
-					<rect
-						width="90"
-						height="18"
-						fill="white"
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	</a>
-</template>
-
-<script setup>
-	defineProps({
-		href: {
-			type: String
-		},
-		hrefTitle: {
-			type: String
-		},
-		target: {
-			type: String,
-			default: '_self'
-		},
-		version: {
-			type: String,
-			default: () => 'default'
-		}
-	});
-</script>
diff --git a/src/components/webkit/AzionLogoSvgFull.vue b/src/components/webkit/AzionLogoSvgFull.vue
deleted file mode 100644
index 137e9025ca..0000000000
--- a/src/components/webkit/AzionLogoSvgFull.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-	<a
-		:href="href"
-		:title="hrefTitle"
-		:target="target"
-		aria-label="Azion Logo"
-		class="flex gap-[7px]"
-	>
-		<div class="flex flex-col gap-[2.68px]">
-			<svg
-				width="126"
-				height="26"
-				fill="currentColor"
-				viewBox="0 0 126 26"
-			>
-				<path
-					fill="#F3652B"
-					d="m120.989.228-2.085 10.793 3.794 4.678L125.685.23h-4.696Zm-19.729 0-4.697 24.33h4.699l3.219-16.68 13.57 16.68h2.938l.579-2.979L104.197.23h-2.937Zm-29.122 0-4.697 24.33h24.425L96.563.228H72.138Zm3.816 4.597h15.013l-2.922 15.136H73.03l2.922-15.136ZM62.843.228l-4.6 24.33h4.599L67.44.228h-4.597Zm-29.023 0-.888 4.597h16.22l-19.335 16.15-.695 3.582h24.425l.888-4.596h-16.22L57.554 3.807l.69-3.579H33.82Zm-8.282 0L.686 20.985 0 24.558h3.58l19.251-16.07-3.102 16.07h4.695L29.122.228h-3.584Z"
-				/>
-			</svg>
-			<div class="flex gap-[1px] justify-end w-full items-start text-default titillium-web">
-				<div class="text-[12.88px]">technologies</div>
-				<div class="text-[8.4px]">®</div>
-			</div>
-		</div>
-		<div
-			class="h-[24px] flex items-center tracking-[0.6px] text-default text-[15.96px] roboto-condensed italic font-normal"
-		>
-			move to the edge
-		</div>
-	</a>
-</template>
-
-<script setup>
-	defineProps({
-		href: {
-			type: String
-		},
-		hrefTitle: {
-			type: String
-		},
-		target: {
-			type: String,
-			default: '_self'
-		},
-		version: {
-			type: String,
-			default: () => 'default'
-		}
-	});
-</script>
diff --git a/src/components/webkit/AzionLogoSvgMin.vue b/src/components/webkit/AzionLogoSvgMin.vue
deleted file mode 100644
index 2827566042..0000000000
--- a/src/components/webkit/AzionLogoSvgMin.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-	<a
-		:href="href"
-		:title="hrefTitle"
-		:target="target"
-		aria-label="Azion Logo"
-	>
-		<svg
-			width="21"
-			height="18"
-			viewBox="0 0 21 18"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<g clip-path="url(#clip0_4263_24662)">
-				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
-					d="M18.2868 0L0.490892 14.9821L0 17.561H2.5639L16.349 5.96141L14.1271 17.561H17.4898L20.8537 0H18.2868Z"
-					fill="#F3652B"
-				/>
-			</g>
-			<defs>
-				<clipPath id="clip0_4263_24662">
-					<rect
-						width="21"
-						height="18"
-						fill="white"
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	</a>
-</template>
-
-<script setup>
-	defineProps({
-		href: {
-			type: String
-		},
-		hrefTitle: {
-			type: String
-		},
-		target: {
-			type: String,
-			default: '_self'
-		},
-		version: {
-			type: String,
-			default: () => 'default',
-			validator: (value) =>
-				['min', 'default', 'move to the edge', 'technologies', 'full'].includes(value)
-		}
-	});
-</script>
diff --git a/src/components/webkit/AzionLogoSvgMoveToTheEdge.vue b/src/components/webkit/AzionLogoSvgMoveToTheEdge.vue
deleted file mode 100644
index 2ee1329748..0000000000
--- a/src/components/webkit/AzionLogoSvgMoveToTheEdge.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-	<a
-		:href="href"
-		:title="hrefTitle"
-		:target="target"
-		aria-label="Azion Logo"
-		class="flex gap-[5px]"
-	>
-		<div class="flex flex-col gap-[2.68px]">
-			<svg
-				width="90"
-				height="19"
-				fill="currentColor"
-				viewBox="0 0 90 19"
-			>
-				<g clip-path="url(#a)">
-					<path
-						fill="#F3652B"
-						d="m86.446.818-1.49 7.711 2.711 3.343L89.801.818h-3.355Zm-14.096 0L68.994 18.2h3.357l2.3-11.917L84.347 18.2h2.099l.414-2.128L74.448.818H72.35Zm-20.808 0L48.186 18.2h17.452L68.994.818H51.542Zm2.726 3.284h10.727l-2.088 10.814H52.181l2.087-10.814ZM44.9.818 41.616 18.2H44.9L48.186.818H44.9Zm-20.737 0-.634 3.284h11.59l-13.815 11.54-.497 2.559H38.26l.634-3.285h-11.59L41.121 3.374l.494-2.556H24.163Zm-5.917 0L.49 15.648 0 18.201h2.558L16.313 6.719 14.096 18.2h3.355L20.808.818h-2.562Z"
-					/>
-				</g>
-				<defs>
-					<clipPath id="a">
-						<path
-							fill="#fff"
-							d="M0 .818h89.801v17.818H0z"
-						/>
-					</clipPath>
-				</defs>
-			</svg>
-		</div>
-		<div
-			class="h-[17.82px] flex items-center tracking-[0.4px] text-default text-[11.4px] roboto-condensed italic font-normal"
-		>
-			move to the edge
-		</div>
-	</a>
-</template>
-
-<script setup>
-	defineProps({
-		href: {
-			type: String
-		},
-		hrefTitle: {
-			type: String
-		},
-		target: {
-			type: String,
-			default: '_self'
-		},
-		version: {
-			type: String,
-			default: () => 'default'
-		}
-	});
-</script>
diff --git a/src/components/webkit/AzionLogoSvgTechnologies.vue b/src/components/webkit/AzionLogoSvgTechnologies.vue
deleted file mode 100644
index 5d77189ad1..0000000000
--- a/src/components/webkit/AzionLogoSvgTechnologies.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-	<a
-		:href="href"
-		:title="hrefTitle"
-		:target="target"
-		aria-label="Azion Logo"
-		class="flex gap-[5px]"
-	>
-		<div class="flex flex-col gap-[2.68px]">
-			<svg
-				width="90"
-				height="19"
-				fill="currentColor"
-				viewBox="0 0 90 19"
-			>
-				<g clip-path="url(#a)">
-					<path
-						fill="#F3652B"
-						d="m86.446.818-1.49 7.711 2.711 3.343L89.801.818h-3.355Zm-14.096 0L68.994 18.2h3.357l2.3-11.917L84.347 18.2h2.099l.414-2.128L74.448.818H72.35Zm-20.808 0L48.186 18.2h17.452L68.994.818H51.542Zm2.726 3.284h10.727l-2.088 10.814H52.181l2.087-10.814ZM44.9.818 41.616 18.2H44.9L48.186.818H44.9Zm-20.737 0-.634 3.284h11.59l-13.815 11.54-.497 2.559H38.26l.634-3.285h-11.59L41.121 3.374l.494-2.556H24.163Zm-5.917 0L.49 15.648 0 18.201h2.558L16.313 6.719 14.096 18.2h3.355L20.808.818h-2.562Z"
-					/>
-				</g>
-				<defs>
-					<clipPath id="a">
-						<path
-							fill="#fff"
-							d="M0 .818h89.801v17.818H0z"
-						/>
-					</clipPath>
-				</defs>
-			</svg>
-			<div class="flex gap-[1px] justify-end w-full items-start text-default titillium-web">
-				<div class="text-[9.35px]">technologies</div>
-				<div class="text-[6.2px]">®</div>
-			</div>
-		</div>
-	</a>
-</template>
-
-<script setup>
-	defineProps({
-		href: {
-			type: String
-		},
-		hrefTitle: {
-			type: String
-		},
-		target: {
-			type: String,
-			default: '_self'
-		},
-		version: {
-			type: String,
-			default: () => 'default'
-		}
-	});
-</script>
diff --git a/src/components/webkit/Banner.vue b/src/components/webkit/Banner.vue
index 64a24898aa..aceee91add 100644
--- a/src/components/webkit/Banner.vue
+++ b/src/components/webkit/Banner.vue
@@ -1,7 +1,53 @@
 <template>
 	<div class="px-3 p-2 rounded-md border border-default max-w-3xl">
 		<p class="text-center">
-			<span class="wk-tag mr-1.5">News</span>
+			<!--
+				Was a hand-rolled `.wk-tag` in a now-deleted `<style scoped>`
+				block: a visual port of PrimeVue's Tag that hardcoded
+				`background: #f3652b` and `color: var(--primary-text-color,
+				#ffffff)` -- a variable @aziontech/theme 4.x does not define,
+				so the label was always the #ffffff fallback.
+				That hex IS `var(--primary)`, so the chip was pinned to the
+				light-theme brand orange and could never follow the theme.
+
+				Consuming @aziontech/webkit/tag directly rather than the sibling
+				Tag.vue: that component is a compatibility shim whose whole
+				reason to exist is the ~391 frozen `severity="info"` /`value`
+				call sites in src/content, and its severity list does not even
+				include the value needed here. Routing a first-party component
+				through the legacy adapter would couple Banner to a shim we want
+				free to delete, and would make the chip's appearance depend on
+				the shim's *default* severity rather than on a stated one.
+
+				Badge, not Tag: the two look alike but paint `primary`
+				differently, and only one of them reproduces this chip. Tag's
+				`primary` is `--primary-mask` (#FE601F33, a 20% orange wash)
+				with orange text -- a tinted chip. Badge's `primary` is
+				`bg-[var(--primary)]` with `text-[var(--primary-contrast)]`,
+				i.e. the solid brand fill with its readable counterpart, which
+				is exactly what the old `.wk-tag` drew. So the migration keeps
+				the original appearance instead of trading it for a wash, and
+				gains the theme-awareness the hardcoded hex never had.
+
+				One real change comes with that: `--primary-contrast` is
+				#FFFFFF on light and #000000 on dark, where the old chip was
+				always white. The dark theme therefore gets a black label on
+				orange -- the contrast pair the theme prescribes, rather than
+				the light-theme value leaking into both.
+
+				`size="small"` matches the old chip's 20px height exactly
+				(12px * 1.0 line-height + 2 * 4px padding); horizontal padding
+				goes 6.4px -> 4px, and font weight 700 -> the token's 600.
+				`mr-1.5` is kept on the component itself: webkit's badge emits
+				no margin utility, so there is nothing for Tailwind's important
+				mode to fight over.
+			-->
+			<Badge
+				label="News"
+				severity="primary"
+				size="small"
+				class="mr-1.5"
+			/>
 			<span class="text-sm text-muted text-center *:">
 				{{ description }}
 			</span>
@@ -18,6 +64,8 @@
 </template>
 
 <script setup>
+	import Badge from '@aziontech/webkit/badge';
+
 	defineProps({
 		description: {
 			type: String
@@ -30,22 +78,3 @@
 		}
 	});
 </script>
-
-<style scoped>
-	/*
-		Visual port of PrimeVue Tag (azion-theme): small bold badge on the
-		primary (orange) background, replacing `import Tag from 'primevue/tag'`.
-	*/
-	.wk-tag {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		background: #f3652b;
-		color: var(--primary-text-color, #ffffff);
-		font-size: 0.75rem;
-		font-weight: 700;
-		padding: 0.25rem 0.4rem;
-		border-radius: 6px;
-		line-height: 1;
-	}
-</style>
diff --git a/src/components/webkit/Divider.vue b/src/components/webkit/Divider.vue
deleted file mode 100644
index f332ee0595..0000000000
--- a/src/components/webkit/Divider.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-	<hr class="m-0 border-none border-t border-t-[var(--border-default)]" />
-</template>
diff --git a/src/components/webkit/HeaderRightSidebar.vue b/src/components/webkit/HeaderRightSidebar.vue
index 95c50803f8..55a8866fb0 100644
--- a/src/components/webkit/HeaderRightSidebar.vue
+++ b/src/components/webkit/HeaderRightSidebar.vue
@@ -1,16 +1,13 @@
 <template>
 	<!-- open sidebar button -->
-	<button
-		type="button"
-		@click="visibleRight = true"
-		class="wk-drawer-icon-button lg:hidden flex flex-none w-8 h-8 items-center justify-center"
+	<IconButton
+		icon="pi pi-bars"
 		aria-label="Menu"
-	>
-		<span
-			class="pi pi-bars"
-			data-pc-section="icon"
-		></span>
-	</button>
+		kind="outlined"
+		size="medium"
+		class="lg:hidden flex-none"
+		@click="visibleRight = true"
+	/>
 
 	<!-- Teleport only after mount: Astro islands SSR this component, and a
 	     server-rendered teleport has no matching node on the client (the
@@ -34,17 +31,14 @@
 				<div class="grow overflow-y-auto p-3 md:p-8">
 					<!-- close sidebar button -->
 					<div class="flex justify-end pb-6 pr-2 md:pr-0">
-						<button
-							type="button"
-							@click="visibleRight = false"
-							class="wk-drawer-icon-button flex flex-none w-8 h-8 items-center justify-center"
+						<IconButton
+							icon="pi pi-times"
 							aria-label="Close"
-						>
-							<span
-								class="pi pi-times"
-								data-pc-section="icon"
-							></span>
-						</button>
+							kind="outlined"
+							size="medium"
+							class="flex-none"
+							@click="visibleRight = false"
+						/>
 					</div>
 
 					<!-- slot to receive custom menu -->
@@ -102,25 +96,23 @@
 					</template>
 
 					<template v-if="bottomButtons">
-						<div class="fixed bottom-6 flex gap-2 items-center">
-							<a
+						<!--
+							`flex-wrap` and the `small` size below keep the three CTAs
+							inside the drawer: webkit's `medium` Button carries a
+							`min-w-16` that the hand-styled anchors did not have, which
+							pushed the row past the 320px drawer on mobile.
+						-->
+						<div class="fixed bottom-6 flex flex-wrap gap-2 items-center">
+							<Button
 								v-for="(button, index) in bottomButtons"
 								:key="index"
+								:label="button.label"
 								:href="button.url"
 								:title="button.urlTitle"
-								:class="[
-									button.destak
-										? 'wk-drawer-button wk-drawer-button-primary justify-between'
-										: 'wk-drawer-button wk-drawer-button-outlined',
-									{ 'wk-drawer-button-info': button.severity === 'info' }
-								]"
-							>
-								{{ button.label }}
-								<i
-									v-if="button.icon"
-									:class="button.icon"
-								></i>
-							</a>
+								:icon="button.icon"
+								:kind="bottomButtonKind(button)"
+								size="small"
+							/>
 						</div>
 					</template>
 				</div>
@@ -131,8 +123,30 @@
 
 <script setup>
 	import { onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'
+
+	import Button from '@aziontech/webkit/button'
+	import IconButton from '@aziontech/webkit/icon-button'
+
 	import Tag from '~/components/webkit/Tag.vue'
 
+	/*
+		The drawer's controls come from @aziontech/webkit now (IconButton for
+		the open/close triggers, Button for the bottom CTAs) instead of the
+		`.wk-drawer-icon-button` / `.wk-drawer-button` CSS this file used to
+		carry -- that was a hand-made port of azion-theme's PrimeVue
+		`.p-button`, i.e. a parallel implementation of the design system's own
+		button.
+
+		`severity: 'info'` has no counterpart among webkit's kinds (theme@4's
+		`--info` is a tinted surface, not a button kind), so it falls back to
+		`outlined` like everywhere else in this repo.
+	*/
+	function bottomButtonKind(button) {
+		if (button.severity === 'info') return 'outlined'
+
+		return button.destak ? 'primary' : 'outlined'
+	}
+
 	let props = defineProps({
 		menuData: Object,
 		menuSecondary: Array,
@@ -172,74 +186,3 @@
 	})
 </script>
 
-<style scoped>
-	/*
-		Visual port of azion-theme's PrimeVue `.p-button` (small size) variants
-		used by this drawer -- the outlined icon buttons that open/close it and
-		the call-to-action links pinned to its bottom edge. Rebuilt on
-		@aziontech/theme v4 tokens.
-	*/
-	.wk-drawer-icon-button {
-		background: transparent;
-		border: var(--border-width-default) solid var(--border-default);
-		border-radius: var(--shape-button);
-		color: var(--text-default);
-		font-size: var(--text-sm);
-		cursor: pointer;
-		user-select: none;
-		transition:
-			background-color var(--transition-duration-fast-02) var(--ease-productive-entrance),
-			border-color var(--transition-duration-fast-02) var(--ease-productive-entrance);
-	}
-
-	.wk-drawer-icon-button:hover,
-	.wk-drawer-icon-button:active {
-		background: var(--bg-hover);
-	}
-
-	.wk-drawer-button {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--spacing-xs);
-		white-space: nowrap;
-		padding: var(--spacing-xxs) var(--spacing-sm);
-		border: var(--border-width-default) solid transparent;
-		border-radius: var(--shape-button);
-		font-size: var(--text-sm);
-		font-weight: 500;
-		line-height: 1.25rem;
-		text-decoration: none;
-		cursor: pointer;
-		user-select: none;
-		transition:
-			background-color var(--transition-duration-fast-02) var(--ease-productive-entrance),
-			border-color var(--transition-duration-fast-02) var(--ease-productive-entrance),
-			color var(--transition-duration-fast-02) var(--ease-productive-entrance);
-	}
-
-	.wk-drawer-button-primary {
-		background: var(--primary);
-		border-color: var(--primary);
-		color: var(--primary-contrast);
-	}
-
-	.wk-drawer-button-outlined {
-		background: transparent;
-		border-color: var(--border-default);
-		color: var(--text-default);
-	}
-
-	.wk-drawer-button-outlined:hover,
-	.wk-drawer-button-outlined:active {
-		background: var(--bg-hover);
-	}
-
-	/* info severity (last, so it wins over the primary/outlined variants) */
-	.wk-drawer-button-info,
-	.wk-drawer-button-info:hover,
-	.wk-drawer-button-info:active {
-		background: var(--info);
-		border-color: var(--info-border);
-		color: var(--info-contrast);
-	}
-</style>
diff --git a/src/components/webkit/HeaderSearchDialog.vue b/src/components/webkit/HeaderSearchDialog.vue
index 7c82b0d0ec..baa710e4f7 100644
--- a/src/components/webkit/HeaderSearchDialog.vue
+++ b/src/components/webkit/HeaderSearchDialog.vue
@@ -9,18 +9,26 @@
 		:inputPlaceholder='inputPlaceholder'
 	/>
 
-	<button
-		type='button'
+	<!--
+		The search trigger is webkit's IconButton (icon-only control) instead of
+		a hand-styled <button>. `transparent` is the kind that matches how it
+		has to sit inside the header bar.
+	-->
+	<IconButton
+		icon='pi pi-search'
 		aria-label='Search'
-		class='text-neutral-900 flex-none p-2 bg-transparent xl:border-hidden inline-flex cursor-pointer items-center justify-center rounded-md xl:p-6'
+		kind='transparent'
+		size='medium'
+		class='flex-none'
 		@click='activeDialog'
-	>
-		<i class='pi pi-search xl:text-neutral-200'></i>
-	</button>
+	/>
 </template>
 
 <script setup>
 	import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+	import IconButton from '@aziontech/webkit/icon-button'
+
 	import AlgoliaDialog from './AlgoliaDialog.vue'
 
 	const props = defineProps({
diff --git a/src/components/webkit/HeroButton.vue b/src/components/webkit/HeroButton.vue
index cf2fd14e89..c01d73eefe 100644
--- a/src/components/webkit/HeroButton.vue
+++ b/src/components/webkit/HeroButton.vue
@@ -1,5 +1,11 @@
 <template>
-	<template v-if="href || type === 'link' || type === 'linkExternal' || type === 'linkSecondary'">
+	<!--
+		Link variants stay as they are: `link`, `linkExternal` and
+		`linkSecondary` are text links with an animated underline and a trailing
+		arrow, not buttons -- webkit's Button has no such variant and would drop
+		the affordance.
+	-->
+	<template v-if="isLinkVariant">
 		<a
 			:href="href"
 			class="not-prose flex gap-3 w-fit cursor-pointer group"
@@ -46,31 +52,30 @@
 			</span>
 		</a>
 	</template>
+	<!--
+		Chip variants (primary / secondary / tertiary) are buttons, so they come
+		from @aziontech/webkit now. Button renders an <a> when `href` is set and
+		a <button> otherwise, which is exactly the split this component used to
+		hand-code.
+	-->
 	<template v-else>
-		<button
-			type="button"
-			class="wk-hero-button"
-			:class="[customClass, buttonClasses[theme]]"
-		>
-			<span
-				v-if="icon"
-				class="wk-hero-button-icon pi"
-				:class="[icon, themedIconClasses]"
-			/>
-			<span
-				v-if="label"
-				class="wk-hero-button-label"
-				:class="labelClasses"
-			>
-				{{ label }}
-			</span>
-		</button>
+		<Button
+			:label="label"
+			:icon="icon"
+			:kind="kind"
+			:size="webkitSize"
+			:href="href"
+			:target="target"
+			class="not-prose no-underline"
+		/>
 	</template>
 </template>
 
 <script setup>
 	import { computed } from 'vue';
 
+	import Button from '@aziontech/webkit/button';
+
 	/*
 		Colors below are @aziontech/theme@4 semantic tokens instead of the raw
 		Tailwind palette this component used to hardcode (neutral-900,
@@ -90,7 +95,15 @@
 		},
 		type: {
 			type: String,
-			options: ['primary', 'secondary', 'link', 'linkExternal', 'tertiary', 'linkSecondary'],
+			options: [
+				'primary',
+				'secondary',
+				'outlined',
+				'link',
+				'linkExternal',
+				'tertiary',
+				'linkSecondary'
+			],
 			default: 'secondary'
 		},
 		href: String,
@@ -110,6 +123,46 @@
 		}
 	});
 
+	const LINK_VARIANTS = ['link', 'linkExternal', 'linkSecondary'];
+
+	const isLinkVariant = computed(() => LINK_VARIANTS.includes(props.type));
+
+	/*
+		Chip variants onto webkit's kinds, deliberately using the design
+		system's own names one-to-one instead of re-interpreting them:
+
+		- `primary`   -> `primary`    (solid brand fill: the page's main CTA)
+		- `secondary` -> `secondary`  (the inverted-surface chip)
+		- `outlined`  -> `outlined`   (bordered, low-emphasis)
+		- `tertiary`  -> `text`       (no box at rest)
+
+		`secondary` mapping straight through is the point. A button authored in
+		src/content as `severity: 'secondary'` reaches LinkButton as webkit's
+		`secondary`, so sending the same authored value to webkit's `outlined`
+		here made one prop render as two different buttons depending on whether
+		it sat in a hero or in body copy. The hero now matches the ~1.5k content
+		CTAs.
+
+		What does not carry over from the old bespoke chips: the hover inversion
+		(`primary` used to sit on a raised surface and flip to the brand fill),
+		the `font-proto-mono` label, and the `customClass` padding override --
+		all of those are webkit's Button's business now. `theme` still drives
+		the link variants below.
+	*/
+	const kind = computed(
+		() =>
+			({
+				primary: 'primary',
+				secondary: 'secondary',
+				outlined: 'outlined',
+				tertiary: 'text'
+			})[props.type] ?? 'secondary'
+	);
+
+	// This component's sizes are ['small', 'large']; webkit's are
+	// small | medium | large, so they line up directly.
+	const webkitSize = computed(() => (props.size === 'small' ? 'small' : 'large'));
+
 	const underlineHover = computed(() => {
 		const underlineBase =
 			"relative after:duration-150 hover:after:w-full group-hover:after:w-full after:left-0 after:w-0 after:h-[1px] after:transition-all after:content-[''] after:absolute after:-bottom-[.1rem]";
@@ -141,39 +194,11 @@
 		const focusOverride =
 			'focus:outline-none focus:ring-0 focus:shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-none';
 
-		// primary: raised surface chip that turns into the brand fill on hover.
-		// `--bg-surface-raised` is neutral-900 on dark / white on light, and
-		// `--text-default` is its readable counterpart, so one string covers the
-		// old dark/light pair. On hover the label uses `--primary-contrast`, the
-		// theme's prescribed colour for text on `--primary`.
-		const primary = `h-fit group border-1 border-[var(--bg-surface-raised)] bg-[var(--bg-surface-raised)] text-[var(--text-default)] duration-300 transition rounded-[var(--shape-button)] hover:bg-[var(--primary)] hover:border-[var(--primary)] hover:text-[var(--primary-contrast)] ${focusOverride}`;
-
-		// secondary: `--bg-selected` is the resting chip and `--bg-surface` the
-		// hover step -- which conveniently moves in the direction each theme
-		// used to move by hand (darker on dark, lighter on light).
-		const secondary = `h-fit group bg-[var(--bg-selected)] text-[var(--text-default)] duration-300 transition rounded-[var(--shape-button)] active:bg-[var(--bg-selected)] border-1 border-[var(--border-default)] hover:bg-[var(--bg-surface)] hover:text-[var(--primary)] hover:border-[var(--border-default)] ${focusOverride}`;
-
-		// tertiary: `--primary-mask` is exactly the 20%-alpha orange the raw
-		// `bg-orange-900/20` was approximating.
-		const tertiary = `h-fit group font-proto-mono bg-[var(--primary-mask)] text-[var(--primary)] duration-300 transition rounded-none border-none ${focusOverride}`;
-
 		const linkBase = `w-fit !leading-[.75rem] bg-transparent border-none px-0 py-0 ${focusOverride}`;
 		const link = `${linkBase} text-[var(--text-link)]`;
 		const linkSecondary = `${linkBase} text-[var(--text-default)]`;
 
 		return {
-			primary: {
-				dark: primary,
-				light: primary
-			},
-			secondary: {
-				dark: secondary,
-				light: secondary
-			},
-			tertiary: {
-				dark: tertiary,
-				light: tertiary
-			},
 			link: {
 				dark: link,
 				light: link
@@ -192,27 +217,9 @@
 	const themedIconClasses = computed(() => {
 		const baseClasses = '!text-[.75rem] duration-300 transition flex items-center mr-2';
 
-		// Icons ride along with the label colour of their variant, which also
-		// removes the old light-theme glitch where the `secondary` icon turned
-		// neutral-100 on a light hover background.
-		const primary = `h-fit ${baseClasses} text-[var(--text-default)] group-hover:text-[var(--primary-contrast)]`;
-		const secondary = `h-fit ${baseClasses} text-[var(--text-default)] group-hover:text-[var(--primary)]`;
-		const tertiary = `h-min ${baseClasses} text-[var(--text-default)] group-hover:text-[var(--text-default)]`;
 		const onLink = `${baseClasses} text-[var(--primary)] hover:text-[var(--primary)] leading-1`;
 
 		const classes = {
-			primary: {
-				dark: primary,
-				light: primary
-			},
-			secondary: {
-				dark: secondary,
-				light: secondary
-			},
-			tertiary: {
-				dark: tertiary,
-				light: tertiary
-			},
 			link: onLink,
 			linkSecondary: onLink,
 			linkExternal: onLink
@@ -227,9 +234,6 @@
 		const fontSize = props.size === 'small' ? 'text-xs' : '';
 
 		return {
-			primary: `font-proto-mono ${leading} whitespace-nowrap`,
-			secondary: `font-proto-mono ${leading} whitespace-nowrap`,
-			tertiary: `font-proto-mono ${leading} whitespace-nowrap`,
 			link: `font-proto-mono ${leading} ${fontSize} after:bg-[var(--text-link)] whitespace-nowrap`,
 			linkSecondary: `font-proto-mono ${leading} ${fontSize} after:bg-[var(--text-default)] whitespace-nowrap`,
 			linkExternal: `font-proto-mono ${leading} ${fontSize} after:bg-[var(--text-link)] whitespace-nowrap`
diff --git a/src/components/webkit/HeroHome.vue b/src/components/webkit/HeroHome.vue
index 6ea11ec1bd..bc7639664b 100644
--- a/src/components/webkit/HeroHome.vue
+++ b/src/components/webkit/HeroHome.vue
@@ -17,14 +17,24 @@
 		</template>
 		<template #actions>
 			<div class="flex gap-4 flex-col md:flex-row justify-center items-center">
+				<!--
+					The `buttons` array authored in src/content uses LinkButton's prop
+					shape (`outlined` / `severity`), not HeroButton's `type`, so both
+					entries used to fall through to HeroButton's default variant and
+					render identically -- the "create an account" CTA lost its
+					emphasis. `buttonType` translates between the two shapes so the
+					pair reads as a primary + secondary action, and an explicit
+					`button.type` still wins for any call site that speaks
+					HeroButton's own language.
+				-->
 				<HeroButton
 					v-for="button in buttons"
 					:key="button.label || button.link"
 					:label="button.label"
 					:href="button.link"
 					:icon="button.icon"
-					:size="button.size === 'medium' ? 'large' : 'small'"
-					:type="button.type"
+					:size="buttonSize(button)"
+					:type="buttonType(button)"
 					:theme="button.theme"
 				/>
 			</div>
@@ -47,6 +57,33 @@
 	import HeroButton from './HeroButton.vue';
 	import ContentLogo from './ContentLogo.vue';
 
+	/*
+		Maps a content-authored button object onto HeroButton's `type`. Same
+		precedence LinkButton uses for the equivalent props: an explicit variant
+		wins, then `severity`, then `outlined`.
+	*/
+	function buttonType(button) {
+		if (button.type) return button.type
+		if (button.severity === 'secondary') return 'secondary'
+		if (button.outlined) return 'outlined'
+
+		return 'primary'
+	}
+
+	/*
+		Hero actions are the page's largest call to action, so `large` is the
+		default and `small` has to be asked for. The previous ternary inverted
+		that -- it only produced `large` when a button declared
+		`size: 'medium'`, and nothing in src/content does, so every hero CTA
+		rendered at the smallest size. That went unnoticed while HeroButton drew
+		its own box from `customClass` ('px-3 py-3') regardless of `size`;
+		webkit's Button honours the size token, so the plumbing bug became
+		visible as a 28px-tall hero button.
+	*/
+	function buttonSize(button) {
+		return button.size === 'small' ? 'small' : 'large'
+	}
+
 	defineProps({
 		id: {
 			type: String,
diff --git a/src/components/webkit/KeyboardKey.vue b/src/components/webkit/KeyboardKey.vue
index 01d2bb40a4..24a293783e 100644
--- a/src/components/webkit/KeyboardKey.vue
+++ b/src/components/webkit/KeyboardKey.vue
@@ -1,18 +1,22 @@
 <template>
+	<!--
+		Still a <kbd> wrapping a real <button> -- only the button's paint moved
+		to webkit's Button (`small` + `outlined`, the closest kind to the
+		transparent bordered chip this drew by hand).
+	-->
 	<kbd>
-		<button
-			type='button'
-			class='cursor-pointer rounded border border-default bg-transparent px-2 py-1 text-default transition-colors hover:bg-hover'
-			@click='emitClicked'
-		>
-			<small>
-				{{ keyname }}
-			</small>
-		</button>
+		<Button
+			:label="keyname"
+			kind="outlined"
+			size="small"
+			@click="emitClicked"
+		/>
 	</kbd>
 </template>
 
 <script setup>
+	import Button from '@aziontech/webkit/button'
+
 	const props = defineProps({
 		keyname: String
 	})
diff --git a/src/components/webkit/LinkButton.vue b/src/components/webkit/LinkButton.vue
index 1586a9a156..3902a19664 100644
--- a/src/components/webkit/LinkButton.vue
+++ b/src/components/webkit/LinkButton.vue
@@ -1,36 +1,76 @@
 <template>
-	<a
+	<!--
+		Icon-only (iconPos="center") is IconButton's job -- webkit's Button
+		requires a visible `label` and documents IconButton as the icon-only
+		control.
+	-->
+	<!--
+		No `w-fit` on this branch, unlike the labelled one below. IconButton
+		sizes itself with `size-10` / `size-8` (a square: one utility setting
+		both width and height), and `w-fit` outranks its width half, collapsing
+		the button to the glyph's intrinsic ~18px while keeping the full height.
+		The labelled Button has no such square to protect -- its width is
+		content-driven with a `min-w-*` floor -- so `w-fit` stays there.
+	-->
+	<IconButton
+		v-if="isIconOnly"
+		:icon="icon"
+		:aria-label="String(label ?? '')"
+		:kind="iconButtonKind"
+		:size="webkitSize"
 		:href="link"
-		:title="label"
 		:target="target"
-		rel="noopener noreferrer"
-		class="wk-button not-prose w-fit no-underline justify-center gap-2 px-4"
-		:class="[
-			{ 'wk-button-outlined hover:bg-hover': outlined },
-			{ 'wk-button-text hover:bg-hover': text },
-			{ 'wk-button-secondary': severity === 'secondary' },
-			{ 'wk-button-info': severity === 'info' },
-			{ 'flex flex-row-reverse': iconPos === 'left' },
-			{ 'wk-button-icon-only': iconPos === 'center' },
-			{ 'md:justify-start': iconPos !== 'center' },
-			{ 'wk-button-link pl-0 pr-0 hover:underline': textLink }
-		]"
-	>
-		<template v-if="label">
-			{{ capitalizeLetter(String(label).trim()) }}
-		</template>
+		class="not-prose no-underline"
+	/>
 
-		<span
-			v-if="iconPos"
-			:style="customIconStyle"
-			:class="`pi wk-button-icon ${icon}`"
-			data-pc-section="icon"
-		/>
-	</a>
+	<Button
+		v-else
+		:label="displayLabel"
+		:kind="kind"
+		:size="webkitSize"
+		:icon="icon"
+		:href="link"
+		:target="target"
+		class="not-prose w-fit no-underline"
+	/>
 </template>
 
 <script setup>
-	defineProps({
+	import { computed } from 'vue'
+
+	import Button from '@aziontech/webkit/button'
+	import IconButton from '@aziontech/webkit/icon-button'
+
+	/*
+		Adapter over @aziontech/webkit's Button. The visuals (fill, radius,
+		hover/active layers, focus ring, sizing) now come from the design system
+		instead of the hand-written `.wk-button` CSS this file used to carry --
+		that block was a port of PrimeVue's `.p-button` box model repainted with
+		theme tokens, i.e. a second implementation of a component the webkit
+		already ships.
+
+		The prop surface is deliberately unchanged: LinkButton is instantiated
+		~1.5k times across src/content, plus Footer.vue and both
+		SectionBasicContent.vue copies, and none of those call sites need to
+		change.
+
+		Two things the old markup carried do NOT survive the move, because
+		webkit's Button declares `inheritAttrs: false` and forwards only `class`
+		and `data-testid`: the `title` tooltip that mirrored the label, and
+		`customIconStyle` (no icon-style hook on the design-system component).
+		`customIconStyle` is kept in the prop list only so Vue does not leak it
+		to the DOM as an attribute; no call site in this repo passes it.
+
+		`not-prose` on the root stays load-bearing. Every LinkButton inside
+		article content sits under ReadableContent's `.prose` wrapper, whose
+		`prose-a:*` utilities target every link in the content; `not-prose` is
+		the typography plugin's own opt-out and keeps those rules from
+		repainting the button's label. It matters more now, not less: webkit
+		paints the label with a Tailwind utility, so both sides would otherwise
+		be `!important` utilities competing on specificity (this repo imports
+		Tailwind in important mode).
+	*/
+	const props = defineProps({
 		icon: {
 			type: String,
 			required: false
@@ -83,217 +123,52 @@
 			type: Boolean,
 			required: false
 		}
-	});
+	})
+
+	const isIconOnly = computed(() => props.iconPos === 'center' && Boolean(props.icon))
 
 	function capitalizeLetter(word) {
-		return word.replace(word[0], word.charAt(0).toUpperCase());
+		return word.replace(word[0], word.charAt(0).toUpperCase())
 	}
-</script>
 
-<style scoped>
-	/*
-		Self-contained button visuals for this <a>-based component (it no longer
-		depends on PrimeVue's `.p-button`). The box model is still the old
-		`.p-button` small-size port, but every color, radius and spacing value
-		now comes from @aziontech/theme@4 semantic tokens -- and those tokens
-		already resolve per theme, so nothing below is light/dark specific.
+	const displayLabel = computed(() =>
+		props.label ? capitalizeLetter(String(props.label).trim()) : ''
+	)
 
-		The `not-prose` class on the root element is load-bearing. Every
-		LinkButton used inside article content sits under ReadableContent's
-		`.prose` wrapper, whose `prose-a:*` utilities compile to
-		`.prose :where(a):not(:where([class~="not-prose"], ...)) { color: ... }`
-		aimed at *every* link in the content. `not-prose` is the typography
-		plugin's own opt-out and the only reliable way out: this repo imports
-		Tailwind in important mode (`@import 'tailwindcss' important;` in
-		src/styles/main.css), so those utilities carry `!important` *inside
-		`@layer utilities`* -- and for `!important` declarations the cascade
-		inverts layer order, which means a layered `!important` beats an
-		unlayered one (this scoped block) no matter how specific the selector
-		is. The `a[href]` selector and the `!important` colors below are kept as
-		belt-and-braces for any non-prose context, but they are NOT what wins
-		inside `.prose`.
-		(@aziontech/theme@4 itself ships no `.prose` rule -- the old azion-theme
-		markdown stylesheet that forced `.prose a:not(.p-button)` is gone; the
-		pressure now comes purely from the typography-plugin utilities.)
+	/*
+		Variant mapping. webkit's kinds are primary | secondary | outlined |
+		text | danger, so the old two-axis API (severity x outlined/text)
+		collapses onto one axis:
 
-		Interactive states: the theme has no *opaque* "primary hover" token
-		(`--primary-mask` / `--primary-selected` are 20%-alpha orange tints made
-		for selection backgrounds -- using them as a fill would make the button
-		translucent). Solid variants therefore derive hover/active from their
-		base token with color-mix(): hover lightens the fill by 12%
-		(`--primary` -> ~#F47844, a near-exact match for the old hardcoded
-		#f5793f) and active steps back to 8% for a subtler press. Neutral
-		variants (outlined / text) use the theme's own overlay tokens
-		`--bg-hover` and `--bg-selected` instead.
+		- `outlined` / `text` win over `severity`, because webkit's outlined and
+		  text kinds are already the neutral, low-emphasis variants the old
+		  `.wk-button-secondary.wk-button-outlined` pair produced.
+		- `severity="info"` has no counterpart in the design system (theme@4's
+		  `--info` is a tinted *surface*, not a button kind). It falls back to
+		  `outlined` so it still reads as low-emphasis. No call site in this
+		  repo uses it.
+		- `textLink` also has no counterpart and maps to `text`; likewise unused
+		  in the repo today.
 	*/
-	a[href].wk-button {
-		display: inline-flex;
-		cursor: pointer;
-		user-select: none;
-		align-items: center;
-		vertical-align: bottom;
-		text-align: center;
-		overflow: hidden;
-		position: relative;
-		color: var(--primary-contrast) !important;
-		background: var(--primary);
-		border: 1px solid var(--primary);
-		padding: var(--spacing-xxs) var(--spacing-xs);
-		font-size: var(--text-button-lg-font-size);
-		font-weight: 500;
-		border-radius: var(--shape-button);
-		transition:
-			background-color 0.2s,
-			color 0.2s,
-			border-color 0.2s,
-			box-shadow 0.2s;
-	}
-	a[href].wk-button:hover {
-		background: color-mix(in srgb, var(--primary) 88%, white);
-		color: var(--primary-contrast) !important;
-		border-color: color-mix(in srgb, var(--primary) 88%, white);
-	}
-	a[href].wk-button:active {
-		background: color-mix(in srgb, var(--primary) 92%, white);
-		color: var(--primary-contrast) !important;
-		border-color: color-mix(in srgb, var(--primary) 92%, white);
-	}
-	/* Focus ring follows the theme convention (see its own `text-link`
-	   utility): a `--ring-color` outline on :focus-visible only, instead of the
-	   old always-on orange box-shadow. */
-	a[href].wk-button:focus {
-		outline: 0 none;
-		outline-offset: 0;
-	}
-	a[href].wk-button:focus-visible {
-		outline: 2px solid var(--ring-color);
-		outline-offset: 2px;
-	}
-
-	a[href].wk-button .wk-button-icon {
-		font-size: var(--text-button-lg-font-size);
-	}
-
-	/* outlined */
-	a[href].wk-button.wk-button-outlined {
-		background: transparent;
-		color: var(--text-default) !important;
-		border: 1px solid var(--border-default);
-	}
-	a[href].wk-button.wk-button-outlined:hover,
-	a[href].wk-button.wk-button-outlined:active {
-		background: var(--bg-hover);
-		color: var(--text-default) !important;
-		border: 1px solid var(--border-default);
-	}
-
-	/* text */
-	a[href].wk-button.wk-button-text {
-		background: transparent;
-		color: var(--text-default) !important;
-		border-color: transparent;
-	}
-	a[href].wk-button.wk-button-text:hover,
-	a[href].wk-button.wk-button-text:active {
-		background: var(--bg-hover);
-		color: var(--text-default) !important;
-		border-color: transparent;
-	}
-
-	/* secondary severity -- `--secondary` is the inverted surface (near-black
-	   on light, white on dark), so its hover/active shift *towards*
-	   `--secondary-contrast`: lighter on light theme, darker on dark theme. */
-	a[href].wk-button.wk-button-secondary {
-		color: var(--secondary-contrast) !important;
-		background: var(--secondary);
-		border: 1px solid var(--secondary);
-	}
-	a[href].wk-button.wk-button-secondary:hover {
-		background: color-mix(in srgb, var(--secondary) 88%, var(--secondary-contrast));
-		color: var(--secondary-contrast) !important;
-		border-color: color-mix(in srgb, var(--secondary) 88%, var(--secondary-contrast));
-	}
-	a[href].wk-button.wk-button-secondary:active {
-		background: color-mix(in srgb, var(--secondary) 78%, var(--secondary-contrast));
-		color: var(--secondary-contrast) !important;
-		border-color: color-mix(in srgb, var(--secondary) 78%, var(--secondary-contrast));
-	}
-	a[href].wk-button.wk-button-secondary.wk-button-outlined,
-	a[href].wk-button.wk-button-secondary.wk-button-text {
-		background: transparent;
-		color: var(--secondary) !important;
-	}
-	a[href].wk-button.wk-button-secondary.wk-button-outlined:hover,
-	a[href].wk-button.wk-button-secondary.wk-button-text:hover {
-		background: var(--bg-hover);
-		color: var(--secondary) !important;
-	}
-	a[href].wk-button.wk-button-secondary.wk-button-outlined:active,
-	a[href].wk-button.wk-button-secondary.wk-button-text:active {
-		background: var(--bg-selected);
-		color: var(--secondary) !important;
-	}
-
-	/* info severity -- in @aziontech/theme@4 `--info` is a *soft tinted
-	   surface* (pale blue on light, deep navy on dark) paired with
-	   `--info-contrast` for the label and `--info-border` for the edge, so this
-	   variant now reads as a tinted informational button rather than the old
-	   solid #0b61c4 blue. */
-	a[href].wk-button.wk-button-info {
-		color: var(--info-contrast) !important;
-		background: var(--info);
-		border: 1px solid var(--info-border);
-	}
-	a[href].wk-button.wk-button-info:hover {
-		background: color-mix(in srgb, var(--info) 92%, var(--info-contrast));
-		color: var(--info-contrast) !important;
-		border-color: var(--info-border);
-	}
-	a[href].wk-button.wk-button-info:active {
-		background: color-mix(in srgb, var(--info) 85%, var(--info-contrast));
-		color: var(--info-contrast) !important;
-		border-color: var(--info-border);
-	}
-	a[href].wk-button.wk-button-info.wk-button-outlined,
-	a[href].wk-button.wk-button-info.wk-button-text {
-		background: transparent;
-		color: var(--info-contrast) !important;
-	}
-	a[href].wk-button.wk-button-info.wk-button-outlined:hover,
-	a[href].wk-button.wk-button-info.wk-button-text:hover {
-		background: color-mix(in srgb, var(--info) 40%, transparent);
-		color: var(--info-contrast) !important;
-	}
-	a[href].wk-button.wk-button-info.wk-button-outlined:active,
-	a[href].wk-button.wk-button-info.wk-button-text:active {
-		background: var(--info);
-		color: var(--info-contrast) !important;
-	}
+	const kind = computed(() => {
+		if (props.textLink || props.text) return 'text'
+		if (props.outlined) return 'outlined'
+		if (props.severity === 'secondary') return 'secondary'
+		if (props.severity === 'info') return 'outlined'
+		return 'primary'
+	})
 
-	/* icon only (iconPos="center") */
-	a[href].wk-button.wk-button-icon-only {
-		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-	}
-	a[href].wk-button.wk-button-icon-only .wk-button-icon {
-		margin: 0;
-	}
+	// IconButton's kinds differ from Button's: no `text`, but a `transparent`
+	// that fills the same low-emphasis role.
+	const iconButtonKind = computed(() => (kind.value === 'text' ? 'transparent' : kind.value))
 
-	/* text link (textLink) */
-	a[href].wk-button.wk-button-link {
-		color: var(--text-link) !important;
-		background: transparent;
-		border-color: transparent;
-	}
-	a[href].wk-button.wk-button-link:hover {
-		background: transparent;
-		color: var(--text-link-hover) !important;
-		border-color: transparent;
-	}
-	a[href].wk-button.wk-button-link:active {
-		background: transparent;
-		color: var(--text-link) !important;
-		border-color: transparent;
-	}
-</style>
+	/*
+		The old CSS drew a compact box (spacing-xxs/xs padding) with the *large*
+		type token (--text-button-lg-font-size). webkit ties the two together:
+		`large` keeps that typography (h-10), `medium` would shrink the label to
+		text-button-md. Preserving the type scale is what keeps these buttons
+		legible in body copy, so legacy `medium` maps to webkit `large` and only
+		`small` stays small.
+	*/
+	const webkitSize = computed(() => (props.size === 'small' ? 'small' : 'large'))
+</script>
diff --git a/src/components/webkit/Tag.vue b/src/components/webkit/Tag.vue
index b2db3bbab4..bc92f9efa8 100644
--- a/src/components/webkit/Tag.vue
+++ b/src/components/webkit/Tag.vue
@@ -1,15 +1,80 @@
 <template>
-	<span
-		class="inline-block whitespace-nowrap px-[var(--spacing-xs)] py-[var(--spacing-xxs)] rounded-[var(--shape-elements)] text-tag-sm tracking-[0.01rem]"
-		:class="severityClasses"
+	<!--
+		`whitespace-nowrap` is the one local utility that has to survive the
+		move. The old markup was `inline-block whitespace-nowrap`; webkit's tag
+		is `inline-flex` with a fixed height and `overflow-hidden`, so a label
+		that wraps gets *clipped* rather than merely overflowing its line box.
+		Plenty of content tags carry a whole product name ("Web Application
+		Firewall", "Standard HTTP/HTTPS POST endpoint"), which is exactly what
+		wraps first on a narrow viewport.
+
+		Putting it on the webkit component instead of on a wrapper is safe here:
+		webkit's tag emits no `whitespace-*` / `text-*wrap` utility, so there is
+		no same-group collision for Tailwind's important mode to resolve. (The
+		wrapper dance is only needed when both sides fight over one property.)
+
+		`size="medium"` is the closest box to the old chip. The old markup asked
+		for `text-tag-sm`, which would suggest webkit's `small`, but in
+		@aziontech/theme 4.x `--text-tag-sm-*` and `--text-tag-md-*` are
+		byte-identical (0.75rem / 600 / 1.25) -- the tag scale simply does not
+		branch by size today -- so `medium` costs nothing typographically while
+		matching the geometry that `small` would lose: `px-[var(--spacing-xs)]`
+		is exactly the old 8px horizontal padding, and `h-6` (24px) is 1px off
+		the old 23px box. `small` would have been `px-xxs` (4px) at 20px tall,
+		i.e. every one of the ~391 tags 8px narrower and 3px shorter than today.
+
+		If a future theme release does split the two tag tokens, revisit this:
+		the intent was `text-tag-sm`, and at that point `small` becomes the
+		faithful choice again (at the cost of the padding).
+	-->
+	<WebkitTag
+		:label="label"
+		:severity="webkitSeverity"
+		size="medium"
+		class="whitespace-nowrap"
 	>
-		<slot>{{ value }}</slot>
-	</span>
+		<!--
+			When the call site passed `value` instead of children, the slot must
+			be *absent*, not empty: webkit's tag branches on
+			`$slots['default']` and renders `label` only in the `v-else-if`. A
+			bare `<slot />` here would always create that slot function and
+			blank out the 7 `value="..."` call sites, so the slot is omitted via
+			`v-if` on the `<template #default>`.
+		-->
+		<template
+			v-if="$slots['default']"
+			#default
+		>
+			<slot />
+		</template>
+	</WebkitTag>
 </template>
 
 <script setup>
 	import { computed } from 'vue';
 
+	// Aliased on import: webkit's component declares `name: 'Tag'`, which is
+	// also this file's own filename-derived name. The import wins in
+	// `<script setup>`, but there is no reason to leave a reader (or a future
+	// refactor) resolving that ambiguity.
+	import WebkitTag from '@aziontech/webkit/tag';
+
+	/*
+		Adapter over @aziontech/webkit's Tag. The visuals (box model, radius,
+		severity surfaces, focus ring, tag typography) now come from the design
+		system instead of the hand-written utility soup this file used to carry,
+		which was a re-implementation of a component the webkit already ships.
+
+		The prop surface is deliberately unchanged: `<Tag>` is instantiated 391
+		times across 239 files in src/content plus 19 .vue/.astro files, each
+		importing this path directly (there is no auto-import indirection to
+		hide behind), and none of those call sites change.
+
+		Attribute pass-through survives too: webkit's tag sets
+		`inheritAttrs: false` but re-applies `v-bind="$attrs"` on its root span,
+		so extra attributes still reach the DOM exactly as they did when this
+		component *was* the span.
+	*/
 	const props = defineProps({
 		value: {
 			type: [String, Number],
@@ -22,17 +87,41 @@
 		}
 	});
 
-	// `info` keeps the neutral surface look the old PrimeVue theme gave it
-	// rather than @aziontech/theme's blue `info` status color: it is the
-	// severity used by the ~390 content badges ("Preview", "Compute",
-	// "Static"), which read as labels, not as informational alerts.
-	const severityClasses = computed(
+	// webkit's `label` is typed as a plain string, so a numeric `value` would
+	// trip its runtime prop check. Normalize instead of widening the contract;
+	// `undefined`/`null` collapse to '' so webkit falls through to its own
+	// empty-label default rather than rendering the string "undefined".
+	const label = computed(() =>
+		props.value === undefined || props.value === null ? '' : String(props.value)
+	);
+
+	/*
+		Severity mapping. The axis names look identical on both sides but `info`
+		does NOT mean the same thing, and that is the whole point of this map:
+
+		- `info` -> `secondary`. This component's `info` was never the
+		  informational-alert blue; it rendered a NEUTRAL chip (surface fill +
+		  a 1px default border) because it is the severity used by the ~389
+		  content badges ("Preview", "Compute", "Static"), which read as
+		  labels. webkit's `info` is the tinted status blue
+		  (`--info` #CCE4FF / #001833), so mapping it straight through would
+		  repaint nearly every tag in the documentation as an alert.
+		  `secondary` (`--border-default` + `--bg-canvas` + `--text-default`)
+		  is the design system's neutral chip and the honest equivalent.
+		- `success` / `warning` / `danger` map through unchanged: those three
+		  were already the theme's status pairs, e.g. `bg-warning
+		  text-warning-contrast`, which is verbatim what webkit paints.
+		- no severity -> `primary`. The old default was
+		  `bg-primary-mask text-primary`, and webkit's `primary` is exactly
+		  `bg-[var(--primary-mask)] text-[var(--primary)]`. Identical output.
+	*/
+	const webkitSeverity = computed(
 		() =>
 			({
-				info: 'bg-surface text-default shadow-[0_0_0_1px_var(--border-default)]',
-				success: 'bg-success text-success-contrast',
-				warning: 'bg-warning text-warning-contrast',
-				danger: 'bg-danger text-danger-contrast'
-			})[props.severity] ?? 'bg-primary-mask text-primary'
+				info: 'secondary',
+				success: 'success',
+				warning: 'warning',
+				danger: 'danger'
+			})[props.severity] ?? 'primary'
 	);
 </script>
diff --git a/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/browserless-edge-functions.mdx b/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/browserless-edge-functions.mdx
index 7cb9eb9808..11fc75f1bd 100644
--- a/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/browserless-edge-functions.mdx
+++ b/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/browserless-edge-functions.mdx
@@ -169,5 +169,5 @@ The browserless Function typically includes:
 
 ---
 
-<LinkButton link="/en/documentation/products/build/applications/functions/" text="Learn more about Functions" />
-<LinkButton link="/en/documentation/products/guides/build/build-an-application/" text="Build an application" />
+<LinkButton link="/en/documentation/products/build/applications/functions/" label="Learn more about Functions" />
+<LinkButton link="/en/documentation/products/guides/build/build-an-application/" label="Build an application" />
diff --git a/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/file-upload-edge-functions.mdx b/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/file-upload-edge-functions.mdx
index d2255e590a..8178d54fcf 100644
--- a/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/file-upload-edge-functions.mdx
+++ b/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/file-upload-edge-functions.mdx
@@ -239,5 +239,5 @@ function authenticateUser(request) {
 
 ---
 
-<LinkButton link="/en/documentation/products/store/object-storage/" text="Learn more about Object Storage" />
-<LinkButton link="/en/documentation/products/build/applications/functions/" text="Learn more about Functions" />
+<LinkButton link="/en/documentation/products/store/object-storage/" label="Learn more about Object Storage" />
+<LinkButton link="/en/documentation/products/build/applications/functions/" label="Learn more about Functions" />
diff --git a/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/resend-email-edge-functions.mdx b/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/resend-email-edge-functions.mdx
index 2182e474b1..edbef02b4c 100644
--- a/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/resend-email-edge-functions.mdx
+++ b/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/resend-email-edge-functions.mdx
@@ -261,5 +261,5 @@ Add tracking capabilities to monitor email engagement:
 
 ---
 
-<LinkButton link="https://resend.com/docs" text="Resend API Documentation" />
-<LinkButton link="/en/documentation/products/build/applications/functions/" text="Learn more about Functions" />
+<LinkButton link="https://resend.com/docs" label="Resend API Documentation" />
+<LinkButton link="/en/documentation/products/build/applications/functions/" label="Learn more about Functions" />
diff --git a/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/restful-tasks-api-edge-functions.mdx b/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/restful-tasks-api-edge-functions.mdx
index 5dfa350aa0..8888a9ac4d 100644
--- a/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/restful-tasks-api-edge-functions.mdx
+++ b/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/restful-tasks-api-edge-functions.mdx
@@ -351,5 +351,5 @@ The RESTful API Function includes:
 
 ---
 
-<LinkButton link="/en/documentation/products/store/sql-database/" text="Learn more about SQL Database" />
-<LinkButton link="/en/documentation/products/build/applications/functions/" text="Learn more about Functions" />
+<LinkButton link="/en/documentation/products/store/sql-database/" label="Learn more about SQL Database" />
+<LinkButton link="/en/documentation/products/build/applications/functions/" label="Learn more about Functions" />
diff --git a/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/stripe-webhooks-edge-functions.mdx b/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/stripe-webhooks-edge-functions.mdx
index ecb879ec62..8c2969bed3 100644
--- a/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/stripe-webhooks-edge-functions.mdx
+++ b/src/content/docs/en/pages/guides/edge-functions/edge-functions-examples/stripe-webhooks-edge-functions.mdx
@@ -302,5 +302,5 @@ function logWebhookEvent(event, status, processingTime) {
 
 ---
 
-<LinkButton link="https://stripe.com/docs/webhooks" text="Stripe Webhooks Documentation" />
-<LinkButton link="/en/documentation/products/build/applications/functions/" text="Learn more about Functions" />
+<LinkButton link="https://stripe.com/docs/webhooks" label="Stripe Webhooks Documentation" />
+<LinkButton link="/en/documentation/products/build/applications/functions/" label="Learn more about Functions" />
diff --git a/src/content/docs/en/pages/guides/waf/configure-allowed-rules.mdx b/src/content/docs/en/pages/guides/waf/configure-allowed-rules.mdx
index a13ca673a4..1049f95303 100644
--- a/src/content/docs/en/pages/guides/waf/configure-allowed-rules.mdx
+++ b/src/content/docs/en/pages/guides/waf/configure-allowed-rules.mdx
@@ -16,7 +16,7 @@ Configuring a **WAF Custom Allowed Rule** allows you to instantiate specific rul
 
 This guide explains how to configure a WAF Custom Allowed Rule via Azion Web Platform.
 
-<LinkButton link="/en/documentation/products/secure/firewall/web-application-firewall/custom-allowed-rules/" text="go to Custom Allowed Rules reference" severity="secondary" />
+<LinkButton link="/en/documentation/products/secure/firewall/web-application-firewall/custom-allowed-rules/" label="go to Custom Allowed Rules reference" severity="secondary" />
 
 ---
 
diff --git a/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/browserless-edge-functions.mdx b/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/browserless-edge-functions.mdx
index 0ea618e9ed..5b48664bc8 100644
--- a/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/browserless-edge-functions.mdx
+++ b/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/browserless-edge-functions.mdx
@@ -169,5 +169,5 @@ A Function browserless tipicamente inclui:
 
 ---
 
-<LinkButton link="/pt-br/documentacao/produtos/build/applications/functions/" text="Saiba mais sobre Functions" />
-<LinkButton link="/pt-br/documentacao/produtos/guias/build/criar-uma-aplicacao/" text="Construa uma aplicação" />
+<LinkButton link="/pt-br/documentacao/produtos/build/applications/functions/" label="Saiba mais sobre Functions" />
+<LinkButton link="/pt-br/documentacao/produtos/guias/build/criar-uma-aplicacao/" label="Construa uma aplicação" />
diff --git a/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/file-upload-edge-functions.mdx b/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/file-upload-edge-functions.mdx
index d76a42a574..b335eac7c8 100644
--- a/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/file-upload-edge-functions.mdx
+++ b/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/file-upload-edge-functions.mdx
@@ -239,5 +239,5 @@ function authenticateUser(request) {
 
 ---
 
-<LinkButton link="/pt-br/documentacao/produtos/store/object-storage/" text="Saiba mais sobre Object Storage" />
-<LinkButton link="/pt-br/documentacao/produtos/build/applications/functions/" text="Saiba mais sobre Functions" />
+<LinkButton link="/pt-br/documentacao/produtos/store/object-storage/" label="Saiba mais sobre Object Storage" />
+<LinkButton link="/pt-br/documentacao/produtos/build/applications/functions/" label="Saiba mais sobre Functions" />
diff --git a/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/resend-email-edge-functions.mdx b/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/resend-email-edge-functions.mdx
index 699c946c4b..f1effd34e5 100644
--- a/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/resend-email-edge-functions.mdx
+++ b/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/resend-email-edge-functions.mdx
@@ -249,5 +249,5 @@ Adicione capacidades de rastreamento para monitorar engajamento de email:
 
 ---
 
-<LinkButton link="https://resend.com/docs" text="Documentação da API Resend" />
-<LinkButton link="/pt-br/documentacao/produtos/build/applications/functions/" text="Saiba mais sobre Functions" />
+<LinkButton link="https://resend.com/docs" label="Documentação da API Resend" />
+<LinkButton link="/pt-br/documentacao/produtos/build/applications/functions/" label="Saiba mais sobre Functions" />
diff --git a/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/restful-tasks-api-edge-functions.mdx b/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/restful-tasks-api-edge-functions.mdx
index 5cb3dfbda1..edd2a0de35 100644
--- a/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/restful-tasks-api-edge-functions.mdx
+++ b/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/restful-tasks-api-edge-functions.mdx
@@ -532,5 +532,5 @@ async function getTasksPaginated(page = 1, limit = 10) {
 
 ---
 
-<LinkButton link="/pt-br/documentacao/produtos/store/sql-database/" text="Saiba mais sobre SQL Database" />
-<LinkButton link="/pt-br/documentacao/produtos/build/applications/functions/" text="Saiba mais sobre Functions" />
+<LinkButton link="/pt-br/documentacao/produtos/store/sql-database/" label="Saiba mais sobre SQL Database" />
+<LinkButton link="/pt-br/documentacao/produtos/build/applications/functions/" label="Saiba mais sobre Functions" />
diff --git a/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/stripe-webhooks-edge-functions.mdx b/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/stripe-webhooks-edge-functions.mdx
index e10c3f9e04..e59b751534 100644
--- a/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/stripe-webhooks-edge-functions.mdx
+++ b/src/content/docs/pt-br/pages/guias/edge-functions/edge-functions-examples/stripe-webhooks-edge-functions.mdx
@@ -302,5 +302,5 @@ function logWebhookEvent(event, status, processingTime) {
 
 ---
 
-<LinkButton link="https://stripe.com/docs/webhooks" text="Documentação de Webhooks do Stripe" />
-<LinkButton link="/pt-br/documentacao/produtos/build/applications/functions/" text="Saiba mais sobre Functions" />
+<LinkButton link="https://stripe.com/docs/webhooks" label="Documentação de Webhooks do Stripe" />
+<LinkButton link="/pt-br/documentacao/produtos/build/applications/functions/" label="Saiba mais sobre Functions" />
diff --git a/src/content/docs/pt-br/pages/guias/waf/configurar-allowed-rules.mdx b/src/content/docs/pt-br/pages/guias/waf/configurar-allowed-rules.mdx
index 139182b935..29f111077f 100644
--- a/src/content/docs/pt-br/pages/guias/waf/configurar-allowed-rules.mdx
+++ b/src/content/docs/pt-br/pages/guias/waf/configurar-allowed-rules.mdx
@@ -16,7 +16,7 @@ Configurar uma **WAF Custom Allowed Rule** permite criar regras específicas par
 
 Este guia explica como configurar uma WAF Custom Allowed Rule através da Azion Web Platform.
 
-<LinkButton link="/pt-br/documentacao/produtos/secure/firewall/web-application-firewall/custom-allowed-rules/" text="saiba mais sobre as WAF Custom Allowed Rules" severity="secondary" />
+<LinkButton link="/pt-br/documentacao/produtos/secure/firewall/web-application-firewall/custom-allowed-rules/" label="saiba mais sobre as WAF Custom Allowed Rules" severity="secondary" />
 
 ---
 
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 715c241de4..ed73124bc5 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -273,40 +273,6 @@ const translatedPages = await (async (c) => {
 					</HeaderRightSidebar>
 			</Fragment>
 		</Header>
-
-		<script is:inline>
-      (function() {
-        window.addEventListener("scroll", (event) => {
-          const scrollY = window.scrollY;
-          const headerButtonDestak = document.querySelectorAll('header .header-button-destak')[0];
-          const spanText = headerButtonDestak.querySelectorAll('span')[0];
-
-          if(scrollY <= 500) {
-            if (headerButtonDestak.classList.contains('wk-header-button-secondary')) {
-              return;
-            }
-
-            headerButtonDestak.classList.remove('wk-header-button-primary');
-            headerButtonDestak.classList.add('wk-header-button-secondary');
-
-            spanText.classList.add('text-black');
-            spanText.classList.remove('text-white');
-          } else {
-            if (headerButtonDestak.classList.contains('wk-header-button-primary')) {
-              return;
-            }
-
-            headerButtonDestak.classList.remove('wk-header-button-secondary');
-
-            headerButtonDestak.classList.add('wk-header-button-primary');
-
-            spanText.classList.remove('text-black');
-            spanText.classList.add('text-white');
-          }
-        });
-      })();
-    </script>
-
 		<main class="layout">
 			<aside id="left-sidebar" class="border-r border-default pt-8 pb-1">
 				<div class="sidebar">
diff --git a/src/styles/main.css b/src/styles/main.css
index 9dabf1ad78..a13c61d46a 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -5,6 +5,15 @@
   is no tailwind.config.js / preset step.
 */
 @import 'tailwindcss' important;
+/*
+  Registers @aziontech/webkit's own sources with Tailwind so the utility
+  classes its components emit are compiled here. node_modules is outside
+  Tailwind's automatic content detection, so without this every webkit
+  component (Button, IconButton, ...) renders unstyled. The package ships
+  the `@source` for us, hence the import by name instead of a hardcoded
+  ../node_modules path (immune to pnpm's symlink layout).
+*/
+@import '@aziontech/webkit/styles';
 @import './base.css';
 
 @plugin '@tailwindcss/typography';