diff --git a/.specs/footer.md b/.specs/footer.md
new file mode 100644
index 000000000..57db66c1d
--- /dev/null
+++ b/.specs/footer.md
@@ -0,0 +1,180 @@
+---
+name: footer
+category: layout
+structure: composition
+status: approved
+spec_version: 1
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=5467-1638
+  node_id: 5467:1638
+checksum: 7cc4efef4305e63c50c44c3a007001c28265e937d6dfaa153a588893ace37118
+created: 2026-08-10
+last_updated: 2026-08-11
+---
+# Footer — Component Spec
+
+## Purpose
+
+Page footer for marketing and product surfaces: the bottom-of-page counterpart to `GlobalHeader`. A canvas-colored shell with a centered content measure holding link columns and a social bar separated by a hairline top border. Matches the Webkit Footer component set (Figma node 5467:1638, `Type=Default` / `Type=Mobile`): the two presentations are one component switching by CSS at the `md` (768px) breakpoint. Content (links, labels, languages, status) always comes from the consumer; the component owns anatomy, tokens, and responsiveness.
+
+## When to use
+
+- The page-level footer of a site or application, paired with `GlobalHeader`.
+- Grouped navigation links at the bottom of the page plus a brand/social/status bar.
+
+## When NOT to use
+
+- The bottom area of a panel, table, sidebar, or overlay → use that component's own footer part (`panel-footer`, `table-footer`, `sidebar-footer`, `popover-footer`).
+- A single standalone link inside body content → use `link` instead of `Footer.Link`.
+
+## Related
+
+- `global-header` — the top-of-page chrome counterpart; same shell philosophy (regions composed by the consumer).
+- `brand`, `icon-button`, `status-indicator`, `select` — the components consumers compose inside the social bar; the footer reimplements none of them.
+
+## Best practices
+
+- Compose the social bar from existing DS components (`Brand`, `IconButton kind="transparent"`, `StatusIndicator`, `Select`); never rebuild them inside the slots.
+- Keep column titles short (one or two words) — they are group labels, not headings for prose.
+- Give every social `IconButton` an `ariaLabel`; the footer cannot name them for you.
+- Provide four columns for the canonical desktop presentation; the grid folds to two columns below `md` on its own.
+
+## Usage
+
+```vue
+<script setup>
+import Footer from '@aziontech/webkit/footer'
+</script>
+
+<template>
+  <Footer aria-label="Footer">
+    <Footer.Column title="Products">
+      <Footer.Link href="/products/edge-application">Edge Application</Footer.Link>
+      <Footer.Link href="/products/edge-firewall">Edge Firewall</Footer.Link>
+    </Footer.Column>
+    <Footer.Column title="Company">
+      <Footer.Link href="/about">About us</Footer.Link>
+      <Footer.Link href="/careers">Careers</Footer.Link>
+    </Footer.Column>
+    <template #social-start>
+      <a href="/" aria-label="Azion home">Azion</a>
+    </template>
+    <template #social-end>
+      <a href="https://status.azion.com/">All Systems Operational</a>
+    </template>
+  </Footer>
+</template>
+```
+
+Tree-shaking alternative — the standalone root and each sub-component from its own entry (no `Object.assign` compound pulled in):
+
+```vue
+<script setup>
+import Footer from '@aziontech/webkit/footer-root'
+import FooterColumn from '@aziontech/webkit/footer-column'
+import FooterLink from '@aziontech/webkit/footer-link'
+</script>
+```
+
+## Sub-components
+
+- `footer-column/footer-column.vue` — one navigation column: a muted title labelling a stacked group of `Footer.Link` items. Renders a `nav` labelled by its title so each group is a navigable landmark. Props: `title: string` (required) — column group label, rendered above the links and used as the accessible name of the column landmark. Slot: `default` — its `Footer.Link` items.
+- `footer-link/footer-link.vue` — one text link inside a column; the root is the anchor itself, so consumer attributes (`target`, `rel`) land on the `a`. Props: `href: string` (required) — destination URL of the link. Slot: `default` — the link label.
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `ariaLabel` | `string` | `'Footer'` | false | Accessible name for the contentinfo landmark. |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `default` | — | Root: the `Footer.Column` items; laid out as a 2-column grid that becomes 4 columns at `md`. |
+| `default` | — | `footer-column`: its `Footer.Link` items. |
+| `default` | — | `footer-link`: the link label. |
+
+> The root also exposes the `social-start` named slot (leading cluster of the social bar: brand + social icon buttons) and the `social-end` named slot (trailing cluster: status indicator + language select; rendered above `social-start` below `md`, per the Mobile variant). They are kept out of the table above because the compliance parser cannot read hyphenated (quoted) slot keys from `defineSlots`. The social bar renders only when `social-start` or `social-end` is provided.
+
+## States
+
+- Visual states: `default` on the shell and columns; `default`, `hover`, `focus-visible`, `active`, `visited` on `footer-link`.
+- No `data-state`; the shell has no interactive states — slotted children own their own.
+
+## Motion & Animations
+
+| Trigger | Animation / Transition | Token (see `.claude/docs/DESIGN.md` § Animations) | Reduced-motion fallback |
+|---|---|---|---|
+| link hover/focus color change | `transition-colors duration-150 ease-out` | inline (matches catalog) | `motion-reduce:transition-none` |
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| shell surface | `var(--bg-canvas)` |
+| content max-width | `max-w-(--container-5xl)` |
+| columns row gap (mobile 2-row wrap) | `var(--spacing-lg)` |
+| column padding | `var(--spacing-lg)` |
+| column divider (border-right, `md`+) | `var(--border-width-default)` / `var(--border-default)` |
+| column internal gap (title → links) | `var(--spacing-md)` |
+| link stack gap | `var(--spacing-xs)` |
+| social bar border (top) | `var(--border-width-default)` / `var(--border-default)` |
+| social bar height (`md`+) | `h-14` (56px) |
+| social bar padding-y (below `md`) | `var(--spacing-md)` |
+| social bar padding-x | `var(--spacing-lg)` |
+| social bar left-cluster gap (brand ↔ social icons) | `var(--spacing-md)` |
+| social bar right-cluster gap (status ↔ language) | `var(--spacing-lg)` |
+| column title typography / color | `.text-label-sm` / `var(--text-muted)` |
+| link typography / color | `.text-label-sm` / `var(--text-default)` |
+| link hover color | `var(--text-muted)` |
+| ring (link focus) | `var(--ring-color)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| `--container-max-width` (1280px content measure) | `max-w-(--container-5xl)` (1192px, nearest container primitive) | `TODO: tokenizar` |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Root renders as `<footer>` — the implicit `contentinfo` landmark — with `aria-label` from `ariaLabel`.
+- Each `footer-column` renders a `<nav>` labelled via `aria-labelledby` pointing at its title (`useId`), so link groups are unique, navigable landmarks.
+- Keyboard map: none on the shell; `Tab` moves through links in DOM order; `Enter` activates.
+- Visible focus on links: `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`.
+- Contrast ≥4.5:1 for column titles and links on `--bg-canvas`.
+- `motion-reduce:transition-none` on the link color transition.
+- Touch target: text links follow the platform convention for footer link lists (<40px height); justified deviation — targets are full-width-of-text with `--spacing-xs` separation.
+
+## Stories (Storybook)
+
+- Default
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export points at `index.ts`, and a standalone `./<name>-root` export points at the root `.vue` (tree-shaking). Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--dark-mobile.png
new file mode 100644
index 000000000..323a5f82d
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--dark-tablet.png
new file mode 100644
index 000000000..74d4c3695
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--light-desktop.png
new file mode 100644
index 000000000..639abb1aa
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--light-mobile.png
new file mode 100644
index 000000000..f88e5b216
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--light-tablet.png
new file mode 100644
index 000000000..9fd48d902
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer.png
new file mode 100644
index 000000000..cac0c391f
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-footer--default-footer.png differ
diff --git a/apps/storybook/src/stories/components/layout/footer/Footer.stories.js b/apps/storybook/src/stories/components/layout/footer/Footer.stories.js
new file mode 100644
index 000000000..1279d887c
--- /dev/null
+++ b/apps/storybook/src/stories/components/layout/footer/Footer.stories.js
@@ -0,0 +1,192 @@
+import Brand from '@aziontech/webkit/brand'
+import Footer from '@aziontech/webkit/footer'
+import IconButton from '@aziontech/webkit/icon-button'
+import Select from '@aziontech/webkit/select'
+import StatusIndicator from '@aziontech/webkit/status-indicator'
+import { ref } from 'vue'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = [
+  "import Brand from '@aziontech/webkit/brand'",
+  "import Footer from '@aziontech/webkit/footer'",
+  "import IconButton from '@aziontech/webkit/icon-button'",
+  "import Select from '@aziontech/webkit/select'",
+  "import StatusIndicator from '@aziontech/webkit/status-indicator'",
+  "import { ref } from 'vue'"
+]
+
+// Compound sub-components registered under their dot-notation names so they
+// resolve in Storybook's runtime-compiled string template: Vue compiles
+// `<Footer.Column>` to `resolveComponent("Footer.Column")`, an exact-name
+// lookup (a bare `Footer` registration does not satisfy it). In a real SFC
+// the dotted tag resolves off the imported `Footer` binding, so consumer
+// code needs only `import Footer` — these extra registrations are a
+// Storybook-runtime concern.
+const components = {
+  Footer,
+  'Footer.Column': Footer.Column,
+  'Footer.Link': Footer.Link,
+  Brand,
+  IconButton,
+  'Select.Trigger': Select.Trigger,
+  'Select.Content': Select.Content,
+  'Select.Option': Select.Option,
+  Select,
+  StatusIndicator
+}
+
+/** @type {import('@storybook/vue3').Meta<typeof Footer>} */
+const meta = {
+  title: 'Components/Layout/Footer',
+  component: Footer,
+  subcomponents: {
+    'Footer.Column': Footer.Column,
+    'Footer.Link': Footer.Link
+  },
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    backgrounds: { default: 'dark' },
+    a11y: {
+      config: {
+        rules: [
+          { id: 'color-contrast', enabled: true },
+          { id: 'focus-order-semantics', enabled: true }
+        ]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'Page footer, the bottom-of-page counterpart to GlobalHeader: link columns over a social bar, folding from four columns to the stacked mobile presentation at the md breakpoint. Links, brand, status, and language content come from the consumer.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    ariaLabel: {
+      control: 'text',
+      description: 'Accessible name for the contentinfo landmark.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: "'Footer'" },
+        category: 'props'
+      }
+    },
+    default: {
+      control: false,
+      description: 'The Footer.Column items; a 2-column grid that becomes 4 columns at md.',
+      table: { type: { summary: '—' }, category: 'slots' }
+    },
+    'social-start': {
+      control: false,
+      description: 'Leading cluster of the social bar (brand + social icon buttons).',
+      table: { type: { summary: '—' }, category: 'slots' }
+    },
+    'social-end': {
+      control: false,
+      description: 'Trailing cluster of the social bar (status indicator + language select).',
+      table: { type: { summary: '—' }, category: 'slots' }
+    }
+  },
+  args: {
+    ariaLabel: 'Footer'
+  }
+}
+
+export default meta
+
+// The full anatomy, authored once so the live canvas (Template) and the
+// "Show code" snippet (DEFAULT_MARKUP) never drift.
+const FOOTER_CONTENT = `  <Footer.Column title="Products">
+    <Footer.Link href="/products/edge-application">Edge Application</Footer.Link>
+    <Footer.Link href="/products/edge-firewall">Edge Firewall</Footer.Link>
+    <Footer.Link href="/products/edge-storage">Edge Storage</Footer.Link>
+  </Footer.Column>
+  <Footer.Column title="Developers">
+    <Footer.Link href="/documentation">Documentation</Footer.Link>
+    <Footer.Link href="/blog">Blog</Footer.Link>
+    <Footer.Link href="/integrations">Integrations</Footer.Link>
+  </Footer.Column>
+  <Footer.Column title="Company">
+    <Footer.Link href="/about">About us</Footer.Link>
+    <Footer.Link href="/careers">Careers</Footer.Link>
+    <Footer.Link href="/legal">Legal</Footer.Link>
+  </Footer.Column>
+  <Footer.Column title="Support">
+    <Footer.Link href="/contact">Contact sales</Footer.Link>
+    <Footer.Link href="/support">Help center</Footer.Link>
+    <Footer.Link href="https://status.azion.com/">System status</Footer.Link>
+  </Footer.Column>
+  <template #social-start>
+    <a href="/" aria-label="Azion home">
+      <Brand />
+    </a>
+    <div class="flex items-center gap-1">
+      <IconButton kind="transparent" icon="pi pi-github" aria-label="Azion on GitHub" href="https://github.com/aziontech" target="_blank" />
+      <IconButton kind="transparent" icon="pi pi-linkedin" aria-label="Azion on LinkedIn" href="https://www.linkedin.com/company/aziontech" target="_blank" />
+      <IconButton kind="transparent" icon="pi pi-youtube" aria-label="Azion on YouTube" href="https://www.youtube.com/aziontech" target="_blank" />
+      <IconButton kind="transparent" icon="pi pi-twitter" aria-label="Azion on X" href="https://x.com/aziontech" target="_blank" />
+      <IconButton kind="transparent" icon="pi pi-instagram" aria-label="Azion on Instagram" href="https://www.instagram.com/aziontech" target="_blank" />
+      <IconButton kind="transparent" icon="pi pi-discord" aria-label="Azion on Discord" href="https://discord.gg/azion" target="_blank" />
+      <IconButton kind="transparent" icon="pi pi-reddit" aria-label="Azion on Reddit" href="https://www.reddit.com/r/azion" target="_blank" />
+    </div>
+  </template>
+  <template #social-end>
+    <StatusIndicator severity="success" label="All Systems Operational" />
+    <div class="w-24">
+      <Select v-model="language" placeholder="Language">
+        <Select.Trigger aria-label="Language" />
+        <Select.Content>
+          <Select.Option
+            v-for="o in languageOptions"
+            :key="o.value"
+            :value="o.value"
+          >{{ o.label }}</Select.Option>
+        </Select.Content>
+      </Select>
+    </div>
+  </template>`
+
+const SETUP_SNIPPET = `const language = ref('en')
+const languageOptions = [
+  { value: 'en', label: 'EN' },
+  { value: 'pt-br', label: 'PT-BR' },
+  { value: 'es', label: 'ES' }
+]`
+
+const Template = (args) => ({
+  components,
+  setup() {
+    const language = ref('en')
+    const languageOptions = [
+      { value: 'en', label: 'EN' },
+      { value: 'pt-br', label: 'PT-BR' },
+      { value: 'es', label: 'ES' }
+    ]
+    return { args, language, languageOptions }
+  },
+  template: `<Footer v-bind="args">
+${FOOTER_CONTENT}
+</Footer>`
+})
+
+const DEFAULT_MARKUP = `<Footer aria-label="Footer">
+${FOOTER_CONTENT}
+</Footer>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Footer>} */
+export const DefaultFooter = {
+  name: 'Default',
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The footer composed with four link columns and the social bar: brand plus social icon buttons at the start, the system status indicator at the end.'
+      },
+      source: { code: toSfc([...IMPORT, '', SETUP_SNIPPET], DEFAULT_MARKUP) }
+    }
+  }
+}
diff --git a/packages/webkit/.size-limit.json b/packages/webkit/.size-limit.json
index f4b34b563..75330e5cc 100644
--- a/packages/webkit/.size-limit.json
+++ b/packages/webkit/.size-limit.json
@@ -28,5 +28,10 @@
     "name": "password-requirements",
     "path": "src/components/inputs/field-password/password-requirements.ts",
     "limit": "0.3 KB"
