From 1ee2ccfeb0234d8ee3453cc248a828a410532945 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Thu, 24 Sep 2026 22:04:35 -0300
Subject: [PATCH 1/4] feat(webkit): add the logo-wall marketing component

---
 .specs/logo-wall.md                           | 163 ++++++++++++++++
 .../marketing/logo-wall/LogoWall.stories.js   | 183 ++++++++++++++++++
 packages/webkit/.size-limit.json              |   5 +
 packages/webkit/catalog.json                  |  64 ++++++
 packages/webkit/package.json                  |   1 +
 .../marketing/logo-wall/logo-wall.test.ts     | 169 ++++++++++++++++
 .../marketing/logo-wall/logo-wall.vue         | 113 +++++++++++
 7 files changed, 698 insertions(+)
 create mode 100644 .specs/logo-wall.md
 create mode 100644 apps/storybook/src/stories/components/marketing/logo-wall/LogoWall.stories.js
 create mode 100644 packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
 create mode 100644 packages/webkit/src/components/marketing/logo-wall/logo-wall.vue

diff --git a/.specs/logo-wall.md b/.specs/logo-wall.md
new file mode 100644
index 000000000..720730ce4
--- /dev/null
+++ b/.specs/logo-wall.md
@@ -0,0 +1,163 @@
+---
+name: logo-wall
+category: marketing
+structure: monolithic
+status: implemented
+spec_version: 1
+checksum: 0000a7ede0732472f868b87a74e702a8ea87dbaee838fdc6a6971eb6c7b29f34
+created: 2026-09-22
+last_updated: 2026-09-24
+---
+
+# Logo Wall — Component Spec
+
+## Purpose
+
+The customer-proof band of a marketing page: a responsive grid of company marks, optionally linked, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for.
+
+The marks rest at 60% opacity, so the wall reads as the evidence behind the page's own words rather than as twelve things competing with them; a linked mark comes up to full strength on hover and focus. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge — and the wall narrows from six columns to four to sit in half the width.
+
+## When to use
+
+- To show who already uses the product, as the proof band under a hero or section.
+- Wherever a set of partner, customer or certification marks is the message.
+- When the marks are recognisable enough that names are unnecessary.
+- To set one customer's statement beside the crowd that backs it, by filling `aside` with a `quote`.
+
+## When NOT to use
+
+- For a measured claim rather than a set of names → use `big-numbers`.
+- For one customer's statement → use `quote`.
+- For a single brand mark, such as the product's own → use `brand`.
+- For a grid of described features rather than marks → use `feature-card`.
+
+## Related
+
+- `quote` — one named customer's statement; the wall shows many without words.
+- `big-numbers` — the numeric form of the same proof band.
+- `brand` — the product's own mark, not a customer's.
+
+## Best practices
+
+- Supply marks that read on the page's own surface. The component applies no colour filter — only a uniform opacity — so a mark that only works on one theme will not work on both; ship a mark that does, rather than inverting it. When the marks come from a registry that already places them per theme, render them through the `mark` slot and keep `items` as the list they are drawn from.
+- Give every mark a real `alt` — the company name. The wall is a list of who uses the product, and that list should be readable without seeing it.
+- Set `ariaLabel` so the group announces its purpose ("Customers using Azion") instead of reading as an unnamed list.
+- Keep the marks to one visual weight. A wall mixing wordmarks and full lockups reads as inconsistent no matter how the grid is set.
+- Link a mark with `href` only when there is somewhere worth going, such as a case study.
+- Put one statement in `aside`, not a second grid. The band's argument is *many customers, one of them talking*; two things of equal weight leave a reader with neither.
+- Give the wall eight or twelve marks when `aside` is filled — it is four columns wide there — so the last row is full rather than ragged.
+
+## Usage
+
+```vue
+<script setup>
+import LogoWall from '@aziontech/webkit/logo-wall'
+import Quote from '@aziontech/webkit/quote'
+</script>
+
+<template>
+  <LogoWall
+    aria-label="Customers building on Azion"
+    :items="[
+      { src: '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/logos/northwind.svg', alt: 'Northwind' },
+      { src: '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/logos/contoso.svg', alt: 'Contoso', href: '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/customers/contoso' },
+      { src: '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/logos/fabrikam.svg', alt: 'Fabrikam' },
+      { src: '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/logos/tailspin.svg', alt: 'Tailspin' }
+    ]"
+  >
+    <template #aside>
+      <Quote
+        logo="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/logos/contoso.svg"
+        text="Azion transformed our operations, reducing costs and improving performance."
+        source="Mateus Leonardi, CTO at Contoso"
+      />
+    </template>
+  </LogoWall>
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `items` | `LogoItem[]` | `[]` | false | The marks rendered in the grid, in order; each item is `{ src, alt, href? }` where `src` is the mark's URL, `alt` names the company, and `href` links the mark when there is somewhere to go. |
+| `ariaLabel` | `string` | `''` | false | Accessible name for the group of marks, announced instead of an unnamed list. |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `aside` | — | Content set beside the wall from `lg` up, such as one customer's `quote`; when it is empty the wall spans the full width. |
+| `mark` | `{ item: LogoItem; index: number }` | One cell's mark, replacing the image built from the item — for a mark that owns its own theming (a per-theme asset swap, a silhouette filter). The slotted content carries its own alternative text. |
+
+## States
+
+- Visual states: every mark rests at 60% opacity; `hover` / `focus-visible` on a mark that carries an `href` is the only thing that lifts it to full
+- `data-aside` is present when the `aside` slot is filled, and is what splits the band into two columns from `lg` up and narrows the wall from six columns to four
+- A cell's mark is the `mark` slot's content when it is filled, and the image built from the item otherwise; either way it rests at the same 60% opacity and, with an `href`, lifts on `hover` / `focus-visible`
+- Empty: when `items` is empty the wall renders no grid, so a page with no customers to name shows nothing rather than an empty frame — an `aside` given without items still renders, since a statement stands on its own
+
+## Motion & Animations
+
+| Trigger | Animation / Transition | Token (see `.claude/docs/DESIGN.md` § Animations) | Reduced-motion fallback |
+|---|---|---|---|
+| hover on a linked mark | `transition-opacity duration-150 ease-out` | inline (matches catalog) | `motion-reduce:transition-none` |
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| spacing (grid gap) | `var(--spacing-xl)` |
+| spacing (wall ↔ aside gap) | `var(--spacing-xxl)` |
+| ring | `var(--ring-color)` |
+| focus ring offset | `var(--bg-canvas)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| _none_ | — | — |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: a linked mark carries `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`; an unlinked mark is not focusable.
+- Keyboard map: `Tab` reaches each linked mark in DOM order; unlinked marks are skipped. No arrow-key model — this is a list, not a composite widget.
+- ARIA: the grid is a `<ul>` of `<li>` so the count is announced, named by `ariaLabel` when set; each mark's `alt` carries the company name, so the wall is readable without sight. A mark supplied through the `mark` slot owns that name itself — the component cannot add it.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons): the marks are consumer-supplied images held at 60% opacity. WCAG 1.4.11 exempts logotypes from the contrast minimum, and the component adds no colour filter, so a mark must still carry its own legibility against `var(--bg-canvas)` at that strength. Anything in `aside` is ordinary content and is bound by the minimum in full.
+- `motion-reduce:transition-none` on the linked-mark hover transition. The band never auto-scrolls, so WCAG 2.2.2 (pause, stop, hide) does not apply.
+- Touch target ≥40×40 px — a linked mark's anchor spans its full grid cell.
+
+## Stories (Storybook)
+
+- Default
+- Linked — marks carrying an `href` (justified: the hover, focus ring and anchor semantics only exist on linked marks, and the default args have none)
+- WithAside — the wall paired with a `quote` on the end edge (justified: the two-column split and the four-column wall exist only when the `aside` slot is filled, and no arg can produce them)
+
+## 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/src/stories/components/marketing/logo-wall/LogoWall.stories.js b/apps/storybook/src/stories/components/marketing/logo-wall/LogoWall.stories.js
new file mode 100644
index 000000000..c0afe375b
--- /dev/null
+++ b/apps/storybook/src/stories/components/marketing/logo-wall/LogoWall.stories.js
@@ -0,0 +1,183 @@
+import LogoWall from '@aziontech/webkit/logo-wall'
+import Quote from '@aziontech/webkit/quote'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import LogoWall from '@aziontech/webkit/logo-wall'"
+
+const ASIDE_IMPORTS = [IMPORT, "import Quote from '@aziontech/webkit/quote'"]
+
+const ARIA_LABEL = 'Customers building on Azion'
+
+const CLIENTS = [
+  ['nzn', 'NZN'],
+  ['axur', 'Axur'],
+  ['radware', 'Radware'],
+  ['arezzo', 'Arezzo'],
+  ['contabilizei', 'Contabilizei'],
+  ['magalu', 'Magalu'],
+  ['fourbank', 'Fourbank'],
+  ['herospark', 'HeroSpark'],
+  ['crefisa', 'Crefisa'],
+  ['netshoes', 'Netshoes'],
+  ['dafiti', 'Dafiti'],
+  ['global-fashion-group', 'Global Fashion Group']
+]
+
+const ITEMS = CLIENTS.map(([key, alt]) => ({ src: `/clients/${key}.svg`, alt }))
+
+const LINKED_ITEMS = CLIENTS.map(([key, alt]) => ({
+  src: `/clients/${key}.svg`,
+  alt,
+  href: `https://www.azion.com/en/success-case/${key}/`
+}))
+
+// The snippet has to be paste-and-run, so the marks are spelled out rather than mapped.
+const itemsMarkup = (items) =>
+  items
+    .map((item) => {
+      const href = item.href ? `, href: '${item.href}'` : ''
+      return `    { src: '${item.src}', alt: '${item.alt}'${href} }`
+    })
+    .join(',\n')
+
+/** @type {import('@storybook/vue3').Meta<typeof LogoWall>} */
+const meta = {
+  title: 'Components/Marketing/LogoWall',
+  component: LogoWall,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: true }]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'The customer-proof band of a marketing page: a responsive grid of company marks, optionally linked, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    items: {
+      control: 'object',
+      description:
+        "The marks rendered in the grid, in order; each item is `{ src, alt, href? }` where `src` is the mark's URL, `alt` names the company, and `href` links the mark when there is somewhere to go.",
+      table: {
+        category: 'props',
+        type: { summary: 'LogoItem[]' },
+        defaultValue: { summary: '[]' }
+      }
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Accessible name for the group of marks, announced instead of an unnamed list.',
+      table: {
+        category: 'props',
+        type: { summary: 'string' },
+        defaultValue: { summary: "''" }
+      }
+    }
+  },
+  args: {
+    items: ITEMS,
+    ariaLabel: ARIA_LABEL
+  }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { LogoWall },
+  setup() {
+    return { args }
+  },
+  template: '<LogoWall v-bind="args" />'
+})
+
+const DEFAULT_MARKUP = `<LogoWall
+  aria-label="${ARIA_LABEL}"
+  :items="[
+${itemsMarkup(ITEMS)}
+  ]"
+/>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof LogoWall>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Twelve real customer marks, six to a row, resting at 60% opacity so the wall reads as the evidence behind the page rather than as twelve things competing with it. These are the white single-ink files the marks ship for a dark surface, which is what the component wants: it applies no colour filter, so the mark itself has to carry its legibility — flip the toolbar to the light theme and they disappear, which is the cost of a one-theme asset rather than a bug in the band. Nothing here is focusable: without an `href` a cell is an image, and `Tab` walks straight past the wall. Empty the `items` control and the band renders nothing at all rather than an empty frame.'
+      },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const LINKED_MARKUP = `<LogoWall
+  aria-label="${ARIA_LABEL}"
+  :items="[
+${itemsMarkup(LINKED_ITEMS)}
+  ]"
+/>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof LogoWall>} */
+export const Linked = {
+  render: Template,
+  args: {
+    items: LINKED_ITEMS
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The same wall with every mark carrying an `href` to that customer’s success case, which is the only path to the anchor states: each cell becomes a link that comes up from 60% to full on hover and takes a visible focus ring, and `Tab` now reaches all twelve in DOM order. Link a mark only when there is somewhere worth going — a wall of links to nowhere costs a reader twelve tab stops and gives nothing back.'
+      },
+      source: { code: toSfc(IMPORT, LINKED_MARKUP) }
+    }
+  }
+}
+
+const QUOTE_MARKUP = `  <template #aside>
+    <Quote
+      logo="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/clients/herospark.svg"
+      logo-alt="HeroSpark"
+      text="Azion transformed our operations, reducing costs and improving performance while freeing 200+ monthly hours for strategic development."
+      source="Mateus Leonardi, CTO at HeroSpark"
+    />
+  </template>`
+
+const ASIDE_MARKUP = `<LogoWall
+  aria-label="${ARIA_LABEL}"
+  :items="[
+${itemsMarkup(ITEMS)}
+  ]"
+>
+${QUOTE_MARKUP}
+</LogoWall>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof LogoWall>} */
+export const WithAside = {
+  render: (args) => ({
+    components: { LogoWall, Quote },
+    setup() {
+      return { args }
+    },
+    template: `<LogoWall v-bind="args">\n${QUOTE_MARKUP}\n</LogoWall>`
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Fill the `aside` slot and the band splits from `lg` up: the wall on the start edge, one of those twelve customers speaking on the end edge. The wall narrows from six columns to four so the marks still breathe in half the width — twelve fills three full rows, which is why no row is ragged. The marks stay at 60% while the quotation and its own mark sit at full strength, so the crowd reads as the evidence behind the sentence; below `lg` the two stack and the quotation follows the wall.'
+      },
+      source: { code: toSfc(ASIDE_IMPORTS, ASIDE_MARKUP) }
+    }
+  }
+}
diff --git a/packages/webkit/.size-limit.json b/packages/webkit/.size-limit.json
index dbcbf8e11..4f27264af 100644
--- a/packages/webkit/.size-limit.json
+++ b/packages/webkit/.size-limit.json
@@ -134,6 +134,11 @@
     "path": "src/components/layout/resizable-panel/resizable-panel.vue",
     "limit": "3 KB"
   },
+  {
+    "name": "logo-wall",
+    "path": "src/components/marketing/logo-wall/logo-wall.vue",
+    "limit": "1 KB"
+  },
   {
     "name": "illustration",
     "path": "src/components/content/illustration/illustration.vue",
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 039f4a19f..20691ff59 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -9930,6 +9930,70 @@
       "parent": "sidebar",
       "treeShakeableImport": "@aziontech/webkit/sidebar-footer"
     },
+    "logo-wall": {
+      "import": "@aziontech/webkit/logo-wall",
+      "target": "./src/components/marketing/logo-wall/logo-wall.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/logo-wall",
+      "category": "marketing",
+      "structure": "monolithic",
+      "status": "implemented",
+      "props": [
+        {
+          "name": "items",
+          "type": "LogoItem[]",
+          "default": "[]",
+          "required": "false",
+          "doc": "The marks rendered in the grid, in order; each item is `{ src, alt, href? }` where `src` is the mark's URL, `alt` names the company, and `href` links the mark when there is somewhere to go."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Accessible name for the group of marks, announced instead of an unnamed list."
+        }
+      ],
+      "slots": [
+        {
+          "name": "aside",
+          "scope": "—",
+          "notes": "Content set beside the wall from `lg` up, such as one customer's `quote`; when it is empty the wall spans the full width."
+        },
+        {
+          "name": "mark",
+          "scope": "{ item: LogoItem; index: number }",
+          "notes": "One cell's mark, replacing the image built from the item — for a mark that owns its own theming (a per-theme asset swap, a silhouette filter). The slotted content carries its own alternative text."
+        }
+      ],
+      "purpose": "The customer-proof band of a marketing page: a responsive grid of company marks, optionally linked, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for. The marks rest at 60% opacity, so the wall reads as the evidence behind the page's own words rather than as twelve things competing with them; a linked mark comes up to full strength on hover and focus. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge — and the wall narrows from six columns to four to sit in half the width.",
+      "useWhen": [
+        "To show who already uses the product, as the proof band under a hero or section.",
+        "Wherever a set of partner, customer or certification marks is the message.",
+        "When the marks are recognisable enough that names are unnecessary.",
+        "To set one customer's statement beside the crowd that backs it, by filling `aside` with a `quote`."
+      ],
+      "avoidWhen": [
+        "For a measured claim rather than a set of names → use `big-numbers`.",
+        "For one customer's statement → use `quote`.",
+        "For a single brand mark, such as the product's own → use `brand`.",
+        "For a grid of described features rather than marks → use `feature-card`."
+      ],
+      "related": [
+        "quote` — one named customer's statement; the wall shows many without words.",
+        "big-numbers` — the numeric form of the same proof band.",
+        "brand` — the product's own mark, not a customer's."
+      ],
+      "bestPractices": [
+        "Supply marks that read on the page's own surface. The component applies no colour filter — only a uniform opacity — so a mark that only works on one theme will not work on both; ship a mark that does, rather than inverting it. When the marks come from a registry that already places them per theme, render them through the `mark` slot and keep `items` as the list they are drawn from.",
+        "Give every mark a real `alt` — the company name. The wall is a list of who uses the product, and that list should be readable without seeing it.",
+        "Set `ariaLabel` so the group announces its purpose (\"Customers using Azion\") instead of reading as an unnamed list.",
+        "Keep the marks to one visual weight. A wall mixing wordmarks and full lockups reads as inconsistent no matter how the grid is set.",
+        "Link a mark with `href` only when there is somewhere worth going, such as a case study.",
+        "Put one statement in `aside`, not a second grid. The band's argument is *many customers, one of them talking*; two things of equal weight leave a reader with neither.",
+        "Give the wall eight or twelve marks when `aside` is filled — it is four columns wide there — so the last row is full rather than ragged."
+      ]
+    },
     "breadcrumb": {
       "import": "@aziontech/webkit/breadcrumb",
       "target": "./src/components/navigation/breadcrumb/index.js",
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index d69e67e99..d3f5a6094 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -279,6 +279,7 @@
     "./sidebar-group": "./src/components/layout/sidebar/sidebar-group.vue",
     "./sidebar-header": "./src/components/layout/sidebar/sidebar-header.vue",
     "./sidebar-footer": "./src/components/layout/sidebar/sidebar-footer.vue",
+    "./logo-wall": "./src/components/marketing/logo-wall/logo-wall.vue",
     "./breadcrumb": "./src/components/navigation/breadcrumb/index.js",
     "./breadcrumb-item": "./src/components/navigation/breadcrumb-item/breadcrumb-item.vue",
     "./link": "./src/components/navigation/link/link.vue",
diff --git a/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts b/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
new file mode 100644
index 000000000..8b3abb14f
--- /dev/null
+++ b/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
@@ -0,0 +1,169 @@
+import { render } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+
+import { expectNoA11yViolations } from '../../../test/axe'
+import LogoWall from './logo-wall.vue'
+
+const TESTID = 'marketing-logo-wall'
+
+const items = [
+  { src: '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/logos/northwind.svg', alt: 'Northwind' },
+  { src: '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/logos/contoso.svg', alt: 'Contoso', href: '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/customers/contoso' },
+  { src: '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/logos/fabrikam.svg', alt: 'Fabrikam' }
+]
+
+describe('LogoWall', () => {
+  it('renders the wall under the default testid', () => {
+    const { getByTestId } = render(LogoWall, { props: { items } })
+
+    expect(getByTestId(TESTID)).toBeInTheDocument()
+  })
+
+  it('lets a consumer data-testid win over the fallback', () => {
+    const { getByTestId, queryByTestId } = render(LogoWall, {
+      props: { items },
+      attrs: { 'data-testid': 'customer-proof' }
+    })
+
+    expect(getByTestId('customer-proof')).toBeInTheDocument()
+    expect(queryByTestId(TESTID)).toBeNull()
+  })
+
+  it('renders one list item per mark', () => {
+    const { container } = render(LogoWall, { props: { items } })
+
+    expect(container.querySelectorAll('ul > li')).toHaveLength(items.length)
+  })
+
+  it('renders every mark as an image carrying its src and alt', () => {
+    const { getByAltText, container } = render(LogoWall, { props: { items } })
+
+    expect(container.querySelectorAll('img')).toHaveLength(items.length)
+
+    for (const item of items) {
+      expect(getByAltText(item.alt)).toHaveAttribute('src', item.src)
+    }
+  })
+
+  it('wraps a mark that carries an href in an anchor to that destination', () => {
+    const { getByAltText } = render(LogoWall, { props: { items } })
+    const anchor = getByAltText('Contoso').closest('a')
+
+    expect(anchor).not.toBeNull()
+    expect(anchor).toHaveAttribute('href', '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/customers/contoso')
+  })
+
+  it('renders no anchor for a mark without an href', () => {
+    const { getByAltText, container } = render(LogoWall, { props: { items } })
+
+    expect(getByAltText('Northwind').closest('a')).toBeNull()
+    expect(container.querySelectorAll('a')).toHaveLength(1)
+  })
+
+  it('names the group with ariaLabel', () => {
+    const { getByTestId, getByRole } = render(LogoWall, {
+      props: { items, ariaLabel: 'Customers building on Azion' }
+    })
+
+    expect(getByTestId(TESTID)).toHaveAttribute('aria-label', 'Customers building on Azion')
+    expect(getByRole('region', { name: 'Customers building on Azion' })).toBeInTheDocument()
+  })
+
+  it('carries no aria-label when ariaLabel is unset', () => {
+    const { getByTestId } = render(LogoWall, { props: { items } })
+
+    expect(getByTestId(TESTID)).not.toHaveAttribute('aria-label')
+  })
+
+  it('renders no list when items is empty', () => {
+    const { getByTestId, container } = render(LogoWall, { props: { items: [] } })
+
+    expect(getByTestId(TESTID)).toBeInTheDocument()
+    expect(container.querySelector('ul')).toBeNull()
+  })
+
+  it('renders no list when items is omitted', () => {
+    const { container } = render(LogoWall)
+
+    expect(container.querySelector('ul')).toBeNull()
+  })
+
+  it('forwards a consumer class onto the root', () => {
+    const { getByTestId } = render(LogoWall, {
+      props: { items },
+      attrs: { class: 'max-w-(--container-4xl)' }
+    })
+
+    const root = getByTestId(TESTID)
+    expect(root.tagName).toBe('SECTION')
+    expect(root.className).toContain('max-w-(--container-4xl)')
+  })
+
+  it('renders the mark slot in place of the image built from the item', () => {
+    const { container, queryByAltText, getByAltText } = render(LogoWall, {
+      props: { items },
+      slots: { mark: '<img src="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/registry/mark.svg" :alt="params.item.alt + \' mark\'" />' }
+    })
+
+    expect(container.querySelectorAll('img')).toHaveLength(items.length)
+    expect(queryByAltText('Northwind')).toBeNull()
+    expect(getByAltText('Northwind mark')).toHaveAttribute('src', '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/registry/mark.svg')
+  })
+
+  it('keeps a slotted mark inside the anchor when the item carries an href', () => {
+    const { getByAltText } = render(LogoWall, {
+      props: { items },
+      slots: { mark: '<img src="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/registry/mark.svg" :alt="params.item.alt + \' mark\'" />' }
+    })
+
+    expect(getByAltText('Contoso mark').closest('a')).toHaveAttribute('href', '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/customers/contoso')
+  })
+
+  it('carries no data-aside when the aside slot is empty', () => {
+    const { getByTestId } = render(LogoWall, { props: { items } })
+
+    expect(getByTestId(TESTID)).not.toHaveAttribute('data-aside')
+  })
+
+  it('marks the band with data-aside and renders the slot beside the wall', () => {
+    const { getByTestId, getByText } = render(LogoWall, {
+      props: { items },
+      slots: { aside: '<blockquote>Azion transformed our operations.</blockquote>' }
+    })
+
+    const root = getByTestId(TESTID)
+    expect(root).toHaveAttribute('data-aside', 'true')
+    expect(getByText('Azion transformed our operations.')).toBeInTheDocument()
+    expect(root.querySelector('ul')).not.toBeNull()
+  })
+
+  it('renders the aside even when there are no marks to show', () => {
+    const { getByTestId, getByText } = render(LogoWall, {
+      props: { items: [] },
+      slots: { aside: '<blockquote>One customer still speaks.</blockquote>' }
+    })
+
+    expect(getByTestId(TESTID).querySelector('ul')).toBeNull()
+    expect(getByText('One customer still speaks.')).toBeInTheDocument()
+  })
+
+  it('has no a11y violations with a full wall', async () => {
+    const { container } = render(LogoWall, {
+      props: { items, ariaLabel: 'Customers building on Azion' }
+    })
+
+    await expectNoA11yViolations(container)
+  })
+
+  it('has no a11y violations with the aside filled', async () => {
+    const { container } = render(LogoWall, {
+      props: { items, ariaLabel: 'Customers building on Azion' },
+      slots: {
+        aside:
+          '<figure><blockquote>Azion transformed our operations.</blockquote><figcaption>Mateus Leonardi, CTO at Contoso</figcaption></figure>'
+      }
+    })
+
+    await expectNoA11yViolations(container)
+  })
+})
diff --git a/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue b/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue
new file mode 100644
index 000000000..205787715
--- /dev/null
+++ b/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+
+  defineOptions({
+    name: 'LogoWall',
+    inheritAttrs: false
+  })
+
+  /** One company mark in the wall, optionally linked. */
+  export type LogoItem = {
+    /** URL of the mark rendered in the cell. */
+    src: string
+    /** Alternative text naming the company the mark belongs to. */
+    alt: string
+    /** Destination the mark links to, when there is somewhere worth going. */
+    href?: string
+  }
+
+  interface Props {
+    /** The marks rendered in the grid, in order; each item is `{ src, alt, href? }` where `src` is the mark's URL, `alt` names the company, and `href` links the mark when there is somewhere to go. */
+    items?: LogoItem[]
+    /** Accessible name for the group of marks, announced instead of an unnamed list. */
+    ariaLabel?: string
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    items: () => [],
+    ariaLabel: ''
+  })
+
+  const slots = defineSlots<{
+    /** Content set beside the wall from `lg` up, such as one customer's quotation. */
+    aside?(): unknown
+    /** One cell's mark, replacing the image built from the item — for a mark that owns its own theming; it carries its own alternative text. */
+    mark?(props: { item: LogoItem; index: number }): unknown
+  }>()
+
+  const attrs = useAttrs()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? 'marketing-logo-wall'
+  )
+
+  const hasItems = computed(() => props.items.length > 0)
+
+  const hasAside = computed(() => Boolean(slots.aside))
+</script>
+
+<template>
+  <section
+    v-bind="$attrs"
+    class="group grid gap-(--spacing-xxl) data-[aside]:lg:grid-cols-2"
+    :data-testid="testId"
+    :data-aside="hasAside || null"
+    :aria-label="ariaLabel || undefined"
+  >
+    <ul
+      v-if="hasItems"
+      class="m-0 grid list-none grid-cols-2 gap-(--spacing-xl) p-0 sm:grid-cols-3 lg:grid-cols-6 group-data-[aside]:lg:grid-cols-4"
+    >
+      <li
+        v-for="(item, index) in items"
+        :key="`${item.alt}-${index}`"
+        class="flex items-center justify-center"
+      >
+        <a
+          v-if="item.href"
+          :href="item.href"
+          class="flex items-center justify-center rounded-(--shape-elements) opacity-60 transition-opacity duration-150 ease-out hover:opacity-100 focus-visible:opacity-100 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
+            name="mark"
+            :item="item"
+            :index="index"
+          >
+            <img
+              :src="item.src"
+              :alt="item.alt"
+              loading="lazy"
+              decoding="async"
+              class="h-8 w-auto max-w-full object-contain"
+            />
+          </slot>
+        </a>
+        <span
+          v-else
+          class="flex items-center justify-center opacity-60"
+        >
+          <slot
+            name="mark"
+            :item="item"
+            :index="index"
+          >
+            <img
+              :src="item.src"
+              :alt="item.alt"
+              loading="lazy"
+              decoding="async"
+              class="h-8 w-auto max-w-full object-contain"
+            />
+          </slot>
+        </span>
+      </li>
+    </ul>
+
+    <div
+      v-if="hasAside"
+      class="flex min-w-0 flex-col"
+    >
+      <slot name="aside" />
+    </div>
+  </section>
+</template>

