diff --git a/.specs/brand.md b/.specs/brand.md
new file mode 100644
index 000000000..228cba67d
--- /dev/null
+++ b/.specs/brand.md
@@ -0,0 +1,105 @@
+---
+name: brand
+category: content
+structure: monolithic
+status: implemented
+spec_version: 1
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=587-3946
+  node_id: 587:3946
+checksum: 62d98081182fc1883def54d3bfaea330a30141becc0ecc3e31cdca35e26e7f8d
+created: 2026-07-13
+last_updated: 2026-07-13
+---
+
+# Brand — Component Spec
+
+## Purpose
+
+The Azion brand logo, rendered as an inline SVG lockup. A single `kind` prop selects the lockup: `default` (the AZION wordmark) for standard surfaces, `reduced` (the "A" glyph) for compact headers and tight spaces, and `extended` (the AZION wordmark with the "move to the edge technologies®" tagline) for marketing-oriented layouts. It consolidates the loose `@aziontech/webkit/svg/azion/*` assets — which remain individually importable — behind one component.
+
+## Usage
+
+```vue
+<script setup>
+import Brand from '@aziontech/webkit/brand'
+</script>
+
+<template>
+  <Brand kind="default" />
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `kind` | `'default' \| 'reduced' \| 'extended'` | `'default'` | no | Brand lockup to render: `default` (AZION wordmark), `reduced` (the "A" glyph for tight spaces), `extended` (wordmark with the "move to the edge technologies®" tagline). |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | no | Size token; sets the lockup height (16 / 24 / 32 px) while width scales automatically so each `kind` keeps its own aspect ratio. |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| _none_ | — | — |
+
+## States
+
+- Visual states: `default`
+- `data-kind` mirrors the `kind` prop
+- `data-size` mirrors the `size` prop
+
+## Motion & Animations
+
+_none_
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| brand mark (SVG fill, asset-owned) | `var(--primary)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| brand orange (`#F3652B`) | hardcoded HEX inside the `svg/azion/*` assets | `TODO: tokenizar the brand assets to `var(--primary)`` |
+
+## Accessibility (WCAG 2.1 AA)
+
+- The root carries `role="img"` and a default `aria-label` (`Azion`) so the logo has an accessible name; consumers may override the label via a passed `aria-label`.
+- Non-interactive: the logo is not focusable and emits no events; the inner SVG is presentational.
+- Contrast ≥3:1 for the brand mark against its background (large graphic).
+- `motion-reduce` not applicable — the component is static.
+
+## Stories (Storybook)
+
+- Default
+- Types — composite story rendering every `kind` value (`default`, `reduced`, `extended`) side-by-side.
+- Sizes — composite story rendering every `size` value (`small`, `medium`, `large`) side-by-side.
+
+## 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 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 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-content-brand--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--default.png
new file mode 100644
index 000000000..599130d17
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--default.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--sizes.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--sizes.png
new file mode 100644
index 000000000..eb78e5a7a
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--sizes.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--types.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--types.png
new file mode 100644
index 000000000..d9a6fb371
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-brand--types.png differ
diff --git a/apps/storybook/src/stories/components/content/brand/Brand.stories.js b/apps/storybook/src/stories/components/content/brand/Brand.stories.js
new file mode 100644
index 000000000..f3666edc6
--- /dev/null
+++ b/apps/storybook/src/stories/components/content/brand/Brand.stories.js
@@ -0,0 +1,118 @@
+import Brand from '@aziontech/webkit/brand'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import Brand from '@aziontech/webkit/brand'"
+
+/** @type {import('@storybook/vue3').Meta<typeof Brand>} */
+const meta = {
+  title: 'Components/Content/Brand',
+  component: Brand,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    },
+    a11y: {
+      config: {
+        rules: [
+          { id: 'color-contrast', enabled: true },
+          { id: 'focus-order-semantics', enabled: true }
+        ]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'The Azion brand logo, rendered as an inline SVG lockup. A single `kind` prop selects the lockup: `default` (the AZION wordmark) for standard surfaces, `reduced` (the "A" glyph) for compact headers and tight spaces, and `extended` (the AZION wordmark with the "move to the edge technologies®" tagline) for marketing-oriented layouts. It consolidates the loose `@aziontech/webkit/svg/azion/*` assets — which remain individually importable — behind one component.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    kind: {
+      control: 'select',
+      options: ['default', 'reduced', 'extended'],
+      description: 'Brand lockup to render.',
+      table: {
+        category: 'props',
+        type: { summary: "'default' | 'reduced' | 'extended'" },
+        defaultValue: { summary: "'default'" }
+      }
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Size token; sets the lockup height while width scales to preserve each kind’s aspect ratio.',
+      table: {
+        category: 'props',
+        type: { summary: "'small' | 'medium' | 'large'" },
+        defaultValue: { summary: "'medium'" }
+      }
+    }
+  },
+  args: { kind: 'default', size: 'medium' }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { Brand },
+  setup: () => ({ props: args }),
+  template: '<Brand v-bind="props" />'
+})
+
+const DEFAULT_MARKUP = '<Brand kind="default" />'
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Brand>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: { story: 'The default AZION wordmark lockup.' },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const TYPES_TEMPLATE = `<div class="flex flex-wrap items-center gap-8">
+  <Brand kind="default" />
+  <Brand kind="reduced" />
+  <Brand kind="extended" />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Brand>} */
+export const Types = {
+  render: () => ({ components: { Brand }, template: TYPES_TEMPLATE }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'All brand lockups side by side: default (AZION wordmark), reduced (the "A" glyph), and extended (wordmark with the "move to the edge technologies®" tagline).'
+      },
+      source: { code: toSfc(IMPORT, TYPES_TEMPLATE) }
+    }
+  }
+}
+
+const SIZES_TEMPLATE = `<div class="flex flex-wrap items-center gap-8">
+  <Brand kind="default" size="small" />
+  <Brand kind="default" size="medium" />
+  <Brand kind="default" size="large" />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Brand>} */
+export const Sizes = {
+  render: () => ({ components: { Brand }, template: SIZES_TEMPLATE }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: {
+        story: 'The lockup at each size token — small (16px), medium (24px), and large (32px) tall — with width scaling to preserve the aspect ratio.'
+      },
+      source: { code: toSfc(IMPORT, SIZES_TEMPLATE) }
+    }
+  }
+}
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 16f70efbc..1106f9122 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -2226,6 +2226,32 @@
         "Drive color from `kind`, never a hardcoded color or a raw palette class."
       ]
     },
