@uxelle/skills 0.2.0-beta.2

package/skills/uxelle-design-harness/recipe-footer.md

@@ -0,0 +1,156 @@
+# Recipe: footer
+
+A shared **piece**: the page footer — a directory of links anchored by brand
+identity, over a quiet legal/utility bar. Used by [app-chrome](recipe-app-chrome.md)
+(product) and [landing-page](recipe-landing-page.md) (marketing).
+
+Composes [`Footer`](../uxelle-components/Footer.md) (two bands),
+[`Layout`](../uxelle-components/Layout.md),
+[`Text`](../uxelle-components/Text.md), [`Link`](../uxelle-components/Link.md),
+[`Logo`](../uxelle-components/Logo.md), and — for marketing — a
+[`Button`](../uxelle-components/Button.md) CTA and social marks.
+
+## When
+
+The closing chrome of a page: wayfinding to the rest of the site, plus identity and
+legal. Place `Footer` **inside** `<main>` after the page column so it scrolls with the
+page ([app-chrome](recipe-app-chrome.md)).
+
+## When not
+
+- Not primary navigation — top-level app routes stay in `Navigation`
+  ([app-chrome](recipe-app-chrome.md)).
+- Omit `Footer` entirely on focused flows (checkout, auth) that should not invite
+  exit.
+- Pass real content to the bands you use; omitting a slot (`undefined`) fills catalog
+  demo content, and `null` hides a band.
+
+## Information architecture
+
+The ideals the layout serves — adapt them, don't copy any one site.
+
+- **Anchor with identity.** A brand block (logo + a one-line tagline or mission,
+  optionally a CTA and social marks) grounds the footer; on marketing it adds a last
+  conversion nudge.
+- **Group links by user intent.** A handful of labeled categories — what you offer,
+  resources, company, legal/trust — each a heading over a vertical link list. Name
+  groups for how people look for things, not your org chart. Sub-group a large
+  category instead of spawning another top-level column.
+- **Separate a quiet utility bar.** Copyright and registration, legal links
+  (privacy / terms / cookie / disclosures), and social or app badges sit in a
+  lower-emphasis band beneath the directory.
+- **Scale density to the surface.** The same architecture ranges from a compact
+  legal-only bar (a focused product app) up to a rich multi-column directory (a
+  marketing site). Add columns as the story grows; don't force a big directory onto a
+  small app.
+- **Isolate fine print.** Regulated or legal-heavy products add a dense
+  disclosure/disclaimer block — keep it last, low-emphasis, and out of the primary
+  link flow.
+- **Make outbound obvious.** Mark external or cross-property links (e.g. a trailing
+  outbound icon) so they read as leaving.
+
+## Regions
+
+`Footer` `topMainContent` (the **directory**): brand block + categorized link
+columns, optional CTA and social · `Footer` `bottomMainContent` (the **utility
+bar**): copyright + legal links, optional social; optional fine-print block last.
+
+The component places logo/legal in the bottom band and links/CTAs/social in the top
+band by default — follow that grain unless the design needs otherwise.
+
+## Lay out the bands as tidy clusters
+
+Each band reads as a cluster, not content stretched to the band edges.
+
+- **Directory (top band).** Lead with the brand block, then the link groups. With a
+  few groups (2–4), lay them out as a **left-aligned wrapping cluster** with intrinsic
+  widths and `--uxl-breakpoints-gutter` between them — do **not** stretch a couple of
+  groups across the full width with `auto-fit` / `1fr` tracks (two `1fr` columns leave
+  a hollow center that reads off-center). Reserve
+  `repeat(auto-fit, minmax(MIN, 1fr))` for a **dense** directory with enough groups to
+  fill the row.
+
+```tsx
+<Layout display="flex" flexWrap="wrap" gap="var(--uxl-breakpoints-gutter)">
+  {/* brand block leads */}
+  <Layout display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-small-4)">
+    <a href="/" aria-label="Home">
+      <Logo name="generic" width={40} interactive aria-hidden />
+    </a>
+    <Text type="Body Small" width={false}>One-line tagline or mission.</Text>
+    {/* optional CTA on marketing */}
+    <Button emphasis="high"><Text type="Button" width>Book a demo</Text></Button>
+  </Layout>
+
+  {/* each category is a content-sized column — repeat per group */}
+  <Layout display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-micro-2)">
+    <Text type="Body Medium Alt" width={false}>Product</Text>
+    <Link href="/how-it-works">How it works</Link>
+    <Link href="/pricing">Pricing</Link>
+    <Link href="/compare">Compare</Link>
+  </Layout>
+</Layout>
+```
+
+- **Utility bar (bottom band).** Keep copyright and legal links in a **left-aligned
+  wrapping row** (or stack), separated by the spacing ramp — prefer this over
+  `justifyContent="space-between"`, which pins content to both edges and hollows the
+  center (worse when it wraps on mobile). A two-end split (copyright left, social
+  right) is fine only when **both** sides carry enough to avoid that void.
+
+## Responsive
+
+Few groups wrap from a single row to stacked as width narrows (no JS); a dense
+directory uses `repeat(auto-fit, minmax(MIN, 1fr))` to shed columns. The brand block
+leads. The legal bar wraps its links. See
+[how-to-page-layout.md](how-to-page-layout.md#responsiveness).
+
+## Spacing
+
+`--uxl-breakpoints-gutter` between columns; `micro-2` within a link list; `small-4`
+inside the brand block and the legal bar. Band padding is component-owned — a single
+remaining band is compact (`small-4`), two bands use the large step; do not wrap
+`Footer` in extra `p` / `gap`.
+
+## A11y
+
+`Footer` is the page `contentinfo` landmark (one per page). Head each link group so
+its purpose is clear; wrap a substantial directory (or each column) in a named `nav`.
+Social/app links carry an accessible name; a `Logo` beside a visible brand name is
+decorative (`aria-hidden`). See [how-to-accessibility.md](how-to-accessibility.md).
+
+## Color
+
+`Footer` sets each band's palette itself (top vs bottom) — style content with role
+tokens and let the component own the surface; don't fight it with hardcoded color
+([how-to-color.md](how-to-color.md)).
+
+## React
+
+Assemble the two bands into `Footer`. A legal-only footer (`topMainContent={null}`) is
+the product default; add the directory band as the surface grows.
+
+```tsx
+<Footer
+  topMainContent={/* directory cluster from above, or null for legal-only */ null}
+  bottomMainContent={
+    <Layout display="flex" flexWrap="wrap" alignItems="center" gap="var(--uxl-theme-layout-spacing-small-4)">
+      <Text type="Body Small" width={false}>© 2026 Organization. All rights reserved.</Text>
+      <Layout as="nav" aria-label="Legal" display="flex" flexWrap="wrap" gap="var(--uxl-theme-layout-spacing-small-4)">
+        <Link href="/privacy">Privacy</Link>
+        <Link href="/terms">Terms of Use</Link>
+        <Link href="/cookies">Cookie Settings</Link>
+      </Layout>
+    </Layout>
+  }
+/>
+```
+
+`DefaultTopMainContent` / `DefaultBottomMainContent` from `@uxelle/components` give a
+quick start; generated UI passes real nodes.
+
+## A2UI
+
+No `getUxelleRecipe("footer")` — compose `A2uiFooter` with the same two slots, links
+as `A2uiLink`, headings/copyright as `A2uiText` (no `Lockup`), layout-spacing only.
+See [a2ui.md](a2ui.md).

package/skills/uxelle-design-harness/recipe-form-section.md

@@ -0,0 +1,163 @@
+# Recipe: form section
+
+## When
+
+A labeled **group of fields** under a heading — stacking rule, not a new form component. Preference toggles and choice lists: [recipe-settings-page.md](recipe-settings-page.md) (`ListControls`).
+
+## When not
+
+- Do not wrap fields that already ship Label + FieldMessage (`Textfield`, `Textarea`, `Select`, `MultiSelect`, `FileUpload`).
+- Do not use `Textfield` for comments, notes, bios, or other multi-line copy — that is [`Textarea`](../uxelle-components/Textarea.md).
+- Do not fake exclusive choice with `ListItem` clicks.
+- Do not flatten `RadioGroup` / `CheckboxGroup` (they are already a `fieldset`).
+- Do not collapse given name + family name (or city/state/ZIP, month/day/year) into one field.
+- `Layout` has no `as="form"`. Host wraps a native `<form>` when submitting.
+
+## Allowed children
+
+Any catalog field: [`Textfield`](../uxelle-components/Textfield.md), [`Textarea`](../uxelle-components/Textarea.md), [`Select`](../uxelle-components/Select.md), [`MultiSelect`](../uxelle-components/MultiSelect.md), [`FileUpload`](../uxelle-components/FileUpload.md), [`CheckboxGroup`](../uxelle-components/CheckboxGroup.md), [`RadioGroup`](../uxelle-components/RadioGroup.md), [`Switch`](../uxelle-components/Switch.md), [`ListControls`](../uxelle-components/ListControls.md), [`Quantity`](../uxelle-components/Quantity.md) when present.
+
+## Multi-line
+
+`Textarea` for free-form copy (notes, comments, bio). `autoGrow` sizes the field to its content — `rows` (or `height`) is the minimum, `maxHeight` caps it, and the resize grip is hidden. `counter` + `maxLength` is a hard stop; add `softOverflow` to let the user type past the limit. Past the limit, the counter uses `data-color-switcher="warning"` (numbers still show `n/max`; do not set `aria-invalid` from overflow). Pass `softOverflowMessage` for the warning `FieldMessage` — do not rely on catalog copy. Search, email, and other single-line values stay on `Textfield`.
+
+## Spacing
+
+`gap="var(--uxl-theme-layout-spacing-medium-8)"` between fields (or field **rows**). Header stack `var(--uxl-theme-layout-spacing-micro-2)`. Actions in `ButtonGroup` (not ad-hoc `Layout` for two buttons) — row from tablet up, column below tablet ([how-to-page-layout.md](how-to-page-layout.md#action-clusters)). Parts of one value on one row: `small-4` inside the grid.
+
+**Separate the actions from the fields.** The submit / action cluster is a decision point, not one more field — give it `medium-12` from the last field (the page-section gap), not the `medium-8` field gap. At the field gap the primary button reads as grouped with the control above it (e.g. a submit sitting right under the last `Select`). Group the heading + fields in one stack and make the actions a sibling at `medium-12` (see the React example).
+
+## Measure
+
+A **standalone** form section on a wider page (a marketing demo request, a contact form) caps the whole section — heading, fields, and actions — at the `maxWidth="600px"` reading measure and centers it with `mh="auto"`, so the heading sits directly above the fields on one left edge:
+
+```tsx
+<Layout
+  as="section"
+  display="flex"
+  flexDirection="column"
+  gap="var(--uxl-theme-layout-spacing-medium-12)"
+  width="100%"
+  maxWidth="600px"
+  mh="auto"
+>
+```
+
+Cap the **section**, not just the inner field stack — capping only the fields leaves the heading full-width and the form stranded left of center. Match this measure to sibling reading sections (an FAQ above it) so they read as one column ([how-to-page-layout.md](how-to-page-layout.md#reading-measure)). A settings page is already one `600px` column — do not nest another.
+
+## Related fields
+
+Parts of **one value** sit on one row. Separate fields — not a single “Full name” / “Address” / “Date” string. Use `display="grid"` (`Textfield` / `Select` are `width: 100%` of the parent). Do not `flexWrap="wrap"` them. Account pages: [recipe-settings-page.md](recipe-settings-page.md).
+
+```tsx
+<Layout
+  display="grid"
+  gridTemplateColumns="1fr 1fr"
+  gap="var(--uxl-theme-layout-spacing-small-4)"
+>
+  <Textfield labelText="First name" name="givenName" autoComplete="given-name" />
+  <Textfield labelText="Last name" name="familyName" autoComplete="family-name" />
+</Layout>
+
+<Layout
+  display="grid"
+  gridTemplateColumns="2fr 1fr 1fr"
+  gap="var(--uxl-theme-layout-spacing-small-4)"
+>
+  <Textfield labelText="City" name="city" autoComplete="address-level2" />
+  <Select labelText="State" name="state" options={stateOptions} />
+  <Textfield labelText="ZIP" name="postalCode" autoComplete="postal-code" />
+</Layout>
+
+<Layout
+  display="grid"
+  gridTemplateColumns="1fr 1fr 1fr"
+  gap="var(--uxl-theme-layout-spacing-small-4)"
+>
+  <Select labelText="Month" name="month" options={monthOptions} />
+  <Select labelText="Day" name="day" options={dayOptions} />
+  <Select labelText="Year" name="year" options={yearOptions} />
+</Layout>
+```
+
+A2UI: `A2uiLayout` has no `gridTemplateColumns` — stack these fields. Do not put unrelated fields on the same row.
+
+## Dialog
+
+When this section is `Dialog` `centerSlotContent`, `Text` in `topSlotContent` and `centerSlotContent` uses `width={false}` (100% of the slot). `width` / `width={true}` shrinks to the string. Button labels stay `width` (fit). A2UI: `"width": false` on `A2uiText` in those slots.
+
+## A11y
+
+[how-to-accessibility.md](how-to-accessibility.md). Section heading (typically `h2` under a page `h1`). Groups use the group component’s legend. Actions in a labeled `ButtonGroup` (`aria-label`). Action `direction`: [how-to-page-layout.md](how-to-page-layout.md#action-clusters).
+
+## Responsive
+
+Related-field grids collapse to one column below tablet, and the action `ButtonGroup` stacks `fullWidth` (`useBreakpointUp("tablet")`, [how-to-page-layout.md](how-to-page-layout.md#action-clusters)). Standalone fields are already full-width, so they need nothing.
+
+## React
+
+v1 example: heading + supporting copy + name fields, select, radios, notes, and actions. `tabletUp` comes from `useBreakpointUp("tablet")` ([how-to-page-layout.md](how-to-page-layout.md#action-clusters)).
+
+```tsx
+// Section gap is medium-12 so the actions sit a decision-boundary apart from the
+// fields. Heading + fields are grouped in one medium-8 stack.
+<Layout as="section" display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-medium-12)">
+  <Layout display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-medium-8)">
+    <Layout display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-micro-2)">
+      <Text type="Display Extra Small" as="h2" width={false}>
+        Workspace details
+      </Text>
+      <Text type="Body Medium" width={false}>
+        Used on invoices and shared reports. Required fields are marked.
+      </Text>
+    </Layout>
+    <Layout
+      display="grid"
+      gridTemplateColumns="1fr 1fr"
+      gap="var(--uxl-theme-layout-spacing-small-4)"
+    >
+      <Textfield labelText="First name" name="givenName" autoComplete="given-name" />
+      <Textfield labelText="Last name" name="familyName" autoComplete="family-name" />
+    </Layout>
+    <Select
+      labelText="Department"
+      name="department"
+      options={[
+        { value: "engineering", label: "Engineering" },
+        { value: "design", label: "Design" },
+        { value: "product", label: "Product" },
+      ]}
+    />
+    <RadioGroup name="priority" label labelText="Priority" defaultValue="normal">
+      <Radio value="low">
+        <Text type="Body Medium">Low</Text>
+      </Radio>
+      <Radio value="normal">
+        <Text type="Body Medium">Normal</Text>
+      </Radio>
+      <Radio value="high">
+        <Text type="Body Medium">High</Text>
+      </Radio>
+    </RadioGroup>
+    <Textarea
+      labelText="Notes"
+      fieldDescription="Optional context for this workspace."
+      name="notes"
+      autoGrow
+      rows={3}
+    />
+  </Layout>
+  <ButtonGroup
+    direction={tabletUp ? "row" : "column"}
+    fullWidth={!tabletUp}
+    aria-label="Form actions"
+  >
+    <Button emphasis="medium">Cancel</Button>
+    <Button emphasis="high">Save</Button>
+  </ButtonGroup>
+</Layout>
+```
+
+## A2UI
+
+Same stacking and theme spacing vars. Bind values with `{ path: "/form/…" }`. Runtime: `getUxelleRecipe("form-section")` from `@uxelle/a2ui` ([a2ui.md](a2ui.md)). Nested in `A2uiDialog`: `A2uiText` in `topSlotContent` and `centerSlotContent` uses `"width": false`. Given-name and family-name are separate `A2uiTextfield`s, stacked (`A2uiLayout` has no `gridTemplateColumns`). Notes are `A2uiTextarea` with `"autoGrow": true`. Form actions: `"direction": "column"` on `A2uiButtonGroup` (no matchMedia).

package/skills/uxelle-design-harness/recipe-hero.md

@@ -0,0 +1,89 @@
+# Recipe: hero
+
+A marketing **piece**: the opening band of a public page — value proposition,
+primary/secondary action, and a product visual. Usually the one loud brand band on
+the page.
+
+Composes [`Hero`](../uxelle-components/Hero.md),
+[`Lockup`](../uxelle-components/Lockup.md),
+[`ButtonGroup`](../uxelle-components/ButtonGroup.md),
+[`Image`](../uxelle-components/Image.md), and optionally
+[`DynamicAngle*`](../uxelle-components/DynamicAngleShape.md) accents elsewhere on the page.
+
+## When
+
+The first impression: one sentence of value, one clear action, and supporting media.
+
+## When not
+
+- One `h1` for the whole page lives here — later sections are `h2`.
+- Keep the media non-interactive; actions go in `contentSlot`.
+- Pass media as a **direct** `Image` / `img` / `picture` / `video` — no wrappers
+  (Hero owns the crop; a nested `Image.aspectRatio` has no effect).
+
+## Regions
+
+`Hero` -> `image` (direct `Image`) + `contentSlot` (`Lockup` `h1` + `ButtonGroup`)
+
+## Responsive
+
+`Hero` owns it: `contentDirection="Left" | "Right"` pins a side panel on tablet and
+up and drops to a full-width bottom panel below; `Bottom` is full-width at every
+size. The crop adapts automatically. If the two actions feel tight on mobile, switch
+the `ButtonGroup` `direction` to `column` (`useBreakpointUp("tablet")`).
+
+## Spacing
+
+Content-area spacing is component-owned. The hero is a full-bleed band, so it sits
+outside the capped content column — following sections resume the column
+([how-to-page-layout.md](how-to-page-layout.md)).
+
+## A11y
+
+The `h1` is here. `Hero` has no landmark by default — add `role="region"` with
+`aria-label` / `aria-labelledby` if you need a named region. Meaningful media gets
+real `alt`; decorative media uses `alt=""`. See
+[how-to-accessibility.md](how-to-accessibility.md).
+
+## Color
+
+`Hero` defaults to `data-color-switcher="brand-1"`. Choose the brand palette by the
+look you want and override with the attribute — this is typically the single
+dominant brand band; keep later sections calmer ([how-to-color.md](how-to-color.md)).
+
+## React
+
+```tsx
+<Hero
+  contentDirection="Left"
+  data-color-switcher="brand-1"
+  image={<Image src="/hero.jpg" alt="Team collaborating around a screen" />}
+  contentSlot={
+    <>
+      <Lockup
+        overline={<Text type="Overline" width={false}>New</Text>}
+        title={
+          <Text type="Display Medium" as="h1" width={false}>
+            One workspace for every team
+          </Text>
+        }
+        body={
+          <Text type="Body Medium" width={false}>
+            Plan, build, and ship together — without the tool sprawl.
+          </Text>
+        }
+      />
+      <ButtonGroup aria-label="Get started">
+        <Button emphasis="high"><Text type="Button" width={false}>Start free</Text></Button>
+        <Button emphasis="medium"><Text type="Button" width={false}>Book a demo</Text></Button>
+      </ButtonGroup>
+    </>
+  }
+/>
+```
+
+## A2UI
+
+`A2uiHero` with a nested `A2uiImage` and a `contentSlot` of stacked `A2uiText`
+(no `Lockup` adapter) plus `A2uiButtonGroup`. Set the palette via the adapter's
+`data-color-switcher` ([a2ui.md](a2ui.md)).

package/skills/uxelle-design-harness/recipe-landing-page.md

@@ -0,0 +1,94 @@
+# Recipe: landing page
+
+A marketing **experience**: a public page that builds trust and converts. It
+assembles the marketing pieces in a dependable rhythm on one grid, with a single
+dominant brand band.
+
+Assembles [app-chrome](recipe-app-chrome.md) (marketing mode),
+[hero](recipe-hero.md), [logo-wall](recipe-logo-wall.md),
+[feature-section](recipe-feature-section.md), [stat-callouts](recipe-stat-callouts.md),
+[testimonial](recipe-testimonial.md), [pricing](recipe-pricing.md),
+[cta-band](recipe-cta-band.md), and [footer](recipe-footer.md).
+
+## When
+
+A public page whose job is to explain value and drive one action.
+
+## When not
+
+- Signed-in product screens are [dashboard-overview](recipe-dashboard-overview.md) /
+  [data-table-page](recipe-data-table-page.md).
+- Do not stack multiple loud brand bands — pick one dominant (usually the hero).
+- One `h1` (in the hero); every section below is `h2`.
+
+## Regions
+
+[app-chrome](recipe-app-chrome.md) (marketing nav) -> `main`: full-bleed
+[hero](recipe-hero.md) -> capped column ([logo-wall](recipe-logo-wall.md),
+[feature-section](recipe-feature-section.md)s, [stat-callouts](recipe-stat-callouts.md),
+[testimonial](recipe-testimonial.md), [pricing](recipe-pricing.md)) ->
+full-bleed [cta-band](recipe-cta-band.md) -> [footer](recipe-footer.md)
+
+Full-bleed bands (hero, CTA, and any brand band) span the viewport; in-column
+sections cap with `--uxl-breakpoints-max-container-width`. Any section can become a
+full-bleed brand band — keep to one dominant.
+
+## Responsive
+
+Every piece carries its own responsiveness (hero panel, `auto-fit` grids, stacking
+clusters) — no page-level breakpoint logic. See
+[how-to-page-layout.md](how-to-page-layout.md#responsiveness).
+
+## Spacing
+
+`medium-12` between in-column sections; `large-13`+ block padding for full-bleed
+bands; `--uxl-breakpoints-gutter` inside grids ([spacing-steps.md](spacing-steps.md)).
+
+## A11y
+
+One `main`, one `h1` (hero), section headings `h2` in order; skip link and landmarks
+from [app-chrome](recipe-app-chrome.md). Name each section by its heading. See
+[how-to-accessibility.md](how-to-accessibility.md).
+
+## Color
+
+One dominant brand band (usually the hero). Apply palettes per section with
+`data-color-switcher`, style with role tokens, keep the calmer sections on `default`
+/ `default-subtle` ([how-to-color.md](how-to-color.md)).
+
+## React
+
+```tsx
+<main id="main-content" tabIndex={-1} style={{ flexGrow: 1, minHeight: 0, overflow: "auto" }}>
+  {/* Full-bleed hero — recipe-hero.md (contains the h1) */}
+  <MarketingHero />
+
+  {/* Capped content column for the mid-page sections */}
+  <Layout
+    display="flex"
+    flexDirection="column"
+    width="100%"
+    maxWidth="var(--uxl-breakpoints-max-container-width)"
+    mh="auto"
+    p="var(--uxl-breakpoints-margin)"
+    gap="var(--uxl-theme-layout-spacing-medium-12)"
+  >
+    <LogoWall />        {/* recipe-logo-wall.md */}
+    <FeatureSections /> {/* recipe-feature-section.md (alternating) */}
+    <StatCallouts />    {/* recipe-stat-callouts.md */}
+    <Testimonials />    {/* recipe-testimonial.md */}
+    <Pricing />         {/* recipe-pricing.md */}
+  </Layout>
+
+  {/* Full-bleed closing CTA — recipe-cta-band.md */}
+  <CtaBand />
+
+  {/* Footer — recipe-footer.md (marketing: directory band + legal bar) */}
+  <MarketingFooter />
+</main>
+```
+
+## A2UI
+
+No `getUxelleRecipe("landing-page")` — compose the piece adapters in one narrow
+column, in the same order, dropping full-bleed layout (host-owned) ([a2ui.md](a2ui.md)).

package/skills/uxelle-design-harness/recipe-logo-wall.md

@@ -0,0 +1,80 @@
+# Recipe: logo wall
+
+A shared **piece**: a row of customer, partner, or integration logos that builds
+trust. Common just under a hero or between marketing sections; also used for an
+"integrates with" band.
+
+Composes [`Logo`](../uxelle-components/Logo.md) (brand marks in the catalog),
+[`Image`](../uxelle-components/Image.md) (logos not in the catalog), and
+[`Text`](../uxelle-components/Text.md) for the eyebrow.
+
+## When
+
+A set of recognizable marks shown as social proof or integration coverage.
+
+## When not
+
+- Not navigation and not a `Footer` — this is a proof band.
+- Do not stretch or distort marks; keep a consistent height and let them wrap.
+- Make a logo interactive only if it links somewhere, and name that control.
+
+## Regions
+
+section -> optional eyebrow `Text` -> wrapping, centered row of `Logo` / `Image`
+
+## Responsive
+
+`flexWrap="wrap"` with `justifyContent="center"` reflows to as many marks per row as
+fit — no JS, no breakpoint literals. Bound each mark's `width` so rows stay even.
+
+## Spacing
+
+`gap="var(--uxl-theme-layout-spacing-medium-8)"` between marks; `small-4` under the
+eyebrow. As a band, add section breathing with `large-13`+ block padding
+([spacing-steps.md](spacing-steps.md)).
+
+## A11y
+
+Name the region (`aria-label="Trusted by leading teams"`). If the mark is meaningful
+and there is no adjacent text, give it an accessible name (`aria-label` on `Logo`,
+`alt` on `Image`); if company names appear as text elsewhere, mark the logos
+`aria-hidden`. See [how-to-accessibility.md](how-to-accessibility.md).
+
+## Color
+
+On a brand band, set `data-color-switcher` on the **section** and tint monochrome
+marks with `Logo` `color="colorSwitcherIcon"` (or `background="onDark"` for
+full-color marks on dark). Keep one dominant brand band per view
+([how-to-color.md](how-to-color.md)).
+
+## React
+
+```tsx
+<Layout
+  as="section"
+  display="flex"
+  flexDirection="column"
+  alignItems="center"
+  gap="var(--uxl-theme-layout-spacing-small-4)"
+  aria-label="Trusted by leading teams"
+>
+  <Text type="Overline" width={false}>Trusted by teams at</Text>
+  <Layout
+    display="flex"
+    flexWrap="wrap"
+    justifyContent="center"
+    alignItems="center"
+    gap="var(--uxl-theme-layout-spacing-medium-8)"
+  >
+    <Logo name="generic" width={112} color="colorSwitcherIcon" aria-label="Northwind" />
+    <Logo name="generic" width={112} color="colorSwitcherIcon" aria-label="Acme" />
+    {/* Logos not in the catalog use Image */}
+    <Image src="/logos/contoso.svg" alt="Contoso" />
+  </Layout>
+</Layout>
+```
+
+## A2UI
+
+No `getUxelleRecipe("logo-wall")` — compose `A2uiLogo` / `A2uiImage` inside an
+`A2uiLayout` (single wrapping row, layout-spacing only) ([a2ui.md](a2ui.md)).