From ed5233f877e4322b42201a64815367ceb68c451c Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Mon, 28 Sep 2026 07:23:42 -0300
Subject: [PATCH 2/4] feat(webkit): build logo-wall on card-grid frame cells
 with linked story cells

---
 .specs/logo-wall.md                           | 105 ++++++-----
 .../marketing/logo-wall/LogoWall.stories.js   | 173 ++++++++++--------
 packages/webkit/.size-limit.json              |   2 +-
 packages/webkit/catalog.json                  |  43 +++--
 .../marketing/logo-wall/logo-wall.test.ts     |  58 +++++-
 .../marketing/logo-wall/logo-wall.vue         | 128 ++++++++-----
 6 files changed, 325 insertions(+), 184 deletions(-)

diff --git a/.specs/logo-wall.md b/.specs/logo-wall.md
index 720730ce4..3a8c387b7 100644
--- a/.specs/logo-wall.md
+++ b/.specs/logo-wall.md
@@ -3,23 +3,23 @@ name: logo-wall
 category: marketing
 structure: monolithic
 status: implemented
-spec_version: 1
-checksum: 0000a7ede0732472f868b87a74e702a8ea87dbaee838fdc6a6971eb6c7b29f34
+spec_version: 2
+checksum: 404cd79cd5aff08c54fcecef08da53334c4f81cf22ea4518b49fc4c2846f8a41
 created: 2026-09-22
-last_updated: 2026-09-24
+last_updated: 2026-09-26
 ---
 
 # Logo Wall — Component Spec
 
 ## Purpose
 
-The customer-proof band of a marketing page: a responsive grid of company marks, optionally linked, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for.
+The customer-proof band of a marketing page: a framed grid of square cells, one company mark to a cell, each one optionally linked to that customer's story, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for.
 
-The marks rest at 60% opacity, so the wall reads as the evidence behind the page's own words rather than as twelve things competing with them; a linked mark comes up to full strength on hover and focus. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge — and the wall narrows from six columns to four to sit in half the width.
+The cells are `card-grid` frame cells, so the wall draws the same hairlines and registration marks as every other framed band on the page. A linked cell is the whole square: on hover and focus a wash rises behind it, the mark lifts, and a `Read story` label slides in under it, so the wall doubles as the way into the case studies. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge on a padded canvas panel — and the wall narrows from six columns to three to sit in half the width at the same cell size.
 
 ## When to use
 
-- To show who already uses the product, as the proof band under a hero or section.
+- To show who already uses the product, as the proof band under a hero or section, with each mark leading to that customer's success case.
 - Wherever a set of partner, customer or certification marks is the message.
 - When the marks are recognisable enough that names are unnecessary.
 - To set one customer's statement beside the crowd that backs it, by filling `aside` with a `quote`.
@@ -29,23 +29,26 @@ The marks rest at 60% opacity, so the wall reads as the evidence behind the page
 - For a measured claim rather than a set of names → use `big-numbers`.
 - For one customer's statement → use `quote`.
 - For a single brand mark, such as the product's own → use `brand`.
-- For a grid of described features rather than marks → use `feature-card`.
+- For a grid of described features rather than marks → use `topic` in a `card-grid`.
+- For a moving strip of many small marks, such as a tool stack → use `ticker`.
 
 ## Related
 
+- `card-grid` — the frame register the wall is built on; its cells draw the rules and marks.
 - `quote` — one named customer's statement; the wall shows many without words.
 - `big-numbers` — the numeric form of the same proof band.
 - `brand` — the product's own mark, not a customer's.
 
 ## Best practices
 
-- Supply marks that read on the page's own surface. The component applies no colour filter — only a uniform opacity — so a mark that only works on one theme will not work on both; ship a mark that does, rather than inverting it. When the marks come from a registry that already places them per theme, render them through the `mark` slot and keep `items` as the list they are drawn from.
-- Give every mark a real `alt` — the company name. The wall is a list of who uses the product, and that list should be readable without seeing it.
-- Set `ariaLabel` so the group announces its purpose ("Customers using Azion") instead of reading as an unnamed list.
-- Keep the marks to one visual weight. A wall mixing wordmarks and full lockups reads as inconsistent no matter how the grid is set.
-- Link a mark with `href` only when there is somewhere worth going, such as a case study.
+- Place the wall inside a `frame-box` (in a `section-module`, as every framed band is). The grid is `card-grid`'s `flush` frame: the surrounding frame draws the outer rules and the cells lay their right and bottom rules onto it.
+- Supply marks that read on the page's own surface. The component applies no colour filter, so a mark that only works on one theme will not work on both; brand-colour marks read on either. When the marks come from a registry that already places them per theme, render them through the `mark` slot and keep `items` as the list they are drawn from.
+- Set `shape: 'compact'` on a mark that is close to square (a roundel, a monogram) so it sits taller than the wordmarks beside it and all of them read at one visual weight.
+- Give every mark a real `alt` — the company name. A linked cell is announced as `linkLabel`, then that name ("Read story, Magalu").
+- Set `ariaLabel` so the group announces its purpose ("Clients running on Azion") instead of reading as an unnamed region.
+- Link a mark with `href` only when there is somewhere worth going, such as a case study; a wall of links to nowhere costs a reader a tab stop per cell. In an app with a client-side router, handle `item-click`: call `event.preventDefault()` and push `item.href`.
 - Put one statement in `aside`, not a second grid. The band's argument is *many customers, one of them talking*; two things of equal weight leave a reader with neither.
-- Give the wall eight or twelve marks when `aside` is filled — it is four columns wide there — so the last row is full rather than ragged.
+- Give the wall a multiple of three marks when `aside` is filled and a multiple of six when it is not, so the last row is full rather than ragged. Six beside a quote is the Web Apps band.
 
 ## Usage
 
@@ -57,19 +60,24 @@ import Quote from '@aziontech/webkit/quote'
 
 <template>
   <LogoWall
-    aria-label="Customers building on Azion"
+    aria-label="Clients running on Azion"
     :items="[
-      { src: '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/logos/northwind.svg', alt: 'Northwind' },
-      { src: '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/logos/contoso.svg', alt: 'Contoso', href: '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/customers/contoso' },
-      { src: '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/logos/fabrikam.svg', alt: 'Fabrikam' },
-      { src: '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/logos/tailspin.svg', alt: 'Tailspin' }
+      { src: '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/logos/magalu.svg', alt: 'Magalu', href: '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/customers/magalu' },
+      { src: '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/logos/ifood.svg', alt: 'iFood', href: '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/customers/ifood', shape: 'compact' },
+      { src: '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/logos/stone.svg', alt: 'Stone', href: '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/customers/stone' },
+      { src: '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/logos/netshoes.svg', alt: 'Netshoes', href: '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/customers/netshoes' },
+      { src: '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/logos/nzn.svg', alt: 'NZN', href: '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/customers/nzn' },
+      { src: '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/logos/itau.svg', alt: 'Itaú', href: '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/customers/itau', shape: 'compact' }
     ]"
   >
     <template #aside>
       <Quote
-        logo="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/logos/contoso.svg"
+        kind="signed"
+        logo="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/logos/herospark.svg"
+        logo-alt="HeroSpark"
         text="Azion transformed our operations, reducing costs and improving performance."
-        source="Mateus Leonardi, CTO at Contoso"
+        name="Mateus Leonardi"
+        job-title="CTO at HeroSpark"
       />
     </template>
   </LogoWall>
@@ -80,41 +88,56 @@ import Quote from '@aziontech/webkit/quote'
 
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
-| `items` | `LogoItem[]` | `[]` | false | The marks rendered in the grid, in order; each item is `{ src, alt, href? }` where `src` is the mark's URL, `alt` names the company, and `href` links the mark when there is somewhere to go. |
-| `ariaLabel` | `string` | `''` | false | Accessible name for the group of marks, announced instead of an unnamed list. |
+| `items` | `LogoItem[]` | `[]` | false | The marks rendered in the grid, in order; each item is `{ src, alt, href?, shape? }` where `src` is the mark's URL, `alt` names the company, `href` links the cell to that customer's story, and `shape` sets a near-square mark taller than a wordmark. |
+| `ariaLabel` | `string` | `''` | false | Accessible name for the group of marks, announced instead of an unnamed region. |
+| `linkLabel` | `string` | `'Read story'` | false | Words revealed under a linked mark on hover and focus, and the lead of that link's accessible name. |
+
+`LogoItem` is `{ src: string; alt: string; href?: string; shape?: LogoShape }`, and `LogoShape` is `'wide' | 'compact'` (`wide` when omitted). Both types are exported.
 
 ## Events
 
-| _none_ | — | — |
+| Event | Payload | Notes |
+|---|---|---|
+| `item-click` | `(event: MouseEvent, item: LogoItem)` | Fired when a linked cell is activated; `item` is the matched `items` entry. The anchor still navigates unless the handler calls `event.preventDefault()`, which is how a client-side router takes over. |
 
 ## Slots
 
 | Slot | Scope | Notes |
 |---|---|---|
-| `aside` | — | Content set beside the wall from `lg` up, such as one customer's `quote`; when it is empty the wall spans the full width. |
-| `mark` | `{ item: LogoItem; index: number }` | One cell's mark, replacing the image built from the item — for a mark that owns its own theming (a per-theme asset swap, a silhouette filter). The slotted content carries its own alternative text. |
+| `aside` | — | Content set beside the wall from `lg` up, such as one customer's `quote`, on a `--bg-canvas` panel padded by `--spacing-xl`; its child stretches to fill the panel. When it is empty the wall spans the full width. |
+| `mark` | `{ item: LogoItem; index: number }` | One cell's mark, replacing the image built from the item — for a mark that owns its own theming (a per-theme asset swap, a silhouette filter). The slotted content carries its own alternative text and sits in a 28px-tall box; on a linked cell it lifts with the built image's motion. |
 
 ## States
 
-- Visual states: every mark rests at 60% opacity; `hover` / `focus-visible` on a mark that carries an `href` is the only thing that lifts it to full
-- `data-aside` is present when the `aside` slot is filled, and is what splits the band into two columns from `lg` up and narrows the wall from six columns to four
-- A cell's mark is the `mark` slot's content when it is filled, and the image built from the item otherwise; either way it rests at the same 60% opacity and, with an `href`, lifts on `hover` / `focus-visible`
+- Visual states: an unlinked cell is static; a linked cell on `hover` / `focus-visible` raises a `--bg-hover` wash behind the whole square, lifts the mark by `--spacing-sm`, and fades the `linkLabel` in beneath it with a trailing arrow
+- `data-aside` is present when the `aside` slot is filled; from `lg` up it splits the band into two columns and narrows the wall from six columns to three, so a cell is the same size in both layouts
+- Columns: two below `sm`, three from `sm`, six from `lg` (three with `aside`)
+- `data-shape` on the built image is `wide` or `compact`; `compact` sets the mark 28px tall instead of 20px
+- A cell's mark is the `mark` slot's content when it is filled, and the image built from the item otherwise
 - Empty: when `items` is empty the wall renders no grid, so a page with no customers to name shows nothing rather than an empty frame — an `aside` given without items still renders, since a statement stands on its own
 
 ## Motion & Animations
 
 | Trigger | Animation / Transition | Token (see `.claude/docs/DESIGN.md` § Animations) | Reduced-motion fallback |
 |---|---|---|---|
-| hover on a linked mark | `transition-opacity duration-150 ease-out` | inline (matches catalog) | `motion-reduce:transition-none` |
+| hover / focus on a linked cell — the wash | `before:transition-opacity before:duration-moderate-01 before:ease-productive-entrance` | `duration-moderate-01` + `ease-productive-entrance` | `motion-reduce:before:transition-none` |
+| hover / focus on a linked cell — the mark lift | `transition-[translate] duration-moderate-01 ease-productive-entrance` | `duration-moderate-01` + `ease-productive-entrance` | `motion-reduce:transition-none` |
+| hover / focus on a linked cell — the label reveal | `transition-[opacity,translate] duration-moderate-01 ease-productive-entrance` | `duration-moderate-01` + `ease-productive-entrance` | `motion-reduce:transition-none` |
 
 ## Tokens
 
 | Region | Token (DESIGN.md) |
 |---|---|
-| spacing (grid gap) | `var(--spacing-xl)` |
-| spacing (wall ↔ aside gap) | `var(--spacing-xxl)` |
+| cell fill | `var(--bg-surface)` (via `card-grid` cell `surface`) |
+| cell rules + marks | `var(--border-default)` (via `card-grid` frame) |
+| hover wash | `var(--bg-hover)` |
+| mark lift | `var(--spacing-sm)` |
+| cell inline padding | `var(--spacing-md)` |
+| label | `text-overline-md`, `var(--text-default)` |
+| label ↔ mark gap | `var(--spacing-xs)` |
+| label ↔ arrow gap | `var(--spacing-xxs)` |
+| aside panel | `var(--bg-canvas)`, padded by `var(--spacing-xl)` |
 | ring | `var(--ring-color)` |
-| focus ring offset | `var(--bg-canvas)` |
 
 ## Theme gaps
 
@@ -124,18 +147,18 @@ import Quote from '@aziontech/webkit/quote'
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: a linked mark carries `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`; an unlinked mark is not focusable.
-- Keyboard map: `Tab` reaches each linked mark in DOM order; unlinked marks are skipped. No arrow-key model — this is a list, not a composite widget.
-- ARIA: the grid is a `<ul>` of `<li>` so the count is announced, named by `ariaLabel` when set; each mark's `alt` carries the company name, so the wall is readable without sight. A mark supplied through the `mark` slot owns that name itself — the component cannot add it.
-- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons): the marks are consumer-supplied images held at 60% opacity. WCAG 1.4.11 exempts logotypes from the contrast minimum, and the component adds no colour filter, so a mark must still carry its own legibility against `var(--bg-canvas)` at that strength. Anything in `aside` is ordinary content and is bound by the minimum in full.
-- `motion-reduce:transition-none` on the linked-mark hover transition. The band never auto-scrolls, so WCAG 2.2.2 (pause, stop, hide) does not apply.
-- Touch target ≥40×40 px — a linked mark's anchor spans its full grid cell.
+- Visible focus: a linked cell carries `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-inset`, inset so the ring stays inside the cell's rules; focus also lifts the mark and reveals the label, exactly as hover does. An unlinked cell is not focusable.
+- Keyboard map: `Tab` reaches each linked cell in DOM order; `Enter` follows it. Unlinked cells are skipped. No arrow-key model — this is a list, not a composite widget.
+- ARIA: the grid is `role="list"` of `role="listitem"` cells so the count is announced, inside a `section` named by `ariaLabel` when set. A linked cell's name is `"<linkLabel>, <alt>"`; the visible label is `aria-hidden` so it is not read twice. An unlinked cell's `alt` carries the company name. A mark supplied through the `mark` slot owns that name itself on an unlinked cell — the component cannot add it.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons): the label is `--text-default` on `--bg-hover` over `--bg-surface`. The marks are consumer-supplied images; WCAG 1.4.11 exempts logotypes from the contrast minimum, and the component adds no colour filter, so a mark must carry its own legibility against `var(--bg-surface)`. Anything in `aside` is ordinary content and is bound by the minimum in full.
+- `motion-reduce:transition-none` / `motion-reduce:before:transition-none` on every hover transition. The band never auto-scrolls, so WCAG 2.2.2 (pause, stop, hide) does not apply.
+- Touch target ≥40×40 px — a linked cell's anchor is its whole square.
 
 ## Stories (Storybook)
 
-- Default
-- Linked — marks carrying an `href` (justified: the hover, focus ring and anchor semantics only exist on linked marks, and the default args have none)
-- WithAside — the wall paired with a `quote` on the end edge (justified: the two-column split and the four-column wall exist only when the `aside` slot is filled, and no arg can produce them)
+- Default — six linked marks beside a `quote`, the Web Apps band (justified: this is the composition the component exists for, and the `aside` split, the three-column wall and the canvas panel only exist when the slot is filled, which no arg can produce)
+- Wall — the same marks with no `aside`, six to a row (justified: the full-width six-column wall is the other layout the component has)
+- Unlinked — marks with no `href` (justified: the static cell, with no wash, lift, label or tab stop, only exists without an `href`, and every other story links its marks)
 
 ## Constraints — DO NOT
 
diff --git a/apps/storybook/src/stories/components/marketing/logo-wall/LogoWall.stories.js b/apps/storybook/src/stories/components/marketing/logo-wall/LogoWall.stories.js
index c0afe375b..67f114228 100644
--- a/apps/storybook/src/stories/components/marketing/logo-wall/LogoWall.stories.js
+++ b/apps/storybook/src/stories/components/marketing/logo-wall/LogoWall.stories.js
@@ -1,46 +1,73 @@
+import FrameBox from '@aziontech/webkit/frame-box'
 import LogoWall from '@aziontech/webkit/logo-wall'
 import Quote from '@aziontech/webkit/quote'
 
 import { toSfc } from '../../../_shared/story-source'
 