+    "brand": {
+      "import": "@aziontech/webkit/brand",
+      "target": "./src/components/content/brand/brand.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/brand",
+      "category": "content",
+      "structure": "monolithic",
+      "status": "implemented",
+      "props": [
+        {
+          "name": "kind",
+          "type": "'default' | 'reduced' | 'extended'",
+          "default": "'default'",
+          "required": "no",
+          "doc": "Brand lockup to render: `default` (AZION wordmark), `reduced` (the \"A\" glyph for tight spaces), `extended` (wordmark with the \"move to the edge technologies®\" tagline)."
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": "'medium'",
+          "required": "no",
+          "doc": "Size token; sets the lockup height (16 / 24 / 32 px) while width scales automatically so each `kind` keeps its own aspect ratio."
+        }
+      ],
+      "purpose": "The Azion brand logo, rendered as an inline SVG lockup. A single `kind` prop selects the lockup: `default` (the AZION wordmark) for standard surfaces, `reduced` (the \"A\" glyph) for compact headers and tight spaces, and `extended` (the AZION wordmark with the \"move to the edge technologies®\" tagline) for marketing-oriented layouts. It consolidates the loose `@aziontech/webkit/svg/azion/*` assets — which remain individually importable — behind one component."
+    },
     "accordion": {
       "import": "@aziontech/webkit/accordion",
       "target": "./src/components/content/accordion/index.ts",
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index 915b9a67d..0bb8a160b 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -128,6 +128,7 @@
     "./tag": "./src/components/tag/tag.vue",
     "./avatar": "./src/components/avatar/avatar.vue",
     "./badge": "./src/components/content/badge/badge.vue",
+    "./brand": "./src/components/content/brand/brand.vue",
     "./accordion": "./src/components/content/accordion/index.ts",
     "./accordion-root": "./src/components/content/accordion/accordion.vue",
     "./accordion-item": "./src/components/content/accordion/accordion-item/accordion-item.vue",
diff --git a/packages/webkit/src/components/content/brand/brand.figma.ts b/packages/webkit/src/components/content/brand/brand.figma.ts
new file mode 100644
index 000000000..6ae0cc1e1
--- /dev/null
+++ b/packages/webkit/src/components/content/brand/brand.figma.ts
@@ -0,0 +1,24 @@
+import { figma } from '@figma/code-connect'
+
+import Brand from './brand.vue'
+
+// The Figma "Brand" component exposes a `type` variant (Default | Min | Move to the Edge | Full).
+// We surface the three lockups this component ships: Default → default, Min → reduced, and
+// Full (the tagline lockup) → extended. The "Move to the Edge" Figma variant is not exposed.
+// `size` has no Figma counterpart — it is a code-only prop, so it is not mapped here.
+figma.connect(
+  Brand,
+  'https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=587-3946',
+  {
+    props: {
+      kind: figma.enum('type', {
+        Default: 'default',
+        Min: 'reduced',
+        Full: 'extended'
+      })
+    },
+    example: (props) => /* html */ `
+      <Brand kind="${props.kind}" size="medium" />
+    `
+  }
+)
diff --git a/packages/webkit/src/components/content/brand/brand.test.ts b/packages/webkit/src/components/content/brand/brand.test.ts
new file mode 100644
index 000000000..3d403c55d
--- /dev/null
+++ b/packages/webkit/src/components/content/brand/brand.test.ts
@@ -0,0 +1,128 @@
+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/content/brand/Brand.stories'
+import { expectNoA11yViolations } from '../../../test/axe'
+import Brand from './brand.vue'
+
+const { Default, Types, Sizes } = composeStories(stories)
+
+// Each kind maps to a distinct SVG lockup, identifiable by its viewBox.
+const KIND_VIEWBOX = {
+  default: '0 0 90 18',
+  reduced: '0 0 21 18',
+  extended: '0 0 90 34'
+} as const
+
+const KINDS = ['default', 'reduced', 'extended'] as const
+const SIZES = ['small', 'medium', 'large'] as const
+
+describe('Brand', () => {
+  // --- render + testid ----------------------------------------------------
+  it('renders with the default testid and role="img"', () => {
+    const { getByTestId } = render(Brand)
+
+    const root = getByTestId('content-brand')
+    expect(root).toBeInTheDocument()
+    expect(root).toHaveAttribute('role', 'img')
+  })
+
+  it('honors a consumer data-testid on the root', () => {
+    const { getByTestId } = render(Brand, {
+      attrs: { 'data-testid': 'my-brand' }
+    })
+
+    expect(getByTestId('my-brand')).toBeInTheDocument()
+  })
+
+  // --- kind -> rendered lockup + data-kind --------------------------------
+  it.each(KINDS)('kind=%s sets data-kind and renders the matching lockup', (kind) => {
+    const { getByTestId } = render(Brand, { props: { kind } })
+
+    const root = getByTestId('content-brand')
+    expect(root).toHaveAttribute('data-kind', kind)
+
+    const svg = root.querySelector('svg')
+    expect(svg).not.toBeNull()
+    expect(svg).toHaveAttribute('viewBox', KIND_VIEWBOX[kind])
+  })
+
+  it('defaults to the default lockup when kind is omitted', () => {
+    const { getByTestId } = render(Brand)
+
+    const root = getByTestId('content-brand')
+    expect(root).toHaveAttribute('data-kind', 'default')
+    expect(root.querySelector('svg')).toHaveAttribute('viewBox', KIND_VIEWBOX.default)
+  })
+
+  // --- size -> data-size + preserved aspect ratio -------------------------
+  it.each(SIZES)('size=%s sets data-size on the root', (size) => {
+    const { getByTestId } = render(Brand, { props: { size } })
+    expect(getByTestId('content-brand')).toHaveAttribute('data-size', size)
+  })
+
+  it('defaults to size "medium" when size is omitted', () => {
+    expect(render(Brand).getByTestId('content-brand')).toHaveAttribute('data-size', 'medium')
+  })
+
+  // Sizing is applied via width:auto on the SVG, so each lockup keeps its own viewBox
+  // aspect ratio at any size (the height utility only scales it; width follows the viewBox).
+  it.each(KINDS)('keeps the %s lockup viewBox (aspect ratio) intact across sizes', (kind) => {
+    for (const size of SIZES) {
+      const { container } = render(Brand, { props: { kind, size } })
+      expect(container.querySelector('svg')).toHaveAttribute('viewBox', KIND_VIEWBOX[kind])
+    }
+  })
+
+  // --- accessibility ------------------------------------------------------
+  it('labels the logo "Azion" by default and marks the inner SVG presentational', () => {
+    const { getByTestId } = render(Brand)
+
+    const root = getByTestId('content-brand')
+    expect(root).toHaveAttribute('aria-label', 'Azion')
+    expect(root.querySelector('svg')).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('lets a consumer override the accessible name via aria-label', () => {
+    const { getByTestId } = render(Brand, {
+      attrs: { 'aria-label': 'Azion home' }
+    })
+
+    expect(getByTestId('content-brand')).toHaveAttribute('aria-label', 'Azion home')
+  })
+
+  it.each(KINDS)('has no accessibility violations for kind=%s', async (kind) => {
+    const { container } = render(Brand, { props: { kind } })
+    await expectNoA11yViolations(container)
+  })
+
+  // --- composed story fixtures --------------------------------------------
+  it('renders the composed Default story fixture (default lockup)', () => {
+    const { getByTestId } = render(Default)
+
+    const root = getByTestId('content-brand')
+    expect(root).toHaveAttribute('data-kind', 'default')
+    expect(root.querySelector('svg')).toHaveAttribute('viewBox', KIND_VIEWBOX.default)
+  })
+
+  it('renders all three lockups in the composed Types story fixture', () => {
+    const { getAllByTestId } = render(Types)
+
+    const roots = getAllByTestId('content-brand')
+    expect(roots).toHaveLength(3)
+    expect(roots.map((r) => r.getAttribute('data-kind'))).toEqual([
+      'default',
+      'reduced',
+      'extended'
+    ])
+  })
+
+  it('renders all three sizes in the composed Sizes story fixture', () => {
+    const { getAllByTestId } = render(Sizes)
+
+    const roots = getAllByTestId('content-brand')
+    expect(roots).toHaveLength(3)
+    expect(roots.map((r) => r.getAttribute('data-size'))).toEqual(['small', 'medium', 'large'])
+  })
+})
diff --git a/packages/webkit/src/components/content/brand/brand.vue b/packages/webkit/src/components/content/brand/brand.vue
new file mode 100644
index 000000000..a7d201627
--- /dev/null
+++ b/packages/webkit/src/components/content/brand/brand.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+
+  import BrandDefault from '../../../svg/azion/default/default.vue'
+  import BrandReduced from '../../../svg/azion/min/min.vue'
+  import BrandExtended from '../../../svg/azion/technologies/technologies.vue'
+
+  export type BrandKind = 'default' | 'reduced' | 'extended'
+
+  export type BrandSize = 'small' | 'medium' | 'large'
+
+  defineOptions({
+    name: 'Brand',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Brand lockup to render: `default` (AZION wordmark), `reduced` (the "A" glyph for tight spaces), `extended` (wordmark with the "move to the edge technologies" tagline). */
+    kind?: BrandKind
+    /** Size token; sets the lockup height (16 / 24 / 32 px) while width scales automatically so each `kind` keeps its own aspect ratio. */
+    size?: BrandSize
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    kind: 'default',
+    size: 'medium'
+  })
+
+  const attrs = useAttrs()
+
+  const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'content-brand')
+
+  const asset = computed(() => {
+    if (props.kind === 'reduced') return BrandReduced
+    if (props.kind === 'extended') return BrandExtended
+    return BrandDefault
+  })
+</script>
+
+<template>
+  <span
+    role="img"
+    aria-label="Azion"
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-kind="kind"
+    :data-size="size"
+    :class="attrs.class"
+    class="inline-flex items-center [&>svg]:w-auto [&[data-size=small]>svg]:h-4 [&[data-size=medium]>svg]:h-6 [&[data-size=large]>svg]:h-8"
+  >
+    <component
+      :is="asset"
+      aria-hidden="true"
+    />
+  </span>
+</template>