+  },
+  {
+    "name": "footer-root",
+    "path": "src/components/layout/footer/footer.vue",
+    "limit": "1.1 KB"
   }
 ]
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index bb71cc569..41fd1a75f 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -7946,6 +7946,134 @@
       ],
       "purpose": "Thin separator line that visually splits content into groups. Renders as a full-width hairline (`horizontal`) or full-height hairline (`vertical`), and can carry centered content (an \"Or\"-style label) when the default slot or `label` prop is set. Unlike `ScrollArea` it adds no scrolling behaviour; it is a purely decorative-yet-semantic boundary exposing `role=\"separator\"`."
     },
+    "footer": {
+      "import": "@aziontech/webkit/footer",
+      "target": "./src/components/layout/footer/index.ts",
+      "kind": "component",
+      "compoundRoot": true,
+      "treeShakeableImport": "@aziontech/webkit/footer-root",
+      "subcomponents": [
+        "@aziontech/webkit/footer-column",
+        "@aziontech/webkit/footer-link"
+      ],
+      "category": "layout",
+      "structure": "composition",
+      "status": "approved",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "default": "'Footer'",
+          "required": "false",
+          "doc": "Accessible name for the contentinfo landmark."
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "Root: the `Footer.Column` items; laid out as a 2-column grid that becomes 4 columns at `md`."
+        },
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "footer-column`: its `Footer.Link` items."
+        },
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "footer-link`: the link label."
+        }
+      ],
+      "purpose": "Page footer for marketing and product surfaces: the bottom-of-page counterpart to `GlobalHeader`. A canvas-colored shell with a centered content measure holding link columns and a social bar separated by a hairline top border. Matches the Webkit Footer component set (Figma node 5467:1638, `Type=Default` / `Type=Mobile`): the two presentations are one component switching by CSS at the `md` (768px) breakpoint. Content (links, labels, languages, status) always comes from the consumer; the component owns anatomy, tokens, and responsiveness.",
+      "useWhen": [
+        "The page-level footer of a site or application, paired with `GlobalHeader`.",
+        "Grouped navigation links at the bottom of the page plus a brand/social/status bar."
+      ],
+      "avoidWhen": [
+        "The bottom area of a panel, table, sidebar, or overlay → use that component's own footer part (`panel-footer`, `table-footer`, `sidebar-footer`, `popover-footer`).",
+        "A single standalone link inside body content → use `link` instead of `Footer.Link`."
+      ],
+      "related": [
+        "global-header` — the top-of-page chrome counterpart; same shell philosophy (regions composed by the consumer).",
+        "brand`, `icon-button`, `status-indicator`, `select` — the components consumers compose inside the social bar; the footer reimplements none of them."
+      ],
+      "bestPractices": [
+        "Compose the social bar from existing DS components (`Brand`, `IconButton kind=\"transparent\"`, `StatusIndicator`, `Select`); never rebuild them inside the slots.",
+        "Keep column titles short (one or two words) — they are group labels, not headings for prose.",
+        "Give every social `IconButton` an `ariaLabel`; the footer cannot name them for you.",
+        "Provide four columns for the canonical desktop presentation; the grid folds to two columns below `md` on its own."
+      ]
+    },
+    "footer-root": {
+      "import": "@aziontech/webkit/footer-root",
+      "target": "./src/components/layout/footer/footer.vue",
+      "kind": "root",
+      "rootOf": "footer",
+      "treeShakeableImport": "@aziontech/webkit/footer-root",
+      "category": "layout",
+      "structure": "composition",
+      "status": "approved",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "default": "'Footer'",
+          "required": "false",
+          "doc": "Accessible name for the contentinfo landmark."
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "Root: the `Footer.Column` items; laid out as a 2-column grid that becomes 4 columns at `md`."
+        },
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "footer-column`: its `Footer.Link` items."
+        },
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "footer-link`: the link label."
+        }
+      ],
+      "purpose": "Page footer for marketing and product surfaces: the bottom-of-page counterpart to `GlobalHeader`. A canvas-colored shell with a centered content measure holding link columns and a social bar separated by a hairline top border. Matches the Webkit Footer component set (Figma node 5467:1638, `Type=Default` / `Type=Mobile`): the two presentations are one component switching by CSS at the `md` (768px) breakpoint. Content (links, labels, languages, status) always comes from the consumer; the component owns anatomy, tokens, and responsiveness.",
+      "useWhen": [
+        "The page-level footer of a site or application, paired with `GlobalHeader`.",
+        "Grouped navigation links at the bottom of the page plus a brand/social/status bar."
+      ],
+      "avoidWhen": [
+        "The bottom area of a panel, table, sidebar, or overlay → use that component's own footer part (`panel-footer`, `table-footer`, `sidebar-footer`, `popover-footer`).",
+        "A single standalone link inside body content → use `link` instead of `Footer.Link`."
+      ],
+      "related": [
+        "global-header` — the top-of-page chrome counterpart; same shell philosophy (regions composed by the consumer).",
+        "brand`, `icon-button`, `status-indicator`, `select` — the components consumers compose inside the social bar; the footer reimplements none of them."
+      ],
+      "bestPractices": [
+        "Compose the social bar from existing DS components (`Brand`, `IconButton kind=\"transparent\"`, `StatusIndicator`, `Select`); never rebuild them inside the slots.",
+        "Keep column titles short (one or two words) — they are group labels, not headings for prose.",
+        "Give every social `IconButton` an `ariaLabel`; the footer cannot name them for you.",
+        "Provide four columns for the canonical desktop presentation; the grid folds to two columns below `md` on its own."
+      ]
+    },
+    "footer-column": {
+      "import": "@aziontech/webkit/footer-column",
+      "target": "./src/components/layout/footer/footer-column/footer-column.vue",
+      "kind": "subcomponent",
+      "parent": "footer",
+      "treeShakeableImport": "@aziontech/webkit/footer-column"
+    },
+    "footer-link": {
+      "import": "@aziontech/webkit/footer-link",
+      "target": "./src/components/layout/footer/footer-link/footer-link.vue",
+      "kind": "subcomponent",
+      "parent": "footer",
+      "treeShakeableImport": "@aziontech/webkit/footer-link"
+    },
     "scroll-area": {
       "import": "@aziontech/webkit/scroll-area",
       "target": "./src/components/layout/scroll-area/scroll-area.vue",
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index 8f397c663..630d79c9a 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -245,6 +245,10 @@
     "./select-group": "./src/components/inputs/select/select-group/select-group.vue",
     "./select-option": "./src/components/inputs/select/select-option/select-option.vue",
     "./divider": "./src/components/layout/divider/divider.vue",
+    "./footer": "./src/components/layout/footer/index.ts",
+    "./footer-root": "./src/components/layout/footer/footer.vue",
+    "./footer-column": "./src/components/layout/footer/footer-column/footer-column.vue",
+    "./footer-link": "./src/components/layout/footer/footer-link/footer-link.vue",
     "./scroll-area": "./src/components/layout/scroll-area/scroll-area.vue",
     "./global-header": "./src/components/layout/global-header/index.js",
     "./sidebar": "./src/components/layout/sidebar/sidebar.vue",
diff --git a/packages/webkit/src/components/layout/footer/footer-column/footer-column.vue b/packages/webkit/src/components/layout/footer/footer-column/footer-column.vue
new file mode 100644
index 000000000..8797a7d5e
--- /dev/null
+++ b/packages/webkit/src/components/layout/footer/footer-column/footer-column.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs, useId } from 'vue'
+
+  import { FooterInjectionKey } from '../injection-key'
+
+  defineOptions({
+    name: 'FooterColumn',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Column group label, rendered above the links and used as the accessible name of the column landmark. */
+    title: string
+  }
+
+  defineProps<Props>()
+
+  defineSlots<{
+    /** The Footer.Link items of this column. */
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(FooterInjectionKey, null)
+  const titleId = useId()
+
+  const testId = computed(
+    () =>
+      (attrs['data-testid'] as string | undefined) ?? `${ctx?.testId ?? 'layout-footer'}__column`
+  )
+</script>
+
+<template>
+  <nav
+    v-bind="$attrs"
+    :aria-labelledby="titleId"
+    :data-testid="testId"
+    class="flex min-w-0 flex-col gap-(--spacing-md) border-0 p-(--spacing-lg) md:border-r md:border-r-(length:--border-width-default) md:border-r-(--border-default) md:last:border-r-0"
+  >
+    <span
+      :id="titleId"
+      class="text-label-sm text-(--text-muted)"
+    >
+      {{ title }}
+    </span>
+    <div class="flex flex-col items-start gap-(--spacing-xs)">
+      <slot />
+    </div>
+  </nav>
+</template>
diff --git a/packages/webkit/src/components/layout/footer/footer-link/footer-link.vue b/packages/webkit/src/components/layout/footer/footer-link/footer-link.vue
new file mode 100644
index 000000000..d0f9dd28a
--- /dev/null
+++ b/packages/webkit/src/components/layout/footer/footer-link/footer-link.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import { computed, inject, useAttrs } from 'vue'
+
+  import { FooterInjectionKey } from '../injection-key'
+
+  defineOptions({
+    name: 'FooterLink',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Destination URL of the link. */
+    href: string
+  }
+
+  defineProps<Props>()
+
+  defineSlots<{
+    /** The link label. */
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = inject(FooterInjectionKey, null)
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? `${ctx?.testId ?? 'layout-footer'}__link`
+  )
+</script>
+
+<template>
+  <a
+    v-bind="$attrs"
+    :href="href"
+    :data-testid="testId"
+    class="inline-flex w-fit items-center gap-(--spacing-xs) text-label-sm text-(--text-default) transition-colors duration-150 ease-out outline-none visited:text-(--text-default) hover:text-(--text-muted) active:text-(--text-muted) focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) motion-reduce:transition-none"
+  >
+    <slot />
+  </a>
+</template>
diff --git a/packages/webkit/src/components/layout/footer/footer.test.ts b/packages/webkit/src/components/layout/footer/footer.test.ts
new file mode 100644
index 000000000..df97631b0
--- /dev/null
+++ b/packages/webkit/src/components/layout/footer/footer.test.ts
@@ -0,0 +1,260 @@
+import { composeStories } from '@storybook/vue3'
+import { render } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+
+import * as stories from '../../../../../../apps/storybook/src/stories/components/layout/footer/Footer.stories'
+import { expectNoA11yViolations } from '../../../test/axe'
+import Footer from './index'
+
+const { DefaultFooter } = composeStories(stories)
+
+/**
+ * footer is a COMPOSITION component: `index.ts` attaches Column and Link onto
+ * the root via Object.assign, and the root provides { testId } through
+ * FooterInjectionKey. Each sub-component injects that context and derives its
+ * own testid as `${ctx.testId}__<part>`, so overriding the root testid proves
+ * provide/inject flows through the whole tree.
+ *
+ * The root has no emits and no v-model — the only prop is `ariaLabel` — so this
+ * file asserts the compound API resolution, the injected-state propagation, slot
+ * placement (including the conditional social bar), testid derivation/override,
+ * the landmark a11y contract, and axe.
+ */
+
+// The runtime string-template compiler resolves component tags from the
+// `components` map by tag name — it does not walk `Footer.Column` member
+// access the way the SFC compiler does. So register each part under a
+// PascalCase tag pointing at the compound member (the same shape the story uses).
+const compoundComponents = {
+  Footer,
+  FooterColumn: Footer.Column,
+  FooterLink: Footer.Link
+}
+
+// A minimal but realistic composed tree exercising columns, links, and both
+// social-bar clusters.
+const composedTemplate = `
+  <Footer>
+    <FooterColumn title="Products">
+      <FooterLink href="/products/edge-application">Edge Application</FooterLink>
+      <FooterLink href="/products/edge-firewall">Edge Firewall</FooterLink>
+    </FooterColumn>
+    <FooterColumn title="Company">
+      <FooterLink href="/about">About us</FooterLink>
+    </FooterColumn>
+    <template #social-start>
+      <a href="/" aria-label="Azion home"><svg viewBox="0 0 10 10"><rect width="10" height="10" /></svg></a>
+    </template>
+    <template #social-end>
+      <a href="https://status.azion.com/">All Systems Operational</a>
+    </template>
+  </Footer>
+`
+
+const renderComposed = (options = {}) =>
+  render({ components: compoundComponents, template: composedTemplate }, options)
+
+describe('Footer', () => {
+  describe('compound API (index.ts Object.assign)', () => {
+    it('exposes each part via dot-notation on the root', () => {
+      expect(Footer.Column).toBeTruthy()
+      expect(Footer.Link).toBeTruthy()
+    })
+
+    it('names each sub-component after its anatomy', () => {
+      // defineOptions.name on each part .vue.
+      expect(Footer.Column.name).toBe('FooterColumn')
+      expect(Footer.Link.name).toBe('FooterLink')
+    })
+  })
+
+  describe('root rendering (grounded in footer.vue)', () => {
+    it('renders a <footer> contentinfo landmark carrying the default data-testid', () => {
+      const { getByTestId } = render(Footer)
+      const root = getByTestId('layout-footer')
+      expect(root.tagName).toBe('FOOTER')
+    })
+
+    it('exposes a contentinfo landmark named from the default ariaLabel', () => {
+      const { getByRole } = render(Footer)
+      // Default ariaLabel is 'Footer', bound to aria-label on the landmark.
+      expect(getByRole('contentinfo', { name: 'Footer' })).toBeTruthy()
+    })
+
+    it('applies a custom ariaLabel to the contentinfo landmark', () => {
+      const { getByRole, getByTestId } = render(Footer, {
+        props: { ariaLabel: 'Site footer' }
+      })
+      expect(getByTestId('layout-footer').getAttribute('aria-label')).toBe('Site footer')
+      expect(getByRole('contentinfo', { name: 'Site footer' })).toBe(getByTestId('layout-footer'))
+    })
+
+    it('renders default slot content inside the columns region', () => {
+      const { getByTestId } = render(Footer, {
+        slots: { default: '<span data-testid="slotted">columns</span>' }
+      })
+      expect(getByTestId('layout-footer__columns').contains(getByTestId('slotted'))).toBe(true)
+    })
+
+    it('omits the social bar when neither social slot is provided', () => {
+      const { queryByTestId } = render(Footer, {
+        slots: { default: '<span>columns</span>' }
+      })
+      expect(queryByTestId('layout-footer__social')).toBeNull()
+    })
+
+    it('renders the social bar with each cluster in place when the slots are provided', () => {
+      const { getByTestId, getByText } = renderComposed()
+      const social = getByTestId('layout-footer__social')
+      expect(social.contains(getByText('All Systems Operational'))).toBe(true)
+      expect(social.querySelector('a[aria-label="Azion home"]')).toBeTruthy()
+    })
+
+    it('renders the social bar when only social-start is provided', () => {
+      const { getByTestId } = render({
+        components: compoundComponents,
+        template: `
+          <Footer>
+            <template #social-start>
+              <a href="/" aria-label="Azion home">Azion</a>
+            </template>
+          </Footer>
+        `
+      })
+      expect(getByTestId('layout-footer__social')).toBeTruthy()
+    })
+
+    it('renders the social bar when only social-end is provided', () => {
+      const { getByTestId } = render({
+        components: compoundComponents,
+        template: `
+          <Footer>
+            <template #social-end>
+              <a href="https://status.azion.com/">All Systems Operational</a>
+            </template>
+          </Footer>
+        `
+      })
+      expect(getByTestId('layout-footer__social')).toBeTruthy()
+    })
+  })
+
+  describe('provide/inject — the root testId flows to every part', () => {
+    it('derives each part testid from the root fallback testId', () => {
+      const { getAllByTestId } = renderComposed()
+      // Root fallback is 'layout-footer'; each part appends its own suffix.
+      expect(getAllByTestId('layout-footer__column')).toHaveLength(2)
+      expect(getAllByTestId('layout-footer__link')).toHaveLength(3)
+    })
+
+    it('overriding the root data-testid re-keys every injected part (proves shared state)', () => {
+      const overriddenTemplate = `
+        <Footer data-testid="site-footer">
+          <FooterColumn title="Products">
+            <FooterLink href="/products">Products</FooterLink>
+          </FooterColumn>
+        </Footer>
+      `
+      const { getByTestId, queryByTestId } = render({
+        components: compoundComponents,
+        template: overriddenTemplate
+      })
+
+      // Root uses the overridden value; each part derives from the injected ctx.testId.
+      expect(getByTestId('site-footer').tagName).toBe('FOOTER')
+      expect(getByTestId('site-footer__column')).toBeTruthy()
+      expect(getByTestId('site-footer__link')).toBeTruthy()
+
+      // The fallback keys no longer exist — the injected value drove every part.
+      expect(queryByTestId('layout-footer')).toBeNull()
+      expect(queryByTestId('layout-footer__column')).toBeNull()
+      expect(queryByTestId('layout-footer__link')).toBeNull()
+    })
+
+    it('a part rendered without a root falls back to the literal default testId', () => {
+      // No provider => inject() is null => ctx?.testId ?? 'layout-footer'.
+      const { getByTestId } = render(Footer.Column, {
+        props: { title: 'Products' },
+        slots: { default: '<a href="/products">Products</a>' }
+      })
+      expect(getByTestId('layout-footer__column').tagName).toBe('NAV')
+    })
+
+    it('lets a part override its own testid independent of the injected context', () => {
+      const { getByTestId, queryByTestId } = render({
+        components: compoundComponents,
+        template:
+          '<Footer><FooterColumn title="Products" data-testid="my-column">C</FooterColumn></Footer>'
+      })
+      // The sub-component prefers its own attrs['data-testid'] over the derived value.
+      expect(getByTestId('my-column').tagName).toBe('NAV')
+      expect(queryByTestId('layout-footer__column')).toBeNull()
+    })
+  })
+
+  describe('FooterColumn — labelled navigation landmark', () => {
+    it('renders a <nav> whose accessible name is the title', () => {
+      const { getByRole } = renderComposed()
+      expect(getByRole('navigation', { name: 'Products' })).toBeTruthy()
+      expect(getByRole('navigation', { name: 'Company' })).toBeTruthy()
+    })
+
+    it('associates the title to the nav via aria-labelledby', () => {
+      const { getByRole } = render(Footer.Column, {
+        props: { title: 'Products' }
+      })
+      const nav = getByRole('navigation', { name: 'Products' })
+      const labelId = nav.getAttribute('aria-labelledby')
+      expect(labelId).toBeTruthy()
+      expect(nav.querySelector(`[id="${labelId}"]`)?.textContent?.trim()).toBe('Products')
+    })
+  })
+
+  describe('FooterLink — anchor root with href and attribute fallthrough', () => {
+    it('renders an <a> pointing at href with the slot as its label', () => {
+      const { getByRole } = renderComposed()
+      const link = getByRole('link', { name: 'Edge Application' })
+      expect(link.getAttribute('href')).toBe('/products/edge-application')
+    })
+
+    it('forwards consumer attributes (target, rel) onto the anchor root', () => {
+      const { getByRole } = render(Footer.Link, {
+        props: { href: 'https://github.com/aziontech' },
+        attrs: { target: '_blank', rel: 'noopener noreferrer' },
+        slots: { default: 'GitHub' }
+      })
+      const link = getByRole('link', { name: 'GitHub' })
+      expect(link.getAttribute('target')).toBe('_blank')
+      expect(link.getAttribute('rel')).toBe('noopener noreferrer')
+    })
+  })
+
+  describe('a11y (axe against the styled, composed tree)', () => {
+    it('a fully composed footer has no violations', async () => {
+      const { container } = renderComposed()
+      await expectNoA11yViolations(container)
+    })
+
+    it('a custom-labelled footer has no violations', async () => {
+      const { container } = render(Footer, {
+        props: { ariaLabel: 'Site footer' },
+        slots: { default: '<a href="/">Home</a>' }
+      })
+      await expectNoA11yViolations(container)
+    })
+  })
+
+  describe('composeStories (the Default story fixture runs in-test)', () => {
+    it('Default story renders the landmark with its columns and social bar', () => {
+      const { getByRole, getByTestId, getAllByTestId } = render(DefaultFooter)
+      expect(getByRole('contentinfo', { name: 'Footer' })).toBeTruthy()
+      expect(getAllByTestId('layout-footer__column')).toHaveLength(4)
+      expect(getByTestId('layout-footer__social')).toBeTruthy()
+    })
+
+    it('Default story has no a11y violations', async () => {
+      const { container } = render(DefaultFooter)
+      await expectNoA11yViolations(container)
+    })
+  })
+})
diff --git a/packages/webkit/src/components/layout/footer/footer.vue b/packages/webkit/src/components/layout/footer/footer.vue
new file mode 100644
index 000000000..9405445f3
--- /dev/null
+++ b/packages/webkit/src/components/layout/footer/footer.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+  import { computed, provide, useAttrs } from 'vue'
+
+  import { FooterInjectionKey } from './injection-key'
+
+  defineOptions({
+    name: 'Footer',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Accessible name for the contentinfo landmark. */
+    ariaLabel?: string
+  }
+
+  withDefaults(defineProps<Props>(), {
+    ariaLabel: 'Footer'
+  })
+
+  const slots = defineSlots<{
+    /** The Footer.Column items; laid out as a 2-column grid that becomes 4 columns at md. */
+    default(): unknown
+    /** Leading cluster of the social bar (brand + social icon buttons). */
+    'social-start'(): unknown
+    /** Trailing cluster of the social bar (status indicator + language select). */
+    'social-end'(): unknown
+  }>()
+
+  const attrs = useAttrs()
+
+  const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'layout-footer')
+
+  const hasSocialBar = computed(() => Boolean(slots['social-start'] || slots['social-end']))
+
+  provide(FooterInjectionKey, {
+    testId: testId.value
+  })
+</script>
+
+<template>
+  <footer
+    v-bind="$attrs"
+    :aria-label="ariaLabel"
+    :data-testid="testId"
+    class="w-full bg-(--bg-canvas)"
+  >
+    <div class="mx-auto flex w-full max-w-(--container-5xl) flex-col">
+      <div
+        :data-testid="`${testId}__columns`"
+        class="grid w-full grid-cols-2 gap-y-(--spacing-lg) md:grid-cols-4 md:gap-y-0"
+      >
+        <slot />
+      </div>
+      <div
+        v-if="hasSocialBar"
+        :data-testid="`${testId}__social`"
+        class="flex w-full flex-col-reverse gap-(--spacing-md) border-0 border-t border-t-(length:--border-width-default) border-t-(--border-default) px-(--spacing-lg) py-(--spacing-md) md:h-14 md:flex-row md:items-center md:justify-between md:py-0"
+      >
+        <div class="flex min-w-0 flex-wrap items-center gap-(--spacing-md)">
+          <slot name="social-start" />
+        </div>
+        <div class="flex min-w-0 flex-wrap items-center gap-(--spacing-lg) md:justify-end">
+          <slot name="social-end" />
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/packages/webkit/src/components/layout/footer/index.ts b/packages/webkit/src/components/layout/footer/index.ts
new file mode 100644
index 000000000..3a6537d17
--- /dev/null
+++ b/packages/webkit/src/components/layout/footer/index.ts
@@ -0,0 +1,15 @@
+import Footer from './footer.vue'
+import FooterColumn from './footer-column/footer-column.vue'
+import FooterLink from './footer-link/footer-link.vue'
+
+type CompoundFooter = typeof Footer & {
+  Column: typeof FooterColumn
+  Link: typeof FooterLink
+}
+
+const FooterRoot = Object.assign(Footer, {
+  Column: FooterColumn,
+  Link: FooterLink
+}) as CompoundFooter
+
+export default FooterRoot
diff --git a/packages/webkit/src/components/layout/footer/injection-key.ts b/packages/webkit/src/components/layout/footer/injection-key.ts
new file mode 100644
index 000000000..962e19232
--- /dev/null
+++ b/packages/webkit/src/components/layout/footer/injection-key.ts
@@ -0,0 +1,7 @@
+import type { InjectionKey } from 'vue'
+
+export interface FooterContext {
+  testId: string
+}
+
+export const FooterInjectionKey: InjectionKey<FooterContext> = Symbol('FooterContext')