-const IMPORT = "import LogoWall from '@aziontech/webkit/logo-wall'"
+const IMPORTS = [
+  "import FrameBox from '@aziontech/webkit/frame-box'",
+  "import LogoWall from '@aziontech/webkit/logo-wall'"
+]
 
-const ASIDE_IMPORTS = [IMPORT, "import Quote from '@aziontech/webkit/quote'"]
+const ASIDE_IMPORTS = [...IMPORTS, "import Quote from '@aziontech/webkit/quote'"]
 
-const ARIA_LABEL = 'Customers building on Azion'
+const ARIA_LABEL = 'Clients running on Azion'
 
 const CLIENTS = [
-  ['nzn', 'NZN'],
-  ['axur', 'Axur'],
-  ['radware', 'Radware'],
-  ['arezzo', 'Arezzo'],
-  ['contabilizei', 'Contabilizei'],
-  ['magalu', 'Magalu'],
-  ['fourbank', 'Fourbank'],
-  ['herospark', 'HeroSpark'],
-  ['crefisa', 'Crefisa'],
-  ['netshoes', 'Netshoes'],
-  ['dafiti', 'Dafiti'],
-  ['global-fashion-group', 'Global Fashion Group']
+  { key: 'magalu', alt: 'Magalu' },
+  { key: 'ifood', alt: 'iFood', shape: 'compact' },
+  { key: 'stone', alt: 'Stone' },
+  { key: 'netshoes', alt: 'Netshoes' },
+  { key: 'nzn', alt: 'NZN' },
+  { key: 'itau', alt: 'Itaú', shape: 'compact' }
 ]
 
-const ITEMS = CLIENTS.map(([key, alt]) => ({ src: `/clients/${key}.svg`, alt }))
-
-const LINKED_ITEMS = CLIENTS.map(([key, alt]) => ({
-  src: `/clients/${key}.svg`,
+const markFor = ({ key, alt, shape }) => ({
+  src: `/clients/color/${key}.svg`,
   alt,
-  href: `https://www.azion.com/en/success-case/${key}/`
+  ...(shape ? { shape } : {})
+})
+
+const LINKED_ITEMS = CLIENTS.map((client) => ({
+  ...markFor(client),
+  href: `https://www.azion.com/en/success-case/${client.key}/`
 }))
 
+const UNLINKED_ITEMS = CLIENTS.map(markFor)
+
+const WALL_ITEMS = [...LINKED_ITEMS, ...LINKED_ITEMS]
+
 // The snippet has to be paste-and-run, so the marks are spelled out rather than mapped.
 const itemsMarkup = (items) =>
   items
     .map((item) => {
       const href = item.href ? `, href: '${item.href}'` : ''
-      return `    { src: '${item.src}', alt: '${item.alt}'${href} }`
+      const shape = item.shape ? `, shape: '${item.shape}'` : ''
+      return `      { src: '${item.src}', alt: '${item.alt}'${href}${shape} }`
     })
     .join(',\n')
 
+const wallMarkup = (items, inner = '') => {
+  const open = `  <LogoWall
+    aria-label="${ARIA_LABEL}"
+    :items="[
+${itemsMarkup(items)}
+    ]"`
+  const body = inner ? `${open}\n  >\n${inner}\n  </LogoWall>` : `${open}\n  />`
+  return `<FrameBox>\n${body}\n</FrameBox>`
+}
+
+const QUOTE_MARKUP = `    <template #aside>
+      <Quote
+        kind="signed"
+        logo="/clients/color/herospark.svg"
+        logo-alt="HeroSpark"
+        text="Azion transformed our operations, reducing costs and improving performance while freeing 200+ monthly hours for strategic development."
+        name="Mateus Leonardi"
+        job-title="CTO at HeroSpark"
+      />
+    </template>`
+
 /** @type {import('@storybook/vue3').Meta<typeof LogoWall>} */
 const meta = {
   title: 'Components/Marketing/LogoWall',
@@ -56,7 +83,7 @@ const meta = {
     docs: {
       description: {
         component:
-          'The customer-proof band of a marketing page: a responsive grid of company marks, optionally linked, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for.'
+          "The customer-proof band of a marketing page: a framed grid of square cells, one company mark to a cell, each one optionally linked to that customer's story, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for."
       },
       canvas: { sourceState: 'shown' }
     }
@@ -65,7 +92,7 @@ const meta = {
     items: {
       control: 'object',
       description:
-        "The marks rendered in the grid, in order; each item is `{ src, alt, href? }` where `src` is the mark's URL, `alt` names the company, and `href` links the mark when there is somewhere to go.",
+        "The marks rendered in the grid, in order; each item is `{ src, alt, href?, shape? }` where `src` is the mark's URL, `alt` names the company, `href` links the cell to that customer's story, and `shape` sets a near-square mark taller than a wordmark.",
       table: {
         category: 'props',
         type: { summary: 'LogoItem[]' },
@@ -74,110 +101,100 @@ const meta = {
     },
     ariaLabel: {
       control: 'text',
-      description: 'Accessible name for the group of marks, announced instead of an unnamed list.',
+      description: 'Accessible name for the group of marks, announced instead of an unnamed region.',
       table: {
         category: 'props',
         type: { summary: 'string' },
         defaultValue: { summary: "''" }
       }
+    },
+    linkLabel: {
+      control: 'text',
+      description:
+        "Words revealed under a linked mark on hover and focus, and the lead of that link's accessible name.",
+      table: {
+        category: 'props',
+        type: { summary: 'string' },
+        defaultValue: { summary: "'Read story'" }
+      }
+    },
+    onItemClick: {
+      action: 'item-click',
+      description:
+        'Fired when a linked cell is activated; `item` is the matched `items` entry. Call `event.preventDefault()` to hand the navigation to a client-side router.',
+      table: {
+        category: 'events',
+        type: { summary: '(event: MouseEvent, item: LogoItem)' }
+      }
     }
   },
   args: {
-    items: ITEMS,
-    ariaLabel: ARIA_LABEL
+    items: LINKED_ITEMS,
+    ariaLabel: ARIA_LABEL,
+    linkLabel: 'Read story'
   }
 }
 
 export default meta
 
 const Template = (args) => ({
-  components: { LogoWall },
+  components: { FrameBox, LogoWall },
   setup() {
     return { args }
   },
-  template: '<LogoWall v-bind="args" />'
+  template: '<FrameBox><LogoWall v-bind="args" /></FrameBox>'
 })
 
-const DEFAULT_MARKUP = `<LogoWall
-  aria-label="${ARIA_LABEL}"
-  :items="[
-${itemsMarkup(ITEMS)}
-  ]"
-/>`
-
 /** @type {import('@storybook/vue3').StoryObj<typeof LogoWall>} */
 export const Default = {
-  render: Template,
+  render: (args) => ({
+    components: { FrameBox, LogoWall, Quote },
+    setup() {
+      return { args }
+    },
+    template: `<FrameBox><LogoWall v-bind="args">\n${QUOTE_MARKUP}\n</LogoWall></FrameBox>`
+  }),
   parameters: {
     docs: {
       description: {
         story:
-          'Twelve real customer marks, six to a row, resting at 60% opacity so the wall reads as the evidence behind the page rather than as twelve things competing with it. These are the white single-ink files the marks ship for a dark surface, which is what the component wants: it applies no colour filter, so the mark itself has to carry its legibility — flip the toolbar to the light theme and they disappear, which is the cost of a one-theme asset rather than a bug in the band. Nothing here is focusable: without an `href` a cell is an image, and `Tab` walks straight past the wall. Empty the `items` control and the band renders nothing at all rather than an empty frame.'
+          'The Web Apps band: six linked customer marks on the start edge, one of those customers speaking on the end edge. Each cell is a `card-grid` frame cell and a whole-square link to that customer’s success case — hover or `Tab` to one and a wash rises behind it, the mark lifts, and `Read story` slides in underneath. From `lg` up the band splits and the wall sits three to a row in half the width; below it the quote follows the wall. iFood and Itaú carry `shape: \'compact\'`, which sets a near-square mark taller so it reads at the same weight as the wordmarks. The wall assumes a surrounding `frame-box` draws its outer rules, which is why the snippet includes one.'
       },
-      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+      source: { code: toSfc(ASIDE_IMPORTS, wallMarkup(LINKED_ITEMS, QUOTE_MARKUP)) }
     }
   }
 }
 
-const LINKED_MARKUP = `<LogoWall
-  aria-label="${ARIA_LABEL}"
-  :items="[
-${itemsMarkup(LINKED_ITEMS)}
-  ]"
-/>`
-
 /** @type {import('@storybook/vue3').StoryObj<typeof LogoWall>} */
-export const Linked = {
+export const Wall = {
   render: Template,
   args: {
-    items: LINKED_ITEMS
+    items: WALL_ITEMS
   },
   parameters: {
     docs: {
       description: {
         story:
-          'The same wall with every mark carrying an `href` to that customer’s success case, which is the only path to the anchor states: each cell becomes a link that comes up from 60% to full on hover and takes a visible focus ring, and `Tab` now reaches all twelve in DOM order. Link a mark only when there is somewhere worth going — a wall of links to nowhere costs a reader twelve tab stops and gives nothing back.'
+          'With nothing in `aside` the wall spans the full width, six to a row from `lg` — the same cell size as the three-column wall beside a quote, so the two layouts share one rhythm. Twelve marks fill two full rows; give the wall a multiple of six here so the last row is never ragged. Empty the `items` control and the band renders nothing rather than an empty frame.'
       },
-      source: { code: toSfc(IMPORT, LINKED_MARKUP) }
+      source: { code: toSfc(IMPORTS, wallMarkup(WALL_ITEMS)) }
     }
   }
 }
 
-const QUOTE_MARKUP = `  <template #aside>
-    <Quote
-      logo="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/clients/herospark.svg"
-      logo-alt="HeroSpark"
-      text="Azion transformed our operations, reducing costs and improving performance while freeing 200+ monthly hours for strategic development."
-      source="Mateus Leonardi, CTO at HeroSpark"
-    />
-  </template>`
-
-const ASIDE_MARKUP = `<LogoWall
-  aria-label="${ARIA_LABEL}"
-  :items="[
-${itemsMarkup(ITEMS)}
-  ]"
->
-${QUOTE_MARKUP}
-</LogoWall>`
-
 /** @type {import('@storybook/vue3').StoryObj<typeof LogoWall>} */
-export const WithAside = {
-  render: (args) => ({
-    components: { LogoWall, Quote },
-    setup() {
-      return { args }
-    },
-    template: `<LogoWall v-bind="args">\n${QUOTE_MARKUP}\n</LogoWall>`
-  }),
+export const Unlinked = {
+  render: Template,
+  args: {
+    items: UNLINKED_ITEMS
+  },
   parameters: {
-    controls: { disable: true },
     docs: {
       description: {
         story:
-          'Fill the `aside` slot and the band splits from `lg` up: the wall on the start edge, one of those twelve customers speaking on the end edge. The wall narrows from six columns to four so the marks still breathe in half the width — twelve fills three full rows, which is why no row is ragged. The marks stay at 60% while the quotation and its own mark sit at full strength, so the crowd reads as the evidence behind the sentence; below `lg` the two stack and the quotation follows the wall.'
+          'Without an `href` a cell is only its mark: no wash, no lift, no label, and no tab stop — `Tab` walks straight past the wall. Link a mark only when there is somewhere worth going; a wall of links to nowhere costs a reader a tab stop per cell and gives nothing back.'
       },
-      source: { code: toSfc(ASIDE_IMPORTS, ASIDE_MARKUP) }
+      source: { code: toSfc(IMPORTS, wallMarkup(UNLINKED_ITEMS)) }
     }
   }
 }
diff --git a/packages/webkit/.size-limit.json b/packages/webkit/.size-limit.json
index 4f27264af..1b5e6c9ed 100644
--- a/packages/webkit/.size-limit.json
+++ b/packages/webkit/.size-limit.json
@@ -137,7 +137,7 @@
   {
     "name": "logo-wall",
     "path": "src/components/marketing/logo-wall/logo-wall.vue",
-    "limit": "1 KB"
+    "limit": "3.75 KB"
   },
   {
     "name": "illustration",
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 20691ff59..a6b122fd0 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -9944,31 +9944,45 @@
           "type": "LogoItem[]",
           "default": "[]",
           "required": "false",
-          "doc": "The marks rendered in the grid, in order; each item is `{ src, alt, href? }` where `src` is the mark's URL, `alt` names the company, and `href` links the mark when there is somewhere to go."
+          "doc": "The marks rendered in the grid, in order; each item is `{ src, alt, href?, shape? }` where `src` is the mark's URL, `alt` names the company, `href` links the cell to that customer's story, and `shape` sets a near-square mark taller than a wordmark."
         },
         {
           "name": "ariaLabel",
           "type": "string",
           "default": "''",
           "required": "false",
-          "doc": "Accessible name for the group of marks, announced instead of an unnamed list."
+          "doc": "Accessible name for the group of marks, announced instead of an unnamed region."
+        },
+        {
+          "name": "linkLabel",
+          "type": "string",
+          "default": "'Read story'",
+          "required": "false",
+          "doc": "Words revealed under a linked mark on hover and focus, and the lead of that link's accessible name."
+        }
+      ],
+      "events": [
+        {
+          "name": "item-click",
+          "payload": "(event: MouseEvent, item: LogoItem)",
+          "notes": "Fired when a linked cell is activated; `item` is the matched `items` entry. The anchor still navigates unless the handler calls `event.preventDefault()`, which is how a client-side router takes over."
         }
       ],
       "slots": [
         {
           "name": "aside",
           "scope": "—",
-          "notes": "Content set beside the wall from `lg` up, such as one customer's `quote`; when it is empty the wall spans the full width."
+          "notes": "Content set beside the wall from `lg` up, such as one customer's `quote`, on a `--bg-canvas` panel padded by `--spacing-xl`; its child stretches to fill the panel. When it is empty the wall spans the full width."
         },
         {
           "name": "mark",
           "scope": "{ item: LogoItem; index: number }",
-          "notes": "One cell's mark, replacing the image built from the item — for a mark that owns its own theming (a per-theme asset swap, a silhouette filter). The slotted content carries its own alternative text."
+          "notes": "One cell's mark, replacing the image built from the item — for a mark that owns its own theming (a per-theme asset swap, a silhouette filter). The slotted content carries its own alternative text and sits in a 28px-tall box; on a linked cell it lifts with the built image's motion."
         }
       ],
-      "purpose": "The customer-proof band of a marketing page: a responsive grid of company marks, optionally linked, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for. The marks rest at 60% opacity, so the wall reads as the evidence behind the page's own words rather than as twelve things competing with them; a linked mark comes up to full strength on hover and focus. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge — and the wall narrows from six columns to four to sit in half the width.",
+      "purpose": "The customer-proof band of a marketing page: a framed grid of square cells, one company mark to a cell, each one optionally linked to that customer's story, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for. The cells are `card-grid` frame cells, so the wall draws the same hairlines and registration marks as every other framed band on the page. A linked cell is the whole square: on hover and focus a wash rises behind it, the mark lifts, and a `Read story` label slides in under it, so the wall doubles as the way into the case studies. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge on a padded canvas panel — and the wall narrows from six columns to three to sit in half the width at the same cell size.",
       "useWhen": [
-        "To show who already uses the product, as the proof band under a hero or section.",
+        "To show who already uses the product, as the proof band under a hero or section, with each mark leading to that customer's success case.",
         "Wherever a set of partner, customer or certification marks is the message.",
         "When the marks are recognisable enough that names are unnecessary.",
         "To set one customer's statement beside the crowd that backs it, by filling `aside` with a `quote`."
@@ -9977,21 +9991,24 @@
         "For a measured claim rather than a set of names → use `big-numbers`.",
         "For one customer's statement → use `quote`.",
         "For a single brand mark, such as the product's own → use `brand`.",
-        "For a grid of described features rather than marks → use `feature-card`."
+        "For a grid of described features rather than marks → use `topic` in a `card-grid`.",
+        "For a moving strip of many small marks, such as a tool stack → use `ticker`."
       ],
       "related": [
+        "card-grid` — the frame register the wall is built on; its cells draw the rules and marks.",
         "quote` — one named customer's statement; the wall shows many without words.",
         "big-numbers` — the numeric form of the same proof band.",
         "brand` — the product's own mark, not a customer's."
       ],
       "bestPractices": [
-        "Supply marks that read on the page's own surface. The component applies no colour filter — only a uniform opacity — so a mark that only works on one theme will not work on both; ship a mark that does, rather than inverting it. When the marks come from a registry that already places them per theme, render them through the `mark` slot and keep `items` as the list they are drawn from.",
-        "Give every mark a real `alt` — the company name. The wall is a list of who uses the product, and that list should be readable without seeing it.",
-        "Set `ariaLabel` so the group announces its purpose (\"Customers using Azion\") instead of reading as an unnamed list.",
-        "Keep the marks to one visual weight. A wall mixing wordmarks and full lockups reads as inconsistent no matter how the grid is set.",
-        "Link a mark with `href` only when there is somewhere worth going, such as a case study.",
+        "Place the wall inside a `frame-box` (in a `section-module`, as every framed band is). The grid is `card-grid`'s `flush` frame: the surrounding frame draws the outer rules and the cells lay their right and bottom rules onto it.",
+        "Supply marks that read on the page's own surface. The component applies no colour filter, so a mark that only works on one theme will not work on both; brand-colour marks read on either. When the marks come from a registry that already places them per theme, render them through the `mark` slot and keep `items` as the list they are drawn from.",
+        "Set `shape: 'compact'` on a mark that is close to square (a roundel, a monogram) so it sits taller than the wordmarks beside it and all of them read at one visual weight.",
+        "Give every mark a real `alt` — the company name. A linked cell is announced as `linkLabel`, then that name (\"Read story, Magalu\").",
+        "Set `ariaLabel` so the group announces its purpose (\"Clients running on Azion\") instead of reading as an unnamed region.",
+        "Link a mark with `href` only when there is somewhere worth going, such as a case study; a wall of links to nowhere costs a reader a tab stop per cell. In an app with a client-side router, handle `item-click`: call `event.preventDefault()` and push `item.href`.",
         "Put one statement in `aside`, not a second grid. The band's argument is *many customers, one of them talking*; two things of equal weight leave a reader with neither.",
-        "Give the wall eight or twelve marks when `aside` is filled — it is four columns wide there — so the last row is full rather than ragged."
+        "Give the wall a multiple of three marks when `aside` is filled and a multiple of six when it is not, so the last row is full rather than ragged. Six beside a quote is the Web Apps band."
       ]
     },
     "breadcrumb": {
diff --git a/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts b/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
index 8b3abb14f..e8ad34d2f 100644
--- a/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
+++ b/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/vue'
+import { fireEvent, render } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
 
 import { expectNoA11yViolations } from '../../../test/axe'
@@ -9,7 +9,7 @@ const TESTID = 'marketing-logo-wall'
 const items = [
   { src: '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/logos/northwind.svg', alt: 'Northwind' },
   { src: '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/logos/contoso.svg', alt: 'Contoso', href: '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/customers/contoso' },
-  { src: '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/logos/fabrikam.svg', alt: 'Fabrikam' }
+  { src: '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/logos/fabrikam.svg', alt: 'Fabrikam', shape: 'compact' as const }
 ]
 
 describe('LogoWall', () => {
@@ -30,9 +30,17 @@ describe('LogoWall', () => {
   })
 
   it('renders one list item per mark', () => {
-    const { container } = render(LogoWall, { props: { items } })
+    const { getByRole, getAllByRole } = render(LogoWall, { props: { items } })
 
-    expect(container.querySelectorAll('ul > li')).toHaveLength(items.length)
+    expect(getByRole('list')).toBeInTheDocument()
+    expect(getAllByRole('listitem')).toHaveLength(items.length)
+  })
+
+  it('sets a compact mark apart from the wide default through data-shape', () => {
+    const { getByAltText } = render(LogoWall, { props: { items } })
+
+    expect(getByAltText('Fabrikam')).toHaveAttribute('data-shape', 'compact')
+    expect(getByAltText('Northwind')).toHaveAttribute('data-shape', 'wide')
   })
 
   it('renders every mark as an image carrying its src and alt', () => {
@@ -53,11 +61,43 @@ describe('LogoWall', () => {
     expect(anchor).toHaveAttribute('href', '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/customers/contoso')
   })
 
+  it('names a linked cell with the link label and the company', () => {
+    const { getByRole } = render(LogoWall, { props: { items } })
+
+    expect(getByRole('link', { name: 'Read story, Contoso' })).toHaveAttribute(
+      'href',
+      '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/customers/contoso'
+    )
+  })
+
+  it('uses a consumer linkLabel for the revealed words and the link name', () => {
+    const { getByRole, getByText } = render(LogoWall, {
+      props: { items, linkLabel: 'Ver caso' }
+    })
+
+    expect(getByRole('link', { name: 'Ver caso, Contoso' })).toBeInTheDocument()
+    expect(getByText('Ver caso').closest('[aria-hidden="true"]')).not.toBeNull()
+  })
+
+  it('emits item-click with the event first and the matched item second', async () => {
+    const { getByRole, emitted } = render(LogoWall, { props: { items } })
+    const link = getByRole('link', { name: 'Read story, Contoso' })
+    link.addEventListener('click', (event) => event.preventDefault())
+
+    await fireEvent.click(link)
+
+    const calls = emitted('item-click') as [MouseEvent, (typeof items)[number]][]
+    expect(calls).toHaveLength(1)
+    expect(calls[0][0]).toBeInstanceOf(MouseEvent)
+    expect(calls[0][1]).toEqual(items[1])
+  })
+
   it('renders no anchor for a mark without an href', () => {
-    const { getByAltText, container } = render(LogoWall, { props: { items } })
+    const { getByAltText, getAllByText, container } = render(LogoWall, { props: { items } })
 
     expect(getByAltText('Northwind').closest('a')).toBeNull()
     expect(container.querySelectorAll('a')).toHaveLength(1)
+    expect(getAllByText('Read story')).toHaveLength(1)
   })
 
   it('names the group with ariaLabel', () => {
@@ -79,13 +119,13 @@ describe('LogoWall', () => {
     const { getByTestId, container } = render(LogoWall, { props: { items: [] } })
 
     expect(getByTestId(TESTID)).toBeInTheDocument()
-    expect(container.querySelector('ul')).toBeNull()
+    expect(container.querySelector('[role="list"]')).toBeNull()
   })
 
   it('renders no list when items is omitted', () => {
     const { container } = render(LogoWall)
 
-    expect(container.querySelector('ul')).toBeNull()
+    expect(container.querySelector('[role="list"]')).toBeNull()
   })
 
   it('forwards a consumer class onto the root', () => {
@@ -134,7 +174,7 @@ describe('LogoWall', () => {
     const root = getByTestId(TESTID)
     expect(root).toHaveAttribute('data-aside', 'true')
     expect(getByText('Azion transformed our operations.')).toBeInTheDocument()
-    expect(root.querySelector('ul')).not.toBeNull()
+    expect(root.querySelector('[role="list"]')).not.toBeNull()
   })
 
   it('renders the aside even when there are no marks to show', () => {
@@ -143,7 +183,7 @@ describe('LogoWall', () => {
       slots: { aside: '<blockquote>One customer still speaks.</blockquote>' }
     })
 
-    expect(getByTestId(TESTID).querySelector('ul')).toBeNull()
+    expect(getByTestId(TESTID).querySelector('[role="list"]')).toBeNull()
     expect(getByText('One customer still speaks.')).toBeInTheDocument()
   })
 
diff --git a/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue b/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue
index 205787715..7e2f577c8 100644
--- a/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue
+++ b/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue
@@ -1,35 +1,51 @@
 <script setup lang="ts">
   import { computed, useAttrs } from 'vue'
 
+  import CardGrid from '../card-grid/card-grid.vue'
+  import CardGridCell from '../card-grid/card-grid-cell/card-grid-cell.vue'
+
   defineOptions({
     name: 'LogoWall',
     inheritAttrs: false
   })
 
+  /** How tall a mark sits in its cell: `wide` for a wordmark, `compact` for a mark closer to square. */
+  export type LogoShape = 'wide' | 'compact'
+
   /** One company mark in the wall, optionally linked. */
   export type LogoItem = {
     /** URL of the mark rendered in the cell. */
     src: string
     /** Alternative text naming the company the mark belongs to. */
     alt: string
-    /** Destination the mark links to, when there is somewhere worth going. */
+    /** Destination the mark links to, such as that customer's success case. */
     href?: string
+    /** How tall the mark sits in its cell; defaults to `wide`. */
+    shape?: LogoShape
   }
 
   interface Props {
-    /** The marks rendered in the grid, in order; each item is `{ src, alt, href? }` where `src` is the mark's URL, `alt` names the company, and `href` links the mark when there is somewhere to go. */
+    /** The marks rendered in the grid, in order; each item is `{ src, alt, href?, shape? }` where `src` is the mark's URL, `alt` names the company, `href` links the cell to that customer's story, and `shape` sets a near-square mark taller than a wordmark. */
     items?: LogoItem[]
-    /** Accessible name for the group of marks, announced instead of an unnamed list. */
+    /** Accessible name for the group of marks, announced instead of an unnamed region. */
     ariaLabel?: string
+    /** Words revealed under a linked mark on hover and focus, and the lead of that link's accessible name. */
+    linkLabel?: string
   }
 
   const props = withDefaults(defineProps<Props>(), {
     items: () => [],
-    ariaLabel: ''
+    ariaLabel: '',
+    linkLabel: 'Read story'
   })
 
+  const emit = defineEmits<{
+    /** Fired when a linked cell is activated; `item` is the matched entry, so a router can take over the navigation. */
+    'item-click': [event: MouseEvent, item: LogoItem]
+  }>()
+
   const slots = defineSlots<{
-    /** Content set beside the wall from `lg` up, such as one customer's quotation. */
+    /** Content set beside the wall from `lg` up, such as one customer's quotation, on a padded canvas panel. */
     aside?(): unknown
     /** One cell's mark, replacing the image built from the item — for a mark that owns its own theming; it carries its own alternative text. */
     mark?(props: { item: LogoItem; index: number }): unknown
@@ -44,68 +60,96 @@
   const hasItems = computed(() => props.items.length > 0)
 
   const hasAside = computed(() => Boolean(slots.aside))
+
+  const onItemClick = (event: MouseEvent, item: LogoItem) => {
+    emit('item-click', event, item)
+  }
 </script>
 
 <template>
   <section
     v-bind="$attrs"
-    class="group grid gap-(--spacing-xxl) data-[aside]:lg:grid-cols-2"
+    class="group/logo-wall grid data-[aside]:lg:grid-cols-2"
     :data-testid="testId"
     :data-aside="hasAside || null"
     :aria-label="ariaLabel || undefined"
   >
-    <ul
+    <CardGrid
       v-if="hasItems"
-      class="m-0 grid list-none grid-cols-2 gap-(--spacing-xl) p-0 sm:grid-cols-3 lg:grid-cols-6 group-data-[aside]:lg:grid-cols-4"
+      kind="frame"
+      flush
+      :columns="3"
+      :mobile-columns="2"
+      role="list"
+      class="sm:grid-cols-3! lg:grid-cols-6! group-data-[aside]/logo-wall:lg:grid-cols-3!"
     >
-      <li
+      <CardGridCell
         v-for="(item, index) in items"
         :key="`${item.alt}-${index}`"
-        class="flex items-center justify-center"
+        kind="surface"
+        :padded="false"
+        role="listitem"
       >
         <a
           v-if="item.href"
           :href="item.href"
-          class="flex items-center justify-center rounded-(--shape-elements) opacity-60 transition-opacity duration-150 ease-out hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) motion-reduce:transition-none"
+          :aria-label="`${linkLabel}, ${item.alt}`"
+          class="group/logo relative isolate flex aspect-square items-center justify-center px-(--spacing-md) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-inset before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:bg-(--bg-hover) before:opacity-0 before:transition-opacity before:duration-moderate-01 before:ease-productive-entrance hover:before:opacity-100 motion-reduce:before:transition-none"
+          @click="onItemClick($event, item)"
         >
-          <slot
-            name="mark"
-            :item="item"
-            :index="index"
+          <span
+            class="flex h-7 max-w-full items-center justify-center transition-[translate] duration-moderate-01 ease-productive-entrance group-hover/logo:-translate-y-(--spacing-sm) group-focus-visible/logo:-translate-y-(--spacing-sm) motion-reduce:transition-none"
           >
-            <img
-              :src="item.src"
-              :alt="item.alt"
-              loading="lazy"
-              decoding="async"
-              class="h-8 w-auto max-w-full object-contain"
-            />
-          </slot>
+            <slot
+              name="mark"
+              :item="item"
+              :index="index"
+            >
+              <img
+                :src="item.src"
+                :alt="item.alt"
+                :data-shape="item.shape ?? 'wide'"
+                loading="lazy"
+                decoding="async"
+                class="h-5 w-auto max-w-full object-contain data-[shape=compact]:h-7 sm:max-w-24"
+              />
+            </slot>
+          </span>
+          <span
+            aria-hidden="true"
+            class="pointer-events-none absolute inset-x-0 top-1/2 mt-(--spacing-xs) flex translate-y-1 items-center justify-center gap-(--spacing-xxs) whitespace-nowrap text-overline-md uppercase text-(--text-default) opacity-0 transition-[opacity,translate] duration-moderate-01 ease-productive-entrance group-hover/logo:translate-y-0 group-hover/logo:opacity-100 group-focus-visible/logo:translate-y-0 group-focus-visible/logo:opacity-100 motion-reduce:transition-none"
+          >
+            {{ linkLabel }}
+            <i class="pi pi-arrow-up-right leading-none" />
+          </span>
         </a>
-        <span
+        <div
           v-else
-          class="flex items-center justify-center opacity-60"
+          class="flex aspect-square items-center justify-center px-(--spacing-md)"
         >
-          <slot
-            name="mark"
-            :item="item"
-            :index="index"
-          >
-            <img
-              :src="item.src"
-              :alt="item.alt"
-              loading="lazy"
-              decoding="async"
-              class="h-8 w-auto max-w-full object-contain"
-            />
-          </slot>
-        </span>
-      </li>
-    </ul>
+          <span class="flex h-7 max-w-full items-center justify-center">
+            <slot
+              name="mark"
+              :item="item"
+              :index="index"
+            >
+              <img
+                :src="item.src"
+                :alt="item.alt"
+                :data-shape="item.shape ?? 'wide'"
+                loading="lazy"
+                decoding="async"
+                class="h-5 w-auto max-w-full object-contain data-[shape=compact]:h-7 sm:max-w-24"
+              />
+            </slot>
+          </span>
+        </div>
+      </CardGridCell>
+    </CardGrid>
 
     <div
       v-if="hasAside"
-      class="flex min-w-0 flex-col"
+      class="flex min-w-0 bg-(--bg-canvas) p-(--spacing-xl) *:flex-1"
     >
       <slot name="aside" />
     </div>

From f0a66160af9a360427d08a916e2d07e7426c10a0 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Thu, 1 Oct 2026 09:02:17 -0300
Subject: [PATCH 3/4] feat(webkit): add a rectangle kind and an aside panel to
 logo-wall

---
 .specs/logo-wall.md                           | 20 ++++---
 .../marketing/logo-wall/LogoWall.stories.js   | 59 +++++++++++++++++--
 .../static/clients/color/herospark.svg        |  3 +
 apps/storybook/static/clients/color/ifood.svg |  1 +
 apps/storybook/static/clients/color/itau.svg  |  1 +
 .../storybook/static/clients/color/magalu.svg |  3 +
 .../storybook/static/clients/color/marisa.svg | 35 +++++++++++
 .../static/clients/color/netshoes.svg         | 35 +++++++++++
 apps/storybook/static/clients/color/nzn.svg   | 26 ++++++++
 .../storybook/static/clients/color/renner.svg |  4 ++
 apps/storybook/static/clients/color/stone.svg | 16 +++++
 apps/storybook/static/clients/color/zoop.svg  |  7 +++
 packages/webkit/catalog.json                  | 14 ++++-
 .../marketing/logo-wall/logo-wall.test.ts     | 12 ++++
 .../marketing/logo-wall/logo-wall.vue         | 15 +++--
 15 files changed, 231 insertions(+), 20 deletions(-)
 create mode 100644 apps/storybook/static/clients/color/herospark.svg
 create mode 100644 apps/storybook/static/clients/color/ifood.svg
 create mode 100644 apps/storybook/static/clients/color/itau.svg
 create mode 100644 apps/storybook/static/clients/color/magalu.svg
 create mode 100644 apps/storybook/static/clients/color/marisa.svg
 create mode 100644 apps/storybook/static/clients/color/netshoes.svg
 create mode 100644 apps/storybook/static/clients/color/nzn.svg
 create mode 100644 apps/storybook/static/clients/color/renner.svg
 create mode 100644 apps/storybook/static/clients/color/stone.svg
 create mode 100644 apps/storybook/static/clients/color/zoop.svg

diff --git a/.specs/logo-wall.md b/.specs/logo-wall.md
index 3a8c387b7..6b8209a2f 100644
--- a/.specs/logo-wall.md
+++ b/.specs/logo-wall.md
@@ -4,9 +4,9 @@ category: marketing
 structure: monolithic
 status: implemented
 spec_version: 2
-checksum: 404cd79cd5aff08c54fcecef08da53334c4f81cf22ea4518b49fc4c2846f8a41
+checksum: dab394db994e88139a67a87b1b5547595bf9a4184648083e9f4d4318755dce77
 created: 2026-09-22
-last_updated: 2026-09-26
+last_updated: 2026-09-30
 ---
 
 # Logo Wall — Component Spec
@@ -15,7 +15,7 @@ last_updated: 2026-09-26
 
 The customer-proof band of a marketing page: a framed grid of square cells, one company mark to a cell, each one optionally linked to that customer's story, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for.
 
-The cells are `card-grid` frame cells, so the wall draws the same hairlines and registration marks as every other framed band on the page. A linked cell is the whole square: on hover and focus a wash rises behind it, the mark lifts, and a `Read story` label slides in under it, so the wall doubles as the way into the case studies. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge on a padded canvas panel — and the wall narrows from six columns to three to sit in half the width at the same cell size.
+The cells are `card-grid` frame cells, so the wall draws the same hairlines and registration marks as every other framed band on the page. A linked cell is the whole square: on hover and focus a wash rises behind it, the mark lifts, and a `Read story` label slides in under it, so the wall doubles as the way into the case studies. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge on a padded canvas panel — and the wall narrows from six columns to three to sit in half the width at the same cell size. Every cell is a perfect square in every layout, and the wall alone sets the band's height: the `aside` panel is size-contained from `lg` up, so its content never stretches a row, and the statement sits centred in it. Between `lg` and `xl` the wall is two columns wide, so its three rows are tall enough for a client sentence; from `xl` it is three columns, two rows. Set `kind` to `rectangle` and every cell becomes a 3:2 rectangle instead: beside `aside` the wall holds three columns from `lg`, so nine rectangles take exactly the height six squares do, and below `sm` it keeps three columns so nine marks never leave a ragged row.
 
 ## When to use
 
@@ -48,7 +48,8 @@ The cells are `card-grid` frame cells, so the wall draws the same hairlines and
 - Set `ariaLabel` so the group announces its purpose ("Clients running on Azion") instead of reading as an unnamed region.
 - Link a mark with `href` only when there is somewhere worth going, such as a case study; a wall of links to nowhere costs a reader a tab stop per cell. In an app with a client-side router, handle `item-click`: call `event.preventDefault()` and push `item.href`.
 - Put one statement in `aside`, not a second grid. The band's argument is *many customers, one of them talking*; two things of equal weight leave a reader with neither.
-- Give the wall a multiple of three marks when `aside` is filled and a multiple of six when it is not, so the last row is full rather than ragged. Six beside a quote is the Web Apps band.
+- Give the wall exactly six marks when `aside` is filled — two full rows of three squares beside the statement, and three rows of two between `lg` and `xl` — and a multiple of six when it is not, so the last row is never ragged.
+- Reach for `kind: 'rectangle'` when the band names nine customers beside `aside`: three rows of three 3:2 cells at the height of the six-square wall. Nine is the count the rectangle wall is drawn for; without `aside` it runs six to a row like the square wall.
 
 ## Usage
 
@@ -88,11 +89,12 @@ import Quote from '@aziontech/webkit/quote'
 
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
+| `kind` | `LogoWallKind` | `'square'` | false | The cell's proportion; `rectangle` sets every cell at 3:2, keeps three columns below `sm`, and holds three columns beside `aside` from `lg`. |
 | `items` | `LogoItem[]` | `[]` | false | The marks rendered in the grid, in order; each item is `{ src, alt, href?, shape? }` where `src` is the mark's URL, `alt` names the company, `href` links the cell to that customer's story, and `shape` sets a near-square mark taller than a wordmark. |
 | `ariaLabel` | `string` | `''` | false | Accessible name for the group of marks, announced instead of an unnamed region. |
 | `linkLabel` | `string` | `'Read story'` | false | Words revealed under a linked mark on hover and focus, and the lead of that link's accessible name. |
 
-`LogoItem` is `{ src: string; alt: string; href?: string; shape?: LogoShape }`, and `LogoShape` is `'wide' | 'compact'` (`wide` when omitted). Both types are exported.
+`LogoItem` is `{ src: string; alt: string; href?: string; shape?: LogoShape }`, `LogoShape` is `'wide' | 'compact'` (`wide` when omitted), and `LogoWallKind` is `'square' | 'rectangle'`. All three types are exported.
 
 ## Events
 
@@ -104,14 +106,15 @@ import Quote from '@aziontech/webkit/quote'
 
 | Slot | Scope | Notes |
 |---|---|---|
-| `aside` | — | Content set beside the wall from `lg` up, such as one customer's `quote`, on a `--bg-canvas` panel padded by `--spacing-xl`; its child stretches to fill the panel. When it is empty the wall spans the full width. |
+| `aside` | — | Content set beside the wall from `lg` up, centred in a panel that never sets the band's height (keep it short enough to fit two rows of squares from `xl`), such as one customer's `quote`, on a `--bg-canvas` panel padded by `--spacing-xl`; its child fills the panel's width. When it is empty the wall spans the full width. |
 | `mark` | `{ item: LogoItem; index: number }` | One cell's mark, replacing the image built from the item — for a mark that owns its own theming (a per-theme asset swap, a silhouette filter). The slotted content carries its own alternative text and sits in a 28px-tall box; on a linked cell it lifts with the built image's motion. |
 
 ## States
 
 - Visual states: an unlinked cell is static; a linked cell on `hover` / `focus-visible` raises a `--bg-hover` wash behind the whole square, lifts the mark by `--spacing-sm`, and fades the `linkLabel` in beneath it with a trailing arrow
-- `data-aside` is present when the `aside` slot is filled; from `lg` up it splits the band into two columns and narrows the wall from six columns to three, so a cell is the same size in both layouts
-- Columns: two below `sm`, three from `sm`, six from `lg` (three with `aside`)
+- `data-aside` is present when the `aside` slot is filled; from `lg` up it splits the band into two columns and narrows the wall from six columns to two, and to three from `xl`, so a cell is the same size in both layouts
+- `data-kind` on the root is `square` or `rectangle`; `rectangle` sets every cell at 3:2 instead of 1:1
+- Columns: two below `sm`, three from `sm`, six from `lg` (with `aside`: two from `lg`, three from `xl`); a `rectangle` wall is three below `sm` and three from `lg` beside `aside`
 - `data-shape` on the built image is `wide` or `compact`; `compact` sets the mark 28px tall instead of 20px
 - A cell's mark is the `mark` slot's content when it is filled, and the image built from the item otherwise
 - Empty: when `items` is empty the wall renders no grid, so a page with no customers to name shows nothing rather than an empty frame — an `aside` given without items still renders, since a statement stands on its own
@@ -158,6 +161,7 @@ import Quote from '@aziontech/webkit/quote'
 
 - Default — six linked marks beside a `quote`, the Web Apps band (justified: this is the composition the component exists for, and the `aside` split, the three-column wall and the canvas panel only exist when the slot is filled, which no arg can produce)
 - Wall — the same marks with no `aside`, six to a row (justified: the full-width six-column wall is the other layout the component has)
+- Rectangle — nine linked marks beside a `quote` in 3:2 cells (justified: the rectangle cell and its three-column wall beside `aside` only exist with `kind: 'rectangle'` and nine items, which the square Default cannot show)
 - Unlinked — marks with no `href` (justified: the static cell, with no wash, lift, label or tab stop, only exists without an `href`, and every other story links its marks)
 
 ## Constraints — DO NOT
diff --git a/apps/storybook/src/stories/components/marketing/logo-wall/LogoWall.stories.js b/apps/storybook/src/stories/components/marketing/logo-wall/LogoWall.stories.js
index 67f114228..b9bf026cf 100644
--- a/apps/storybook/src/stories/components/marketing/logo-wall/LogoWall.stories.js
+++ b/apps/storybook/src/stories/components/marketing/logo-wall/LogoWall.stories.js
@@ -35,9 +35,20 @@ const LINKED_ITEMS = CLIENTS.map((client) => ({
 
 const UNLINKED_ITEMS = CLIENTS.map(markFor)
 
+const RECTANGLE_ITEMS = [
+  ...LINKED_ITEMS,
+  ...[
+    { key: 'renner', alt: 'Renner' },
+    { key: 'marisa', alt: 'Marisa' },
+    { key: 'zoop', alt: 'Zoop' }
+  ].map((client) => ({
+    ...markFor(client),
+    href: `https://www.azion.com/en/success-case/${client.key}/`
+  }))
+]
+
 const WALL_ITEMS = [...LINKED_ITEMS, ...LINKED_ITEMS]
 
-// The snippet has to be paste-and-run, so the marks are spelled out rather than mapped.
 const itemsMarkup = (items) =>
   items
     .map((item) => {
@@ -47,8 +58,9 @@ const itemsMarkup = (items) =>
     })
     .join(',\n')
 
-const wallMarkup = (items, inner = '') => {
-  const open = `  <LogoWall
+const wallMarkup = (items, inner = '', kind = '') => {
+  const kindAttr = kind ? `\n    kind="${kind}"` : ''
+  const open = `  <LogoWall${kindAttr}
     aria-label="${ARIA_LABEL}"
     :items="[
 ${itemsMarkup(items)}
@@ -89,6 +101,17 @@ const meta = {
     }
   },
   argTypes: {
+    kind: {
+      control: 'inline-radio',
+      options: ['square', 'rectangle'],
+      description:
+        "The cell's proportion; `rectangle` sets every cell at 3:2, keeps three columns below `sm`, and holds three columns beside `aside` from `lg`.",
+      table: {
+        category: 'props',
+        type: { summary: "'square' | 'rectangle'" },
+        defaultValue: { summary: "'square'" }
+      }
+    },
     items: {
       control: 'object',
       description:
@@ -101,7 +124,8 @@ const meta = {
     },
     ariaLabel: {
       control: 'text',
-      description: 'Accessible name for the group of marks, announced instead of an unnamed region.',
+      description:
+        'Accessible name for the group of marks, announced instead of an unnamed region.',
       table: {
         category: 'props',
         type: { summary: 'string' },
@@ -129,6 +153,7 @@ const meta = {
     }
   },
   args: {
+    kind: 'square',
     items: LINKED_ITEMS,
     ariaLabel: ARIA_LABEL,
     linkLabel: 'Read story'
@@ -158,7 +183,7 @@ export const Default = {
     docs: {
       description: {
         story:
-          'The Web Apps band: six linked customer marks on the start edge, one of those customers speaking on the end edge. Each cell is a `card-grid` frame cell and a whole-square link to that customer’s success case — hover or `Tab` to one and a wash rises behind it, the mark lifts, and `Read story` slides in underneath. From `lg` up the band splits and the wall sits three to a row in half the width; below it the quote follows the wall. iFood and Itaú carry `shape: \'compact\'`, which sets a near-square mark taller so it reads at the same weight as the wordmarks. The wall assumes a surrounding `frame-box` draws its outer rules, which is why the snippet includes one.'
+          "The Web Apps band: six linked customer marks on the start edge, one of those customers speaking on the end edge. Each cell is a `card-grid` frame cell and a whole-square link to that customer’s success case — hover or `Tab` to one and a wash rises behind it, the mark lifts, and `Read story` slides in underneath. From `lg` up the band splits: the wall sits in half the width, two to a row until `xl` and three from it, and the quote is centred beside it in a panel that never sets the band’s height, so the cells stay perfect squares whatever the quotation’s length. Beside a quote the wall takes exactly six marks. iFood and Itaú carry `shape: 'compact'`, which sets a near-square mark taller so it reads at the same weight as the wordmarks. The wall assumes a surrounding `frame-box` draws its outer rules, which is why the snippet includes one."
       },
       source: { code: toSfc(ASIDE_IMPORTS, wallMarkup(LINKED_ITEMS, QUOTE_MARKUP)) }
     }
@@ -182,6 +207,30 @@ export const Wall = {
   }
 }
 
+/** @type {import('@storybook/vue3').StoryObj<typeof LogoWall>} */
+export const Rectangle = {
+  render: (args) => ({
+    components: { FrameBox, LogoWall, Quote },
+    setup() {
+      return { args }
+    },
+    template: `<FrameBox><LogoWall v-bind="args">\n${QUOTE_MARKUP}\n</LogoWall></FrameBox>`
+  }),
+  args: {
+    kind: 'rectangle',
+    items: RECTANGLE_ITEMS
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Nine customers beside one of them speaking. `kind: 'rectangle'` sets every cell at 3:2, and beside `aside` the wall holds three columns from `lg`, so three rows of rectangles take exactly the height two rows of squares do — the band grows by three names without growing taller. Below `sm` the wall keeps three columns, so nine marks never leave a ragged row. Every mark links to its story, so hover or `Tab` reveals `Read story` under it."
+      },
+      source: { code: toSfc(ASIDE_IMPORTS, wallMarkup(RECTANGLE_ITEMS, QUOTE_MARKUP, 'rectangle')) }
+    }
+  }
+}
+
 /** @type {import('@storybook/vue3').StoryObj<typeof LogoWall>} */
 export const Unlinked = {
   render: Template,
diff --git a/apps/storybook/static/clients/color/herospark.svg b/apps/storybook/static/clients/color/herospark.svg
new file mode 100644
index 000000000..125fc08b6
--- /dev/null
+++ b/apps/storybook/static/clients/color/herospark.svg
@@ -0,0 +1,3 @@
+<svg width="124" height="24" viewBox="0 0 124 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4588 0V10.0385H8.66209V4.37637H4.35989V10.0385L0 10.0714L4.35989 14.1841H15.1401L13.4588 14.2912V19.6566H17.8022V0H13.4588ZM4.35989 14.8517V24H8.66209V14.5879L4.35989 14.8517ZM46.7802 11.9835C46.7802 14.2006 47.5467 16.0797 49.0796 17.6126C50.6126 19.1291 52.5329 19.8874 54.8241 19.8874C57.1236 19.8874 59.0274 19.1209 60.5357 17.6126C62.0686 16.1044 62.8351 14.217 62.8351 12.0082C62.8351 9.76649 62.0686 7.88737 60.5357 6.37913C59.0027 4.84616 57.1071 4.07968 54.8077 4.07968C52.5165 4.07968 50.6126 4.84616 49.0796 6.37913C47.5467 7.88737 46.7802 9.76649 46.7802 11.9835ZM58.3681 11.9918C58.3846 13.022 58.0384 13.8956 57.3544 14.5962C56.6703 15.2802 55.8214 15.6264 54.8077 15.6181C53.8186 15.6181 52.9697 15.272 52.2857 14.5879C51.6099 13.9039 51.2555 13.0385 51.2555 11.9835C51.2555 10.9286 51.6016 10.0632 52.2857 9.37913C52.9697 8.7033 53.8186 8.34891 54.8077 8.34891C55.7802 8.34891 56.6291 8.67858 57.3132 9.36264C57.9972 10.0467 58.3434 10.9203 58.3681 11.9918ZM69.5769 11.7857C69.206 11.5796 68.5879 11.2665 67.6978 10.8791C66.8077 10.467 66.2472 10.1785 65.9835 10.0302C65.1346 9.55217 64.6978 8.93404 64.6978 8.20876C64.6978 7.0714 65.6456 6.34613 66.9725 6.34613C68.2335 6.34613 69.2884 6.86536 70.1373 7.9203L71.6044 6.28844C70.4258 4.8214 68.8763 4.09613 66.9478 4.09613C65.5219 4.09613 64.3599 4.50822 63.4697 5.31591C63.0906 5.66206 62.8022 6.04118 62.5879 6.46151C63.7417 8.0192 64.3269 9.85712 64.3351 11.9588C64.3557 11.9711 64.3763 11.9855 64.3969 12C64.4175 12.0144 64.4382 12.0288 64.4588 12.0412C64.8544 12.2719 65.4478 12.5604 66.2142 12.9066C66.9972 13.2362 67.5164 13.467 67.7637 13.5906C68.7774 14.1263 69.2719 14.7939 69.2719 15.5522C69.2719 16.7143 68.2417 17.6373 66.6675 17.6373C65.456 17.6373 64.2939 17.1263 63.445 16.1126C63.1154 16.8049 62.6868 17.4478 62.1758 18.0577C63.3296 19.2527 64.9533 19.8873 66.6675 19.8873C68.2005 19.8873 69.4615 19.4752 70.434 18.6428C71.4066 17.7939 71.9011 16.7225 71.9011 15.4203C71.9175 13.8544 71.1263 12.6346 69.5769 11.7857ZM79.1456 4.35987C80.8186 4.35987 82.0796 4.83789 82.9285 5.78569C83.7939 6.71701 84.2307 7.85437 84.2307 9.19778C84.2307 10.5412 83.7774 11.6621 82.8873 12.5851C81.9972 13.5165 80.6703 13.9698 78.9395 13.9698H76.2527V19.6401H73.8708V4.35987H79.1456ZM78.9972 11.7857C80.8351 11.7857 81.8077 10.5824 81.8077 9.15657C81.8077 7.73075 80.8763 6.59339 79.2445 6.59339H76.2445V11.7857H78.9972ZM94.1703 19.6401L92.7197 15.8736H87.0906L85.6401 19.6401H83.0769L89.1593 4.35987H90.7087L96.7252 19.6401H94.1703ZM89.934 8.14284L87.8653 13.6813H92.0027L89.934 8.14284ZM102.775 13.6401L106.5 19.6401H109.368L105.297 13.4176C107.506 12.8242 108.709 11.0192 108.709 9.01646C108.709 7.73075 108.272 6.63459 107.423 5.728C106.574 4.81317 105.355 4.35987 103.764 4.35987H98.3653V19.6401H100.747V13.6401H102.775ZM100.756 11.4313V6.60987H103.772C105.346 6.60987 106.253 7.64833 106.253 8.99174C106.253 10.3764 105.322 11.4313 103.401 11.4313H100.756ZM120.627 19.6401L115.624 13.1456L113.596 15.5687V19.6401H111.214V4.35987H113.596V12.3214L120.083 4.35987H122.934L117.173 11.4725L123.561 19.6401H120.627ZM19.7802 4.35987V19.6401V19.6483H31.1786V15.6758H24.1236V13.978H30.6758V10.0302H24.1236V8.3324H31.2198V4.35987H19.7802ZM43.5989 23.9835L38.728 14.8599H37.4011V19.6401H33.0989V4.35987H39.7582C41.6621 4.35987 43.1044 4.83789 44.0769 5.81042C45.0494 6.78295 45.5439 8.02745 45.5439 9.55218C45.5439 11.4725 44.7198 13.2115 42.9148 14.1264L48.4862 23.9917H43.5989V23.9835ZM37.4093 8.26646V11.1428H39.6181C40.6318 11.1428 41.1264 10.5 41.1264 9.69229C41.1264 8.86811 40.6071 8.26646 39.717 8.26646H37.4093Z" fill="#FF305C"/>
+</svg>
diff --git a/apps/storybook/static/clients/color/ifood.svg b/apps/storybook/static/clients/color/ifood.svg
new file mode 100644
index 000000000..19d13a477
--- /dev/null
+++ b/apps/storybook/static/clients/color/ifood.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1004 530.58"><title>ifood-43</title><path d="M-4,529.31H72.41l42.46-211.2H38.45ZM42.66,292.92h76.73L132,229.73H55.3Zm59.47,295.82h76.42l46.69-228.18h57.31L291,318.11H234.79l2.13-9.55c3.18-18,9.55-38.21,38.2-38.21,17,0,32.91,1.06,48.82,8.49l8.5-44.57a167.8,167.8,0,0,0-55.19-9.56c-61.56,0-104,36.09-119.93,93.4H130.79l-8.49,42.45h26.53Z" transform="translate(4 -224.71)" fill="#ea1d2c"/><path d="M344.11,533.56c90.21,0,152.83-81.73,152.83-148.59,0-49.88-45.64-71.11-90.21-71.11C308,313.86,253.9,402,253.9,462.45c0,49.88,46.7,71.11,90.21,71.11m242,0c90.21,0,152.83-81.73,152.83-148.59,0-49.88-46.7-71.11-91.28-71.11-98.7,0-152.82,88.09-152.82,148.59,0,49.88,47.76,71.11,91.27,71.11m277-4.25h75.35L1000,229H923.59l-18.05,89.15-31.84-3.18c-74.29,0-142.21,95.51-142.21,163.44,0,27.59,18,55.19,48.82,55.19,43.51,0,74.29-21.23,87-42.46h4.24ZM627.48,687.45a295,295,0,0,1-212.26,66.86c-100.83-6.37-173-83.85-185.73-165.57h4.24c23.35,51,79.6,98.71,148.59,106.13,70,8.49,153.89-23.34,199.52-66.86L530.9,588.74H684.79l-34,163.45-22.29-63.68Z" transform="translate(4 -224.71)" fill="#ea1d2c"/></svg>
\ No newline at end of file
diff --git a/apps/storybook/static/clients/color/itau.svg b/apps/storybook/static/clients/color/itau.svg
new file mode 100644
index 000000000..7f98622ec
--- /dev/null
+++ b/apps/storybook/static/clients/color/itau.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M218.676 10.574c-13.797.328-23.918.813-42.473 1.957-8.582.512-17.95 1.266-24.547 1.926-1.656.18-5.12.512-7.68.754-10.753 1.055-26.718 3.07-33.433 4.215-1.418.242-3.496.574-4.668.754-1.145.152-3.195.511-4.52.754-1.324.242-3.554.664-4.968.902-4.973.844-13.434 2.562-18.223 3.707-1.328.332-3.707.902-5.273 1.266-1.567.359-2.98.691-3.16.722-8.829 2.106-17.594 6.356-24.34 11.867C38.824 44.73 32.953 53.344 30 61.898c-.48 1.325-.965 2.68-1.113 3.012-.512 1.145-2.742 10.781-4.34 18.676-.238 1.324-.66 3.281-.902 4.367-.243 1.082-.57 2.98-.782 4.215-.183 1.234-.422 2.742-.574 3.312-.453 1.72-2.289 13.465-3.465 21.989-1.144 8.254-1.898 14.25-2.558 20.332-.332 2.98-.664 5.902-.723 6.476-.09.57-.363 3.493-.633 6.477-.242 2.98-.601 6.625-.785 8.133-.633 5.539-2.2 29.668-2.98 46.687-.602 12.617-.993 39.637-.782 54.367.211 18.372.66 34.79 1.082 40.512.153 2.317.453 7.2.633 10.844.18 3.644.422 8.312.574 10.39.692 10.422 1.235 17.258 1.504 19.426.153 1.328.512 4.852.754 7.801.242 2.953.602 6.477.754 7.832.18 1.356.512 4.277.75 6.508.754 7.137 1.328 11.805 1.809 14.91.242 1.656.664 4.488.902 6.324.875 6.625 1.898 13.07 3.012 18.977.242 1.324.633 3.555.906 4.969.512 3.011 1.687 9.007 2.531 12.8 2.89 13.286 4.156 17.258 7.559 23.797.933 1.805 2.137 3.914 2.68 4.668.511.754 1.265 1.836 1.656 2.41 1.718 2.559 6.629 7.559 9.34 9.489.449.328 1.324.96 1.894 1.414.606.48 1.176.843 1.328.843.121 0 .422.211.66.454 1.176 1.144 9.461 5.09 13.012 6.144.664.211 1.477.48 1.809.633.785.36 5.21 1.473 10.543 2.68 2.32.543 4.699 1.113 5.27 1.265 1.386.36 10.12 2.106 16.718 3.313 3.793.691 11.176 1.867 15.812 2.531 1.747.238 3.977.57 4.97.75 3.644.633 18.706 2.383 28.163 3.285 3.403.332 7.59.723 9.336.902 2.832.301 5.723.543 19.578 1.536 2.078.152 6.809.422 10.543.605 3.735.18 8.946.45 11.598.602 21.445 1.234 82.77 1.234 103.914 0 2.652-.18 7.863-.422 11.598-.602 6.414-.3 8.765-.453 18.824-1.207 12.89-.992 31.84-2.832 38.254-3.734 1.836-.27 5-.692 7.078-.965 7.68-.992 18.223-2.59 24.246-3.703 6.598-1.207 15.332-2.953 16.719-3.313.57-.152 2.949-.722 5.27-1.265 5.21-1.176 9.73-2.32 10.542-2.68a174.8 174.8 0 0 1 3.012-1.055c2.469-.812 10.664-4.699 11.355-5.363.211-.211.813-.66 1.325-.965 2.351-1.473 3.433-2.316 5.574-4.246 2.41-2.2 5.754-5.812 6.566-7.047.27-.422.993-1.445 1.594-2.258.633-.843 1.145-1.597 1.145-1.718 0-.122.484-.965 1.054-1.868.575-.902 1.266-2.23 1.54-2.953.3-.691.6-1.445.722-1.593.57-.754 2.68-6.75 3.582-10.153 1.418-5.27 4.066-17.71 5.031-23.586.242-1.504.512-2.918.602-3.16.273-.664 1.93-10.996 3.433-21.535.332-2.32.664-4.64.754-5.121.243-1.387 1.325-10.633 1.809-15.512.238-2.41.57-5.183.75-6.176.184-.996.512-4.246.754-7.23.242-2.98.574-6.656.723-8.133.18-1.504.453-4.937.632-7.68.18-2.742.453-6.113.602-7.53.183-1.415.512-6.626.754-11.595.273-4.972.574-11.086.754-13.554 1.355-21.899 1.355-79.368 0-101.957-.153-2.563-.422-7.59-.602-11.145-.183-3.555-.453-8.254-.605-10.394-.18-2.168-.57-7.5-.903-11.895-.332-4.398-.664-8.527-.754-9.187-.09-.665-.359-3.586-.601-6.477-.242-2.89-.512-5.602-.602-6.023-.09-.422-.422-3.196-.754-6.176-.78-7.2-1.746-15.149-1.957-16.082-.09-.422-.422-2.832-.754-5.305-1.476-11.262-4.214-26.957-6.566-37.648-.332-1.508-.871-3.946-1.203-5.422-.844-3.856-1.84-7.742-2.168-8.434-.152-.332-.422-1.144-.633-1.808-.664-2.227-4.008-9.668-4.851-10.844-.122-.18-1.082-1.594-2.11-3.16-2.137-3.223-7.617-8.946-10.902-11.356-6.504-4.789-13.735-8.043-23.07-10.332a440.932 440.932 0 0 1-4.82-1.207c-1.114-.328-3.345-.812-8.134-1.805a396.317 396.317 0 0 1-4.066-.875c-5.813-1.414-24.73-4.488-37.047-6.054-2.473-.301-4.91-.633-5.422-.75-.906-.184-5.273-.633-14.156-1.508-2.473-.242-5.875-.602-7.531-.754-1.656-.18-4.64-.45-6.625-.633-1.989-.148-5.242-.422-7.23-.57-6.747-.574-25.481-1.656-35.844-2.11-20.032-.874-57.02-1.144-79.97-.57ZM85.965 214.098c.18.148 1.055.422 1.926.632 1.629.391 3.918 1.446 5.632 2.59 1.356.903 4.551 4.336 5.18 5.543.305.602.633 1.145.723 1.235.094.09.363.691.605 1.355.211.66.48 1.356.633 1.504.39.574.844 4.156.844 6.809 0 2.59-.395 5.632-.906 6.746-1.625 3.734-2.41 4.968-4.457 7.14-1.899 1.957-2.68 2.559-5.27 3.825-2.11 1.054-3.617 1.597-4.82 1.714-.965.121-1.809.332-1.899.454-.21.363-6.746.363-6.746 0 0-.122-.754-.333-1.719-.454-.933-.117-2.105-.39-2.617-.601a30.998 30.998 0 0 0-1.988-.813c-.574-.21-1.117-.453-1.207-.543-.09-.12-.543-.39-1.055-.632-1.746-.872-5.36-4.88-6.414-7.079-.574-1.175-1.113-2.32-1.265-2.558-1.024-2.05-1.204-11.387-.243-13.555.274-.574.664-1.535.875-2.11.211-.57.453-1.113.543-1.202.09-.09.45-.696.782-1.356.574-1.117 4.156-4.972 4.668-4.972.12 0 .394-.211.605-.48.57-.634 3.492-2.048 5.27-2.5.843-.212 1.777-.513 2.109-.665.332-.148 1.144-.3 1.805-.39 1.777-.18 8.015.09 8.406.363Zm328.191 20.992v15.21h-58.433v-20.359l3.254-.515c7.199-1.113 11.687-1.867 11.957-2.047.18-.121 1.656-.36 3.312-.57 1.656-.211 3.164-.485 3.313-.606.183-.117 1.597-.39 3.164-.601 1.566-.18 3.613-.543 4.52-.782.902-.21 2.8-.543 4.214-.722 1.418-.184 2.832-.453 3.164-.575.332-.148 1.836-.421 3.313-.632 1.507-.18 3.191-.45 3.765-.633.57-.149 2.742-.57 4.82-.903 2.079-.332 4.79-.78 6.024-.992 1.234-.242 2.559-.422 2.95-.453l.663-.031Zm-249.398 13.433v18.043h30.12v26.809H164.73l.118 27.922c.093 30.09.03 28.613 1.66 32.316 1.234 2.864 4.726 5.785 7.738 6.508.512.121 1.086.36 1.328.543.57.45 12.77.45 13.313-.031.238-.18 1.324-.422 2.468-.543l2.02-.211v26.418l-.816.36c-.75.331-4.215.874-8.973 1.445-6.777.785-19.129.875-19.852.12-.18-.148-.66-.269-1.113-.269-1.176 0-6.055-.906-6.418-1.176-.18-.12-.992-.422-1.836-.601-.812-.211-1.625-.485-1.808-.602-.149-.152-.84-.422-1.504-.633-.664-.21-1.266-.484-1.356-.574-.09-.09-.633-.422-1.207-.754-2.5-1.324-3.25-1.804-4.578-2.922-.781-.632-1.504-1.171-1.656-1.171-.301-.032-2.59-2.532-4.395-4.82-1.386-1.778-3.437-5.18-4.129-6.93-.242-.57-.511-1.114-.601-1.204-.121-.09-.422-1.023-.723-2.109-.273-1.082-.633-2.227-.785-2.559-.148-.332-.512-1.687-.75-3.011a144.286 144.286 0 0 0-.816-3.766c-.211-.902-.36-11.508-.45-31.566l-.12-30.18h-17.442v-26.809h17.473v-30.363l2.046-.21c1.114-.118 2.168-.329 2.32-.45.18-.121 1.657-.39 3.313-.602 1.656-.21 3.164-.515 3.313-.632.18-.121 2.078-.454 4.218-.723 2.168-.305 4.067-.633 4.215-.754.18-.121 1.176-.332 2.258-.422a49.719 49.719 0 0 0 4.219-.691c3.223-.664 8.855-1.54 9.125-1.387.121.059.21 8.254.21 18.191Zm99.851 15.18c4.215.242 8.977.785 9.336 1.055.18.12.903.332 1.657.422 1.718.273 5.906 1.507 8.433 2.53 2.11.845 6.809 3.192 7.531 3.798.243.18.782.539 1.204.722.421.211 1.75 1.262 2.921 2.29 1.176 1.054 2.262 1.957 2.41 2.015.454.211 5.813 6.719 5.813 7.078 0 .09.274.575.606 1.024.632.906 3.312 6.117 3.312 6.449 0 .117.242.781.57 1.473.301.695.664 1.75.786 2.32.12.574.332 1.176.449 1.355.12.153.394 1.114.605 2.11.18.992.422 2.02.512 2.258.121.242.39 1.535.633 2.863.36 1.988.449 9.488.57 42.68l.121 40.3h-32.86l-.03-3.554c-.032-1.926-.122-4.727-.243-6.204l-.18-2.71-.874 1.203c-1.383 1.84-5.934 6.175-7.739 7.379-3.949 2.593-5 3.222-6.086 3.586-.664.18-1.535.543-1.957.78-.453.212-1.566.575-2.472.755-.903.21-1.805.484-1.957.601-1.535 1.145-20.512 1.117-21.989-.027-.148-.121-1.234-.39-2.41-.602-1.144-.21-2.5-.543-3.011-.785-.48-.21-1.778-.754-2.829-1.176a42.42 42.42 0 0 1-3.554-1.746 49.866 49.866 0 0 0-2.442-1.414c-1.265-.695-1.687-1.086-5.12-4.52-3.524-3.523-3.977-4.003-3.977-4.335 0-.121-.391-.785-.84-1.477-.485-.691-1.176-1.957-1.54-2.773-.359-.84-.843-1.836-1.054-2.258-.238-.422-.57-1.504-.781-2.41-.211-.903-.48-1.805-.602-1.957-.332-.422-.906-4.7-.906-6.567 0-.87-.148-1.746-.328-1.925-.363-.364-.274-1.567.66-8.829.18-1.414.453-2.71.574-2.859.121-.18.39-.965.57-1.777.391-1.567 1.208-3.614 2.051-5.153.27-.511.63-1.203.813-1.566.18-.39.422-.691.57-.691.121 0 .211-.18.211-.391 0-.332 3.313-4.64 3.887-5.031.12-.09.332-.39.422-.692.12-.332.48-.632.812-.722.332-.09.602-.274.602-.395 0-.3 5.062-4.277 6.777-5.27 1.234-.753 4.008-2.167 8.043-4.097.574-.3 6.203-2.106 8.676-2.8.902-.27 2.68-.634 3.914-.813 1.234-.211 2.41-.453 2.562-.57.18-.122 1.985-.395 4.067-.575 2.078-.18 4.637-.48 5.722-.633 4.278-.632 19.305-.511 20.903.153.543.238.57.12.36-2.442-.118-1.476-.329-2.742-.45-2.832-.152-.09-.332-.66-.453-1.265-.211-1.114-1.356-3.551-2.438-5.211-.695-1.051-3.617-4.067-3.949-4.067-.117 0-.629-.3-1.144-.691-1.325-.965-3.461-1.926-4.758-2.168-.633-.121-1.145-.332-1.145-.453 0-1.324-19.457-1.535-25.3-.239-.754.149-2.5.48-3.915.723-1.418.238-2.832.57-3.164.723-.332.148-1.414.422-2.41.601-.992.18-2.078.453-2.41.602-.332.152-1.535.484-2.68.754-1.144.27-2.23.57-2.41.722-.18.122-.992.422-1.836.633-.812.211-1.656.512-1.808.633-.18.121-.993.39-1.809.602-.84.18-2.016.601-2.617.902-.633.332-1.207.574-1.297.574-.09 0-.152-6.297-.152-13.976 0-10.875.093-14.036.394-14.278.211-.18 1.055-.48 1.867-.691.844-.18 1.657-.453 1.805-.574.184-.121 1.176-.48 2.262-.754 1.082-.301 2.105-.63 2.258-.75.18-.153 1.113-.395 2.078-.602.996-.21 2.02-.484 2.258-.633.273-.12 1.507-.453 2.742-.722a58.95 58.95 0 0 0 2.863-.633c.328-.094 2.016-.363 3.762-.606 1.75-.238 3.586-.57 4.066-.722 1.75-.54 17.531-1.535 21.086-1.324.992.058 3.164.18 4.82.27ZM98.492 326.508v59.937H63.254V266.566h35.238Zm266.266-22.594c0 35.664.152 42.563.875 43.527.148.149.332.75.453 1.325.422 2.257 2.379 5.543 4.605 7.77 1.176 1.206 2.5 2.26 2.922 2.378.453.094.785.274.785.395 0 .117 1.055.539 2.348.96 1.93.606 2.953.723 5.965.723 2.11 0 3.945-.148 4.367-.328.39-.21 1.324-.512 2.078-.723.754-.21 2.11-.843 3.012-1.449 1.687-1.082 4.82-3.972 4.82-4.457 0-.148.422-.812.903-1.445.511-.664.906-1.324.906-1.504 0-.184.27-.816.57-1.418.332-.602.692-1.625.813-2.258.09-.664.3-1.324.453-1.476.754-.965.875-7.047.875-42.38v-36.988h35.238v119.88H420.06c-13.04 0-16.778-.09-16.957-.391-.122-.18-.27-3.043-.332-6.325-.06-3.253-.211-5.933-.329-5.933-.12 0-.484.36-.843.812-1.688 2.29-4.34 4.88-8.496 8.313-.602.48-1.836 1.144-4.547 2.469-1.235.601-2.59 1.296-3.012 1.507-.422.211-1.566.543-2.563.754-.992.211-1.867.48-1.957.602-.3.45-5.632.902-10.902.902-5.18 0-9.398-.36-10.633-.875-.332-.148-1.476-.511-2.562-.781-1.082-.27-2.078-.633-2.258-.754-.148-.121-.871-.422-1.566-.633-.723-.18-1.293-.449-1.293-.57 0-.121-.543-.39-1.207-.602-.66-.21-1.204-.484-1.204-.605 0-.117-.332-.36-.722-.54-2.59-1.175-8.465-6.687-10.934-10.241-1.508-2.168-3.828-6.508-4.308-8.102-.18-.633-.543-1.566-.754-2.05-.211-.512-.57-1.594-.754-2.41-.18-.84-.45-1.716-.602-2.016-.148-.274-.422-1.688-.601-3.164-.18-1.446-.512-2.922-.692-3.254-.273-.45-.394-11.204-.453-43.313l-.09-42.68h35.27Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#FF6200;fill-opacity:1"/><path d="M260.691 333.164c-1.472.149-2.98.39-3.312.54-.332.183-1.414.452-2.41.663-.961.18-2.258.543-2.86.813-4.52 1.957-6.718 3.254-8.222 4.82-1.446 1.508-2.895 4.309-3.133 6.055-.063.601-.274 1.386-.453 1.715-.332.695-.211 2.832.332 5.632.601 3.043 3.012 6.75 5.148 7.864 3.797 1.957 4.52 2.257 6.63 2.59 3.792.57 11.023.242 12.589-.602.27-.152 1.387-.664 2.469-1.145 1.086-.511 2.5-1.328 3.164-1.84.664-.511 1.414-1.113 1.687-1.324 1.715-1.293 4.88-6.535 5.301-8.703.09-.543.332-1.176.512-1.418.21-.27.36-3.043.422-8.012l.12-7.59-1.628-.179c-2.2-.273-13.04-.18-16.356.121Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#FF6200;fill-opacity:1"/></svg>
\ No newline at end of file
diff --git a/apps/storybook/static/clients/color/magalu.svg b/apps/storybook/static/clients/color/magalu.svg
new file mode 100644
index 000000000..036d2a977
--- /dev/null
+++ b/apps/storybook/static/clients/color/magalu.svg
@@ -0,0 +1,3 @@
+<svg width="99.415" height="21.686" fill="#0F88FF" viewBox="5.264 4.897 99.415 21.686" xmlns="http://www.w3.org/2000/svg">
+  <path d="M103.65 5.251h-2.249c-.642 0-1.029.388-1.029 1.029v6.651c0 2.442-1.317 3.823-3.148 3.823-1.929 0-3.02-1.252-3.02-3.661V6.28c0-.642-.388-1.029-1.03-1.029h-2.248c-.642 0-1.029.388-1.029 1.029v7.134c0 4.53 2.347 7.1 5.88 7.1 2.122 0 3.76-.706 4.917-2.153l.194.9c.129.583.514.9 1.124.9h1.638c.644 0 1.029-.388 1.029-1.029V6.28c-.001-.642-.386-1.029-1.029-1.029Zm-15.68 10.99h-4.048c-1.414 0-2.153-.74-2.153-2.153V6.28c0-.642-.388-1.029-1.029-1.029h-2.313c-.643 0-1.027.388-1.027 1.029v8.354c0 3.438 2.087 5.53 5.529 5.53h5.045c.642 0 1.029-.388 1.029-1.029V17.27c-.005-.642-.39-1.029-1.033-1.029ZM22.486 6.248c-.065-.67-.418-.996-1.06-.996h-1.703c-.546 0-.932.224-1.22.707l-4.146 7.005-3.855-7.005c-.258-.485-.68-.707-1.222-.707H7.45c-.643 0-.996.326-1.061.996l-1.06 12.853c-.065.707.291 1.06.964 1.06H8.35c.642 0 1.028-.322 1.06-.997l.45-7.197 2.474 4.462c.257.486.68.708 1.22.708h1.415c.546 0 .932-.194 1.22-.707l2.797-4.788.32 7.519c.032.678.389.996 1.03.996h2.216c.679 0 1.029-.353.963-1.06l-1.029-12.85Zm51.924-.997h-1.767c-.61 0-1.028.322-1.124.933l-.097.74c-.995-1.061-2.441-2.026-4.852-2.026-4.048 0-7.036 3.182-7.036 7.776 0 4.498 2.795 7.84 6.78 7.84 2.505 0 4.145-1.06 5.141-2.153l.161.9c.097.583.485.9 1.093.9h1.702c.644 0 1.028-.388 1.028-1.029V6.28c0-.642-.386-1.029-1.028-1.029Zm-6.903 11.503c-2.281 0-3.727-1.574-3.727-4.016 0-2.473 1.51-4.08 3.727-4.08 2.281 0 3.727 1.574 3.727 4.016-.005 2.474-1.514 4.08-3.727 4.08ZM56.963 5.251h-1.767c-.61 0-1.028.322-1.125.933l-.097.74c-.995-1.061-2.441-2.026-4.85-2.026-4.05 0-7.034 2.989-7.034 7.583 0 4.37 2.763 7.454 6.748 7.454 2.474 0 3.952-1.028 4.947-2.12v.739c0 2.57-1.445 4.21-4.497 4.21a8.887 8.887 0 0 1-3.632-.776c-.61-.291-1.092-.162-1.38.45l-.708 1.413c-.291.583-.194 1.06.354 1.382 1.703.963 3.791 1.35 5.815 1.35 5.044 0 8.258-3.182 8.258-7.616V6.28c-.003-.642-.388-1.029-1.031-1.029Zm-6.907 11.022c-2.218 0-3.728-1.478-3.728-3.76 0-2.41 1.574-3.855 3.728-3.855 2.216 0 3.726 1.317 3.726 3.791 0 2.217-1.573 3.824-3.726 3.824ZM39.516 5.25h-1.767c-.611 0-1.029.322-1.126.933l-.097.74c-.995-1.061-2.44-2.026-4.85-2.026-4.049 0-7.037 3.182-7.037 7.776 0 4.498 2.796 7.84 6.78 7.84 2.505 0 4.144-1.06 5.141-2.153l.162.9c.097.583.485.9 1.092.9h1.703c.643 0 1.028-.388 1.028-1.029V6.28c-.001-.642-.386-1.029-1.03-1.029Zm-6.909 11.503c-2.28 0-3.727-1.574-3.727-4.016 0-2.473 1.51-4.08 3.727-4.08 2.282 0 3.727 1.574 3.727 4.016 0 2.474-1.51 4.08-3.727 4.08Z"/>
+</svg>
diff --git a/apps/storybook/static/clients/color/marisa.svg b/apps/storybook/static/clients/color/marisa.svg
new file mode 100644
index 000000000..50889bafd
--- /dev/null
+++ b/apps/storybook/static/clients/color/marisa.svg
@@ -0,0 +1,35 @@
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 1148.76 246.62666"
+   height="246.62666"
+   width="1148.76"
+   xml:space="preserve"
+   id="svg2"
+   version="1.1"><defs
+     id="defs6" /><g
+     transform="matrix(1.3333333,0,0,-1.3333333,0,246.62667)"
+     id="g10"><g
+       transform="scale(0.1)"
+       id="g12"><path
+         id="path14"
+         style="fill:#ec008c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 2117.52,1683.44 c -119.7,106.4 -288.05,165 -474.04,165 -182.14,0 -357.68,-67.44 -481.62,-185.01 l -10.25,-9.72 -10.25,9.72 c -123.97,117.57 -299.508,185.01 -481.63,185.01 -185.992,0 -354.339,-58.6 -474.05,-165 C 71.0508,1581.54 0,1475.73 0,1263.43 L 0.046875,29.5313 H 335.629 l 0.059,1233.8987 c 0,162.27 142.339,289.38 324.042,289.38 181.7,0 324.02,-127.11 324.02,-289.38 L 983.789,29.5313 H 1319.4 l 0.06,1233.8987 c 0,162.27 142.33,289.38 324.02,289.38 181.7,0 324.03,-127.11 324.03,-289.38 l 0.05,-1233.8987 h 335.56 l 0.09,1233.8987 c 0,212.3 -71.05,318.11 -185.69,420.01" /><path
+         id="path16"
+         style="fill:#ec008c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 3504.05,575.949 c 0,-82.84 -29.76,-158.867 -83.8,-214.051 -59.53,-60.777 -144.31,-92.918 -245.19,-92.918 -70.26,0 -199.46,13.661 -275.33,105.219 -59.07,71.27 -68.16,174.711 -22.62,257.422 80.56,146.289 264.55,201.418 433.92,236.051 l 18.7,3.808 c 37.53,7.598 125.4,25.43 156.45,31.993 l 17.87,3.789 z m 146.4,1109.321 c -113.8,106.74 -274.86,163.17 -465.77,163.17 -317.88,0 -499.08,-181.34 -586.24,-268.7 l 138.27,-242.95 0.71,0.76 c 82.77,89.66 309.01,287.07 621.38,183.98 l 1.41,-0.55 c 64.39,-28.78 141.13,-87.22 141.32,-202.13 l 0.04,-0.75 c 1.65,-14.43 2.48,-29.78 2.48,-45.64 v -95.27 l -360.97,-71.74 c -173.06,-34.04 -313.11,-92.59 -416.3,-174.012 -127.81,-100.887 -192.62,-231.629 -192.62,-388.637 0,-166.18 69.13,-306.531 199.92,-405.903 C 2850.25,48.6211 3008,0 3178.26,0 c 169.84,0 328.85,56.1016 447.75,157.969 124.56,106.691 193.16,255.133 193.16,417.98 v 696.511 c 0,178.39 -50.46,301.84 -168.72,412.81" /><path
+         id="path18"
+         style="fill:#ec008c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 5084.46,1702.63 c -26.81,23.65 -55.22,45.06 -84.43,63.64 -68.16,43.35 -137.48,69.86 -206.04,78.76 -133.05,17.26 -290.73,-14.26 -411.52,-82.32 -38.75,-21.84 -74.36,-47.89 -105.85,-77.44 C 4167.19,1582.61 4107.9,1486.42 4107.9,1272.46 V 29.5313 h 315.11 l 0.04,1175.2487 c 0,28.15 0,56.31 0.02,84.45 0.03,30.09 0.68,57.24 8.5,84.92 12.69,44.9 40.89,86.86 79.42,118.16 17.43,14.17 36.23,25.8 55.87,34.58 122.58,50.87 256.69,21.07 361.68,-79.34 140.52,130.84 193.24,179.91 213.49,198.56 -16.74,18.51 -50.71,50.46 -57.57,56.52" /><path
+         id="path20"
+         style="fill:#ec008c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 8300.54,575.949 c 0,-82.84 -29.76,-158.867 -83.8,-214.051 -59.53,-60.777 -144.32,-92.918 -245.2,-92.918 -70.25,0 -199.46,13.661 -275.33,105.219 -59.07,71.27 -68.15,174.711 -22.62,257.422 80.56,146.289 264.55,201.418 433.92,236.051 l 18.09,3.672 c 37.64,7.648 125.86,25.527 157.08,32.129 l 17.86,3.789 z M 7981.17,1848.44 c -317.88,0 -499.07,-181.34 -586.25,-268.7 l 138.27,-242.95 0.72,0.76 c 82.78,89.66 309.02,287.07 621.38,183.98 l 1.41,-0.55 c 64.39,-28.79 141.13,-87.23 141.33,-202.13 l 0.04,-0.75 c 1.64,-14.43 2.47,-29.78 2.47,-45.64 v -95.27 l -360.98,-71.74 c -173.06,-34.04 -313.1,-92.59 -416.3,-174.012 -127.8,-100.887 -192.62,-231.637 -192.62,-388.637 0,-166.18 69.14,-306.531 199.93,-405.903 C 7646.74,48.6211 7804.48,0 7974.76,0 c 169.82,0 328.83,56.1016 447.74,157.969 124.56,106.691 193.15,255.14 193.15,417.98 v 696.511 c 0,166.49 -58.34,309.24 -168.72,412.81 -113.8,106.74 -274.86,163.17 -465.76,163.17" /><path
+         id="path22"
+         style="fill:#ec008c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 6805.51,1000.59 c -81.14,43.27 -165.7,75.12 -259.85,109.36 l -13.81,5 c -60.74,22.02 -123.46,44.77 -181.53,74.11 -73.25,36.99 -114.07,77.46 -128.48,127.35 l -0.46,1.54 c -12.63,46.04 -2.06,95.42 28.2,132.33 28.44,34.67 72.52,61.43 131.02,79.53 25.9,8.01 53.14,13.75 80.97,17.06 100.64,12.05 204.26,-5.98 299.65,-52.11 63.99,-30.93 124.13,-73.42 178.77,-126.25 2.56,-2.49 24.94,-24.9 30.17,-30.95 l 0.7,-0.81 0.46,0.8 c 0.97,1.75 129.76,228.04 137.81,242.19 -87.21,87.39 -268.4,268.7 -586.23,268.7 -196.61,0 -374.66,-62.73 -488.48,-172.09 -118.48,-113.87 -164.76,-282.73 -120.77,-440.7 33.55,-120.45 129.45,-228.08 270.03,-303.08 87.92,-46.91 184.46,-82.875 268.06,-112.91 l 10.58,-3.808 c 73.21,-26.27 148.88,-53.411 215.39,-94.723 78.38,-48.688 118.13,-111.719 118.13,-187.34 0,-104.141 -84.98,-177.269 -176.85,-217.301 -102.33,-44.59 -221.23,-30.129 -326.42,1.231 -143.06,41.961 -287.64,188.203 -289.07,189.679 L 5861.38,268.559 c 87.27,-87.457 268.44,-268.5472812 586.08,-268.5472812 25.72,0 52.01,1.1679712 78.12,3.4765612 l 16.08,1.41016 V 4.48047 l 0.6,0.05859 c 140.5,14.22264 267.43,61.51954 367.05,136.80094 130.03,98.25 201.63,237.621 201.63,392.449 0,111.211 -31.14,212.09 -90.06,291.723 -49.51,66.926 -119.96,124.203 -215.37,175.078" /><path
+         id="path24"
+         style="fill:#ec008c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 5630.39,1818.29 H 5315.26 V 29.5391 h 315.13 V 1818.29" /></g></g></svg>
\ No newline at end of file
diff --git a/apps/storybook/static/clients/color/netshoes.svg b/apps/storybook/static/clients/color/netshoes.svg
new file mode 100644
index 000000000..1b92219b3
--- /dev/null
+++ b/apps/storybook/static/clients/color/netshoes.svg
@@ -0,0 +1,35 @@
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 160 25" style="enable-background:new 0 0 160 25;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#8200FF;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M56.6,17.8c0-0.4,0.1-1,0.3-2.3l1.2-5.3h4.9l1.1-5h-4.9L60.3,0H54l-3.3,15.6c-0.4,1.8-0.5,2.7-0.5,3.4
+			c0,3.9,2.8,6,6.2,6c1.5,0,2.5-0.2,3.7-0.5l1.1-5c-0.8,0.1-1.6,0.2-2.3,0.2C57.4,19.6,56.6,19,56.6,17.8L56.6,17.8z"/>
+		<path class="st0" d="M41.7,4.7c-7,0-11.3,5-11.3,12c0,5.3,3.7,8.3,8.9,8.3c2.5,0,4.4-0.2,6.3-0.8l1-4.9c-1.6,0.4-3.3,0.5-5.4,0.5
+			c-3.3,0-5.2-1.1-5.2-3.5c0-0.1,0-0.1,0-0.2c1.5,0.2,3,0.3,5.2,0.3c4.7,0,7.8-1.7,7.8-6.2C49.1,7.3,47.2,4.7,41.7,4.7z M43.4,11
+			c-0.2,1.2-1.2,1.9-4,1.9c-0.6,0-1.5-0.1-2.5-0.2c0.7-1.9,2.1-3.6,4.5-3.6c1.4,0,2.1,0.7,2.1,1.6C43.4,10.8,43.4,10.9,43.4,11
+			L43.4,11z"/>
+		<path class="st0" d="M113.3,4.8c-6.3,0-9.6,3.4-10.8,9.3c-0.2,1.1-0.3,2.1-0.3,3c0,5.4,3.7,7.9,8.6,7.9c6.1,0,9.5-3.1,10.8-9.3
+			c0.2-1.1,0.3-2,0.3-2.9C121.8,7.7,118.6,4.8,113.3,4.8z M115.6,14.3l-0.3,1.5c-0.5,2.3-1.8,3.7-4.2,3.7c-1.9,0-2.7-1.2-2.7-2.8
+			c0-0.4,0-0.8,0.1-1.3l0.3-1.5c0.5-2.3,1.7-3.8,4-3.8c1.9,0,2.8,1.3,2.8,3C115.7,13.5,115.7,13.9,115.6,14.3L115.6,14.3z"/>
+		<path class="st0" d="M21.6,15.5c-0.6,2.8-1.2,3.4-1.8,3.4c-0.9,0-1-0.8-1.3-2.8l-0.9-5.2c-0.7-4.5-3.1-6.1-6.6-6.1
+			c-4.7,0-7.6,3.1-8.9,9.5L0,24.5h6.1l2.2-10.3c0.6-2.8,1.2-3.4,1.8-3.4c0.9,0,1,0.8,1.3,2.8l0.9,5.2c0.7,4.5,3.1,6.1,6.6,6.1
+			c4.7,0,7.6-3.1,8.9-9.5l2.2-10.3h-6.1L21.6,15.5z"/>
+		<path class="st0" d="M134.8,16.5c4.7,0,7.8-1.7,7.8-6.2c0-3.1-1.9-5.6-7.4-5.6c-7,0-11.3,5-11.3,12c0,5.3,3.7,8.3,8.9,8.3
+			c2.5,0,4.4-0.2,6.3-0.8l1-4.9c-1.6,0.4-3.3,0.5-5.4,0.5c-3.3,0-5.2-1.1-5.2-3.5c0-0.1,0-0.1,0-0.2C131,16.4,132.5,16.5,134.8,16.5
+			z M134.7,9.1c1.4,0,2.1,0.7,2.1,1.6c0,0.1,0,0.2,0,0.3c-0.2,1.2-1.2,1.9-4,1.9c-0.6,0-1.5-0.1-2.5-0.2
+			C131,10.8,132.3,9.1,134.7,9.1L134.7,9.1z"/>
+		<path class="st0" d="M74.9,9.5c1.2,0,2.8,0.2,4.7,0.4l1-4.6c-1.8-0.4-4-0.6-6.2-0.6c-4.6,0-8.9,1.8-8.9,6c0,2.1,1,3.1,3.9,5.3
+			c2,1.4,2.9,2.1,2.9,2.6c0,1-1.1,1.3-3.6,1.3c-1.5,0-3.2-0.2-5.1-0.5l-1,4.9c1.7,0.4,4.2,0.7,7.1,0.7c5.2,0,9.1-2.3,9.1-6.8
+			c0-2.3-1.6-3.8-4.4-5.7l-1.2-0.8c-0.8-0.6-1.2-0.8-1.2-1.2C71.9,9.7,72.9,9.5,74.9,9.5L74.9,9.5z"/>
+		<path class="st0" d="M154.3,9.5c1.2,0,2.8,0.2,4.7,0.4l1-4.6c-1.8-0.4-4-0.6-6.2-0.6c-4.6,0-8.9,1.8-8.9,6c0,2.1,1,3.1,3.9,5.3
+			c2,1.4,2.9,2.1,2.9,2.6c0,1-1.1,1.3-3.6,1.3c-1.5,0-3.2-0.2-5.1-0.5l-1,4.9c1.7,0.4,4.2,0.7,7.1,0.7c5.2,0,9.1-2.3,9.1-6.8
+			c0-2.3-1.6-3.8-4.4-5.7l-1.2-0.8c-0.8-0.6-1.2-0.8-1.2-1.2C151.3,9.7,152.3,9.5,154.3,9.5L154.3,9.5z"/>
+		<path class="st0" d="M95.5,4.8c-2.2,0-4,0.7-5.7,2.1L91.2,0H85l-5.2,24.5h6.3L89,10.8c1.1-0.5,2.2-0.8,3.2-0.8
+			c1.4,0,2.1,0.5,2.1,1.6c0,0.2,0,0.4-0.1,0.7l-2.6,12.2h6.3l2.6-12.3c0.2-0.8,0.2-1.5,0.2-2.2C100.8,6.3,98.2,4.8,95.5,4.8
+			L95.5,4.8z"/>
+	</g>
+</g>
+</svg>
diff --git a/apps/storybook/static/clients/color/nzn.svg b/apps/storybook/static/clients/color/nzn.svg
new file mode 100644
index 000000000..7805a75ce
--- /dev/null
+++ b/apps/storybook/static/clients/color/nzn.svg
@@ -0,0 +1,26 @@
+<svg width="125" height="32" viewBox="0 0 125 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13019_2671)">
+<mask id="mask0_13019_2671" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-1" y="0" width="126" height="32">
+<path d="M124.97 0.000701904H-0.00537109V31.9993H124.97V0.000701904Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_13019_2671)">
+<mask id="mask1_13019_2671" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-1" y="0" width="126" height="32">
+<path d="M124.97 0.000701904H-0.00537109V31.826H124.97V0.000701904Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_13019_2671)">
+<path d="M-0.00537109 3.29347C1.40008 3.15476 2.81612 3.16303 4.21986 3.31819C5.11939 3.43354 5.86287 3.98002 6.53786 4.56771C7.40834 5.34226 8.19201 6.20966 8.875 7.15459C11.4737 10.6551 14.0714 14.1564 16.6683 17.6587L17.1995 18.3645C17.2146 18.0294 17.231 17.8152 17.231 17.6038C17.231 13.0328 17.242 8.4604 17.2201 3.88801C17.2201 3.35116 17.357 3.20149 17.8937 3.21384C19.4888 3.25091 21.0866 3.24266 22.6857 3.21384C23.1335 3.21384 23.2635 3.33468 23.2622 3.78915C23.2485 11.8583 23.2485 19.9275 23.2622 27.9966C23.2622 28.4786 23.1252 28.6269 22.6515 28.6077C21.8081 28.5706 20.962 28.572 20.1199 28.6077C18.9178 28.6516 17.8923 28.2342 16.9709 27.5092C15.9919 26.7403 15.206 25.7942 14.4708 24.8001C11.8237 21.2246 9.17213 17.6495 6.51595 14.0749C6.38726 13.9006 6.24212 13.733 6.01483 13.4378V14.2466C6.01483 18.819 6.01484 23.39 6.02715 27.9623C6.02715 28.458 5.92995 28.6392 5.39461 28.6173C3.59828 28.5445 1.79782 28.6887 0.00148141 28.539L-0.00537109 3.29347Z" fill="white"/>
+<path d="M114.403 15.7967C114.795 15.6306 115.022 15.2763 115.308 14.9921C116.62 13.6918 117.931 12.3832 119.213 11.0596C119.573 10.6861 119.78 10.6381 120.171 11.0431C121.576 12.5082 123.02 13.9348 124.457 15.3684C124.61 15.5221 124.715 15.7528 124.976 15.7803V16.0549C124.82 16.3326 124.623 16.5853 124.392 16.8046C121.332 19.8666 118.271 22.9281 115.209 25.9891C114.988 26.2102 114.825 26.662 114.35 26.4134C114.213 26.1086 114.255 25.7845 114.255 25.4674C114.255 22.4795 114.255 19.4917 114.255 16.4256C112.794 17.8893 111.38 19.3091 109.974 20.7151C109.197 21.4895 109.133 21.4882 108.342 20.6973C107.064 19.4249 105.791 18.1507 104.523 16.8746C104.29 16.6571 104.088 16.4085 103.922 16.1359C103.74 15.8613 103.962 15.7034 104.108 15.5551C105.644 13.9989 107.187 12.4492 108.74 10.9058C109.014 10.6312 109.288 10.5996 109.562 10.8866C111.176 12.5192 112.86 14.0873 114.403 15.7967Z" fill="#03A2DC"/>
+<path d="M114.403 15.7967C114.116 15.7789 113.992 15.5344 113.816 15.3628C112.377 13.9302 110.943 12.4935 109.513 11.0527C109.321 10.8605 109.185 10.6325 108.871 10.9552C107.275 12.5864 105.657 14.1943 104.051 15.8145C103.998 15.8868 103.956 15.9663 103.926 16.0507C103.934 16.0646 103.938 16.08 103.939 16.0958C103.939 16.1116 103.936 16.1273 103.93 16.1417C103.923 16.1561 103.913 16.1688 103.901 16.1787C103.889 16.1887 103.875 16.1956 103.859 16.199L103.609 16.1702C103.532 15.9782 103.505 15.77 103.529 15.5646C103.538 12.5699 103.529 9.57526 103.529 6.58191C103.529 6.18924 103.546 5.80338 103.75 5.45324C105.363 3.81929 106.974 2.18531 108.586 0.551338C108.759 0.374211 108.922 0.184726 109.091 0.00210571H109.228C110.665 1.61823 112.24 3.09567 113.776 4.6198C113.999 4.82096 114.174 5.06941 114.289 5.34707C114.404 5.6247 114.456 5.92461 114.442 6.22492C114.402 9.41322 114.411 12.6057 114.403 15.7967Z" fill="#6DC6EA"/>
+<path d="M103.859 16.199C103.881 16.1496 103.903 16.1002 103.926 16.0507C105.512 17.6284 107.108 19.1951 108.674 20.7906C109.032 21.1559 109.232 21.219 109.623 20.8112C110.993 19.3777 112.418 17.9868 113.821 16.5821C113.979 16.4256 114.146 16.2773 114.435 16.0068V26.4628C112.857 28.0629 111.281 29.6649 109.705 31.2685C109.536 31.443 109.306 31.5707 109.229 31.8276H109.092C107.478 30.192 105.87 28.5513 104.244 26.9297C104.112 26.8084 104.008 26.6593 103.941 26.4931C103.873 26.3269 103.843 26.1478 103.852 25.9685C103.866 22.7157 103.86 19.4574 103.859 16.199Z" fill="#0062A8"/>
+<path d="M74.4605 18.4056V13.6369C74.4605 10.3923 74.4702 7.14626 74.4497 3.90167C74.4497 3.39225 74.5414 3.19592 75.1053 3.21515C76.6555 3.25771 78.2068 3.25496 79.7605 3.21515C80.3232 3.20141 80.485 3.35244 80.4835 3.92914C80.4627 11.904 80.4579 19.8794 80.4699 27.8551C80.4657 27.9008 80.4657 27.9468 80.4699 27.9925C80.5424 28.4648 80.3588 28.6323 79.8728 28.6117C79.0309 28.5746 78.1847 28.5746 77.3413 28.6117C76.1405 28.657 75.1138 28.2478 74.184 27.5215C73.2256 26.7691 72.4507 25.8408 71.7292 24.8659C69.082 21.2904 66.4349 17.7144 63.7881 14.138C63.651 13.9444 63.4965 13.7522 63.3253 13.5256C63.1786 13.8126 63.2459 14.0625 63.2459 14.3001C63.2459 18.8477 63.232 23.3954 63.2541 27.943C63.2541 28.4826 63.117 28.6296 62.5791 28.6172C60.9825 28.5829 59.3862 28.5925 57.7868 28.6172C57.3678 28.6172 57.2024 28.5444 57.2036 28.068C57.2202 19.9787 57.2202 11.8889 57.2036 3.7987C57.2036 3.35793 57.3105 3.20552 57.7663 3.22749C58.5636 3.2687 59.3626 3.2687 60.1599 3.22749C61.5726 3.14511 62.7352 3.6765 63.7703 4.58136C64.5875 5.31142 65.3246 6.12711 65.9691 7.01447L73.8966 17.6696C74.0403 17.8591 74.1867 18.0568 74.4605 18.4056Z" fill="white"/>
+<path d="M42.2595 9.28829H41.516C37.4084 9.28829 33.3011 9.28829 29.2018 9.29789C28.7472 9.29789 28.5665 9.21415 28.5761 8.70887C28.6089 7.06116 28.6089 5.41573 28.5761 3.7726C28.5665 3.29341 28.7376 3.21378 29.1607 3.21378C36.5267 3.22476 43.8924 3.22476 51.2575 3.21378C51.752 3.21378 51.8806 3.37443 51.8531 3.83989C51.8087 4.45562 51.8087 5.07374 51.8531 5.68944C52.0176 7.59116 51.2973 9.1606 50.1363 10.5941C49.1848 11.7708 48.073 12.791 46.9872 13.8305C44.1912 16.5208 41.392 19.2079 38.5888 21.8918C38.4122 22.0621 38.2368 22.2337 37.9219 22.5399H38.782C42.9098 22.5399 47.0364 22.5495 51.1645 22.5303C51.6807 22.5303 51.8736 22.6306 51.8588 23.199C51.8175 24.8206 51.8314 26.4436 51.8588 28.0652C51.8588 28.4772 51.7532 28.6145 51.3275 28.6145C43.9156 28.6026 36.5043 28.6026 29.0936 28.6145C28.7171 28.6145 28.5747 28.5225 28.5857 28.1202C28.613 27.0217 28.5857 25.9232 28.6062 24.8248C28.635 23.6027 29.2374 22.6045 29.9274 21.6557C30.6142 20.7426 31.3812 19.8934 32.2195 19.1182C35.4689 16.0059 38.7189 12.8981 41.9691 9.79495C42.1116 9.68622 42.2659 9.59409 42.4292 9.52034L42.2595 9.28829Z" fill="white"/>
+<path d="M103.751 5.45325C103.756 8.80906 103.762 12.1653 103.767 15.5221C103.785 15.7496 103.729 15.9769 103.608 16.1702C102.061 17.7231 100.504 19.2665 98.9752 20.8386C98.6561 21.1668 98.481 21.1517 98.1701 20.8386C96.664 19.3008 95.1498 17.7863 93.6287 16.2718C93.411 16.0548 93.2794 15.912 93.5725 15.6209C96.9734 12.2367 100.366 8.84748 103.751 5.45325Z" fill="#06A0E1"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_13019_2671">
+<rect width="124.981" height="32" fill="white" transform="translate(-0.00537109)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/storybook/static/clients/color/renner.svg b/apps/storybook/static/clients/color/renner.svg
new file mode 100644
index 000000000..2b96536c1
--- /dev/null
+++ b/apps/storybook/static/clients/color/renner.svg
@@ -0,0 +1,4 @@
+<svg width="500" height="92" version="1.1" viewBox="0 0 500 92" xmlns="http://www.w3.org/2000/svg">
+<path d="m45.761 0.24644c-25.257 0-45.761 20.504-45.761 45.761s20.504 45.746 45.761 45.746 45.746-20.489 45.746-45.746-20.489-45.761-45.746-45.761zm139.94 9.3711v72.765h39.314v-4.978h-28.788v-30.018h25.714v-4.9929h-25.714v-27.709h27.858v-5.0679zm56.662 0v72.765h6.0575v-53.963l43.227 53.963h4.6781v-72.765h-6.0574v54.038l-43.302-54.038zm74.849 0v72.765h6.0575v-53.963l43.302 53.963h4.6782v-72.765h-6.1325v54.038l-43.228-54.038zm74.234 0v72.765h39.298v-4.978h-28.788v-30.018h25.73v-4.9929h-25.73v-27.709h27.874v-5.0679zm-272.84 0.075v72.78h10.526v-35.085h8.2165l22.341 35.085h11.59l-22.881-35.25 0.0752-0.075c12.129-1.9192 19.117-8.7501 19.117-19.267 0-10.517-9.2905-18.187-22.341-18.187zm328.72 0v72.78h10.526v-35.085h8.2166l22.326 35.085h11.605l-22.881-35.25 0.075-0.075c12.129-1.9192 19.117-8.7501 19.117-19.267 0-10.517-9.2906-18.187-22.341-18.187zm-318.2 4.903h12.355c8.7516 0 15.204 5.7691 15.204 13.6s-7.1377 14.124-17.348 14.124h-10.211zm328.72 0h12.355c8.7516 0 15.204 5.7691 15.204 13.6s-7.1376 14.124-17.348 14.124h-10.211z" fill="#d72027"/>
+<path d="m58.805 20.359c-1.9192 1.2283-6.6788 4.9132-11.746 13.051 0.76769-2.5334 2.6869-9.6728 0.99799-13.127-1.0748-2.303-3.992-3.6081-9.596-2.6101-3.6849 0.69091-12.974 5.297-19.422 14.816-0.53738 0.76769-0.38384 1.7657 0 2.3798 0.23031 0.46061 1.0748 1.3818 1.9192 0.46061 0 0 3.0707-3.2243 4.9132-4.9132 2.4566-2.1495 3.4546-2.3798 3.9152-2.3798 1.2283 0.0768 1.4586 1.0748 0.99799 2.6101-0.69091 1.996-14.356 39.152-14.97 40.764 0 0.0768-0.38384 0.76768 0.23031 1.5354 0.2303 0.2303 0.53738 0.46061 1.1515 0.46061h14.125c1.0748 0 1.3818-0.84445 1.3818-0.84445 4.2223-10.594 7.9839-18.885 11.285-25.41 1.996-3.9152 6.6021-11.976 12.283-18.271 1.5354-1.5354 3.9152-1.6889 4.6829-0.38384 0.38384 3.1475 2.4566 7.0627 6.295 7.4465 3.301 0.38384 7.7536-2.0728 9.4425-7.6768 2.1495-7.1394-4.6061-16.582-17.733-7.9071" fill="#fff"/>
+</svg>
diff --git a/apps/storybook/static/clients/color/stone.svg b/apps/storybook/static/clients/color/stone.svg
new file mode 100644
index 000000000..dd8a085bf
--- /dev/null
+++ b/apps/storybook/static/clients/color/stone.svg
@@ -0,0 +1,16 @@
+<svg width="122" height="24" viewBox="0 0 122 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_26171_32334)">
+<path d="M0.898438 16.1713H4.97805C5.1606 17.9207 6.5081 19.0152 8.51154 19.0152C10.2597 19.0152 11.4262 18.1405 11.4262 17.046C11.4262 12.9637 1.37184 16.8633 1.37184 9.09968C1.37184 5.89204 4.17667 3.63184 7.96543 3.63184C12.2647 3.63184 15.215 6.00196 15.3975 9.5734H11.3164C11.0627 7.85966 9.49548 6.98499 8.07527 6.98499C6.47251 6.98499 5.41587 7.71414 5.41587 8.95416C5.41587 12.9281 15.6172 8.55321 15.6172 16.8649C15.6172 20.328 12.8124 22.5882 8.51309 22.5882C4.06683 22.5866 1.11657 20.1081 0.898438 16.1713Z" fill="#00DA00"/>
+<path d="M21.8764 0.599121V3.92132H26.3428V7.67543H21.8764V15.6961C21.8764 17.5553 22.8603 18.5028 24.5358 18.5028H26.3428V22.294H24.0253C20.0184 22.294 17.3945 19.9611 17.3945 15.8787V0.599121H21.8764Z" fill="#00DA00"/>
+<path d="M26.7119 13.1092C26.7119 7.64138 30.7188 3.63184 36.33 3.63184C41.9041 3.63184 45.911 7.64138 45.911 13.1092C45.911 18.5771 41.9041 22.5882 36.33 22.5882C30.7188 22.5866 26.7119 18.5771 26.7119 13.1092ZM41.3936 13.1092C41.3936 9.79168 39.353 7.49586 36.33 7.49586C33.2699 7.49586 31.2293 9.79322 31.2293 13.1092C31.2293 16.4268 33.2699 18.7226 36.33 18.7226C39.353 18.7226 41.3936 16.4268 41.3936 13.1092Z" fill="#00DA00"/>
+<path d="M55.5857 3.63025C60.7885 3.63025 63.5748 6.61961 63.5748 10.9217V22.2955H59.0945V11.8692C59.0945 9.35353 57.8816 7.60419 55.5857 7.60419C53.2899 7.60419 52.077 9.35353 52.077 11.8692V22.2955H47.5967V10.9217C47.5967 6.61961 50.3829 3.63025 55.5857 3.63025Z" fill="#00DA00"/>
+<path d="M83.1396 16.1713C82.448 20.0725 79.0228 22.5866 74.5054 22.5866C68.4951 22.5866 65.1426 17.8479 65.1426 13.0349C65.1426 8.18627 68.13 3.63025 74.1403 3.63025C80.2976 3.63025 83.0653 8.11351 83.0653 12.4884C83.0653 13.1076 83.0282 13.6557 82.9926 14.0195H69.4403C69.7683 16.9717 71.6619 18.8681 74.5039 18.8681C76.7997 18.8681 78.2926 17.9206 78.766 16.1713H83.1396ZM69.5502 11.0673H78.585C78.4025 8.73429 76.7997 6.98495 74.1403 6.98495C71.6279 6.98495 70.0236 8.29618 69.5502 11.0673Z" fill="#00DA00"/>
+<path d="M110.66 9.51917C108.754 9.51917 107.458 10.9682 107.458 13.1061C107.458 15.2177 108.754 16.6667 110.66 16.6667C112.566 16.6667 113.863 15.2161 113.863 13.1061C113.863 10.9682 112.566 9.51917 110.66 9.51917Z" fill="#00DA00"/>
+<path d="M110.815 2.81445H96.639C90.9582 2.81445 86.3525 7.42311 86.3525 13.1077C86.3525 18.7923 90.9582 23.4009 96.639 23.4009H110.815C116.496 23.4009 121.101 18.7923 121.101 13.1077C121.101 7.42311 116.496 2.81445 110.815 2.81445ZM96.6436 19.718C92.6785 19.718 90.0346 16.8432 90.0346 13.1046C90.0346 9.36596 92.6785 6.49116 96.6436 6.49116C99.9992 6.49116 102.668 8.52535 102.897 11.5023H99.3386C99.1359 10.3583 98.0422 9.51767 96.7457 9.51767C94.8397 9.51767 93.7212 11.0178 93.7212 13.1046C93.7212 15.1899 94.8645 16.6652 96.7968 16.6652C98.0932 16.6652 99.1359 15.8772 99.3897 14.7316H102.999C102.617 17.5817 99.9729 19.718 96.6436 19.718ZM110.66 19.718C106.72 19.718 103.899 16.9206 103.899 13.1046C103.899 9.28856 106.721 6.49116 110.66 6.49116C114.6 6.49116 117.421 9.28856 117.421 13.1046C117.421 16.9206 114.599 19.718 110.66 19.718Z" fill="#00DA00"/>
+</g>
+<defs>
+<clipPath id="clip0_26171_32334">
+<rect width="122" height="24" fill="#00DA00"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/storybook/static/clients/color/zoop.svg b/apps/storybook/static/clients/color/zoop.svg
new file mode 100644
index 000000000..f3eb22209
--- /dev/null
+++ b/apps/storybook/static/clients/color/zoop.svg
@@ -0,0 +1,7 @@
+<svg width="778" height="254" viewBox="0 0 778 254" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M492.177 67.7208C497.217 67.824 505.664 67.5856 510.613 67.4706C553.575 66.4732 586.365 88.9827 574.913 135.639C571.009 151.538 567.872 166.533 556.477 179.611C540 198.553 517.462 205.445 493.218 207.443C448.258 211.855 398.547 201.754 409.14 143.883C416.775 102.159 435.633 78.2946 478.537 69.6301C483.012 68.7269 487.638 68.3731 492.177 67.7208ZM488.546 170.081C499.978 169.849 512.592 165.108 520.629 156.827C527.485 149.763 530.444 139.556 532.153 130.103C533.338 123.552 532.29 116.714 527.204 112.017C519.376 104.79 507.537 105.533 497.631 105.656C497.415 105.659 497.274 105.675 497.065 105.711C470.846 107.885 460.515 114.081 453.887 139.733C446.784 167.216 466.273 172.043 488.546 170.081Z" fill="#FE7300"/>
+<path d="M300.557 67.7614C348.329 64.5346 394.882 77.7616 380.984 136.15C377.232 151.905 373.64 167.659 362.495 180.252C345.503 199.455 322.089 205.515 297.494 207.648C295.271 207.835 293.042 207.953 290.811 208.001C268.664 208.632 243.992 207.54 226.611 191.272C206.03 172.008 214.996 140.268 222.605 117.005C224.201 112.125 235.349 96.2709 239.074 92.3155C253.116 77.4081 280.445 68.1369 300.557 67.7614ZM294.837 170.07C313.504 169.871 330.727 158.873 336.008 140.436C338.693 131.065 341.714 119.959 333.766 112.069C327.686 106.033 311.877 104.331 303.671 105.704C279.787 107.652 267.204 112.849 260.446 138.384C253.328 165.281 270.357 172.384 294.837 170.07Z" fill="#FE7300"/>
+<path d="M657.346 83.9749C667.419 75.8127 679.213 70.6655 691.743 69.0686C718.699 65.6337 753.624 64.6675 770.666 89.9942C776.603 98.8162 776.287 105.293 777.875 114.833V119.323C776.971 122.607 776.584 129.309 775.904 133.066C771.422 157.945 762.644 182.864 739.05 195.567C718.243 208.111 682.665 211.278 659.587 205.472C650.889 203.302 642.845 199.076 636.126 193.149L627.709 229.33C626.326 235.356 625.035 241.447 623.405 247.405C622.661 250.133 621.529 252.435 619.087 254H584.231C579.661 251.278 579.441 248.366 580.505 243.536C585.856 219.245 591.759 195.074 597.494 170.872C603.598 145.131 609.101 119.142 616.158 93.6482C617.818 87.644 619.368 78.2715 622.118 73.059C625.259 70.7817 636.669 71.5919 640.908 71.6561C652.583 71.833 659.576 68.7611 657.346 83.9749ZM682.927 170.261C710.924 169.069 728.772 157.22 732.95 128.492C736.178 106.289 712.595 104.422 696.886 105.709C681.328 107.04 666.625 109.815 655.926 122.453C653.932 124.762 652.295 127.356 651.072 130.149C649.476 133.893 646.221 148.612 646.575 152.635C646.996 157.155 649.165 161.33 652.621 164.273C659.432 169.965 674.256 170.716 682.927 170.261Z" fill="#FE7300"/>
+<path d="M55.5464 0H276.578C270.433 6.1891 258.813 15.5212 251.836 21.4673L208.359 58.6045L149.906 108.358C138.857 117.772 127.88 127.423 116.53 136.411C111.634 140.288 107.85 136.291 104.362 132.861C98.3348 126.88 91.3039 121.521 85.8664 115.012C82.9707 111.545 84.1113 107.947 87.0446 105.088C91.3184 100.923 96.0696 97.1396 100.647 93.316C108.115 87.0271 115.615 80.7762 123.147 74.5636C134.604 65.1265 152.138 49.6454 163.696 42.0941C158.902 42.4993 151.299 42.3322 146.386 42.3345L73.564 42.347C66.2706 42.3493 58.9059 42.5752 51.6202 42.3288C50.2369 42.2817 48.7263 42.2388 47.4763 41.5812C45.8275 40.7137 44.486 39.7258 43.8722 37.8678C42.4463 33.5525 48.3229 8.9203 50.5718 4.35893C51.7276 2.01492 53.1037 0.826445 55.5464 0Z" fill="#FE9A00"/>
+<path d="M8.61432 163.794C10.4583 162.641 11.6396 161.885 13.8578 161.864C26.3041 161.751 38.8865 161.878 51.3295 161.879L129.744 161.889L168.318 161.847C171.94 161.841 175.575 161.823 179.196 161.816C181.461 161.811 183.806 161.694 186.027 162.147C189.117 162.777 191.649 165.485 192.002 168.621C192.062 169.153 192.136 169.752 192.107 170.297C190.846 178.61 188.504 186.784 186.695 194.997C186.224 197.136 184.59 201.711 182.725 202.899C181.371 203.761 176.903 204.272 175.25 204.277C162.469 204.318 149.638 204.294 136.86 204.282L61.3572 204.244L25.1837 204.285C20.9196 204.291 16.6252 204.366 12.3644 204.301C7.37739 204.225 3.36444 205.019 0.629855 200.034C0.41401 199.639 0.204036 199.24 0 198.839V196.083C2.3344 188.322 5.43081 169.75 8.61432 163.794Z" fill="#FE7300"/>
+</svg>
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index a6b122fd0..0ffc82e46 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -9939,6 +9939,13 @@
       "structure": "monolithic",
       "status": "implemented",
       "props": [
+        {
+          "name": "kind",
+          "type": "LogoWallKind",
+          "default": "'square'",
+          "required": "false",
+          "doc": "The cell's proportion; `rectangle` sets every cell at 3:2, keeps three columns below `sm`, and holds three columns beside `aside` from `lg`."
+        },
         {
           "name": "items",
           "type": "LogoItem[]",
@@ -9972,7 +9979,7 @@
         {
           "name": "aside",
           "scope": "—",
-          "notes": "Content set beside the wall from `lg` up, such as one customer's `quote`, on a `--bg-canvas` panel padded by `--spacing-xl`; its child stretches to fill the panel. When it is empty the wall spans the full width."
+          "notes": "Content set beside the wall from `lg` up, centred in a panel that never sets the band's height (keep it short enough to fit two rows of squares from `xl`), such as one customer's `quote`, on a `--bg-canvas` panel padded by `--spacing-xl`; its child fills the panel's width. When it is empty the wall spans the full width."
         },
         {
           "name": "mark",
@@ -9980,7 +9987,7 @@
           "notes": "One cell's mark, replacing the image built from the item — for a mark that owns its own theming (a per-theme asset swap, a silhouette filter). The slotted content carries its own alternative text and sits in a 28px-tall box; on a linked cell it lifts with the built image's motion."
         }
       ],
-      "purpose": "The customer-proof band of a marketing page: a framed grid of square cells, one company mark to a cell, each one optionally linked to that customer's story, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for. The cells are `card-grid` frame cells, so the wall draws the same hairlines and registration marks as every other framed band on the page. A linked cell is the whole square: on hover and focus a wash rises behind it, the mark lifts, and a `Read story` label slides in under it, so the wall doubles as the way into the case studies. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge on a padded canvas panel — and the wall narrows from six columns to three to sit in half the width at the same cell size.",
+      "purpose": "The customer-proof band of a marketing page: a framed grid of square cells, one company mark to a cell, each one optionally linked to that customer's story, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for. The cells are `card-grid` frame cells, so the wall draws the same hairlines and registration marks as every other framed band on the page. A linked cell is the whole square: on hover and focus a wash rises behind it, the mark lifts, and a `Read story` label slides in under it, so the wall doubles as the way into the case studies. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge on a padded canvas panel — and the wall narrows from six columns to three to sit in half the width at the same cell size. Every cell is a perfect square in every layout, and the wall alone sets the band's height: the `aside` panel is size-contained from `lg` up, so its content never stretches a row, and the statement sits centred in it. Between `lg` and `xl` the wall is two columns wide, so its three rows are tall enough for a client sentence; from `xl` it is three columns, two rows. Set `kind` to `rectangle` and every cell becomes a 3:2 rectangle instead: beside `aside` the wall holds three columns from `lg`, so nine rectangles take exactly the height six squares do, and below `sm` it keeps three columns so nine marks never leave a ragged row.",
       "useWhen": [
         "To show who already uses the product, as the proof band under a hero or section, with each mark leading to that customer's success case.",
         "Wherever a set of partner, customer or certification marks is the message.",
@@ -10008,7 +10015,8 @@
         "Set `ariaLabel` so the group announces its purpose (\"Clients running on Azion\") instead of reading as an unnamed region.",
         "Link a mark with `href` only when there is somewhere worth going, such as a case study; a wall of links to nowhere costs a reader a tab stop per cell. In an app with a client-side router, handle `item-click`: call `event.preventDefault()` and push `item.href`.",
         "Put one statement in `aside`, not a second grid. The band's argument is *many customers, one of them talking*; two things of equal weight leave a reader with neither.",
-        "Give the wall a multiple of three marks when `aside` is filled and a multiple of six when it is not, so the last row is full rather than ragged. Six beside a quote is the Web Apps band."
+        "Give the wall exactly six marks when `aside` is filled — two full rows of three squares beside the statement, and three rows of two between `lg` and `xl` — and a multiple of six when it is not, so the last row is never ragged.",
+        "Reach for `kind: 'rectangle'` when the band names nine customers beside `aside`: three rows of three 3:2 cells at the height of the six-square wall. Nine is the count the rectangle wall is drawn for; without `aside` it runs six to a row like the square wall."
       ]
     },
     "breadcrumb": {
diff --git a/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts b/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
index e8ad34d2f..21658c58a 100644
--- a/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
+++ b/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
@@ -159,6 +159,18 @@ describe('LogoWall', () => {
     expect(getByAltText('Contoso mark').closest('a')).toHaveAttribute('href', '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/customers/contoso')
   })
 
+  it('marks the wall square by default through data-kind', () => {
+    const { getByTestId } = render(LogoWall, { props: { items } })
+
+    expect(getByTestId(TESTID)).toHaveAttribute('data-kind', 'square')
+  })
+
+  it('marks a rectangle wall through data-kind', () => {
+    const { getByTestId } = render(LogoWall, { props: { items, kind: 'rectangle' } })
+
+    expect(getByTestId(TESTID)).toHaveAttribute('data-kind', 'rectangle')
+  })
+
   it('carries no data-aside when the aside slot is empty', () => {
     const { getByTestId } = render(LogoWall, { props: { items } })
 
diff --git a/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue b/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue
index 7e2f577c8..a8a2a83c8 100644
--- a/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue
+++ b/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue
@@ -12,6 +12,9 @@
   /** How tall a mark sits in its cell: `wide` for a wordmark, `compact` for a mark closer to square. */
   export type LogoShape = 'wide' | 'compact'
 
+  /** The cell's proportion: `square` cells, or `rectangle` cells at 3:2 that fit nine marks in the height six squares take. */
+  export type LogoWallKind = 'square' | 'rectangle'
+
   /** One company mark in the wall, optionally linked. */
   export type LogoItem = {
     /** URL of the mark rendered in the cell. */
@@ -25,6 +28,8 @@
   }
 
   interface Props {
+    /** The cell's proportion; `rectangle` sets every cell at 3:2, keeps three columns below `sm`, and holds three columns beside `aside` from `lg`. */
+    kind?: LogoWallKind
     /** The marks rendered in the grid, in order; each item is `{ src, alt, href?, shape? }` where `src` is the mark's URL, `alt` names the company, `href` links the cell to that customer's story, and `shape` sets a near-square mark taller than a wordmark. */
     items?: LogoItem[]
     /** Accessible name for the group of marks, announced instead of an unnamed region. */
@@ -34,6 +39,7 @@
   }
 
   const props = withDefaults(defineProps<Props>(), {
+    kind: 'square',
     items: () => [],
     ariaLabel: '',
     linkLabel: 'Read story'
@@ -71,6 +77,7 @@
     v-bind="$attrs"
     class="group/logo-wall grid data-[aside]:lg:grid-cols-2"
     :data-testid="testId"
+    :data-kind="kind"
     :data-aside="hasAside || null"
     :aria-label="ariaLabel || undefined"
   >
@@ -81,7 +88,7 @@
       :columns="3"
       :mobile-columns="2"
       role="list"
-      class="sm:grid-cols-3! lg:grid-cols-6! group-data-[aside]/logo-wall:lg:grid-cols-3!"
+      class="sm:grid-cols-3! lg:grid-cols-6! group-data-[aside]/logo-wall:lg:grid-cols-2! group-data-[aside]/logo-wall:xl:grid-cols-3! group-data-[kind=rectangle]/logo-wall:max-sm:grid-cols-3! group-data-[kind=rectangle]/logo-wall:group-data-[aside]/logo-wall:lg:grid-cols-3!"
     >
       <CardGridCell
         v-for="(item, index) in items"
@@ -94,7 +101,7 @@
           v-if="item.href"
           :href="item.href"
           :aria-label="`${linkLabel}, ${item.alt}`"
-          class="group/logo relative isolate flex aspect-square items-center justify-center px-(--spacing-md) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-inset before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:bg-(--bg-hover) before:opacity-0 before:transition-opacity before:duration-moderate-01 before:ease-productive-entrance hover:before:opacity-100 motion-reduce:before:transition-none"
+          class="group/logo relative isolate flex aspect-square group-data-[kind=rectangle]/logo-wall:aspect-3/2 items-center justify-center px-(--spacing-md) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-inset before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:bg-(--bg-hover) before:opacity-0 before:transition-opacity before:duration-moderate-01 before:ease-productive-entrance hover:before:opacity-100 motion-reduce:before:transition-none"
           @click="onItemClick($event, item)"
         >
           <span
@@ -125,7 +132,7 @@
         </a>
         <div
           v-else
-          class="flex aspect-square items-center justify-center px-(--spacing-md)"
+          class="flex aspect-square items-center justify-center px-(--spacing-md) group-data-[kind=rectangle]/logo-wall:aspect-3/2"
         >
           <span class="flex h-7 max-w-full items-center justify-center">
             <slot
@@ -149,7 +156,7 @@
 
     <div
       v-if="hasAside"
-      class="flex min-w-0 bg-(--bg-canvas) p-(--spacing-xl) *:flex-1"
+      class="flex min-w-0 items-center bg-(--bg-canvas) p-(--spacing-xl) lg:contain-size *:flex-1"
     >
       <slot name="aside" />
     </div>

From d75bd087841064d06c03630995787b1217e86821 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Sat, 3 Oct 2026 13:38:34 -0300
Subject: [PATCH 4/4] feat(webkit): frame logo-wall's aside like its cells

The aside panel is a frame-box with all four registration marks and draws the
seam to the wall: a top rule below lg, a left rule from lg up.
---
 .specs/logo-wall.md                           |  8 +++----
 packages/webkit/catalog.json                  |  4 ++--
 .../marketing/logo-wall/logo-wall.test.ts     | 22 +++++++++++++++++++
 .../marketing/logo-wall/logo-wall.vue         | 16 +++++++++-----
 4 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/.specs/logo-wall.md b/.specs/logo-wall.md
index 6b8209a2f..a5f237a4a 100644
--- a/.specs/logo-wall.md
+++ b/.specs/logo-wall.md
@@ -4,9 +4,9 @@ category: marketing
 structure: monolithic
 status: implemented
 spec_version: 2
-checksum: dab394db994e88139a67a87b1b5547595bf9a4184648083e9f4d4318755dce77
+checksum: 43a8f298a7148af9f0078b47ccf3ad078b2c3e233062a9db743ff86c48285e3a
 created: 2026-09-22
-last_updated: 2026-09-30
+last_updated: 2026-10-01
 ---
 
 # Logo Wall — Component Spec
@@ -15,7 +15,7 @@ last_updated: 2026-09-30
 
 The customer-proof band of a marketing page: a framed grid of square cells, one company mark to a cell, each one optionally linked to that customer's story, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for.
 
-The cells are `card-grid` frame cells, so the wall draws the same hairlines and registration marks as every other framed band on the page. A linked cell is the whole square: on hover and focus a wash rises behind it, the mark lifts, and a `Read story` label slides in under it, so the wall doubles as the way into the case studies. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge on a padded canvas panel — and the wall narrows from six columns to three to sit in half the width at the same cell size. Every cell is a perfect square in every layout, and the wall alone sets the band's height: the `aside` panel is size-contained from `lg` up, so its content never stretches a row, and the statement sits centred in it. Between `lg` and `xl` the wall is two columns wide, so its three rows are tall enough for a client sentence; from `xl` it is three columns, two rows. Set `kind` to `rectangle` and every cell becomes a 3:2 rectangle instead: beside `aside` the wall holds three columns from `lg`, so nine rectangles take exactly the height six squares do, and below `sm` it keeps three columns so nine marks never leave a ragged row.
+The cells are `card-grid` frame cells, so the wall draws the same hairlines and registration marks as every other framed band on the page. A linked cell is the whole square: on hover and focus a wash rises behind it, the mark lifts, and a `Read story` label slides in under it, so the wall doubles as the way into the case studies. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge on a padded canvas panel framed like the cells, a registration mark in each of its corners and one shared hairline at its seam with the wall — and the wall narrows from six columns to three to sit in half the width at the same cell size. Every cell is a perfect square in every layout, and the wall alone sets the band's height: the `aside` panel is size-contained from `lg` up, so its content never stretches a row, and the statement sits centred in it. Between `lg` and `xl` the wall is two columns wide, so its three rows are tall enough for a client sentence; from `xl` it is three columns, two rows. Set `kind` to `rectangle` and every cell becomes a 3:2 rectangle instead: beside `aside` the wall holds three columns from `lg`, so nine rectangles take exactly the height six squares do, and below `sm` it keeps three columns so nine marks never leave a ragged row.
 
 ## When to use
 
@@ -106,7 +106,7 @@ import Quote from '@aziontech/webkit/quote'
 
 | Slot | Scope | Notes |
 |---|---|---|
-| `aside` | — | Content set beside the wall from `lg` up, centred in a panel that never sets the band's height (keep it short enough to fit two rows of squares from `xl`), such as one customer's `quote`, on a `--bg-canvas` panel padded by `--spacing-xl`; its child fills the panel's width. When it is empty the wall spans the full width. |
+| `aside` | — | Content set beside the wall from `lg` up, centred in a panel that never sets the band's height (keep it short enough to fit two rows of squares from `xl`), such as one customer's `quote`, on a `--bg-canvas` panel padded by `--spacing-xl` and framed with a registration mark in each corner; its child fills the panel's width. When it is empty the wall spans the full width. |
 | `mark` | `{ item: LogoItem; index: number }` | One cell's mark, replacing the image built from the item — for a mark that owns its own theming (a per-theme asset swap, a silhouette filter). The slotted content carries its own alternative text and sits in a 28px-tall box; on a linked cell it lifts with the built image's motion. |
 
 ## States
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 0ffc82e46..2b439bc28 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -9979,7 +9979,7 @@
         {
           "name": "aside",
           "scope": "—",
-          "notes": "Content set beside the wall from `lg` up, centred in a panel that never sets the band's height (keep it short enough to fit two rows of squares from `xl`), such as one customer's `quote`, on a `--bg-canvas` panel padded by `--spacing-xl`; its child fills the panel's width. When it is empty the wall spans the full width."
+          "notes": "Content set beside the wall from `lg` up, centred in a panel that never sets the band's height (keep it short enough to fit two rows of squares from `xl`), such as one customer's `quote`, on a `--bg-canvas` panel padded by `--spacing-xl` and framed with a registration mark in each corner; its child fills the panel's width. When it is empty the wall spans the full width."
         },
         {
           "name": "mark",
@@ -9987,7 +9987,7 @@
           "notes": "One cell's mark, replacing the image built from the item — for a mark that owns its own theming (a per-theme asset swap, a silhouette filter). The slotted content carries its own alternative text and sits in a 28px-tall box; on a linked cell it lifts with the built image's motion."
         }
       ],
-      "purpose": "The customer-proof band of a marketing page: a framed grid of square cells, one company mark to a cell, each one optionally linked to that customer's story, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for. The cells are `card-grid` frame cells, so the wall draws the same hairlines and registration marks as every other framed band on the page. A linked cell is the whole square: on hover and focus a wash rises behind it, the mark lifts, and a `Read story` label slides in under it, so the wall doubles as the way into the case studies. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge on a padded canvas panel — and the wall narrows from six columns to three to sit in half the width at the same cell size. Every cell is a perfect square in every layout, and the wall alone sets the band's height: the `aside` panel is size-contained from `lg` up, so its content never stretches a row, and the statement sits centred in it. Between `lg` and `xl` the wall is two columns wide, so its three rows are tall enough for a client sentence; from `xl` it is three columns, two rows. Set `kind` to `rectangle` and every cell becomes a 3:2 rectangle instead: beside `aside` the wall holds three columns from `lg`, so nine rectangles take exactly the height six squares do, and below `sm` it keeps three columns so nine marks never leave a ragged row.",
+      "purpose": "The customer-proof band of a marketing page: a framed grid of square cells, one company mark to a cell, each one optionally linked to that customer's story, under one accessible group name. It is deliberately a static grid rather than an auto-scrolling strip — moving content needs a pause control to meet WCAG 2.2.2, and a wall a reader can scan beats one they have to wait for. The cells are `card-grid` frame cells, so the wall draws the same hairlines and registration marks as every other framed band on the page. A linked cell is the whole square: on hover and focus a wash rises behind it, the mark lifts, and a `Read story` label slides in under it, so the wall doubles as the way into the case studies. Fill the `aside` slot and the band splits from `lg` up — the wall on the start edge, one of those customers speaking on the end edge on a padded canvas panel framed like the cells, a registration mark in each of its corners and one shared hairline at its seam with the wall — and the wall narrows from six columns to three to sit in half the width at the same cell size. Every cell is a perfect square in every layout, and the wall alone sets the band's height: the `aside` panel is size-contained from `lg` up, so its content never stretches a row, and the statement sits centred in it. Between `lg` and `xl` the wall is two columns wide, so its three rows are tall enough for a client sentence; from `xl` it is three columns, two rows. Set `kind` to `rectangle` and every cell becomes a 3:2 rectangle instead: beside `aside` the wall holds three columns from `lg`, so nine rectangles take exactly the height six squares do, and below `sm` it keeps three columns so nine marks never leave a ragged row.",
       "useWhen": [
         "To show who already uses the product, as the proof band under a hero or section, with each mark leading to that customer's success case.",
         "Wherever a set of partner, customer or certification marks is the message.",
diff --git a/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts b/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
index 21658c58a..89a4ccfb8 100644
--- a/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
+++ b/packages/webkit/src/components/marketing/logo-wall/logo-wall.test.ts
@@ -189,6 +189,28 @@ describe('LogoWall', () => {
     expect(root.querySelector('[role="list"]')).not.toBeNull()
   })
 
+  it('frames the aside with a mark in every corner and a seam beside the wall', () => {
+    const { getByText } = render(LogoWall, {
+      props: { items },
+      slots: { aside: '<blockquote>Azion transformed our operations.</blockquote>' }
+    })
+
+    const panel = getByText('Azion transformed our operations.').closest('[data-marks]')
+    expect(panel).toHaveAttribute('data-marks', 'top-left top-right bottom-left bottom-right')
+    expect(panel).toHaveAttribute('data-seam', 'true')
+  })
+
+  it('draws no seam on an aside that stands alone', () => {
+    const { getByText } = render(LogoWall, {
+      props: { items: [] },
+      slots: { aside: '<blockquote>One customer still speaks.</blockquote>' }
+    })
+
+    const panel = getByText('One customer still speaks.').closest('[data-marks]')
+    expect(panel).toHaveAttribute('data-marks', 'top-left top-right bottom-left bottom-right')
+    expect(panel).not.toHaveAttribute('data-seam')
+  })
+
   it('renders the aside even when there are no marks to show', () => {
     const { getByTestId, getByText } = render(LogoWall, {
       props: { items: [] },
diff --git a/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue b/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue
index a8a2a83c8..369ad65b5 100644
--- a/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue
+++ b/packages/webkit/src/components/marketing/logo-wall/logo-wall.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { computed, useAttrs } from 'vue'
 
+  import FrameBox from '../../layout/frame-box/frame-box.vue'
   import CardGrid from '../card-grid/card-grid.vue'
   import CardGridCell from '../card-grid/card-grid-cell/card-grid-cell.vue'
 
@@ -51,7 +52,7 @@
   }>()
 
   const slots = defineSlots<{
-    /** Content set beside the wall from `lg` up, such as one customer's quotation, on a padded canvas panel. */
+    /** Content set beside the wall from `lg` up, such as one customer's quotation, on a padded canvas panel framed like the cells. */
     aside?(): unknown
     /** One cell's mark, replacing the image built from the item — for a mark that owns its own theming; it carries its own alternative text. */
     mark?(props: { item: LogoItem; index: number }): unknown
@@ -154,11 +155,16 @@
       </CardGridCell>
     </CardGrid>
 
-    <div
+    <FrameBox
       v-if="hasAside"
-      class="flex min-w-0 items-center bg-(--bg-canvas) p-(--spacing-xl) lg:contain-size *:flex-1"
+      borders="none"
+      marks="all"
+      :data-seam="hasItems || null"
+      class="min-w-0 bg-(--bg-canvas) lg:contain-size data-[seam]:max-lg:border-t data-[seam]:lg:border-l"
     >
-      <slot name="aside" />
-    </div>
+      <div class="flex h-full min-w-0 items-center p-(--spacing-xl) *:flex-1">
+        <slot name="aside" />
+      </div>
+    </FrameBox>
   </section>
 </template>