diff --git a/.design-sync/NOTES.md b/.design-sync/NOTES.md
new file mode 100644
index 0000000..c94764a
--- /dev/null
+++ b/.design-sync/NOTES.md
@@ -0,0 +1,209 @@
+# design-sync notes — sc-volto-light-theme
+
+State as of 2026-09-02. No sync has completed yet, but the converter pipeline **works**:
+bundle, previews and CSS all build, and 13 of 17 components render. The target project
+`sc-volto-light-theme` (`f0a26637-18ca-4f24-80e7-8d196207efcc`) exists and is empty —
+created this session and pinned in `config.json`, so a retry repairs it rather than
+orphaning it.
+
+An earlier revision of this file said the converter path was out of reach. That was wrong,
+and the correction is the whole point of the recipe below.
+
+## The recipe
+
+Volto is a webpack application, not a publishable component package. Five things bridge
+that gap; none of them forks the converter.
+
+### 1. A synthetic `node_modules` that encodes Volto's alias scheme
+
+`webpack-plugins/webpack-relative-resolver.js` rewrites `@plone/volto/X` to
+`@plone/volto/src/X` at build time, so `@plone/volto/components/theme/Icon/Icon` exists on
+disk only under `src/`. esbuild resolves node-style and finds nothing — 121 errors.
+
+`.design-sync/nm-overlay/` is a directory of symlinks that encodes the rewrite: the three
+aliased packages point at their `src/`, everything else passes through. Sources are the
+add-on's own `node_modules`, the app's, **and Volto's** (`react-redux`,
+`semantic-ui-react`, `react-router-dom` and `react-toastify` resolve only from there).
+Built by the script in the scratchpad recipe below; rebuild it after any `pnpm install`.
+
+Aliased: `@plone/volto` → `core/packages/volto/src`, `@plone/volto-slate` →
+`core/packages/volto-slate/src`, `@kitconcept/volto-light-theme` → its `src` **at the
+declared version** — the pnpm store holds several and a bare glob picks alpha.22 over
+alpha.31.
+
+### 2. A curated entry, because the package exports no components
+
+`src/index.ts` exports only `applyConfig`. `src/storybook/dsEntry.ts` re-exports the 17
+storied view components under the names their storybook titles use.
+
+**QuoteBlock is excluded on purpose**: its view imports `@plone/volto-slate/blocks/Text`,
+whose graph reaches the slate editor's `.less` stylesheets, and the converter's esbuild has
+no `.less` loader. The same trap caught `config/blocks` — see §5.
+
+### 3. `.d.ts`, emitted rather than shipped
+
+The converter reads the component roster from `<pkg>/index.d.ts`; it resolves the package
+through its realpath, so a `types` field in an overlay manifest is **not** consulted.
+
+```bash
+cd frontend/packages/volto-light-theme
+./node_modules/.bin/tsc --emitDeclarationOnly --declaration --noEmit false \
+  --skipLibCheck --outDir ./dist -p tsconfig.json
+```
+
+Exits 1 with ~173 TS2307 — the known pnpm false positives — and **emits all 146 files
+anyway**. `index.d.ts` at the package root re-exports `./dist/src/storybook/dsEntry`.
+Both are gitignored build products.
+
+### 4. CSS, compiled on purpose
+
+Volto compiles the SCSS and style-loader injects it at runtime, so the storybook build
+contains no `.css` file to scrape (`[CSS_RUNTIME]`). `.design-sync/build-css.sh` compiles
+upstream VLT's theme plus ours into `dist/theme.css` (488 KB), stubbing the two webpack
+virtuals sass can't resolve (`addonsThemeCustomizationsVariables`, `…Main`). `cfg.cssEntry`
+points at it.
+
+### 5. Runtime context the app normally provides
+
+Three modules under `src/storybook/`, imported in order by `dsEntry`:
+
+- **`dsGlobals.ts`** — razzle defines `__CLIENT__`, `__SERVER__`, `__DEVELOPMENT__` and
+  `__DEBUG__` through webpack's DefinePlugin. Without them the first component to touch one
+  throws `ReferenceError: __CLIENT__ is not defined`. **This single fix took the render
+  check from 4/17 to 13/17.**
+- **`dsConfig.ts`** — seeds `config.settings`. Note `installSettings` spreads the existing
+  `apiExpanders` and writes into `settings.vlt.components`, so both must exist first or it
+  throws on its first statement and every later setting is silently skipped.
+  `@plone/volto/config` cannot be imported: it reaches `load-volto-addons` (a webpack
+  virtual) and node builtins.
+- **`DsPreviewProvider.tsx`** — `cfg.provider`, because the real decorators import
+  `@root/../locales/en.json`. Reproduces `withTheme`'s defaults plus `IntlProvider` and
+  `MemoryRouter`.
+
+### 6. Run the converter from the storybook project root
+
+`index.json` `importPath`s are relative to `frontend/core/packages/volto` — that is where
+`pnpm --filter @plone/volto build-storybook` runs. The converter resolves them against the
+`.storybook` parent, the cwd, or the static dir's parent, so **run it with cwd =
+`frontend/core/packages/volto`** and pass absolute paths. Without that: `story sources:
+0/0`; with it: `103/103`.
+
+The reference storybook itself builds clean (124 entries, 28 titles):
+
+```bash
+cd frontend && VOLTOCONFIG=$(pwd)/volto.config.js \
+  pnpm --filter @plone/volto build-storybook -c $(pwd)/.storybook \
+  -o "$(git rev-parse --show-toplevel)/.design-sync/sb-reference"
+```
+
+Do **not** use `npx storybook build`: the binary lives in the vendored Volto package, the
+build needs `VOLTOCONFIG`, and `frontend/` has no `razzle.config.js`.
+
+## Where it stands
+
+`package-validate.mjs`: **13/17 render cleanly.** Outstanding:
+
+| component | cause |
+|---|---|
+| `Grid`, `Highlight` | `config.settings.downloadableObjects.includes(...)` inside Volto's `UniversalLink` — the *preview's* registry is empty (see below) |
+| `Navigation` | `items.map` on undefined — same root cause |
+| `MediaCarousel` | `SecurityError: … 'caches' … context is sandboxed` — an artifact of the capture sandbox, not the component |
+
+Also `[GRID_OVERFLOW]` on HeroBlock, MainImageBlock, HeaderBarActions and MenuItem
+(`cardMode: "column"`, a config fix), `[RENDER_THIN]` on ThemeToggle, `[TOKENS_MISSING]`
+for 11 quanta tokens Volto injects at runtime, and `[FONT_DANGLING]` for two upstream
+`@font-face` rules whose files were not copied.
+
+### The one unsolved blocker: two config registries
+
+`@plone/registry` ends with `const instance = new Config(); Object.freeze(instance);` — a
+**module-local** singleton. The converter bundles Volto twice: once into `_ds_bundle.js`
+and again into each compiled preview (story imports resolve components to the bundle
+global, but everything else bundles from source). Each copy constructs its own empty
+`Config`, and `dsConfig.ts` seeds only the bundle's. Components reading `config.settings` —
+`UniversalLink`, which every listing card links through — throw in the preview no matter
+how well the bundle is seeded.
+
+Shimming `@plone/registry` in the overlay to memoise the instance on `globalThis`
+**does not work**: esbuild resolves it from the importer's own `node_modules`
+(`frontend/core/packages/volto/node_modules/@plone/registry`) before consulting the
+`--node-modules` path, so the shim is never reached. Verified — `__dsPloneRegistry` appears
+in neither output bundle.
+
+Untried options, cheapest first:
+
+1. Exclude the three with `cfg.titleMap: {"<title>": null}` — validate goes clean and the
+   sync ships the 14 components that render.
+2. Shadow the package inside the vendored checkout
+   (`frontend/core/packages/volto/node_modules/@plone/registry`), where esbuild *does*
+   look. Reversible and gitignored, but any `pnpm install` undoes it.
+3. Fork `lib/story-imports.mjs` — the seam explicitly built for per-repo resolution policy
+   and, unlike `bundle.mjs`, sanctioned for forking.
+
+`compare.mjs` — the fidelity oracle — has **not run yet**; the skill gates it behind a
+clean validate.
+
+## [GENERAL] Icons — solved, and the two traps that hid the fix
+
+Volto imports icons as `.svg` and its webpack turns them into components via `svg-loader`.
+The converter's esbuild loads `.svg` as a **data URL string** (`loader: {'.svg': 'dataurl'}`
+in `lib/bundle.mjs`, not configurable), so `Icon` received a string and rendered an empty
+`<svg>` — a blank box wherever a component draws an icon.
+
+The fix has three parts:
+
+1. `.design-sync/build-icons.py` generates a `<name>.svg.js` twin per icon, carrying the
+   `{attributes, content}` shape `Icon` reads. The parsing mirrors `svg-loader@0.0.2`
+   statement for statement. Both icon sets are covered: Volto's 335 and our 5.
+2. The overlay points `@plone/volto/icons` at the generated directory (which deliberately
+   contains no `.svg` files — esbuild would find those first).
+3. Our own five icons are reached through the package name rather than a relative path,
+   because **the overlay cannot intercept a relative import**. `ThemeToggle.tsx` and
+   `HoverReaderControls.tsx` now import
+   `@simplesconsultoria/volto-light-theme/icons/<name>.svg`, the same form
+   `.storybook/preview.jsx` already used, and `.design-sync/tsconfig.ds.json` maps that
+   subpath at the twins. esbuild honours tsconfig `paths` ahead of the overlay, which is
+   why the mapping — not a symlink — is what fixes it.
+
+**Two silent traps cost most of the debugging**, both now documented in
+`tsconfig.ds.json` itself:
+
+- A `"//"` documentation *key* breaks the converter's comment-stripping regex, which
+  treats it as a line comment, mangles the JSON, and drops the paths mapping **without
+  printing anything**. Use a block comment.
+- The path target must end in a bare `*`, never `*.js`. The plugin strips only a trailing
+  `*` and appends its own extension list, so `*.js` becomes a literal directory name, the
+  rule never matches, and the broader `/*` rule silently wins — sending icons straight back
+  to the real `.svg` files.
+
+Also worth knowing: `_x32_` and `M460.292` appear **inside the data URL** too, because
+URL-encoding leaves digits and underscores alone. Grepping the bundle for icon content is
+therefore not evidence the twins are in use; check the rendered DOM for a `viewBox`
+attribute instead.
+
+Graded after the fix: AccessibilityControls and ThemeToggle both `match` across all
+stories.
+
+## Source changes this work required
+
+Committed source, not just sync config:
+
+- `src/config/blockThemes.ts` — `createThemeDefinition` extracted from `config/blocks`,
+  which re-exports it so every existing import still works. Needed because importing the
+  factory from `config/blocks` registers every block and drags in QuoteBlock's slate graph.
+- `src/storybook/{dsEntry,dsGlobals,dsConfig}.ts`, `src/storybook/DsPreviewProvider.tsx`.
+
+The 244-test suite passes with all of it.
+
+## Re-sync risks
+
+- **Nothing is anchored** — the project is pinned but no `_ds_sync.json` has been
+  uploaded, so a future run re-verifies everything. That is the documented safe state.
+- **`config.json` holds absolute paths** (`storybookConfigDir`, `storybookStatic`,
+  `entry`) because the converter runs from a different cwd. They are machine-specific and
+  will need rewriting on any other checkout.
+- The overlay and the emitted `.d.ts`/`theme.css` are all gitignored build products —
+  every one of them must be regenerated after a fresh clone or a `pnpm install`.
+- Érico deleted his two earlier Claude Design projects before this run. The general
+  caution still stands: never sync into a project holding hand-authored work, because the
+  reconciliation pass deletes everything the build does not produce.
diff --git a/.design-sync/build-css.sh b/.design-sync/build-css.sh
new file mode 100755
index 0000000..e8f0fea
--- /dev/null
+++ b/.design-sync/build-css.sh
@@ -0,0 +1,41 @@
+#!/usr/bin/env bash
+# Compile a standalone stylesheet for the Claude Design export.
+#
+# The add-on ships SCSS, not CSS: Volto's webpack compiles it and style-loader
+# injects it at runtime, so the storybook build contains no .css file for the
+# converter to scrape ([CSS_RUNTIME]). This produces one, from upstream VLT's
+# theme plus ours, in the same order the app applies them.
+#
+# `addonsThemeCustomizationsVariables` is a virtual module Volto's build
+# generates per project; sass cannot resolve it, so a stub satisfies the import.
+set -euo pipefail
+
+R="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+OUT="$R/frontend/packages/volto-light-theme/dist/theme.css"
+SASS="$R/frontend/core/packages/volto/node_modules/.bin/sass"
+# Pin to the version the add-on declares — the pnpm store holds several, and a
+# bare glob picks whichever sorts first (alpha.22 before alpha.31).
+VLT_VERSION="$(node -p "require('$R/frontend/packages/volto-light-theme/package.json').dependencies['@kitconcept/volto-light-theme'].replace(/^[^0-9]*/,'')")"
+UPSTREAM="$(ls -d "$R"/frontend/node_modules/.pnpm/@kitconcept+volto-light-theme@"$VLT_VERSION"_*/node_modules/@kitconcept/volto-light-theme | head -1)"
+[ -d "$UPSTREAM" ] || { echo "upstream VLT $VLT_VERSION not found in the pnpm store" >&2; exit 1; }
+OURS="$R/frontend/packages/volto-light-theme/src/theme"
+STUBS="$R/.design-sync/.cache/scss-stubs"
+
+mkdir -p "$STUBS" "$(dirname "$OUT")"
+: > "$STUBS/_addonsThemeCustomizationsVariables.scss"
+: > "$STUBS/_addonsThemeCustomizationsMain.scss"
+
+ENTRY="$STUBS/ds-theme.scss"
+cat > "$ENTRY" <<EOF
+@import '$UPSTREAM/src/theme/main';
+@import '$OURS/main';
+EOF
+
+"$SASS" --no-source-map --quiet \
+  --load-path="$STUBS" \
+  --load-path="$UPSTREAM/src/theme" \
+  --load-path="$OURS" \
+  --load-path="$R/frontend/node_modules" \
+  "$ENTRY" "$OUT"
+
+printf 'wrote %s (%s bytes)\n' "$OUT" "$(wc -c < "$OUT" | tr -d ' ')"
diff --git a/.design-sync/build-icons.py b/.design-sync/build-icons.py
new file mode 100644
index 0000000..08db1dc
--- /dev/null
+++ b/.design-sync/build-icons.py
@@ -0,0 +1,88 @@
+"""Generate JS twins for Volto's SVG icons, for bundlers that aren't webpack.
+
+Volto's `Icon` component reads `name.attributes.viewBox` and `name.content` — the shape
+`svg-loader` produces from an `.svg` import under webpack. The design-system converter
+bundles with esbuild, whose loader map hardcodes `.svg` to `dataurl`, so `Icon` receives a
+string, renders nothing, and its button collapses to an empty box.
+
+This writes a `<name>.svg.js` beside nothing at all — into a generated directory the
+overlay points `@plone/volto/icons` at. esbuild falls back to `<path>.js` when the exact
+file is absent, so `import clearSVG from '@plone/volto/icons/clear.svg'` resolves here.
+The generated directory deliberately does NOT contain the `.svg` files themselves: if it
+did, esbuild would find them first and apply the dataurl loader again.
+
+The parsing mirrors `svg-loader@0.0.2/index.js` statement for statement, so the previews
+get exactly what the storybook renders.
+"""
+
+from __future__ import annotations
+
+import json
+import pathlib
+import re
+import shutil
+
+ROOT = pathlib.Path(__file__).resolve().parent.parent
+# (source directory, generated directory). Volto's icons are reached as
+# `@plone/volto/icons/*.svg`; ours as `@simplesconsultoria/volto-light-theme/icons/*.svg`
+# — both are package-absolute, which is what lets the overlay reroute them. A relative
+# `../../icons/x.svg` resolves straight to the real file and cannot be intercepted.
+SOURCES = [
+    (
+        ROOT / "frontend/core/packages/volto/src/icons",
+        ROOT / ".design-sync/.cache/volto-icons",
+    ),
+    (
+        ROOT / "frontend/packages/volto-light-theme/src/icons",
+        ROOT / ".design-sync/.cache/sc-icons",
+    ),
+]
+
+SVG_RE = re.compile(r"<svg([^>]+)+>([\s\S]+)</svg>", re.I)
+ATTR_RE = re.compile(r"""([\w\-:]+)(=)?("[^<>"]*"|'[^<>']*'|[\w\-:]+)""")
+
+
+def parse(svg: str) -> dict:
+    """Extract the root attributes and inner markup, as `svg-loader` does.
+
+    :param svg: the raw contents of an `.svg` file.
+    :returns: the ``{"attributes": ..., "content": ...}`` object `Icon` consumes.
+    """
+    match = SVG_RE.search(svg)
+    if not match:
+        return {"attributes": {}, "content": ""}
+
+    attributes: dict[str, object] = {}
+    for attr in ATTR_RE.findall(match.group(1) or ""):
+        name, _, value = attr
+        attributes[name] = value.strip("'\"") if value else True
+
+    content = re.sub(r"\n", " ", match.group(2) or "").strip()
+    return {"attributes": attributes, "content": content}
+
+
+def main() -> None:
+    for src, out in SOURCES:
+        assert src.is_dir(), f"icons not found at {src}"
+        if out.exists():
+            shutil.rmtree(out)
+        out.mkdir(parents=True)
+
+        written = 0
+        empty = []
+        for svg in sorted(src.glob("*.svg")):
+            payload = parse(svg.read_text(encoding="utf-8"))
+            if not payload["content"]:
+                empty.append(svg.name)
+            (out / f"{svg.name}.js").write_text(
+                f"export default {json.dumps(payload)};\n", encoding="utf-8"
+            )
+            written += 1
+
+        print(f"wrote {written} icon modules to {out.relative_to(ROOT)}")
+        if empty:
+            print(f"  ! parsed no content for: {', '.join(empty)}")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/.design-sync/build-overlay.py b/.design-sync/build-overlay.py
new file mode 100644
index 0000000..966da43
--- /dev/null
+++ b/.design-sync/build-overlay.py
@@ -0,0 +1,175 @@
+"""Build a synthetic node_modules that encodes Volto's webpack alias scheme.
+
+Volto's RelativeResolverPlugin rewrites `@plone/volto/X` to `@plone/volto/src/X` at
+build time. esbuild can't do that, so the overlay points those two packages at their
+`src/` directories and symlinks everything else through unchanged.
+"""
+
+import os
+import pathlib
+import shutil
+
+ROOT = pathlib.Path(__file__).resolve().parent.parent
+OVERLAY = ROOT / ".design-sync/nm-overlay"
+SOURCES = [
+    ROOT / "frontend/packages/volto-light-theme/node_modules",
+    ROOT / "frontend/node_modules",
+    # Volto's src imports its own deps (react-redux, semantic-ui-react, ...)
+    # from here, not from the app's node_modules.
+    ROOT / "frontend/core/packages/volto/node_modules",
+]
+
+# package name -> the directory it should really resolve to
+ALIASES = {
+    "@plone/volto": ROOT / "frontend/core/packages/volto/src",
+    "@plone/volto-slate": ROOT / "frontend/core/packages/volto-slate/src",
+}
+kit = list((ROOT / "frontend/node_modules/.pnpm").glob(
+    "@kitconcept+volto-light-theme@8.0.0-alpha.31*/node_modules/@kitconcept/volto-light-theme"
+))
+assert kit, "kitconcept VLT alpha.31 not found in the pnpm store"
+ALIASES["@kitconcept/volto-light-theme"] = kit[0] / "src"
+
+for target in ALIASES.values():
+    assert target.is_dir(), f"alias target missing: {target}"
+
+if OVERLAY.exists():
+    shutil.rmtree(OVERLAY)
+OVERLAY.mkdir(parents=True)
+
+linked = 0
+for src in SOURCES:
+    if not src.is_dir():
+        continue
+    for entry in sorted(src.iterdir()):
+        if entry.name.startswith(".") and entry.name != ".pnpm":
+            continue
+        if entry.name.startswith("@"):
+            scope = OVERLAY / entry.name
+            scope.mkdir(exist_ok=True)
+            for pkg in sorted(entry.iterdir()):
+                dest = scope / pkg.name
+                if not dest.exists(follow_symlinks=False):
+                    dest.symlink_to(pkg.resolve())
+                    linked += 1
+        else:
+            dest = OVERLAY / entry.name
+            if not dest.exists(follow_symlinks=False):
+                dest.symlink_to(entry.resolve())
+                linked += 1
+
+# apply the aliases last so they win over the plain symlinks above
+for name, target in ALIASES.items():
+    dest = OVERLAY / name
+    dest.parent.mkdir(parents=True, exist_ok=True)
+    if dest.exists(follow_symlinks=False) or dest.is_symlink():
+        dest.unlink()
+    dest.symlink_to(target.resolve())
+
+# @plone/volto becomes a real directory mirroring volto/src, so that `icons` can
+# point at the generated JS twins instead of the .svg files. esbuild's loader map
+# hardcodes .svg to dataurl, which makes Volto's Icon render nothing; the twins
+# carry the {attributes, content} shape it actually reads. Run build-icons.py first.
+ICONS = ROOT / ".design-sync/.cache/volto-icons"
+if ICONS.is_dir():
+    volto_src = ALIASES["@plone/volto"]
+    volto = OVERLAY / "@plone/volto"
+    if volto.is_symlink():
+        volto.unlink()
+    elif volto.exists():
+        shutil.rmtree(volto)
+    volto.mkdir(parents=True)
+    for child in sorted(volto_src.iterdir()):
+        if child.name == "icons":
+            continue
+        (volto / child.name).symlink_to(child.resolve())
+    (volto / "icons").symlink_to(ICONS.resolve())
+    print(f"@plone/volto/icons -> {len(list(ICONS.glob('*.js')))} generated icon modules")
+else:
+    print("! .design-sync/.cache/volto-icons missing — run build-icons.py; icons will render empty")
+
+# The DS package itself gets a synthetic view rather than a plain symlink. The
+# converter reads the component roster from the .d.ts the package's `types`
+# field names, and the real package.json has none (it ships TS source, and its
+# only export is `applyConfig`). Declaring `types` here points the converter at
+# the curated design-system surface without touching the published manifest.
+import json
+PKG = "@simplesconsultoria/volto-light-theme"
+PKG_REAL = ROOT / "frontend/packages/volto-light-theme"
+view = OVERLAY / PKG
+if view.is_symlink():
+    view.unlink()
+elif view.exists():
+    shutil.rmtree(view)
+view.mkdir(parents=True)
+real_manifest = json.loads((PKG_REAL / "package.json").read_text())
+(view / "package.json").write_text(json.dumps({
+    **real_manifest,
+    "types": "dist/src/storybook/dsEntry.d.ts",
+}, indent=2) + "\n")
+for child in ("src", "dist", "locales", "node_modules", "public"):
+    target = PKG_REAL / child
+    if target.exists():
+        (view / child).symlink_to(target.resolve())
+
+# Our own icons need the same JS twins as Volto's, for the same reason. Reached as
+# `@simplesconsultoria/volto-light-theme/icons/<name>.svg`, which is why the two
+# components using them import that form rather than a relative path.
+SC_ICONS = ROOT / ".design-sync/.cache/sc-icons"
+if SC_ICONS.is_dir():
+    (view / "icons").symlink_to(SC_ICONS.resolve())
+else:
+    print("! .design-sync/.cache/sc-icons missing — run build-icons.py")
+print(f"synthetic package view: {view.relative_to(ROOT)} (types -> dist/src/storybook/dsEntry.d.ts)")
+
+# @plone/registry is a module-local singleton (`const instance = new Config()`),
+# so the converter's bundle and each compiled preview would each get their OWN
+# empty config — seeding one is invisible to the other, and components that read
+# `config.settings` throw in the preview however well the bundle is set up. This
+# shim memoises the instance on globalThis so every copy shares one.
+REG_REAL = ROOT / "frontend/core/packages/registry"
+reg = OVERLAY / "@plone/registry"
+if reg.is_symlink():
+    reg.unlink()
+elif reg.exists():
+    shutil.rmtree(reg)
+reg.mkdir(parents=True)
+(reg / "package.json").write_text(json.dumps({
+    "name": "@plone/registry",
+    "version": "0.0.0-ds-shim",
+    "main": "index.js",
+    "module": "index.js",
+    "types": f"{REG_REAL}/src/index.ts",
+}, indent=2) + "\n")
+(reg / "index.js").write_text(
+    f"import instance from '{REG_REAL}/src/index.ts';\n"
+    f"export * from '{REG_REAL}/src/index.ts';\n"
+    "const g = globalThis;\n"
+    "if (!g.__dsPloneRegistry) g.__dsPloneRegistry = instance;\n"
+    "export default g.__dsPloneRegistry;\n"
+)
+for child in ("addon-registry", "src"):
+    t = REG_REAL / child
+    if t.exists():
+        (reg / child).symlink_to(t.resolve())
+print("shimmed @plone/registry as a globalThis singleton")
+
+print(f"overlay: {linked} packages linked, {len(ALIASES)} aliased")
+for name in ALIASES:
+    probe = OVERLAY / name
+    # @plone/volto is a mirrored directory rather than a symlink (see the icons
+    # reroute above), so report the target only when there is one to read.
+    target = os.readlink(probe) if probe.is_symlink() else "(mirrored directory)"
+    print(f"  {name} -> {target}")
+
+# prove the alias actually resolves the paths esbuild failed on
+checks = [
+    "@plone/volto/components/theme/Icon/Icon.jsx",
+    "@plone/volto/icons/clear.svg",
+    "@plone/volto/registry.js",
+    "@plone/volto/config.js",
+    "@kitconcept/volto-light-theme/primitives/Card/Card.jsx",
+]
+print("\nresolution probes:")
+for rel in checks:
+    print(f"  {'ok  ' if (OVERLAY / rel).exists() else 'MISS'} {rel}")
diff --git a/.design-sync/config.json b/.design-sync/config.json
new file mode 100644
index 0000000..cb1526a
--- /dev/null
+++ b/.design-sync/config.json
@@ -0,0 +1,60 @@
+{
+  "pkg": "@simplesconsultoria/volto-light-theme",
+  "shape": "storybook",
+  "storybookConfigDir": "/Users/ericof/Projects/SimplesConsultoria/Code/sc-volto-light-theme/frontend/.storybook",
+  "storybookStatic": "/Users/ericof/Projects/SimplesConsultoria/Code/sc-volto-light-theme/.design-sync/sb-reference",
+  "entry": "/Users/ericof/Projects/SimplesConsultoria/Code/sc-volto-light-theme/frontend/packages/volto-light-theme/src/storybook/dsEntry.ts",
+  "srcDir": "frontend/packages/volto-light-theme/src",
+  "cssEntry": "dist/theme.css",
+  "provider": {
+    "component": "DsPreviewProvider"
+  },
+  "projectId": "f0a26637-18ca-4f24-80e7-8d196207efcc",
+  "titleMap": {
+    "Grid": null,
+    "Highlight": null,
+    "Navigation": null,
+    "QuoteBlock": null,
+    "ThemeForm": null,
+    "ThemeSwatches": null,
+    "ThemesList": null,
+    "ThemesToolbarActions": null,
+    "ThemesUI": null,
+    "Gallery": null,
+    "Inventory": null,
+    "DefaultView": null,
+    "Separator": null
+  },
+  "overrides": {
+    "HeroBlock": {
+      "cardMode": "column"
+    },
+    "MainImageBlock": {
+      "cardMode": "column"
+    },
+    "HeaderBarActions": {
+      "cardMode": "column"
+    },
+    "MenuItem": {
+      "cardMode": "column"
+    },
+    "SubMenu": {
+      "cardMode": "column"
+    },
+    "SubMenuItem": {
+      "cardMode": "column"
+    },
+    "SubMenuItems": {
+      "cardMode": "column"
+    },
+    "SubMenuSection": {
+      "cardMode": "column"
+    }
+  },
+  "tsconfig": "../../../.design-sync/tsconfig.ds.json",
+  "storyImports": {
+    "loaders": {
+      ".jpg": "dataurl"
+    }
+  }
+}
diff --git a/.design-sync/tsconfig.ds.json b/.design-sync/tsconfig.ds.json
new file mode 100644
index 0000000..3af1bc1
--- /dev/null
+++ b/.design-sync/tsconfig.ds.json
@@ -0,0 +1,30 @@
+/*
+  tsconfig for the Claude Design build only — never for the app or the tests.
+
+  The package's own tsconfig maps `@simplesconsultoria/volto-light-theme/*` to `./src/*`,
+  and esbuild honours that mapping ahead of the --node-modules overlay. Icon imports
+  therefore reached the real .svg files and were loaded as data URLs, which makes Volto's
+  Icon render an empty <svg>. Mapping the icons subpath at the generated JS twins puts the
+  {attributes, content} shape Icon reads back into the bundle.
+
+  Two traps, both silent:
+
+  - Write comments as a block like this one, NOT as a `"//"` key. The converter strips
+    comments with a regex that treats `"//":` as a line comment, mangling the JSON; it
+    then parses nothing and drops the paths mapping without saying so.
+  - The target must end in a bare `*`, never `*.js`. The plugin strips only a trailing
+    `*` and appends its own extension list, so `*.js` becomes a literal directory name,
+    the rule never matches, and the broader `/*` rule below silently wins — sending icon
+    imports back to the real .svg files.
+*/
+{
+  "extends": "../frontend/packages/volto-light-theme/tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@simplesconsultoria/volto-light-theme/icons/*": ["./.cache/sc-icons/*"],
+      "@simplesconsultoria/volto-light-theme/*": [
+        "../frontend/packages/volto-light-theme/src/*"
+      ]
+    }
+  }
+}
diff --git a/.gitignore b/.gitignore
index 9099385..984abff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,23 @@ node_modules
 /core
 /public
 *.mo
+
+# design-sync (Claude Design)
+# Ignore the working state; keep the durable inputs a re-sync needs. Everything
+# under .design-sync/ that is NOT ignored here is the sync's repo footprint:
+# sb-reference/, .cache/, learnings/ and nm-overlay/ are all regenerated.
+.design-sync/*
+!.design-sync/config.json
+!.design-sync/NOTES.md
+!.design-sync/conventions.md
+!.design-sync/tsconfig.ds.json
+!.design-sync/*.py
+!.design-sync/*.sh
+!.design-sync/previews/
+!.design-sync/overrides/
+
+# Staged converter scripts, generated bundle, and build products of the sync.
+.ds-sync/
+ds-bundle/
+frontend/packages/volto-light-theme/dist/
+frontend/packages/volto-light-theme/index.d.ts
diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md
new file mode 100644
index 0000000..73e6391
--- /dev/null
+++ b/DESIGN_SYSTEM.md
@@ -0,0 +1,14 @@
+# Design System
+
+The design system for `@simplesconsultoria/volto-light-theme` is documented under
+[`docs/design-system/`](./docs/design-system/).
+
+| document | contents |
+|---|---|
+| [DESIGN_SYSTEM.md](./docs/design-system/DESIGN_SYSTEM.md) | the manifest — what the add-on owns, what it inherits, and the rules that govern how they compose |
+| [INVENTORY.md](./docs/design-system/INVENTORY.md) | exhaustive tables: block schemas, listing variations, all custom properties with resolved light/dark values, the type scale |
+| [GAPS.md](./docs/design-system/GAPS.md) | verified defects, a WCAG contrast audit of the shipped palette, and the open design decisions |
+| [previews/](./docs/design-system/previews/) | self-contained preview pages, marked up for import into Claude Design |
+
+The most current answer to "what blocks exist" is not in any of these — it is the
+`Public/Blocks/Inventory` story, which reads the block registry at runtime.
diff --git a/backend/news/+content-colors.feature b/backend/news/+content-colors.feature
new file mode 100644
index 0000000..9a0b460
--- /dev/null
+++ b/backend/news/+content-colors.feature
@@ -0,0 +1 @@
+Added `event_color`, `file_color` and `image_color` (with `_light` and `_dark` variants) to the `ISCVLTThemeDefinition` schema and updated `default` and `initial` registry profiles, allowing site themes to control content-type colors directly from the themes control panel. @humanaice
diff --git a/backend/src/sc/voltolighttheme/interfaces.py b/backend/src/sc/voltolighttheme/interfaces.py
index cb8b3f6..04c7145 100644
--- a/backend/src/sc/voltolighttheme/interfaces.py
+++ b/backend/src/sc/voltolighttheme/interfaces.py
@@ -84,6 +84,18 @@ class ISCVLTThemeDefinition(model.Schema):
             "neutral_accent_color_dark",
         ],
     )
+    model.fieldset(
+        "content_types",
+        label=_("Content Types Colors"),
+        fields=[
+            "event_color_light",
+            "event_color_dark",
+            "file_color_light",
+            "file_color_dark",
+            "image_color_light",
+            "image_color_dark",
+        ],
+    )
 
     name = schema.TextLine(
         title="Theme name",
@@ -318,3 +330,27 @@ class ISCVLTThemeDefinition(model.Schema):
         ),
         required=False,
     )
+    event_color_light = fields.Color(
+        title=_("label_event_color_light", default="Event Color (Light)"),
+        required=False,
+    )
+    event_color_dark = fields.Color(
+        title=_("label_event_color_dark", default="Event Color (Dark)"),
+        required=False,
+    )
+    file_color_light = fields.Color(
+        title=_("label_file_color_light", default="File Color (Light)"),
+        required=False,
+    )
+    file_color_dark = fields.Color(
+        title=_("label_file_color_dark", default="File Color (Dark)"),
+        required=False,
+    )
+    image_color_light = fields.Color(
+        title=_("label_image_color_light", default="Image Color (Light)"),
+        required=False,
+    )
+    image_color_dark = fields.Color(
+        title=_("label_image_color_dark", default="Image Color (Dark)"),
+        required=False,
+    )
diff --git a/backend/src/sc/voltolighttheme/profiles/default/registry/sc.voltolighttheme.themes.xml b/backend/src/sc/voltolighttheme/profiles/default/registry/sc.voltolighttheme.themes.xml
index 622a8a9..ab08902 100644
--- a/backend/src/sc/voltolighttheme/profiles/default/registry/sc.voltolighttheme.themes.xml
+++ b/backend/src/sc/voltolighttheme/profiles/default/registry/sc.voltolighttheme.themes.xml
@@ -52,6 +52,12 @@
     <value key="neutral_low_foreground_color_dark">#e6e6e6</value>
     <value key="neutral_accent_color_light">#f4822c</value>
     <value key="neutral_accent_color_dark">#f4822c</value>
+    <value key="event_color_light">#d32f2f</value>
+    <value key="event_color_dark">#d32f2f</value>
+    <value key="file_color_light">#1976d2</value>
+    <value key="file_color_dark">#1976d2</value>
+    <value key="image_color_light">#388e3c</value>
+    <value key="image_color_dark">#388e3c</value>
   </records>
 
 </registry>
diff --git a/backend/src/sc/voltolighttheme/profiles/initial/registry/sc.voltolighttheme.themes.xml b/backend/src/sc/voltolighttheme/profiles/initial/registry/sc.voltolighttheme.themes.xml
index 10abdef..f1ce7cd 100644
--- a/backend/src/sc/voltolighttheme/profiles/initial/registry/sc.voltolighttheme.themes.xml
+++ b/backend/src/sc/voltolighttheme/profiles/initial/registry/sc.voltolighttheme.themes.xml
@@ -46,6 +46,12 @@
     <value key="neutral_low_foreground_color_dark">#9e9e9e</value>
     <value key="neutral_accent_color_light">#d32f2f</value>
     <value key="neutral_accent_color_dark">#d32f2f</value>
+    <value key="event_color_light">#d32f2f</value>
+    <value key="event_color_dark">#d32f2f</value>
+    <value key="file_color_light">#1976d2</value>
+    <value key="file_color_dark">#1976d2</value>
+    <value key="image_color_light">#388e3c</value>
+    <value key="image_color_dark">#388e3c</value>
   </records>
 
 </registry>
diff --git a/docs/design-system/DESIGN_SYSTEM.md b/docs/design-system/DESIGN_SYSTEM.md
new file mode 100644
index 0000000..b0055e2
--- /dev/null
+++ b/docs/design-system/DESIGN_SYSTEM.md
@@ -0,0 +1,317 @@
+# Design System — `@simplesconsultoria/volto-light-theme`
+
+The manifest for this add-on's design system: what it owns, what it inherits, and the
+rules that govern how the two compose.
+
+Every factual claim here was checked against the source or measured in a browser on
+2026-09-01/02. Where something is a decision nobody has taken yet, it says so rather than
+guessing.
+
+- **Package:** `@simplesconsultoria/volto-light-theme`
+- **Built on:** `@kitconcept/volto-light-theme@8.0.0-alpha.31` (the `theme` in `package.json`)
+- **Companion documents:** [INVENTORY.md](./INVENTORY.md) for the exhaustive tables,
+  [GAPS.md](./GAPS.md) for defects and open questions
+
+---
+
+## 1. How to read this system
+
+Three layers stack, and almost everything confusing about the theme comes from not
+knowing which layer you are looking at:
+
+| layer | supplies | you change it by |
+|---|---|---|
+| **Volto core** + `@plone/volto-slate` | the block vocabulary and page rendering | not at all |
+| **`@kitconcept/volto-light-theme`** | most of the visual language, the `--theme-*` contract, `@property` registrations, `initialBlocks` per type | upgrading the dependency |
+| **this add-on** | 4 blocks, 3 listing variations, 2 template overrides, the block theme factory, the semantic palette, the type scale | editing this package |
+| **a project using it** | concrete colours, via the Themes control panel | an `ISCVLTThemeDefinition` record |
+
+**The single most useful entry point is Storybook**, not this file. `Public/Blocks/Inventory`
+reads `config.blocks.blocksConfig` at runtime, so it always lists what an editor actually
+has — 42 blocks today. This document explains the parts that a table cannot.
+
+---
+
+## 2. What this add-on owns
+
+### 2.1 Blocks
+
+Four, registered in `src/config/blocks.ts`:
+
+| id | title | group | notes |
+|---|---|---|---|
+| `heroBlock` | Hero Block | common | two variations (`flex`, `card`); dynamic schema; 30 `--theme-*` references — the most theme-sensitive block in the system |
+| `mainImageBlock` | Main Image | media | renders the content item's `preview_image_link`; **no colour tokens at all**, only container widths |
+| `quoteBlock` | Quote | text | Slate body; the only own block reading semantic tokens (`--accent-color`) directly as well as `--theme-*` |
+| `documentByline` | Byline | common | publication/modification dates and authors; **ships no stylesheet** — see GAPS §2.1 |
+
+Full schemas in [INVENTORY.md](./INVENTORY.md) §1.
+
+### 2.2 Listing variations
+
+Three added, two overridden — `src/config/blocks.ts` → `install()`:
+
+| id | title | action |
+|---|---|---|
+| `carousel` | Carousel | added |
+| `mediaCarousel` | Media Carousel | added |
+| `teaser` | Highlight | added |
+| `grid` | *(upstream)* | template replaced with `GridTemplate` |
+| `imageGallery` | *(upstream)* | template replaced with `GridTemplate` |
+
+Each addition is guarded by an existence check, so `install()` is idempotent, and the
+`listing` block's own `schemaEnhancer` is *composed with* rather than replacing upstream's.
+
+### 2.3 The `gridBlock` extension
+
+`installGridBlock()` assigns this add-on's themes to both `gridBlock.themes` and
+`gridBlock.blocksConfig.themes`, and appends eight ids to `allowedBlocks`:
+`documentByline`, `__button`, `listing`, `slider`, `carousel`, `mainImageBlock`,
+`heroBlock`, `quoteBlock`. Core caps the grid at `maxLength: 4`.
+
+---
+
+## 3. The block theme system
+
+This is the part most worth understanding, because it is this add-on's own invention and
+it is what a project extends.
+
+`createThemeDefinition(name, label)` maps **14 semantic `--theme-*` properties** onto
+`--block-theme-{name}-*` tokens, in four groups:
+
+- **Ground** — the block's own background and text: `bg`, `text`, `high-contrast`,
+  `low-contrast`, `accent-color`
+- **High Ground** — elevated elements inside it (cards, chips): `high-bg`, `top-text`,
+  `top-high-contrast`, `top-low-contrast`, `top-accent-color`
+- **Border** — `border`, `border-width`
+- **Pattern** — `pattern-image`, `pattern-opacity`. Declared, defined as `none`/`0`, and
+  **consumed nowhere**. Implement or delete; see GAPS §1.2.
+
+Two themes ship: `default` (labelled "Primary") and `brand` ("Brand"). Adding a third
+downstream is one line plus a matching token block in `_root.scss`:
+
+```ts
+createThemeDefinition('purple', 'Purple')
+```
+
+> **The contract is enforced by a test.** `src/theme/blockThemes.test.ts` fails if the
+> factory maps a property `_root.scss` does not declare in its `:root` block, or if a
+> stylesheet reads a `--theme-*` no theme supplies. It exists because the failure is
+> otherwise silent — a `var()` with no definition and no fallback is invalid at
+> computed-value time, so the whole declaration is dropped. That is how six focus
+> outlines went missing.
+
+---
+
+## 4. Colour
+
+### 4.1 Structure
+
+Ten base values feed a **4 × 4 semantic matrix** — `primary` / `secondary` / `accent` /
+`neutral`, each with `color`, `foreground-color`, `low-foreground-color`,
+`accent-color`. Every semantic token is a `light-dark()` pair, so the system is
+dual-mode by construction.
+
+Resolved values for both modes: [INVENTORY.md](./INVENTORY.md) §5.2. Visual:
+[previews/colors.html](./previews/colors.html).
+
+### 4.2 The rule that matters
+
+**Components read semantic tokens, never base values.** `--gray-80` appears in
+`_root.scss` and essentially nowhere else; a component that reaches for it bypasses both
+colour modes and the Themes control panel.
+
+### 4.3 Registered properties — a real constraint
+
+Upstream registers six tokens with `@property { syntax: '<color>' }`: `--primary-color`,
+`--primary-foreground-color`, `--secondary-color`, `--secondary-foreground-color`,
+`--accent-color`, `--accent-foreground-color`.
+
+A **registered** custom property is computed eagerly at the element that declares it, so
+its `light-dark()` resolves once at `:root` and inherits as a flat colour. An
+**unregistered** one stays an unresolved token stream and resolves wherever it is *used*,
+following the `color-scheme` in force at that element.
+
+The two halves therefore fail in opposite directions, which is what makes this confusing
+in practice:
+
+| | mode set on `:root` only | mode set on a wrapper only |
+|---|---|---|
+| the six **registered** tokens | correct | frozen at the root's mode |
+| every **unregistered** token | frozen, *if something resets `color-scheme` below the root* | correct |
+
+Storybook's preview does reset `color-scheme` below `<html>`, so neither placement alone
+works there — `withTheme` sets it in **both** places. On a real page the mode lives on
+`<html>` and the question never arises; it only bites when switching mode on a descendant.
+
+### 4.4 Contrast
+
+Both AA failures the first audit found are now fixed. They were the two accent tokens
+that used `--brand-color` in *both* modes rather than swapping between the brand shades
+the way `--primary-accent-color` and `--accent-color` do:
+
+| token | mode | was | now |
+|---|---|---|---|
+| `--secondary-accent-color` | dark, on `#ffffff` | `#f4822c` — 2.60 **FAIL** | `#b55e1c` — 4.58 AA |
+| `--neutral-accent-color` | light, on `#edeff0` | `#f4822c` — 2.25 **FAIL** | `#af5009` — 4.58 AA |
+
+The second one is why `--brand-color-darker` (`#af5009`) exists: `#b55e1c` reaches only
+3.97 against `#edeff0`, which is AA-large at best.
+
+> Every ratio in this system is a **default**. A site that sets its own colours through
+> the Themes control panel replaces them, so the audit has to be re-run per project.
+
+---
+
+## 5. Typography
+
+Eleven steps in `$font-sizes`, and now eleven in `$line-heights` too. Declared in
+**rem** so the global `--font-scale` on `html` resizes text emitted by upstream mixins.
+
+The six scalar overrides (`$font-size`, `$heading1`, …) are exact px→rem conversions of
+upstream's `!default` values. That conversion is their entire purpose; they are not
+duplicates and should stay.
+
+All four font tokens resolve to `system-ui` — the theme ships no brand typeface. Note
+that `--custom-main-font` has no consumer in this package but drives upstream's
+`$page-font`.
+
+Scale and heading rules: [previews/typography.html](./previews/typography.html).
+
+---
+
+## 6. Layout
+
+| token | value |
+|---|---|
+| `--narrow-container-width` | `940px !important` |
+| `--default-container-width` | `940px !important` |
+| `--layout-container-width` | `1440px !important` |
+
+`narrow` and `default` are currently identical, so two of the four `blockWidth` choices
+are indistinguishable; all three carry `!important`, which blocks downstream override.
+Both are open questions — GAPS §3.1.
+
+---
+
+## 7. Scoping rules — the thing that trips people up
+
+Stylesheets in this package are scoped to ancestors that only exist on a real page. A
+component rendered outside its chain gets **none** of its styling, and the symptom always
+looks like missing CSS rather than a missing wrapper:
+
+| stylesheet | scoped to |
+|---|---|
+| `_listing.scss` | `body .block.listing`, then `&.carousel` / `&.mediaCarousel` / … |
+| `_header.scss`, `_headerBar.scss`, `_mobileTools.scss` | `body header.header-wrapper` |
+| `_navigation.scss` | `#navigation.navigation` **and** `&.scNavigation` |
+| any themed block | needs `--theme-*` from a themed wrapper |
+| `_accessibilityControls.scss`, `_themeToggle.scss` | *unscoped* — but drawn for the dark bar, so they need the right **ground**, not the right ancestor |
+
+Anything rendering these outside a page — a story, a preview, a screenshot harness — has
+to reproduce the chain.
+
+The accessibility controls are the instructive counter-example: their selectors are
+unscoped, so the rules *did* apply, and they still looked wrong — the buttons are drawn as
+light pills for the dark `--secondary-color` bar, so on a pale ground they read as
+unstyled browser defaults. The CSS was never the problem; the **ground** was.
+
+The rule this suggests: a story should reproduce the ancestor chain its component's
+stylesheet names, and sit on a themed ground rather than a hardcoded grey — the hardcoded
+value is exactly what hides the mismatch.
+
+---
+
+## 8. Per-project overlay
+
+A project supplies colours through the Themes control panel, not by forking this package.
+The backend serves an `ISCVLTThemeDefinition` with **38 colour fields** — the four
+semantic families × four roles, plus the three content types — each of them a `_light` /
+`_dark` pair. `helpers/themeStyles.ts` maps every field onto the custom property of the
+same name, so `primary_color_light` becomes `--primary-color-light`: exactly the override
+hook `_root.scss` reads inside its `light-dark()`. A themed site therefore keeps both
+colour modes.
+
+The mapping is mechanical, so a colour added to the schema needs no frontend change — and
+`themeStyles.test.ts` now checks **both** ends of that contract: that the pinned field
+list still matches the schema, and that `_root.scss` actually reads every property the
+mapping derives. The second half is the one that was missing when the content-type
+colours were wired to `--event-color-override`, a property nothing writes.
+
+`--header-foreground-color` is the exception in the other direction: `_root.scss` reads
+it, but no field of `ISCVLTThemeDefinition` supplies it, so nothing can set it today.
+
+`Themes/fixtures.ts` holds three realistic records, and the Storybook toolbar can apply
+any of them to any story.
+
+---
+
+## 9. Storybook
+
+103 stories. The ones that answer design-system questions:
+
+| story | answers |
+|---|---|
+| `Public/Blocks/Inventory` | what blocks exist, and which layer supplies each |
+| `Public/Blocks/Gallery` | every registered block rendered — all 42 without error |
+| `Public/Views/Default View` | how blocks compose on a Document, News Item and Event |
+| `Public/Blocks/Grid` | `gridBlock` at 1–4 columns |
+| `Public/Blocks/Listing/*` | the four listing variations |
+| `Public/Blocks/Separator` | block width × short line × alignment |
+| `Public/Navigation/*` | the navigation bar and the fat menu |
+
+The toolbar carries three globals — **colour mode** (light / dark / high contrast),
+**block theme** (Primary / Brand) and **site theme** — so any story can be checked in any
+combination. See `src/storybook/withTheme.tsx`.
+
+Every story is constrained to `--default-container-width` and centred, so components are
+seen at the measure they occupy on a page. Stories that genuinely span the viewport —
+the page views, the header bar, the navigation — opt out with
+`parameters: { fullBleed: true }`.
+
+### 9.1 Where a story lives
+
+A story for a component this package ships sits **beside the component**; a story for a
+component from a dependency sits in **`src/storybook/`**, alongside the decorator and the
+shared fixtures. That is why `gridBlock` and `separator` — core and
+`@kitconcept/volto-separator-block` respectively — are not filed under
+`components/Blocks/`. See `src/storybook/README.md`.
+
+### 9.2 Story images
+
+`frontend/.storybook/main.js` serves `packages/volto-light-theme/public` at the Storybook
+root, so a file at `public/images/example.jpg` is reachable as `/images/example.jpg` and
+ships with the package. Fixtures currently point at `picsum.photos` instead, which serves
+arbitrary third-party photographs and needs network access — replacing them is the
+provenance question in §11. `public/images/README.md` lists the four places a fixture
+names its image host.
+
+---
+
+## 10. Export to Claude Design
+
+Preview pages live in [previews/](./previews/), each marked with a first-line
+`<!-- @dsCard group="…" -->` comment, which is what the Design System pane builds its card
+index from. Foundations (`colors`, `typography`, `block-themes`) are generated from the
+SCSS; the block previews are captured from the built Storybook with computed styles
+inlined, so they are the real component output rather than a reimplementation.
+
+`register_assets` is legacy and not needed — the `@dsCard` markers are sufficient.
+
+---
+
+## 11. Open decisions
+
+Nothing below is a defect; each is a choice nobody has made. Full context in
+[GAPS.md](./GAPS.md) §6.
+
+- Is `--brand-color: #f4822c` a deliberate default, or inherited from a client site?
+  It feeds `--accent-color`, all four link tokens and both block themes' accent slots.
+- Should the content-type colours (`#d32f2f`, `#1976d2`, `#388e3c`) be brand-aligned?
+  They sit off the brand ramp and carry the same value in both colour modes.
+- Should `narrow` and `default` container widths differ?
+- Should the `documentByline` block get a stylesheet?
+- Implement the Pattern layer, or delete it?
+- Translate `es` and `de`? Both are registered locales with empty catalogues; `pt_BR` is
+  complete at 147 messages.
+- Replace the placeholder imagery and sample copy with assets of known provenance.
diff --git a/docs/design-system/GAPS.md b/docs/design-system/GAPS.md
new file mode 100644
index 0000000..b9113d2
--- /dev/null
+++ b/docs/design-system/GAPS.md
@@ -0,0 +1,118 @@
+# Design System Gaps
+
+What is still **open** in `@simplesconsultoria/volto-light-theme` — defects not yet fixed,
+coverage not yet built, and decisions nobody has taken.
+
+Resolved items are not kept here. This document should answer "what is wrong now", and a
+list of past fixes gets in the way of that; the history is in the changelog and in git.
+
+Every entry was verified against source or measured in a browser. Where the fix is a
+judgment call rather than a correction, it says so — those are collected in §6.
+
+Companions: [DESIGN_SYSTEM.md](./DESIGN_SYSTEM.md) for how the system works,
+[INVENTORY.md](./INVENTORY.md) for the exhaustive tables.
+
+---
+
+## 1. Colour tokens
+
+### 1.1 `--theme-font-color` is consumed upstream but never mapped
+
+Read once by `@kitconcept/volto-light-theme@8.0.0-alpha.31`, not mapped by
+`createThemeDefinition` and not defined here, so upstream's own fallback governs. Worth
+confirming against upstream's intent before adding a mapping.
+
+### 1.2 The Pattern layer is declared but unimplemented
+
+`createThemeDefinition` maps `--theme-pattern-image` and `--theme-pattern-opacity`, and
+`_root.scss` defines them as `none` / `0` for both themes so the mapping resolves — but
+**nothing consumes them**. Implement the layer or delete the two mappings.
+
+### 1.3 Duplicated link tokens
+
+`--link-color` / `--color-link` and `--link-color-hover` / `--color-link-hover` are
+duplicate pairs carrying the same values, kept for two naming conventions. Harmless, but a
+project overriding one and not the other gets an inconsistent result.
+
+---
+
+## 2. Components
+
+### 2.1 `documentByline` ships no stylesheet
+
+There is no `_documentByLine.scss` anywhere in `src/theme/`. In isolation this is
+invisible, because a story gives the block a padded container; on a page it is obvious —
+every other block sits in the centred content column while the byline starts flush against
+the viewport edge.
+
+Its markup is three `Container` elements from `@plone/components` inside a bare
+`<div class="documentByLine">`, and nothing constrains that wrapper to a container width.
+Visible in the `Public/Views/Default View` stories.
+
+---
+
+## 3. Layout
+
+### 3.1 `narrow` and `default` container widths are identical
+
+Both are `940px !important`, while `--layout-container-width` is `1440px`. The
+`blockWidth` widget offers `narrow`, `default`, `layout` and `full` as distinct choices,
+but two produce the same result. All three also carry `!important`, which blocks a
+downstream override without another `!important`.
+
+---
+
+## 4. Storybook coverage
+
+All 42 registered blocks render without error. Eleven still show an **empty state** for
+want of sample data:
+
+| block | what it needs |
+|---|---|
+| `banner`, `carousel`, `heading`, `introduction`, `logos`, `maps`, `slider` | block data; derivable from each package's schema, but none of them ship a story or mocks to harvest |
+| `toc` | sibling heading blocks — a composition fixture, not block data |
+| `separator` | nothing; a horizontal rule legitimately has no text, and its five dedicated stories confirm it renders |
+| `followUsBlock` | has data and does not error, but was never confirmed to paint visible links |
+
+### 4.1 Not verified
+
+- The block preview pages under `previews/` were generated from a Storybook capture whose
+  pipeline lives **outside the repo**, so nobody else can regenerate them. Either commit
+  the generator or drop them — shipping unreproducible generated artifacts is the worst of
+  the options.
+- Story imagery is now fourteen bundled photographs in `src/storybook/images/`, imported
+  by the fixtures so they inline at build time and need no network. `.npmignore` keeps
+  them out of the published package.
+
+---
+
+## 5. Translation coverage
+
+`pnpm i18n` extracts **147 messages** (the `.pot` reports 148 including its header).
+
+| locale | translated | note |
+|---|---|---|
+| `en` | 0 / 147 | intentional — an empty `msgstr` falls back to the English `defaultMessage` |
+| `pt_BR` | 147 / 147 | complete; validated with `msgfmt --check` |
+| `es` | 0 / 147 | registered locale, never translated |
+| `de` | 0 / 147 | registered locale, never translated |
+
+`utils/speechSynthesis.ts` also hardcodes `pt-BR` when choosing a screen-reader voice.
+Unlike the date formatters, that is arguably deliberate, so it was left alone.
+
+---
+
+## 6. Open decisions — need a human
+
+Nothing here is a defect; each is a choice nobody has made.
+
+| # | question | why it matters |
+|---|---|---|
+| — | Is `--brand-color: #f4822c` a deliberate default, or inherited from a client site? | It feeds `--accent-color`, all four link tokens and both block themes' accent slots. It no longer gates a contrast failure — those are fixed — but it still decides what the theme looks like before a project touches it. |
+| — | Should the content-type colours be brand-aligned? | `#d32f2f`, `#1976d2` and `#388e3c` are off the brand ramp and carry the same value in both colour modes. They resolve correctly and a site theme can now override them, so this is taste, not a defect. |
+| — | Should `narrow` and `default` container widths differ (§3.1)? | Two of the four `blockWidth` choices are indistinguishable. |
+| — | Implement or delete the Pattern layer (§1.2)? | Its tokens resolve but nothing consumes them. |
+| — | Should `documentByline` get a stylesheet, and at what width (§2.1)? | It renders flush to the viewport edge on a page. |
+| H14 | Translate `es` and `de` (§5)? | Both are registered locales with empty catalogues. |
+| — | Replace placeholder imagery and sample copy with assets of known provenance (§4.1)? | Affects all 42 blocks, not only the ones with fixtures. |
+| — | Is the Claude Design export still a goal? | Decides whether `previews/` earns its keep — see §4.1. |
diff --git a/docs/design-system/INVENTORY.md b/docs/design-system/INVENTORY.md
new file mode 100644
index 0000000..82d190b
--- /dev/null
+++ b/docs/design-system/INVENTORY.md
@@ -0,0 +1,444 @@
+# Design System Inventory
+
+Machine-extracted inventory of `@simplesconsultoria/volto-light-theme`.
+
+Every row is derived from source by reading, not by inference. Evidence paths are
+relative to `frontend/packages/volto-light-theme/`. `[V 2026-09-01]` marks a row
+verified against the working tree on that date.
+
+- **Package:** `@simplesconsultoria/volto-light-theme`
+- **Upstream:** `@kitconcept/volto-light-theme@8.0.0-alpha.31` (declared in `package.json`, `theme` field)
+- **Scope:** this document covers the add-on's *own* vocabulary. Upstream VLT and Volto
+  core blocks are a referenced vocabulary and are not re-documented here.
+
+---
+
+## 1. Blocks the add-on ships
+
+Registered in `src/config/blocks.ts` → `installLocalBlocks()`. `[V 2026-09-01]`
+
+| id | title (registration) | group | icon | sidebarTab | restricted | evidence |
+|---|---|---|---|---|---|---|
+| `documentByline` | `Byline` | `common` | `pencil.svg` | 1 | `false` (`mostUsed: true`) | `src/components/Blocks/DocumentByLine/index.ts` |
+| `mainImageBlock` | `Main Image` | `media` | `image.svg` | 1 | only when the content item has `preview_image_link` | `src/components/Blocks/MainImageBlock/index.ts` |
+| `heroBlock` | `Hero Block` | `common` | `presentation.svg` | 1 | `false` | `src/components/Blocks/HeroBlock/index.ts` |
+| `quoteBlock` | `Quote` | `text` | `quote.svg` | 1 | `false` | `src/components/Blocks/QuoteBlock/index.ts` |
+
+All titles are English strings translated through `formatMessageWithFallback`, which uses
+the string itself as the message id. See GAPS §5.
+
+### 1.1 `documentByline`
+
+Schema: `src/components/Blocks/DocumentByLine/schema.ts`
+
+| field | type | default | required |
+|---|---|---|---|
+| `showPublished` | `boolean` | `true` | no |
+| `showModified` | `boolean` | `true` | no |
+| `showAuthor` | `boolean` | `false` | no |
+
+Single fieldset `default`, `required: []`. **No** styling schema — this is the only own
+block that does not call `defaultStylingSchema`, so it has no `theme` control.
+
+### 1.2 `mainImageBlock`
+
+Schema: `src/components/Blocks/MainImageBlock/schema.tsx`
+
+| field | widget / type | default | notes |
+|---|---|---|---|
+| `title` | `string` | — | |
+| `description` | `string`, `textarea` | — | |
+| `altText` | `string` | — | description links to the W3C alt-text decision tree |
+| `align` | `align` | `center` | actions restricted to `left` / `right` / `center` |
+| `size` | `image_size` | `l` | set to `m` in `properties`, then overridden to `l`; disabled when `align === 'center'` |
+| `href` | `object_browser`, `mode: link` | — | fieldset `link_settings`; externals allowed |
+| `openLinkInNewTab` | `boolean` | — | fieldset `link_settings` |
+| `styles.blockWidth:noprefix` | `blockWidth` | `default` | `filterActions: narrow, default, layout, full`; disabled when `align` is `left`/`right` |
+| `styles.theme` | `color_picker` | `default` | injected by `defaultStylingSchema` |
+
+Fieldsets: `default`, `styling`, `link_settings`. `required: []`.
+
+### 1.3 `heroBlock`
+
+Schema: `src/components/Blocks/HeroBlock/schema.ts`. Has a `dataAdapter`
+(`adapter.ts`) and two variations declared in `index.ts`:
+
+| variation | title | default |
+|---|---|---|
+| `flex` | `Flex / Decorative` | yes |
+| `card` | `Attached Card` | no |
+
+The schema is **dynamic** — fieldset composition depends on `formData`:
+
+- `default` fieldset always carries `href`, `overwrite`, `headerText`, `showDate`, `footerText`
+- `+ title`, `description` only when `overwrite` is `true`
+- `+ tags` only when `variation === 'flex'`
+- `fileType` prepended only when `variation === 'card'`
+- `image` fieldset carries `preview_image` only when `overwrite` is `true`
+
+| field | widget / type | default | choices |
+|---|---|---|---|
+| `href` | `object_browser`, `mode: link` | — | externals **not** allowed; **the only required field** |
+| `overwrite` | `boolean` | `false` | |
+| `headerText` | `string` | — | |
+| `showDate` | `boolean` | `true` | |
+| `title` | `string` | — | |
+| `description` | `string`, `textarea` | — | |
+| `footerText` | `string` | — | |
+| `tags` | `array` of `string` | — | |
+| `fileType` | `string` | — | free text; hint suggests `PDF`, `Report`, `Article` |
+| `preview_image` | `object_browser`, `mode: image` | — | |
+| `hideImage` | `boolean` | `false` | |
+| `imageFit` | `string` | `cover` | `cover`, `contain` |
+| `button` | `boolean` | — | |
+| `buttonLink` | `object_browser`, `mode: link` | — | |
+| `buttonText` | `string` | — | |
+| `blockWidth` | `blockWidth` | `layout` | |
+| `imageSize` | `string` | `50%` | `0%`, `30%`, `40%`, `50%`, `60%`, `70%` |
+| `titleTag` | `string` | `h2` | `h1`, `h2`, `h3`, `p` |
+| `textSide` | `align` | `left` | actions `left`, `right` |
+| `fullWidth` | `boolean` | `false` | in the `layout` fieldset |
+| `styles.theme` | `color_picker` | `default` | injected by `defaultStylingSchema` |
+
+`href` selects a content item and pulls `Title`, `Description`, `hasPreviewImage`,
+`head_title`, `image_field`, `image_scales`, `@type`, `EffectiveDate`, `CreationDate`,
+`effective`, `start`, `end`.
+
+### 1.4 `quoteBlock`
+
+Schema: `src/components/Blocks/QuoteBlock/schema.ts`. `blockHasOwnFocusManagement: true`
+(the block body is a Slate editor).
+
+| field | type | default | choices |
+|---|---|---|---|
+| `value` | Slate value | — | not declared in the schema; supplied by the editor |
+| `author` | `string` | — | |
+| `backgroundStyle` | `string` | `transparent` | `transparent`, `filled` |
+| `styles.theme` | `color_picker` | `default` | injected by `defaultStylingSchema` |
+
+`required: []`.
+
+---
+
+## 2. Listing variations
+
+Installed in `src/config/blocks.ts` → `install()`. `[V 2026-09-01]`
+
+| id | title | template | schemaEnhancer | action |
+|---|---|---|---|---|
+| `grid` | *(upstream)* | `GridTemplate` | *(upstream)* | **overridden** |
+| `imageGallery` | *(upstream)* | `GridTemplate` | *(upstream)* | **overridden** |
+| `carousel` | `Carousel` | `CarouselTemplate` | `carouselSchemaEnhancer` | **added** |
+| `mediaCarousel` | `Media Carousel` | `MediaCarouselTemplate` | `mediaCarouselSchemaEnhancer` | **added** |
+| `teaser` | `Highlight` | `TeaserTemplate` | `teaserSchemaEnhancer` | **added** |
+
+All three additions are guarded by an `id` existence check, so re-running `install()` is
+idempotent. The `listing` block's own `schemaEnhancer` is wrapped so
+`listingSchemaEnhancer` composes with, rather than replaces, the upstream one.
+
+Variation titles go through `formatMessageWithFallback` like block titles, and are
+registered for extraction in `src/index.ts`.
+
+## 3. `gridBlock` extension
+
+`installGridBlock()` — runs only if `gridBlock` is already registered. `[V 2026-09-01]`
+
+- Assigns `customThemes` to both `gridBlock.themes` and `gridBlock.blocksConfig.themes`
+- Appends 8 ids to `allowedBlocks`: `documentByline`, `__button`, `listing`, `slider`,
+  `carousel`, `mainImageBlock`, `heroBlock`, `quoteBlock`
+- Copies each of those blocks' config into `gridBlock.blocksConfig`
+
+---
+
+## 4. The block theme system
+
+`createThemeDefinition(name, label)` in `src/config/blocks.ts:72`. `[V 2026-09-01]`
+
+The factory maps 14 semantic `--theme-*` custom properties onto
+`--block-theme-{name}-*` tokens, in four groups:
+
+| group | `--theme-*` property | `--block-theme-{name}-*` suffix |
+|---|---|---|
+| Ground | `--theme-color` | `bg` |
+| Ground | `--theme-foreground-color` | `text` |
+| Ground | `--theme-high-contrast-foreground-color` | `high-contrast` |
+| Ground | `--theme-low-contrast-foreground-color` | `low-contrast` |
+| Ground | `--theme-foreground-accent-color` | `accent-color` |
+| High Ground | `--theme-high-contrast-color` | `high-bg` |
+| High Ground | `--theme-top-foreground-color` | `top-text` |
+| High Ground | `--theme-top-high-contrast-foreground-color` | `top-high-contrast` |
+| High Ground | `--theme-top-low-contrast-foreground-color` | `top-low-contrast` |
+| High Ground | `--theme-top-accent-color` | `top-accent-color` |
+| Border | `--theme-border-color` | `border` |
+| Border | `--theme-border-width` | `border-width` |
+| Pattern | `--theme-pattern-image` | `pattern-image` |
+| Pattern | `--theme-pattern-opacity` | `pattern-opacity` |
+
+Two themes ship, both via the factory:
+
+```ts
+const customThemes: ThemeDefinition[] = [
+  createThemeDefinition('default', 'Primary'),
+  createThemeDefinition('brand', 'Brand'),
+];
+```
+
+Adding a third in a downstream project is a one-liner plus a matching
+`--block-theme-{name}-*` block in `_root.scss`.
+
+All 14 suffixes are defined in `_root.scss` for both themes as of 2026-09-01. Four of
+them previously were not, which silently dropped 12 declarations — including six focus
+outlines. The mapping is now enforced by `src/theme/blockThemes.test.ts`.
+
+### 4.1 Which `--theme-*` properties are consumed
+
+Counted with `grep -rhoE 'var\(--theme-[a-z-]+'`. `[V 2026-09-01]`
+
+| property | upstream VLT | this add-on | resolves? |
+|---|---|---|---|
+| `--theme-foreground-color` | 121 | 18 | yes |
+| `--theme-color` | 32 | 13 | yes |
+| `--theme-high-contrast-color` | 20 | 29 | yes |
+| `--theme-low-contrast-foreground-color` | 19 | 1 | yes |
+| `--theme-top-foreground-color` | — | 34 | yes |
+| `--theme-border-color` | — | 10 | yes |
+| `--theme-foreground-accent-color` | — | 6 | yes |
+| `--theme-top-low-contrast-foreground-color` | — | 5 | yes |
+| `--theme-top-accent-color` | — | 2 | yes |
+| `--theme-top-high-contrast-foreground-color` | — | 9 | yes |
+| `--theme-high-contrast-foreground-color` | — | 3 | yes |
+| `--theme-border-width` | — | 4 | yes |
+| `--theme-pattern-image` | — | 0 | yes, but unused |
+| `--theme-pattern-opacity` | — | 0 | yes, but unused |
+| `--theme-font-color` | 1 | — | **no** — consumed upstream, never mapped here |
+
+---
+
+## 5. Tokens
+
+`src/theme/_root.scss` — 256 lines. 116 custom-property definition sites across the
+package. `[V 2026-09-02]`
+
+**Nothing in this package assigns the `--*-color-light` / `--*-color-dark` override
+hooks.** They are populated at runtime from the backend Themes control panel
+(`ISCVLTThemeDefinition`, see `src/types/theme.ts`). The `light-dark()` fallbacks are
+therefore the shipped defaults, and every value below is exactly resolvable.
+
+### 5.1 Base palette
+
+| token | value |
+|---|---|
+| `--pure-white` | `#fff` |
+| `--pure-black` | `#000` |
+| `--gray-02` | `#f8f8f8` |
+| `--gray-cool-05` | `#edeff0` |
+| `--gray-10` | `#e6e6e6` |
+| `--gray-50` | `#757575` |
+| `--gray-80` | `#333` |
+| `--brand-color` | `#f4822c` |
+| `--brand-color-dark` | `#b55e1c` |
+| `--brand-color-darker` | `#af5009` |
+
+### 5.2 Semantic palette
+
+Four families × four roles. Each is `light-dark(var(--x-light, FALLBACK), var(--x-dark, FALLBACK))`.
+
+| token | light | dark |
+|---|---|---|
+| `--primary-color` | `#ffffff` | `#000000` |
+| `--primary-foreground-color` | `#000000` | `#ffffff` |
+| `--primary-low-foreground-color` | `#333333` | `#f8f8f8` |
+| `--primary-accent-color` | `#b55e1c` | `#f4822c` |
+| `--secondary-color` | `#000000` | `#ffffff` |
+| `--secondary-foreground-color` | `#ffffff` | `#000000` |
+| `--secondary-low-foreground-color` | `#e6e6e6` | `#333333` |
+| `--secondary-accent-color` | `#f4822c` | `#b55e1c` |
+| `--accent-color` | `#f4822c` | `#b55e1c` |
+| `--accent-foreground-color` | `#000000` | `#ffffff` |
+| `--accent-low-foreground-color` | `#333333` | `#f8f8f8` |
+| `--accent-accent-color` | `#000000` | `#ffffff` |
+| `--neutral-color` | `#edeff0` | `#333333` |
+| `--neutral-foreground-color` | `#000000` | `#ffffff` |
+| `--neutral-low-foreground-color` | `#333333` | `#e6e6e6` |
+| `--neutral-accent-color` | `#af5009` | `#f4822c` |
+
+### 5.3 Layout mappings
+
+| token | maps to |
+|---|---|
+| `--header-background` | `--primary-color` |
+| `--header-foreground` | `--header-foreground-color`, falling back to `--primary-foreground-color` |
+| `--footer-background` | `--secondary-color` |
+| `--footer-foreground` | `--secondary-foreground-color` |
+| `--fatmenu-background` | `--primary-color` |
+| `--fatmenu-foreground` | `--primary-foreground-color` |
+| `--breadcrumbs-background` | `--accent-color` |
+| `--breadcrumbs-foreground` | `--accent-foreground-color` |
+| `--search-background` | `--primary-color` |
+| `--search-foreground` | `--primary-foreground-color` |
+
+`--header-foreground` keeps its name deliberately: upstream VLT's
+`_bgcolor-blocks-layout.scss` reads that exact token. **Do not rename it.**
+
+### 5.4 Content-type colours
+
+| token | value |
+|---|---|
+| `--news-item-color` | `var(--pure-black)` |
+| `--document-color` | `var(--accent-color)` |
+| `--event-color` | `light-dark(#d32f2f, #d32f2f)` |
+| `--file-color` | `light-dark(#1976d2, #1976d2)` |
+| `--image-color` | `light-dark(#388e3c, #388e3c)` |
+
+> The last three are the only tokens whose default is a literal rather than a palette
+> entry — they sit off the brand ramp. Each reads `--<type>-color-light` /
+> `--<type>-color-dark` first, so a site theme can override them per colour mode; the
+> shipped defaults are the same value in both.
+
+### 5.5 Links
+
+| token | value |
+|---|---|
+| `--link-foreground-color` | `var(--brand-color)` |
+| `--link-color` | `var(--brand-color)` |
+| `--link-color-hover` | `var(--brand-color-dark)` |
+| `--color-link` | `var(--brand-color)` |
+| `--color-link-hover` | `var(--brand-color-dark)` |
+
+Four tokens for two values — `--link-color`/`--color-link` and their `-hover` pairs are
+duplicates carried for compatibility with two naming conventions.
+
+### 5.6 Container widths
+
+| token | value |
+|---|---|
+| `--narrow-container-width` | `940px !important` |
+| `--default-container-width` | `940px !important` |
+| `--layout-container-width` | `1440px !important` |
+
+`narrow` and `default` are the same value — see GAPS §3.1.
+
+### 5.7 Typography tokens
+
+| token | value |
+|---|---|
+| `--font-sans` | `system-ui, sans-serif` |
+| `--custom-font` | `system-ui, sans-serif` |
+| `--custom-main-font` | `system-ui, sans-serif` |
+| `--font-body` | `system-ui, sans-serif` |
+
+All four resolve to the same stack; the theme ships no brand typeface.
+
+### 5.8 Colour modes
+
+`_root.scss` defines three `data-theme` states:
+
+| selector | `color-scheme` | notes |
+|---|---|---|
+| `[data-theme='light']` | `light` | |
+| `[data-theme='dark']` | `dark` | |
+| `[data-theme='high-contrast']` | `dark` | overrides all 16 semantic tokens plus links, content-type colours and both themes' borders |
+
+High-contrast palette: `--text-high-contrast: #fff`, `--bg-high-contrast: #000`,
+`--border-high-contrast: #fff`, `--link-high-contrast: #fff333`,
+`--accent-high-contrast: #fff`. It collapses every family onto black/white and forces
+underlines on links and `.card-summary .title`.
+
+---
+
+## 6. Type scale
+
+`src/theme/_variables.scss` — rem-based overrides of upstream VLT's typography tokens,
+so the global `--font-scale` on `html` resizes theme-mixin text. `[V 2026-09-02]`
+
+| step | font-size | line-height |
+|---|---|---|
+| `2xs` | `0.75rem` | `0.875rem` |
+| `xs` | `0.875rem` | `1rem` |
+| `s` | `1.125rem` | `1.125rem` |
+| `m` | `1.3125rem` | `1.5rem` |
+| `l` | `1.5rem` | `1.875rem` |
+| `xl` | `1.875rem` | `2.0625rem` |
+| `2xl` | `2.0625rem` | `2.25rem` |
+| `3xl` | `2.25rem` | `2.625rem` |
+| `4xl` | `2.625rem` | `3rem` |
+| `5xl` | `3rem` | `3.5rem` |
+| `6xl` | `5rem` | `5.5rem` |
+
+`$font-sizes` and `$line-heights` both have 11 steps; every size has a line-height.
+
+Scalar overrides: `$font-size: 1.125rem`, `$line-height: 1.5rem`, `$heading1: 3.75rem`,
+`$heading2: 1.875rem`, `$heading3: 1.5rem`, `$block-title-h2: 2.625rem`.
+
+> `$heading1` (`3.75rem`) does not correspond to any `$font-sizes` step, and the actual
+> `h1.documentFirstHeading` rule uses `5xl` (`3rem`) instead.
+
+### 6.1 Heading rules
+
+`src/theme/_typography.scss`. `[V 2026-09-01]`
+
+| rule | size | weight | line-height | mobile override |
+|---|---|---|---|---|
+| `h1.documentFirstHeading` | `5xl` | 400 | `5xl` | `3xl` / `3xl`, margin-bottom `1rem` |
+| `@mixin h2_base` → `h2` | `l` | 700 | `l` | centred, 2rem side margins |
+| `@mixin h2_headline` → `h2.headline` | `xl` | 400 | `2xl` | centred, 2rem side margins |
+
+`h1`–`h6` are reset to `font-family: inherit`. Mobile breakpoint is
+`$largest-mobile-screen` (from upstream VLT).
+
+---
+
+## 7. Stories
+
+**103 stories.** The count and the classification below are current as of 2026-09-02;
+`Public/Blocks/Inventory` is the authoritative live list of blocks, since it reads the
+registry at runtime.
+
+| group | stories | covers |
+|---|---|---|
+| `Public/Blocks` | 56 | the four own blocks, the four listing variations, grid at 1–4 columns, separator, plus the inventory and gallery |
+| `Public/Navigation` | 31 | the navigation bar, menu items, the fat menu and its parts |
+| `Controlpanels/Themes` | 17 | admin UI — **excluded from the design-system export** |
+| `Public/Views` | 4 | Document, News Item and Event composed through `DefaultView` |
+| `Public/DocumentByLine` | 4 | the byline in isolation |
+| `Public/Header` | 4 | accessibility controls |
+| `Public/ThemeToggle` | 4 | the three colour modes |
+| `Components/DropdownMenu` | 3 | |
+| `Components/HeaderBarActions` | 1 | |
+
+Builder is `@storybook/react-webpack5` + Razzle (not Vite), configured in
+`frontend/.storybook/`, run through `pnpm --filter @plone/volto storybook` — it borrows
+Volto core's install from the `frontend/core` mrs-developer checkout.
+
+### 7.1 Where a story lives
+
+| the story covers | it lives |
+|---|---|
+| a component this package ships | beside the component |
+| a component from a dependency, or nothing in particular | `src/storybook/` |
+
+So `Blocks/HeroBlock/HeroBlock.stories.tsx` sits with its block, while `gridBlock`
+(Volto core) and `separator` (`@kitconcept/volto-separator-block`) have their stories in
+`src/storybook/` — putting them under `components/Blocks/` would imply this package owns
+them. The same split applies to fixtures: `Listing/fixtures.ts` stays with the listing
+templates, `storybook/galleryFixtures.ts` and `storybook/viewFixtures.ts` do not.
+
+`src/storybook/README.md` states the rule alongside the code.
+
+### 7.2 Conventions
+
+- Stories render through the `withTheme` decorator (`src/storybook/withTheme.tsx`), which
+  supplies the colour mode, the block theme and optionally a site theme, and constrains
+  the story to `--default-container-width`, centred. Full-bleed stories opt out with
+  `parameters: { fullBleed: true }`.
+- A component whose stylesheet is scoped to an ancestor must be rendered inside that
+  ancestor — see DESIGN_SYSTEM §7 for the cases where this bit.
+- `Public/Blocks/Gallery` uses `RealStoreWrapper`, not `Wrapper`: `search` and
+  `eventCalendar` dispatch thunks on mount, which a plain mock store rejects.
+
+### 7.3 Static assets
+
+`frontend/.storybook/main.js` serves `packages/volto-light-theme/public` at the Storybook
+root, so `public/images/example.jpg` is reachable as `/images/example.jpg`. Fixtures
+currently point at `picsum.photos`; `public/images/README.md` lists the four places to
+change to move them onto bundled assets.
diff --git a/docs/design-system/previews/block-byline.html b/docs/design-system/previews/block-byline.html
new file mode 100644
index 0000000..d258265
--- /dev/null
+++ b/docs/design-system/previews/block-byline.html
@@ -0,0 +1,105 @@
+<!-- @dsCard group="Components" -->
+<!--
+  Byline block — @simplesconsultoria/volto-light-theme
+  Real rendered markup captured from Storybook with computed styles inlined.
+  Remote images are replaced by a neutral placeholder.
+-->
+<meta charset="utf-8" />
+<title>Byline block</title>
+<style>
+  :root { --ink:#16181d; --ink-soft:#5b6270; --rule:#e4e7ec; --ground:#fff; }
+  * { box-sizing: border-box; }
+  body {
+    margin:0; padding:40px 32px 56px; background:var(--ground); color:var(--ink);
+    font:400 14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
+    -webkit-font-smoothing:antialiased;
+  }
+  .wrap { max-width:1180px; margin:0 auto; }
+  h1 { margin:0 0 6px; font-size:26px; font-weight:600; letter-spacing:-.02em; }
+  .lede { margin:0; max-width:68ch; color:var(--ink-soft); }
+  h2 {
+    margin:44px 0 4px; font-size:12px; font-weight:600; letter-spacing:.08em;
+    text-transform:uppercase; color:var(--ink-soft);
+  }
+  code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }
+  .story { margin-top:18px; border:1px solid var(--rule); border-radius:12px; overflow:hidden; }
+  .story > .head {
+    display:flex; align-items:baseline; gap:10px; padding:11px 16px;
+    border-bottom:1px solid var(--rule); background:#fafbfc;
+  }
+  .story > .head b { font-size:13px; }
+  .story > .head span { color:var(--ink-soft); font-size:12px; }
+  .modes { display:grid; grid-template-columns:1fr 1fr; }
+  .modes > figure { margin:0; min-width:0; }
+  .modes > figure + figure { border-left:1px solid var(--rule); }
+  figcaption {
+    padding:7px 14px; border-bottom:1px solid var(--rule); background:#fcfcfd;
+    font:600 10px/1.4 system-ui,sans-serif; letter-spacing:.1em;
+    text-transform:uppercase; color:var(--ink-soft);
+  }
+  .stage { padding:20px; overflow-x:auto; }
+  /* the captured markup is a 1200px-wide page; `zoom` scales it into the
+     column and, unlike `transform`, reflows so the stage height follows */
+  .stage > .fit { width:1200px; }
+  footer {
+    margin-top:44px; padding-top:16px; border-top:1px solid var(--rule);
+    color:var(--ink-soft); font-size:12.5px; line-height:1.6;
+  }
+</style>
+<div class="wrap">
+  <h1>Byline block</h1>
+  <p class="lede">Publication date, last-modified date and authors, each independently toggleable. It ships no stylesheet of its own, so it inherits page typography and colour entirely.</p>
+  <h2>Variations</h2>
+  <div class="story">
+    <div class="head"><b>All fields</b><span>all three toggles on</span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:108.797px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:760px;height:108.797px;max-width:760px;margin-right:220px;margin-left:220px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:708.812px;height:57.6094px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:708.812px;height:19.2031px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Published: <time style="font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">7/1/2026</time></div><div style="width:708.812px;height:19.2031px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Last modified: <time style="font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">7/10/2026</time></div><div style="width:708.812px;height:19.2031px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">By: <span style="font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Matheus Nunes</span><span style="font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Ericof</span></div></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:108.797px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:760px;height:108.797px;max-width:760px;margin-right:220px;margin-left:220px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:708.812px;height:57.6094px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:708.812px;height:19.2031px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Published: <time style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">7/1/2026</time></div><div style="width:708.812px;height:19.2031px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Last modified: <time style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">7/10/2026</time></div><div style="width:708.812px;height:19.2031px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">By: <span style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Matheus Nunes</span><span style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Ericof</span></div></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Dates only</b><span><code>showAuthor: false</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:89.5938px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:760px;height:89.5938px;max-width:760px;margin-right:220px;margin-left:220px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:708.812px;height:38.4062px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:708.812px;height:19.2031px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Published: <time style="font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">7/1/2026</time></div><div style="width:708.812px;height:19.2031px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Last modified: <time style="font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">7/10/2026</time></div></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:89.5938px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:760px;height:89.5938px;max-width:760px;margin-right:220px;margin-left:220px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:708.812px;height:38.4062px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:708.812px;height:19.2031px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Published: <time style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">7/1/2026</time></div><div style="width:708.812px;height:19.2031px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Last modified: <time style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">7/10/2026</time></div></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Authors only</b><span>both dates off</span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:70.3906px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:760px;height:70.3906px;max-width:760px;margin-right:220px;margin-left:220px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:708.812px;height:19.2031px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:708.812px;height:19.2031px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">By: <span style="font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Matheus Nunes</span><span style="font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Ericof</span></div></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:70.3906px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:760px;height:70.3906px;max-width:760px;margin-right:220px;margin-left:220px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:708.812px;height:19.2031px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:708.812px;height:19.2031px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">By: <span style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Matheus Nunes</span><span style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Ericof</span></div></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <footer>Captured from the built Storybook, not hand-written: each block is the real component output with its computed styles inlined, rendered through the <code>withTheme</code> decorator so the colour mode and the <code>--theme-*</code> mapping resolve exactly as they do on a page. Remote photography is replaced by a neutral placeholder. See <code>DESIGN_SYSTEM.md</code> &sect;4.3 for why the decorator has to set the colour scheme in two places.</footer>
+</div>
\ No newline at end of file
diff --git a/docs/design-system/previews/block-hero.html b/docs/design-system/previews/block-hero.html
new file mode 100644
index 0000000..425e377
--- /dev/null
+++ b/docs/design-system/previews/block-hero.html
@@ -0,0 +1,191 @@
+<!-- @dsCard group="Components" -->
+<!--
+  Hero block — @simplesconsultoria/volto-light-theme
+  Real rendered markup captured from Storybook with computed styles inlined.
+  Remote images are replaced by a neutral placeholder.
+-->
+<meta charset="utf-8" />
+<title>Hero block</title>
+<style>
+  :root { --ink:#16181d; --ink-soft:#5b6270; --rule:#e4e7ec; --ground:#fff; }
+  * { box-sizing: border-box; }
+  body {
+    margin:0; padding:40px 32px 56px; background:var(--ground); color:var(--ink);
+    font:400 14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
+    -webkit-font-smoothing:antialiased;
+  }
+  .wrap { max-width:1180px; margin:0 auto; }
+  h1 { margin:0 0 6px; font-size:26px; font-weight:600; letter-spacing:-.02em; }
+  .lede { margin:0; max-width:68ch; color:var(--ink-soft); }
+  h2 {
+    margin:44px 0 4px; font-size:12px; font-weight:600; letter-spacing:.08em;
+    text-transform:uppercase; color:var(--ink-soft);
+  }
+  code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }
+  .story { margin-top:18px; border:1px solid var(--rule); border-radius:12px; overflow:hidden; }
+  .story > .head {
+    display:flex; align-items:baseline; gap:10px; padding:11px 16px;
+    border-bottom:1px solid var(--rule); background:#fafbfc;
+  }
+  .story > .head b { font-size:13px; }
+  .story > .head span { color:var(--ink-soft); font-size:12px; }
+  .modes { display:grid; grid-template-columns:1fr 1fr; }
+  .modes > figure { margin:0; min-width:0; }
+  .modes > figure + figure { border-left:1px solid var(--rule); }
+  figcaption {
+    padding:7px 14px; border-bottom:1px solid var(--rule); background:#fcfcfd;
+    font:600 10px/1.4 system-ui,sans-serif; letter-spacing:.1em;
+    text-transform:uppercase; color:var(--ink-soft);
+  }
+  .stage { padding:20px; overflow-x:auto; }
+  /* the captured markup is a 1200px-wide page; `zoom` scales it into the
+     column and, unlike `transform`, reflows so the stage height follows */
+  .stage > .fit { width:1200px; }
+  footer {
+    margin-top:44px; padding-top:16px; border-top:1px solid var(--rule);
+    color:var(--ink-soft); font-size:12.5px; line-height:1.6;
+  }
+</style>
+<div class="wrap">
+  <h1>Hero block</h1>
+  <p class="lede">The add-on's most configurable block: two variations, a dynamic schema whose fieldsets change with <code>overwrite</code> and <code>variation</code>, and 30 references to <code>--theme-*</code> — more than any other block, so it is the one most affected by the selected block theme.</p>
+  <h2>Block theme &ldquo;Primary&rdquo; (<code>default</code>)</h2>
+  <div class="story">
+    <div class="head"><b>Flex, text left</b><span>variation <code>flex</code>, <code>imageSize: 50%</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:481.984px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1200px;height:481.984px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:430.797px;max-width:100%;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1148.81px;height:430.797px;max-width:1440px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:430.797px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-direction:row-reverse;flex-wrap:wrap;align-items:center;gap:60px;width:1148.81px;height:430.797px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:calc(50% - 60px);justify-content:center;align-items:end;gap:20px;width:514.406px;height:327.047px;min-width:min-content;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;box-sizing:border-box"><header style="display:flex;flex-direction:column;align-items:end;width:356.281px;height:135.875px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;box-sizing:border-box"><p style="width:32.1875px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-color:rgb(181, 94, 28);border-right-color:rgb(181, 94, 28);border-bottom-color:rgb(181, 94, 28);border-left-color:rgb(181, 94, 28);box-sizing:border-box;outline-color:rgb(181, 94, 28)">News</p><p style="width:43.1562px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:20px;color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);box-sizing:border-box;outline-color:rgb(51, 51, 51)">Article</p><h2 style="width:356.281px;height:33.5938px;min-width:auto;min-height:auto;margin-top:21.4857px;margin-bottom:12.8px;font-family:Inter, sans-serif;font-size:28.8px;line-height:33.6px;text-align:right;word-break:keep-all;box-sizing:border-box">This is a Highlighted Title</h2></header><p style="width:448.953px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;word-break:keep-all;box-sizing:border-box">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:72.375px;height:19.2031px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;box-sizing:border-box">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;text-align:right;word-break:break-word;border-top-color:rgb(181, 94, 28);border-right-color:rgb(181, 94, 28);border-bottom-color:rgb(181, 94, 28);border-left-color:rgb(181, 94, 28);box-sizing:border-box;outline-color:rgb(181, 94, 28)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:172.688px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;word-break:break-word;box-sizing:border-box"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(237, 239, 240);border-right-color:rgb(237, 239, 240);border-bottom-color:rgb(237, 239, 240);border-left-color:rgb(237, 239, 240);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(237, 239, 240);border-right-color:rgb(237, 239, 240);border-bottom-color:rgb(237, 239, 240);border-left-color:rgb(237, 239, 240);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Community</li></ul></div><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:0;flex-grow:1;flex-basis:50%;width:574.406px;height:430.797px;min-width:250px;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:absolute;top:-20px;right:514.406px;bottom:370.797px;left:-20px;z-index:-1;width:80px;height:80px;background-color:rgb(237, 239, 240);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"></div><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:1;width:574.406px;height:430.797px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><div style="width:574.406px;height:430.797px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:574.406px;height:430.797px;max-width:100%;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;object-fit:cover;box-sizing:border-box"></div></div></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:481.984px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1200px;height:481.984px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:430.797px;max-width:100%;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1148.81px;height:430.797px;max-width:1440px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:430.797px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-direction:row-reverse;flex-wrap:wrap;align-items:center;gap:60px;width:1148.81px;height:430.797px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:calc(50% - 60px);justify-content:center;align-items:end;gap:20px;width:514.406px;height:327.047px;min-width:min-content;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><header style="display:flex;flex-direction:column;align-items:end;width:356.281px;height:135.875px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:32.1875px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">News</p><p style="width:43.1562px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:20px;color:rgb(248, 248, 248);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-color:rgb(248, 248, 248);border-right-color:rgb(248, 248, 248);border-bottom-color:rgb(248, 248, 248);border-left-color:rgb(248, 248, 248);box-sizing:border-box;outline-color:rgb(248, 248, 248)">Article</p><h2 style="width:356.281px;height:33.5938px;min-width:auto;min-height:auto;margin-top:21.4857px;margin-bottom:12.8px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:28.8px;line-height:33.6px;text-align:right;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">This is a Highlighted Title</h2></header><p style="width:448.953px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:72.375px;height:19.2031px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;text-align:right;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:172.688px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Community</li></ul></div><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:0;flex-grow:1;flex-basis:50%;width:574.406px;height:430.797px;min-width:250px;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:absolute;top:-20px;right:514.406px;bottom:370.797px;left:-20px;z-index:-1;width:80px;height:80px;color:rgb(255, 255, 255);background-color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"></div><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:1;width:574.406px;height:430.797px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:574.406px;height:430.797px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:574.406px;height:430.797px;max-width:100%;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);object-fit:cover;box-sizing:border-box;outline-color:rgb(255, 255, 255)"></div></div></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Flex, text right, full width</b><span><code>fullWidth</code> with no image</span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:380.234px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1200px;height:380.234px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:329.047px;max-width:100%;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1148.81px;height:329.047px;max-width:1440px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:329.047px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-wrap:wrap;align-items:center;gap:60px;width:1148.81px;height:329.047px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:calc(50% - 60px);justify-content:center;gap:20px;width:1148.81px;height:329.047px;min-width:min-content;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><header style="width:1148.81px;height:137.875px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:31.875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(181, 94, 28);border-right-color:rgb(181, 94, 28);border-bottom-color:rgb(181, 94, 28);border-left-color:rgb(181, 94, 28);box-sizing:border-box;outline-color:rgb(181, 94, 28)">News</p><p style="display:inline-block;width:43.625px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);box-sizing:border-box;outline-color:rgb(51, 51, 51)">Article</p><h2 style="width:1148.81px;height:33.5938px;margin-top:21.4857px;margin-bottom:12.8px;font-family:Inter, sans-serif;font-size:28.8px;line-height:33.6px;word-break:keep-all;box-sizing:border-box">This is a Highlighted Title</h2></header><p style="width:1148.81px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;box-sizing:border-box">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:1148.81px;height:19.2031px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Read more</span><p style="width:66.7031px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;border-top-color:rgb(181, 94, 28);border-right-color:rgb(181, 94, 28);border-bottom-color:rgb(181, 94, 28);border-left-color:rgb(181, 94, 28);box-sizing:border-box;outline-color:rgb(181, 94, 28)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:1148.81px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;box-sizing:border-box"><li style="width:66.9062px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(237, 239, 240);border-right-color:rgb(237, 239, 240);border-bottom-color:rgb(237, 239, 240);border-left-color:rgb(237, 239, 240);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Policy</li><li style="width:95.2812px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(237, 239, 240);border-right-color:rgb(237, 239, 240);border-bottom-color:rgb(237, 239, 240);border-left-color:rgb(237, 239, 240);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:380.234px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1200px;height:380.234px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:329.047px;max-width:100%;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1148.81px;height:329.047px;max-width:1440px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:329.047px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-wrap:wrap;align-items:center;gap:60px;width:1148.81px;height:329.047px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:calc(50% - 60px);justify-content:center;gap:20px;width:1148.81px;height:329.047px;min-width:min-content;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><header style="width:1148.81px;height:137.875px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:31.875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">News</p><p style="display:inline-block;width:43.625px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(248, 248, 248);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(248, 248, 248);border-right-color:rgb(248, 248, 248);border-bottom-color:rgb(248, 248, 248);border-left-color:rgb(248, 248, 248);box-sizing:border-box;outline-color:rgb(248, 248, 248)">Article</p><h2 style="width:1148.81px;height:33.5938px;margin-top:21.4857px;margin-bottom:12.8px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:28.8px;line-height:33.6px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">This is a Highlighted Title</h2></header><p style="width:1148.81px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:1148.81px;height:19.2031px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Read more</span><p style="width:66.7031px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:1148.81px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><li style="width:66.9062px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Policy</li><li style="width:95.2812px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Card, text left</b><span>variation <code>card</code>, <code>imageFit: contain</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:561.375px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1200px;height:561.375px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:510.188px;max-width:100%;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1148.81px;height:510.188px;max-width:1440px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:510.188px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;position:relative;top:0px;right:0px;bottom:0px;left:0px;flex-wrap:wrap;align-items:stretch;width:1148.81px;height:510.188px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:40%;width:459.516px;height:510.188px;min-width:250px;min-height:auto;background-color:rgb(237, 239, 240);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><div style="display:flex;flex-grow:1;width:459.516px;height:510.188px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><div style="width:459.516px;height:510.188px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:459.516px;height:510.188px;min-height:300px;max-width:100%;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;object-fit:contain;box-sizing:border-box"></div></div></div><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:60%;justify-content:center;gap:20px;width:689.297px;height:510.188px;min-width:min-content;min-height:auto;padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px;background-color:rgb(237, 239, 240);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><header style="width:569.297px;height:199.016px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:32.1875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">News</p><p style="display:inline-block;width:43.1562px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);box-sizing:border-box;outline-color:rgb(51, 51, 51)">Article</p><h1 style="width:569.297px;height:97.5938px;min-height:12.8px;margin-top:18.6286px;margin-bottom:12.8px;font-family:Inter, sans-serif;font-size:48.8px;line-height:48.8px;word-break:keep-all;box-sizing:border-box">This is a Highlighted Title</h1></header><p style="width:569.297px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;box-sizing:border-box">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:569.297px;height:19.2031px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:569.297px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;box-sizing:border-box"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:561.375px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1200px;height:561.375px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:510.188px;max-width:100%;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1148.81px;height:510.188px;max-width:1440px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:510.188px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;position:relative;top:0px;right:0px;bottom:0px;left:0px;flex-wrap:wrap;align-items:stretch;width:1148.81px;height:510.188px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:40%;width:459.516px;height:510.188px;min-width:250px;min-height:auto;color:rgb(255, 255, 255);background-color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-grow:1;width:459.516px;height:510.188px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:459.516px;height:510.188px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:459.516px;height:510.188px;min-height:300px;max-width:100%;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);object-fit:contain;box-sizing:border-box;outline-color:rgb(255, 255, 255)"></div></div></div><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:60%;justify-content:center;gap:20px;width:689.297px;height:510.188px;min-width:min-content;min-height:auto;padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px;color:rgb(255, 255, 255);background-color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><header style="width:569.297px;height:199.016px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:32.1875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">News</p><p style="display:inline-block;width:43.1562px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(248, 248, 248);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(248, 248, 248);border-right-color:rgb(248, 248, 248);border-bottom-color:rgb(248, 248, 248);border-left-color:rgb(248, 248, 248);box-sizing:border-box;outline-color:rgb(248, 248, 248)">Article</p><h1 style="width:569.297px;height:97.5938px;min-height:12.8px;margin-top:18.6286px;margin-bottom:12.8px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:48.8px;line-height:48.8px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">This is a Highlighted Title</h1></header><p style="width:569.297px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:569.297px;height:19.2031px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:569.297px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Card, text right</b><span>variation <code>card</code>, <code>imageFit: cover</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:629.375px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1200px;height:629.375px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:578.188px;max-width:100%;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1148.81px;height:578.188px;max-width:1440px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:578.188px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;position:relative;top:0px;right:0px;bottom:0px;left:0px;flex-direction:row-reverse;flex-wrap:wrap;align-items:stretch;width:1148.81px;height:578.188px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:60%;width:689.281px;height:578.188px;min-width:250px;min-height:auto;background-color:rgb(237, 239, 240);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><div style="display:flex;flex-grow:1;width:689.281px;height:578.188px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><div style="width:689.281px;height:578.188px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:689.281px;height:578.188px;min-height:300px;max-width:100%;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;object-fit:cover;box-sizing:border-box"></div></div></div><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:40%;justify-content:center;gap:20px;width:459.531px;height:578.188px;min-width:min-content;min-height:auto;padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px;background-color:rgb(237, 239, 240);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><header style="width:339.531px;height:247.812px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:32.1875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">News</p><p style="display:inline-block;width:43.1562px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);box-sizing:border-box;outline-color:rgb(51, 51, 51)">Article</p><h1 style="width:339.531px;height:146.391px;min-height:12.8px;margin-top:18.6286px;margin-bottom:12.8px;font-family:Inter, sans-serif;font-size:48.8px;line-height:48.8px;word-break:keep-all;box-sizing:border-box">This is a Highlighted Title</h1></header><p style="width:339.531px;height:38.4062px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;box-sizing:border-box">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:339.531px;height:19.2031px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:339.531px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;box-sizing:border-box"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:629.375px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1200px;height:629.375px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:578.188px;max-width:100%;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1148.81px;height:578.188px;max-width:1440px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:578.188px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;position:relative;top:0px;right:0px;bottom:0px;left:0px;flex-direction:row-reverse;flex-wrap:wrap;align-items:stretch;width:1148.81px;height:578.188px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:60%;width:689.281px;height:578.188px;min-width:250px;min-height:auto;color:rgb(255, 255, 255);background-color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-grow:1;width:689.281px;height:578.188px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:689.281px;height:578.188px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:689.281px;height:578.188px;min-height:300px;max-width:100%;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);object-fit:cover;box-sizing:border-box;outline-color:rgb(255, 255, 255)"></div></div></div><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:40%;justify-content:center;gap:20px;width:459.531px;height:578.188px;min-width:min-content;min-height:auto;padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px;color:rgb(255, 255, 255);background-color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><header style="width:339.531px;height:247.812px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:32.1875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">News</p><p style="display:inline-block;width:43.1562px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(248, 248, 248);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(248, 248, 248);border-right-color:rgb(248, 248, 248);border-bottom-color:rgb(248, 248, 248);border-left-color:rgb(248, 248, 248);box-sizing:border-box;outline-color:rgb(248, 248, 248)">Article</p><h1 style="width:339.531px;height:146.391px;min-height:12.8px;margin-top:18.6286px;margin-bottom:12.8px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:48.8px;line-height:48.8px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">This is a Highlighted Title</h1></header><p style="width:339.531px;height:38.4062px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:339.531px;height:19.2031px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:339.531px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <h2>Block theme &ldquo;Brand&rdquo; (<code>brand</code>)</h2>
+  <div class="story">
+    <div class="head"><b>Flex, text left</b><span>variation <code>flex</code>, <code>imageSize: 50%</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:481.984px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1200px;height:481.984px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:430.797px;max-width:100%;background-color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1148.81px;height:430.797px;max-width:1440px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:430.797px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-direction:row-reverse;flex-wrap:wrap;align-items:center;gap:60px;width:1148.81px;height:430.797px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:calc(50% - 60px);justify-content:center;align-items:end;gap:20px;width:514.406px;height:327.047px;min-width:min-content;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;box-sizing:border-box"><header style="display:flex;flex-direction:column;align-items:end;width:356.281px;height:135.875px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;box-sizing:border-box"><p style="width:32.1875px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-align:right;text-transform:uppercase;word-break:break-word;box-sizing:border-box">News</p><p style="width:43.1562px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:20px;color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);box-sizing:border-box;outline-color:rgb(51, 51, 51)">Article</p><h2 style="width:356.281px;height:33.5938px;min-width:auto;min-height:auto;margin-top:21.4857px;margin-bottom:12.8px;font-family:Inter, sans-serif;font-size:28.8px;line-height:33.6px;text-align:right;word-break:keep-all;box-sizing:border-box">This is a Highlighted Title</h2></header><p style="width:448.953px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;word-break:keep-all;box-sizing:border-box">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:72.375px;height:19.2031px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;box-sizing:border-box">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;text-align:right;word-break:break-word;box-sizing:border-box">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:172.688px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;word-break:break-word;box-sizing:border-box"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Community</li></ul></div><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:0;flex-grow:1;flex-basis:50%;width:574.406px;height:430.797px;min-width:250px;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:absolute;top:-20px;right:514.406px;bottom:370.797px;left:-20px;z-index:-1;width:80px;height:80px;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"></div><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:1;width:574.406px;height:430.797px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><div style="width:574.406px;height:430.797px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:574.406px;height:430.797px;max-width:100%;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;object-fit:cover;box-sizing:border-box"></div></div></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:481.984px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1200px;height:481.984px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:430.797px;max-width:100%;color:rgb(255, 255, 255);background-color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1148.81px;height:430.797px;max-width:1440px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:430.797px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-direction:row-reverse;flex-wrap:wrap;align-items:center;gap:60px;width:1148.81px;height:430.797px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:calc(50% - 60px);justify-content:center;align-items:end;gap:20px;width:514.406px;height:327.047px;min-width:min-content;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><header style="display:flex;flex-direction:column;align-items:end;width:356.281px;height:135.875px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:32.1875px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">News</p><p style="width:43.1562px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:20px;color:rgb(248, 248, 248);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-color:rgb(248, 248, 248);border-right-color:rgb(248, 248, 248);border-bottom-color:rgb(248, 248, 248);border-left-color:rgb(248, 248, 248);box-sizing:border-box;outline-color:rgb(248, 248, 248)">Article</p><h2 style="width:356.281px;height:33.5938px;min-width:auto;min-height:auto;margin-top:21.4857px;margin-bottom:12.8px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:28.8px;line-height:33.6px;text-align:right;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">This is a Highlighted Title</h2></header><p style="width:448.953px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:72.375px;height:19.2031px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;text-align:right;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:172.688px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:right;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-align:right;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Community</li></ul></div><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:0;flex-grow:1;flex-basis:50%;width:574.406px;height:430.797px;min-width:250px;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:absolute;top:-20px;right:514.406px;bottom:370.797px;left:-20px;z-index:-1;width:80px;height:80px;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"></div><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:1;width:574.406px;height:430.797px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:574.406px;height:430.797px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:574.406px;height:430.797px;max-width:100%;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);object-fit:cover;box-sizing:border-box;outline-color:rgb(255, 255, 255)"></div></div></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Flex, text right, full width</b><span><code>fullWidth</code> with no image</span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:380.234px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1200px;height:380.234px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:329.047px;max-width:100%;background-color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1148.81px;height:329.047px;max-width:1440px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:329.047px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-wrap:wrap;align-items:center;gap:60px;width:1148.81px;height:329.047px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:calc(50% - 60px);justify-content:center;gap:20px;width:1148.81px;height:329.047px;min-width:min-content;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><header style="width:1148.81px;height:137.875px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:31.875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;box-sizing:border-box">News</p><p style="display:inline-block;width:43.625px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);box-sizing:border-box;outline-color:rgb(51, 51, 51)">Article</p><h2 style="width:1148.81px;height:33.5938px;margin-top:21.4857px;margin-bottom:12.8px;font-family:Inter, sans-serif;font-size:28.8px;line-height:33.6px;word-break:keep-all;box-sizing:border-box">This is a Highlighted Title</h2></header><p style="width:1148.81px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;box-sizing:border-box">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:1148.81px;height:19.2031px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Read more</span><p style="width:66.7031px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;box-sizing:border-box">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:1148.81px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;box-sizing:border-box"><li style="width:66.9062px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Policy</li><li style="width:95.2812px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:380.234px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1200px;height:380.234px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:329.047px;max-width:100%;color:rgb(255, 255, 255);background-color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1148.81px;height:329.047px;max-width:1440px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:329.047px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-wrap:wrap;align-items:center;gap:60px;width:1148.81px;height:329.047px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:calc(50% - 60px);justify-content:center;gap:20px;width:1148.81px;height:329.047px;min-width:min-content;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><header style="width:1148.81px;height:137.875px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:31.875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">News</p><p style="display:inline-block;width:43.625px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(248, 248, 248);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(248, 248, 248);border-right-color:rgb(248, 248, 248);border-bottom-color:rgb(248, 248, 248);border-left-color:rgb(248, 248, 248);box-sizing:border-box;outline-color:rgb(248, 248, 248)">Article</p><h2 style="width:1148.81px;height:33.5938px;margin-top:21.4857px;margin-bottom:12.8px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:28.8px;line-height:33.6px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">This is a Highlighted Title</h2></header><p style="width:1148.81px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:1148.81px;height:19.2031px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Read more</span><p style="width:66.7031px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:1148.81px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><li style="width:66.9062px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Policy</li><li style="width:95.2812px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Card, text left</b><span>variation <code>card</code>, <code>imageFit: contain</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:561.375px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1200px;height:561.375px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:510.188px;max-width:100%;background-color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1148.81px;height:510.188px;max-width:1440px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:510.188px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;position:relative;top:0px;right:0px;bottom:0px;left:0px;flex-wrap:wrap;align-items:stretch;width:1148.81px;height:510.188px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:40%;width:459.516px;height:510.188px;min-width:250px;min-height:auto;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><div style="display:flex;flex-grow:1;width:459.516px;height:510.188px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><div style="width:459.516px;height:510.188px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:459.516px;height:510.188px;min-height:300px;max-width:100%;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;object-fit:contain;box-sizing:border-box"></div></div></div><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:60%;justify-content:center;gap:20px;width:689.297px;height:510.188px;min-width:min-content;min-height:auto;padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><header style="width:569.297px;height:199.016px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:32.1875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(181, 94, 28);border-right-color:rgb(181, 94, 28);border-bottom-color:rgb(181, 94, 28);border-left-color:rgb(181, 94, 28);box-sizing:border-box;outline-color:rgb(181, 94, 28)">News</p><p style="display:inline-block;width:43.1562px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);box-sizing:border-box;outline-color:rgb(51, 51, 51)">Article</p><h1 style="width:569.297px;height:97.5938px;min-height:12.8px;margin-top:18.6286px;margin-bottom:12.8px;font-family:Inter, sans-serif;font-size:48.8px;line-height:48.8px;word-break:keep-all;box-sizing:border-box">This is a Highlighted Title</h1></header><p style="width:569.297px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;box-sizing:border-box">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:569.297px;height:19.2031px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;border-top-color:rgb(181, 94, 28);border-right-color:rgb(181, 94, 28);border-bottom-color:rgb(181, 94, 28);border-left-color:rgb(181, 94, 28);box-sizing:border-box;outline-color:rgb(181, 94, 28)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:569.297px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;box-sizing:border-box"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:561.375px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1200px;height:561.375px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:510.188px;max-width:100%;color:rgb(255, 255, 255);background-color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1148.81px;height:510.188px;max-width:1440px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:510.188px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;position:relative;top:0px;right:0px;bottom:0px;left:0px;flex-wrap:wrap;align-items:stretch;width:1148.81px;height:510.188px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:40%;width:459.516px;height:510.188px;min-width:250px;min-height:auto;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-grow:1;width:459.516px;height:510.188px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:459.516px;height:510.188px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:459.516px;height:510.188px;min-height:300px;max-width:100%;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);object-fit:contain;box-sizing:border-box;outline-color:rgb(255, 255, 255)"></div></div></div><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:60%;justify-content:center;gap:20px;width:689.297px;height:510.188px;min-width:min-content;min-height:auto;padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><header style="width:569.297px;height:199.016px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:32.1875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">News</p><p style="display:inline-block;width:43.1562px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(248, 248, 248);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(248, 248, 248);border-right-color:rgb(248, 248, 248);border-bottom-color:rgb(248, 248, 248);border-left-color:rgb(248, 248, 248);box-sizing:border-box;outline-color:rgb(248, 248, 248)">Article</p><h1 style="width:569.297px;height:97.5938px;min-height:12.8px;margin-top:18.6286px;margin-bottom:12.8px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:48.8px;line-height:48.8px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">This is a Highlighted Title</h1></header><p style="width:569.297px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:569.297px;height:19.2031px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:569.297px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Card, text right</b><span>variation <code>card</code>, <code>imageFit: cover</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:629.375px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1200px;height:629.375px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:578.188px;max-width:100%;background-color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1148.81px;height:578.188px;max-width:1440px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:578.188px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;position:relative;top:0px;right:0px;bottom:0px;left:0px;flex-direction:row-reverse;flex-wrap:wrap;align-items:stretch;width:1148.81px;height:578.188px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:60%;width:689.281px;height:578.188px;min-width:250px;min-height:auto;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><div style="display:flex;flex-grow:1;width:689.281px;height:578.188px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><div style="width:689.281px;height:578.188px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;box-sizing:border-box"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:689.281px;height:578.188px;min-height:300px;max-width:100%;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;object-fit:cover;box-sizing:border-box"></div></div></div><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:40%;justify-content:center;gap:20px;width:459.531px;height:578.188px;min-width:min-content;min-height:auto;padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><header style="width:339.531px;height:247.812px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:32.1875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(181, 94, 28);border-right-color:rgb(181, 94, 28);border-bottom-color:rgb(181, 94, 28);border-left-color:rgb(181, 94, 28);box-sizing:border-box;outline-color:rgb(181, 94, 28)">News</p><p style="display:inline-block;width:43.1562px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(51, 51, 51);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(51, 51, 51);border-right-color:rgb(51, 51, 51);border-bottom-color:rgb(51, 51, 51);border-left-color:rgb(51, 51, 51);box-sizing:border-box;outline-color:rgb(51, 51, 51)">Article</p><h1 style="width:339.531px;height:146.391px;min-height:12.8px;margin-top:18.6286px;margin-bottom:12.8px;font-family:Inter, sans-serif;font-size:48.8px;line-height:48.8px;word-break:keep-all;box-sizing:border-box">This is a Highlighted Title</h1></header><p style="width:339.531px;height:38.4062px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;box-sizing:border-box">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:339.531px;height:19.2031px;min-width:auto;min-height:auto;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;border-top-color:rgb(181, 94, 28);border-right-color:rgb(181, 94, 28);border-bottom-color:rgb(181, 94, 28);border-left-color:rgb(181, 94, 28);box-sizing:border-box;outline-color:rgb(181, 94, 28)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:339.531px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;box-sizing:border-box"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:629.375px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1200px;height:629.375px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:1148.81px;height:578.188px;max-width:100%;color:rgb(255, 255, 255);background-color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1148.81px;height:578.188px;max-width:1440px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><article aria-label="This is a Highlighted Title" style="width:1148.81px;height:578.188px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;position:relative;top:0px;right:0px;bottom:0px;left:0px;flex-direction:row-reverse;flex-wrap:wrap;align-items:stretch;width:1148.81px;height:578.188px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:60%;width:689.281px;height:578.188px;min-width:250px;min-height:auto;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="display:flex;flex-grow:1;width:689.281px;height:578.188px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:689.281px;height:578.188px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="" style="display:block;width:689.281px;height:578.188px;min-height:300px;max-width:100%;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:0px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);object-fit:cover;box-sizing:border-box;outline-color:rgb(255, 255, 255)"></div></div></div><div style="display:flex;flex-direction:column;flex-grow:1;flex-basis:40%;justify-content:center;gap:20px;width:459.531px;height:578.188px;min-width:min-content;min-height:auto;padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><header style="width:339.531px;height:247.812px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:32.1875px;height:19.2031px;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.768px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">News</p><p style="display:inline-block;width:43.1562px;height:19.2031px;margin-top:0px;margin-bottom:20px;color:rgb(248, 248, 248);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;letter-spacing:0.288px;text-transform:uppercase;word-break:break-word;border-top-color:rgb(248, 248, 248);border-right-color:rgb(248, 248, 248);border-bottom-color:rgb(248, 248, 248);border-left-color:rgb(248, 248, 248);box-sizing:border-box;outline-color:rgb(248, 248, 248)">Article</p><h1 style="width:339.531px;height:146.391px;min-height:12.8px;margin-top:18.6286px;margin-bottom:12.8px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:48.8px;line-height:48.8px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">This is a Highlighted Title</h1></header><p style="width:339.531px;height:38.4062px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:keep-all;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">A short description of the main topic, written to engage the reader.</p><span style="display:block;width:339.531px;height:19.2031px;min-width:auto;min-height:auto;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Read more</span><p style="width:68.5px;height:19.2031px;min-width:auto;min-height:auto;margin-top:0px;margin-bottom:9.6px;color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:9.6px;font-weight:700;line-height:19.2px;word-break:break-word;border-top-color:rgb(244, 130, 44);border-right-color:rgb(244, 130, 44);border-bottom-color:rgb(244, 130, 44);border-left-color:rgb(244, 130, 44);box-sizing:border-box;outline-color:rgb(244, 130, 44)">Official source</p><ul aria-label="Tags" style="display:flex;flex-wrap:wrap;gap:6.4px;width:339.531px;height:29.5781px;min-width:auto;min-height:auto;margin-top:14.4px;margin-bottom:0px;padding-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><li style="width:67.2656px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Policy</li><li style="width:99.0312px;height:29.5781px;min-width:auto;min-height:auto;padding-top:3.2px;padding-right:9.6px;padding-bottom:3.2px;padding-left:9.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:700;line-height:19.2px;letter-spacing:0.336px;text-transform:uppercase;word-break:break-word;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;list-style-type:none;box-sizing:border-box;outline-color:rgb(255, 255, 255)">Community</li></ul></div></div></article></div></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <footer>Captured from the built Storybook, not hand-written: each block is the real component output with its computed styles inlined, rendered through the <code>withTheme</code> decorator so the colour mode and the <code>--theme-*</code> mapping resolve exactly as they do on a page. Remote photography is replaced by a neutral placeholder. See <code>DESIGN_SYSTEM.md</code> &sect;4.3 for why the decorator has to set the colour scheme in two places.</footer>
+</div>
\ No newline at end of file
diff --git a/docs/design-system/previews/block-main-image.html b/docs/design-system/previews/block-main-image.html
new file mode 100644
index 0000000..77093a2
--- /dev/null
+++ b/docs/design-system/previews/block-main-image.html
@@ -0,0 +1,139 @@
+<!-- @dsCard group="Components" -->
+<!--
+  Main Image block — @simplesconsultoria/volto-light-theme
+  Real rendered markup captured from Storybook with computed styles inlined.
+  Remote images are replaced by a neutral placeholder.
+-->
+<meta charset="utf-8" />
+<title>Main Image block</title>
+<style>
+  :root { --ink:#16181d; --ink-soft:#5b6270; --rule:#e4e7ec; --ground:#fff; }
+  * { box-sizing: border-box; }
+  body {
+    margin:0; padding:40px 32px 56px; background:var(--ground); color:var(--ink);
+    font:400 14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
+    -webkit-font-smoothing:antialiased;
+  }
+  .wrap { max-width:1180px; margin:0 auto; }
+  h1 { margin:0 0 6px; font-size:26px; font-weight:600; letter-spacing:-.02em; }
+  .lede { margin:0; max-width:68ch; color:var(--ink-soft); }
+  h2 {
+    margin:44px 0 4px; font-size:12px; font-weight:600; letter-spacing:.08em;
+    text-transform:uppercase; color:var(--ink-soft);
+  }
+  code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }
+  .story { margin-top:18px; border:1px solid var(--rule); border-radius:12px; overflow:hidden; }
+  .story > .head {
+    display:flex; align-items:baseline; gap:10px; padding:11px 16px;
+    border-bottom:1px solid var(--rule); background:#fafbfc;
+  }
+  .story > .head b { font-size:13px; }
+  .story > .head span { color:var(--ink-soft); font-size:12px; }
+  .modes { display:grid; grid-template-columns:1fr 1fr; }
+  .modes > figure { margin:0; min-width:0; }
+  .modes > figure + figure { border-left:1px solid var(--rule); }
+  figcaption {
+    padding:7px 14px; border-bottom:1px solid var(--rule); background:#fcfcfd;
+    font:600 10px/1.4 system-ui,sans-serif; letter-spacing:.1em;
+    text-transform:uppercase; color:var(--ink-soft);
+  }
+  .stage { padding:20px; overflow-x:auto; }
+  /* the captured markup is a 1200px-wide page; `zoom` scales it into the
+     column and, unlike `transform`, reflows so the stage height follows */
+  .stage > .fit { width:1200px; }
+  footer {
+    margin-top:44px; padding-top:16px; border-top:1px solid var(--rule);
+    color:var(--ink-soft); font-size:12.5px; line-height:1.6;
+  }
+</style>
+<div class="wrap">
+  <h1>Main Image block</h1>
+  <p class="lede">Renders the page's <code>preview_image_link</code> at one of four alignments and three sizes. Its stylesheet references no colour token at all — only the three container widths — so it is unaffected by the block theme.</p>
+  <h2>Variations</h2>
+  <div class="story">
+    <div class="head"><b>Default</b><span><code>align: center</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:960px;height:564px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:960px;height:564px;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;clear:both;width:912px;height:456px;margin-top:60px;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;box-sizing:border-box"><figure style="display:flex;flex-direction:column;width:912px;height:456px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;box-sizing:border-box"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="Council chamber during a public session" style="display:block;width:912px;height:456px;min-width:auto;min-height:auto;max-width:100%;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;box-sizing:border-box"></figure></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:960px;height:564px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:960px;height:564px;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;clear:both;width:912px;height:456px;margin-top:60px;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><figure style="display:flex;flex-direction:column;width:912px;height:456px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="Council chamber during a public session" style="display:block;width:912px;height:456px;min-width:auto;min-height:auto;max-width:100%;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"></figure></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Full, with caption</b><span><code>align: full</code>, title and description</span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1080px;height:687.812px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:1080px;height:687.812px;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;clear:both;width:1032px;height:579.812px;margin-top:60px;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><figure style="display:flex;flex-direction:column;width:1032px;height:579.812px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="Council chamber during a public session" style="display:block;width:1032px;height:516px;min-width:auto;min-height:auto;max-width:100%;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><figcaption style="width:1032px;height:38.8125px;min-width:auto;min-height:auto;margin-top:25px;color:rgb(102, 102, 102);font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;border-top-color:rgb(102, 102, 102);border-right-color:rgb(102, 102, 102);border-bottom-color:rgb(102, 102, 102);border-left-color:rgb(102, 102, 102);box-sizing:border-box;outline-color:rgb(102, 102, 102)"><strong style="display:block;width:1032px;height:14.4062px;margin-bottom:10px;font-family:Inter, sans-serif;font-size:11.2px;line-height:14.4px;text-align:left;box-sizing:border-box">Public session attended by dozens of citizens</strong><div style="width:1032px;height:14.4062px;font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;box-sizing:border-box"><p style="width:1032px;height:14.4062px;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:300;line-height:14.4px;text-align:left;word-break:break-word;box-sizing:border-box">The council welcomed residents for the debate on the 2026 budget.</p></div></figcaption></figure></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1080px;height:687.812px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:1080px;height:687.812px;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;clear:both;width:1032px;height:579.812px;margin-top:60px;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><figure style="display:flex;flex-direction:column;width:1032px;height:579.812px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="Council chamber during a public session" style="display:block;width:1032px;height:516px;min-width:auto;min-height:auto;max-width:100%;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><figcaption style="width:1032px;height:38.8125px;min-width:auto;min-height:auto;margin-top:25px;color:rgb(102, 102, 102);font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;border-top-color:rgb(102, 102, 102);border-right-color:rgb(102, 102, 102);border-bottom-color:rgb(102, 102, 102);border-left-color:rgb(102, 102, 102);box-sizing:border-box;outline-color:rgb(102, 102, 102)"><strong style="display:block;width:1032px;height:14.4062px;margin-bottom:10px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;line-height:14.4px;text-align:left;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Public session attended by dozens of citizens</strong><div style="width:1032px;height:14.4062px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:1032px;height:14.4062px;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:300;line-height:14.4px;text-align:left;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">The council welcomed residents for the debate on the 2026 budget.</p></div></figcaption></figure></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Left, small</b><span><code>align: left</code>, <code>size: s</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:960px;height:642.203px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:960px;height:642.203px;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:2;clear:both;width:912px;height:534.203px;margin-top:60px;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><figure style="display:flex;flex-direction:column;width:912px;height:534.203px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="Council chamber during a public session" style="display:block;float:left;width:912px;height:456px;min-width:auto;min-height:auto;max-width:100%;margin-right:14.4px;margin-bottom:14.4px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><figcaption style="width:912px;height:38.8125px;min-width:auto;min-height:auto;margin-top:25px;color:rgb(102, 102, 102);font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;border-top-color:rgb(102, 102, 102);border-right-color:rgb(102, 102, 102);border-bottom-color:rgb(102, 102, 102);border-left-color:rgb(102, 102, 102);box-sizing:border-box;outline-color:rgb(102, 102, 102)"><strong style="display:block;width:912px;height:14.4062px;margin-bottom:10px;font-family:Inter, sans-serif;font-size:11.2px;line-height:14.4px;text-align:left;box-sizing:border-box">Featured story</strong><div style="width:912px;height:14.4062px;font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;box-sizing:border-box"><p style="width:912px;height:14.4062px;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:300;line-height:14.4px;text-align:left;word-break:break-word;box-sizing:border-box">A short summary shown beside the image.</p></div></figcaption></figure></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:960px;height:642.203px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:960px;height:642.203px;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:2;clear:both;width:912px;height:534.203px;margin-top:60px;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><figure style="display:flex;flex-direction:column;width:912px;height:534.203px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="Council chamber during a public session" style="display:block;float:left;width:912px;height:456px;min-width:auto;min-height:auto;max-width:100%;margin-right:14.4px;margin-bottom:14.4px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><figcaption style="width:912px;height:38.8125px;min-width:auto;min-height:auto;margin-top:25px;color:rgb(102, 102, 102);font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;border-top-color:rgb(102, 102, 102);border-right-color:rgb(102, 102, 102);border-bottom-color:rgb(102, 102, 102);border-left-color:rgb(102, 102, 102);box-sizing:border-box;outline-color:rgb(102, 102, 102)"><strong style="display:block;width:912px;height:14.4062px;margin-bottom:10px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;line-height:14.4px;text-align:left;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Featured story</strong><div style="width:912px;height:14.4062px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:912px;height:14.4062px;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:300;line-height:14.4px;text-align:left;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">A short summary shown beside the image.</p></div></figcaption></figure></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Right, medium</b><span><code>align: right</code>, <code>size: m</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:960px;height:578.391px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:960px;height:578.391px;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:2;clear:both;width:912px;height:470.391px;margin-top:60px;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><figure style="display:flex;flex-direction:column;width:912px;height:470.391px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="Council chamber during a public session" style="display:block;float:right;width:912px;height:456px;min-width:auto;min-height:auto;max-width:100%;margin-bottom:14.4px;margin-left:14.4px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"></figure></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:960px;height:578.391px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:960px;height:578.391px;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;z-index:2;clear:both;width:912px;height:470.391px;margin-top:60px;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><figure style="display:flex;flex-direction:column;width:912px;height:470.391px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="Council chamber during a public session" style="display:block;float:right;width:912px;height:456px;min-width:auto;min-height:auto;max-width:100%;margin-bottom:14.4px;margin-left:14.4px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"></figure></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Centre, overlaid caption</b><span><code>align: center</code>, <code>size: l</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:800px;height:547.812px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:800px;height:547.812px;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;clear:both;width:752px;height:439.812px;margin-top:60px;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;box-sizing:border-box"><figure style="display:flex;flex-direction:column;width:752px;height:439.812px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;box-sizing:border-box"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="Council chamber during a public session" style="display:block;width:752px;height:376px;min-width:auto;min-height:auto;max-width:100%;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;box-sizing:border-box"><figcaption style="width:752px;height:38.8125px;min-width:auto;min-height:auto;margin-top:25px;color:rgb(102, 102, 102);font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;border-top-color:rgb(102, 102, 102);border-right-color:rgb(102, 102, 102);border-bottom-color:rgb(102, 102, 102);border-left-color:rgb(102, 102, 102);box-sizing:border-box;outline-color:rgb(102, 102, 102)"><strong style="display:block;width:752px;height:14.4062px;margin-bottom:10px;font-family:Inter, sans-serif;font-size:11.2px;line-height:14.4px;text-align:left;box-sizing:border-box">Centred image with an overlaid caption</strong><div style="width:752px;height:14.4062px;font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;box-sizing:border-box"><p style="width:752px;height:14.4062px;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:11.2px;font-weight:300;line-height:14.4px;text-align:left;word-break:break-word;box-sizing:border-box">The description sits over the lower edge of the image.</p></div></figcaption></figure></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:800px;height:547.812px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:800px;height:547.812px;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;clear:both;width:752px;height:439.812px;margin-top:60px;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><figure style="display:flex;flex-direction:column;width:752px;height:439.812px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22600%22%3E%3Crect%20width%3D%221200%22%20height%3D%22600%22%20fill%3D%22%23d8dcdf%22%2F%3E%3Cpath%20d%3D%22M0%20600L420%20300l260%20180L900%20330l300%20270z%22%20fill%3D%22%23b9c0c5%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23c8ced2%22%2F%3E%3C%2Fsvg%3E" alt="Council chamber during a public session" style="display:block;width:752px;height:376px;min-width:auto;min-height:auto;max-width:100%;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;text-align:center;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><figcaption style="width:752px;height:38.8125px;min-width:auto;min-height:auto;margin-top:25px;color:rgb(102, 102, 102);font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;border-top-color:rgb(102, 102, 102);border-right-color:rgb(102, 102, 102);border-bottom-color:rgb(102, 102, 102);border-left-color:rgb(102, 102, 102);box-sizing:border-box;outline-color:rgb(102, 102, 102)"><strong style="display:block;width:752px;height:14.4062px;margin-bottom:10px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;line-height:14.4px;text-align:left;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Centred image with an overlaid caption</strong><div style="width:752px;height:14.4062px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14px;font-weight:300;line-height:18px;text-align:left;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:752px;height:14.4062px;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:300;line-height:14.4px;text-align:left;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">The description sits over the lower edge of the image.</p></div></figcaption></figure></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <footer>Captured from the built Storybook, not hand-written: each block is the real component output with its computed styles inlined, rendered through the <code>withTheme</code> decorator so the colour mode and the <code>--theme-*</code> mapping resolve exactly as they do on a page. Remote photography is replaced by a neutral placeholder. See <code>DESIGN_SYSTEM.md</code> &sect;4.3 for why the decorator has to set the colour scheme in two places.</footer>
+</div>
\ No newline at end of file
diff --git a/docs/design-system/previews/block-quote.html b/docs/design-system/previews/block-quote.html
new file mode 100644
index 0000000..24028ed
--- /dev/null
+++ b/docs/design-system/previews/block-quote.html
@@ -0,0 +1,157 @@
+<!-- @dsCard group="Components" -->
+<!--
+  Quote block — @simplesconsultoria/volto-light-theme
+  Real rendered markup captured from Storybook with computed styles inlined.
+  Remote images are replaced by a neutral placeholder.
+-->
+<meta charset="utf-8" />
+<title>Quote block</title>
+<style>
+  :root { --ink:#16181d; --ink-soft:#5b6270; --rule:#e4e7ec; --ground:#fff; }
+  * { box-sizing: border-box; }
+  body {
+    margin:0; padding:40px 32px 56px; background:var(--ground); color:var(--ink);
+    font:400 14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
+    -webkit-font-smoothing:antialiased;
+  }
+  .wrap { max-width:1180px; margin:0 auto; }
+  h1 { margin:0 0 6px; font-size:26px; font-weight:600; letter-spacing:-.02em; }
+  .lede { margin:0; max-width:68ch; color:var(--ink-soft); }
+  h2 {
+    margin:44px 0 4px; font-size:12px; font-weight:600; letter-spacing:.08em;
+    text-transform:uppercase; color:var(--ink-soft);
+  }
+  code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }
+  .story { margin-top:18px; border:1px solid var(--rule); border-radius:12px; overflow:hidden; }
+  .story > .head {
+    display:flex; align-items:baseline; gap:10px; padding:11px 16px;
+    border-bottom:1px solid var(--rule); background:#fafbfc;
+  }
+  .story > .head b { font-size:13px; }
+  .story > .head span { color:var(--ink-soft); font-size:12px; }
+  .modes { display:grid; grid-template-columns:1fr 1fr; }
+  .modes > figure { margin:0; min-width:0; }
+  .modes > figure + figure { border-left:1px solid var(--rule); }
+  figcaption {
+    padding:7px 14px; border-bottom:1px solid var(--rule); background:#fcfcfd;
+    font:600 10px/1.4 system-ui,sans-serif; letter-spacing:.1em;
+    text-transform:uppercase; color:var(--ink-soft);
+  }
+  .stage { padding:20px; overflow-x:auto; }
+  /* the captured markup is a 1200px-wide page; `zoom` scales it into the
+     column and, unlike `transform`, reflows so the stage height follows */
+  .stage > .fit { width:1200px; }
+  footer {
+    margin-top:44px; padding-top:16px; border-top:1px solid var(--rule);
+    color:var(--ink-soft); font-size:12.5px; line-height:1.6;
+  }
+</style>
+<div class="wrap">
+  <h1>Quote block</h1>
+  <p class="lede">A Slate-bodied block with an optional attribution and two background styles. It is the only own block that reads semantic tokens (<code>--accent-color</code>) directly as well as <code>--theme-*</code>.</p>
+  <h2>Block theme &ldquo;Primary&rdquo; (<code>default</code>)</h2>
+  <div class="story">
+    <div class="head"><b>Transparent</b><span><code>backgroundStyle: transparent</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:253.016px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:800px;height:253.016px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;max-width:940px;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-left-color:rgb(237, 239, 240);box-sizing:border-box"><div style="width:680.812px;height:80.625px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;box-sizing:border-box">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div><footer style="width:680.812px;height:21.2031px;margin-top:20px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><cite style="font-family:Inter, sans-serif;font-size:11.2px;font-weight:600;font-style:normal;line-height:19.2px;box-sizing:border-box">Communications Specialist</cite></footer></blockquote></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:252.016px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:800px;height:252.016px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:200.828px;max-width:940px;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:200.828px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(51, 51, 51);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:680.812px;height:80.625px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div><footer style="width:680.812px;height:20.2031px;margin-top:20px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><cite style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:600;font-style:normal;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Communications Specialist</cite></footer></blockquote></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Filled</b><span><code>backgroundStyle: filled</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:253.016px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:800px;height:253.016px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;max-width:940px;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;background-color:color(srgb 0.950588 0.956078 0.958824);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-left-color:rgb(237, 239, 240);box-sizing:border-box"><div style="width:680.812px;height:80.625px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;box-sizing:border-box">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div><footer style="width:680.812px;height:21.2031px;margin-top:20px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><cite style="font-family:Inter, sans-serif;font-size:11.2px;font-weight:600;font-style:normal;line-height:19.2px;box-sizing:border-box">Collective</cite></footer></blockquote></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:253.016px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:800px;height:253.016px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;max-width:940px;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;color:rgb(255, 255, 255);background-color:color(srgb 0.14 0.14 0.14);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(51, 51, 51);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:680.812px;height:80.625px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div><footer style="width:680.812px;height:21.2031px;margin-top:20px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><cite style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:600;font-style:normal;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Collective</cite></footer></blockquote></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>No attribution</b><span><code>author</code> unset</span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:211.812px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:800px;height:211.812px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:160.625px;max-width:940px;background-color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:160.625px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-left-color:rgb(237, 239, 240);box-sizing:border-box"><div style="width:680.812px;height:80.625px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;box-sizing:border-box">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div></blockquote></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:211.812px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:800px;height:211.812px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:160.625px;max-width:940px;color:rgb(255, 255, 255);background-color:rgb(0, 0, 0);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:160.625px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(51, 51, 51);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:680.812px;height:80.625px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div></blockquote></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <h2>Block theme &ldquo;Brand&rdquo; (<code>brand</code>)</h2>
+  <div class="story">
+    <div class="head"><b>Transparent</b><span><code>backgroundStyle: transparent</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:253.016px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:800px;height:253.016px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;max-width:940px;background-color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-left-color:rgb(255, 255, 255);box-sizing:border-box"><div style="width:680.812px;height:80.625px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;box-sizing:border-box">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div><footer style="width:680.812px;height:21.2031px;margin-top:20px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><cite style="font-family:Inter, sans-serif;font-size:11.2px;font-weight:600;font-style:normal;line-height:19.2px;box-sizing:border-box">Communications Specialist</cite></footer></blockquote></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:253.016px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:800px;height:253.016px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;max-width:940px;color:rgb(255, 255, 255);background-color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:680.812px;height:80.625px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div><footer style="width:680.812px;height:21.2031px;margin-top:20px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><cite style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:600;font-style:normal;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Communications Specialist</cite></footer></blockquote></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>Filled</b><span><code>backgroundStyle: filled</code></span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:253.016px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:800px;height:253.016px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;max-width:940px;background-color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:201.828px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;background-color:color(srgb 0.987059 0.852941 0.751765);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-left-color:rgb(255, 255, 255);box-sizing:border-box"><div style="width:680.812px;height:80.625px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;box-sizing:border-box">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div><footer style="width:680.812px;height:21.2031px;margin-top:20px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><cite style="font-family:Inter, sans-serif;font-size:11.2px;font-weight:600;font-style:normal;line-height:19.2px;box-sizing:border-box">Collective</cite></footer></blockquote></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:252.016px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:800px;height:252.016px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:200.828px;max-width:940px;color:rgb(255, 255, 255);background-color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:200.828px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;color:rgb(255, 255, 255);background-color:color(srgb 0.212941 0.110588 0.0329412);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:680.812px;height:80.625px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div><footer style="width:680.812px;height:20.2031px;margin-top:20px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><cite style="color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:11.2px;font-weight:600;font-style:normal;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Collective</cite></footer></blockquote></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <div class="story">
+    <div class="head"><b>No attribution</b><span><code>author</code> unset</span></div>
+    <div class="modes">
+      <figure>
+        <figcaption>Light</figcaption>
+        <div class="stage" style="background:rgb(255, 255, 255);color:rgb(0, 0, 0)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:211.812px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="width:800px;height:211.812px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:160.625px;max-width:940px;background-color:rgb(244, 130, 44);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:160.625px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-left-color:rgb(255, 255, 255);box-sizing:border-box"><div style="width:680.812px;height:80.625px;font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;box-sizing:border-box"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;box-sizing:border-box">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div></blockquote></div></div></div></div>
+        </div>
+      </figure>
+      <figure>
+        <figcaption>Dark</figcaption>
+        <div class="stage" style="background:rgb(0, 0, 0);color:rgb(255, 255, 255)">
+          <div class="fit" style="zoom:0.47"><div style="width:1200px;height:211.812px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:800px;height:211.812px;max-width:800px;margin-right:200px;margin-left:200px;padding-top:25.6px;padding-right:25.6px;padding-bottom:25.6px;padding-left:25.6px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:160.625px;max-width:940px;color:rgb(255, 255, 255);background-color:rgb(181, 94, 28);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><blockquote style="position:relative;top:0px;right:0px;bottom:0px;left:0px;width:748.812px;height:160.625px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:40px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-left-width:8px;border-left-style:solid;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><div style="width:680.812px;height:80.625px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:14.4px;font-weight:300;line-height:19.2px;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)"><p style="width:680.812px;height:80.625px;margin-top:0px;margin-bottom:0px;color:rgb(255, 255, 255);font-family:Inter, sans-serif;font-size:16.8px;font-style:italic;line-height:26.88px;word-break:break-word;border-top-color:rgb(255, 255, 255);border-right-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-left-color:rgb(255, 255, 255);box-sizing:border-box;outline-color:rgb(255, 255, 255)">Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.</p></div></blockquote></div></div></div></div>
+        </div>
+      </figure>
+    </div>
+  </div>
+  <footer>Captured from the built Storybook, not hand-written: each block is the real component output with its computed styles inlined, rendered through the <code>withTheme</code> decorator so the colour mode and the <code>--theme-*</code> mapping resolve exactly as they do on a page. Remote photography is replaced by a neutral placeholder. See <code>DESIGN_SYSTEM.md</code> &sect;4.3 for why the decorator has to set the colour scheme in two places.</footer>
+</div>
\ No newline at end of file
diff --git a/docs/design-system/previews/block-themes.html b/docs/design-system/previews/block-themes.html
new file mode 100644
index 0000000..71f502f
--- /dev/null
+++ b/docs/design-system/previews/block-themes.html
@@ -0,0 +1,246 @@
+<!-- @dsCard group="Colors" -->
+<!--
+  Block theme system — @simplesconsultoria/volto-light-theme
+  createThemeDefinition() in src/config/blocks.ts maps 14 semantic --theme-* properties
+  onto --block-theme-{name}-* tokens defined in src/theme/_root.scss.
+-->
+<meta charset="utf-8" />
+<title>Block themes</title>
+<style>
+  :root {
+    --ink: #16181d;
+    --ink-soft: #5b6270;
+    --rule: #e4e7ec;
+    --ground: #ffffff;
+    --warn: #8a5300;
+    --warn-bg: #fdf3e2;
+    --fail: #b3261e;
+    --fail-bg: #fdecea;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    padding: 40px 32px 56px;
+    background: var(--ground);
+    color: var(--ink);
+    font: 400 14px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  .wrap { max-width: 1080px; margin: 0 auto; }
+  h1 { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
+  .lede { margin: 0 0 8px; max-width: 66ch; color: var(--ink-soft); }
+  h2 {
+    margin: 40px 0 14px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ink-soft);
+  }
+  code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
+
+  /* ---- layer legend ---- */
+  .layers {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+    gap: 10px;
+    margin-top: 16px;
+  }
+  .layer {
+    padding: 13px 15px;
+    border: 1px solid var(--rule);
+    border-radius: 10px;
+  }
+  .layer b { display: block; margin-bottom: 3px; font-size: 13px; }
+  .layer span { color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
+
+  /* ---- theme demos ---- */
+  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
+  .demo { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
+  .demo > .head {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    padding: 11px 16px;
+    border-bottom: 1px solid var(--rule);
+    background: #fafbfc;
+  }
+  .demo > .head b { font-size: 13px; }
+  .demo > .head span { color: var(--ink-soft); font-size: 12px; }
+  .demo > .head .mode {
+    margin-left: auto;
+    font: 600 10px/1 system-ui, sans-serif;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--ink-soft);
+  }
+
+  /* the rendered block */
+  .block { padding: 26px 24px 28px; }
+  .block .eyebrow {
+    margin-bottom: 7px;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+  .block h3 { margin: 0 0 8px; font-size: 21px; font-weight: 600; line-height: 1.25; }
+  .block p { margin: 0; font-size: 13.5px; line-height: 1.6; }
+  .card {
+    margin-top: 18px;
+    padding: 16px 18px;
+    border-radius: 8px;
+  }
+  .card .t { margin-bottom: 5px; font-size: 14px; font-weight: 600; }
+  .card .d { font-size: 12.5px; line-height: 1.55; }
+  .card .m { margin-top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
+
+  /* ---- mapping table ---- */
+  table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
+  th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--rule); }
+  th {
+    font: 600 10.5px/1.4 system-ui, sans-serif;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+    color: var(--ink-soft);
+  }
+  td code { font-size: 12px; }
+  tr.missing td { background: var(--fail-bg); }
+  tr.partial td { background: var(--warn-bg); }
+  .tag {
+    display: inline-block;
+    padding: 1px 6px;
+    border-radius: 999px;
+    font: 600 10px/1.6 system-ui, sans-serif;
+    letter-spacing: .03em;
+  }
+  .tag.no { background: #f7d4d1; color: var(--fail); }
+  .tag.part { background: #f6e3c2; color: var(--warn); }
+  .tag.ok { background: #dff0e4; color: #1c6b35; }
+  .group-cell { font-weight: 600; color: var(--ink-soft); font-size: 12px; }
+  footer {
+    margin-top: 40px;
+    padding-top: 16px;
+    border-top: 1px solid var(--rule);
+    color: var(--ink-soft);
+    font-size: 12.5px;
+    line-height: 1.6;
+  }
+</style>
+
+<div class="wrap">
+  <h1>Block themes</h1>
+  <p class="lede">
+    Any block that calls <code>defaultStylingSchema</code> gets a
+    <code>theme</code> control. A theme is produced by
+    <code>createThemeDefinition(name, label)</code>, which maps 14 semantic
+    <code>--theme-*</code> properties onto <code>--block-theme-{name}-*</code> tokens.
+    Adding a third theme downstream is one line plus a matching token block.
+  </p>
+
+  <h2>The four layers</h2>
+  <div class="layers">
+    <div class="layer"><b>Ground</b><span>The block's own background and text — <code>bg</code>, <code>text</code>, <code>low-contrast</code>, <code>accent-color</code>.</span></div>
+    <div class="layer"><b>High Ground</b><span>Elevated elements inside the block: cards, chips, teasers — the <code>high-bg</code> and <code>top-*</code> tokens.</span></div>
+    <div class="layer"><b>Border</b><span>Optional edge — <code>border</code> and <code>border-width</code>.</span></div>
+    <div class="layer"><b>Pattern</b><span>Decorative overlay — <code>pattern-image</code>, <code>pattern-opacity</code>. Defined as <code>none</code>/<code>0</code>; not yet consumed.</span></div>
+  </div>
+
+  <h2>default &mdash; label &ldquo;Primary&rdquo;</h2>
+  <div class="grid">
+    <div class="demo">
+      <div class="head"><b>default</b><span>Ground = primary</span><span class="mode">Light</span></div>
+      <div class="block" style="background:#ffffff;color:#000000;border-top:4px solid #f4822c">
+        <div class="eyebrow" style="color:#b55e1c">Eyebrow &middot; accent</div>
+        <h3>Ground carries the block</h3>
+        <p style="color:#333333">Low-contrast foreground handles secondary copy, deck text and metadata across the block body.</p>
+        <div class="card" style="background:#edeff0;color:#000000">
+          <div class="t">High ground card</div>
+          <div class="d" style="color:#333333">Elevated surfaces switch to the neutral family.</div>
+          <div class="m" style="color:#af5009">Top accent &middot; 4.58</div>
+        </div>
+      </div>
+    </div>
+    <div class="demo">
+      <div class="head"><b>default</b><span>Ground = primary</span><span class="mode">Dark</span></div>
+      <div class="block" style="background:#000000;color:#ffffff;border-top:4px solid #b55e1c">
+        <div class="eyebrow" style="color:#f4822c">Eyebrow &middot; accent</div>
+        <h3>Ground carries the block</h3>
+        <p style="color:#f8f8f8">Low-contrast foreground handles secondary copy, deck text and metadata across the block body.</p>
+        <div class="card" style="background:#333333;color:#ffffff">
+          <div class="t">High ground card</div>
+          <div class="d" style="color:#e6e6e6">Elevated surfaces switch to the neutral family.</div>
+          <div class="m" style="color:#f4822c">Top accent &middot; 4.86</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <h2>brand &mdash; label &ldquo;Brand&rdquo;</h2>
+  <div class="grid">
+    <div class="demo">
+      <div class="head"><b>brand</b><span>Ground = accent</span><span class="mode">Light</span></div>
+      <div class="block" style="background:#f4822c;color:#000000">
+        <div class="eyebrow" style="color:#000000">Eyebrow &middot; accent</div>
+        <h3>Ground carries the block</h3>
+        <p style="color:#333333">Low-contrast foreground handles secondary copy, deck text and metadata across the block body.</p>
+        <div class="card" style="background:#ffffff;color:#000000">
+          <div class="t">High ground card</div>
+          <div class="d" style="color:#333333">Elevated surfaces invert back to the primary family.</div>
+          <div class="m" style="color:#b55e1c">Top accent &middot; 4.58</div>
+        </div>
+      </div>
+    </div>
+    <div class="demo">
+      <div class="head"><b>brand</b><span>Ground = accent</span><span class="mode">Dark</span></div>
+      <div class="block" style="background:#b55e1c;color:#ffffff">
+        <div class="eyebrow" style="color:#ffffff">Eyebrow &middot; accent</div>
+        <h3>Ground carries the block</h3>
+        <p style="color:#f8f8f8">Low-contrast foreground handles secondary copy, deck text and metadata across the block body.</p>
+        <div class="card" style="background:#000000;color:#ffffff">
+          <div class="t">High ground card</div>
+          <div class="d" style="color:#f8f8f8">Elevated surfaces invert back to the primary family.</div>
+          <div class="m" style="color:#f4822c">Top accent &middot; 8.08</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <p class="lede" style="margin-top:12px">
+    <code>brand</code> sets <code>border: unset</code> with <code>border-width: 0</code>,
+    so it renders edge-to-edge —
+    hence no top rule above, unlike <code>default</code>&rsquo;s <code>4px 0 0</code>.
+  </p>
+
+  <h2>Property mapping</h2>
+  <table>
+    <thead>
+      <tr><th>Layer</th><th>Semantic property</th><th>Token suffix</th><th>default</th><th>brand</th><th>Status</th></tr>
+    </thead>
+    <tbody>
+      <tr><td class="group-cell">Ground</td><td><code>--theme-color</code></td><td><code>bg</code></td><td>primary</td><td>accent</td><td><span class="tag ok">defined</span></td></tr>
+      <tr><td class="group-cell"></td><td><code>--theme-foreground-color</code></td><td><code>text</code></td><td>primary fg</td><td>accent fg</td><td><span class="tag ok">defined</span></td></tr>
+      <tr><td class="group-cell"></td><td><code>--theme-high-contrast-foreground-color</code></td><td><code>high-contrast</code></td><td>primary fg</td><td>accent fg</td><td><span class="tag ok">defined</span></td></tr>
+      <tr><td class="group-cell"></td><td><code>--theme-low-contrast-foreground-color</code></td><td><code>low-contrast</code></td><td>primary low</td><td>accent low</td><td><span class="tag ok">defined</span></td></tr>
+      <tr><td class="group-cell"></td><td><code>--theme-foreground-accent-color</code></td><td><code>accent-color</code></td><td>primary acc</td><td>accent acc</td><td><span class="tag ok">defined</span></td></tr>
+      <tr><td class="group-cell">High Ground</td><td><code>--theme-high-contrast-color</code></td><td><code>high-bg</code></td><td>neutral</td><td>primary</td><td><span class="tag ok">defined</span></td></tr>
+      <tr><td class="group-cell"></td><td><code>--theme-top-foreground-color</code></td><td><code>top-text</code></td><td>neutral fg</td><td>primary fg</td><td><span class="tag ok">defined</span></td></tr>
+      <tr><td class="group-cell"></td><td><code>--theme-top-high-contrast-foreground-color</code></td><td><code>top-high-contrast</code></td><td>neutral fg</td><td>primary fg</td><td><span class="tag ok">defined</span></td></tr>
+      <tr><td class="group-cell"></td><td><code>--theme-top-low-contrast-foreground-color</code></td><td><code>top-low-contrast</code></td><td>neutral low</td><td>primary low</td><td><span class="tag ok">defined</span></td></tr>
+      <tr><td class="group-cell"></td><td><code>--theme-top-accent-color</code></td><td><code>top-accent-color</code></td><td>neutral acc</td><td>primary acc</td><td><span class="tag ok">defined</span></td></tr>
+      <tr><td class="group-cell">Border</td><td><code>--theme-border-color</code></td><td><code>border</code></td><td>accent</td><td><code>unset</code></td><td><span class="tag ok">defined</span></td></tr>
+      <tr><td class="group-cell"></td><td><code>--theme-border-width</code></td><td><code>border-width</code></td><td><code>4px 0 0</code></td><td><code>0</code></td><td><span class="tag ok">defined</span></td></tr>
+      <tr class="partial"><td class="group-cell">Pattern</td><td><code>--theme-pattern-image</code></td><td><code>pattern-image</code></td><td><code>none</code></td><td><code>none</code></td><td><span class="tag part">unused</span></td></tr>
+      <tr class="partial"><td class="group-cell"></td><td><code>--theme-pattern-opacity</code></td><td><code>pattern-opacity</code></td><td><code>0</code></td><td><code>0</code></td><td><span class="tag part">unused</span></td></tr>
+    </tbody>
+  </table>
+
+  <footer>
+    All 14 mapped properties resolve in both themes. Four of them did not, and the
+    failure was silent: a <code>var()</code> with no definition and no fallback is invalid
+    at computed-value time, so the whole declaration is dropped rather than degraded. That
+    took out six focus outlines in <code>_listing.scss</code> reading
+    <code>outline: 2px solid var(--theme-top-high-contrast-foreground-color)</code>,
+    leaving keyboard focus invisible on listing cards.
+    <code>src/theme/blockThemes.test.ts</code> now guards the contract.
+  </footer>
+</div>
diff --git a/docs/design-system/previews/colors.html b/docs/design-system/previews/colors.html
new file mode 100644
index 0000000..d2689a7
--- /dev/null
+++ b/docs/design-system/previews/colors.html
@@ -0,0 +1,338 @@
+<!-- @dsCard group="Colors" -->
+<!--
+  Semantic colour palette — @simplesconsultoria/volto-light-theme
+  Generated from src/theme/_root.scss. Values are the shipped light-dark() fallbacks;
+  a site that configures the Themes control panel replaces them at runtime.
+-->
+<meta charset="utf-8" />
+<title>Colour palette</title>
+<style>
+  :root {
+    --ink: #16181d;
+    --ink-soft: #5b6270;
+    --rule: #e4e7ec;
+    --ground: #ffffff;
+    --card: #ffffff;
+    --fail: #b3261e;
+    --fail-bg: #fdecea;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    padding: 40px 32px 56px;
+    background: var(--ground);
+    color: var(--ink);
+    font: 400 14px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  .wrap { max-width: 1080px; margin: 0 auto; }
+  header { margin-bottom: 36px; }
+  h1 {
+    margin: 0 0 6px;
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+  .lede { margin: 0; max-width: 62ch; color: var(--ink-soft); font-size: 14px; }
+  h2 {
+    margin: 40px 0 4px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ink-soft);
+  }
+  h2 + .note { margin: 0 0 18px; color: var(--ink-soft); font-size: 13px; }
+
+  /* ---- base ramp ---- */
+  .ramp {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
+    gap: 10px;
+    margin-top: 16px;
+  }
+  .chip {
+    border: 1px solid var(--rule);
+    border-radius: 10px;
+    overflow: hidden;
+    background: var(--card);
+  }
+  .chip .fill { height: 58px; }
+  .chip .meta { padding: 8px 10px 10px; }
+  .chip code {
+    display: block;
+    font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+    word-break: normal;
+    overflow-wrap: break-word;
+    hyphens: none;
+  }
+  .chip .hex {
+    margin-top: 3px;
+    color: var(--ink-soft);
+    font: 400 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
+    text-transform: uppercase;
+  }
+
+  /* ---- semantic families ---- */
+  .families { display: grid; gap: 14px; margin-top: 18px; }
+  .family {
+    border: 1px solid var(--rule);
+    border-radius: 12px;
+    overflow: hidden;
+  }
+  .family > .name {
+    padding: 11px 16px;
+    border-bottom: 1px solid var(--rule);
+    background: #fafbfc;
+    font-weight: 600;
+    font-size: 13px;
+  }
+  .modes { display: grid; grid-template-columns: 1fr 1fr; }
+  .modes > div { padding: 18px; }
+  .modes > div + div { border-left: 1px solid var(--rule); }
+  .mode-label {
+    margin-bottom: 12px;
+    font: 600 10px/1 system-ui, sans-serif;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--ink-soft);
+  }
+  .sample {
+    padding: 16px 18px;
+    border: 1px solid var(--rule);
+    border-radius: 8px;
+  }
+  .sample .body { font-size: 15px; font-weight: 500; }
+  .sample .low { margin-top: 5px; font-size: 13px; }
+  .sample .acc { margin-top: 5px; font-size: 13px; font-weight: 600; }
+  .rows {
+    margin-top: 12px;
+    display: grid;
+    gap: 4px;
+    font: 400 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+    color: var(--ink-soft);
+  }
+  .rows div { display: flex; align-items: center; gap: 7px; }
+  .dot {
+    width: 11px; height: 11px;
+    flex: none;
+    border: 1px solid rgba(0,0,0,.18);
+    border-radius: 3px;
+  }
+  .rows .hexv { margin-left: auto; text-transform: uppercase; }
+
+  .flag {
+    display: inline-block;
+    margin-left: 6px;
+    padding: 1px 6px;
+    border-radius: 999px;
+    background: var(--fail-bg);
+    color: var(--fail);
+    font: 600 10px/1.5 system-ui, sans-serif;
+    letter-spacing: 0.03em;
+    vertical-align: 1px;
+  }
+  footer {
+    margin-top: 44px;
+    padding-top: 16px;
+    border-top: 1px solid var(--rule);
+    color: var(--ink-soft);
+    font-size: 12px;
+  }
+  footer code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+</style>
+
+<div class="wrap">
+  <header>
+    <h1>Colour palette</h1>
+    <p class="lede">
+      Four semantic families &times; four roles, each defined as a
+      <code>light-dark()</code> pair. Nothing in the package assigns the
+      <code>--*-light</code> / <code>--*-dark</code> override hooks, so the values below
+      are what ships; a site configures its own through the Themes control panel.
+    </p>
+  </header>
+
+  <h2>Base ramp</h2>
+  <p class="note">Raw values. Never referenced directly by components — always through a semantic token.</p>
+  <div class="ramp">
+    <div class="chip"><div class="fill" style="background:#ffffff;border-bottom:1px solid #e4e7ec"></div><div class="meta"><code>--pure-white</code><span class="hex">#ffffff</span></div></div>
+    <div class="chip"><div class="fill" style="background:#f8f8f8"></div><div class="meta"><code>--gray-02</code><span class="hex">#f8f8f8</span></div></div>
+    <div class="chip"><div class="fill" style="background:#edeff0"></div><div class="meta"><code>--gray-cool-05</code><span class="hex">#edeff0</span></div></div>
+    <div class="chip"><div class="fill" style="background:#e6e6e6"></div><div class="meta"><code>--gray-10</code><span class="hex">#e6e6e6</span></div></div>
+    <div class="chip"><div class="fill" style="background:#757575"></div><div class="meta"><code>--gray-50</code><span class="hex">#757575</span></div></div>
+    <div class="chip"><div class="fill" style="background:#333333"></div><div class="meta"><code>--gray-80</code><span class="hex">#333333</span></div></div>
+    <div class="chip"><div class="fill" style="background:#000000"></div><div class="meta"><code>--pure-black</code><span class="hex">#000000</span></div></div>
+    <div class="chip"><div class="fill" style="background:#f4822c"></div><div class="meta"><code>--brand-color</code><span class="hex">#f4822c</span></div></div>
+    <div class="chip"><div class="fill" style="background:#b55e1c"></div><div class="meta"><code>--brand-color-dark</code><span class="hex">#b55e1c</span></div></div>
+    <div class="chip"><div class="fill" style="background:#af5009"></div><div class="meta"><code>--brand-color-darker</code><span class="hex">#af5009</span></div></div>
+  </div>
+
+  <h2>Semantic families</h2>
+  <p class="note">
+    Each family pairs a ground with a foreground, a low-contrast foreground for secondary
+    text, and an accent. Ratios are WCAG 2.1 against the family ground.
+  </p>
+
+  <div class="families">
+
+    <div class="family">
+      <div class="name">primary &mdash; page surface</div>
+      <div class="modes">
+        <div>
+          <div class="mode-label">Light</div>
+          <div class="sample" style="background:#ffffff">
+            <div class="body" style="color:#000000">Foreground &middot; 21.0</div>
+            <div class="low" style="color:#333333">Low contrast &middot; 12.6</div>
+            <div class="acc" style="color:#b55e1c">Accent &middot; 4.58</div>
+          </div>
+          <div class="rows">
+            <div><span class="dot" style="background:#ffffff"></span>--primary-color<span class="hexv">#ffffff</span></div>
+            <div><span class="dot" style="background:#000000"></span>--primary-foreground-color<span class="hexv">#000000</span></div>
+            <div><span class="dot" style="background:#333333"></span>--primary-low-foreground-color<span class="hexv">#333333</span></div>
+            <div><span class="dot" style="background:#b55e1c"></span>--primary-accent-color<span class="hexv">#b55e1c</span></div>
+          </div>
+        </div>
+        <div>
+          <div class="mode-label">Dark</div>
+          <div class="sample" style="background:#000000;border-color:#2a2a2a">
+            <div class="body" style="color:#ffffff">Foreground &middot; 21.0</div>
+            <div class="low" style="color:#f8f8f8">Low contrast &middot; 19.8</div>
+            <div class="acc" style="color:#f4822c">Accent &middot; 8.08</div>
+          </div>
+          <div class="rows">
+            <div><span class="dot" style="background:#000000"></span>--primary-color<span class="hexv">#000000</span></div>
+            <div><span class="dot" style="background:#ffffff"></span>--primary-foreground-color<span class="hexv">#ffffff</span></div>
+            <div><span class="dot" style="background:#f8f8f8"></span>--primary-low-foreground-color<span class="hexv">#f8f8f8</span></div>
+            <div><span class="dot" style="background:#f4822c"></span>--primary-accent-color<span class="hexv">#f4822c</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="family">
+      <div class="name">secondary &mdash; footer surface</div>
+      <div class="modes">
+        <div>
+          <div class="mode-label">Light</div>
+          <div class="sample" style="background:#000000;border-color:#2a2a2a">
+            <div class="body" style="color:#ffffff">Foreground &middot; 21.0</div>
+            <div class="low" style="color:#e6e6e6">Low contrast &middot; 16.8</div>
+            <div class="acc" style="color:#f4822c">Accent &middot; 8.08</div>
+          </div>
+          <div class="rows">
+            <div><span class="dot" style="background:#000000"></span>--secondary-color<span class="hexv">#000000</span></div>
+            <div><span class="dot" style="background:#ffffff"></span>--secondary-foreground-color<span class="hexv">#ffffff</span></div>
+            <div><span class="dot" style="background:#e6e6e6"></span>--secondary-low-foreground-color<span class="hexv">#e6e6e6</span></div>
+            <div><span class="dot" style="background:#f4822c"></span>--secondary-accent-color<span class="hexv">#f4822c</span></div>
+          </div>
+        </div>
+        <div>
+          <div class="mode-label">Dark</div>
+          <div class="sample" style="background:#ffffff">
+            <div class="body" style="color:#000000">Foreground &middot; 21.0</div>
+            <div class="low" style="color:#333333">Low contrast &middot; 12.6</div>
+            <div class="acc" style="color:#b55e1c">Accent &middot; 4.58</div>
+          </div>
+          <div class="rows">
+            <div><span class="dot" style="background:#ffffff"></span>--secondary-color<span class="hexv">#ffffff</span></div>
+            <div><span class="dot" style="background:#000000"></span>--secondary-foreground-color<span class="hexv">#000000</span></div>
+            <div><span class="dot" style="background:#333333"></span>--secondary-low-foreground-color<span class="hexv">#333333</span></div>
+            <div><span class="dot" style="background:#b55e1c"></span>--secondary-accent-color<span class="hexv">#b55e1c</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="family">
+      <div class="name">accent &mdash; breadcrumbs, brand theme ground</div>
+      <div class="modes">
+        <div>
+          <div class="mode-label">Light</div>
+          <div class="sample" style="background:#f4822c;border-color:#d9721f">
+            <div class="body" style="color:#000000">Foreground &middot; 8.08</div>
+            <div class="low" style="color:#333333">Low contrast &middot; 4.86</div>
+            <div class="acc" style="color:#000000">Accent &middot; 8.08</div>
+          </div>
+          <div class="rows">
+            <div><span class="dot" style="background:#f4822c"></span>--accent-color<span class="hexv">#f4822c</span></div>
+            <div><span class="dot" style="background:#000000"></span>--accent-foreground-color<span class="hexv">#000000</span></div>
+            <div><span class="dot" style="background:#333333"></span>--accent-low-foreground-color<span class="hexv">#333333</span></div>
+            <div><span class="dot" style="background:#000000"></span>--accent-accent-color<span class="hexv">#000000</span></div>
+          </div>
+        </div>
+        <div>
+          <div class="mode-label">Dark</div>
+          <div class="sample" style="background:#b55e1c;border-color:#9c5018">
+            <div class="body" style="color:#ffffff">Foreground &middot; 4.58</div>
+            <div class="low" style="color:#f8f8f8">Low contrast &middot; 4.31 <span class="flag">LARGE ONLY</span></div>
+            <div class="acc" style="color:#ffffff">Accent &middot; 4.58</div>
+          </div>
+          <div class="rows">
+            <div><span class="dot" style="background:#b55e1c"></span>--accent-color<span class="hexv">#b55e1c</span></div>
+            <div><span class="dot" style="background:#ffffff"></span>--accent-foreground-color<span class="hexv">#ffffff</span></div>
+            <div><span class="dot" style="background:#f8f8f8"></span>--accent-low-foreground-color<span class="hexv">#f8f8f8</span></div>
+            <div><span class="dot" style="background:#ffffff"></span>--accent-accent-color<span class="hexv">#ffffff</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="family">
+      <div class="name">neutral &mdash; elevated cards, default theme high ground</div>
+      <div class="modes">
+        <div>
+          <div class="mode-label">Light</div>
+          <div class="sample" style="background:#edeff0;border-color:#dcdfe1">
+            <div class="body" style="color:#000000">Foreground &middot; 18.2</div>
+            <div class="low" style="color:#333333">Low contrast &middot; 10.9</div>
+            <div class="acc" style="color:#af5009">Accent &middot; 4.58</div>
+          </div>
+          <div class="rows">
+            <div><span class="dot" style="background:#edeff0"></span>--neutral-color<span class="hexv">#edeff0</span></div>
+            <div><span class="dot" style="background:#000000"></span>--neutral-foreground-color<span class="hexv">#000000</span></div>
+            <div><span class="dot" style="background:#333333"></span>--neutral-low-foreground-color<span class="hexv">#333333</span></div>
+            <div><span class="dot" style="background:#af5009"></span>--neutral-accent-color<span class="hexv">#af5009</span></div>
+          </div>
+        </div>
+        <div>
+          <div class="mode-label">Dark</div>
+          <div class="sample" style="background:#333333;border-color:#454545">
+            <div class="body" style="color:#ffffff">Foreground &middot; 12.6</div>
+            <div class="low" style="color:#e6e6e6">Low contrast &middot; 10.1</div>
+            <div class="acc" style="color:#f4822c">Accent &middot; 4.86</div>
+          </div>
+          <div class="rows">
+            <div><span class="dot" style="background:#333333"></span>--neutral-color<span class="hexv">#333333</span></div>
+            <div><span class="dot" style="background:#ffffff"></span>--neutral-foreground-color<span class="hexv">#ffffff</span></div>
+            <div><span class="dot" style="background:#e6e6e6"></span>--neutral-low-foreground-color<span class="hexv">#e6e6e6</span></div>
+            <div><span class="dot" style="background:#f4822c"></span>--neutral-accent-color<span class="hexv">#f4822c</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <h2>Links &amp; content types</h2>
+  <div class="ramp">
+    <div class="chip"><div class="fill" style="background:#f4822c"></div><div class="meta"><code>--link-color</code><span class="hex">#f4822c</span></div></div>
+    <div class="chip"><div class="fill" style="background:#b55e1c"></div><div class="meta"><code>--link-color-hover</code><span class="hex">#b55e1c</span></div></div>
+    <div class="chip"><div class="fill" style="background:#000000"></div><div class="meta"><code>--news-item-color</code><span class="hex">#000000</span></div></div>
+    <div class="chip"><div class="fill" style="background:#f4822c"></div><div class="meta"><code>--document-color</code><span class="hex">accent</span></div></div>
+    <div class="chip"><div class="fill" style="background:#d32f2f"></div><div class="meta"><code>--event-color</code><span class="hex">#d32f2f</span></div></div>
+    <div class="chip"><div class="fill" style="background:#1976d2"></div><div class="meta"><code>--file-color</code><span class="hex">#1976d2</span></div></div>
+    <div class="chip"><div class="fill" style="background:#388e3c"></div><div class="meta"><code>--image-color</code><span class="hex">#388e3c</span></div></div>
+  </div>
+
+  <footer>
+Every accent pairing now clears WCAG AA. The two that did not &mdash;
+    <code>--secondary-accent-color</code> in dark (2.60) and
+    <code>--neutral-accent-color</code> in light (2.25) &mdash; were the only accent
+    tokens carrying <code>#f4822c</code> in both modes. The first now swaps to
+    <code>--brand-color-dark</code>; the second needed a third shade,
+    <code>--brand-color-darker</code> (<code>#af5009</code>), because
+    <code>#b55e1c</code> reaches only 3.97 against <code>#edeff0</code>. Every value here
+    is a default that a site theme replaces.
+  </footer>
+</div>
diff --git a/docs/design-system/previews/typography.html b/docs/design-system/previews/typography.html
new file mode 100644
index 0000000..135309b
--- /dev/null
+++ b/docs/design-system/previews/typography.html
@@ -0,0 +1,230 @@
+<!-- @dsCard group="Type" -->
+<!--
+  Type scale — @simplesconsultoria/volto-light-theme
+  Generated from src/theme/_variables.scss and src/theme/_typography.scss.
+  rem values shown at a 16px root; the global --font-scale on <html> shifts them.
+-->
+<meta charset="utf-8" />
+<title>Type scale</title>
+<style>
+  :root {
+    --ink: #16181d;
+    --ink-soft: #5b6270;
+    --rule: #e4e7ec;
+    --ground: #ffffff;
+    --warn: #8a5300;
+    --warn-bg: #fdf3e2;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    padding: 40px 32px 56px;
+    background: var(--ground);
+    color: var(--ink);
+    font: 400 14px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  .wrap { max-width: 1080px; margin: 0 auto; }
+  h1 { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
+  .lede { margin: 0; max-width: 66ch; color: var(--ink-soft); }
+  h2 {
+    margin: 40px 0 4px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ink-soft);
+  }
+  h2 + .note { margin: 0 0 16px; color: var(--ink-soft); font-size: 13px; max-width: 66ch; }
+  code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
+
+  .scale { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
+  .step {
+    display: grid;
+    grid-template-columns: 78px 122px 1fr;
+    align-items: baseline;
+    gap: 18px;
+    padding: 16px 20px;
+  }
+  .step + .step { border-top: 1px solid var(--rule); }
+  .step:nth-child(odd) { background: #fcfcfd; }
+  .step .key {
+    font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+    color: var(--ink);
+  }
+  .step .num {
+    font: 400 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+    color: var(--ink-soft);
+  }
+  .step .num b { display: block; font-weight: 400; color: var(--ink-soft); }
+  .step .spec {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  }
+  .miss { background: var(--warn-bg) !important; }
+  .miss .num b { color: var(--warn); font-weight: 600; }
+
+  table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
+  th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--rule); }
+  th {
+    font: 600 10.5px/1.4 system-ui, sans-serif;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+    color: var(--ink-soft);
+  }
+  .heads { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin-top: 16px; }
+  .head-row { padding: 20px; }
+  .head-row + .head-row { border-top: 1px solid var(--rule); }
+  .head-row .meta {
+    margin-bottom: 9px;
+    font: 400 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+    color: var(--ink-soft);
+  }
+  .stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
+  .font-chip {
+    padding: 10px 14px;
+    border: 1px solid var(--rule);
+    border-radius: 9px;
+    font: 400 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+    color: var(--ink-soft);
+  }
+  .font-chip b { display: block; margin-bottom: 3px; color: var(--ink); font-weight: 600; }
+  footer {
+    margin-top: 40px;
+    padding-top: 16px;
+    border-top: 1px solid var(--rule);
+    color: var(--ink-soft);
+    font-size: 12.5px;
+    line-height: 1.6;
+  }
+</style>
+
+<div class="wrap">
+  <h1>Type scale</h1>
+  <p class="lede">
+    Eleven steps, declared in rem so the global <code>--font-scale</code> applied to
+    <code>html</code> resizes theme-mixin text without per-component edits. Pixel values
+    below assume a 16px root.
+  </p>
+
+  <h2>Scale</h2>
+  <p class="note">
+    <code>$font-sizes</code> and <code>$line-heights</code> both have 11 steps &mdash;
+    every size has a line-height.
+  </p>
+  <div class="scale">
+    <div class="step">
+      <div class="key">2xs</div>
+      <div class="num">0.75rem &middot; 12px<b>0.875rem &middot; 14px</b></div>
+      <div class="spec" style="font-size:12px;line-height:1.4">Grade labels and fine print</div>
+    </div>
+    <div class="step">
+      <div class="key">xs</div>
+      <div class="num">0.875rem &middot; 14px<b>1rem &middot; 16px</b></div>
+      <div class="spec" style="font-size:14px;line-height:16px">Captions, metadata, tags</div>
+    </div>
+    <div class="step">
+      <div class="key">s</div>
+      <div class="num">1.125rem &middot; 18px<b>1.125rem &middot; 18px</b></div>
+      <div class="spec" style="font-size:18px;line-height:18px">Body copy &mdash; the base size</div>
+    </div>
+    <div class="step">
+      <div class="key">m</div>
+      <div class="num">1.3125rem &middot; 21px<b>1.5rem &middot; 24px</b></div>
+      <div class="spec" style="font-size:21px;line-height:24px">Lead paragraphs and decks</div>
+    </div>
+    <div class="step">
+      <div class="key">l</div>
+      <div class="num">1.5rem &middot; 24px<b>1.875rem &middot; 30px</b></div>
+      <div class="spec" style="font-size:24px;line-height:30px">Section heading &mdash; h2 base</div>
+    </div>
+    <div class="step">
+      <div class="key">xl</div>
+      <div class="num">1.875rem &middot; 30px<b>2.0625rem &middot; 33px</b></div>
+      <div class="spec" style="font-size:30px;line-height:33px">Headline h2</div>
+    </div>
+    <div class="step">
+      <div class="key">2xl</div>
+      <div class="num">2.0625rem &middot; 33px<b>2.25rem &middot; 36px</b></div>
+      <div class="spec" style="font-size:33px;line-height:36px">Display small</div>
+    </div>
+    <div class="step">
+      <div class="key">3xl</div>
+      <div class="num">2.25rem &middot; 36px<b>2.625rem &middot; 42px</b></div>
+      <div class="spec" style="font-size:36px;line-height:42px">Mobile page title</div>
+    </div>
+    <div class="step">
+      <div class="key">4xl</div>
+      <div class="num">2.625rem &middot; 42px<b>3rem &middot; 48px</b></div>
+      <div class="spec" style="font-size:42px;line-height:48px">Block title</div>
+    </div>
+    <div class="step">
+      <div class="key">5xl</div>
+      <div class="num">3rem &middot; 48px<b>3.5rem &middot; 56px</b></div>
+      <div class="spec" style="font-size:48px;line-height:56px">Page title</div>
+    </div>
+    <div class="step">
+      <div class="key">6xl</div>
+      <div class="num">5rem &middot; 80px<b>5.5rem &middot; 88px</b></div>
+      <div class="spec" style="font-size:80px;line-height:88px">Display</div>
+    </div>
+  </div>
+
+  <h2>Heading rules</h2>
+  <p class="note">
+    From <code>_typography.scss</code>. <code>h1</code>&ndash;<code>h6</code> are reset to
+    <code>font-family: inherit</code>. Mobile overrides fire at
+    <code>$largest-mobile-screen</code> and centre the text with 2rem side margins.
+  </p>
+  <div class="heads">
+    <div class="head-row">
+      <div class="meta">h1.documentFirstHeading &middot; 5xl / 400 / 5xl &middot; mobile 3xl</div>
+      <div style="font-size:48px;line-height:56px;font-weight:400;letter-spacing:-.01em">Page title sits at the top of the document</div>
+    </div>
+    <div class="head-row">
+      <div class="meta">@mixin h2_base &rarr; h2 &middot; l / 700 / l &middot; padding-top 2rem</div>
+      <div style="font-size:24px;line-height:30px;font-weight:700">Section heading inside a block</div>
+    </div>
+    <div class="head-row">
+      <div class="meta">@mixin h2_headline &rarr; h2.headline &middot; xl / 400 / 2xl</div>
+      <div style="font-size:30px;line-height:36px;font-weight:400">Headline variant used above block content</div>
+    </div>
+  </div>
+
+  <h2>Scalar overrides</h2>
+  <p class="note">
+    Upstream VLT declares these <code>!default</code> so add-ons can replace them. Each
+    override is an exact px&rarr;rem conversion at a 16px root, which is what lets the
+    global <code>--font-scale</code> resize text emitted by upstream mixins.
+  </p>
+  <table>
+    <thead><tr><th>Variable</th><th>Upstream !default</th><th>Override</th><th>Exact</th></tr></thead>
+    <tbody>
+      <tr><td><code>$font-size</code></td><td>18px</td><td>1.125rem</td><td>&check;</td></tr>
+      <tr><td><code>$line-height</code></td><td>24px</td><td>1.5rem</td><td>&check;</td></tr>
+      <tr><td><code>$heading1</code></td><td>60px</td><td>3.75rem</td><td>&check;</td></tr>
+      <tr><td><code>$heading2</code></td><td>30px</td><td>1.875rem</td><td>&check;</td></tr>
+      <tr><td><code>$heading3</code></td><td>24px</td><td>1.5rem</td><td>&check;</td></tr>
+      <tr><td><code>$block-title-h2</code></td><td>42px</td><td>2.625rem</td><td>&check;</td></tr>
+    </tbody>
+  </table>
+
+  <h2>Font stacks</h2>
+  <p class="note">All four tokens resolve to the same stack &mdash; the theme ships no brand typeface.</p>
+  <div class="stack">
+    <div class="font-chip"><b>--font-sans</b>system-ui, sans-serif</div>
+    <div class="font-chip"><b>--font-body</b>system-ui, sans-serif</div>
+    <div class="font-chip"><b>--custom-font</b>system-ui, sans-serif</div>
+    <div class="font-chip"><b>--custom-main-font</b>system-ui, sans-serif &mdash; drives upstream $page-font</div>
+  </div>
+
+  <footer>
+    <code>2xs</code> was the one real gap &mdash; a font-size with no line-height, so
+    <code>map-get($line-heights, 2xs)</code> returned null. It now has one.
+    <code>--custom-main-font</code> has no consumer in this package but is read twice by
+    upstream VLT, where it drives <code>$page-font</code>. Scale and heading rules:
+    <code>INVENTORY.md</code> &sect;6.
+  </footer>
+</div>
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index 570b1b6..6ff188c 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -17,6 +17,8 @@ const addonAliases = Object.keys(registry.packages).map((o) => [
 ]);
 
 module.exports = {
+  // Build output — see .prettierignore.
+  ignorePatterns: ['packages/*/dist'],
   extends: `${coreLocation}/packages/volto/.eslintrc`,
   rules: {
     'import/no-unresolved': 1,
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
index 16f05c7..c8ad5b6 100644
--- a/frontend/.prettierignore
+++ b/frontend/.prettierignore
@@ -1,3 +1,7 @@
 .storybook
 CHANGELOG.md
 README.md
+
+# Build output — the design-system export emits .d.ts under packages/*/dist/src/,
+# which the lint globs would otherwise pick up.
+packages/*/dist
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
index a645419..ca9edfe 100644
--- a/frontend/.storybook/main.js
+++ b/frontend/.storybook/main.js
@@ -61,6 +61,11 @@ const defaultRazzleOptions = {
 };
 
 module.exports = {
+  // Served at the Storybook root, so a story can reference `/images/foo.jpg`.
+  // `packages/volto-light-theme/public` is the add-on's own asset folder; it
+  // ships with the package, so fixtures pointing at it work for anyone building
+  // this Storybook rather than depending on a remote host.
+  staticDirs: ['../packages/volto-light-theme/public'],
   stories: [
     '../packages/**/*.mdx',
     '../packages/**/*.stories.@(js|jsx|ts|tsx)',
diff --git a/frontend/.storybook/preview.jsx b/frontend/.storybook/preview.jsx
index 1d2ac84..82cb06f 100644
--- a/frontend/.storybook/preview.jsx
+++ b/frontend/.storybook/preview.jsx
@@ -6,6 +6,11 @@ import enMessages from '@root/../locales/en.json';
 
 import '@root/theme';
 
+import {
+  globalTypes as themeGlobalTypes,
+  withTheme,
+} from '@simplesconsultoria/volto-light-theme/storybook/withTheme';
+
 export const parameters = {
   controls: {
     matchers: {
@@ -15,7 +20,10 @@ export const parameters = {
   },
 };
 
+export const globalTypes = themeGlobalTypes;
+
 export const decorators = [
+  withTheme,
   (Story) => (
     <IntlProvider messages={enMessages} locale="en" defaultLocale="en">
       <StaticRouter location="/">
diff --git a/frontend/packages/volto-light-theme/.gitignore b/frontend/packages/volto-light-theme/.gitignore
index b462bc9..0f330c3 100644
--- a/frontend/packages/volto-light-theme/.gitignore
+++ b/frontend/packages/volto-light-theme/.gitignore
@@ -1,3 +1,5 @@
 node_modules
 build
-README.md
+# Root README only — a bare rule here also swallowed src/storybook/README.md and
+# public/images/README.md, both referenced by docs but never committed.
+/README.md
diff --git a/frontend/packages/volto-light-theme/.npmignore b/frontend/packages/volto-light-theme/.npmignore
index 1758d8c..2730aae 100644
--- a/frontend/packages/volto-light-theme/.npmignore
+++ b/frontend/packages/volto-light-theme/.npmignore
@@ -1 +1,22 @@
 tsconfig.dev.json
+
+# npm ignores .gitignore entirely once this file exists, so build products have
+# to be named here too — the design-system export emits both (see
+# .design-sync/NOTES.md) and neither belongs in the published package.
+dist/
+index.d.ts
+build/
+
+# Stories, tests and their fixture assets. Consumed by Storybook and by the
+# Claude Design export; a project installing this package renders none of them.
+*.stories.tsx
+*.test.*
+
+# Story-support modules. They import the bundled photographs, which are excluded
+# above, so shipping them would publish broken imports — and no project renders
+# them anyway.
+src/storybook/
+**/fixtures.ts
+**/mocks.ts
+**/storyMocks.ts
+**/storyDecorators.tsx
diff --git a/frontend/packages/volto-light-theme/locales/de/LC_MESSAGES/volto.po b/frontend/packages/volto-light-theme/locales/de/LC_MESSAGES/volto.po
index 796f3cf..dd06652 100644
--- a/frontend/packages/volto-light-theme/locales/de/LC_MESSAGES/volto.po
+++ b/frontend/packages/volto-light-theme/locales/de/LC_MESSAGES/volto.po
@@ -10,3 +10,749 @@ msgstr ""
 "Content-Type: \n"
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
+
+#. Default: "Accessibility options"
+#: components/Header/MobileHeader/MobileTools
+msgid "Accessibility options"
+msgstr ""
+
+#. Default: "Actions"
+#: components/Controlpanels/Themes/messages
+msgid "Actions"
+msgstr ""
+
+#. Default: "Add theme"
+#: components/Controlpanels/Themes/messages
+msgid "Add theme"
+msgstr ""
+
+#. Default: "Alignment"
+#: components/Blocks/Listing/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Alignment"
+msgstr ""
+
+#. Default: "Alt Text"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt Text"
+msgstr ""
+
+#. Default: "Leave empty if the image is purely decorative"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt text hint"
+msgstr ""
+
+#. Default: "Describe the purpose of the image"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt text hint link text"
+msgstr ""
+
+#. Default: "Attached Card"
+#: index
+msgid "Attached Card"
+msgstr ""
+
+#. Default: "Author / Source"
+#: components/Blocks/QuoteBlock/schema
+msgid "Author / Source"
+msgstr ""
+
+#. Default: "Auto-advance"
+#: components/Blocks/Listing/schema
+msgid "Auto-advance"
+msgstr ""
+
+#. Default: "Auto-advance interval (ms)"
+#: components/Blocks/Listing/schema
+msgid "Auto-advance interval (ms)"
+msgstr ""
+
+#. Default: "Back"
+#: components/Controlpanels/Themes/messages
+msgid "Back"
+msgstr ""
+
+#. Default: "Background color"
+#: components/Blocks/schema
+msgid "Background color"
+msgstr ""
+
+#. Default: "Background style"
+#: components/Blocks/QuoteBlock/schema
+msgid "Background style"
+msgstr ""
+
+#. Default: "Block Width"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Block Width"
+msgstr ""
+
+#. Default: "Brand"
+#: index
+msgid "Brand"
+msgstr ""
+
+#. Default: "Button link"
+#: components/Blocks/HeroBlock/schema
+msgid "Button link"
+msgstr ""
+
+#. Default: "Button text"
+#: components/Blocks/HeroBlock/schema
+msgid "Button text"
+msgstr ""
+
+#. Default: "The text shown inside the button (e.g. \"Read more\")."
+#: components/Blocks/HeroBlock/schema
+msgid "Button text description"
+msgstr ""
+
+#. Default: "By"
+#: components/DocumentByLine/DocumentByLine
+msgid "By"
+msgstr ""
+
+#. Default: "Byline"
+#: components/Blocks/DocumentByLine/schema
+#: index
+msgid "Byline"
+msgstr ""
+
+#. Default: "Call to Action"
+#: components/Blocks/HeroBlock/schema
+msgid "Call to Action"
+msgstr ""
+
+#. Default: "Cancel"
+#: components/Controlpanels/Themes/messages
+msgid "Cancel"
+msgstr ""
+
+#. Default: "Carousel"
+#: components/Blocks/Listing/messages
+#: components/Blocks/Listing/schema
+#: index
+msgid "Carousel"
+msgstr ""
+
+#. Default: "Carousel controls"
+#: components/Blocks/Listing/messages
+msgid "Carousel controls"
+msgstr ""
+
+#. Default: "Center"
+#: components/Blocks/Listing/schema
+msgid "Center"
+msgstr ""
+
+#. Default: "Center bottom"
+#: components/Blocks/Listing/schema
+msgid "Center bottom"
+msgstr ""
+
+#. Default: "Center top"
+#: components/Blocks/Listing/schema
+msgid "Center top"
+msgstr ""
+
+#. Default: "Changes saved"
+#: components/Controlpanels/Themes/messages
+msgid "Changes saved"
+msgstr ""
+
+#. Default: "Close menu"
+#: components/Navigation/SCNavigation/SubMenu
+msgid "Close menu"
+msgstr ""
+
+#. Default: "Colours"
+#: components/Controlpanels/Themes/messages
+msgid "Colours"
+msgstr ""
+
+#. Default: "Contain"
+#: components/Blocks/HeroBlock/schema
+msgid "Contain"
+msgstr ""
+
+#. Default: "Content"
+#: components/Blocks/HeroBlock/schema
+msgid "Content"
+msgstr ""
+
+#. Default: "Cover"
+#: components/Blocks/HeroBlock/schema
+msgid "Cover"
+msgstr ""
+
+#. Default: "Criteria"
+#: components/Widgets/QuerystringWidget
+msgid "Criteria"
+msgstr ""
+
+#. Default: "Delete"
+#: components/Controlpanels/Themes/messages
+msgid "Delete"
+msgstr ""
+
+#. Default: "Delete this theme? Content still using it keeps the stored id but falls back to the default colours."
+#: components/Controlpanels/Themes/messages
+msgid "Delete this theme?"
+msgstr ""
+
+#. Default: "Description"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Description"
+msgstr ""
+
+#. Default: "Duplicate"
+#: components/Controlpanels/Themes/messages
+msgid "Duplicate"
+msgstr ""
+
+#. Default: "Duplicate of {name}"
+#: components/Controlpanels/Themes/messages
+msgid "Duplicate of {name}"
+msgstr ""
+
+#. Default: "Edit"
+#: components/Controlpanels/Themes/messages
+msgid "Edit"
+msgstr ""
+
+#. Default: "This is a Hero Block. Add an item in the sidebar to fill it automatically."
+#: components/Blocks/HeroBlock/useHeroBlockContent
+msgid "Empty hero block placeholder"
+msgstr ""
+
+#. Default: "Error"
+#: components/Controlpanels/Themes/messages
+msgid "Error"
+msgstr ""
+
+#. Default: "File type"
+#: components/Blocks/HeroBlock/schema
+msgid "File type"
+msgstr ""
+
+#. Default: "E.g. PDF, Report, Article"
+#: components/Blocks/HeroBlock/schema
+msgid "File type description"
+msgstr ""
+
+#. Default: "Filled"
+#: components/Blocks/QuoteBlock/schema
+msgid "Filled"
+msgstr ""
+
+#. Default: "Flex / Decorative"
+#: index
+msgid "Flex / Decorative"
+msgstr ""
+
+#. Default: "Footer text"
+#: components/Blocks/HeroBlock/schema
+msgid "Footer text"
+msgstr ""
+
+#. Default: "Additional information displayed at the foot of the block."
+#: components/Blocks/HeroBlock/schema
+msgid "Footer text description"
+msgstr ""
+
+#. Default: "Full width"
+#: components/Blocks/HeroBlock/schema
+msgid "Full width"
+msgstr ""
+
+#. Default: "Let the text span the whole block when there is no image to show."
+#: components/Blocks/HeroBlock/schema
+msgid "Full width description"
+msgstr ""
+
+#. Default: "Go to item {index}"
+#: components/Blocks/Listing/messages
+msgid "Go to item {index}"
+msgstr ""
+
+#. Default: "Header text"
+#: components/Blocks/HeroBlock/schema
+msgid "Header text"
+msgstr ""
+
+#. Default: "Small text displayed above the main title."
+#: components/Blocks/HeroBlock/schema
+msgid "Header text description"
+msgstr ""
+
+#. Default: "Headline button link"
+#: components/Blocks/Listing/schema
+msgid "Headline button link"
+msgstr ""
+
+#. Default: "Headline button text"
+#: components/Blocks/Listing/schema
+msgid "Headline button text"
+msgstr ""
+
+#. Default: "Height (px)"
+#: components/Blocks/Listing/schema
+msgid "Height (px)"
+msgstr ""
+
+#. Default: "Hero Block"
+#: components/Blocks/HeroBlock/schema
+#: index
+msgid "Hero Block"
+msgstr ""
+
+#. Default: "Explanatory text or summary displayed below the title."
+#: components/Blocks/HeroBlock/schema
+msgid "Hero description description"
+msgstr ""
+
+#. Default: "Main highlighted title."
+#: components/Blocks/HeroBlock/schema
+msgid "Hero title description"
+msgstr ""
+
+#. Default: "Hide image"
+#: components/Blocks/HeroBlock/schema
+msgid "Hide image"
+msgstr ""
+
+#. Default: "Highlight"
+#: index
+msgid "Highlight"
+msgstr ""
+
+#. Default: "Highlighted item"
+#: components/Blocks/HeroBlock/schema
+msgid "Highlighted item"
+msgstr ""
+
+#. Default: "Select a content item to pull its data automatically (title, description, image)"
+#: components/Blocks/HeroBlock/schema
+msgid "Highlighted item description"
+msgstr ""
+
+#. Default: "Id"
+#: components/Controlpanels/Themes/messages
+msgid "Id"
+msgstr ""
+
+#. Default: "Image"
+#: components/Blocks/HeroBlock/schema
+msgid "Image"
+msgstr ""
+
+#. Default: "Image fit"
+#: components/Blocks/HeroBlock/schema
+msgid "Image fit"
+msgstr ""
+
+#. Default: "\"Cover\" fills the whole available space, cropping the edges of the image if needed. \"Contain\" fits the entire image inside the space, which may leave empty bands at the sides."
+#: components/Blocks/HeroBlock/schema
+msgid "Image fit description"
+msgstr ""
+
+#. Default: "Image size"
+#: components/Blocks/MainImageBlock/schema
+msgid "Image size"
+msgstr ""
+
+#. Default: "Image size / empty space"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size / empty space"
+msgstr ""
+
+#. Default: "Controls the width reserved for the image (even when there is none), which in turn sets the space for the text."
+#: components/Blocks/HeroBlock/schema
+msgid "Image size description"
+msgstr ""
+
+#. Default: "50% (half)"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size half"
+msgstr ""
+
+#. Default: "0% (text full width)"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size none"
+msgstr ""
+
+#. Default: "Item batch size"
+#: components/Widgets/QuerystringWidget
+msgid "Item batch size"
+msgstr ""
+
+#. Default: "Items"
+#: components/Blocks/Listing/messages
+msgid "Items"
+msgstr ""
+
+#. Default: "Last modified"
+#: components/DocumentByLine/DocumentByLine
+msgid "Last modified"
+msgstr ""
+
+#. Default: "Layout"
+#: components/Blocks/HeroBlock/schema
+msgid "Layout"
+msgstr ""
+
+#. Default: "Left bottom"
+#: components/Blocks/Listing/schema
+msgid "Left bottom"
+msgstr ""
+
+#. Default: "Left center"
+#: components/Blocks/Listing/schema
+msgid "Left center"
+msgstr ""
+
+#. Default: "Left top"
+#: components/Blocks/Listing/schema
+msgid "Left top"
+msgstr ""
+
+#. Default: "Link settings"
+#: components/Blocks/MainImageBlock/schema
+msgid "Link settings"
+msgstr ""
+
+#. Default: "Link to"
+#: components/Blocks/MainImageBlock/schema
+msgid "Link to"
+msgstr ""
+
+#. Default: "Main Image"
+#: components/Blocks/MainImageBlock/schema
+#: index
+msgid "Main Image"
+msgstr ""
+
+#. Default: "Media Carousel"
+#: components/Blocks/Listing/messages
+#: index
+msgid "Media Carousel"
+msgstr ""
+
+#. Default: "Media fit (object-fit)"
+#: components/Blocks/Listing/schema
+msgid "Media fit (object-fit)"
+msgstr ""
+
+#. Default: "Name"
+#: components/Controlpanels/Themes/messages
+msgid "Name"
+msgstr ""
+
+#. Default: "Next"
+#: components/Blocks/Listing/messages
+msgid "Next"
+msgstr ""
+
+#. Default: "Next Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Next Page"
+msgstr ""
+
+#. Default: "No items found in this container."
+#: components/Blocks/Listing/ListingBody
+msgid "No items found in this container."
+msgstr ""
+
+#. Default: "No preview image found on this page. Add a preview image to the page to display it in this block."
+#: components/Blocks/MainImageBlock/View
+msgid "No preview image found on this page."
+msgstr ""
+
+#. Default: "No selection"
+#: components/Widgets/QuerystringWidget
+msgid "No selection"
+msgstr ""
+
+#. Default: "Number of columns"
+#: components/Blocks/Listing/schema
+msgid "Number of columns"
+msgstr ""
+
+#. Default: "Offset"
+#: components/Widgets/QuerystringWidget
+msgid "Offset"
+msgstr ""
+
+#. Default: "Open in a new tab"
+#: components/Blocks/MainImageBlock/schema
+msgid "Open in a new tab"
+msgstr ""
+
+#. Default: "Open menu"
+#: components/Navigation/SCNavigation/MenuItem
+msgid "Open menu"
+msgstr ""
+
+#. Default: "Overwrite content"
+#: components/Blocks/HeroBlock/schema
+msgid "Overwrite content"
+msgstr ""
+
+#. Default: "Check to customise the title, description and image instead of pulling them automatically from the highlighted item"
+#: components/Blocks/HeroBlock/schema
+msgid "Overwrite content description"
+msgstr ""
+
+#. Default: "Pagination Navigation"
+#: components/Blocks/Listing/ListingBody
+msgid "Pagination Navigation"
+msgstr ""
+
+#. Default: "Pagination Navigation for {headline}"
+#: components/Blocks/Listing/ListingBody
+msgid "Pagination Navigation for {headline}"
+msgstr ""
+
+#. Default: "Paragraph (P)"
+#: components/Blocks/HeroBlock/schema
+msgid "Paragraph (P)"
+msgstr ""
+
+#. Default: "Pause carousel"
+#: components/Blocks/Listing/messages
+msgid "Pause carousel"
+msgstr ""
+
+#. Default: "Play carousel"
+#: components/Blocks/Listing/messages
+msgid "Play carousel"
+msgstr ""
+
+#. Default: "Position (object-position)"
+#: components/Blocks/Listing/schema
+msgid "Position (object-position)"
+msgstr ""
+
+#. Default: "Previous"
+#: components/Blocks/Listing/messages
+msgid "Previous"
+msgstr ""
+
+#. Default: "Previous Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Previous Page"
+msgstr ""
+
+#. Default: "Primary"
+#: index
+msgid "Primary"
+msgstr ""
+
+#. Default: "Published"
+#: components/DocumentByLine/DocumentByLine
+msgid "Published"
+msgstr ""
+
+#. Default: "Quote"
+#: components/Blocks/QuoteBlock/schema
+#: index
+msgid "Quote"
+msgstr ""
+
+#. Default: "Result"
+#: components/Blocks/Listing/ListingBody
+msgid "Result"
+msgstr ""
+
+#. Default: "Results limit"
+#: components/Widgets/QuerystringWidget
+msgid "Results limit"
+msgstr ""
+
+#. Default: "Reversed order"
+#: components/Widgets/QuerystringWidget
+msgid "Reversed order"
+msgstr ""
+
+#. Default: "Right bottom"
+#: components/Blocks/Listing/schema
+msgid "Right bottom"
+msgstr ""
+
+#. Default: "Right center"
+#: components/Blocks/Listing/schema
+msgid "Right center"
+msgstr ""
+
+#. Default: "Right top"
+#: components/Blocks/Listing/schema
+msgid "Right top"
+msgstr ""
+
+#. Default: "Save"
+#: components/Controlpanels/Themes/messages
+msgid "Save"
+msgstr ""
+
+#. Default: "Section"
+#: components/Navigation/SCNavigation/SubMenuSection
+msgid "Section"
+msgstr ""
+
+#. Default: "Select a highlighted item"
+#: components/Blocks/HeroBlock/useHeroBlockContent
+msgid "Select a highlighted item"
+msgstr ""
+
+#. Default: "Show author"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show author"
+msgstr ""
+
+#. Default: "Show button"
+#: components/Blocks/HeroBlock/schema
+msgid "Show button"
+msgstr ""
+
+#. Default: "Show date"
+#: components/Blocks/HeroBlock/schema
+msgid "Show date"
+msgstr ""
+
+#. Default: "Show last modification date"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show last modification date"
+msgstr ""
+
+#. Default: "Show publication date"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show publication date"
+msgstr ""
+
+#. Default: "Sort on"
+#: components/Widgets/QuerystringWidget
+msgid "Sort on"
+msgstr ""
+
+#. Default: "Styling"
+#: components/Blocks/MainImageBlock/schema
+msgid "Styling"
+msgstr ""
+
+#. Default: "Tags"
+#: components/Blocks/HeroBlock/schema
+msgid "Tags"
+msgstr ""
+
+#. Default: "Text side"
+#: components/Blocks/HeroBlock/schema
+msgid "Text side"
+msgstr ""
+
+#. Default: "Theme deleted"
+#: components/Controlpanels/Themes/messages
+msgid "Theme deleted"
+msgstr ""
+
+#. Default: "Themes"
+#: components/Controlpanels/Themes/messages
+msgid "Themes"
+msgstr ""
+
+#. Default: "Title"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Title"
+msgstr ""
+
+#. Default: "Title element"
+#: components/Blocks/HeroBlock/schema
+msgid "Title element"
+msgstr ""
+
+#. Default: "H1 is the main page title, H2 the secondary title and H3 the tertiary one. P renders the title as a paragraph."
+#: components/Blocks/HeroBlock/schema
+msgid "Title element description"
+msgstr ""
+
+#. Default: "Transparent"
+#: components/Blocks/QuoteBlock/schema
+msgid "Transparent"
+msgstr ""
+
+#. Default: "Video"
+#: components/Blocks/Listing/messages
+msgid "Video"
+msgstr ""
+
+#. Default: "Decrease font size"
+#: components/AccessibilityControls/FontSizeControls
+msgid "accessibilityDecreaseFontSize"
+msgstr ""
+
+#. Default: "Read on hover"
+#: components/AccessibilityControls/HoverReaderControls
+msgid "accessibilityHoverReaderLabel"
+msgstr ""
+
+#. Default: "Increase font size"
+#: components/AccessibilityControls/FontSizeControls
+msgid "accessibilityIncreaseFontSize"
+msgstr ""
+
+#. Default: "Reader speed"
+#: components/AccessibilityControls/HoverReaderControls
+msgid "accessibilitySpeedLabel"
+msgstr ""
+
+#. Default: "Dark"
+#: components/ThemeToggle/ThemeToggle
+msgid "darkTheme"
+msgstr ""
+
+#. Default: "Toggle menu"
+#: components/DropdownMenu/DropdownMenu
+msgid "dropdownMenuToggle"
+msgstr ""
+
+#. Default: "Accessibility menu"
+#: components/HeaderBar/HeaderBar
+msgid "headerBarAccessibilityMenu"
+msgstr ""
+
+#. Default: "MENU"
+#: components/HeaderBar/HeaderBar
+msgid "headerBarMenuLabel"
+msgstr ""
+
+#. Default: "High contrast"
+#: components/ThemeToggle/ThemeToggle
+msgid "highContrastTheme"
+msgstr ""
+
+#. Default: "Light"
+#: components/ThemeToggle/ThemeToggle
+msgid "lightTheme"
+msgstr ""
+
+#. Default: "Loading"
+#: components/Blocks/Listing/ListingBody
+msgid "loading"
+msgstr ""
+
+#. Default: "of"
+#: components/Blocks/Listing/ListingBody
+msgid "of"
+msgstr ""
+
+#. Default: "Toggle theme"
+#: components/ThemeToggle/ThemeToggle
+msgid "toggleTheme"
+msgstr ""
+
+#. Default: "{count, plural, one {# column} other {# columns}}"
+#: components/Blocks/Listing/schema
+msgid "{count, plural, one {# column} other {# columns}}"
+msgstr ""
diff --git a/frontend/packages/volto-light-theme/locales/en/LC_MESSAGES/volto.po b/frontend/packages/volto-light-theme/locales/en/LC_MESSAGES/volto.po
index 38c369e..2d1b687 100644
--- a/frontend/packages/volto-light-theme/locales/en/LC_MESSAGES/volto.po
+++ b/frontend/packages/volto-light-theme/locales/en/LC_MESSAGES/volto.po
@@ -10,3 +10,749 @@ msgstr ""
 "Content-Type: \n"
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
+
+#. Default: "Accessibility options"
+#: components/Header/MobileHeader/MobileTools
+msgid "Accessibility options"
+msgstr ""
+
+#. Default: "Actions"
+#: components/Controlpanels/Themes/messages
+msgid "Actions"
+msgstr ""
+
+#. Default: "Add theme"
+#: components/Controlpanels/Themes/messages
+msgid "Add theme"
+msgstr ""
+
+#. Default: "Alignment"
+#: components/Blocks/Listing/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Alignment"
+msgstr ""
+
+#. Default: "Alt Text"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt Text"
+msgstr ""
+
+#. Default: "Leave empty if the image is purely decorative"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt text hint"
+msgstr ""
+
+#. Default: "Describe the purpose of the image"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt text hint link text"
+msgstr ""
+
+#. Default: "Attached Card"
+#: index
+msgid "Attached Card"
+msgstr ""
+
+#. Default: "Author / Source"
+#: components/Blocks/QuoteBlock/schema
+msgid "Author / Source"
+msgstr ""
+
+#. Default: "Auto-advance"
+#: components/Blocks/Listing/schema
+msgid "Auto-advance"
+msgstr ""
+
+#. Default: "Auto-advance interval (ms)"
+#: components/Blocks/Listing/schema
+msgid "Auto-advance interval (ms)"
+msgstr ""
+
+#. Default: "Back"
+#: components/Controlpanels/Themes/messages
+msgid "Back"
+msgstr ""
+
+#. Default: "Background color"
+#: components/Blocks/schema
+msgid "Background color"
+msgstr ""
+
+#. Default: "Background style"
+#: components/Blocks/QuoteBlock/schema
+msgid "Background style"
+msgstr ""
+
+#. Default: "Block Width"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Block Width"
+msgstr ""
+
+#. Default: "Brand"
+#: index
+msgid "Brand"
+msgstr ""
+
+#. Default: "Button link"
+#: components/Blocks/HeroBlock/schema
+msgid "Button link"
+msgstr ""
+
+#. Default: "Button text"
+#: components/Blocks/HeroBlock/schema
+msgid "Button text"
+msgstr ""
+
+#. Default: "The text shown inside the button (e.g. \"Read more\")."
+#: components/Blocks/HeroBlock/schema
+msgid "Button text description"
+msgstr ""
+
+#. Default: "By"
+#: components/DocumentByLine/DocumentByLine
+msgid "By"
+msgstr ""
+
+#. Default: "Byline"
+#: components/Blocks/DocumentByLine/schema
+#: index
+msgid "Byline"
+msgstr ""
+
+#. Default: "Call to Action"
+#: components/Blocks/HeroBlock/schema
+msgid "Call to Action"
+msgstr ""
+
+#. Default: "Cancel"
+#: components/Controlpanels/Themes/messages
+msgid "Cancel"
+msgstr ""
+
+#. Default: "Carousel"
+#: components/Blocks/Listing/messages
+#: components/Blocks/Listing/schema
+#: index
+msgid "Carousel"
+msgstr ""
+
+#. Default: "Carousel controls"
+#: components/Blocks/Listing/messages
+msgid "Carousel controls"
+msgstr ""
+
+#. Default: "Center"
+#: components/Blocks/Listing/schema
+msgid "Center"
+msgstr ""
+
+#. Default: "Center bottom"
+#: components/Blocks/Listing/schema
+msgid "Center bottom"
+msgstr ""
+
+#. Default: "Center top"
+#: components/Blocks/Listing/schema
+msgid "Center top"
+msgstr ""
+
+#. Default: "Changes saved"
+#: components/Controlpanels/Themes/messages
+msgid "Changes saved"
+msgstr ""
+
+#. Default: "Close menu"
+#: components/Navigation/SCNavigation/SubMenu
+msgid "Close menu"
+msgstr ""
+
+#. Default: "Colours"
+#: components/Controlpanels/Themes/messages
+msgid "Colours"
+msgstr ""
+
+#. Default: "Contain"
+#: components/Blocks/HeroBlock/schema
+msgid "Contain"
+msgstr ""
+
+#. Default: "Content"
+#: components/Blocks/HeroBlock/schema
+msgid "Content"
+msgstr ""
+
+#. Default: "Cover"
+#: components/Blocks/HeroBlock/schema
+msgid "Cover"
+msgstr ""
+
+#. Default: "Criteria"
+#: components/Widgets/QuerystringWidget
+msgid "Criteria"
+msgstr ""
+
+#. Default: "Delete"
+#: components/Controlpanels/Themes/messages
+msgid "Delete"
+msgstr ""
+
+#. Default: "Delete this theme? Content still using it keeps the stored id but falls back to the default colours."
+#: components/Controlpanels/Themes/messages
+msgid "Delete this theme?"
+msgstr ""
+
+#. Default: "Description"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Description"
+msgstr ""
+
+#. Default: "Duplicate"
+#: components/Controlpanels/Themes/messages
+msgid "Duplicate"
+msgstr ""
+
+#. Default: "Duplicate of {name}"
+#: components/Controlpanels/Themes/messages
+msgid "Duplicate of {name}"
+msgstr ""
+
+#. Default: "Edit"
+#: components/Controlpanels/Themes/messages
+msgid "Edit"
+msgstr ""
+
+#. Default: "This is a Hero Block. Add an item in the sidebar to fill it automatically."
+#: components/Blocks/HeroBlock/useHeroBlockContent
+msgid "Empty hero block placeholder"
+msgstr ""
+
+#. Default: "Error"
+#: components/Controlpanels/Themes/messages
+msgid "Error"
+msgstr ""
+
+#. Default: "File type"
+#: components/Blocks/HeroBlock/schema
+msgid "File type"
+msgstr ""
+
+#. Default: "E.g. PDF, Report, Article"
+#: components/Blocks/HeroBlock/schema
+msgid "File type description"
+msgstr ""
+
+#. Default: "Filled"
+#: components/Blocks/QuoteBlock/schema
+msgid "Filled"
+msgstr ""
+
+#. Default: "Flex / Decorative"
+#: index
+msgid "Flex / Decorative"
+msgstr ""
+
+#. Default: "Footer text"
+#: components/Blocks/HeroBlock/schema
+msgid "Footer text"
+msgstr ""
+
+#. Default: "Additional information displayed at the foot of the block."
+#: components/Blocks/HeroBlock/schema
+msgid "Footer text description"
+msgstr ""
+
+#. Default: "Full width"
+#: components/Blocks/HeroBlock/schema
+msgid "Full width"
+msgstr ""
+
+#. Default: "Let the text span the whole block when there is no image to show."
+#: components/Blocks/HeroBlock/schema
+msgid "Full width description"
+msgstr ""
+
+#. Default: "Go to item {index}"
+#: components/Blocks/Listing/messages
+msgid "Go to item {index}"
+msgstr ""
+
+#. Default: "Header text"
+#: components/Blocks/HeroBlock/schema
+msgid "Header text"
+msgstr ""
+
+#. Default: "Small text displayed above the main title."
+#: components/Blocks/HeroBlock/schema
+msgid "Header text description"
+msgstr ""
+
+#. Default: "Headline button link"
+#: components/Blocks/Listing/schema
+msgid "Headline button link"
+msgstr ""
+
+#. Default: "Headline button text"
+#: components/Blocks/Listing/schema
+msgid "Headline button text"
+msgstr ""
+
+#. Default: "Height (px)"
+#: components/Blocks/Listing/schema
+msgid "Height (px)"
+msgstr ""
+
+#. Default: "Hero Block"
+#: components/Blocks/HeroBlock/schema
+#: index
+msgid "Hero Block"
+msgstr ""
+
+#. Default: "Explanatory text or summary displayed below the title."
+#: components/Blocks/HeroBlock/schema
+msgid "Hero description description"
+msgstr ""
+
+#. Default: "Main highlighted title."
+#: components/Blocks/HeroBlock/schema
+msgid "Hero title description"
+msgstr ""
+
+#. Default: "Hide image"
+#: components/Blocks/HeroBlock/schema
+msgid "Hide image"
+msgstr ""
+
+#. Default: "Highlight"
+#: index
+msgid "Highlight"
+msgstr ""
+
+#. Default: "Highlighted item"
+#: components/Blocks/HeroBlock/schema
+msgid "Highlighted item"
+msgstr ""
+
+#. Default: "Select a content item to pull its data automatically (title, description, image)"
+#: components/Blocks/HeroBlock/schema
+msgid "Highlighted item description"
+msgstr ""
+
+#. Default: "Id"
+#: components/Controlpanels/Themes/messages
+msgid "Id"
+msgstr ""
+
+#. Default: "Image"
+#: components/Blocks/HeroBlock/schema
+msgid "Image"
+msgstr ""
+
+#. Default: "Image fit"
+#: components/Blocks/HeroBlock/schema
+msgid "Image fit"
+msgstr ""
+
+#. Default: "\"Cover\" fills the whole available space, cropping the edges of the image if needed. \"Contain\" fits the entire image inside the space, which may leave empty bands at the sides."
+#: components/Blocks/HeroBlock/schema
+msgid "Image fit description"
+msgstr ""
+
+#. Default: "Image size"
+#: components/Blocks/MainImageBlock/schema
+msgid "Image size"
+msgstr ""
+
+#. Default: "Image size / empty space"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size / empty space"
+msgstr ""
+
+#. Default: "Controls the width reserved for the image (even when there is none), which in turn sets the space for the text."
+#: components/Blocks/HeroBlock/schema
+msgid "Image size description"
+msgstr ""
+
+#. Default: "50% (half)"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size half"
+msgstr ""
+
+#. Default: "0% (text full width)"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size none"
+msgstr ""
+
+#. Default: "Item batch size"
+#: components/Widgets/QuerystringWidget
+msgid "Item batch size"
+msgstr ""
+
+#. Default: "Items"
+#: components/Blocks/Listing/messages
+msgid "Items"
+msgstr ""
+
+#. Default: "Last modified"
+#: components/DocumentByLine/DocumentByLine
+msgid "Last modified"
+msgstr ""
+
+#. Default: "Layout"
+#: components/Blocks/HeroBlock/schema
+msgid "Layout"
+msgstr ""
+
+#. Default: "Left bottom"
+#: components/Blocks/Listing/schema
+msgid "Left bottom"
+msgstr ""
+
+#. Default: "Left center"
+#: components/Blocks/Listing/schema
+msgid "Left center"
+msgstr ""
+
+#. Default: "Left top"
+#: components/Blocks/Listing/schema
+msgid "Left top"
+msgstr ""
+
+#. Default: "Link settings"
+#: components/Blocks/MainImageBlock/schema
+msgid "Link settings"
+msgstr ""
+
+#. Default: "Link to"
+#: components/Blocks/MainImageBlock/schema
+msgid "Link to"
+msgstr ""
+
+#. Default: "Main Image"
+#: components/Blocks/MainImageBlock/schema
+#: index
+msgid "Main Image"
+msgstr ""
+
+#. Default: "Media Carousel"
+#: components/Blocks/Listing/messages
+#: index
+msgid "Media Carousel"
+msgstr ""
+
+#. Default: "Media fit (object-fit)"
+#: components/Blocks/Listing/schema
+msgid "Media fit (object-fit)"
+msgstr ""
+
+#. Default: "Name"
+#: components/Controlpanels/Themes/messages
+msgid "Name"
+msgstr ""
+
+#. Default: "Next"
+#: components/Blocks/Listing/messages
+msgid "Next"
+msgstr ""
+
+#. Default: "Next Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Next Page"
+msgstr ""
+
+#. Default: "No items found in this container."
+#: components/Blocks/Listing/ListingBody
+msgid "No items found in this container."
+msgstr ""
+
+#. Default: "No preview image found on this page. Add a preview image to the page to display it in this block."
+#: components/Blocks/MainImageBlock/View
+msgid "No preview image found on this page."
+msgstr ""
+
+#. Default: "No selection"
+#: components/Widgets/QuerystringWidget
+msgid "No selection"
+msgstr ""
+
+#. Default: "Number of columns"
+#: components/Blocks/Listing/schema
+msgid "Number of columns"
+msgstr ""
+
+#. Default: "Offset"
+#: components/Widgets/QuerystringWidget
+msgid "Offset"
+msgstr ""
+
+#. Default: "Open in a new tab"
+#: components/Blocks/MainImageBlock/schema
+msgid "Open in a new tab"
+msgstr ""
+
+#. Default: "Open menu"
+#: components/Navigation/SCNavigation/MenuItem
+msgid "Open menu"
+msgstr ""
+
+#. Default: "Overwrite content"
+#: components/Blocks/HeroBlock/schema
+msgid "Overwrite content"
+msgstr ""
+
+#. Default: "Check to customise the title, description and image instead of pulling them automatically from the highlighted item"
+#: components/Blocks/HeroBlock/schema
+msgid "Overwrite content description"
+msgstr ""
+
+#. Default: "Pagination Navigation"
+#: components/Blocks/Listing/ListingBody
+msgid "Pagination Navigation"
+msgstr ""
+
+#. Default: "Pagination Navigation for {headline}"
+#: components/Blocks/Listing/ListingBody
+msgid "Pagination Navigation for {headline}"
+msgstr ""
+
+#. Default: "Paragraph (P)"
+#: components/Blocks/HeroBlock/schema
+msgid "Paragraph (P)"
+msgstr ""
+
+#. Default: "Pause carousel"
+#: components/Blocks/Listing/messages
+msgid "Pause carousel"
+msgstr ""
+
+#. Default: "Play carousel"
+#: components/Blocks/Listing/messages
+msgid "Play carousel"
+msgstr ""
+
+#. Default: "Position (object-position)"
+#: components/Blocks/Listing/schema
+msgid "Position (object-position)"
+msgstr ""
+
+#. Default: "Previous"
+#: components/Blocks/Listing/messages
+msgid "Previous"
+msgstr ""
+
+#. Default: "Previous Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Previous Page"
+msgstr ""
+
+#. Default: "Primary"
+#: index
+msgid "Primary"
+msgstr ""
+
+#. Default: "Published"
+#: components/DocumentByLine/DocumentByLine
+msgid "Published"
+msgstr ""
+
+#. Default: "Quote"
+#: components/Blocks/QuoteBlock/schema
+#: index
+msgid "Quote"
+msgstr ""
+
+#. Default: "Result"
+#: components/Blocks/Listing/ListingBody
+msgid "Result"
+msgstr ""
+
+#. Default: "Results limit"
+#: components/Widgets/QuerystringWidget
+msgid "Results limit"
+msgstr ""
+
+#. Default: "Reversed order"
+#: components/Widgets/QuerystringWidget
+msgid "Reversed order"
+msgstr ""
+
+#. Default: "Right bottom"
+#: components/Blocks/Listing/schema
+msgid "Right bottom"
+msgstr ""
+
+#. Default: "Right center"
+#: components/Blocks/Listing/schema
+msgid "Right center"
+msgstr ""
+
+#. Default: "Right top"
+#: components/Blocks/Listing/schema
+msgid "Right top"
+msgstr ""
+
+#. Default: "Save"
+#: components/Controlpanels/Themes/messages
+msgid "Save"
+msgstr ""
+
+#. Default: "Section"
+#: components/Navigation/SCNavigation/SubMenuSection
+msgid "Section"
+msgstr ""
+
+#. Default: "Select a highlighted item"
+#: components/Blocks/HeroBlock/useHeroBlockContent
+msgid "Select a highlighted item"
+msgstr ""
+
+#. Default: "Show author"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show author"
+msgstr ""
+
+#. Default: "Show button"
+#: components/Blocks/HeroBlock/schema
+msgid "Show button"
+msgstr ""
+
+#. Default: "Show date"
+#: components/Blocks/HeroBlock/schema
+msgid "Show date"
+msgstr ""
+
+#. Default: "Show last modification date"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show last modification date"
+msgstr ""
+
+#. Default: "Show publication date"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show publication date"
+msgstr ""
+
+#. Default: "Sort on"
+#: components/Widgets/QuerystringWidget
+msgid "Sort on"
+msgstr ""
+
+#. Default: "Styling"
+#: components/Blocks/MainImageBlock/schema
+msgid "Styling"
+msgstr ""
+
+#. Default: "Tags"
+#: components/Blocks/HeroBlock/schema
+msgid "Tags"
+msgstr ""
+
+#. Default: "Text side"
+#: components/Blocks/HeroBlock/schema
+msgid "Text side"
+msgstr ""
+
+#. Default: "Theme deleted"
+#: components/Controlpanels/Themes/messages
+msgid "Theme deleted"
+msgstr ""
+
+#. Default: "Themes"
+#: components/Controlpanels/Themes/messages
+msgid "Themes"
+msgstr ""
+
+#. Default: "Title"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Title"
+msgstr ""
+
+#. Default: "Title element"
+#: components/Blocks/HeroBlock/schema
+msgid "Title element"
+msgstr ""
+
+#. Default: "H1 is the main page title, H2 the secondary title and H3 the tertiary one. P renders the title as a paragraph."
+#: components/Blocks/HeroBlock/schema
+msgid "Title element description"
+msgstr ""
+
+#. Default: "Transparent"
+#: components/Blocks/QuoteBlock/schema
+msgid "Transparent"
+msgstr ""
+
+#. Default: "Video"
+#: components/Blocks/Listing/messages
+msgid "Video"
+msgstr ""
+
+#. Default: "Decrease font size"
+#: components/AccessibilityControls/FontSizeControls
+msgid "accessibilityDecreaseFontSize"
+msgstr ""
+
+#. Default: "Read on hover"
+#: components/AccessibilityControls/HoverReaderControls
+msgid "accessibilityHoverReaderLabel"
+msgstr ""
+
+#. Default: "Increase font size"
+#: components/AccessibilityControls/FontSizeControls
+msgid "accessibilityIncreaseFontSize"
+msgstr ""
+
+#. Default: "Reader speed"
+#: components/AccessibilityControls/HoverReaderControls
+msgid "accessibilitySpeedLabel"
+msgstr ""
+
+#. Default: "Dark"
+#: components/ThemeToggle/ThemeToggle
+msgid "darkTheme"
+msgstr ""
+
+#. Default: "Toggle menu"
+#: components/DropdownMenu/DropdownMenu
+msgid "dropdownMenuToggle"
+msgstr ""
+
+#. Default: "Accessibility menu"
+#: components/HeaderBar/HeaderBar
+msgid "headerBarAccessibilityMenu"
+msgstr ""
+
+#. Default: "MENU"
+#: components/HeaderBar/HeaderBar
+msgid "headerBarMenuLabel"
+msgstr ""
+
+#. Default: "High contrast"
+#: components/ThemeToggle/ThemeToggle
+msgid "highContrastTheme"
+msgstr ""
+
+#. Default: "Light"
+#: components/ThemeToggle/ThemeToggle
+msgid "lightTheme"
+msgstr ""
+
+#. Default: "Loading"
+#: components/Blocks/Listing/ListingBody
+msgid "loading"
+msgstr ""
+
+#. Default: "of"
+#: components/Blocks/Listing/ListingBody
+msgid "of"
+msgstr ""
+
+#. Default: "Toggle theme"
+#: components/ThemeToggle/ThemeToggle
+msgid "toggleTheme"
+msgstr ""
+
+#. Default: "{count, plural, one {# column} other {# columns}}"
+#: components/Blocks/Listing/schema
+msgid "{count, plural, one {# column} other {# columns}}"
+msgstr ""
diff --git a/frontend/packages/volto-light-theme/locales/es/LC_MESSAGES/volto.po b/frontend/packages/volto-light-theme/locales/es/LC_MESSAGES/volto.po
index 7288b05..7149f13 100644
--- a/frontend/packages/volto-light-theme/locales/es/LC_MESSAGES/volto.po
+++ b/frontend/packages/volto-light-theme/locales/es/LC_MESSAGES/volto.po
@@ -17,3 +17,749 @@ msgstr ""
 "Domain: volto\n"
 "X-Is-Fallback-For: es-ar es-bo es-cl es-co es-cr es-do es-ec es-es es-sv es-gt es-hn es-mx es-ni es-pa es-py es-pe es-pr es-us es-uy es-ve\n"
 "X-Generator: Poedit 2.2.1\n"
+
+#. Default: "Accessibility options"
+#: components/Header/MobileHeader/MobileTools
+msgid "Accessibility options"
+msgstr ""
+
+#. Default: "Actions"
+#: components/Controlpanels/Themes/messages
+msgid "Actions"
+msgstr ""
+
+#. Default: "Add theme"
+#: components/Controlpanels/Themes/messages
+msgid "Add theme"
+msgstr ""
+
+#. Default: "Alignment"
+#: components/Blocks/Listing/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Alignment"
+msgstr ""
+
+#. Default: "Alt Text"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt Text"
+msgstr ""
+
+#. Default: "Leave empty if the image is purely decorative"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt text hint"
+msgstr ""
+
+#. Default: "Describe the purpose of the image"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt text hint link text"
+msgstr ""
+
+#. Default: "Attached Card"
+#: index
+msgid "Attached Card"
+msgstr ""
+
+#. Default: "Author / Source"
+#: components/Blocks/QuoteBlock/schema
+msgid "Author / Source"
+msgstr ""
+
+#. Default: "Auto-advance"
+#: components/Blocks/Listing/schema
+msgid "Auto-advance"
+msgstr ""
+
+#. Default: "Auto-advance interval (ms)"
+#: components/Blocks/Listing/schema
+msgid "Auto-advance interval (ms)"
+msgstr ""
+
+#. Default: "Back"
+#: components/Controlpanels/Themes/messages
+msgid "Back"
+msgstr ""
+
+#. Default: "Background color"
+#: components/Blocks/schema
+msgid "Background color"
+msgstr ""
+
+#. Default: "Background style"
+#: components/Blocks/QuoteBlock/schema
+msgid "Background style"
+msgstr ""
+
+#. Default: "Block Width"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Block Width"
+msgstr ""
+
+#. Default: "Brand"
+#: index
+msgid "Brand"
+msgstr ""
+
+#. Default: "Button link"
+#: components/Blocks/HeroBlock/schema
+msgid "Button link"
+msgstr ""
+
+#. Default: "Button text"
+#: components/Blocks/HeroBlock/schema
+msgid "Button text"
+msgstr ""
+
+#. Default: "The text shown inside the button (e.g. \"Read more\")."
+#: components/Blocks/HeroBlock/schema
+msgid "Button text description"
+msgstr ""
+
+#. Default: "By"
+#: components/DocumentByLine/DocumentByLine
+msgid "By"
+msgstr ""
+
+#. Default: "Byline"
+#: components/Blocks/DocumentByLine/schema
+#: index
+msgid "Byline"
+msgstr ""
+
+#. Default: "Call to Action"
+#: components/Blocks/HeroBlock/schema
+msgid "Call to Action"
+msgstr ""
+
+#. Default: "Cancel"
+#: components/Controlpanels/Themes/messages
+msgid "Cancel"
+msgstr ""
+
+#. Default: "Carousel"
+#: components/Blocks/Listing/messages
+#: components/Blocks/Listing/schema
+#: index
+msgid "Carousel"
+msgstr ""
+
+#. Default: "Carousel controls"
+#: components/Blocks/Listing/messages
+msgid "Carousel controls"
+msgstr ""
+
+#. Default: "Center"
+#: components/Blocks/Listing/schema
+msgid "Center"
+msgstr ""
+
+#. Default: "Center bottom"
+#: components/Blocks/Listing/schema
+msgid "Center bottom"
+msgstr ""
+
+#. Default: "Center top"
+#: components/Blocks/Listing/schema
+msgid "Center top"
+msgstr ""
+
+#. Default: "Changes saved"
+#: components/Controlpanels/Themes/messages
+msgid "Changes saved"
+msgstr ""
+
+#. Default: "Close menu"
+#: components/Navigation/SCNavigation/SubMenu
+msgid "Close menu"
+msgstr ""
+
+#. Default: "Colours"
+#: components/Controlpanels/Themes/messages
+msgid "Colours"
+msgstr ""
+
+#. Default: "Contain"
+#: components/Blocks/HeroBlock/schema
+msgid "Contain"
+msgstr ""
+
+#. Default: "Content"
+#: components/Blocks/HeroBlock/schema
+msgid "Content"
+msgstr ""
+
+#. Default: "Cover"
+#: components/Blocks/HeroBlock/schema
+msgid "Cover"
+msgstr ""
+
+#. Default: "Criteria"
+#: components/Widgets/QuerystringWidget
+msgid "Criteria"
+msgstr ""
+
+#. Default: "Delete"
+#: components/Controlpanels/Themes/messages
+msgid "Delete"
+msgstr ""
+
+#. Default: "Delete this theme? Content still using it keeps the stored id but falls back to the default colours."
+#: components/Controlpanels/Themes/messages
+msgid "Delete this theme?"
+msgstr ""
+
+#. Default: "Description"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Description"
+msgstr ""
+
+#. Default: "Duplicate"
+#: components/Controlpanels/Themes/messages
+msgid "Duplicate"
+msgstr ""
+
+#. Default: "Duplicate of {name}"
+#: components/Controlpanels/Themes/messages
+msgid "Duplicate of {name}"
+msgstr ""
+
+#. Default: "Edit"
+#: components/Controlpanels/Themes/messages
+msgid "Edit"
+msgstr ""
+
+#. Default: "This is a Hero Block. Add an item in the sidebar to fill it automatically."
+#: components/Blocks/HeroBlock/useHeroBlockContent
+msgid "Empty hero block placeholder"
+msgstr ""
+
+#. Default: "Error"
+#: components/Controlpanels/Themes/messages
+msgid "Error"
+msgstr ""
+
+#. Default: "File type"
+#: components/Blocks/HeroBlock/schema
+msgid "File type"
+msgstr ""
+
+#. Default: "E.g. PDF, Report, Article"
+#: components/Blocks/HeroBlock/schema
+msgid "File type description"
+msgstr ""
+
+#. Default: "Filled"
+#: components/Blocks/QuoteBlock/schema
+msgid "Filled"
+msgstr ""
+
+#. Default: "Flex / Decorative"
+#: index
+msgid "Flex / Decorative"
+msgstr ""
+
+#. Default: "Footer text"
+#: components/Blocks/HeroBlock/schema
+msgid "Footer text"
+msgstr ""
+
+#. Default: "Additional information displayed at the foot of the block."
+#: components/Blocks/HeroBlock/schema
+msgid "Footer text description"
+msgstr ""
+
+#. Default: "Full width"
+#: components/Blocks/HeroBlock/schema
+msgid "Full width"
+msgstr ""
+
+#. Default: "Let the text span the whole block when there is no image to show."
+#: components/Blocks/HeroBlock/schema
+msgid "Full width description"
+msgstr ""
+
+#. Default: "Go to item {index}"
+#: components/Blocks/Listing/messages
+msgid "Go to item {index}"
+msgstr ""
+
+#. Default: "Header text"
+#: components/Blocks/HeroBlock/schema
+msgid "Header text"
+msgstr ""
+
+#. Default: "Small text displayed above the main title."
+#: components/Blocks/HeroBlock/schema
+msgid "Header text description"
+msgstr ""
+
+#. Default: "Headline button link"
+#: components/Blocks/Listing/schema
+msgid "Headline button link"
+msgstr ""
+
+#. Default: "Headline button text"
+#: components/Blocks/Listing/schema
+msgid "Headline button text"
+msgstr ""
+
+#. Default: "Height (px)"
+#: components/Blocks/Listing/schema
+msgid "Height (px)"
+msgstr ""
+
+#. Default: "Hero Block"
+#: components/Blocks/HeroBlock/schema
+#: index
+msgid "Hero Block"
+msgstr ""
+
+#. Default: "Explanatory text or summary displayed below the title."
+#: components/Blocks/HeroBlock/schema
+msgid "Hero description description"
+msgstr ""
+
+#. Default: "Main highlighted title."
+#: components/Blocks/HeroBlock/schema
+msgid "Hero title description"
+msgstr ""
+
+#. Default: "Hide image"
+#: components/Blocks/HeroBlock/schema
+msgid "Hide image"
+msgstr ""
+
+#. Default: "Highlight"
+#: index
+msgid "Highlight"
+msgstr ""
+
+#. Default: "Highlighted item"
+#: components/Blocks/HeroBlock/schema
+msgid "Highlighted item"
+msgstr ""
+
+#. Default: "Select a content item to pull its data automatically (title, description, image)"
+#: components/Blocks/HeroBlock/schema
+msgid "Highlighted item description"
+msgstr ""
+
+#. Default: "Id"
+#: components/Controlpanels/Themes/messages
+msgid "Id"
+msgstr ""
+
+#. Default: "Image"
+#: components/Blocks/HeroBlock/schema
+msgid "Image"
+msgstr ""
+
+#. Default: "Image fit"
+#: components/Blocks/HeroBlock/schema
+msgid "Image fit"
+msgstr ""
+
+#. Default: "\"Cover\" fills the whole available space, cropping the edges of the image if needed. \"Contain\" fits the entire image inside the space, which may leave empty bands at the sides."
+#: components/Blocks/HeroBlock/schema
+msgid "Image fit description"
+msgstr ""
+
+#. Default: "Image size"
+#: components/Blocks/MainImageBlock/schema
+msgid "Image size"
+msgstr ""
+
+#. Default: "Image size / empty space"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size / empty space"
+msgstr ""
+
+#. Default: "Controls the width reserved for the image (even when there is none), which in turn sets the space for the text."
+#: components/Blocks/HeroBlock/schema
+msgid "Image size description"
+msgstr ""
+
+#. Default: "50% (half)"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size half"
+msgstr ""
+
+#. Default: "0% (text full width)"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size none"
+msgstr ""
+
+#. Default: "Item batch size"
+#: components/Widgets/QuerystringWidget
+msgid "Item batch size"
+msgstr ""
+
+#. Default: "Items"
+#: components/Blocks/Listing/messages
+msgid "Items"
+msgstr ""
+
+#. Default: "Last modified"
+#: components/DocumentByLine/DocumentByLine
+msgid "Last modified"
+msgstr ""
+
+#. Default: "Layout"
+#: components/Blocks/HeroBlock/schema
+msgid "Layout"
+msgstr ""
+
+#. Default: "Left bottom"
+#: components/Blocks/Listing/schema
+msgid "Left bottom"
+msgstr ""
+
+#. Default: "Left center"
+#: components/Blocks/Listing/schema
+msgid "Left center"
+msgstr ""
+
+#. Default: "Left top"
+#: components/Blocks/Listing/schema
+msgid "Left top"
+msgstr ""
+
+#. Default: "Link settings"
+#: components/Blocks/MainImageBlock/schema
+msgid "Link settings"
+msgstr ""
+
+#. Default: "Link to"
+#: components/Blocks/MainImageBlock/schema
+msgid "Link to"
+msgstr ""
+
+#. Default: "Main Image"
+#: components/Blocks/MainImageBlock/schema
+#: index
+msgid "Main Image"
+msgstr ""
+
+#. Default: "Media Carousel"
+#: components/Blocks/Listing/messages
+#: index
+msgid "Media Carousel"
+msgstr ""
+
+#. Default: "Media fit (object-fit)"
+#: components/Blocks/Listing/schema
+msgid "Media fit (object-fit)"
+msgstr ""
+
+#. Default: "Name"
+#: components/Controlpanels/Themes/messages
+msgid "Name"
+msgstr ""
+
+#. Default: "Next"
+#: components/Blocks/Listing/messages
+msgid "Next"
+msgstr ""
+
+#. Default: "Next Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Next Page"
+msgstr ""
+
+#. Default: "No items found in this container."
+#: components/Blocks/Listing/ListingBody
+msgid "No items found in this container."
+msgstr ""
+
+#. Default: "No preview image found on this page. Add a preview image to the page to display it in this block."
+#: components/Blocks/MainImageBlock/View
+msgid "No preview image found on this page."
+msgstr ""
+
+#. Default: "No selection"
+#: components/Widgets/QuerystringWidget
+msgid "No selection"
+msgstr ""
+
+#. Default: "Number of columns"
+#: components/Blocks/Listing/schema
+msgid "Number of columns"
+msgstr ""
+
+#. Default: "Offset"
+#: components/Widgets/QuerystringWidget
+msgid "Offset"
+msgstr ""
+
+#. Default: "Open in a new tab"
+#: components/Blocks/MainImageBlock/schema
+msgid "Open in a new tab"
+msgstr ""
+
+#. Default: "Open menu"
+#: components/Navigation/SCNavigation/MenuItem
+msgid "Open menu"
+msgstr ""
+
+#. Default: "Overwrite content"
+#: components/Blocks/HeroBlock/schema
+msgid "Overwrite content"
+msgstr ""
+
+#. Default: "Check to customise the title, description and image instead of pulling them automatically from the highlighted item"
+#: components/Blocks/HeroBlock/schema
+msgid "Overwrite content description"
+msgstr ""
+
+#. Default: "Pagination Navigation"
+#: components/Blocks/Listing/ListingBody
+msgid "Pagination Navigation"
+msgstr ""
+
+#. Default: "Pagination Navigation for {headline}"
+#: components/Blocks/Listing/ListingBody
+msgid "Pagination Navigation for {headline}"
+msgstr ""
+
+#. Default: "Paragraph (P)"
+#: components/Blocks/HeroBlock/schema
+msgid "Paragraph (P)"
+msgstr ""
+
+#. Default: "Pause carousel"
+#: components/Blocks/Listing/messages
+msgid "Pause carousel"
+msgstr ""
+
+#. Default: "Play carousel"
+#: components/Blocks/Listing/messages
+msgid "Play carousel"
+msgstr ""
+
+#. Default: "Position (object-position)"
+#: components/Blocks/Listing/schema
+msgid "Position (object-position)"
+msgstr ""
+
+#. Default: "Previous"
+#: components/Blocks/Listing/messages
+msgid "Previous"
+msgstr ""
+
+#. Default: "Previous Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Previous Page"
+msgstr ""
+
+#. Default: "Primary"
+#: index
+msgid "Primary"
+msgstr ""
+
+#. Default: "Published"
+#: components/DocumentByLine/DocumentByLine
+msgid "Published"
+msgstr ""
+
+#. Default: "Quote"
+#: components/Blocks/QuoteBlock/schema
+#: index
+msgid "Quote"
+msgstr ""
+
+#. Default: "Result"
+#: components/Blocks/Listing/ListingBody
+msgid "Result"
+msgstr ""
+
+#. Default: "Results limit"
+#: components/Widgets/QuerystringWidget
+msgid "Results limit"
+msgstr ""
+
+#. Default: "Reversed order"
+#: components/Widgets/QuerystringWidget
+msgid "Reversed order"
+msgstr ""
+
+#. Default: "Right bottom"
+#: components/Blocks/Listing/schema
+msgid "Right bottom"
+msgstr ""
+
+#. Default: "Right center"
+#: components/Blocks/Listing/schema
+msgid "Right center"
+msgstr ""
+
+#. Default: "Right top"
+#: components/Blocks/Listing/schema
+msgid "Right top"
+msgstr ""
+
+#. Default: "Save"
+#: components/Controlpanels/Themes/messages
+msgid "Save"
+msgstr ""
+
+#. Default: "Section"
+#: components/Navigation/SCNavigation/SubMenuSection
+msgid "Section"
+msgstr ""
+
+#. Default: "Select a highlighted item"
+#: components/Blocks/HeroBlock/useHeroBlockContent
+msgid "Select a highlighted item"
+msgstr ""
+
+#. Default: "Show author"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show author"
+msgstr ""
+
+#. Default: "Show button"
+#: components/Blocks/HeroBlock/schema
+msgid "Show button"
+msgstr ""
+
+#. Default: "Show date"
+#: components/Blocks/HeroBlock/schema
+msgid "Show date"
+msgstr ""
+
+#. Default: "Show last modification date"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show last modification date"
+msgstr ""
+
+#. Default: "Show publication date"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show publication date"
+msgstr ""
+
+#. Default: "Sort on"
+#: components/Widgets/QuerystringWidget
+msgid "Sort on"
+msgstr ""
+
+#. Default: "Styling"
+#: components/Blocks/MainImageBlock/schema
+msgid "Styling"
+msgstr ""
+
+#. Default: "Tags"
+#: components/Blocks/HeroBlock/schema
+msgid "Tags"
+msgstr ""
+
+#. Default: "Text side"
+#: components/Blocks/HeroBlock/schema
+msgid "Text side"
+msgstr ""
+
+#. Default: "Theme deleted"
+#: components/Controlpanels/Themes/messages
+msgid "Theme deleted"
+msgstr ""
+
+#. Default: "Themes"
+#: components/Controlpanels/Themes/messages
+msgid "Themes"
+msgstr ""
+
+#. Default: "Title"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Title"
+msgstr ""
+
+#. Default: "Title element"
+#: components/Blocks/HeroBlock/schema
+msgid "Title element"
+msgstr ""
+
+#. Default: "H1 is the main page title, H2 the secondary title and H3 the tertiary one. P renders the title as a paragraph."
+#: components/Blocks/HeroBlock/schema
+msgid "Title element description"
+msgstr ""
+
+#. Default: "Transparent"
+#: components/Blocks/QuoteBlock/schema
+msgid "Transparent"
+msgstr ""
+
+#. Default: "Video"
+#: components/Blocks/Listing/messages
+msgid "Video"
+msgstr ""
+
+#. Default: "Decrease font size"
+#: components/AccessibilityControls/FontSizeControls
+msgid "accessibilityDecreaseFontSize"
+msgstr ""
+
+#. Default: "Read on hover"
+#: components/AccessibilityControls/HoverReaderControls
+msgid "accessibilityHoverReaderLabel"
+msgstr ""
+
+#. Default: "Increase font size"
+#: components/AccessibilityControls/FontSizeControls
+msgid "accessibilityIncreaseFontSize"
+msgstr ""
+
+#. Default: "Reader speed"
+#: components/AccessibilityControls/HoverReaderControls
+msgid "accessibilitySpeedLabel"
+msgstr ""
+
+#. Default: "Dark"
+#: components/ThemeToggle/ThemeToggle
+msgid "darkTheme"
+msgstr ""
+
+#. Default: "Toggle menu"
+#: components/DropdownMenu/DropdownMenu
+msgid "dropdownMenuToggle"
+msgstr ""
+
+#. Default: "Accessibility menu"
+#: components/HeaderBar/HeaderBar
+msgid "headerBarAccessibilityMenu"
+msgstr ""
+
+#. Default: "MENU"
+#: components/HeaderBar/HeaderBar
+msgid "headerBarMenuLabel"
+msgstr ""
+
+#. Default: "High contrast"
+#: components/ThemeToggle/ThemeToggle
+msgid "highContrastTheme"
+msgstr ""
+
+#. Default: "Light"
+#: components/ThemeToggle/ThemeToggle
+msgid "lightTheme"
+msgstr ""
+
+#. Default: "Loading"
+#: components/Blocks/Listing/ListingBody
+msgid "loading"
+msgstr ""
+
+#. Default: "of"
+#: components/Blocks/Listing/ListingBody
+msgid "of"
+msgstr ""
+
+#. Default: "Toggle theme"
+#: components/ThemeToggle/ThemeToggle
+msgid "toggleTheme"
+msgstr ""
+
+#. Default: "{count, plural, one {# column} other {# columns}}"
+#: components/Blocks/Listing/schema
+msgid "{count, plural, one {# column} other {# columns}}"
+msgstr ""
diff --git a/frontend/packages/volto-light-theme/locales/pt_BR/LC_MESSAGES/volto.po b/frontend/packages/volto-light-theme/locales/pt_BR/LC_MESSAGES/volto.po
index e01604d..83e5667 100644
--- a/frontend/packages/volto-light-theme/locales/pt_BR/LC_MESSAGES/volto.po
+++ b/frontend/packages/volto-light-theme/locales/pt_BR/LC_MESSAGES/volto.po
@@ -5,7 +5,7 @@ msgstr ""
 "POT-Creation-Date: 2023-04-06T16:01:32.969Z\n"
 "PO-Revision-Date: \n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
-"Language: \n"
+"Language: pt_BR\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -15,3 +15,749 @@ msgstr ""
 "Language-Name: Português do Brasil\n"
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
+
+#. Default: "Accessibility options"
+#: components/Header/MobileHeader/MobileTools
+msgid "Accessibility options"
+msgstr "Opções de acessibilidade"
+
+#. Default: "Actions"
+#: components/Controlpanels/Themes/messages
+msgid "Actions"
+msgstr "Ações"
+
+#. Default: "Add theme"
+#: components/Controlpanels/Themes/messages
+msgid "Add theme"
+msgstr "Adicionar tema"
+
+#. Default: "Alignment"
+#: components/Blocks/Listing/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Alignment"
+msgstr "Alinhamento"
+
+#. Default: "Alt Text"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt Text"
+msgstr "Texto alternativo"
+
+#. Default: "Leave empty if the image is purely decorative"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt text hint"
+msgstr "Deixe em branco se a imagem for puramente decorativa"
+
+#. Default: "Describe the purpose of the image"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt text hint link text"
+msgstr "Descreva o propósito da imagem"
+
+#. Default: "Attached Card"
+#: index
+msgid "Attached Card"
+msgstr "Card colado"
+
+#. Default: "Author / Source"
+#: components/Blocks/QuoteBlock/schema
+msgid "Author / Source"
+msgstr "Autor / Fonte"
+
+#. Default: "Auto-advance"
+#: components/Blocks/Listing/schema
+msgid "Auto-advance"
+msgstr "Auto-avanço"
+
+#. Default: "Auto-advance interval (ms)"
+#: components/Blocks/Listing/schema
+msgid "Auto-advance interval (ms)"
+msgstr "Intervalo do auto-avanço (ms)"
+
+#. Default: "Back"
+#: components/Controlpanels/Themes/messages
+msgid "Back"
+msgstr "Voltar"
+
+#. Default: "Background color"
+#: components/Blocks/schema
+msgid "Background color"
+msgstr "Cor de fundo"
+
+#. Default: "Background style"
+#: components/Blocks/QuoteBlock/schema
+msgid "Background style"
+msgstr "Estilo do fundo"
+
+#. Default: "Block Width"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Block Width"
+msgstr "Largura do bloco"
+
+#. Default: "Brand"
+#: index
+msgid "Brand"
+msgstr "Marca"
+
+#. Default: "Button link"
+#: components/Blocks/HeroBlock/schema
+msgid "Button link"
+msgstr "Link do botão"
+
+#. Default: "Button text"
+#: components/Blocks/HeroBlock/schema
+msgid "Button text"
+msgstr "Texto do botão"
+
+#. Default: "The text shown inside the button (e.g. \"Read more\")."
+#: components/Blocks/HeroBlock/schema
+msgid "Button text description"
+msgstr "O texto exibido dentro do botão (ex.: \"Saiba mais\")."
+
+#. Default: "By"
+#: components/DocumentByLine/DocumentByLine
+msgid "By"
+msgstr "Por"
+
+#. Default: "Byline"
+#: components/Blocks/DocumentByLine/schema
+#: index
+msgid "Byline"
+msgstr "Assinatura"
+
+#. Default: "Call to Action"
+#: components/Blocks/HeroBlock/schema
+msgid "Call to Action"
+msgstr "Chamada para ação"
+
+#. Default: "Cancel"
+#: components/Controlpanels/Themes/messages
+msgid "Cancel"
+msgstr "Cancelar"
+
+#. Default: "Carousel"
+#: components/Blocks/Listing/messages
+#: components/Blocks/Listing/schema
+#: index
+msgid "Carousel"
+msgstr "Carrossel"
+
+#. Default: "Carousel controls"
+#: components/Blocks/Listing/messages
+msgid "Carousel controls"
+msgstr "Controles do carrossel"
+
+#. Default: "Center"
+#: components/Blocks/Listing/schema
+msgid "Center"
+msgstr "Centro"
+
+#. Default: "Center bottom"
+#: components/Blocks/Listing/schema
+msgid "Center bottom"
+msgstr "Fundo centro"
+
+#. Default: "Center top"
+#: components/Blocks/Listing/schema
+msgid "Center top"
+msgstr "Topo centro"
+
+#. Default: "Changes saved"
+#: components/Controlpanels/Themes/messages
+msgid "Changes saved"
+msgstr "Alterações salvas"
+
+#. Default: "Close menu"
+#: components/Navigation/SCNavigation/SubMenu
+msgid "Close menu"
+msgstr "Fechar menu"
+
+#. Default: "Colours"
+#: components/Controlpanels/Themes/messages
+msgid "Colours"
+msgstr "Cores"
+
+#. Default: "Contain"
+#: components/Blocks/HeroBlock/schema
+msgid "Contain"
+msgstr "Conter"
+
+#. Default: "Content"
+#: components/Blocks/HeroBlock/schema
+msgid "Content"
+msgstr "Conteúdo"
+
+#. Default: "Cover"
+#: components/Blocks/HeroBlock/schema
+msgid "Cover"
+msgstr "Preencher"
+
+#. Default: "Criteria"
+#: components/Widgets/QuerystringWidget
+msgid "Criteria"
+msgstr "Critérios"
+
+#. Default: "Delete"
+#: components/Controlpanels/Themes/messages
+msgid "Delete"
+msgstr "Excluir"
+
+#. Default: "Delete this theme? Content still using it keeps the stored id but falls back to the default colours."
+#: components/Controlpanels/Themes/messages
+msgid "Delete this theme?"
+msgstr "Excluir este tema? Conteúdos que ainda o utilizam mantêm o id armazenado, mas voltam às cores padrão."
+
+#. Default: "Description"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Description"
+msgstr "Descrição"
+
+#. Default: "Duplicate"
+#: components/Controlpanels/Themes/messages
+msgid "Duplicate"
+msgstr "Duplicar"
+
+#. Default: "Duplicate of {name}"
+#: components/Controlpanels/Themes/messages
+msgid "Duplicate of {name}"
+msgstr "Cópia de {name}"
+
+#. Default: "Edit"
+#: components/Controlpanels/Themes/messages
+msgid "Edit"
+msgstr "Editar"
+
+#. Default: "This is a Hero Block. Add an item in the sidebar to fill it automatically."
+#: components/Blocks/HeroBlock/useHeroBlockContent
+msgid "Empty hero block placeholder"
+msgstr "Este é um Hero Block. Adicione um item no menu lateral para preenchê-lo automaticamente."
+
+#. Default: "Error"
+#: components/Controlpanels/Themes/messages
+msgid "Error"
+msgstr "Erro"
+
+#. Default: "File type"
+#: components/Blocks/HeroBlock/schema
+msgid "File type"
+msgstr "Tipo do arquivo"
+
+#. Default: "E.g. PDF, Report, Article"
+#: components/Blocks/HeroBlock/schema
+msgid "File type description"
+msgstr "Ex.: PDF, Relatório, Artigo"
+
+#. Default: "Filled"
+#: components/Blocks/QuoteBlock/schema
+msgid "Filled"
+msgstr "Preenchido"
+
+#. Default: "Flex / Decorative"
+#: index
+msgid "Flex / Decorative"
+msgstr "Flex / Decorativa"
+
+#. Default: "Footer text"
+#: components/Blocks/HeroBlock/schema
+msgid "Footer text"
+msgstr "Texto do rodapé"
+
+#. Default: "Additional information displayed at the foot of the block."
+#: components/Blocks/HeroBlock/schema
+msgid "Footer text description"
+msgstr "Informação adicional exibida no rodapé do bloco."
+
+#. Default: "Full width"
+#: components/Blocks/HeroBlock/schema
+msgid "Full width"
+msgstr "Largura total"
+
+#. Default: "Let the text span the whole block when there is no image to show."
+#: components/Blocks/HeroBlock/schema
+msgid "Full width description"
+msgstr "Permite que o texto ocupe todo o bloco quando não há imagem a exibir."
+
+#. Default: "Go to item {index}"
+#: components/Blocks/Listing/messages
+msgid "Go to item {index}"
+msgstr "Ir para o item {index}"
+
+#. Default: "Header text"
+#: components/Blocks/HeroBlock/schema
+msgid "Header text"
+msgstr "Texto do cabeçalho"
+
+#. Default: "Small text displayed above the main title."
+#: components/Blocks/HeroBlock/schema
+msgid "Header text description"
+msgstr "Texto pequeno exibido acima do título principal."
+
+#. Default: "Headline button link"
+#: components/Blocks/Listing/schema
+msgid "Headline button link"
+msgstr "Link do botão (título)"
+
+#. Default: "Headline button text"
+#: components/Blocks/Listing/schema
+msgid "Headline button text"
+msgstr "Texto do botão (título)"
+
+#. Default: "Height (px)"
+#: components/Blocks/Listing/schema
+msgid "Height (px)"
+msgstr "Altura (px)"
+
+#. Default: "Hero Block"
+#: components/Blocks/HeroBlock/schema
+#: index
+msgid "Hero Block"
+msgstr "Hero Block"
+
+#. Default: "Explanatory text or summary displayed below the title."
+#: components/Blocks/HeroBlock/schema
+msgid "Hero description description"
+msgstr "Texto explicativo ou resumo exibido abaixo do título."
+
+#. Default: "Main highlighted title."
+#: components/Blocks/HeroBlock/schema
+msgid "Hero title description"
+msgstr "Título principal em destaque."
+
+#. Default: "Hide image"
+#: components/Blocks/HeroBlock/schema
+msgid "Hide image"
+msgstr "Esconder imagem"
+
+#. Default: "Highlight"
+#: index
+msgid "Highlight"
+msgstr "Destaque"
+
+#. Default: "Highlighted item"
+#: components/Blocks/HeroBlock/schema
+msgid "Highlighted item"
+msgstr "Item de destaque"
+
+#. Default: "Select a content item to pull its data automatically (title, description, image)"
+#: components/Blocks/HeroBlock/schema
+msgid "Highlighted item description"
+msgstr "Selecione um conteúdo para puxar os dados automaticamente (título, descrição, imagem)"
+
+#. Default: "Id"
+#: components/Controlpanels/Themes/messages
+msgid "Id"
+msgstr "Id"
+
+#. Default: "Image"
+#: components/Blocks/HeroBlock/schema
+msgid "Image"
+msgstr "Imagem"
+
+#. Default: "Image fit"
+#: components/Blocks/HeroBlock/schema
+msgid "Image fit"
+msgstr "Ajuste da imagem"
+
+#. Default: "\"Cover\" fills the whole available space, cropping the edges of the image if needed. \"Contain\" fits the entire image inside the space, which may leave empty bands at the sides."
+#: components/Blocks/HeroBlock/schema
+msgid "Image fit description"
+msgstr "O \"Preencher\" ocupa todo o espaço disponível, cortando as bordas da imagem se necessário. O \"Conter\" ajusta a imagem inteira dentro do espaço, podendo deixar faixas laterais vazias."
+
+#. Default: "Image size"
+#: components/Blocks/MainImageBlock/schema
+msgid "Image size"
+msgstr "Tamanho da imagem"
+
+#. Default: "Image size / empty space"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size / empty space"
+msgstr "Tamanho da imagem / espaço vazio"
+
+#. Default: "Controls the width reserved for the image (even when there is none), which in turn sets the space for the text."
+#: components/Blocks/HeroBlock/schema
+msgid "Image size description"
+msgstr "Controla a largura reservada para a imagem (mesmo quando não há uma), definindo o espaço do texto."
+
+#. Default: "50% (half)"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size half"
+msgstr "50% (metade)"
+
+#. Default: "0% (text full width)"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size none"
+msgstr "0% (texto 100%)"
+
+#. Default: "Item batch size"
+#: components/Widgets/QuerystringWidget
+msgid "Item batch size"
+msgstr "Itens por página"
+
+#. Default: "Items"
+#: components/Blocks/Listing/messages
+msgid "Items"
+msgstr "Itens"
+
+#. Default: "Last modified"
+#: components/DocumentByLine/DocumentByLine
+msgid "Last modified"
+msgstr "Última modificação"
+
+#. Default: "Layout"
+#: components/Blocks/HeroBlock/schema
+msgid "Layout"
+msgstr "Layout"
+
+#. Default: "Left bottom"
+#: components/Blocks/Listing/schema
+msgid "Left bottom"
+msgstr "Fundo esquerdo"
+
+#. Default: "Left center"
+#: components/Blocks/Listing/schema
+msgid "Left center"
+msgstr "Centro esquerdo"
+
+#. Default: "Left top"
+#: components/Blocks/Listing/schema
+msgid "Left top"
+msgstr "Topo esquerdo"
+
+#. Default: "Link settings"
+#: components/Blocks/MainImageBlock/schema
+msgid "Link settings"
+msgstr "Configurações do link"
+
+#. Default: "Link to"
+#: components/Blocks/MainImageBlock/schema
+msgid "Link to"
+msgstr "Link para"
+
+#. Default: "Main Image"
+#: components/Blocks/MainImageBlock/schema
+#: index
+msgid "Main Image"
+msgstr "Imagem principal"
+
+#. Default: "Media Carousel"
+#: components/Blocks/Listing/messages
+#: index
+msgid "Media Carousel"
+msgstr "Carrossel de mídia"
+
+#. Default: "Media fit (object-fit)"
+#: components/Blocks/Listing/schema
+msgid "Media fit (object-fit)"
+msgstr "Ajuste da mídia (object-fit)"
+
+#. Default: "Name"
+#: components/Controlpanels/Themes/messages
+msgid "Name"
+msgstr "Nome"
+
+#. Default: "Next"
+#: components/Blocks/Listing/messages
+msgid "Next"
+msgstr "Próximo"
+
+#. Default: "Next Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Next Page"
+msgstr "Próxima página"
+
+#. Default: "No items found in this container."
+#: components/Blocks/Listing/ListingBody
+msgid "No items found in this container."
+msgstr "Nenhum item encontrado neste contêiner."
+
+#. Default: "No preview image found on this page. Add a preview image to the page to display it in this block."
+#: components/Blocks/MainImageBlock/View
+msgid "No preview image found on this page."
+msgstr "Nenhuma imagem de preview encontrada nesta página. Adicione uma imagem de preview à página para exibi-la neste bloco."
+
+#. Default: "No selection"
+#: components/Widgets/QuerystringWidget
+msgid "No selection"
+msgstr "Nenhuma seleção"
+
+#. Default: "Number of columns"
+#: components/Blocks/Listing/schema
+msgid "Number of columns"
+msgstr "Número de colunas"
+
+#. Default: "Offset"
+#: components/Widgets/QuerystringWidget
+msgid "Offset"
+msgstr "Deslocamento"
+
+#. Default: "Open in a new tab"
+#: components/Blocks/MainImageBlock/schema
+msgid "Open in a new tab"
+msgstr "Abrir em uma nova aba"
+
+#. Default: "Open menu"
+#: components/Navigation/SCNavigation/MenuItem
+msgid "Open menu"
+msgstr "Abrir menu"
+
+#. Default: "Overwrite content"
+#: components/Blocks/HeroBlock/schema
+msgid "Overwrite content"
+msgstr "Sobrescrever conteúdo"
+
+#. Default: "Check to customise the title, description and image instead of pulling them automatically from the highlighted item"
+#: components/Blocks/HeroBlock/schema
+msgid "Overwrite content description"
+msgstr "Marque para personalizar o título, a descrição e a imagem em vez de puxá-los automaticamente do item de destaque"
+
+#. Default: "Pagination Navigation"
+#: components/Blocks/Listing/ListingBody
+msgid "Pagination Navigation"
+msgstr "Navegação de páginas"
+
+#. Default: "Pagination Navigation for {headline}"
+#: components/Blocks/Listing/ListingBody
+msgid "Pagination Navigation for {headline}"
+msgstr "Navegação de páginas de {headline}"
+
+#. Default: "Paragraph (P)"
+#: components/Blocks/HeroBlock/schema
+msgid "Paragraph (P)"
+msgstr "Parágrafo (P)"
+
+#. Default: "Pause carousel"
+#: components/Blocks/Listing/messages
+msgid "Pause carousel"
+msgstr "Pausar carrossel"
+
+#. Default: "Play carousel"
+#: components/Blocks/Listing/messages
+msgid "Play carousel"
+msgstr "Reproduzir carrossel"
+
+#. Default: "Position (object-position)"
+#: components/Blocks/Listing/schema
+msgid "Position (object-position)"
+msgstr "Posição (object-position)"
+
+#. Default: "Previous"
+#: components/Blocks/Listing/messages
+msgid "Previous"
+msgstr "Anterior"
+
+#. Default: "Previous Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Previous Page"
+msgstr "Página anterior"
+
+#. Default: "Primary"
+#: index
+msgid "Primary"
+msgstr "Primária"
+
+#. Default: "Published"
+#: components/DocumentByLine/DocumentByLine
+msgid "Published"
+msgstr "Publicado"
+
+#. Default: "Quote"
+#: components/Blocks/QuoteBlock/schema
+#: index
+msgid "Quote"
+msgstr "Citação"
+
+#. Default: "Result"
+#: components/Blocks/Listing/ListingBody
+msgid "Result"
+msgstr "Resultado"
+
+#. Default: "Results limit"
+#: components/Widgets/QuerystringWidget
+msgid "Results limit"
+msgstr "Limite de resultados"
+
+#. Default: "Reversed order"
+#: components/Widgets/QuerystringWidget
+msgid "Reversed order"
+msgstr "Ordem invertida"
+
+#. Default: "Right bottom"
+#: components/Blocks/Listing/schema
+msgid "Right bottom"
+msgstr "Fundo direito"
+
+#. Default: "Right center"
+#: components/Blocks/Listing/schema
+msgid "Right center"
+msgstr "Centro direito"
+
+#. Default: "Right top"
+#: components/Blocks/Listing/schema
+msgid "Right top"
+msgstr "Topo direito"
+
+#. Default: "Save"
+#: components/Controlpanels/Themes/messages
+msgid "Save"
+msgstr "Salvar"
+
+#. Default: "Section"
+#: components/Navigation/SCNavigation/SubMenuSection
+msgid "Section"
+msgstr "Seção"
+
+#. Default: "Select a highlighted item"
+#: components/Blocks/HeroBlock/useHeroBlockContent
+msgid "Select a highlighted item"
+msgstr "Selecione um item de destaque"
+
+#. Default: "Show author"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show author"
+msgstr "Exibir autor"
+
+#. Default: "Show button"
+#: components/Blocks/HeroBlock/schema
+msgid "Show button"
+msgstr "Mostrar botão"
+
+#. Default: "Show date"
+#: components/Blocks/HeroBlock/schema
+msgid "Show date"
+msgstr "Mostrar data"
+
+#. Default: "Show last modification date"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show last modification date"
+msgstr "Exibir data da última modificação"
+
+#. Default: "Show publication date"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show publication date"
+msgstr "Exibir data de publicação"
+
+#. Default: "Sort on"
+#: components/Widgets/QuerystringWidget
+msgid "Sort on"
+msgstr "Ordenar por"
+
+#. Default: "Styling"
+#: components/Blocks/MainImageBlock/schema
+msgid "Styling"
+msgstr "Estilo"
+
+#. Default: "Tags"
+#: components/Blocks/HeroBlock/schema
+msgid "Tags"
+msgstr "Tags"
+
+#. Default: "Text side"
+#: components/Blocks/HeroBlock/schema
+msgid "Text side"
+msgstr "Lado do texto"
+
+#. Default: "Theme deleted"
+#: components/Controlpanels/Themes/messages
+msgid "Theme deleted"
+msgstr "Tema excluído"
+
+#. Default: "Themes"
+#: components/Controlpanels/Themes/messages
+msgid "Themes"
+msgstr "Temas"
+
+#. Default: "Title"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Title"
+msgstr "Título"
+
+#. Default: "Title element"
+#: components/Blocks/HeroBlock/schema
+msgid "Title element"
+msgstr "Elemento do título"
+
+#. Default: "H1 is the main page title, H2 the secondary title and H3 the tertiary one. P renders the title as a paragraph."
+#: components/Blocks/HeroBlock/schema
+msgid "Title element description"
+msgstr "O H1 é o título principal da página, o H2 o secundário e o H3 o terciário. O P exibe o título como parágrafo."
+
+#. Default: "Transparent"
+#: components/Blocks/QuoteBlock/schema
+msgid "Transparent"
+msgstr "Transparente"
+
+#. Default: "Video"
+#: components/Blocks/Listing/messages
+msgid "Video"
+msgstr "Vídeo"
+
+#. Default: "Decrease font size"
+#: components/AccessibilityControls/FontSizeControls
+msgid "accessibilityDecreaseFontSize"
+msgstr "Diminuir fonte"
+
+#. Default: "Read on hover"
+#: components/AccessibilityControls/HoverReaderControls
+msgid "accessibilityHoverReaderLabel"
+msgstr "Leitura ao passar o mouse"
+
+#. Default: "Increase font size"
+#: components/AccessibilityControls/FontSizeControls
+msgid "accessibilityIncreaseFontSize"
+msgstr "Aumentar fonte"
+
+#. Default: "Reader speed"
+#: components/AccessibilityControls/HoverReaderControls
+msgid "accessibilitySpeedLabel"
+msgstr "Velocidade do leitor"
+
+#. Default: "Dark"
+#: components/ThemeToggle/ThemeToggle
+msgid "darkTheme"
+msgstr "Escuro"
+
+#. Default: "Toggle menu"
+#: components/DropdownMenu/DropdownMenu
+msgid "dropdownMenuToggle"
+msgstr "Alternar menu"
+
+#. Default: "Accessibility menu"
+#: components/HeaderBar/HeaderBar
+msgid "headerBarAccessibilityMenu"
+msgstr "Menu de acessibilidade"
+
+#. Default: "MENU"
+#: components/HeaderBar/HeaderBar
+msgid "headerBarMenuLabel"
+msgstr "MENU"
+
+#. Default: "High contrast"
+#: components/ThemeToggle/ThemeToggle
+msgid "highContrastTheme"
+msgstr "Alto contraste"
+
+#. Default: "Light"
+#: components/ThemeToggle/ThemeToggle
+msgid "lightTheme"
+msgstr "Claro"
+
+#. Default: "Loading"
+#: components/Blocks/Listing/ListingBody
+msgid "loading"
+msgstr "Carregando"
+
+#. Default: "of"
+#: components/Blocks/Listing/ListingBody
+msgid "of"
+msgstr "de"
+
+#. Default: "Toggle theme"
+#: components/ThemeToggle/ThemeToggle
+msgid "toggleTheme"
+msgstr "Alternar tema"
+
+#. Default: "{count, plural, one {# column} other {# columns}}"
+#: components/Blocks/Listing/schema
+msgid "{count, plural, one {# column} other {# columns}}"
+msgstr "{count, plural, one {# coluna} other {# colunas}}"
diff --git a/frontend/packages/volto-light-theme/locales/volto.pot b/frontend/packages/volto-light-theme/locales/volto.pot
index ea538b1..5b0fcca 100644
--- a/frontend/packages/volto-light-theme/locales/volto.pot
+++ b/frontend/packages/volto-light-theme/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-03-22T12:43:34.158Z\n"
+"POT-Creation-Date: 2026-09-01T23:28:00.430Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -12,3 +12,749 @@ msgstr ""
 "Language-Name: English\n"
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
+
+#. Default: "Accessibility options"
+#: components/Header/MobileHeader/MobileTools
+msgid "Accessibility options"
+msgstr ""
+
+#. Default: "Actions"
+#: components/Controlpanels/Themes/messages
+msgid "Actions"
+msgstr ""
+
+#. Default: "Add theme"
+#: components/Controlpanels/Themes/messages
+msgid "Add theme"
+msgstr ""
+
+#. Default: "Alignment"
+#: components/Blocks/Listing/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Alignment"
+msgstr ""
+
+#. Default: "Alt Text"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt Text"
+msgstr ""
+
+#. Default: "Leave empty if the image is purely decorative"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt text hint"
+msgstr ""
+
+#. Default: "Describe the purpose of the image"
+#: components/Blocks/MainImageBlock/schema
+msgid "Alt text hint link text"
+msgstr ""
+
+#. Default: "Attached Card"
+#: index
+msgid "Attached Card"
+msgstr ""
+
+#. Default: "Author / Source"
+#: components/Blocks/QuoteBlock/schema
+msgid "Author / Source"
+msgstr ""
+
+#. Default: "Auto-advance"
+#: components/Blocks/Listing/schema
+msgid "Auto-advance"
+msgstr ""
+
+#. Default: "Auto-advance interval (ms)"
+#: components/Blocks/Listing/schema
+msgid "Auto-advance interval (ms)"
+msgstr ""
+
+#. Default: "Back"
+#: components/Controlpanels/Themes/messages
+msgid "Back"
+msgstr ""
+
+#. Default: "Background color"
+#: components/Blocks/schema
+msgid "Background color"
+msgstr ""
+
+#. Default: "Background style"
+#: components/Blocks/QuoteBlock/schema
+msgid "Background style"
+msgstr ""
+
+#. Default: "Block Width"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Block Width"
+msgstr ""
+
+#. Default: "Brand"
+#: index
+msgid "Brand"
+msgstr ""
+
+#. Default: "Button link"
+#: components/Blocks/HeroBlock/schema
+msgid "Button link"
+msgstr ""
+
+#. Default: "Button text"
+#: components/Blocks/HeroBlock/schema
+msgid "Button text"
+msgstr ""
+
+#. Default: "The text shown inside the button (e.g. \"Read more\")."
+#: components/Blocks/HeroBlock/schema
+msgid "Button text description"
+msgstr ""
+
+#. Default: "By"
+#: components/DocumentByLine/DocumentByLine
+msgid "By"
+msgstr ""
+
+#. Default: "Byline"
+#: components/Blocks/DocumentByLine/schema
+#: index
+msgid "Byline"
+msgstr ""
+
+#. Default: "Call to Action"
+#: components/Blocks/HeroBlock/schema
+msgid "Call to Action"
+msgstr ""
+
+#. Default: "Cancel"
+#: components/Controlpanels/Themes/messages
+msgid "Cancel"
+msgstr ""
+
+#. Default: "Carousel"
+#: components/Blocks/Listing/messages
+#: components/Blocks/Listing/schema
+#: index
+msgid "Carousel"
+msgstr ""
+
+#. Default: "Carousel controls"
+#: components/Blocks/Listing/messages
+msgid "Carousel controls"
+msgstr ""
+
+#. Default: "Center"
+#: components/Blocks/Listing/schema
+msgid "Center"
+msgstr ""
+
+#. Default: "Center bottom"
+#: components/Blocks/Listing/schema
+msgid "Center bottom"
+msgstr ""
+
+#. Default: "Center top"
+#: components/Blocks/Listing/schema
+msgid "Center top"
+msgstr ""
+
+#. Default: "Changes saved"
+#: components/Controlpanels/Themes/messages
+msgid "Changes saved"
+msgstr ""
+
+#. Default: "Close menu"
+#: components/Navigation/SCNavigation/SubMenu
+msgid "Close menu"
+msgstr ""
+
+#. Default: "Colours"
+#: components/Controlpanels/Themes/messages
+msgid "Colours"
+msgstr ""
+
+#. Default: "Contain"
+#: components/Blocks/HeroBlock/schema
+msgid "Contain"
+msgstr ""
+
+#. Default: "Content"
+#: components/Blocks/HeroBlock/schema
+msgid "Content"
+msgstr ""
+
+#. Default: "Cover"
+#: components/Blocks/HeroBlock/schema
+msgid "Cover"
+msgstr ""
+
+#. Default: "Criteria"
+#: components/Widgets/QuerystringWidget
+msgid "Criteria"
+msgstr ""
+
+#. Default: "Delete"
+#: components/Controlpanels/Themes/messages
+msgid "Delete"
+msgstr ""
+
+#. Default: "Delete this theme? Content still using it keeps the stored id but falls back to the default colours."
+#: components/Controlpanels/Themes/messages
+msgid "Delete this theme?"
+msgstr ""
+
+#. Default: "Description"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Description"
+msgstr ""
+
+#. Default: "Duplicate"
+#: components/Controlpanels/Themes/messages
+msgid "Duplicate"
+msgstr ""
+
+#. Default: "Duplicate of {name}"
+#: components/Controlpanels/Themes/messages
+msgid "Duplicate of {name}"
+msgstr ""
+
+#. Default: "Edit"
+#: components/Controlpanels/Themes/messages
+msgid "Edit"
+msgstr ""
+
+#. Default: "This is a Hero Block. Add an item in the sidebar to fill it automatically."
+#: components/Blocks/HeroBlock/useHeroBlockContent
+msgid "Empty hero block placeholder"
+msgstr ""
+
+#. Default: "Error"
+#: components/Controlpanels/Themes/messages
+msgid "Error"
+msgstr ""
+
+#. Default: "File type"
+#: components/Blocks/HeroBlock/schema
+msgid "File type"
+msgstr ""
+
+#. Default: "E.g. PDF, Report, Article"
+#: components/Blocks/HeroBlock/schema
+msgid "File type description"
+msgstr ""
+
+#. Default: "Filled"
+#: components/Blocks/QuoteBlock/schema
+msgid "Filled"
+msgstr ""
+
+#. Default: "Flex / Decorative"
+#: index
+msgid "Flex / Decorative"
+msgstr ""
+
+#. Default: "Footer text"
+#: components/Blocks/HeroBlock/schema
+msgid "Footer text"
+msgstr ""
+
+#. Default: "Additional information displayed at the foot of the block."
+#: components/Blocks/HeroBlock/schema
+msgid "Footer text description"
+msgstr ""
+
+#. Default: "Full width"
+#: components/Blocks/HeroBlock/schema
+msgid "Full width"
+msgstr ""
+
+#. Default: "Let the text span the whole block when there is no image to show."
+#: components/Blocks/HeroBlock/schema
+msgid "Full width description"
+msgstr ""
+
+#. Default: "Go to item {index}"
+#: components/Blocks/Listing/messages
+msgid "Go to item {index}"
+msgstr ""
+
+#. Default: "Header text"
+#: components/Blocks/HeroBlock/schema
+msgid "Header text"
+msgstr ""
+
+#. Default: "Small text displayed above the main title."
+#: components/Blocks/HeroBlock/schema
+msgid "Header text description"
+msgstr ""
+
+#. Default: "Headline button link"
+#: components/Blocks/Listing/schema
+msgid "Headline button link"
+msgstr ""
+
+#. Default: "Headline button text"
+#: components/Blocks/Listing/schema
+msgid "Headline button text"
+msgstr ""
+
+#. Default: "Height (px)"
+#: components/Blocks/Listing/schema
+msgid "Height (px)"
+msgstr ""
+
+#. Default: "Hero Block"
+#: components/Blocks/HeroBlock/schema
+#: index
+msgid "Hero Block"
+msgstr ""
+
+#. Default: "Explanatory text or summary displayed below the title."
+#: components/Blocks/HeroBlock/schema
+msgid "Hero description description"
+msgstr ""
+
+#. Default: "Main highlighted title."
+#: components/Blocks/HeroBlock/schema
+msgid "Hero title description"
+msgstr ""
+
+#. Default: "Hide image"
+#: components/Blocks/HeroBlock/schema
+msgid "Hide image"
+msgstr ""
+
+#. Default: "Highlight"
+#: index
+msgid "Highlight"
+msgstr ""
+
+#. Default: "Highlighted item"
+#: components/Blocks/HeroBlock/schema
+msgid "Highlighted item"
+msgstr ""
+
+#. Default: "Select a content item to pull its data automatically (title, description, image)"
+#: components/Blocks/HeroBlock/schema
+msgid "Highlighted item description"
+msgstr ""
+
+#. Default: "Id"
+#: components/Controlpanels/Themes/messages
+msgid "Id"
+msgstr ""
+
+#. Default: "Image"
+#: components/Blocks/HeroBlock/schema
+msgid "Image"
+msgstr ""
+
+#. Default: "Image fit"
+#: components/Blocks/HeroBlock/schema
+msgid "Image fit"
+msgstr ""
+
+#. Default: "\"Cover\" fills the whole available space, cropping the edges of the image if needed. \"Contain\" fits the entire image inside the space, which may leave empty bands at the sides."
+#: components/Blocks/HeroBlock/schema
+msgid "Image fit description"
+msgstr ""
+
+#. Default: "Image size"
+#: components/Blocks/MainImageBlock/schema
+msgid "Image size"
+msgstr ""
+
+#. Default: "Image size / empty space"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size / empty space"
+msgstr ""
+
+#. Default: "Controls the width reserved for the image (even when there is none), which in turn sets the space for the text."
+#: components/Blocks/HeroBlock/schema
+msgid "Image size description"
+msgstr ""
+
+#. Default: "50% (half)"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size half"
+msgstr ""
+
+#. Default: "0% (text full width)"
+#: components/Blocks/HeroBlock/schema
+msgid "Image size none"
+msgstr ""
+
+#. Default: "Item batch size"
+#: components/Widgets/QuerystringWidget
+msgid "Item batch size"
+msgstr ""
+
+#. Default: "Items"
+#: components/Blocks/Listing/messages
+msgid "Items"
+msgstr ""
+
+#. Default: "Last modified"
+#: components/DocumentByLine/DocumentByLine
+msgid "Last modified"
+msgstr ""
+
+#. Default: "Layout"
+#: components/Blocks/HeroBlock/schema
+msgid "Layout"
+msgstr ""
+
+#. Default: "Left bottom"
+#: components/Blocks/Listing/schema
+msgid "Left bottom"
+msgstr ""
+
+#. Default: "Left center"
+#: components/Blocks/Listing/schema
+msgid "Left center"
+msgstr ""
+
+#. Default: "Left top"
+#: components/Blocks/Listing/schema
+msgid "Left top"
+msgstr ""
+
+#. Default: "Link settings"
+#: components/Blocks/MainImageBlock/schema
+msgid "Link settings"
+msgstr ""
+
+#. Default: "Link to"
+#: components/Blocks/MainImageBlock/schema
+msgid "Link to"
+msgstr ""
+
+#. Default: "Main Image"
+#: components/Blocks/MainImageBlock/schema
+#: index
+msgid "Main Image"
+msgstr ""
+
+#. Default: "Media Carousel"
+#: components/Blocks/Listing/messages
+#: index
+msgid "Media Carousel"
+msgstr ""
+
+#. Default: "Media fit (object-fit)"
+#: components/Blocks/Listing/schema
+msgid "Media fit (object-fit)"
+msgstr ""
+
+#. Default: "Name"
+#: components/Controlpanels/Themes/messages
+msgid "Name"
+msgstr ""
+
+#. Default: "Next"
+#: components/Blocks/Listing/messages
+msgid "Next"
+msgstr ""
+
+#. Default: "Next Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Next Page"
+msgstr ""
+
+#. Default: "No items found in this container."
+#: components/Blocks/Listing/ListingBody
+msgid "No items found in this container."
+msgstr ""
+
+#. Default: "No preview image found on this page. Add a preview image to the page to display it in this block."
+#: components/Blocks/MainImageBlock/View
+msgid "No preview image found on this page."
+msgstr ""
+
+#. Default: "No selection"
+#: components/Widgets/QuerystringWidget
+msgid "No selection"
+msgstr ""
+
+#. Default: "Number of columns"
+#: components/Blocks/Listing/schema
+msgid "Number of columns"
+msgstr ""
+
+#. Default: "Offset"
+#: components/Widgets/QuerystringWidget
+msgid "Offset"
+msgstr ""
+
+#. Default: "Open in a new tab"
+#: components/Blocks/MainImageBlock/schema
+msgid "Open in a new tab"
+msgstr ""
+
+#. Default: "Open menu"
+#: components/Navigation/SCNavigation/MenuItem
+msgid "Open menu"
+msgstr ""
+
+#. Default: "Overwrite content"
+#: components/Blocks/HeroBlock/schema
+msgid "Overwrite content"
+msgstr ""
+
+#. Default: "Check to customise the title, description and image instead of pulling them automatically from the highlighted item"
+#: components/Blocks/HeroBlock/schema
+msgid "Overwrite content description"
+msgstr ""
+
+#. Default: "Pagination Navigation"
+#: components/Blocks/Listing/ListingBody
+msgid "Pagination Navigation"
+msgstr ""
+
+#. Default: "Pagination Navigation for {headline}"
+#: components/Blocks/Listing/ListingBody
+msgid "Pagination Navigation for {headline}"
+msgstr ""
+
+#. Default: "Paragraph (P)"
+#: components/Blocks/HeroBlock/schema
+msgid "Paragraph (P)"
+msgstr ""
+
+#. Default: "Pause carousel"
+#: components/Blocks/Listing/messages
+msgid "Pause carousel"
+msgstr ""
+
+#. Default: "Play carousel"
+#: components/Blocks/Listing/messages
+msgid "Play carousel"
+msgstr ""
+
+#. Default: "Position (object-position)"
+#: components/Blocks/Listing/schema
+msgid "Position (object-position)"
+msgstr ""
+
+#. Default: "Previous"
+#: components/Blocks/Listing/messages
+msgid "Previous"
+msgstr ""
+
+#. Default: "Previous Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Previous Page"
+msgstr ""
+
+#. Default: "Primary"
+#: index
+msgid "Primary"
+msgstr ""
+
+#. Default: "Published"
+#: components/DocumentByLine/DocumentByLine
+msgid "Published"
+msgstr ""
+
+#. Default: "Quote"
+#: components/Blocks/QuoteBlock/schema
+#: index
+msgid "Quote"
+msgstr ""
+
+#. Default: "Result"
+#: components/Blocks/Listing/ListingBody
+msgid "Result"
+msgstr ""
+
+#. Default: "Results limit"
+#: components/Widgets/QuerystringWidget
+msgid "Results limit"
+msgstr ""
+
+#. Default: "Reversed order"
+#: components/Widgets/QuerystringWidget
+msgid "Reversed order"
+msgstr ""
+
+#. Default: "Right bottom"
+#: components/Blocks/Listing/schema
+msgid "Right bottom"
+msgstr ""
+
+#. Default: "Right center"
+#: components/Blocks/Listing/schema
+msgid "Right center"
+msgstr ""
+
+#. Default: "Right top"
+#: components/Blocks/Listing/schema
+msgid "Right top"
+msgstr ""
+
+#. Default: "Save"
+#: components/Controlpanels/Themes/messages
+msgid "Save"
+msgstr ""
+
+#. Default: "Section"
+#: components/Navigation/SCNavigation/SubMenuSection
+msgid "Section"
+msgstr ""
+
+#. Default: "Select a highlighted item"
+#: components/Blocks/HeroBlock/useHeroBlockContent
+msgid "Select a highlighted item"
+msgstr ""
+
+#. Default: "Show author"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show author"
+msgstr ""
+
+#. Default: "Show button"
+#: components/Blocks/HeroBlock/schema
+msgid "Show button"
+msgstr ""
+
+#. Default: "Show date"
+#: components/Blocks/HeroBlock/schema
+msgid "Show date"
+msgstr ""
+
+#. Default: "Show last modification date"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show last modification date"
+msgstr ""
+
+#. Default: "Show publication date"
+#: components/Blocks/DocumentByLine/schema
+msgid "Show publication date"
+msgstr ""
+
+#. Default: "Sort on"
+#: components/Widgets/QuerystringWidget
+msgid "Sort on"
+msgstr ""
+
+#. Default: "Styling"
+#: components/Blocks/MainImageBlock/schema
+msgid "Styling"
+msgstr ""
+
+#. Default: "Tags"
+#: components/Blocks/HeroBlock/schema
+msgid "Tags"
+msgstr ""
+
+#. Default: "Text side"
+#: components/Blocks/HeroBlock/schema
+msgid "Text side"
+msgstr ""
+
+#. Default: "Theme deleted"
+#: components/Controlpanels/Themes/messages
+msgid "Theme deleted"
+msgstr ""
+
+#. Default: "Themes"
+#: components/Controlpanels/Themes/messages
+msgid "Themes"
+msgstr ""
+
+#. Default: "Title"
+#: components/Blocks/HeroBlock/schema
+#: components/Blocks/MainImageBlock/schema
+msgid "Title"
+msgstr ""
+
+#. Default: "Title element"
+#: components/Blocks/HeroBlock/schema
+msgid "Title element"
+msgstr ""
+
+#. Default: "H1 is the main page title, H2 the secondary title and H3 the tertiary one. P renders the title as a paragraph."
+#: components/Blocks/HeroBlock/schema
+msgid "Title element description"
+msgstr ""
+
+#. Default: "Transparent"
+#: components/Blocks/QuoteBlock/schema
+msgid "Transparent"
+msgstr ""
+
+#. Default: "Video"
+#: components/Blocks/Listing/messages
+msgid "Video"
+msgstr ""
+
+#. Default: "Decrease font size"
+#: components/AccessibilityControls/FontSizeControls
+msgid "accessibilityDecreaseFontSize"
+msgstr ""
+
+#. Default: "Read on hover"
+#: components/AccessibilityControls/HoverReaderControls
+msgid "accessibilityHoverReaderLabel"
+msgstr ""
+
+#. Default: "Increase font size"
+#: components/AccessibilityControls/FontSizeControls
+msgid "accessibilityIncreaseFontSize"
+msgstr ""
+
+#. Default: "Reader speed"
+#: components/AccessibilityControls/HoverReaderControls
+msgid "accessibilitySpeedLabel"
+msgstr ""
+
+#. Default: "Dark"
+#: components/ThemeToggle/ThemeToggle
+msgid "darkTheme"
+msgstr ""
+
+#. Default: "Toggle menu"
+#: components/DropdownMenu/DropdownMenu
+msgid "dropdownMenuToggle"
+msgstr ""
+
+#. Default: "Accessibility menu"
+#: components/HeaderBar/HeaderBar
+msgid "headerBarAccessibilityMenu"
+msgstr ""
+
+#. Default: "MENU"
+#: components/HeaderBar/HeaderBar
+msgid "headerBarMenuLabel"
+msgstr ""
+
+#. Default: "High contrast"
+#: components/ThemeToggle/ThemeToggle
+msgid "highContrastTheme"
+msgstr ""
+
+#. Default: "Light"
+#: components/ThemeToggle/ThemeToggle
+msgid "lightTheme"
+msgstr ""
+
+#. Default: "Loading"
+#: components/Blocks/Listing/ListingBody
+msgid "loading"
+msgstr ""
+
+#. Default: "of"
+#: components/Blocks/Listing/ListingBody
+msgid "of"
+msgstr ""
+
+#. Default: "Toggle theme"
+#: components/ThemeToggle/ThemeToggle
+msgid "toggleTheme"
+msgstr ""
+
+#. Default: "{count, plural, one {# column} other {# columns}}"
+#: components/Blocks/Listing/schema
+msgid "{count, plural, one {# column} other {# columns}}"
+msgstr ""
diff --git a/frontend/packages/volto-light-theme/news/22.bugfix b/frontend/packages/volto-light-theme/news/22.bugfix
new file mode 100644
index 0000000..a787a8a
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.bugfix
@@ -0,0 +1 @@
+Fixed keyboard focus being invisible on listing cards. Six `outline` declarations in `_listing.scss` read `--theme-top-high-contrast-foreground-color`, which no theme defined, so the whole declaration was invalid and dropped. Four of the fourteen properties mapped by `createThemeDefinition` had no value in either theme; all of them are now defined, which also restores the carousel's high-contrast foreground, gives the `brand` theme a valid `border-width` outside high-contrast mode, and makes the Pattern layer's tokens resolve. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.bugfix.10 b/frontend/packages/volto-light-theme/news/22.bugfix.10
new file mode 100644
index 0000000..f9534c9
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.bugfix.10
@@ -0,0 +1 @@
+Fixed the content-type colours doing nothing when set from the themes control panel. `_root.scss` read `--event-color-override`, `--file-color-override` and `--image-color-override`, which nothing writes: a theme's `event_color_light` setting reaches the page as `--event-color-light`. The three tokens now read the properties a theme actually sets, through `light-dark()` like every other colour, so they follow the colour mode as well. The contract between the backend schema and the stylesheet is now tested from both ends — the previous tests checked that a field derives a custom property, but not that any stylesheet reads it. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.bugfix.11 b/frontend/packages/volto-light-theme/news/22.bugfix.11
new file mode 100644
index 0000000..9cc0b92
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.bugfix.11
@@ -0,0 +1 @@
+Gave the `documentByline` block a stylesheet. It had none anywhere in `src/theme/`, so on a page it started flush against the viewport edge while every other block sat in the centred content column. The three fields are now inline, separated by a dash, at the small type step, with author names comma-separated; the byline also reads author first, then published, then modified, and its rows are paragraphs rather than nested containers. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.bugfix.2 b/frontend/packages/volto-light-theme/news/22.bugfix.2
new file mode 100644
index 0000000..4d5f533
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.bugfix.2
@@ -0,0 +1 @@
+Fixed the `documentByline` block presenting itself as a weather block: its schema title read "Previsão do Tempo", contradicting its registration title, and its exported data interface declared `location` and `measure` instead of the three fields the schema actually has. The block is now titled "Byline" throughout, and its boolean fields are no longer marked required — one of them defaults to `false`, which made the block unsaveable in a strict form. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.bugfix.3 b/frontend/packages/volto-light-theme/news/22.bugfix.3
new file mode 100644
index 0000000..12ad204
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.bugfix.3
@@ -0,0 +1 @@
+Fixed the Hero block's `fullWidth` option being unreachable. Both views branch on it to render full-bleed when there is no image, but it appeared in no fieldset, so no editor could set it. It is now part of the Layout fieldset. Also corrected a `--theme-low-contrast-foreground` reference in `_heroBlock.scss` that was missing its `-color` suffix and silently dropped the colour. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.bugfix.4 b/frontend/packages/volto-light-theme/news/22.bugfix.4
new file mode 100644
index 0000000..fae5c68
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.bugfix.4
@@ -0,0 +1 @@
+Fixed the carousel and highlight listing variations formatting dates as `pt-BR` regardless of the active language. Both now format through the locale from `react-intl`. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.bugfix.5 b/frontend/packages/volto-light-theme/news/22.bugfix.5
new file mode 100644
index 0000000..2e8374c
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.bugfix.5
@@ -0,0 +1 @@
+Fixed the header bar and accessibility control stories rendering out of context. The accessibility controls are drawn as light pills for the dark header bar, so on the story's hardcoded pale background they read as unstyled browser buttons and wrapped onto two lines; they now render inside the same `header-wrapper` → `header-bar-wrapper` → `header-bar` → `header-bar__inner` chain the header builds. The hardcoded greys in the header bar, accessibility and dropdown stories were replaced with theme tokens so they follow the colour mode, and two Portuguese labels left in the header bar mocks were translated. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.bugfix.6 b/frontend/packages/volto-light-theme/news/22.bugfix.6
new file mode 100644
index 0000000..25d8314
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.bugfix.6
@@ -0,0 +1 @@
+Fixed the navigation story decorator applying only part of the selector the stylesheet needs. `_navigation.scss` nests everything under `#navigation.navigation` and `&.scNavigation`, and the decorator supplied the id and the first class but not the second, so none of the rules matched: the fat menu rendered its content but `.submenu-items` never became a two-column grid and its links kept the browser's default colour. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.bugfix.7 b/frontend/packages/volto-light-theme/news/22.bugfix.7
new file mode 100644
index 0000000..3ea4c8c
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.bugfix.7
@@ -0,0 +1 @@
+Fixed five blocks erroring in the blocks gallery. `accordion` needs `data.data` with a nested `blocks_layout`, `slateTable` needs `data.table.rows`, and `highlight` reads `state.content.subrequests` keyed by block id — all three threw on undefined. `search` and `eventCalendar` dispatch thunks on mount, which the plain mock store rejects, so the gallery now uses Volto's real-store wrapper. All 42 registered blocks render without error. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.bugfix.8 b/frontend/packages/volto-light-theme/news/22.bugfix.8
new file mode 100644
index 0000000..d2e15a4
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.bugfix.8
@@ -0,0 +1 @@
+Fixed the fat menu stories rendering out of position and unstyled. The panel is absolutely positioned against the menu item that triggers it, so it needs the `.desktop-menu` list and an item with width; the open state is signalled by an `active` class, which two decorators had spelled differently. Every story is now also constrained to the default container width and centred, with an opt-out for the views and header that genuinely span the page. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.bugfix.9 b/frontend/packages/volto-light-theme/news/22.bugfix.9
new file mode 100644
index 0000000..3b23ea6
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.bugfix.9
@@ -0,0 +1 @@
+Aligned `ThemeSettings` type and `fixtures.ts` mock data to match the actual backend schema (which provides `_light` and `_dark` pairs directly). Removed redundant CSS token generation in `themeStyles.ts` and fixed the `COLOR_FIELD` validation regex to correctly process the `_light` and `_dark` color fields. @humanaice
diff --git a/frontend/packages/volto-light-theme/news/22.feature b/frontend/packages/volto-light-theme/news/22.feature
new file mode 100644
index 0000000..9779e09
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.feature
@@ -0,0 +1 @@
+Made every user-facing string in the add-on translatable. All labels, block and variation titles, schema field titles and descriptions, editor placeholders and carousel `aria-label`s now go through `react-intl` with stable message ids and English default messages, replacing the hardcoded Portuguese that had no catalogue behind it. Block and listing-variation titles are registered for extraction in `src/index.ts`, since Volto translates those through `formatMessageWithFallback` using the string itself as the id. The extraction yields 147 messages and the `pt_BR` catalogue is complete; `es` and `de` remain empty. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.feature.2 b/frontend/packages/volto-light-theme/news/22.feature.2
new file mode 100644
index 0000000..4ff2789
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.feature.2
@@ -0,0 +1 @@
+Added a Storybook theme decorator with three toolbar controls: colour mode (light, dark, high contrast), block theme (Primary, Brand) and site theme (an `ISCVLTThemeDefinition` record). Stories previously rendered block views bare, so `--theme-*` was undefined in every one of them and Storybook never exercised the block theme system at all — HeroBlock alone carries 30 references to it, none of which resolved. The decorator reuses `createThemeDefinition`, so a theme added to the block config needs no change there. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.feature.3 b/frontend/packages/volto-light-theme/news/22.feature.3
new file mode 100644
index 0000000..d0da4a4
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.feature.3
@@ -0,0 +1 @@
+Added stories for the four listing variations — Grid, Highlight, Carousel and Media Carousel — with a shared fixture shaped like a `@querystring-search` response. Each renders inside the `block listing <variation>` wrapper the listing block produces on a page, because `_listing.scss` is scoped to `body .block.listing`: without it none of the variation styling applies. This is what makes the restored focus outlines observable, and it closes the largest remaining gap in Storybook coverage. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.feature.4 b/frontend/packages/volto-light-theme/news/22.feature.4
new file mode 100644
index 0000000..d305006
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.feature.4
@@ -0,0 +1 @@
+Added page-level view stories rendering a Document and a News Item through Volto's `DefaultView`, with every block the add-on ships composed in one `blocks_layout`. Block stories show each block alone; these show the spacing between them, the container widths, and the `#page-document` container that several listing rules are scoped to. The fixture seeds the querystring results the listing block would otherwise fetch, so it renders real cards without a backend. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.feature.5 b/frontend/packages/volto-light-theme/news/22.feature.5
new file mode 100644
index 0000000..54c09bd
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.feature.5
@@ -0,0 +1 @@
+Added a blocks inventory and a blocks gallery to Storybook. The inventory reads `config.blocks.blocksConfig` at runtime, so it lists every block an editor actually has — 42 of them, of which this add-on ships four and extends two, the rest coming from Volto core, `@plone/volto-slate` and `@kitconcept/volto-light-theme`. The gallery renders each one through `RenderBlocks` with sample data, isolated behind a per-block error boundary so a block that throws is reported rather than blanking the page. Both update themselves when a dependency is bumped. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.feature.6 b/frontend/packages/volto-light-theme/news/22.feature.6
new file mode 100644
index 0000000..ec16557
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.feature.6
@@ -0,0 +1 @@
+Extended the Storybook coverage of blocks that come from dependencies. The social embed blocks now carry the sample payloads from their own stories in `@kitconcept/volto-social-blocks` rather than invented ones; `gridBlock` gets stories at one, two, three and four columns of image blocks with titles and captions; and the page-level composition gained a grid and an embed alongside the existing blocks. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.feature.7 b/frontend/packages/volto-light-theme/news/22.feature.7
new file mode 100644
index 0000000..00f8d27
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.feature.7
@@ -0,0 +1 @@
+Added an Event view story. Upstream volto-light-theme gives the Event type its own initial blocks — `title`, a fixed `eventMetadata` and `slate` — and the `eventMetadata` block reads the schedule, location and contact fields off the content item, which is what gives the type its distinct layout. The fixture carries those fields so the block renders as it would on a site. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.feature.8 b/frontend/packages/volto-light-theme/news/22.feature.8
new file mode 100644
index 0000000..26d404c
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.feature.8
@@ -0,0 +1 @@
+Added separator block stories covering its three controls — block width, the short-line toggle and alignment. Alignment only applies when `shortLine` is on, which its schema enforces by disabling the control otherwise, so the stories pair them rather than offering alignment on a full-width rule. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.feature.9 b/frontend/packages/volto-light-theme/news/22.feature.9
new file mode 100644
index 0000000..e6ed241
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.feature.9
@@ -0,0 +1 @@
+Added stories for the navigation components — the navigation itself, menu items, the fat menu, and its section header and item grid — covering the active states, sections with and without children, and missing descriptions. The fixtures and a scope decorator had been written for this in an earlier change but nothing consumed them. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.internal b/frontend/packages/volto-light-theme/news/22.internal
new file mode 100644
index 0000000..e65c4fc
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.internal
@@ -0,0 +1 @@
+Added a test guarding the contract between `createThemeDefinition` and `_root.scss`. Nothing else catches a theme property that the factory maps but the stylesheet never defines: a `var()` with no definition and no fallback is invalid at computed-value time, so the whole declaration is silently dropped — which is how six focus outlines in `_listing.scss` stopped rendering. The test reads the `:root` block specifically, because a token declared only under `[data-theme='high-contrast']` is still undefined in light and dark. Verified by reintroducing both original defects and confirming each one fails it. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.internal.2 b/frontend/packages/volto-light-theme/news/22.internal.2
new file mode 100644
index 0000000..527cfe4
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.internal.2
@@ -0,0 +1 @@
+Storybook now serves the add-on's `public` folder at its root, so a story can reference a bundled asset as `/images/example.jpg` instead of depending on a remote image host at view time. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.internal.3 b/frontend/packages/volto-light-theme/news/22.internal.3
new file mode 100644
index 0000000..2c87c71
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.internal.3
@@ -0,0 +1 @@
+Split the stories by ownership: a story for a component this package ships stays beside the component, and a story for a component from a dependency moved to `src/storybook/` next to the decorator and the shared fixtures. The blocks inventory and gallery, Volto's `DefaultView`, core's `gridBlock` and the separator block were filed under `components/` as though the add-on owned them. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.internal.4 b/frontend/packages/volto-light-theme/news/22.internal.4
new file mode 100644
index 0000000..ad11718
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.internal.4
@@ -0,0 +1 @@
+Prepared the add-on for export to Claude Design. `createThemeDefinition` moved to its own `config/blockThemes` module — `config/blocks` re-exports it, so every existing import is unchanged — because importing the factory from there registers every block and drags in the slate editor. Four modules under `src/storybook/` supply what a standalone bundle lacks: a curated component surface, Volto's razzle-time globals, a minimally seeded config registry, and the provider chain the storybook decorators would otherwise give a story. The icons in `ThemeToggle` and `HoverReaderControls` are now imported through the package name rather than a relative path, the same form `.storybook/preview.jsx` already used, so a bundler other than webpack can resolve them. @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.internal.5 b/frontend/packages/volto-light-theme/news/22.internal.5
new file mode 100644
index 0000000..faad1fc
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.internal.5
@@ -0,0 +1 @@
+Stopped publishing what projects do not consume. `.npmignore` now excludes stories, tests, their fixture assets, and the build products the design-system export emits — npm ignores `.gitignore` entirely once an `.npmignore` exists, so gitignored artifacts were being packed. The tarball drops from 404 files (1242 KB) to 192 (509 KB). @ericof
diff --git a/frontend/packages/volto-light-theme/news/22.internal.6 b/frontend/packages/volto-light-theme/news/22.internal.6
new file mode 100644
index 0000000..cf7f8c4
--- /dev/null
+++ b/frontend/packages/volto-light-theme/news/22.internal.6
@@ -0,0 +1 @@
+Replaced the story imagery with fourteen bundled photographs of known provenance. The fixtures pointed at `picsum.photos` — arbitrary third-party images, no licence trail, and a network request at view time. They now `import` files from `src/storybook/images/`, which webpack inlines for Storybook and esbuild inlines for the Claude Design export, so stories render offline and reproducibly. A new `imageScales()` helper shapes them the way Plone's REST API shapes an image field, and `optimize.sh` keeps them under a weight budget that matters because the export inlines them as data URIs. Also scoped the package's `README.md` ignore rule to the package root: a bare rule was hiding `src/storybook/README.md`, which `DESIGN_SYSTEM.md` links to, from git entirely. @ericof
diff --git a/frontend/packages/volto-light-theme/public/images/README.md b/frontend/packages/volto-light-theme/public/images/README.md
new file mode 100644
index 0000000..3bc8ed5
--- /dev/null
+++ b/frontend/packages/volto-light-theme/public/images/README.md
@@ -0,0 +1,11 @@
+# Public images
+
+Served at the Storybook root by `staticDirs` in `frontend/.storybook/main.js`, and
+shipped inside the npm package, so anything here reaches every project that installs
+the add-on. Keep it to assets a *running site* needs.
+
+**Story photographs do not belong here.** They live in `src/storybook/images/`, where
+the fixtures `import` them: an import is inlined by webpack for Storybook and by
+esbuild for the Claude Design export, so the previews work offline, and `.npmignore`
+keeps the weight out of the published package. A file here would instead be fetched
+by URL at view time — which resolves to nothing in a Claude Design preview.
diff --git a/frontend/packages/volto-light-theme/public/images/placeholder.svg b/frontend/packages/volto-light-theme/public/images/placeholder.svg
new file mode 100644
index 0000000..3218dbb
--- /dev/null
+++ b/frontend/packages/volto-light-theme/public/images/placeholder.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
+  <rect width="1200" height="675" fill="#d8dcdf"/>
+  <path d="M0 675L420 375l260 180L900 405l300 270z" fill="#b9c0c5"/>
+  <circle cx="300" cy="180" r="80" fill="#c8ced2"/>
+  <text x="600" y="640" text-anchor="middle" font-family="system-ui,sans-serif"
+        font-size="28" fill="#6b7378">placeholder</text>
+</svg>
diff --git a/frontend/packages/volto-light-theme/src/components/AccessibilityControls/AccessibilityControls.stories.tsx b/frontend/packages/volto-light-theme/src/components/AccessibilityControls/AccessibilityControls.stories.tsx
index 1d9fdd0..530a14a 100644
--- a/frontend/packages/volto-light-theme/src/components/AccessibilityControls/AccessibilityControls.stories.tsx
+++ b/frontend/packages/volto-light-theme/src/components/AccessibilityControls/AccessibilityControls.stories.tsx
@@ -15,9 +15,27 @@ const withStoredScale: Decorator = (Story, context) => {
   }
 
   return (
-    <div style={{ backgroundColor: '#f0f0f0', padding: '2rem' }}>
-      <Story />
-      <p style={{ marginTop: '2rem' }}>
+    <div style={{ background: 'var(--primary-color)', padding: '2rem' }}>
+      {/*
+        The controls are styled for the dark header bar — `_accessibilityControls.scss`
+        gives the buttons a light ground and expects `--secondary-color` behind
+        them. Rendered on a pale page they read as unstyled browser buttons, and
+        without the bar's flex row they wrap. This is the chain `HeaderBar` builds.
+      */}
+      <header className="header-wrapper">
+        <div className="header-bar-wrapper">
+          <div className="header-bar">
+            <div className="header-bar__inner">
+              <div className="header-bar__actions">
+                <Story />
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <p
+        style={{ marginTop: '2rem', color: 'var(--primary-foreground-color)' }}
+      >
         Hover over this text to test the hover reader! It will read the text out
         loud using window.speechSynthesis. You can also test the font size
         controls.
diff --git a/frontend/packages/volto-light-theme/src/components/AccessibilityControls/FontSizeControls.tsx b/frontend/packages/volto-light-theme/src/components/AccessibilityControls/FontSizeControls.tsx
index 2b43745..5aeddbb 100644
--- a/frontend/packages/volto-light-theme/src/components/AccessibilityControls/FontSizeControls.tsx
+++ b/frontend/packages/volto-light-theme/src/components/AccessibilityControls/FontSizeControls.tsx
@@ -15,11 +15,11 @@ const FONT_SCALE_STEP = 0.1;
 const messages = defineMessages({
   increaseFontSize: {
     id: 'accessibilityIncreaseFontSize',
-    defaultMessage: 'Aumentar fonte',
+    defaultMessage: 'Increase font size',
   },
   decreaseFontSize: {
     id: 'accessibilityDecreaseFontSize',
-    defaultMessage: 'Diminuir fonte',
+    defaultMessage: 'Decrease font size',
   },
 });
 
diff --git a/frontend/packages/volto-light-theme/src/components/AccessibilityControls/HoverReaderControls.tsx b/frontend/packages/volto-light-theme/src/components/AccessibilityControls/HoverReaderControls.tsx
index d32f86b..c77e648 100644
--- a/frontend/packages/volto-light-theme/src/components/AccessibilityControls/HoverReaderControls.tsx
+++ b/frontend/packages/volto-light-theme/src/components/AccessibilityControls/HoverReaderControls.tsx
@@ -2,8 +2,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
-import speedSVG from '../../icons/speed.svg';
-import earSVG from '../../icons/ear.svg';
+import speedSVG from '@simplesconsultoria/volto-light-theme/icons/speed.svg';
+import earSVG from '@simplesconsultoria/volto-light-theme/icons/ear.svg';
 import {
   isSpeechSupported,
   ensureVoicesLoaded,
@@ -29,11 +29,11 @@ const TEXT_TARGET_SELECTOR =
 const messages = defineMessages({
   hoverReaderLabel: {
     id: 'accessibilityHoverReaderLabel',
-    defaultMessage: 'Leitura ao passar o mouse',
+    defaultMessage: 'Read on hover',
   },
   speedLabel: {
     id: 'accessibilitySpeedLabel',
-    defaultMessage: 'Velocidade do leitor',
+    defaultMessage: 'Reader speed',
   },
 });
 
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/DocumentByLine/index.ts b/frontend/packages/volto-light-theme/src/components/Blocks/DocumentByLine/index.ts
index 93ad2df..a611764 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/DocumentByLine/index.ts
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/DocumentByLine/index.ts
@@ -5,13 +5,14 @@ import DocumentByLineSVG from '@plone/volto/icons/pencil.svg';
 import type { BlockConfigBase } from '@plone/types';
 
 export interface DocumentByLineBlockData {
-  location?: string;
-  measure?: string;
+  showPublished?: boolean;
+  showModified?: boolean;
+  showAuthor?: boolean;
 }
 
 const DocumentByLineBlockInfo: BlockConfigBase = {
   id: 'documentByline',
-  title: 'Assinatura',
+  title: 'Byline',
   icon: DocumentByLineSVG,
   group: 'common',
   view: DocumentByLineBlockView,
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/DocumentByLine/schema.ts b/frontend/packages/volto-light-theme/src/components/Blocks/DocumentByLine/schema.ts
index de64b3b..b77cb12 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/DocumentByLine/schema.ts
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/DocumentByLine/schema.ts
@@ -2,21 +2,21 @@ import { defineMessages } from 'react-intl';
 import type { BlockSchemaProps } from '@plone/types';
 
 const messages = defineMessages({
-  DocumentByLineBlock: {
-    id: 'Previsão do Tempo',
-    defaultMessage: 'Previsão do Tempo',
+  documentByline: {
+    id: 'Byline',
+    defaultMessage: 'Byline',
   },
   showPublished: {
-    id: 'Exibir data de publicação?',
-    defaultMessage: 'Exibir data de publicação?',
+    id: 'Show publication date',
+    defaultMessage: 'Show publication date',
   },
   showModified: {
-    id: 'Exibir última modificação?',
-    defaultMessage: 'Exibir última modificação?',
+    id: 'Show last modification date',
+    defaultMessage: 'Show last modification date',
   },
   showAuthor: {
-    id: 'Exibir autor?',
-    defaultMessage: 'Exibir autor?',
+    id: 'Show author',
+    defaultMessage: 'Show author',
   },
 });
 
@@ -24,7 +24,7 @@ export const DocumentByLineSchema = (props: BlockSchemaProps): any => {
   const { intl } = props;
 
   return {
-    title: intl.formatMessage(messages.DocumentByLineBlock),
+    title: intl.formatMessage(messages.documentByline),
     fieldsets: [
       {
         id: 'default',
@@ -50,6 +50,6 @@ export const DocumentByLineSchema = (props: BlockSchemaProps): any => {
       },
     },
 
-    required: ['showPublished', 'showModified', 'showAuthor'],
+    required: [],
   };
 };
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/HeroBlock.stories.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/HeroBlock.stories.tsx
index 1380e57..9e4fff7 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/HeroBlock.stories.tsx
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/HeroBlock.stories.tsx
@@ -3,6 +3,7 @@ import type { Decorator, Meta, StoryObj } from '@storybook/react';
 import Wrapper from '@plone/volto/storybook';
 
 import View from './View';
+import heroImage from '../../../storybook/images/hero.jpg';
 
 const withWrapper: Decorator = (Story, context) => {
   return (
@@ -33,18 +34,18 @@ type Story = StoryObj<typeof meta>;
 const sampleData = {
   '@type': 'heroBlock',
   overwrite: true,
-  title: 'Isso é um Título de Destaque',
+  title: 'This is a Highlighted Title',
   description:
-    'Uma breve descrição sobre o assunto principal para engajar o leitor.',
-  headerText: 'Notícia',
-  footerText: 'Fonte oficial',
+    'A short description of the main topic, written to engage the reader.',
+  headerText: 'News',
+  footerText: 'Official source',
   button: true,
-  buttonText: 'Saiba mais',
-  url: 'https://picsum.photos/seed/hero/800/600',
+  buttonText: 'Read more',
+  url: heroImage,
   date: '2026-06-17T16:33:00-03:00',
   showDate: true,
-  tags: ['Brasil', 'Diracom'],
-  fileType: 'Artigo',
+  tags: ['Policy', 'Community'],
+  fileType: 'Article',
 };
 
 export const FlexLeft: Story = {
@@ -66,7 +67,7 @@ export const FlexRightFull: Story = {
       variation: 'flex',
       textSide: 'right',
       fullWidth: true,
-      url: null, // Sem imagem para testar o fullWidth
+      url: null, // no image, to exercise fullWidth
     },
   },
 };
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/index.ts b/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/index.ts
index 7992932..b56ce44 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/index.ts
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/index.ts
@@ -23,12 +23,12 @@ const HeroBlockInfo: BlockConfigBase = {
   variations: [
     {
       id: 'flex',
-      title: 'Flex / Decorativa',
+      title: 'Flex / Decorative',
       isDefault: true,
     },
     {
       id: 'card',
-      title: 'Card Colado',
+      title: 'Attached Card',
     },
   ],
 };
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/schema.ts b/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/schema.ts
index 061b3dd..53974e1 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/schema.ts
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/schema.ts
@@ -4,97 +4,175 @@ import { defaultStylingSchema } from '../schema';
 
 const messages = defineMessages({
   heroBlock: {
-    id: 'heroBlock',
+    id: 'Hero Block',
     defaultMessage: 'Hero Block',
   },
+  content: {
+    id: 'Content',
+    defaultMessage: 'Content',
+  },
+  overwrite: {
+    id: 'Overwrite content',
+    defaultMessage: 'Overwrite content',
+  },
+  overwriteDescription: {
+    id: 'Overwrite content description',
+    defaultMessage:
+      'Check to customise the title, description and image instead of pulling them automatically from the highlighted item',
+  },
   headerText: {
-    id: 'heroHeaderText',
-    defaultMessage: 'Texto do cabeçalho',
+    id: 'Header text',
+    defaultMessage: 'Header text',
+  },
+  headerTextDescription: {
+    id: 'Header text description',
+    defaultMessage: 'Small text displayed above the main title.',
   },
   title: {
     id: 'Title',
-    defaultMessage: 'Título',
+    defaultMessage: 'Title',
+  },
+  titleDescription: {
+    id: 'Hero title description',
+    defaultMessage: 'Main highlighted title.',
   },
   description: {
     id: 'Description',
-    defaultMessage: 'Descrição',
+    defaultMessage: 'Description',
+  },
+  descriptionDescription: {
+    id: 'Hero description description',
+    defaultMessage: 'Explanatory text or summary displayed below the title.',
   },
   footerText: {
-    id: 'heroFooterText',
-    defaultMessage: 'Texto do rodapé',
+    id: 'Footer text',
+    defaultMessage: 'Footer text',
+  },
+  footerTextDescription: {
+    id: 'Footer text description',
+    defaultMessage:
+      'Additional information displayed at the foot of the block.',
   },
   showDate: {
-    id: 'heroShowDate',
-    defaultMessage: 'Mostrar data',
+    id: 'Show date',
+    defaultMessage: 'Show date',
   },
   tags: {
-    id: 'heroTags',
+    id: 'Tags',
     defaultMessage: 'Tags',
   },
   image: {
     id: 'Image',
-    defaultMessage: 'Imagem',
+    defaultMessage: 'Image',
+  },
+  hideImage: {
+    id: 'Hide image',
+    defaultMessage: 'Hide image',
+  },
+  imageFit: {
+    id: 'Image fit',
+    defaultMessage: 'Image fit',
+  },
+  imageFitCover: {
+    id: 'Cover',
+    defaultMessage: 'Cover',
   },
-  imageFieldset: {
-    id: 'heroImageFieldset',
-    defaultMessage: 'Imagem',
+  imageFitContain: {
+    id: 'Contain',
+    defaultMessage: 'Contain',
+  },
+  imageFitDescription: {
+    id: 'Image fit description',
+    defaultMessage:
+      '"Cover" fills the whole available space, cropping the edges of the image if needed. "Contain" fits the entire image inside the space, which may leave empty bands at the sides.',
   },
   cta: {
-    id: 'heroCTA',
+    id: 'Call to Action',
     defaultMessage: 'Call to Action',
   },
   button: {
-    id: 'Button',
-    defaultMessage: 'Mostrar botão',
+    id: 'Show button',
+    defaultMessage: 'Show button',
   },
   buttonLink: {
-    id: 'buttonLink',
-    defaultMessage: 'Link do botão',
+    id: 'Button link',
+    defaultMessage: 'Button link',
   },
   buttonText: {
-    id: 'buttonText',
-    defaultMessage: 'Texto do botão',
+    id: 'Button text',
+    defaultMessage: 'Button text',
+  },
+  buttonTextDescription: {
+    id: 'Button text description',
+    defaultMessage: 'The text shown inside the button (e.g. "Read more").',
   },
   layout: {
-    id: 'heroLayout',
+    id: 'Layout',
     defaultMessage: 'Layout',
   },
   fullWidth: {
-    id: 'heroFullWidth',
-    defaultMessage: 'Largura total',
+    id: 'Full width',
+    defaultMessage: 'Full width',
   },
-  textSide: {
-    id: 'heroTextSide',
-    defaultMessage: 'Lado do texto',
+  fullWidthDescription: {
+    id: 'Full width description',
+    defaultMessage:
+      'Let the text span the whole block when there is no image to show.',
   },
-  textSideLeft: {
-    id: 'heroTextSideLeft',
-    defaultMessage: 'Esquerda',
+  blockWidth: {
+    id: 'Block Width',
+    defaultMessage: 'Block Width',
   },
-  textSideRight: {
-    id: 'heroTextSideRight',
-    defaultMessage: 'Direita',
+  imageSize: {
+    id: 'Image size / empty space',
+    defaultMessage: 'Image size / empty space',
   },
-  highlightItem: {
-    id: 'heroHighlightItem',
-    defaultMessage: 'Item de Destaque',
+  imageSizeDescription: {
+    id: 'Image size description',
+    defaultMessage:
+      'Controls the width reserved for the image (even when there is none), which in turn sets the space for the text.',
+  },
+  imageSizeNone: {
+    id: 'Image size none',
+    defaultMessage: '0% (text full width)',
+  },
+  imageSizeHalf: {
+    id: 'Image size half',
+    defaultMessage: '50% (half)',
+  },
+  titleTag: {
+    id: 'Title element',
+    defaultMessage: 'Title element',
   },
-  href: {
-    id: 'heroHref',
-    defaultMessage: 'Item de destaque',
+  titleTagParagraph: {
+    id: 'Paragraph (P)',
+    defaultMessage: 'Paragraph (P)',
+  },
+  titleTagDescription: {
+    id: 'Title element description',
+    defaultMessage:
+      'H1 is the main page title, H2 the secondary title and H3 the tertiary one. P renders the title as a paragraph.',
+  },
+  textSide: {
+    id: 'Text side',
+    defaultMessage: 'Text side',
+  },
+  highlightItem: {
+    id: 'Highlighted item',
+    defaultMessage: 'Highlighted item',
   },
   hrefDescription: {
-    id: 'heroHrefDescription',
+    id: 'Highlighted item description',
     defaultMessage:
-      'Selecione um conteúdo para puxar dados automaticamente (título, descrição, imagem)',
+      'Select a content item to pull its data automatically (title, description, image)',
   },
   fileType: {
-    id: 'heroFileType',
-    defaultMessage: 'Tipo do arquivo',
+    id: 'File type',
+    defaultMessage: 'File type',
   },
-  styling: {
-    id: 'Styling',
-    defaultMessage: 'Estilo',
+  fileTypeDescription: {
+    id: 'File type description',
+    defaultMessage: 'E.g. PDF, Report, Article',
   },
 });
 
@@ -105,7 +183,13 @@ interface HeroSchemaProps {
   [key: string]: any;
 }
 
-const layoutFields = ['blockWidth', 'textSide', 'imageSize', 'titleTag'];
+const layoutFields = [
+  'blockWidth',
+  'textSide',
+  'imageSize',
+  'fullWidth',
+  'titleTag',
+];
 
 export function HeroBlockSchema(props: HeroSchemaProps): any {
   const { intl } = props;
@@ -137,12 +221,12 @@ export function HeroBlockSchema(props: HeroSchemaProps): any {
     fieldsets: [
       {
         id: 'default',
-        title: 'Conteúdo',
+        title: intl.formatMessage(messages.content),
         fields: defaultFields,
       },
       {
         id: 'image',
-        title: intl.formatMessage(messages.imageFieldset),
+        title: intl.formatMessage(messages.image),
         fields: formData.overwrite
           ? ['preview_image', 'hideImage', 'imageFit']
           : ['hideImage', 'imageFit'],
@@ -160,15 +244,14 @@ export function HeroBlockSchema(props: HeroSchemaProps): any {
     ],
     properties: {
       overwrite: {
-        title: 'Sobrescrever conteúdo',
-        description:
-          'Marque para customizar o título, descrição e imagem ao invés de puxar automaticamente do item de destaque',
+        title: intl.formatMessage(messages.overwrite),
+        description: intl.formatMessage(messages.overwriteDescription),
         type: 'boolean',
         default: false,
       },
       headerText: {
         title: intl.formatMessage(messages.headerText),
-        description: 'Texto pequeno exibido acima do título principal.',
+        description: intl.formatMessage(messages.headerTextDescription),
         type: 'string',
       },
       showDate: {
@@ -178,18 +261,18 @@ export function HeroBlockSchema(props: HeroSchemaProps): any {
       },
       title: {
         title: intl.formatMessage(messages.title),
-        description: 'Título principal em destaque.',
+        description: intl.formatMessage(messages.titleDescription),
         type: 'string',
       },
       description: {
         title: intl.formatMessage(messages.description),
-        description: 'Texto explicativo ou resumo exibido abaixo do título.',
+        description: intl.formatMessage(messages.descriptionDescription),
         type: 'string',
         widget: 'textarea',
       },
       footerText: {
         title: intl.formatMessage(messages.footerText),
-        description: 'Informação adicional exibida no rodapé do bloco.',
+        description: intl.formatMessage(messages.footerTextDescription),
         type: 'string',
       },
       tags: {
@@ -202,7 +285,7 @@ export function HeroBlockSchema(props: HeroSchemaProps): any {
       fileType: {
         title: intl.formatMessage(messages.fileType),
         type: 'string',
-        description: 'Ex: PDF, Relatório, Artigo',
+        description: intl.formatMessage(messages.fileTypeDescription),
       },
       preview_image: {
         title: intl.formatMessage(messages.image),
@@ -212,20 +295,19 @@ export function HeroBlockSchema(props: HeroSchemaProps): any {
         selectedItemAttrs: ['image_field', 'image_scales'],
       },
       hideImage: {
-        title: 'Esconder Imagem',
+        title: intl.formatMessage(messages.hideImage),
         type: 'boolean',
         default: false,
       },
       imageFit: {
-        title: 'Ajuste da Imagem',
+        title: intl.formatMessage(messages.imageFit),
         type: 'string',
         choices: [
-          ['cover', 'Preencher (Cover)'],
-          ['contain', 'Conter (Contain)'],
+          ['cover', intl.formatMessage(messages.imageFitCover)],
+          ['contain', intl.formatMessage(messages.imageFitContain)],
         ],
         default: 'cover',
-        description:
-          'O "Cover" preenche todo o espaço disponível, cortando as bordas da imagem se necessário. O "Contain" ajusta a imagem inteira dentro do espaço, podendo deixar faixas laterais vazias.',
+        description: intl.formatMessage(messages.imageFitDescription),
       },
       button: {
         title: intl.formatMessage(messages.button),
@@ -239,47 +321,45 @@ export function HeroBlockSchema(props: HeroSchemaProps): any {
       },
       buttonText: {
         title: intl.formatMessage(messages.buttonText),
-        description:
-          'O texto que aparecerá dentro do botão (ex: "Saiba mais").',
+        description: intl.formatMessage(messages.buttonTextDescription),
         type: 'string',
       },
       fullWidth: {
         title: intl.formatMessage(messages.fullWidth),
+        description: intl.formatMessage(messages.fullWidthDescription),
         type: 'boolean',
         default: false,
       },
       blockWidth: {
-        title: 'Largura do Bloco',
+        title: intl.formatMessage(messages.blockWidth),
         widget: 'blockWidth',
         default: 'layout',
       },
       imageSize: {
-        title: 'Tamanho da Imagem / Espaço Vazio',
-        description:
-          'Controla a largura reservada para a imagem (mesmo se não houver uma), definindo o espaço do texto.',
+        title: intl.formatMessage(messages.imageSize),
+        description: intl.formatMessage(messages.imageSizeDescription),
         type: 'string',
         choices: [
-          ['0%', '0% (Texto 100%)'],
+          ['0%', intl.formatMessage(messages.imageSizeNone)],
           ['30%', '30%'],
           ['40%', '40%'],
-          ['50%', '50% (Metade)'],
+          ['50%', intl.formatMessage(messages.imageSizeHalf)],
           ['60%', '60%'],
           ['70%', '70%'],
         ],
         default: '50%',
       },
       titleTag: {
-        title: 'Elemento do Título',
+        title: intl.formatMessage(messages.titleTag),
         type: 'string',
         choices: [
           ['h1', 'H1'],
           ['h2', 'H2'],
           ['h3', 'H3'],
-          ['p', 'Parágrafo (P)'],
+          ['p', intl.formatMessage(messages.titleTagParagraph)],
         ],
         default: 'h2',
-        description:
-          'O H1 é o título principal da página. O H2 é o título secundário. O H3 é o título terciário. O P é o parágrafo.',
+        description: intl.formatMessage(messages.titleTagDescription),
       },
       textSide: {
         title: intl.formatMessage(messages.textSide),
@@ -288,7 +368,7 @@ export function HeroBlockSchema(props: HeroSchemaProps): any {
         default: 'left',
       },
       href: {
-        title: intl.formatMessage(messages.href),
+        title: intl.formatMessage(messages.highlightItem),
         description: intl.formatMessage(messages.hrefDescription),
         widget: 'object_browser',
         mode: 'link',
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/useHeroBlockContent.ts b/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/useHeroBlockContent.ts
index 69e5be5..92d2bb9 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/useHeroBlockContent.ts
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/HeroBlock/useHeroBlockContent.ts
@@ -1,7 +1,20 @@
 import { useMemo } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import type { HeroBlockData } from './types';
 import { imageInfoFromHeroBlock } from './imageInformation';
 
+const messages = defineMessages({
+  selectHighlightItem: {
+    id: 'Select a highlighted item',
+    defaultMessage: 'Select a highlighted item',
+  },
+  emptyHeroBlock: {
+    id: 'Empty hero block placeholder',
+    defaultMessage:
+      'This is a Hero Block. Add an item in the sidebar to fill it automatically.',
+  },
+});
+
 interface UseHeroBlockContentProps {
   data: HeroBlockData;
   isEditMode?: boolean;
@@ -13,6 +26,8 @@ export function useHeroBlockContent({
   isEditMode,
   defaultTitleTag = 'h2',
 }: UseHeroBlockContentProps) {
+  const intl = useIntl();
+
   return useMemo(() => {
     const hrefItem = data.href?.[0];
 
@@ -27,13 +42,12 @@ export function useHeroBlockContent({
         : hrefItem?.Description || hrefItem?.description || data.description;
 
     const displayTitle =
-      title || (isEditMode ? 'Selecione um Item de Destaque' : '');
+      title ||
+      (isEditMode ? intl.formatMessage(messages.selectHighlightItem) : '');
 
     const displayDescription =
       description ||
-      (isEditMode && !title
-        ? 'Este é um Hero Block. Por favor, adicione um item no menu lateral para preenchê-lo automaticamente.'
-        : '');
+      (isEditMode && !title ? intl.formatMessage(messages.emptyHeroBlock) : '');
 
     const date =
       hrefItem?.EffectiveDate ||
@@ -72,5 +86,5 @@ export function useHeroBlockContent({
       imageInfo,
       hasImage,
     };
-  }, [data, isEditMode, defaultTitleTag]);
+  }, [data, isEditMode, defaultTitleTag, intl]);
 }
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/CarouselTemplate.stories.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/CarouselTemplate.stories.tsx
new file mode 100644
index 0000000..1c02766
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/CarouselTemplate.stories.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+import CarouselTemplate from './CarouselTemplate';
+import { listingItems, singleItem } from './fixtures';
+
+/**
+ * `_listing.scss` is scoped to `body .block.listing`, and the variation rules to
+ * `&.carousel`, so the template has to sit inside the same wrapper the listing
+ * block renders on a page — otherwise none of its styling applies, including the
+ * focus outlines on cards.
+ */
+const withWrapper: Decorator = (Story) => (
+  <Wrapper anonymous>
+    <div style={{ padding: '2rem' }}>
+      <div className="block listing carousel">
+        <Story />
+      </div>
+    </div>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Blocks/Listing/Carousel',
+  component: CarouselTemplate,
+  decorators: [withWrapper],
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  argTypes: {
+    carouselObjectFit: {
+      control: { type: 'inline-radio' },
+      options: ['contain', 'cover'],
+    },
+    carouselMaxHeight: {
+      control: { type: 'range', min: 200, max: 1200, step: 20 },
+    },
+  },
+} satisfies Meta<typeof CarouselTemplate>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: listingItems,
+    carouselMaxHeight: 520,
+    carouselObjectFit: 'cover',
+    carouselObjectPosition: 'center center',
+  },
+};
+
+/** `contain` leaves bands at the sides rather than cropping. */
+export const Contain: Story = {
+  args: { ...Default.args, carouselObjectFit: 'contain' },
+};
+
+/** Auto-advance adds the play/pause control to the toolbar. */
+export const AutoPlay: Story = {
+  args: {
+    ...Default.args,
+    carouselAutoPlay: true,
+    carouselAutoPlayInterval: 6000,
+  },
+};
+
+export const WithHeadlineLink: Story = {
+  args: {
+    ...Default.args,
+    linkTitle: 'See all news',
+    linkHref: [{ '@id': '/news' }],
+  },
+};
+
+/** A single slide still renders the dot strip, with navigation a no-op. */
+export const SingleItem: Story = {
+  args: { ...Default.args, items: singleItem },
+};
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/CarouselTemplate.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/CarouselTemplate.tsx
index 5af58de..4c75333 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/CarouselTemplate.tsx
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/CarouselTemplate.tsx
@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
 import cx from 'classnames';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import config from '@plone/volto/registry';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
 
+import { carouselMessages } from './messages';
+
 import leftSVG from '@plone/volto/icons/left-key.svg';
 import rightSVG from '@plone/volto/icons/right-key.svg';
 import playSVG from '@plone/volto/icons/play.svg';
@@ -39,10 +42,10 @@ const isValidDate = (dateString?: string): boolean => {
   }
 };
 
-const formatDate = (dateString?: string): string => {
+const formatDate = (dateString: string | undefined, locale: string): string => {
   if (!isValidDate(dateString)) return '';
   const date = new Date(dateString as string);
-  return date.toLocaleDateString('pt-BR', {
+  return date.toLocaleDateString(locale, {
     day: '2-digit',
     month: '2-digit',
     year: 'numeric',
@@ -103,6 +106,7 @@ const CarouselTemplate: React.FC<
   carouselAutoPlay,
   carouselAutoPlayInterval,
 }) => {
+  const intl = useIntl();
   const slides = items.filter(Boolean);
   const PreviewImageComponent = config.getComponent('PreviewImage').component;
   const [activeIndex, setActiveIndex] = useState(0);
@@ -180,7 +184,7 @@ const CarouselTemplate: React.FC<
       <div
         className="listing-carousel__viewport"
         aria-roledescription="carousel"
-        aria-label="Carrossel"
+        aria-label={intl.formatMessage(carouselMessages.carousel)}
         onFocusCapture={() => setIsPlaying(false)}
       >
         <div
@@ -200,7 +204,7 @@ const CarouselTemplate: React.FC<
               item?.effective,
               item?.created,
             ].find(isValidDate);
-            const date = formatDate(dateString);
+            const date = formatDate(dateString, intl.locale);
 
             const videoUrl = getLikelyVideoUrl(item);
             const playableEmbedUrl =
@@ -218,7 +222,7 @@ const CarouselTemplate: React.FC<
                         ? '?autoplay=0&mute=1&playsinline=1&rel=0&modestbranding=1'
                         : '?autoplay=0&muted=1&playsinline=1',
                     ].join('')}
-                    title={title || 'Vídeo'}
+                    title={title || intl.formatMessage(carouselMessages.video)}
                     loading={isActiveSlide ? 'eager' : 'lazy'}
                     sandbox="allow-scripts allow-presentation"
                     allowFullScreen
@@ -278,7 +282,7 @@ const CarouselTemplate: React.FC<
       {canNavigate && (
         <div
           className="listing-carousel__controls"
-          aria-label="Controles do carrossel"
+          aria-label={intl.formatMessage(carouselMessages.controls)}
         >
           <button
             type="button"
@@ -287,7 +291,7 @@ const CarouselTemplate: React.FC<
               'listing-carousel__arrow--prev',
             )}
             onClick={() => goTo(activeIndex - 1)}
-            aria-label="Anterior"
+            aria-label={intl.formatMessage(carouselMessages.previous)}
           >
             <Icon name={leftSVG} size="20px" />
           </button>
@@ -295,7 +299,7 @@ const CarouselTemplate: React.FC<
           <div
             className="listing-carousel__dots"
             role="tablist"
-            aria-label="Itens"
+            aria-label={intl.formatMessage(carouselMessages.items)}
           >
             {slides.map((item, index) => (
               <button
@@ -305,7 +309,9 @@ const CarouselTemplate: React.FC<
                   'is-active': index === activeIndex,
                 })}
                 onClick={() => goTo(index)}
-                aria-label={`Ir para item ${index + 1}`}
+                aria-label={intl.formatMessage(carouselMessages.goToItem, {
+                  index: index + 1,
+                })}
                 aria-current={index === activeIndex ? 'true' : undefined}
                 role="tab"
               />
@@ -320,9 +326,9 @@ const CarouselTemplate: React.FC<
                 'listing-carousel__toggle',
               )}
               onClick={() => setIsPlaying((prev) => !prev)}
-              aria-label={
-                isPlaying ? 'Pausar carrossel' : 'Reproduzir carrossel'
-              }
+              aria-label={intl.formatMessage(
+                isPlaying ? carouselMessages.pause : carouselMessages.play,
+              )}
               aria-pressed={isPlaying}
             >
               <Icon name={isPlaying ? pauseSVG : playSVG} size="20px" />
@@ -336,7 +342,7 @@ const CarouselTemplate: React.FC<
               'listing-carousel__arrow--next',
             )}
             onClick={() => goTo(activeIndex + 1)}
-            aria-label="Próximo"
+            aria-label={intl.formatMessage(carouselMessages.next)}
           >
             <Icon name={rightSVG} size="20px" />
           </button>
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/GridTemplate.stories.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/GridTemplate.stories.tsx
new file mode 100644
index 0000000..016ea41
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/GridTemplate.stories.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+import GridTemplate from './GridTemplate';
+import { listingItems, singleItem } from './fixtures';
+
+/**
+ * `_listing.scss` is scoped to `body .block.listing`, and the variation rules to
+ * `&.grid`, so the template has to sit inside the same wrapper the listing
+ * block renders on a page — otherwise none of its styling applies, including the
+ * focus outlines on cards.
+ */
+const withWrapper: Decorator = (Story) => (
+  <Wrapper anonymous>
+    <div style={{ padding: '2rem' }}>
+      <div className="block listing grid">
+        <Story />
+      </div>
+    </div>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Blocks/Listing/Grid',
+  component: GridTemplate,
+  decorators: [withWrapper],
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  argTypes: {
+    gridColumns: { control: { type: 'inline-radio' }, options: [1, 2, 3, 4] },
+  },
+} satisfies Meta<typeof GridTemplate>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ThreeColumns: Story = {
+  args: { items: listingItems, gridColumns: 3 },
+};
+
+export const TwoColumns: Story = {
+  args: { items: listingItems, gridColumns: 2 },
+};
+
+export const FourColumns: Story = {
+  args: { items: listingItems, gridColumns: 4 },
+};
+
+export const WithHeadlineLink: Story = {
+  args: {
+    items: listingItems.slice(0, 3),
+    gridColumns: 3,
+    linkTitle: 'See all publications',
+    linkHref: [{ '@id': '/publications' }],
+  },
+};
+
+export const SingleItem: Story = {
+  args: { items: singleItem, gridColumns: 3 },
+};
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/MediaCarouselTemplate.stories.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/MediaCarouselTemplate.stories.tsx
new file mode 100644
index 0000000..24d032f
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/MediaCarouselTemplate.stories.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+import MediaCarouselTemplate from './MediaCarouselTemplate';
+import { mediaItems, listingItems } from './fixtures';
+
+/**
+ * `_listing.scss` is scoped to `body .block.listing`, and the variation rules to
+ * `&.mediaCarousel`, so the template has to sit inside the same wrapper the listing
+ * block renders on a page — otherwise none of its styling applies, including the
+ * focus outlines on cards.
+ */
+const withWrapper: Decorator = (Story) => (
+  <Wrapper anonymous>
+    <div style={{ padding: '2rem' }}>
+      <div className="block listing mediaCarousel">
+        <Story />
+      </div>
+    </div>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Blocks/Listing/Media Carousel',
+  component: MediaCarouselTemplate,
+  decorators: [withWrapper],
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+} satisfies Meta<typeof MediaCarouselTemplate>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Mixed media: the first two items carry a `videoUrl`, the third does not. */
+export const Default: Story = {
+  args: {
+    items: mediaItems,
+    carouselMaxHeight: 520,
+    carouselObjectFit: 'cover',
+    carouselObjectPosition: 'center center',
+  },
+};
+
+/** No `videoUrl` anywhere, so every slide falls back to its preview image. */
+export const ImagesOnly: Story = {
+  args: { ...Default.args, items: listingItems.slice(0, 3) },
+};
+
+export const AutoPlay: Story = {
+  args: {
+    ...Default.args,
+    carouselAutoPlay: true,
+    carouselAutoPlayInterval: 6000,
+  },
+};
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/MediaCarouselTemplate.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/MediaCarouselTemplate.tsx
index f0f1692..3df12d9 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/MediaCarouselTemplate.tsx
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/MediaCarouselTemplate.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
 import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import config from '@plone/volto/registry';
@@ -8,6 +9,8 @@ import rightSVG from '@plone/volto/icons/right-key.svg';
 import playSVG from '@plone/volto/icons/play.svg';
 import pauseSVG from '@plone/volto/icons/pause.svg';
 
+import { carouselMessages } from './messages';
+
 type ListingItem = Record<string, any>;
 
 interface MediaCarouselTemplateProps {
@@ -64,6 +67,7 @@ const MediaCarouselTemplate: React.FC<
   carouselAutoPlay,
   carouselAutoPlayInterval,
 }) => {
+  const intl = useIntl();
   const slides = items.filter(Boolean);
   const PreviewImageComponent = config.getComponent('PreviewImage').component;
   const [activeIndex, setActiveIndex] = useState(0);
@@ -129,7 +133,7 @@ const MediaCarouselTemplate: React.FC<
       <div
         className="listing-carousel__viewport"
         aria-roledescription="carousel"
-        aria-label="Carrossel de Mídia"
+        aria-label={intl.formatMessage(carouselMessages.mediaCarousel)}
         onFocusCapture={() => setIsPlaying(false)}
       >
         <div
@@ -153,7 +157,9 @@ const MediaCarouselTemplate: React.FC<
                         ? '?autoplay=0&mute=1&playsinline=1&rel=0&modestbranding=1'
                         : '?autoplay=0&muted=1&playsinline=1',
                     ].join('')}
-                    title={item?.title || 'Vídeo'}
+                    title={
+                      item?.title || intl.formatMessage(carouselMessages.video)
+                    }
                     loading={isActiveSlide ? 'eager' : 'lazy'}
                     sandbox="allow-scripts allow-presentation"
                     allowFullScreen
@@ -191,7 +197,7 @@ const MediaCarouselTemplate: React.FC<
       {canNavigate && (
         <div
           className="listing-carousel__controls"
-          aria-label="Controles do carrossel"
+          aria-label={intl.formatMessage(carouselMessages.controls)}
         >
           <button
             type="button"
@@ -200,7 +206,7 @@ const MediaCarouselTemplate: React.FC<
               'listing-carousel__arrow--prev',
             )}
             onClick={() => goTo(activeIndex - 1)}
-            aria-label="Anterior"
+            aria-label={intl.formatMessage(carouselMessages.previous)}
           >
             <Icon name={leftSVG} size="20px" />
           </button>
@@ -208,7 +214,7 @@ const MediaCarouselTemplate: React.FC<
           <div
             className="listing-carousel__dots"
             role="tablist"
-            aria-label="Itens"
+            aria-label={intl.formatMessage(carouselMessages.items)}
           >
             {slides.map((item, index) => (
               <button
@@ -218,7 +224,9 @@ const MediaCarouselTemplate: React.FC<
                   'is-active': index === activeIndex,
                 })}
                 onClick={() => goTo(index)}
-                aria-label={`Ir para item ${index + 1}`}
+                aria-label={intl.formatMessage(carouselMessages.goToItem, {
+                  index: index + 1,
+                })}
                 aria-current={index === activeIndex ? 'true' : undefined}
                 role="tab"
               />
@@ -233,9 +241,9 @@ const MediaCarouselTemplate: React.FC<
                 'listing-carousel__toggle',
               )}
               onClick={() => setIsPlaying((prev) => !prev)}
-              aria-label={
-                isPlaying ? 'Pausar carrossel' : 'Reproduzir carrossel'
-              }
+              aria-label={intl.formatMessage(
+                isPlaying ? carouselMessages.pause : carouselMessages.play,
+              )}
               aria-pressed={isPlaying}
             >
               <Icon name={isPlaying ? pauseSVG : playSVG} size="20px" />
@@ -249,7 +257,7 @@ const MediaCarouselTemplate: React.FC<
               'listing-carousel__arrow--next',
             )}
             onClick={() => goTo(activeIndex + 1)}
-            aria-label="Próximo"
+            aria-label={intl.formatMessage(carouselMessages.next)}
           >
             <Icon name={rightSVG} size="20px" />
           </button>
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/TeaserTemplate.stories.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/TeaserTemplate.stories.tsx
new file mode 100644
index 0000000..185d907
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/TeaserTemplate.stories.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+import TeaserTemplate from './TeaserTemplate';
+import { listingItems, singleItem } from './fixtures';
+
+/**
+ * `_listing.scss` is scoped to `body .block.listing`, and the variation rules to
+ * `&.teaser`, so the template has to sit inside the same wrapper the listing
+ * block renders on a page — otherwise none of its styling applies, including the
+ * focus outlines on cards.
+ */
+const withWrapper: Decorator = (Story) => (
+  <Wrapper anonymous>
+    <div style={{ padding: '2rem' }}>
+      <div className="block listing teaser">
+        <Story />
+      </div>
+    </div>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Blocks/Listing/Highlight',
+  component: TeaserTemplate,
+  decorators: [withWrapper],
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  argTypes: {
+    align: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'center', 'right'],
+    },
+  },
+} satisfies Meta<typeof TeaserTemplate>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AlignLeft: Story = {
+  args: { items: listingItems.slice(0, 3), align: 'left' },
+};
+
+export const AlignRight: Story = {
+  args: { items: listingItems.slice(0, 3), align: 'right' },
+};
+
+export const AlignCenter: Story = {
+  args: { items: listingItems.slice(0, 3), align: 'center' },
+};
+
+export const SingleItem: Story = {
+  args: { items: singleItem, align: 'left' },
+};
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/TeaserTemplate.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/TeaserTemplate.tsx
index 02c0b44..e6b81ae 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/TeaserTemplate.tsx
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/TeaserTemplate.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useIntl } from 'react-intl';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
@@ -12,14 +13,14 @@ interface TeaserTemplateProps {
   data?: any;
 }
 
-const formatDate = (dateString?: string): string => {
+const formatDate = (dateString: string | undefined, locale: string): string => {
   if (!dateString) return '';
   try {
     const date = new Date(dateString);
     if (isNaN(date.getTime())) return '';
     return date.getTime() === 0
       ? ''
-      : date.toLocaleDateString('pt-BR', {
+      : date.toLocaleDateString(locale, {
           day: '2-digit',
           month: '2-digit',
           year: 'numeric',
@@ -53,6 +54,7 @@ const TeaserTemplate: React.FC<TeaserTemplateProps & Record<string, any>> = ({
   align: alignProp,
   ...rest
 }) => {
+  const intl = useIntl();
   const data = rest.data || rest;
   const Image = config.getComponent('Image').component;
   const { openExternalLinkInNewTab } = config.settings;
@@ -70,6 +72,7 @@ const TeaserTemplate: React.FC<TeaserTemplateProps & Record<string, any>> = ({
       {items.map((item, index) => {
         const date = formatDate(
           item?.Date || item?.effective || item?.CreationDate || item?.created,
+          intl.locale,
         );
 
         const openLinkInNewTab =
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/fixtures.ts b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/fixtures.ts
new file mode 100644
index 0000000..42d0438
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/fixtures.ts
@@ -0,0 +1,132 @@
+/**
+ * Listing items shared by the listing-variation stories.
+ *
+ * Shaped like what `@querystring-search` returns for a listing block: only the
+ * fields the templates actually read are present, and `@id` values are already
+ * flattened to app-relative URLs the way the reducer leaves them.
+ *
+ * Not a `*.stories.*` file, so Storybook does not try to render it.
+ */
+
+import listing01 from '../../../storybook/images/listing-01.jpg';
+import listing02 from '../../../storybook/images/listing-02.jpg';
+import listing03 from '../../../storybook/images/listing-03.jpg';
+import listing04 from '../../../storybook/images/listing-04.jpg';
+import listing05 from '../../../storybook/images/listing-05.jpg';
+import listing06 from '../../../storybook/images/listing-06.jpg';
+
+import { imageScales } from '../../../storybook/images/imageScales';
+
+type ListingItem = Record<string, any>;
+
+/**
+ * Photography bundled with the package, so cards render with no backend and no
+ * network behind Storybook.
+ *
+ * This still exercises the `base_path` branch of Volto's `Image` — the same one
+ * `preview_image_link` takes on a real site — because :func:`imageScales` splits
+ * the imported URL across `base_path` and `download` exactly as the API would.
+ */
+const image = (url: string) => ({
+  image_field: 'preview_image',
+  image_scales: { preview_image: [imageScales(url)] },
+});
+
+export const listingItems: ListingItem[] = [
+  {
+    '@id': '/news/budget-hearing-draws-a-full-room',
+    '@type': 'News Item',
+    id: 'budget-hearing-draws-a-full-room',
+    title: 'Budget hearing draws a full room',
+    head_title: 'Public finance',
+    description:
+      'Residents filled the chamber to question next year’s spending plan, with most of the debate turning on transport.',
+    effective: '2026-08-14T10:00:00+00:00',
+    ...image(listing01),
+  },
+  {
+    '@id': '/documents/open-data-policy',
+    '@type': 'Document',
+    id: 'open-data-policy',
+    title: 'The open data policy, explained',
+    head_title: 'Transparency',
+    description:
+      'What the new policy covers, which datasets are published first, and how to request one that is missing.',
+    effective: '2026-07-30T09:30:00+00:00',
+    ...image(listing02),
+  },
+  {
+    '@id': '/events/accessibility-workshop',
+    '@type': 'Event',
+    id: 'accessibility-workshop',
+    title: 'Accessibility workshop for content editors',
+    head_title: 'Training',
+    description:
+      'A hands-on session on alt text, heading structure and colour contrast, aimed at anyone who publishes to the site.',
+    effective: '2026-09-05T13:00:00+00:00',
+    // upstream's `EventSummary` reads these; without them it throws
+    start: '2026-09-05T13:00:00+00:00',
+    end: '2026-09-05T16:00:00+00:00',
+    ...image(listing03),
+  },
+  {
+    '@id': '/documents/annual-report-2025',
+    '@type': 'File',
+    id: 'annual-report-2025',
+    title: 'Annual report 2025',
+    head_title: 'Publications',
+    description:
+      'The full year in review, including the audited accounts and the service performance figures.',
+    effective: '2026-06-18T08:00:00+00:00',
+    ...image(listing04),
+  },
+  {
+    '@id': '/news/library-reopens-after-refurbishment',
+    '@type': 'News Item',
+    id: 'library-reopens-after-refurbishment',
+    title: 'Library reopens after refurbishment',
+    head_title: 'Culture',
+    description:
+      'Longer opening hours, a new study area and a lift to the first floor.',
+    effective: '2026-05-22T11:15:00+00:00',
+    ...image(listing05),
+  },
+  {
+    '@id': '/documents/how-to-request-a-service',
+    '@type': 'Document',
+    id: 'how-to-request-a-service',
+    title: 'How to request a service',
+    head_title: 'Guides',
+    description:
+      'The three routes available, what each one needs from you, and the expected turnaround.',
+    effective: '2026-04-09T16:45:00+00:00',
+    ...image(listing06),
+  },
+];
+
+/**
+ * Items carrying a `videoUrl`, which is what `MediaCarouselTemplate` switches
+ * on to render an embed rather than an image.
+ */
+export const mediaItems: ListingItem[] = [
+  {
+    ...listingItems[0],
+    '@id': '/media/council-meeting-recording',
+    title: 'Council meeting, full recording',
+    videoUrl: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ',
+  },
+  {
+    ...listingItems[2],
+    '@id': '/media/accessibility-workshop-recap',
+    title: 'Accessibility workshop, recap',
+    videoUrl: 'https://www.youtube.com/watch?v=ScMzIvxBSi4',
+  },
+  {
+    ...listingItems[4],
+    '@id': '/media/library-tour',
+    title: 'A tour of the refurbished library',
+  },
+];
+
+/** A single item, for isolating the one-card layouts. */
+export const singleItem: ListingItem[] = [listingItems[0]];
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/messages.ts b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/messages.ts
new file mode 100644
index 0000000..fbd2da8
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/messages.ts
@@ -0,0 +1,50 @@
+import { defineMessages } from 'react-intl';
+
+/**
+ * Accessible labels shared by the carousel listing templates.
+ *
+ * `CarouselTemplate` and `MediaCarouselTemplate` render the same control set, so
+ * their labels live here rather than being declared twice.
+ */
+export const carouselMessages = defineMessages({
+  carousel: {
+    id: 'Carousel',
+    defaultMessage: 'Carousel',
+  },
+  mediaCarousel: {
+    id: 'Media Carousel',
+    defaultMessage: 'Media Carousel',
+  },
+  controls: {
+    id: 'Carousel controls',
+    defaultMessage: 'Carousel controls',
+  },
+  previous: {
+    id: 'Previous',
+    defaultMessage: 'Previous',
+  },
+  next: {
+    id: 'Next',
+    defaultMessage: 'Next',
+  },
+  items: {
+    id: 'Items',
+    defaultMessage: 'Items',
+  },
+  goToItem: {
+    id: 'Go to item {index}',
+    defaultMessage: 'Go to item {index}',
+  },
+  pause: {
+    id: 'Pause carousel',
+    defaultMessage: 'Pause carousel',
+  },
+  play: {
+    id: 'Play carousel',
+    defaultMessage: 'Play carousel',
+  },
+  video: {
+    id: 'Video',
+    defaultMessage: 'Video',
+  },
+});
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/schema.ts b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/schema.ts
index 548fd83..9a518ff 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/Listing/schema.ts
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/Listing/schema.ts
@@ -1,50 +1,75 @@
 import { defineMessages } from 'react-intl';
+import type { IntlShape } from '@plone/types/src/i18n';
 
 const messages = defineMessages({
+  carousel: {
+    id: 'Carousel',
+    defaultMessage: 'Carousel',
+  },
   carouselMaxHeight: {
-    id: 'Altura (px)',
-    defaultMessage: 'Altura (px)',
+    id: 'Height (px)',
+    defaultMessage: 'Height (px)',
   },
   carouselObjectFit: {
-    id: 'Ajuste da mídia (object-fit)',
-    defaultMessage: 'Ajuste da mídia (object-fit)',
+    id: 'Media fit (object-fit)',
+    defaultMessage: 'Media fit (object-fit)',
   },
   carouselObjectPosition: {
-    id: 'Posição (object-position)',
-    defaultMessage: 'Posição (object-position)',
+    id: 'Position (object-position)',
+    defaultMessage: 'Position (object-position)',
   },
   carouselAutoPlay: {
-    id: 'Auto-avanço',
-    defaultMessage: 'Auto-avanço',
+    id: 'Auto-advance',
+    defaultMessage: 'Auto-advance',
   },
   carouselAutoPlayInterval: {
-    id: 'Intervalo do auto-avanço (ms)',
-    defaultMessage: 'Intervalo do auto-avanço (ms)',
+    id: 'Auto-advance interval (ms)',
+    defaultMessage: 'Auto-advance interval (ms)',
   },
   headlineButtonText: {
-    id: 'headlineButtonText',
-    defaultMessage: 'Texto do Botão (Título)',
+    id: 'Headline button text',
+    defaultMessage: 'Headline button text',
   },
   headlineButtonLink: {
-    id: 'headlineButtonLink',
-    defaultMessage: 'Link do Botão (Título)',
+    id: 'Headline button link',
+    defaultMessage: 'Headline button link',
   },
   gridColumns: {
-    id: 'gridColumns',
-    defaultMessage: 'Número de Colunas (Grid)',
+    id: 'Number of columns',
+    defaultMessage: 'Number of columns',
+  },
+  columnCount: {
+    id: '{count, plural, one {# column} other {# columns}}',
+    defaultMessage: '{count, plural, one {# column} other {# columns}}',
+  },
+  align: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
   },
+  positionLeftTop: { id: 'Left top', defaultMessage: 'Left top' },
+  positionCenterTop: { id: 'Center top', defaultMessage: 'Center top' },
+  positionRightTop: { id: 'Right top', defaultMessage: 'Right top' },
+  positionLeftCenter: { id: 'Left center', defaultMessage: 'Left center' },
+  positionCenter: { id: 'Center', defaultMessage: 'Center' },
+  positionRightCenter: { id: 'Right center', defaultMessage: 'Right center' },
+  positionLeftBottom: { id: 'Left bottom', defaultMessage: 'Left bottom' },
+  positionCenterBottom: {
+    id: 'Center bottom',
+    defaultMessage: 'Center bottom',
+  },
+  positionRightBottom: { id: 'Right bottom', defaultMessage: 'Right bottom' },
 });
 
-const objectPositionChoices = [
-  ['left top', 'Topo esquerdo'],
-  ['center top', 'Topo centro'],
-  ['right top', 'Topo direito'],
-  ['left center', 'Centro esquerdo'],
-  ['center center', 'Centro'],
-  ['right center', 'Centro direito'],
-  ['left bottom', 'Fundo esquerdo'],
-  ['center bottom', 'Fundo centro'],
-  ['right bottom', 'Fundo direito'],
+const objectPositionChoices = (intl: IntlShape) => [
+  ['left top', intl.formatMessage(messages.positionLeftTop)],
+  ['center top', intl.formatMessage(messages.positionCenterTop)],
+  ['right top', intl.formatMessage(messages.positionRightTop)],
+  ['left center', intl.formatMessage(messages.positionLeftCenter)],
+  ['center center', intl.formatMessage(messages.positionCenter)],
+  ['right center', intl.formatMessage(messages.positionRightCenter)],
+  ['left bottom', intl.formatMessage(messages.positionLeftBottom)],
+  ['center bottom', intl.formatMessage(messages.positionCenterBottom)],
+  ['right bottom', intl.formatMessage(messages.positionRightBottom)],
 ];
 
 export const carouselSchemaEnhancer = ({ schema, formData, intl }) => {
@@ -72,7 +97,7 @@ export const carouselSchemaEnhancer = ({ schema, formData, intl }) => {
       title: intl.formatMessage(messages.carouselObjectPosition),
       type: 'string',
       default: 'center center',
-      choices: objectPositionChoices,
+      choices: objectPositionChoices(intl),
     },
     carouselAutoPlay: {
       title: intl.formatMessage(messages.carouselAutoPlay),
@@ -94,7 +119,7 @@ export const carouselSchemaEnhancer = ({ schema, formData, intl }) => {
   if (!hasFieldset) {
     fieldsets.push({
       id: 'carousel',
-      title: 'Carrossel',
+      title: intl.formatMessage(messages.carousel),
       fields: [
         'carouselMaxHeight',
         'carouselObjectFit',
@@ -153,7 +178,7 @@ export const mediaCarouselSchemaEnhancer = ({ schema, formData, intl }) => {
       title: intl.formatMessage(messages.carouselObjectPosition),
       type: 'string',
       default: 'center center',
-      choices: objectPositionChoices,
+      choices: objectPositionChoices(intl),
     },
     carouselAutoPlay: {
       title: intl.formatMessage(messages.carouselAutoPlay),
@@ -175,7 +200,7 @@ export const mediaCarouselSchemaEnhancer = ({ schema, formData, intl }) => {
   if (!hasFieldset) {
     fieldsets.push({
       id: 'carousel',
-      title: 'Carrossel',
+      title: intl.formatMessage(messages.carousel),
       fields: [
         'carouselMaxHeight',
         'carouselObjectFit',
@@ -225,19 +250,17 @@ export const listingSchemaEnhancer = ({ schema, formData, intl }) => {
     gridColumns: {
       title: intl.formatMessage(messages.gridColumns),
       type: 'number',
-      choices: [
-        [1, '1 Coluna'],
-        [2, '2 Colunas'],
-        [3, '3 Colunas'],
-        [4, '4 Colunas'],
-      ],
+      choices: [1, 2, 3, 4].map((count) => [
+        count,
+        intl.formatMessage(messages.columnCount, { count }),
+      ]),
       default: 2,
     },
   };
 
   const fieldsets = schema.fieldsets || [];
 
-  // Adiciona ao default fieldset
+  // Add to the default fieldset
   const defaultFieldset = fieldsets.find((f) => f.id === 'default');
   if (defaultFieldset) {
     if (!defaultFieldset.fields.includes('headlineButtonText')) {
@@ -245,8 +268,8 @@ export const listingSchemaEnhancer = ({ schema, formData, intl }) => {
     }
   }
 
-  // Se a variação for grid (imageGallery é o nome interno de grid no Volto Light Theme e padrão), adiciona o gridColumns
-  // Vamos adicionar globalmente no 'default' e ignorar se não for usado, ou checar a variação:
+  // `imageGallery` is the internal id Volto Light Theme uses for its grid
+  // variation, so both ids get the column control.
   if (
     formData?.variation === 'imageGallery' ||
     formData?.variation === 'grid'
@@ -266,13 +289,13 @@ export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
     ...schema.properties,
     align: {
       widget: 'align',
-      title: 'Alinhamento',
+      title: intl.formatMessage(messages.align),
       actions: ['left', 'right', 'center'],
       default: 'left',
     },
   };
 
-  // Se o schema já tiver fieldset styles, adiciona lá, senão no default
+  // Prefer the styling fieldset when the schema already has one.
   const hasStyles = schema.fieldsets?.some((f) => f.id === 'styling');
 
   if (!hasStyles) {
@@ -286,7 +309,7 @@ export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
   if (schema.properties?.styles?.schema) {
     schema.properties.styles.schema.properties.align = {
       widget: 'align',
-      title: 'Alinhamento',
+      title: intl.formatMessage(messages.align),
       actions: ['left', 'right', 'center'],
       default: 'left',
     };
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/MainImageBlock.stories.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/MainImageBlock.stories.tsx
index 5e29fcc..dd205a9 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/MainImageBlock.stories.tsx
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/MainImageBlock.stories.tsx
@@ -3,17 +3,18 @@ import type { Decorator, Meta, StoryObj } from '@storybook/react';
 import Wrapper from '@plone/volto/storybook';
 
 import Layout from './Layout';
+import mainImage from '../../../storybook/images/main-image.jpg';
 
 type StoryParams = {
   containerWidth?: number;
 };
 
-const SAMPLE_IMAGE = 'https://picsum.photos/seed/cm-uberlandia/1200/600';
+const SAMPLE_IMAGE = mainImage;
 
 const sampleImage = (
   <img
     src={SAMPLE_IMAGE}
-    alt="Plenário da Câmara Municipal"
+    alt="Council chamber during a public session"
     className="main-image"
     width={1200}
     height={600}
@@ -94,9 +95,9 @@ export const FullWithCaption: Story = {
   args: {
     align: 'full',
     size: 'l',
-    title: 'Sessão plenária acompanhada por dezenas de cidadãos',
+    title: 'Public session attended by dozens of citizens',
     description:
-      'A Câmara Municipal recebeu moradores para o debate sobre o orçamento de 2026.',
+      'The council welcomed residents for the debate on the 2026 budget.',
     image: sampleImage,
   },
 };
@@ -105,8 +106,8 @@ export const LeftSmall: Story = {
   args: {
     align: 'left',
     size: 's',
-    title: 'Notícia em destaque',
-    description: 'Resumo curto da notícia ao lado da imagem.',
+    title: 'Featured story',
+    description: 'A short summary shown beside the image.',
     image: sampleImage,
   },
 };
@@ -128,8 +129,8 @@ export const CenterWithOverlay: Story = {
   args: {
     align: 'center',
     size: 'l',
-    title: 'Imagem centralizada com legenda em overlay',
-    description: 'A descrição aparece sobreposta à parte inferior da imagem.',
+    title: 'Centred image with an overlaid caption',
+    description: 'The description sits over the lower edge of the image.',
     image: sampleImage,
   },
 };
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/View.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/View.tsx
index 2bae7b3..e621418 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/View.tsx
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/View.tsx
@@ -70,8 +70,8 @@ const MainImageBlockView: React.FC<MainImageBlockViewProps> = ({
     return isEditMode ? (
       <div className={cx('main-image-block', 'empty', className)} style={style}>
         <FormattedMessage
-          id="Nenhuma imagem de preview encontrada na página."
-          defaultMessage="Nenhuma imagem de preview encontrada na página. Adicione uma imagem de preview na página para exibir neste bloco."
+          id="No preview image found on this page."
+          defaultMessage="No preview image found on this page. Add a preview image to the page to display it in this block."
         />
       </div>
     ) : null;
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/index.ts b/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/index.ts
index b893ee2..20acec3 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/index.ts
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/index.ts
@@ -16,7 +16,7 @@ export interface MainImageBlockData {
 
 const MainImageBlockInfo: BlockConfigBase = {
   id: 'mainImageBlock',
-  title: 'Imagem Principal',
+  title: 'Main Image',
   icon: imageSVG,
   group: 'media',
   view: MainImageBlockView,
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/schema.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/schema.tsx
index 25e49aa..1bbe28b 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/schema.tsx
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/MainImageBlock/schema.tsx
@@ -6,48 +6,48 @@ import { defaultStylingSchema } from '../schema';
 
 const messages = defineMessages({
   mainImageBlock: {
-    id: 'Main Image Block',
-    defaultMessage: 'Bloco de Imagem Principal',
+    id: 'Main Image',
+    defaultMessage: 'Main Image',
   },
   title: {
     id: 'Title',
-    defaultMessage: 'Título',
+    defaultMessage: 'Title',
   },
   description: {
     id: 'Description',
-    defaultMessage: 'Descrição',
+    defaultMessage: 'Description',
   },
   altText: {
     id: 'Alt Text',
-    defaultMessage: 'Descrição Alternativa',
+    defaultMessage: 'Alt Text',
   },
   AltTextHint: {
     id: 'Alt text hint',
-    defaultMessage: 'Deixe em branco se a imagem for puramente decorativa',
+    defaultMessage: 'Leave empty if the image is purely decorative',
   },
   AltTextHintLinkText: {
     id: 'Alt text hint link text',
-    defaultMessage: 'Descreva o propósito da imagem',
+    defaultMessage: 'Describe the purpose of the image',
   },
   openLinkInNewTab: {
     id: 'Open in a new tab',
-    defaultMessage: 'Abrir em uma nova aba',
+    defaultMessage: 'Open in a new tab',
   },
   align: {
     id: 'Alignment',
-    defaultMessage: 'Alinhamento',
+    defaultMessage: 'Alignment',
   },
   size: {
     id: 'Image size',
-    defaultMessage: 'Tamanho',
+    defaultMessage: 'Image size',
   },
   blockWidth: {
     id: 'Block Width',
-    defaultMessage: 'Largura do bloco',
+    defaultMessage: 'Block Width',
   },
   styling: {
     id: 'Styling',
-    defaultMessage: 'Estilo',
+    defaultMessage: 'Styling',
   },
   linkSettings: {
     id: 'Link settings',
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/QuoteBlock.stories.tsx b/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/QuoteBlock.stories.tsx
index 25f9f82..1e6c8a9 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/QuoteBlock.stories.tsx
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/QuoteBlock.stories.tsx
@@ -35,7 +35,7 @@ const sampleSlateData = [
     type: 'p',
     children: [
       {
-        text: 'A comunicação é um direito humano fundamental. Sem ela, não há democracia plena nem exercício real da cidadania. Esta citação demonstra como o texto se comporta dentro do bloco, aplicando a fonte correta do Volto.',
+        text: 'Access to information is a fundamental right. Without it there is no full democracy and no real exercise of citizenship. This quotation shows how text behaves inside the block, with the theme typography applied.',
       },
     ],
   },
@@ -46,7 +46,7 @@ export const DefaultTransparent: Story = {
     data: {
       '@type': 'quoteBlock',
       value: sampleSlateData,
-      author: 'Especialista em Comunicação',
+      author: 'Communications Specialist',
       backgroundStyle: 'transparent',
     },
   },
@@ -57,7 +57,7 @@ export const FilledBackground: Story = {
     data: {
       '@type': 'quoteBlock',
       value: sampleSlateData,
-      author: 'Coletivo',
+      author: 'Collective',
       backgroundStyle: 'filled',
     },
   },
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/index.ts b/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/index.ts
index d04da30..cf5bf50 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/index.ts
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/index.ts
@@ -13,7 +13,7 @@ export interface QuoteBlockData {
 
 const QuoteBlockInfo: BlockConfigBase = {
   id: 'quoteBlock',
-  title: 'Citação',
+  title: 'Quote',
   icon: quoteSVG,
   group: 'text',
   view: QuoteBlockView as any,
diff --git a/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/schema.ts b/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/schema.ts
index ff0d221..277e6e9 100644
--- a/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/schema.ts
+++ b/frontend/packages/volto-light-theme/src/components/Blocks/QuoteBlock/schema.ts
@@ -4,28 +4,24 @@ import { defaultStylingSchema } from '../schema';
 
 const messages = defineMessages({
   quoteBlock: {
-    id: 'quoteBlock',
-    defaultMessage: 'Bloco de Citação',
+    id: 'Quote',
+    defaultMessage: 'Quote',
   },
   author: {
-    id: 'quoteAuthor',
-    defaultMessage: 'Autor / Fonte',
+    id: 'Author / Source',
+    defaultMessage: 'Author / Source',
   },
   backgroundStyle: {
-    id: 'quoteBackgroundStyle',
-    defaultMessage: 'Estilo do fundo',
+    id: 'Background style',
+    defaultMessage: 'Background style',
   },
   backgroundTransparent: {
-    id: 'quoteBackgroundTransparent',
-    defaultMessage: 'Transparente',
+    id: 'Transparent',
+    defaultMessage: 'Transparent',
   },
   backgroundFilled: {
-    id: 'quoteBackgroundFilled',
-    defaultMessage: 'Preenchido',
-  },
-  styling: {
-    id: 'Styling',
-    defaultMessage: 'Estilo',
+    id: 'Filled',
+    defaultMessage: 'Filled',
   },
 });
 
diff --git a/frontend/packages/volto-light-theme/src/components/Controlpanels/Themes/fixtures.ts b/frontend/packages/volto-light-theme/src/components/Controlpanels/Themes/fixtures.ts
index df3b864..9c782bc 100644
--- a/frontend/packages/volto-light-theme/src/components/Controlpanels/Themes/fixtures.ts
+++ b/frontend/packages/volto-light-theme/src/components/Controlpanels/Themes/fixtures.ts
@@ -12,13 +12,13 @@ export const defaultTheme: ThemeItem = {
   id: 'default',
   name: 'Default',
   description: 'The theme shipped with sc.voltolighttheme.',
-  primary_color: '#ffffff',
-  primary_foreground_color: '#000000',
+  primary_color_light: '#ffffff',
+  primary_foreground_color_light: '#000000',
   header_foreground_color: '#000000',
-  secondary_color: '#000000',
-  secondary_foreground_color: '#ffffff',
-  accent_color: '#f4822c',
-  accent_foreground_color: '#000000',
+  secondary_color_light: '#000000',
+  secondary_foreground_color_light: '#ffffff',
+  accent_color_light: '#f4822c',
+  accent_foreground_color_light: '#000000',
 };
 
 export const corporateTheme: ThemeItem = {
@@ -26,13 +26,13 @@ export const corporateTheme: ThemeItem = {
   id: 'corporate',
   name: 'Corporate',
   description: 'Blues, for a public-facing site.',
-  primary_color: '#123456',
-  primary_foreground_color: '#ffffff',
+  primary_color_light: '#123456',
+  primary_foreground_color_light: '#ffffff',
   header_foreground_color: '#ffffff',
-  secondary_color: '#1b3a5c',
-  secondary_foreground_color: '#ffffff',
-  accent_color: '#4a90d9',
-  accent_foreground_color: '#000000',
+  secondary_color_light: '#1b3a5c',
+  secondary_foreground_color_light: '#ffffff',
+  accent_color_light: '#4a90d9',
+  accent_foreground_color_light: '#000000',
 };
 
 export const natalTheme: ThemeItem = {
@@ -40,13 +40,13 @@ export const natalTheme: ThemeItem = {
   id: 'natal',
   name: 'Natal',
   description: 'Um tema festivo com tipografia Inter e bordas arredondadas.',
-  primary_color: '#d32f2f',
-  primary_foreground_color: '#ffffff',
+  primary_color_light: '#d32f2f',
+  primary_foreground_color_light: '#ffffff',
   header_foreground_color: '#ffffff',
-  secondary_color: '#2e7d32',
-  secondary_foreground_color: '#ffffff',
-  accent_color: '#fbc02d',
-  accent_foreground_color: '#000000',
+  secondary_color_light: '#2e7d32',
+  secondary_foreground_color_light: '#ffffff',
+  accent_color_light: '#fbc02d',
+  accent_foreground_color_light: '#000000',
 };
 
 export const themes: ThemeItem[] = [defaultTheme, corporateTheme, natalTheme];
@@ -66,15 +66,20 @@ export const schema: JsonSchema = {
   properties: {
     name: { title: 'Theme name', type: 'string' },
     description: { title: 'Description', type: 'string' },
-    primary_color: { title: 'Primary colour', type: 'string' },
-    accent_color: { title: 'Accent colour', type: 'string' },
+    primary_color_light: { title: 'Primary colour', type: 'string' },
+    accent_color_light: { title: 'Accent colour', type: 'string' },
   },
   required: ['name'],
   fieldsets: [
     {
       id: 'default',
       title: 'Default',
-      fields: ['name', 'description', 'primary_color', 'accent_color'],
+      fields: [
+        'name',
+        'description',
+        'primary_color_light',
+        'accent_color_light',
+      ],
     },
   ],
 };
diff --git a/frontend/packages/volto-light-theme/src/components/DocumentByLine/DocumentByLine.tsx b/frontend/packages/volto-light-theme/src/components/DocumentByLine/DocumentByLine.tsx
index d8439fd..2a2f31c 100644
--- a/frontend/packages/volto-light-theme/src/components/DocumentByLine/DocumentByLine.tsx
+++ b/frontend/packages/volto-light-theme/src/components/DocumentByLine/DocumentByLine.tsx
@@ -40,31 +40,28 @@ const DocumentByLine = ({
   const displayPublished = showPublished && Boolean(effective);
   return (
     <Container className={'documentByLine'}>
-      {displayPublished && (
-        <Container className={'info effective'}>
-          <FormattedMessage id="effective" defaultMessage="Publicado" />
-          : <FormattedDate date={effective} />
-        </Container>
-      )}
-      {displayModified && (
-        <Container className={'info modified'}>
-          <FormattedMessage
-            id="last_modified"
-            defaultMessage="Última Modificação"
-          />
-          : <FormattedDate date={modified} />
-        </Container>
-      )}
       {displayAuthor && (
-        <Container className={'info author'}>
-          <FormattedMessage id="author" defaultMessage="Por" />:{' '}
+        <p className={'info author'}>
+          <FormattedMessage id="By" defaultMessage="By" />:{' '}
           {authors &&
             authors.map((author, i) => (
               <span className={'name'} key={i}>
                 {author.fullname}
               </span>
             ))}
-        </Container>
+        </p>
+      )}
+      {displayPublished && (
+        <p className={'info effective'}>
+          <FormattedMessage id="Published" defaultMessage="Published" />
+          : <FormattedDate date={effective} />
+        </p>
+      )}
+      {displayModified && (
+        <p className={'info modified'}>
+          <FormattedMessage id="Last modified" defaultMessage="Last modified" />
+          : <FormattedDate date={modified} />
+        </p>
       )}
     </Container>
   );
diff --git a/frontend/packages/volto-light-theme/src/components/DropdownMenu/DropdownMenu.stories.tsx b/frontend/packages/volto-light-theme/src/components/DropdownMenu/DropdownMenu.stories.tsx
index 7cb8002..4f038bd 100644
--- a/frontend/packages/volto-light-theme/src/components/DropdownMenu/DropdownMenu.stories.tsx
+++ b/frontend/packages/volto-light-theme/src/components/DropdownMenu/DropdownMenu.stories.tsx
@@ -37,9 +37,9 @@ export const Default: Story = {
     title: 'Portais',
     LinkComponent: MockLink,
     links: [
-      { title: 'Portal da Transparência', href: '/transparencia' },
+      { title: 'Transparency Portal', href: '/transparency' },
       { title: 'Dados Abertos', href: '/dados' },
-      { title: 'Diário Oficial', href: '/diario-oficial' },
+      { title: 'Official Gazette', href: '/official-gazette' },
     ],
   },
 };
@@ -70,7 +70,13 @@ export const CustomChildren: Story = {
   args: {
     title: 'Custom Content',
     children: (
-      <div style={{ padding: '1rem', background: '#f5f5f5', color: '#333' }}>
+      <div
+        style={{
+          padding: '1rem',
+          background: 'var(--neutral-color)',
+          color: 'var(--neutral-foreground-color)',
+        }}
+      >
         <strong>Hello!</strong> This is arbitrary React content inside the
         dropdown panel.
       </div>
diff --git a/frontend/packages/volto-light-theme/src/components/Header/MobileHeader/MobileTools.tsx b/frontend/packages/volto-light-theme/src/components/Header/MobileHeader/MobileTools.tsx
index 58e9120..3479183 100644
--- a/frontend/packages/volto-light-theme/src/components/Header/MobileHeader/MobileTools.tsx
+++ b/frontend/packages/volto-light-theme/src/components/Header/MobileHeader/MobileTools.tsx
@@ -1,15 +1,24 @@
 import React, { useState, useRef, useCallback } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import moreIcon from '@plone/volto/icons/more.svg';
 import HeaderBarActions from '../../HeaderBar/HeaderBarActions';
 import useClickOutside from '../../../hooks/useClickOutside';
 
+const messages = defineMessages({
+  accessibilityOptions: {
+    id: 'Accessibility options',
+    defaultMessage: 'Accessibility options',
+  },
+});
+
 type MobileToolsProps = {
   token?: string | null;
 };
 
 const MobileTools: React.FC<MobileToolsProps> = ({ token }) => {
+  const intl = useIntl();
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -18,7 +27,7 @@ const MobileTools: React.FC<MobileToolsProps> = ({ token }) => {
 
   const close = useCallback(() => setIsOpen(false), []);
 
-  // Fecha ao clicar fora ou pressionar Escape
+  // Close on outside click or Escape
   useClickOutside(dropdownRef, close, isOpen);
 
   return display ? (
@@ -27,7 +36,7 @@ const MobileTools: React.FC<MobileToolsProps> = ({ token }) => {
         type="button"
         className="mobile-tools-button"
         onClick={() => setIsOpen(!isOpen)}
-        aria-label="Opções de Acessibilidade"
+        aria-label={intl.formatMessage(messages.accessibilityOptions)}
       >
         <Icon name={moreIcon} size="30px" />
       </button>
diff --git a/frontend/packages/volto-light-theme/src/components/HeaderBar/HeaderBar.tsx b/frontend/packages/volto-light-theme/src/components/HeaderBar/HeaderBar.tsx
index 1ad478a..4a02609 100644
--- a/frontend/packages/volto-light-theme/src/components/HeaderBar/HeaderBar.tsx
+++ b/frontend/packages/volto-light-theme/src/components/HeaderBar/HeaderBar.tsx
@@ -30,7 +30,7 @@ type RootState = {
 const messages = defineMessages({
   accessibilityMenu: {
     id: 'headerBarAccessibilityMenu',
-    defaultMessage: 'Menu de acessibilidade',
+    defaultMessage: 'Accessibility menu',
   },
   menuLabel: {
     id: 'headerBarMenuLabel',
diff --git a/frontend/packages/volto-light-theme/src/components/HeaderBar/HeaderBarActionsUI.stories.tsx b/frontend/packages/volto-light-theme/src/components/HeaderBar/HeaderBarActionsUI.stories.tsx
index 68c770f..df2d9e3 100644
--- a/frontend/packages/volto-light-theme/src/components/HeaderBar/HeaderBarActionsUI.stories.tsx
+++ b/frontend/packages/volto-light-theme/src/components/HeaderBar/HeaderBarActionsUI.stories.tsx
@@ -22,7 +22,7 @@ const MockLanguageSelector = () => (
 const MockAnontools = () => (
   <div className="anontools">
     <a href="/login" onClick={(e) => e.preventDefault()}>
-      Entrar
+      Log in
     </a>
   </div>
 );
@@ -30,6 +30,7 @@ const MockAnontools = () => (
 const meta: Meta<typeof HeaderBarActionsUI> = {
   title: 'Components/HeaderBarActions',
   component: HeaderBarActionsUI,
+  parameters: { fullBleed: true },
   decorators: [
     (Story) => (
       <div
@@ -37,7 +38,9 @@ const meta: Meta<typeof HeaderBarActionsUI> = {
           padding: '2rem',
           display: 'flex',
           justifyContent: 'flex-end',
-          background: '#e0e0e0',
+          // the page ground the bar sits on, so the story follows the colour
+          // mode instead of being pinned to one grey
+          background: 'var(--primary-color)',
         }}
       >
         <header className="header-wrapper" style={{ width: '100%' }}>
@@ -63,8 +66,8 @@ type Story = StoryObj<typeof HeaderBarActionsUI>;
 export const Default: Story = {
   args: {
     quickLinks: [
-      { label: 'Ouvidoria', href: '/ouvidoria' },
-      { label: 'Acesso à Informação', href: '/acesso-a-informacao' },
+      { label: 'Ombudsman', href: '/ombudsman' },
+      { label: 'Freedom of Information', href: '/freedom-of-information' },
     ],
     features: {
       languageSelector: true,
diff --git a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/MenuItem.stories.tsx b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/MenuItem.stories.tsx
new file mode 100644
index 0000000..43e915f
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/MenuItem.stories.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+import MenuItem from './MenuItem';
+import { NavigationCanvas } from './storyDecorators';
+import { aboutUs, contact } from './mocks';
+
+/**
+ * One top-level entry in the navigation bar.
+ *
+ * `hasFatMenu` decides whether it renders a button that opens a panel or a plain
+ * link. `MenuItem` is an `<li>`, so the canvas nests it in the `ul.desktop-menu`
+ * `_navigation.scss` expects.
+ */
+const withMenu: Decorator = (Story) => (
+  <Wrapper anonymous location="/">
+    <NavigationCanvas>
+      <ul className="desktop-menu">
+        <Story />
+      </ul>
+    </NavigationCanvas>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Navigation/MenuItem',
+  component: MenuItem,
+  decorators: [withMenu],
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  args: {
+    index: 0,
+    pathname: '/',
+    lang: 'en',
+    desktopMenuOpen: null,
+    openMenu: () => {},
+    closeMenu: () => {},
+  },
+} satisfies Meta<typeof MenuItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A section with children: renders the fat-menu trigger. */
+export const WithFatMenu: Story = {
+  args: { item: aboutUs, hasFatMenu: true },
+};
+
+/** The same entry with its panel open. */
+export const FatMenuOpen: Story = {
+  args: { item: aboutUs, hasFatMenu: true, desktopMenuOpen: 0 },
+};
+
+/** A leaf section: a plain link, no trigger. */
+export const PlainLink: Story = {
+  args: { item: contact, hasFatMenu: false },
+};
+
+/** The current page, so the entry carries the active treatment. */
+export const Active: Story = {
+  args: { item: aboutUs, hasFatMenu: true, pathname: '/about-us' },
+};
diff --git a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SCNavigation.stories.tsx b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SCNavigation.stories.tsx
new file mode 100644
index 0000000..d5c442b
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SCNavigation.stories.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+import SCNavigation from './SCNavigation';
+import { NavigationGround } from './storyDecorators';
+import { navigationItems } from './mocks';
+
+/**
+ * The site navigation, including the fat menu.
+ *
+ * `_navigation.scss` is scoped to `#navigation.navigation.scNavigation`, and
+ * `SCNavigation` emits all three itself — so this story only needs the themed
+ * ground behind it, not a second scope element.
+ *
+ * Items come from `state.navigation.items`, so the store is seeded rather than
+ * the items passed as a prop.
+ */
+
+const store = {
+  navigation: { items: navigationItems },
+  content: { data: { '@id': '/', '@type': 'Plone Site', title: 'Site' } },
+};
+
+const withNavigation: Decorator = (Story) => (
+  <Wrapper anonymous customStore={store} location="/">
+    <NavigationGround>
+      <Story />
+    </NavigationGround>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Navigation/Navigation',
+  component: SCNavigation,
+  decorators: [withNavigation],
+  parameters: { layout: 'fullscreen', fullBleed: true },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SCNavigation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Nothing selected — the state a visitor sees on the front page. */
+export const Default: Story = {
+  args: { pathname: '/' },
+};
+
+/**
+ * A section is current. `MenuItem` compares `pathname` against each item's
+ * `url` to mark the active trail.
+ */
+export const SectionActive: Story = {
+  args: { pathname: '/about-us' },
+};
+
+/** A leaf inside a section, so the parent is active by prefix rather than exactly. */
+export const LeafActive: Story = {
+  args: { pathname: '/about-us/team' },
+};
+
+/** A section with no children renders as a plain link, with no fat menu. */
+export const LeafSectionActive: Story = {
+  args: { pathname: '/contact' },
+};
diff --git a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenu.stories.tsx b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenu.stories.tsx
new file mode 100644
index 0000000..3ef8395
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenu.stories.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+import SubMenu from './SubMenu';
+import { NavigationCanvas } from './storyDecorators';
+import { aboutUs, ourWork, contact } from './mocks';
+
+/**
+ * The fat menu that drops from a top-level section.
+ *
+ * `SubMenu` renders `.submenu-wrapper` itself, but `_navigation.scss` only
+ * reaches it through `#navigation.navigation`, so the canvas is required. The
+ * panel is shown when `desktopMenuOpen` matches the item's `index`, which is why
+ * the open state is a prop rather than something to click for.
+ */
+
+const withNavigation: Decorator = (Story) => (
+  <Wrapper anonymous location="/">
+    <NavigationCanvas>
+      {/*
+        `.submenu-wrapper` is `position: absolute; top: 100%` and the rule lives
+        under `.desktop-menu`, so the panel needs both that ancestor and the
+        `<li>` MenuItem renders it inside — otherwise it positions against the
+        viewport and the close button lands in the wrong corner.
+      */}
+      <ul
+        className="desktop-menu"
+        style={{ display: 'flex', justifyContent: 'center', width: '100%' }}
+      >
+        {/*
+          The panel is `left: 50%; width: 100vw; translateX(-50%)`, so it centres
+          on its own `<li>`. On a page that item sits mid-bar; a single item at
+          the left edge would throw the panel off to the right.
+        */}
+        <li style={{ position: 'relative' }}>
+          {/*
+            The trigger MenuItem renders. Without it the `<li>` has no width —
+            the panel is absolutely positioned — so the list collapses to zero
+            and the panel centres on the wrong point.
+          */}
+          <span className="item">About Us</span>
+          <Story />
+        </li>
+      </ul>
+    </NavigationCanvas>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Navigation/SubMenu',
+  component: SubMenu,
+  decorators: [withNavigation],
+  parameters: { layout: 'fullscreen', fullBleed: true },
+  tags: ['autodocs'],
+  args: {
+    index: 0,
+    pathname: '/',
+    closeMenu: () => {},
+  },
+} satisfies Meta<typeof SubMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Open, with two children — the ordinary fat-menu case. */
+export const Open: Story = {
+  args: { item: aboutUs, desktopMenuOpen: 0 },
+};
+
+/** Closed. The panel stays in the DOM so the transition has something to animate. */
+export const Closed: Story = {
+  args: { item: aboutUs, desktopMenuOpen: null },
+};
+
+/** A single child, one of which carries an empty description. */
+export const SingleChild: Story = {
+  args: { item: ourWork, desktopMenuOpen: 0 },
+};
+
+/** A leaf section: no children, so the panel has only its header. */
+export const NoChildren: Story = {
+  args: { item: contact, desktopMenuOpen: 0 },
+};
+
+/** The current page sits inside this section, so a child is marked active. */
+export const WithActiveChild: Story = {
+  args: { item: aboutUs, desktopMenuOpen: 0, pathname: '/about-us/team' },
+};
diff --git a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuItem.stories.tsx b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuItem.stories.tsx
new file mode 100644
index 0000000..55ad2ef
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuItem.stories.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+import SubMenuItem from './SubMenuItem';
+import { NavigationCanvas } from './storyDecorators';
+import { mission, aboutUs } from './mocks';
+
+/**
+ * A single link inside a fat menu — title, optional description, and the active
+ * treatment when it is the current page.
+ */
+const withPanel: Decorator = (Story) => (
+  <Wrapper anonymous location="/">
+    <NavigationCanvas>
+      <div className="desktop-menu">
+        <div className="submenu-wrapper">
+          <div className="submenu active">
+            <div className="submenu-inner">
+              <div className="submenu-content">
+                <div className="submenu-items">
+                  <Story />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </NavigationCanvas>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Navigation/SubMenuItem',
+  component: SubMenuItem,
+  decorators: [withPanel],
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  args: { pathname: '/', closeMenu: () => {} },
+} satisfies Meta<typeof SubMenuItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { item: mission } };
+
+export const Active: Story = {
+  args: { item: mission, pathname: '/about-us/mission' },
+};
+
+export const WithoutDescription: Story = {
+  args: { item: { ...mission, description: '' } },
+};
+
+/** A long title and description, to show the wrapping. */
+export const LongText: Story = {
+  args: { item: { ...aboutUs, items: [] } },
+};
diff --git a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuItems.stories.tsx b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuItems.stories.tsx
new file mode 100644
index 0000000..b3a6c59
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuItems.stories.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+import SubMenuItems from './SubMenuItems';
+import { NavigationCanvas } from './storyDecorators';
+import { aboutUs, navigationItems } from './mocks';
+
+/**
+ * The grid of links inside a fat menu.
+ *
+ * Rendered inside `.submenu-content`, which is where `_navigation.scss` expects
+ * `.submenu-items` to sit; without that ancestor the grid collapses to a stack.
+ */
+const withPanel: Decorator = (Story) => (
+  <Wrapper anonymous location="/">
+    <NavigationCanvas>
+      <div className="desktop-menu">
+        <div className="submenu-wrapper">
+          <div className="submenu active">
+            <div className="submenu-inner">
+              <div className="submenu-content">
+                <Story />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </NavigationCanvas>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Navigation/SubMenuItems',
+  component: SubMenuItems,
+  decorators: [withPanel],
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  args: { pathname: '/', closeMenu: () => {} },
+} satisfies Meta<typeof SubMenuItems>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Two items, both with descriptions. */
+export const TwoItems: Story = { args: { items: aboutUs.items ?? [] } };
+
+/** One item whose description is empty, to show the layout without it. */
+export const MissingDescription: Story = {
+  args: { items: [{ ...aboutUs.items![0], description: '' }] },
+};
+
+/** Enough items to wrap onto a second row. */
+export const ManyItems: Story = {
+  args: {
+    items: [...(aboutUs.items ?? []), ...navigationItems].slice(0, 5),
+  },
+};
+
+/** One of the links is the current page. */
+export const WithActive: Story = {
+  args: { items: aboutUs.items ?? [], pathname: '/about-us/team' },
+};
diff --git a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuSection.stories.tsx b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuSection.stories.tsx
new file mode 100644
index 0000000..d0a6fb9
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuSection.stories.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+import SubMenuSection from './SubMenuSection';
+import { NavigationCanvas } from './storyDecorators';
+import { aboutUs, ourWork, contact } from './mocks';
+
+/**
+ * The header of a fat menu: a "Section" label, the section title as a link, and
+ * its description.
+ *
+ * The label is the one translatable string here — `Section`, via `defineMessages`.
+ */
+const withPanel: Decorator = (Story) => (
+  <Wrapper anonymous location="/">
+    <NavigationCanvas>
+      <div className="desktop-menu">
+        <div className="submenu-wrapper">
+          <div className="submenu active">
+            <div className="submenu-inner">
+              <Story />
+            </div>
+          </div>
+        </div>
+      </div>
+    </NavigationCanvas>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Navigation/SubMenuSection',
+  component: SubMenuSection,
+  decorators: [withPanel],
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  args: { closeMenu: () => {} },
+} satisfies Meta<typeof SubMenuSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithDescription: Story = { args: { item: aboutUs } };
+
+export const ShortDescription: Story = { args: { item: ourWork } };
+
+/** A long description, to show where it wraps. */
+export const LongDescription: Story = { args: { item: contact } };
+
+export const WithoutDescription: Story = {
+  args: { item: { ...aboutUs, description: '' } },
+};
diff --git a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuSection.tsx b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuSection.tsx
index f516401..5896f28 100644
--- a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuSection.tsx
+++ b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/SubMenuSection.tsx
@@ -9,8 +9,8 @@ type SubMenuSectionProps = {
 
 const messages = defineMessages({
   section: {
-    id: 'section',
-    defaultMessage: 'Seção',
+    id: 'Section',
+    defaultMessage: 'Section',
   },
 });
 
diff --git a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/mocks.ts b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/mocks.ts
index a92f7ac..fb4244f 100644
--- a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/mocks.ts
+++ b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/mocks.ts
@@ -9,58 +9,54 @@ import type { NavigationItem } from './types';
  * kept. Reuse these fixtures instead of hand-rolling data in each story.
  */
 
-/** "Sobre Nós" — a section with two children, exercises the fat-menu path. */
-export const sobreNos: NavigationItem = {
-  title: 'Sobre Nós',
+/** "About Us" — a section with two children, exercises the fat-menu path. */
+export const aboutUs: NavigationItem = {
+  title: 'About Us',
   description:
-    'Conheça quem somos, nossa missão e as pessoas que constroem a organização.',
-  url: '/sobre-nos',
+    'Learn who we are, our mission and the people who build the organisation.',
+  url: '/about-us',
   items: [
     {
-      title: 'Missão',
-      description: 'Nossa missão e valores fundamentais.',
-      url: '/sobre-nos/missao',
+      title: 'Mission',
+      description: 'Our mission and core values.',
+      url: '/about-us/mission',
       items: [],
     },
     {
-      title: 'Equipe',
-      description: 'Conheça os membros da equipe.',
-      url: '/sobre-nos/equipe',
+      title: 'Team',
+      description: 'Meet the members of the team.',
+      url: '/about-us/team',
       items: [],
     },
   ],
 };
 
-/** "Nossas ações" — a single child, one of which has an empty description. */
-export const nossasAcoes: NavigationItem = {
-  title: 'Nossas ações',
-  description: 'Ações e projetos da organização.',
-  url: '/nossas-acoes',
+/** "Our Work" — a single child, whose description is empty. */
+export const ourWork: NavigationItem = {
+  title: 'Our Work',
+  description: 'Initiatives and projects run by the organisation.',
+  url: '/our-work',
   items: [
     {
-      title: 'Notícias',
+      title: 'News',
       description: '',
-      url: '/nossas-acoes/noticias',
+      url: '/our-work/news',
       items: [],
     },
   ],
 };
 
-/** "Contato" — a leaf item without children, renders as a plain link. */
-export const contato: NavigationItem = {
-  title: 'Contato',
+/** "Contact" — a leaf item without children, renders as a plain link. */
+export const contact: NavigationItem = {
+  title: 'Contact',
   description:
-    'Entre em contato conosco. Envie-nos uma mensagem identificando-se e explicando o assunto.',
-  url: '/contato',
+    'Get in touch with us. Send a message introducing yourself and explaining the subject.',
+  url: '/contact',
   items: [],
 };
 
 /** A single leaf child, handy for isolating SubMenuItem/SubMenuSection. */
-export const missao: NavigationItem = sobreNos.items![0];
+export const mission: NavigationItem = aboutUs.items![0];
 
 /** The full top-level navigation, as consumed by `Navigation`. */
-export const navigationItems: NavigationItem[] = [
-  sobreNos,
-  nossasAcoes,
-  contato,
-];
+export const navigationItems: NavigationItem[] = [aboutUs, ourWork, contact];
diff --git a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/storyDecorators.tsx b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/storyDecorators.tsx
index 15765e9..011cca8 100644
--- a/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/storyDecorators.tsx
+++ b/frontend/packages/volto-light-theme/src/components/Navigation/SCNavigation/storyDecorators.tsx
@@ -17,9 +17,26 @@ const wrapperStyle: React.CSSProperties = {
 };
 
 /**
- * The container + navigation scope. `children` lets each story supply the
- * inner markup (`ul.desktop-menu`, `.submenu-items`, ...) its component
- * expects to be nested in.
+ * Just the themed ground, for `SCNavigation` itself — it renders its own
+ * `#navigation.navigation.scNavigation` element, so wrapping it in a second one
+ * would duplicate the id.
+ */
+export const NavigationGround = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => <div style={wrapperStyle}>{children}</div>;
+
+/**
+ * The container + navigation scope, for the sub-components. `children` lets each
+ * story supply the inner markup (`ul.desktop-menu`, `.submenu-items`, ...) its
+ * component expects to be nested in.
+ *
+ * The class list matters: `_navigation.scss` nests everything under
+ * `#navigation.navigation` **and** `&.scNavigation`, so all three selectors have
+ * to be present. Without `scNavigation` the rules silently miss — the fat menu
+ * still renders its content, but `.submenu-items` never becomes the two-column
+ * grid and the links keep the browser's default colour.
  */
 export const NavigationCanvas = ({
   children,
@@ -27,7 +44,11 @@ export const NavigationCanvas = ({
   children: React.ReactNode;
 }) => (
   <div style={wrapperStyle}>
-    <nav id="navigation" className="navigation" style={{ padding: 24 }}>
+    <nav
+      id="navigation"
+      className="navigation scNavigation"
+      style={{ padding: 24 }}
+    >
       {children}
     </nav>
   </div>
diff --git a/frontend/packages/volto-light-theme/src/components/ThemeToggle/ThemeToggle.tsx b/frontend/packages/volto-light-theme/src/components/ThemeToggle/ThemeToggle.tsx
index 8008028..7b1ea7a 100644
--- a/frontend/packages/volto-light-theme/src/components/ThemeToggle/ThemeToggle.tsx
+++ b/frontend/packages/volto-light-theme/src/components/ThemeToggle/ThemeToggle.tsx
@@ -3,9 +3,9 @@ import { defineMessages, useIntl } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 
-import contrastSVG from '../../icons/contrast.svg';
-import moonSVG from '../../icons/moon.svg';
-import sunSVG from '../../icons/sun.svg';
+import contrastSVG from '@simplesconsultoria/volto-light-theme/icons/contrast.svg';
+import moonSVG from '@simplesconsultoria/volto-light-theme/icons/moon.svg';
+import sunSVG from '@simplesconsultoria/volto-light-theme/icons/sun.svg';
 import {
   applyTheme,
   getAppliedTheme,
@@ -24,19 +24,19 @@ type ThemeOption = {
 const messages = defineMessages({
   toggleTheme: {
     id: 'toggleTheme',
-    defaultMessage: 'Alternar tema',
+    defaultMessage: 'Toggle theme',
   },
   lightTheme: {
     id: 'lightTheme',
-    defaultMessage: 'Claro',
+    defaultMessage: 'Light',
   },
   darkTheme: {
     id: 'darkTheme',
-    defaultMessage: 'Escuro',
+    defaultMessage: 'Dark',
   },
   highContrastTheme: {
     id: 'highContrastTheme',
-    defaultMessage: 'Alto contraste',
+    defaultMessage: 'High contrast',
   },
 });
 
diff --git a/frontend/packages/volto-light-theme/src/config/blockThemes.ts b/frontend/packages/volto-light-theme/src/config/blockThemes.ts
new file mode 100644
index 0000000..0c408db
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/config/blockThemes.ts
@@ -0,0 +1,53 @@
+/**
+ * The block-theme factory.
+ *
+ * Kept apart from `config/blocks` deliberately: the mapping has no dependency on
+ * block registration, and importing it from there pulls in every registered block.
+ * `_root.scss` must declare a `--block-theme-{name}-*` token for each property this
+ * maps — a `var()` with no definition and no fallback is invalid at computed-value
+ * time, so the whole declaration is dropped. `theme/blockThemes.test.ts` guards it.
+ */
+
+export interface ThemeDefinition {
+  style: Record<string, string>;
+  name: string;
+  label: string;
+}
+
+/**
+ * Create a complete theme definition by mapping every `--theme-*` variable
+ * to its `--block-theme-{name}-*` counterpart.
+ *
+ * @param name  — Machine name used as the CSS token root (e.g. `"default"`, `"brand"`).
+ * @param label — Human-readable label shown in the editor color picker.
+ */
+export function createThemeDefinition(
+  name: string,
+  label: string,
+): ThemeDefinition {
+  const v = (suffix: string) => `var(--block-theme-${name}-${suffix})`;
+  return {
+    style: {
+      // Ground
+      '--theme-color': v('bg'),
+      '--theme-foreground-color': v('text'),
+      '--theme-high-contrast-foreground-color': v('high-contrast'),
+      '--theme-low-contrast-foreground-color': v('low-contrast'),
+      '--theme-foreground-accent-color': v('accent-color'),
+      // High Ground
+      '--theme-high-contrast-color': v('high-bg'),
+      '--theme-top-foreground-color': v('top-text'),
+      '--theme-top-high-contrast-foreground-color': v('top-high-contrast'),
+      '--theme-top-low-contrast-foreground-color': v('top-low-contrast'),
+      '--theme-top-accent-color': v('top-accent-color'),
+      // Border
+      '--theme-border-color': v('border'),
+      '--theme-border-width': v('border-width'),
+      // Pattern (optional)
+      '--theme-pattern-image': v('pattern-image'),
+      '--theme-pattern-opacity': v('pattern-opacity'),
+    },
+    name,
+    label,
+  };
+}
diff --git a/frontend/packages/volto-light-theme/src/config/blocks.ts b/frontend/packages/volto-light-theme/src/config/blocks.ts
index 18d9df4..b495e8b 100644
--- a/frontend/packages/volto-light-theme/src/config/blocks.ts
+++ b/frontend/packages/volto-light-theme/src/config/blocks.ts
@@ -1,3 +1,4 @@
+import { createThemeDefinition } from './blockThemes';
 import type { ConfigType } from '@plone/registry';
 import type { BlockConfigBase } from '@plone/types';
 
@@ -33,7 +34,7 @@ declare module '@plone/types' {
 // Each theme maps semantic `--theme-*` CSS custom properties to concrete
 // `--block-theme-{name}-*` tokens defined in `_root.scss`.
 //
-// The structure follows a two-layer model:
+// The structure follows a four-layer model:
 //
 //   Ground          — the block's own background & text.
 //   High Ground     — elevated elements within the block (cards, chips, etc.).
@@ -41,13 +42,10 @@ declare module '@plone/types' {
 //   Pattern         — optional decorative background pattern / image.
 //
 // By using a factory, adding a new theme in a downstream project is a
-// one-liner:  `createThemeDefinition('purple', 'Roxo')`
+// one-liner:  `createThemeDefinition('purple', 'Purple')`
 
-export interface ThemeDefinition {
-  style: Record<string, string>;
-  name: string;
-  label: string;
-}
+export type { ThemeDefinition } from './blockThemes';
+export { createThemeDefinition } from './blockThemes';
 
 /**
  * `themes` and `defaultTheme` are a kitconcept convention that Volto's own
@@ -62,44 +60,6 @@ declare module '@plone/types' {
   }
 }
 
-/**
- * Create a complete theme definition by mapping every `--theme-*` variable
- * to its `--block-theme-{name}-*` counterpart.
- *
- * @param name  — Machine name used as the CSS token root (e.g. `"default"`, `"brand"`).
- * @param label — Human-readable label shown in the editor color picker.
- */
-export function createThemeDefinition(
-  name: string,
-  label: string,
-): ThemeDefinition {
-  const v = (suffix: string) => `var(--block-theme-${name}-${suffix})`;
-  return {
-    style: {
-      // Ground
-      '--theme-color': v('bg'),
-      '--theme-foreground-color': v('text'),
-      '--theme-high-contrast-foreground-color': v('high-contrast'),
-      '--theme-low-contrast-foreground-color': v('low-contrast'),
-      '--theme-foreground-accent-color': v('accent-color'),
-      // High Ground
-      '--theme-high-contrast-color': v('high-bg'),
-      '--theme-top-foreground-color': v('top-text'),
-      '--theme-top-high-contrast-foreground-color': v('top-high-contrast'),
-      '--theme-top-low-contrast-foreground-color': v('top-low-contrast'),
-      '--theme-top-accent-color': v('top-accent-color'),
-      // Border
-      '--theme-border-color': v('border'),
-      '--theme-border-width': v('border-width'),
-      // Pattern (optional — defaults to none/0 in _root.scss)
-      '--theme-pattern-image': v('pattern-image'),
-      '--theme-pattern-opacity': v('pattern-opacity'),
-    },
-    name,
-    label,
-  };
-}
-
 const customThemes: ThemeDefinition[] = [
   createThemeDefinition('default', 'Primary'),
   createThemeDefinition('brand', 'Brand'),
@@ -192,7 +152,7 @@ export default function install(config: ConfigType) {
         ...variations,
         {
           id: 'carousel',
-          title: 'Carrossel',
+          title: 'Carousel',
           template: CarouselTemplate,
           schemaEnhancer: carouselSchemaEnhancer,
         },
@@ -206,7 +166,7 @@ export default function install(config: ConfigType) {
         ...variations,
         {
           id: 'mediaCarousel',
-          title: 'Carrossel de Mídia',
+          title: 'Media Carousel',
           template: MediaCarouselTemplate,
           schemaEnhancer: mediaCarouselSchemaEnhancer,
         },
@@ -218,7 +178,7 @@ export default function install(config: ConfigType) {
         ...variations,
         {
           id: 'teaser',
-          title: 'Destaque',
+          title: 'Highlight',
           template: TeaserTemplate,
           schemaEnhancer: teaserSchemaEnhancer,
         },
diff --git a/frontend/packages/volto-light-theme/src/helpers/themeStyles.test.ts b/frontend/packages/volto-light-theme/src/helpers/themeStyles.test.ts
index 06e83e1..9901cb9 100644
--- a/frontend/packages/volto-light-theme/src/helpers/themeStyles.test.ts
+++ b/frontend/packages/volto-light-theme/src/helpers/themeStyles.test.ts
@@ -1,4 +1,6 @@
 import { describe, expect, it } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
 import {
   cssVariableFor,
   isSafeCssValue,
@@ -15,26 +17,59 @@ const serialized = (partial: Partial<SerializedTheme>): SerializedTheme =>
   partial as SerializedTheme;
 
 /**
- * Every style-bearing field of `ISCVLTThemeDefinition`, i.e. what
- * `theme_settings()` returns. Pinned here so a field added on the backend
- * without a matching token shows up as a failure rather than a silent no-op.
+ * Every colour field of `ISCVLTThemeDefinition`, i.e. what `theme_settings()`
+ * returns. Pinned here so a field added on the backend without a matching
+ * token shows up as a failure rather than a silent no-op; the tests in
+ * "stylesheet contract" below check this list against the schema itself and
+ * against the properties `_root.scss` actually reads.
  */
 const BACKEND_SETTING_FIELDS = [
-  'accent_color',
-  'accent_foreground_color',
-  'header_foreground_color',
-  'primary_color',
-  'primary_foreground_color',
-  'secondary_color',
-  'secondary_foreground_color',
+  'primary_color_light',
+  'primary_color_dark',
+  'primary_foreground_color_light',
+  'primary_foreground_color_dark',
+  'primary_low_foreground_color_light',
+  'primary_low_foreground_color_dark',
+  'primary_accent_color_light',
+  'primary_accent_color_dark',
+  'secondary_color_light',
+  'secondary_color_dark',
+  'secondary_foreground_color_light',
+  'secondary_foreground_color_dark',
+  'secondary_low_foreground_color_light',
+  'secondary_low_foreground_color_dark',
+  'secondary_accent_color_light',
+  'secondary_accent_color_dark',
+  'accent_color_light',
+  'accent_color_dark',
+  'accent_foreground_color_light',
+  'accent_foreground_color_dark',
+  'accent_low_foreground_color_light',
+  'accent_low_foreground_color_dark',
+  'accent_accent_color_light',
+  'accent_accent_color_dark',
+  'neutral_color_light',
+  'neutral_color_dark',
+  'neutral_foreground_color_light',
+  'neutral_foreground_color_dark',
+  'neutral_low_foreground_color_light',
+  'neutral_low_foreground_color_dark',
+  'neutral_accent_color_light',
+  'neutral_accent_color_dark',
+  'event_color_light',
+  'event_color_dark',
+  'file_color_light',
+  'file_color_dark',
+  'image_color_light',
+  'image_color_dark',
 ] as const;
 
 describe('cssVariableFor', () => {
   it.each([
-    ['primary_color', '--primary-color'],
-    ['primary_foreground_color', '--primary-foreground-color'],
+    ['primary_color_light', '--primary-color-light'],
+    ['primary_foreground_color_light', '--primary-foreground-color-light'],
     ['header_foreground_color', '--header-foreground-color'],
-    ['accent_color', '--accent-color'],
+    ['accent_color_dark', '--accent-color-dark'],
   ])('derives %o as %o', (field, variable) => {
     expect(cssVariableFor(field)).toBe(variable);
   });
@@ -48,25 +83,87 @@ describe('cssVariableFor', () => {
   });
 });
 
+/**
+ * The two ends of the contract this file only ever checked in the middle.
+ *
+ * `cssVariableFor` deriving `--event-color-light` from `event_color_light` is
+ * worth nothing if no stylesheet reads that property. When `_root.scss` read
+ * `--event-color-override` instead, every test here still passed and the
+ * control panel's content-type colours did nothing at all.
+ */
+describe('stylesheet contract', () => {
+  const ROOT_SCSS = fs.readFileSync(
+    path.join(__dirname, '..', 'theme', '_root.scss'),
+    'utf8',
+  );
+
+  /** Written as a regex so wrapping a long `light-dark()` still matches. */
+  const isRead = (token: string) =>
+    new RegExp(`var\\(\\s*${token}\\s*[,)]`).test(ROOT_SCSS);
+
+  it('has _root.scss read the property every backend field derives', () => {
+    const unread = BACKEND_SETTING_FIELDS.filter(
+      (field) => !isRead(cssVariableFor(field)),
+    );
+
+    expect(
+      unread,
+      `_root.scss reads no such custom property, so setting ` +
+        `${unread.join(', ')} in the themes control panel changes nothing`,
+    ).toEqual([]);
+  });
+
+  const SCHEMA = path.join(
+    __dirname,
+    '..',
+    '..',
+    '..',
+    '..',
+    '..',
+    'backend',
+    'src',
+    'sc',
+    'voltolighttheme',
+    'interfaces.py',
+  );
+
+  it.skipIf(!fs.existsSync(SCHEMA))(
+    'pins exactly the colour fields the backend schema declares',
+    () => {
+      const declared = [
+        ...fs
+          .readFileSync(SCHEMA, 'utf8')
+          .matchAll(/^ {4}(\w+) = fields\.Color\(/gm),
+      ].map((m) => m[1]);
+
+      expect(
+        declared.length,
+        'no Color fields found in interfaces.py',
+      ).toBeGreaterThan(0);
+      expect([...BACKEND_SETTING_FIELDS].sort()).toEqual(declared.sort());
+    },
+  );
+});
+
 describe('themeCustomProperties', () => {
   it('maps every setting onto its custom property', () => {
     const values = settings({
-      primary_color: '#123456',
-      primary_foreground_color: '#ffffff',
+      primary_color_light: '#123456',
+      primary_foreground_color_light: '#ffffff',
       header_foreground_color: '#eeeeee',
-      secondary_color: '#000000',
-      secondary_foreground_color: '#fafafa',
-      accent_color: '#ffb703',
-      accent_foreground_color: '#000000',
+      secondary_color_dark: '#000000',
+      secondary_foreground_color_dark: '#fafafa',
+      accent_color_light: '#ffb703',
+      accent_foreground_color_dark: '#000000',
     });
     expect(themeCustomProperties(values)).toEqual({
-      '--primary-color': '#123456',
-      '--primary-foreground-color': '#ffffff',
+      '--primary-color-light': '#123456',
+      '--primary-foreground-color-light': '#ffffff',
       '--header-foreground-color': '#eeeeee',
-      '--secondary-color': '#000000',
-      '--secondary-foreground-color': '#fafafa',
-      '--accent-color': '#ffb703',
-      '--accent-foreground-color': '#000000',
+      '--secondary-color-dark': '#000000',
+      '--secondary-foreground-color-dark': '#fafafa',
+      '--accent-color-light': '#ffb703',
+      '--accent-foreground-color-dark': '#000000',
     });
   });
 
@@ -80,21 +177,27 @@ describe('themeCustomProperties', () => {
   });
 
   it('accepts the three-digit hex form', () => {
-    expect(themeCustomProperties(settings({ primary_color: '#abc' }))).toEqual({
-      '--primary-color': '#abc',
+    expect(
+      themeCustomProperties(settings({ primary_color_light: '#abc' })),
+    ).toEqual({
+      '--primary-color-light': '#abc',
     });
   });
 
   it('trims surrounding whitespace', () => {
     expect(
-      themeCustomProperties(settings({ primary_color: '  #123456  ' })),
-    ).toEqual({ '--primary-color': '#123456' });
+      themeCustomProperties(settings({ primary_color_light: '  #123456  ' })),
+    ).toEqual({
+      '--primary-color-light': '#123456',
+    });
   });
 
   it('omits fields the theme does not carry', () => {
     expect(
-      themeCustomProperties(settings({ primary_color: '#123456' })),
-    ).toEqual({ '--primary-color': '#123456' });
+      themeCustomProperties(settings({ primary_color_light: '#123456' })),
+    ).toEqual({
+      '--primary-color-light': '#123456',
+    });
   });
 
   it('returns nothing for a missing theme', () => {
@@ -117,18 +220,20 @@ describe('themeCustomProperties', () => {
       '',
       'var(--x)',
     ])('drops %o', (value) => {
-      expect(themeCustomProperties({ primary_color: value })).toEqual({});
+      expect(themeCustomProperties({ primary_color_light: value })).toEqual({});
     });
 
     it('drops a value trying to close the declaration', () => {
       // The value is interpolated into a <style> element, so a payload that
       // escapes the declaration would inject arbitrary CSS.
       const injection = '#fff; } body { display: none; } :root {';
-      expect(themeCustomProperties({ primary_color: injection })).toEqual({});
+      expect(themeCustomProperties({ primary_color_light: injection })).toEqual(
+        {},
+      );
     });
 
     it('drops a non-string value', () => {
-      const values = { primary_color: 123 } as unknown as ThemeSettings;
+      const values = { primary_color_light: 123 } as unknown as ThemeSettings;
       expect(themeCustomProperties(values)).toEqual({});
     });
   });
@@ -156,8 +261,8 @@ describe('themeCustomProperties', () => {
 describe('isValidSettingValue', () => {
   describe('colour fields', () => {
     it.each([
-      'primary_color',
-      'accent_foreground_color',
+      'primary_color_light',
+      'accent_foreground_color_dark',
       // Not `_color`-suffixed, but a colour all the same — the reason the
       // pattern also covers `_foreground` and `_background`.
       'header_foreground_color',
@@ -243,13 +348,13 @@ describe('isSafeCssValue', () => {
 
 describe('themeStyleSheet', () => {
   it('renders a rule for :root by default', () => {
-    const css = themeStyleSheet(settings({ primary_color: '#123456' }));
-    expect(css).toBe(':root {\n  --primary-color: #123456;\n}');
+    const css = themeStyleSheet(settings({ primary_color_light: '#123456' }));
+    expect(css).toBe(':root {\n  --primary-color-light: #123456;\n}');
   });
 
   it('accepts a different selector', () => {
     const css = themeStyleSheet(
-      settings({ primary_color: '#123456' }),
+      settings({ primary_color_light: '#123456' }),
       '.themed',
     );
     expect(css.startsWith('.themed {')).toBe(true);
@@ -257,10 +362,13 @@ describe('themeStyleSheet', () => {
 
   it('renders every declaration', () => {
     const css = themeStyleSheet(
-      settings({ primary_color: '#123456', accent_color: '#ffb703' }),
+      settings({
+        primary_color_light: '#123456',
+        accent_color_dark: '#ffb703',
+      }),
     );
-    expect(css).toContain('--primary-color: #123456;');
-    expect(css).toContain('--accent-color: #ffb703;');
+    expect(css).toContain('--primary-color-light: #123456;');
+    expect(css).toContain('--accent-color-dark: #ffb703;');
   });
 
   it('is empty when the theme contributes nothing', () => {
@@ -269,7 +377,7 @@ describe('themeStyleSheet', () => {
   });
 
   it('is empty when every value is rejected', () => {
-    expect(themeStyleSheet(settings({ primary_color: 'red' }))).toBe('');
+    expect(themeStyleSheet(settings({ primary_color_light: 'red' }))).toBe('');
   });
 });
 
@@ -278,9 +386,9 @@ describe('themeSettingsOf', () => {
     const field = serialized({
       token: 'corporate',
       title: 'Corporate',
-      value: { primary_color: '#123456' },
+      value: { primary_color_light: '#123456' },
     });
-    expect(themeSettingsOf(field)?.primary_color).toBe('#123456');
+    expect(themeSettingsOf(field)?.primary_color_light).toBe('#123456');
   });
 
   it('returns undefined for a missing field', () => {
@@ -306,10 +414,10 @@ describe('themeSettingsOf', () => {
     const field = serialized({
       token: 'corporate',
       title: 'Corporate',
-      value: { primary_color: '#123456' },
+      value: { primary_color_light: '#123456' },
     });
     expect(themeStyleSheet(themeSettingsOf(field))).toBe(
-      ':root {\n  --primary-color: #123456;\n}',
+      ':root {\n  --primary-color-light: #123456;\n}',
     );
   });
 });
diff --git a/frontend/packages/volto-light-theme/src/helpers/themeStyles.ts b/frontend/packages/volto-light-theme/src/helpers/themeStyles.ts
index e6d94e6..d1a4bb9 100644
--- a/frontend/packages/volto-light-theme/src/helpers/themeStyles.ts
+++ b/frontend/packages/volto-light-theme/src/helpers/themeStyles.ts
@@ -20,7 +20,7 @@ const HEX_COLOR = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
  * `*_color`. A setting that does not match takes the general rule instead, so
  * naming a colour anything else would quietly relax its validation.
  */
-const COLOR_FIELD = /_color$/;
+const COLOR_FIELD = /_color(_light|_dark)?$/;
 
 /**
  * Constructs that would end the declaration, open a new rule, or start a
diff --git a/frontend/packages/volto-light-theme/src/index.ts b/frontend/packages/volto-light-theme/src/index.ts
index e1fd5e3..34a54fa 100644
--- a/frontend/packages/volto-light-theme/src/index.ts
+++ b/frontend/packages/volto-light-theme/src/index.ts
@@ -1,4 +1,5 @@
 import type { ConfigType } from '@plone/registry';
+import { defineMessages } from 'react-intl';
 import installSettings from './config/settings';
 import installBlocks from './config/blocks';
 import installComponents from './config/components';
@@ -6,6 +7,30 @@ import installSlots from './config/slots';
 import installReducers from './config/reducers';
 import installRoutes from './config/routes';
 
+/**
+ * Block and variation titles are plain strings in the block configuration, and
+ * Volto translates them with `formatMessageWithFallback`, which uses the string
+ * itself as the message id. They are declared here so `pnpm i18n` extracts them
+ * into the catalogue — nothing reads this object at runtime.
+ */
+defineMessages({
+  // Block titles
+  byline: { id: 'Byline', defaultMessage: 'Byline' },
+  mainImage: { id: 'Main Image', defaultMessage: 'Main Image' },
+  heroBlock: { id: 'Hero Block', defaultMessage: 'Hero Block' },
+  quote: { id: 'Quote', defaultMessage: 'Quote' },
+  // Hero block variations
+  heroFlex: { id: 'Flex / Decorative', defaultMessage: 'Flex / Decorative' },
+  heroCard: { id: 'Attached Card', defaultMessage: 'Attached Card' },
+  // Listing variations
+  carousel: { id: 'Carousel', defaultMessage: 'Carousel' },
+  mediaCarousel: { id: 'Media Carousel', defaultMessage: 'Media Carousel' },
+  highlight: { id: 'Highlight', defaultMessage: 'Highlight' },
+  // Block theme labels (see `createThemeDefinition` in config/blocks.ts)
+  themePrimary: { id: 'Primary', defaultMessage: 'Primary' },
+  themeBrand: { id: 'Brand', defaultMessage: 'Brand' },
+});
+
 function applyConfig(config: ConfigType) {
   installSettings(config);
   installBlocks(config);
diff --git a/frontend/packages/volto-light-theme/src/storybook/BlocksGallery.stories.tsx b/frontend/packages/volto-light-theme/src/storybook/BlocksGallery.stories.tsx
new file mode 100644
index 0000000..8ddebde
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/BlocksGallery.stories.tsx
@@ -0,0 +1,200 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import { RealStoreWrapper } from '@plone/volto/storybook';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import config from '@plone/volto/registry';
+
+import { sampleBlocks, galleryStore, galleryContent } from './galleryFixtures';
+
+/**
+ * Every registered block rendered through the real `RenderBlocks`.
+ *
+ * The per-block stories cover what this add-on owns. This covers the other 36,
+ * which come from Volto core, `@plone/volto-slate` and
+ * `@kitconcept/volto-light-theme` — and which this theme restyles, so how they
+ * look here is very much its concern.
+ *
+ * Each block is isolated behind an error boundary. A block that throws shows the
+ * message instead of blanking the page, which makes this an audit as much as a
+ * gallery: what renders, what renders empty, and what breaks.
+ *
+ * Note that `RenderBlocks` has an error boundary of its own, and it is the inner
+ * one — it catches first and renders "Block error: The X block with the id Y
+ * errored and cannot be displayed", so the boundary below never fires for a
+ * failing block. When auditing this gallery, search the DOM for **"Block error"**
+ * rather than for this component's message; a check for the latter alone reports
+ * a clean run while five blocks are broken, because Volto's message is long
+ * enough to pass for rendered content.
+ */
+
+class BlockBoundary extends React.Component<
+  { id: string; children: React.ReactNode },
+  { error: Error | null }
+> {
+  state = { error: null as Error | null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div
+          style={{
+            padding: '10px 12px',
+            border: '1px solid #f7d4d1',
+            borderRadius: 8,
+            background: '#fdecea',
+            color: '#b3261e',
+            font: '400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace',
+          }}
+        >
+          <strong>{this.props.id}</strong> threw: {this.state.error.message}
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+/** Ids that render a third-party embed rather than themed markup. */
+const EMBEDS = new Set([
+  'blueskyBlock',
+  'facebookBlock',
+  'flickrBlock',
+  'followUsBlock',
+  'instagramBlock',
+  'linkedinBlock',
+  'pinterestBlock',
+  'soundcloudBlock',
+  'spotifyBlock',
+  'tiktokBlock',
+  'tweetBlock',
+]);
+
+function registeredIds(): string[] {
+  const blocksConfig = (config.blocks?.blocksConfig ?? {}) as Record<
+    string,
+    any
+  >;
+  return Object.entries(blocksConfig)
+    .filter(([, b]) => b && typeof b === 'object' && b.id && b.view)
+    .map(([key]) => key)
+    .sort();
+}
+
+function Gallery({ scope = 'themed' }: { scope?: string }) {
+  const ids = registeredIds().filter((id) => {
+    if (scope === 'all') return true;
+    if (scope === 'embeds') return EMBEDS.has(id);
+    return !EMBEDS.has(id);
+  });
+
+  return (
+    <div style={{ font: '400 14px/1.55 system-ui, sans-serif' }}>
+      <p style={{ margin: '0 0 20px', color: '#5b6270' }}>
+        <strong>{ids.length}</strong> block{ids.length === 1 ? '' : 's'},
+        rendered through <code>RenderBlocks</code> with the sample data in{' '}
+        <code>galleryFixtures.ts</code>. Blocks with no sample data get a bare{' '}
+        <code>{'{ "@type": id }'}</code>, which shows their empty state.
+      </p>
+      {ids.map((id) => {
+        const data = { '@type': id, ...(sampleBlocks[id] ?? {}) };
+        const content = {
+          ...galleryContent,
+          blocks: { [`blk-${id}`]: data },
+          blocks_layout: { items: [`blk-${id}`] },
+        };
+        return (
+          <section key={id} style={{ marginBottom: 28 }}>
+            <h3
+              style={{
+                margin: '0 0 8px',
+                font: '600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace',
+                letterSpacing: '.06em',
+                textTransform: 'uppercase',
+                color: '#5b6270',
+              }}
+            >
+              {id}
+              {!sampleBlocks[id] && (
+                <span style={{ color: '#8a5300' }}> · no sample data</span>
+              )}
+            </h3>
+            <div
+              style={{
+                border: '1px solid #e4e7ec',
+                borderRadius: 10,
+                padding: 16,
+                overflowX: 'auto',
+              }}
+            >
+              <BlockBoundary id={id}>
+                <RenderBlocks
+                  content={content}
+                  location={{ pathname: '/gallery' }}
+                />
+              </BlockBoundary>
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+}
+
+/*
+ * `followUsBlock` reads `state.content.data` from the store rather than the
+ * content prop, and `HighlightView` reads `state.content.subrequests[block]` —
+ * so the `content` slice needs both keys. Spreading `galleryStore.content`
+ * rather than replacing it is what keeps them from clobbering each other.
+ */
+const store = {
+  ...galleryStore,
+  content: { ...galleryStore.content, data: galleryContent },
+};
+
+/*
+ * `RealStoreWrapper` rather than `Wrapper`: `search` and `eventCalendar` dispatch
+ * thunks on mount, and the plain mock store has no thunk middleware, so both
+ * failed with "Actions must be plain objects". With a real store the dispatch is
+ * accepted; the fetch has no backend behind it, so they settle into their empty
+ * state instead of erroring.
+ */
+const withGallery: Decorator = (Story) => (
+  <RealStoreWrapper anonymous customStore={store} location="/gallery">
+    <div style={{ padding: '2rem' }}>
+      <Story />
+    </div>
+  </RealStoreWrapper>
+);
+
+const meta = {
+  title: 'Public/Blocks/Gallery',
+  component: Gallery,
+  decorators: [withGallery],
+  parameters: { layout: 'fullscreen', fullBleed: true },
+  tags: ['autodocs'],
+  argTypes: {
+    scope: {
+      control: { type: 'inline-radio' },
+      options: ['themed', 'embeds', 'all'],
+    },
+  },
+} satisfies Meta<typeof Gallery>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Everything except the third-party embeds. */
+export const Themed: Story = { args: { scope: 'themed' } };
+
+/**
+ * The social embed blocks. These render third-party iframes, so what shows here
+ * depends on network access and on those services — very little of it is this
+ * theme's styling.
+ */
+export const Embeds: Story = { args: { scope: 'embeds' } };
+
+export const All: Story = { args: { scope: 'all' } };
diff --git a/frontend/packages/volto-light-theme/src/storybook/BlocksInventory.stories.tsx b/frontend/packages/volto-light-theme/src/storybook/BlocksInventory.stories.tsx
new file mode 100644
index 0000000..722d72c
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/BlocksInventory.stories.tsx
@@ -0,0 +1,190 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+import config from '@plone/volto/registry';
+
+/**
+ * Every block registered at runtime, whatever package put it there.
+ *
+ * The inventory is read from `config.blocks.blocksConfig` rather than compiled
+ * from source, so it cannot drift: a block added by an upstream release shows up
+ * here the moment the dependency is bumped, and one that disappears stops being
+ * listed. Three layers contribute — Volto core, `@plone/volto-slate`, and
+ * `@kitconcept/volto-light-theme` — on top of the four this add-on ships.
+ */
+
+/** Blocks this add-on registers itself. */
+const OWNED = new Set([
+  'documentByline',
+  'mainImageBlock',
+  'heroBlock',
+  'quoteBlock',
+]);
+
+/** Blocks this add-on modifies without owning — see `config/blocks.ts`. */
+const EXTENDED = new Set(['listing', 'gridBlock']);
+
+type Row = {
+  id: string;
+  title: string;
+  group: string;
+  variations: string[];
+  themes: number;
+  sidebarTab: string;
+  restricted: string;
+  origin: 'own' | 'extended' | 'inherited';
+};
+
+function collect(): Row[] {
+  const blocksConfig = (config.blocks?.blocksConfig ?? {}) as Record<
+    string,
+    any
+  >;
+  return Object.entries(blocksConfig)
+    .filter(([, block]) => block && typeof block === 'object' && block.id)
+    .map(([key, block]) => ({
+      id: key,
+      title: String(block.title ?? '—'),
+      group: String(block.group ?? '—'),
+      variations: (block.variations ?? []).map((v: any) => String(v.id)),
+      themes: (block.themes ?? []).length,
+      sidebarTab:
+        block.sidebarTab === undefined ? '—' : String(block.sidebarTab),
+      restricted:
+        typeof block.restricted === 'function'
+          ? 'conditional'
+          : String(Boolean(block.restricted)),
+      origin: OWNED.has(key)
+        ? 'own'
+        : EXTENDED.has(key)
+          ? 'extended'
+          : 'inherited',
+    }))
+    .sort((a, b) => a.id.localeCompare(b.id));
+}
+
+const ORIGIN_STYLE: Record<Row['origin'], React.CSSProperties> = {
+  own: { background: '#dff0e4', color: '#1c6b35' },
+  extended: { background: '#f6e3c2', color: '#8a5300' },
+  inherited: { background: '#eceff1', color: '#5b6270' },
+};
+
+function BlocksInventory({ origin = 'all' }: { origin?: string }) {
+  const rows = collect().filter((r) => origin === 'all' || r.origin === origin);
+  const counts = collect().reduce<Record<string, number>>((acc, r) => {
+    acc[r.origin] = (acc[r.origin] ?? 0) + 1;
+    return acc;
+  }, {});
+
+  const cell: React.CSSProperties = {
+    padding: '7px 10px',
+    borderBottom: '1px solid #e4e7ec',
+    textAlign: 'left',
+    verticalAlign: 'top',
+  };
+  const mono: React.CSSProperties = {
+    ...cell,
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+    fontSize: '12px',
+  };
+
+  return (
+    <div style={{ font: '400 14px/1.5 system-ui, sans-serif', padding: '8px' }}>
+      <p style={{ margin: '0 0 14px', color: '#5b6270' }}>
+        <strong>{rows.length}</strong> block{rows.length === 1 ? '' : 's'} shown
+        · {counts.own ?? 0} shipped by this add-on, {counts.extended ?? 0}{' '}
+        extended, {counts.inherited ?? 0} inherited from Volto core, volto-slate
+        and @kitconcept/volto-light-theme.
+      </p>
+      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <thead>
+          <tr>
+            {[
+              'id',
+              'title',
+              'group',
+              'variations',
+              'themes',
+              'tab',
+              'restricted',
+              'origin',
+            ].map((h) => (
+              <th
+                key={h}
+                style={{
+                  ...cell,
+                  font: '600 10.5px/1.4 system-ui, sans-serif',
+                  letterSpacing: '.07em',
+                  textTransform: 'uppercase',
+                  color: '#5b6270',
+                }}
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.id}>
+              <td style={mono}>{r.id}</td>
+              <td style={cell}>{r.title}</td>
+              <td style={mono}>{r.group}</td>
+              <td style={mono}>{r.variations.join(', ') || '—'}</td>
+              <td style={mono}>{r.themes || '—'}</td>
+              <td style={mono}>{r.sidebarTab}</td>
+              <td style={mono}>{r.restricted}</td>
+              <td style={cell}>
+                <span
+                  style={{
+                    ...ORIGIN_STYLE[r.origin],
+                    padding: '1px 7px',
+                    borderRadius: 999,
+                    font: '600 10px/1.7 system-ui, sans-serif',
+                  }}
+                >
+                  {r.origin}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+const withWrapper: Decorator = (Story) => (
+  <Wrapper anonymous>
+    <Story />
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Blocks/Inventory',
+  component: BlocksInventory,
+  decorators: [withWrapper],
+  parameters: { layout: 'fullscreen', fullBleed: true },
+  tags: ['autodocs'],
+  argTypes: {
+    origin: {
+      control: { type: 'inline-radio' },
+      options: ['all', 'own', 'extended', 'inherited'],
+    },
+  },
+} satisfies Meta<typeof BlocksInventory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Every block available to an editor on a site running this theme. */
+export const All: Story = { args: { origin: 'all' } };
+
+/** The four blocks this add-on registers. */
+export const ShippedByThisAddon: Story = { args: { origin: 'own' } };
+
+/** Blocks this add-on modifies but does not own. */
+export const Extended: Story = { args: { origin: 'extended' } };
+
+/** Everything inherited from core, volto-slate and upstream VLT. */
+export const Inherited: Story = { args: { origin: 'inherited' } };
diff --git a/frontend/packages/volto-light-theme/src/storybook/DefaultView.stories.tsx b/frontend/packages/volto-light-theme/src/storybook/DefaultView.stories.tsx
new file mode 100644
index 0000000..abb311f
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/DefaultView.stories.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+import DefaultView from '@plone/volto/components/theme/View/DefaultView';
+
+import {
+  pageContent,
+  newsContent,
+  eventContent,
+  pageStore,
+} from './viewFixtures';
+
+/**
+ * Page-level composition.
+ *
+ * The block stories show each block in isolation; this shows them stacked the
+ * way `RenderBlocks` puts them on a real page, inside the `#page-document`
+ * container `DefaultView` provides. Several rules only apply there — the
+ * listing variation selectors are scoped to
+ * `#page-document .blocks-group-wrapper > .block.listing.carousel`, for one —
+ * so spacing between blocks and container widths are only truthful here.
+ *
+ * `customStore` seeds the querystring results the listing block would otherwise
+ * fetch; see `pageStore` in `./fixtures`.
+ */
+const withPage: Decorator = (Story) => (
+  <Wrapper anonymous customStore={pageStore} location="/annual-review">
+    <Story />
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Views/Default View',
+  component: DefaultView,
+  decorators: [withPage],
+  parameters: { layout: 'fullscreen', fullBleed: true },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DefaultView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Every block the add-on ships, composed on one Document. */
+export const FullPage: Story = {
+  args: {
+    content: pageContent,
+    location: { pathname: '/annual-review' },
+  },
+};
+
+/** A shorter News Item: title, byline, image, text and a quote. */
+export const NewsItem: Story = {
+  args: {
+    content: newsContent,
+    location: { pathname: '/news/library-reopens-after-refurbishment' },
+  },
+};
+
+/**
+ * An Event, which upstream VLT gives its own initial blocks and its own view.
+ *
+ * The `eventMetadata` block is what makes the type look distinct — it renders
+ * the schedule, location and contact details straight off the content item.
+ */
+export const Event: Story = {
+  args: {
+    content: eventContent,
+    location: { pathname: '/events/accessibility-workshop' },
+  },
+};
diff --git a/frontend/packages/volto-light-theme/src/storybook/DsPreviewProvider.tsx b/frontend/packages/volto-light-theme/src/storybook/DsPreviewProvider.tsx
new file mode 100644
index 0000000..e182fb8
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/DsPreviewProvider.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from 'react-router-dom';
+
+import { createThemeDefinition } from '../config/blockThemes';
+
+/**
+ * The context a Claude Design preview needs, as a single bundle export.
+ *
+ * The converter normally bundles `.storybook/preview`'s decorators to wrap
+ * previews, but ours import Volto build aliases (`@root/../locales/en.json`,
+ * `@plone/volto/config`) that esbuild cannot resolve, so the decorator bundle
+ * fails and `cfg.provider` has to supply the same context instead.
+ *
+ * It reproduces what `withTheme` gives a story at its default toolbar settings
+ * — light mode on the root element *and* on the wrapper, the `default` block
+ * theme's `--theme-*` properties, and the container measure — plus the two
+ * providers the global decorators add. See `withTheme.tsx` for why the colour
+ * mode has to be set in both places.
+ *
+ * Messages are deliberately empty: with no catalogue, `react-intl` falls back to
+ * each message's `defaultMessage`, which is the English text the storybook shows.
+ */
+export default function DsPreviewProvider({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
+  React.useEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute('data-theme', 'light');
+    root.style.colorScheme = 'light';
+  }, []);
+
+  const style = {
+    colorScheme: 'light',
+    background: 'var(--primary-color)',
+    color: 'var(--primary-foreground-color)',
+    ...createThemeDefinition('default', 'default').style,
+  } as React.CSSProperties;
+
+  return (
+    <IntlProvider messages={{}} locale="en" defaultLocale="en">
+      <MemoryRouter initialEntries={['/']}>
+        <div style={style}>
+          <div
+            style={{
+              maxWidth: 'var(--default-container-width)',
+              margin: '0 auto',
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </MemoryRouter>
+    </IntlProvider>
+  );
+}
diff --git a/frontend/packages/volto-light-theme/src/storybook/GridBlock.stories.tsx b/frontend/packages/volto-light-theme/src/storybook/GridBlock.stories.tsx
new file mode 100644
index 0000000..ca329ef
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/GridBlock.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+
+import { imageGrid, galleryContent } from './galleryFixtures';
+
+/**
+ * `gridBlock` at each supported width.
+ *
+ * The add-on extends the core grid: it assigns its own block themes to both
+ * `gridBlock.themes` and `gridBlock.blocksConfig.themes`, and appends eight ids
+ * to `allowedBlocks` (`documentByline`, `__button`, `listing`, `slider`,
+ * `carousel`, `mainImageBlock`, `heroBlock`, `quoteBlock`). Core caps the grid at
+ * `maxLength: 4`, so four columns is the widest an editor can build.
+ *
+ * Each cell here is an `image` block with a title and description, which is the
+ * arrangement that shows the column rhythm and the caption treatment together.
+ */
+
+function Grid({ columns = 3 }: { columns?: number }) {
+  const content = {
+    ...galleryContent,
+    blocks: { 'grid-1': { '@type': 'gridBlock', ...imageGrid(columns) } },
+    blocks_layout: { items: ['grid-1'] },
+  };
+  return <RenderBlocks content={content} location={{ pathname: '/gallery' }} />;
+}
+
+const withWrapper: Decorator = (Story) => (
+  <Wrapper anonymous location="/gallery">
+    <div style={{ padding: '2rem' }}>
+      <Story />
+    </div>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Blocks/Grid',
+  component: Grid,
+  decorators: [withWrapper],
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  argTypes: {
+    columns: { control: { type: 'inline-radio' }, options: [1, 2, 3, 4] },
+  },
+} satisfies Meta<typeof Grid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OneColumn: Story = { args: { columns: 1 } };
+export const TwoColumns: Story = { args: { columns: 2 } };
+export const ThreeColumns: Story = { args: { columns: 3 } };
+
+/** Four is the maximum core allows — `gridBlock.maxLength` is 4. */
+export const FourColumns: Story = { args: { columns: 4 } };
diff --git a/frontend/packages/volto-light-theme/src/storybook/README.md b/frontend/packages/volto-light-theme/src/storybook/README.md
new file mode 100644
index 0000000..eafc2e5
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/README.md
@@ -0,0 +1,43 @@
+# Storybook
+
+Stories and harness code for components this package **does not ship**.
+
+The rule, so a story is always where you would look for it:
+
+| the story covers | it lives |
+|---|---|
+| a component this package ships | beside the component |
+| a component from a dependency, or nothing in particular | here |
+
+`Blocks/HeroBlock/HeroBlock.stories.tsx` sits next to the block it documents. `gridBlock`
+belongs to Volto core and `separator` to `@kitconcept/volto-separator-block`, so their
+stories are here — putting them under `components/Blocks/` would imply this package owns
+them.
+
+## Contents
+
+| file | covers |
+|---|---|
+| `withTheme.tsx` | the decorator every story renders through: colour mode, block theme, site theme, and the centred container |
+| `BlocksInventory.stories.tsx` | every block registered at runtime, whichever layer supplies it |
+| `BlocksGallery.stories.tsx` | each of those blocks rendered through `RenderBlocks` |
+| `DefaultView.stories.tsx` | Volto's `DefaultView` — a Document, a News Item and an Event |
+| `GridBlock.stories.tsx` | core's `gridBlock` at one to four columns |
+| `Separator.stories.tsx` | the separator block's width, short-line and alignment controls |
+| `galleryFixtures.ts` | sample block data and the content object the gallery renders against |
+| `viewFixtures.ts` | the page-level content objects |
+
+Fixtures for components this package *does* ship stay next to them —
+`components/Blocks/Listing/fixtures.ts` and
+`components/Controlpanels/Themes/fixtures.ts` — for the same reason.
+
+## Two things that catch people out
+
+**A component's stylesheet is usually scoped to an ancestor**, and outside it the
+component renders unstyled while looking like broken CSS. `_listing.scss` needs
+`body .block.listing`, `_navigation.scss` needs `#navigation.navigation.scNavigation`,
+and a themed block needs a wrapper supplying `--theme-*`. `docs/design-system/DESIGN_SYSTEM.md` §7 lists the cases.
+
+**`RenderBlocks` has its own per-block error boundary**, and it is the inner one — a
+failing block shows "Block error: …" rather than reaching a boundary a story adds. When
+auditing the gallery, search for that string.
diff --git a/frontend/packages/volto-light-theme/src/storybook/Separator.stories.tsx b/frontend/packages/volto-light-theme/src/storybook/Separator.stories.tsx
new file mode 100644
index 0000000..5316459
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/Separator.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+
+import { galleryContent } from './galleryFixtures';
+
+/**
+ * The separator block, from `@kitconcept/volto-separator-block`.
+ *
+ * Its schema has three controls, all under `styles`: `blockWidth:noprefix`,
+ * a `shortLine` toggle, and `align:noprefix`. The alignment is deliberately
+ * **disabled unless `shortLine` is on** (`schema.ts:83`) — a full-width rule has
+ * nothing to align — which is why the stories below pair them.
+ */
+
+function Separator({ styles = {} }: { styles?: Record<string, any> }) {
+  const content = {
+    ...galleryContent,
+    blocks: { 'sep-1': { '@type': 'separator', styles } },
+    blocks_layout: { items: ['sep-1'] },
+  };
+  return <RenderBlocks content={content} location={{ pathname: '/gallery' }} />;
+}
+
+const withWrapper: Decorator = (Story) => (
+  <Wrapper anonymous location="/gallery">
+    <div style={{ padding: '3rem 2rem' }}>
+      <Story />
+    </div>
+  </Wrapper>
+);
+
+const meta = {
+  title: 'Public/Blocks/Separator',
+  component: Separator,
+  decorators: [withWrapper],
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Full-width rule. Alignment is disabled in this state. */
+export const FullWidth: Story = {
+  args: { styles: { 'blockWidth:noprefix': 'default', shortLine: false } },
+};
+
+export const ShortLineLeft: Story = {
+  args: {
+    styles: {
+      'blockWidth:noprefix': 'default',
+      shortLine: true,
+      'align:noprefix': 'left',
+    },
+  },
+};
+
+export const ShortLineCentre: Story = {
+  args: {
+    styles: {
+      'blockWidth:noprefix': 'default',
+      shortLine: true,
+      'align:noprefix': 'center',
+    },
+  },
+};
+
+export const ShortLineRight: Story = {
+  args: {
+    styles: {
+      'blockWidth:noprefix': 'default',
+      shortLine: true,
+      'align:noprefix': 'right',
+    },
+  },
+};
+
+/** The narrow container width, to show the rule tracking the block width. */
+export const NarrowWidth: Story = {
+  args: { styles: { 'blockWidth:noprefix': 'narrow', shortLine: false } },
+};
diff --git a/frontend/packages/volto-light-theme/src/storybook/dsConfig.ts b/frontend/packages/volto-light-theme/src/storybook/dsConfig.ts
new file mode 100644
index 0000000..b043c9e
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/dsConfig.ts
@@ -0,0 +1,64 @@
+/**
+ * A minimally populated Volto config registry for Claude Design previews.
+ *
+ * Components read `config.settings` directly, and an empty registry makes them
+ * throw at render (`Cannot read properties of undefined`). On a real page the
+ * app's bootstrap fills it; in a standalone bundle nothing does.
+ *
+ * Two things are deliberately NOT done here:
+ *
+ * - **`@plone/volto/config` is not imported.** Volto's default config reaches
+ *   `load-volto-addons` (a webpack virtual) and node builtins (`path`,
+ *   `querystring`, `zlib`), none of which esbuild can resolve for the browser.
+ *   Only the handful of settings the shipped components actually read are seeded,
+ *   with Volto's own defaults as the values.
+ * - **`config/blocks` is not applied.** Registering the blocks pulls QuoteBlock's
+ *   slate graph, whose `.less` imports esbuild has no loader for.
+ */
+import config from '@plone/volto/registry';
+
+import installSettings from '../config/settings';
+import { defaultContentTypeColors } from '../config/contentTypeColors';
+
+const settings = (config.settings ??= {} as never) as Record<string, unknown>;
+
+// Volto's own defaults, from `packages/volto/src/config/index.js`.
+settings.navDepth ??= 1;
+settings.openExternalLinkInNewTab ??= false;
+
+// `installSettings` spreads the existing `apiExpanders` and writes into
+// `settings.vlt.components`; both are established by Volto's bootstrap and by
+// upstream VLT's own install, so without them it throws on its first statement
+// and every later setting — `scvlt.headerBar` among them — is never applied.
+settings.apiExpanders ??= [];
+settings.vlt ??= { components: {} };
+
+// Read by `UniversalLink` (which every listing card links through) and by
+// `RenderBlocks`. Values are Volto's own defaults; the URLs stand in for what
+// razzle derives from the environment at build time.
+settings.publicURL ??= 'http://localhost:3000';
+settings.apiPath ??= 'http://localhost:3000';
+settings.internalApiPath ??= 'http://localhost:8080/Plone';
+settings.downloadableObjects ??= ['File'];
+settings.viewableInBrowserObjects ??= [];
+settings.hashLinkSmoothScroll ??= false;
+settings.externalRoutes ??= [];
+settings.nonContentRoutes ??= [];
+
+// `RenderBlocks` indexes `config.blocks.blocksConfig[type]` without guarding it.
+// The blocks themselves are not registered here (that is `config/blocks`, and it
+// reaches slate), so a composed block renders empty rather than throwing.
+const blocks = ((config as Record<string, unknown>).blocks ??= {}) as Record<
+  string,
+  unknown
+>;
+blocks.blocksConfig ??= {};
+blocks.requiredBlocks ??= [];
+
+installSettings(config as never);
+
+// Set by `config/blocks` on a real page; seeded here because that module is
+// excluded (see above).
+settings.contentTypeColors = { ...defaultContentTypeColors };
+
+export {};
diff --git a/frontend/packages/volto-light-theme/src/storybook/dsEntry.ts b/frontend/packages/volto-light-theme/src/storybook/dsEntry.ts
new file mode 100644
index 0000000..b22b410
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/dsEntry.ts
@@ -0,0 +1,35 @@
+/**
+ * Component surface for the Claude Design export.
+ *
+ * The package's public entry (`src/index.ts`) exports only `applyConfig` — every
+ * component reaches Volto through the block registry, not through an import. The
+ * design-system converter needs the components as named exports so its bundle can put
+ * them on `window.<Global>` and redirect story imports there, which is what this module
+ * provides. Nothing in the add-on imports it.
+ *
+ * `QuoteBlock` is deliberately absent: its view imports `@plone/volto-slate/blocks/Text`,
+ * whose graph reaches the slate editor's `.less` stylesheets, and the converter's esbuild
+ * has no `.less` loader.
+ */
+
+import './dsGlobals';
+import './dsConfig';
+
+export { default as DsPreviewProvider } from './DsPreviewProvider';
+export { default as AccessibilityControls } from '../components/AccessibilityControls/AccessibilityControls';
+export { default as HeroBlock } from '../components/Blocks/HeroBlock/View';
+export { default as Carousel } from '../components/Blocks/Listing/CarouselTemplate';
+export { default as Grid } from '../components/Blocks/Listing/GridTemplate';
+export { default as MediaCarousel } from '../components/Blocks/Listing/MediaCarouselTemplate';
+export { default as Highlight } from '../components/Blocks/Listing/TeaserTemplate';
+export { default as MainImageBlock } from '../components/Blocks/MainImageBlock/View';
+export { default as DocumentByLine } from '../components/DocumentByLine/DocumentByLine';
+export { default as DropdownMenu } from '../components/DropdownMenu/DropdownMenu';
+export { default as HeaderBarActions } from '../components/HeaderBar/HeaderBarActionsUI';
+export { default as MenuItem } from '../components/Navigation/SCNavigation/MenuItem';
+export { default as Navigation } from '../components/Navigation/SCNavigation/SCNavigation';
+export { default as SubMenu } from '../components/Navigation/SCNavigation/SubMenu';
+export { default as SubMenuItem } from '../components/Navigation/SCNavigation/SubMenuItem';
+export { default as SubMenuItems } from '../components/Navigation/SCNavigation/SubMenuItems';
+export { default as SubMenuSection } from '../components/Navigation/SCNavigation/SubMenuSection';
+export { default as ThemeToggle } from '../components/ThemeToggle/ThemeToggle';
diff --git a/frontend/packages/volto-light-theme/src/storybook/dsGlobals.ts b/frontend/packages/volto-light-theme/src/storybook/dsGlobals.ts
new file mode 100644
index 0000000..f7ac9ff
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/dsGlobals.ts
@@ -0,0 +1,20 @@
+/**
+ * Volto's build-time globals, for bundlers that aren't webpack.
+ *
+ * Razzle defines `__CLIENT__`, `__SERVER__`, `__DEVELOPMENT__` and `__DEBUG__`
+ * through webpack's DefinePlugin, so Volto's source reads them as bare
+ * identifiers. The design-system converter bundles with esbuild, which defines
+ * none of them, and the first component to touch one throws
+ * `ReferenceError: __CLIENT__ is not defined` at render.
+ *
+ * Imported for its side effect as the first import of `dsEntry`, so the
+ * assignment runs before any component module evaluates.
+ */
+const g = globalThis as unknown as Record<string, unknown>;
+
+g.__CLIENT__ ??= true;
+g.__SERVER__ ??= false;
+g.__DEVELOPMENT__ ??= true;
+g.__DEBUG__ ??= false;
+
+export {};
diff --git a/frontend/packages/volto-light-theme/src/storybook/galleryFixtures.ts b/frontend/packages/volto-light-theme/src/storybook/galleryFixtures.ts
new file mode 100644
index 0000000..11e9ba8
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/galleryFixtures.ts
@@ -0,0 +1,377 @@
+/**
+ * Sample block data for the blocks gallery.
+ *
+ * Keyed by block id, merged over `{ '@type': id }`. Only the fields a block's
+ * view actually reads are set; anything absent from this map renders with a bare
+ * type, which is still useful — it shows the block's empty state.
+ *
+ * Deliberately conservative: a guessed shape that silently renders nothing is
+ * worse than an honest empty state, so shapes here are ones taken from the
+ * block's own view or schema rather than assumed.
+ *
+ * Not a `*.stories.*` file, so Storybook does not try to render it.
+ */
+
+import { listingItems } from '../components/Blocks/Listing/fixtures';
+import gallery from './images/gallery.jpg';
+import grid01 from './images/grid-01.jpg';
+import grid02 from './images/grid-02.jpg';
+import grid03 from './images/grid-03.jpg';
+import grid04 from './images/grid-04.jpg';
+import { imageScales } from './images/imageScales';
+
+/** A Slate value — `[{ type, children }]`. */
+const slate = (text: string) => [{ type: 'p', children: [{ text }] }];
+
+const IMAGE = imageScales(gallery);
+
+/** One photograph per grid cell, cycled so any column count has images. */
+const GRID_PHOTOS = [grid01, grid02, grid03, grid04];
+
+/** An item shaped for the blocks that take an `href` to another object. */
+const linkedItem = {
+  ...listingItems[0],
+  image_field: 'preview_image',
+  image_scales: { preview_image: [IMAGE] },
+};
+
+/**
+ * A grid of `image` blocks, `count` wide.
+ *
+ * `gridBlock` nests real blocks under its own `blocks` / `blocks_layout`, and
+ * core caps it at `maxLength: 4`. Each cell gets a distinct seed so the columns
+ * are visually distinguishable.
+ */
+export function imageGrid(count: number): Record<string, any> {
+  const ids = Array.from({ length: count }, (_, i) => `grid-cell-${i + 1}`);
+  return {
+    blocks: Object.fromEntries(
+      ids.map((id, i) => [
+        id,
+        {
+          '@type': 'image',
+          url: GRID_PHOTOS[i % GRID_PHOTOS.length],
+          alt: `Placeholder photograph ${i + 1}`,
+          title: `Column ${i + 1}`,
+          description: 'A short caption under the image.',
+        },
+      ]),
+    ),
+    blocks_layout: { items: ids },
+  };
+}
+
+/**
+ * Sample data for the social embed blocks, taken from each block's own story in
+ * `@kitconcept/volto-social-blocks` rather than invented — those are the URLs
+ * and ids the block authors test against.
+ */
+export const socialBlocks: Record<string, Record<string, any>> = {
+  blueskyBlock: {
+    blueskyUrl: 'https://bsky.app/profile/plone.org/post/3mddkocpicz2t',
+    align: 'center',
+    size: 'l',
+    colorMode: 'system',
+  },
+  facebookBlock: {
+    facebookId:
+      'https://m.facebook.com/story.php?story_fbid=pfbid08AKg1aseCjJek1nrRL8hXRCFe6v645pJt15as4Vm1YG2MjoGkFZ1biA6hmHX6qfql&id=100067147516508',
+    align: 'center',
+    size: 'l',
+  },
+  instagramBlock: {
+    instagramId: 'https://www.instagram.com/p/CjTBnwju6XY/',
+    captioned: true,
+    align: 'center',
+    size: 'l',
+  },
+  linkedinBlock: {
+    postURL:
+      'https://www.linkedin.com/embed/feed/update/urn:li:share:7318254492443979777',
+    align: 'center',
+    size: 'l',
+  },
+  pinterestBlock: {
+    pinterestUrl: 'https://www.pinterest.com/pin/99360735500167749/',
+    align: 'center',
+    size: 'm',
+  },
+  soundcloudBlock: {
+    soundcloudId:
+      'https://api.soundcloud.com/tracks/472694601&color=%23ff5500&auto_play=false&show_user=true&visual=true',
+    align: 'center',
+    size: 'l',
+  },
+  spotifyBlock: {
+    spotifyId:
+      'https://open.spotify.com/episode/0EPE3mFCbNUunN3PFUv1lT?si=1ef7ad30c07744c4',
+    align: 'center',
+    size: 'l',
+  },
+  tiktokBlock: {
+    tiktokUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
+    align: 'center',
+  },
+  tweetBlock: {
+    tweetId: '1542568225527005184',
+    align: 'center',
+    size: 'l',
+    theme: 'dark',
+    lang: 'en',
+    dnt: true,
+  },
+  flickrBlock: {
+    flickrId:
+      '<a data-flickr-embed="true" href="https://www.flickr.com/photos/plone-foundation/albums/72177720303069181" title="Plone Conference 2022 Namur"><img src="https://live.staticflickr.com/65535/52443622430_c442b75502.jpg" width="500" height="375" alt="Plone Conference 2022 Namur"/></a>',
+    align: 'center',
+  },
+};
+
+export const sampleBlocks: Record<string, Record<string, any>> = {
+  title: {},
+  description: {},
+  slate: {
+    value: slate(
+      'A paragraph of body copy, so the block shows the theme typography rather than an empty box.',
+    ),
+  },
+  detachedSlate: {
+    value: slate('Detached slate renders outside the main text flow.'),
+  },
+  html: { html: '<p>Raw HTML block output.</p>' },
+  // `@kitconcept/volto-separator-block`: block width, a short-line toggle, and
+  // an alignment that the schema *disables* unless `shortLine` is on.
+  separator: {
+    styles: {
+      'blockWidth:noprefix': 'default',
+      shortLine: true,
+      'align:noprefix': 'center',
+    },
+  },
+  toc: { title: 'On this page' },
+  __button: {
+    title: 'Read the full report',
+    href: [{ '@id': '/annual-review', title: 'Annual review' }],
+  },
+  teaser: {
+    href: [linkedItem],
+    title: linkedItem.title,
+    description: linkedItem.description,
+    head_title: linkedItem.head_title,
+    preview_image: [linkedItem],
+  },
+  highlight: {
+    href: [linkedItem],
+    title: linkedItem.title,
+    description: linkedItem.description,
+  },
+  image: {
+    url: gallery,
+    alt: 'Placeholder photograph',
+    align: 'center',
+    size: 'l',
+  },
+  video: { url: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ' },
+  listing: {
+    variation: 'grid',
+    gridColumns: 3,
+    querystring: {
+      query: [
+        {
+          i: 'portal_type',
+          o: 'plone.app.querystring.operation.selection.any',
+          v: ['News Item', 'Document'],
+        },
+      ],
+    },
+  },
+  // `getPanels` maps `data.data.blocks_layout.items`; without `data.data` the
+  // block throws "undefined is not iterable".
+  accordion: {
+    headline: 'Frequently asked questions',
+    data: {
+      blocks_layout: { items: ['acc-1', 'acc-2'] },
+      blocks: {
+        'acc-1': {
+          '@type': 'accordionPanel',
+          title: 'How do I request a service?',
+          blocks_layout: { items: ['acc-1-body'] },
+          blocks: {
+            'acc-1-body': {
+              '@type': 'slate',
+              value: slate(
+                'Three routes are available; each is described below.',
+              ),
+            },
+          },
+        },
+        'acc-2': {
+          '@type': 'accordionPanel',
+          title: 'How long does it take?',
+          blocks_layout: { items: ['acc-2-body'] },
+          blocks: {
+            'acc-2-body': {
+              '@type': 'slate',
+              value: slate(
+                'Most requests are answered within ten working days.',
+              ),
+            },
+          },
+        },
+      },
+    },
+  },
+  // `TableBlockView` reads `data.table.rows[].cells[].value`, and the first row
+  // is treated as the header.
+  slateTable: {
+    table: {
+      hideHeaders: false,
+      fixed: true,
+      compact: false,
+      basic: false,
+      celled: true,
+      inverted: false,
+      striped: false,
+      rows: [
+        {
+          key: 'r0',
+          cells: [
+            { key: 'r0c0', type: 'header', value: slate('Service') },
+            { key: 'r0c1', type: 'header', value: slate('Turnaround') },
+          ],
+        },
+        {
+          key: 'r1',
+          cells: [
+            { key: 'r1c0', type: 'data', value: slate('Records request') },
+            { key: 'r1c1', type: 'data', value: slate('10 working days') },
+          ],
+        },
+        {
+          key: 'r2',
+          cells: [
+            { key: 'r2c0', type: 'data', value: slate('Planning enquiry') },
+            { key: 'r2c1', type: 'data', value: slate('21 working days') },
+          ],
+        },
+      ],
+    },
+  },
+  // The add-on's own blocks, so the gallery is complete on its own terms.
+  documentByline: { showPublished: true, showModified: true, showAuthor: true },
+  quoteBlock: {
+    value: slate('A short quotation, attributed below.'),
+    author: 'Attribution',
+    backgroundStyle: 'filled',
+  },
+  mainImageBlock: {
+    align: 'full',
+    size: 'l',
+    title: 'Main image',
+    description: 'With a caption underneath.',
+  },
+  gridBlock: imageGrid(3),
+  heroBlock: {
+    variation: 'flex',
+    overwrite: true,
+    title: 'Hero block',
+    description: 'Pulled from the highlighted item unless overwritten.',
+    href: [linkedItem],
+    textSide: 'left',
+    imageSize: '50%',
+    titleTag: 'h2',
+  },
+};
+
+/**
+ * Store state the gallery needs.
+ *
+ * The listing block reads `state.querystringsearch.subrequests` under
+ * `${content.UID}-${blockId}`; the gallery gives every block the same content
+ * UID, so only the listing's own key is needed.
+ */
+socialBlocks.followUsBlock = { animate: false };
+
+Object.assign(sampleBlocks, socialBlocks);
+
+export const galleryStore = {
+  // `HighlightView` reads `state.content.subrequests[block]`; without the
+  // `subrequests` key the lookup throws on `undefined`.
+  content: { subrequests: {} },
+  querystringsearch: {
+    subrequests: {
+      'gallery-uid-blk-listing': {
+        loading: false,
+        loaded: true,
+        error: null,
+        items: listingItems.slice(0, 3),
+        total: 3,
+        batching: {},
+      },
+    },
+  },
+};
+
+/**
+ * The content object every gallery block is rendered against.
+ *
+ * Several blocks read the *content item* rather than their own data — `title`
+ * and `description` mirror the fields, `documentByline` reads the dates and
+ * creators, `mainImageBlock` reads `preview_image_link`, and `leadimage` reads
+ * `image`. Without these they render empty, which looks like a broken block
+ * rather than missing data.
+ */
+export const galleryContent = {
+  '@id': '/gallery',
+  '@type': 'Document',
+  UID: 'gallery-uid',
+  title: 'Every block, one page',
+  description:
+    'A sample description, so the description block has something to show.',
+  creators: ['Comms team'],
+  effective: '2026-08-20T09:00:00+00:00',
+  modified: '2026-08-28T17:30:00+00:00',
+  preview_image_link: {
+    '@id': '/gallery/preview',
+    '@type': 'Image',
+    title: 'Placeholder photograph',
+    image_field: 'image',
+    image_scales: { image: [IMAGE] },
+  },
+  image: { ...IMAGE },
+  image_field: 'image',
+  image_scales: { image: [IMAGE] },
+  // `followUsBlock` reads its networks from the inherit expander rather than
+  // from block data — `useNetworks` -> `useLiveData(content,
+  // 'plonegovbr.socialmedia.settings', 'social_links')`.
+  '@components': {
+    inherit: {
+      'plonegovbr.socialmedia.settings': {
+        data: {
+          social_links: [
+            {
+              id: 'facebook',
+              title: 'Facebook',
+              href: 'https://example.org/facebook',
+            },
+            {
+              id: 'instagram',
+              title: 'Instagram',
+              href: 'https://example.org/instagram',
+            },
+            {
+              id: 'linkedin',
+              title: 'LinkedIn',
+              href: 'https://example.org/linkedin',
+            },
+            {
+              id: 'youtube',
+              title: 'YouTube',
+              href: 'https://example.org/youtube',
+            },
+          ],
+        },
+      },
+    },
+  },
+};
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/gallery.jpg b/frontend/packages/volto-light-theme/src/storybook/images/gallery.jpg
new file mode 100644
index 0000000..b9f7c43
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/gallery.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/grid-01.jpg b/frontend/packages/volto-light-theme/src/storybook/images/grid-01.jpg
new file mode 100644
index 0000000..fa31f21
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/grid-01.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/grid-02.jpg b/frontend/packages/volto-light-theme/src/storybook/images/grid-02.jpg
new file mode 100644
index 0000000..965ae79
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/grid-02.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/grid-03.jpg b/frontend/packages/volto-light-theme/src/storybook/images/grid-03.jpg
new file mode 100644
index 0000000..e747de3
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/grid-03.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/grid-04.jpg b/frontend/packages/volto-light-theme/src/storybook/images/grid-04.jpg
new file mode 100644
index 0000000..9549f16
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/grid-04.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/hero.jpg b/frontend/packages/volto-light-theme/src/storybook/images/hero.jpg
new file mode 100644
index 0000000..749b629
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/hero.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/imageScales.ts b/frontend/packages/volto-light-theme/src/storybook/images/imageScales.ts
new file mode 100644
index 0000000..65ea731
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/images/imageScales.ts
@@ -0,0 +1,29 @@
+/**
+ * Shape a bundled photograph the way Plone's REST API shapes an image field.
+ *
+ * Volto's `Image` builds its `src` as `flattenToAppURL(base_path || item['@id'])`
+ * joined to `download` (`Image.jsx:56-60`), so a fixture has to supply the two
+ * halves rather than a whole URL. Splitting at the last `/` round-trips any form
+ * the bundlers produce — a served path under Storybook, an inlined `data:` URI in
+ * the Claude Design export — because rejoining with `/` reproduces the original
+ * string exactly.
+ *
+ * `scales` is deliberately empty: there is one file per photograph, and Volto
+ * skips `srcSet` entirely when the map is empty, so nothing claims to offer
+ * widths that do not exist.
+ *
+ * :param url: the imported image URL.
+ * :param width: intrinsic width in pixels.
+ * :param height: intrinsic height in pixels.
+ * :returns: an `image_scales` entry.
+ */
+export function imageScales(url: string, width = 1200, height = 675) {
+  const cut = url.lastIndexOf('/');
+  return {
+    base_path: url.slice(0, cut),
+    download: url.slice(cut + 1),
+    width,
+    height,
+    scales: {},
+  };
+}
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/listing-01.jpg b/frontend/packages/volto-light-theme/src/storybook/images/listing-01.jpg
new file mode 100644
index 0000000..cc3ce4c
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/listing-01.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/listing-02.jpg b/frontend/packages/volto-light-theme/src/storybook/images/listing-02.jpg
new file mode 100644
index 0000000..59f21ae
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/listing-02.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/listing-03.jpg b/frontend/packages/volto-light-theme/src/storybook/images/listing-03.jpg
new file mode 100644
index 0000000..d2f4647
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/listing-03.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/listing-04.jpg b/frontend/packages/volto-light-theme/src/storybook/images/listing-04.jpg
new file mode 100644
index 0000000..604053a
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/listing-04.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/listing-05.jpg b/frontend/packages/volto-light-theme/src/storybook/images/listing-05.jpg
new file mode 100644
index 0000000..2f80076
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/listing-05.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/listing-06.jpg b/frontend/packages/volto-light-theme/src/storybook/images/listing-06.jpg
new file mode 100644
index 0000000..1afbe0e
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/listing-06.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/main-image.jpg b/frontend/packages/volto-light-theme/src/storybook/images/main-image.jpg
new file mode 100644
index 0000000..8425321
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/main-image.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/optimize.sh b/frontend/packages/volto-light-theme/src/storybook/images/optimize.sh
new file mode 100755
index 0000000..86e0d2c
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/images/optimize.sh
@@ -0,0 +1,53 @@
+#!/usr/bin/env bash
+# Bring the story photographs under the weight budget, in place.
+#
+# These images are inlined as base64 data URIs into the Claude Design preview
+# bundles, so a megabyte here is roughly 1.4 MB there — per component that shows
+# a photo. 150 KB at 1200x675 is comfortably transparent for the sizes anything
+# actually renders at (listing cards are 400-800px wide).
+#
+# jpegoptim rather than `sips`, which re-encodes without optimising and barely
+# moves the file, and rather than Pillow, which would need the ICC profile
+# copied across by hand. Only EXIF/IPTC/comments are stripped; the sRGB profile
+# is preserved.
+#
+# Idempotent: a file already under budget is left untouched, so re-running never
+# re-encodes (and never compounds generation loss).
+set -euo pipefail
+
+BUDGET_KB=150
+QUALITIES=(80 76 72 68 64 60)
+
+cd "$(dirname "${BASH_SOURCE[0]}")"
+command -v jpegoptim >/dev/null || {
+  echo "jpegoptim not found — brew install jpegoptim" >&2
+  exit 1
+}
+
+total_before=0
+total_after=0
+for f in *.jpg; do
+  before=$(stat -f%z "$f")
+  total_before=$((total_before + before))
+
+  if [ $((before / 1024)) -le "$BUDGET_KB" ]; then
+    printf '%-16s %4s KB  (already under budget)\n' "$f" "$((before / 1024))"
+    total_after=$((total_after + before))
+    continue
+  fi
+
+  for q in "${QUALITIES[@]}"; do
+    cp "$f" ".$f.tmp"
+    jpegoptim --max="$q" --strip-exif --strip-iptc --strip-com --quiet ".$f.tmp"
+    size=$(stat -f%z ".$f.tmp")
+    if [ $((size / 1024)) -le "$BUDGET_KB" ] || [ "$q" = "${QUALITIES[-1]}" ]; then
+      mv ".$f.tmp" "$f"
+      printf '%-16s %4s KB -> %4s KB  (q=%s)\n' "$f" "$((before / 1024))" "$((size / 1024))" "$q"
+      total_after=$((total_after + size))
+      break
+    fi
+    rm -f ".$f.tmp"
+  done
+done
+
+printf '\ntotal: %s KB -> %s KB\n' "$((total_before / 1024))" "$((total_after / 1024))"
diff --git a/frontend/packages/volto-light-theme/src/storybook/images/page-hero.jpg b/frontend/packages/volto-light-theme/src/storybook/images/page-hero.jpg
new file mode 100644
index 0000000..86a6913
Binary files /dev/null and b/frontend/packages/volto-light-theme/src/storybook/images/page-hero.jpg differ
diff --git a/frontend/packages/volto-light-theme/src/storybook/viewFixtures.ts b/frontend/packages/volto-light-theme/src/storybook/viewFixtures.ts
new file mode 100644
index 0000000..f4d93ee
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/viewFixtures.ts
@@ -0,0 +1,272 @@
+/**
+ * Content objects for the page-level view stories.
+ *
+ * Shaped like what `plone.restapi` serves for a single item: the blocks live in
+ * `blocks` keyed by id with the order in `blocks_layout.items`, which is what
+ * `RenderBlocks` walks.
+ *
+ * These exist to show the add-on's blocks *composed on a page* rather than in
+ * isolation — spacing between blocks, the container widths, and the way a
+ * listing sits under a hero are only visible here.
+ *
+ * Not a `*.stories.*` file, so Storybook does not try to render it.
+ */
+
+import { listingItems } from '../components/Blocks/Listing/fixtures';
+import pageHero from './images/page-hero.jpg';
+import { imageScales } from './images/imageScales';
+import { imageGrid, socialBlocks } from './galleryFixtures';
+
+/** Block ids, named rather than UUID so the layout below stays readable. */
+export const blockIds = {
+  title: 'b1-title',
+  byline: 'b2-byline',
+  mainImage: 'b3-main-image',
+  intro: 'b4-intro',
+  hero: 'b5-hero',
+  quote: 'b6-quote',
+  body: 'b7-body',
+  listing: 'b8-listing',
+  grid: 'b9-grid',
+  social: 'b10-social',
+};
+
+/** A Slate value — the shape the `slate` block stores in `value`. */
+const slate = (text: string) => [{ type: 'p', children: [{ text }] }];
+
+/**
+ * The image the `mainImageBlock` reads off the content item.
+ *
+ * `base_path` carries the external host so the scales resolve without a
+ * backend — see the note in `Blocks/Listing/fixtures.ts`.
+ */
+const previewImageLink = {
+  '@id': '/annual-review/preview-image',
+  '@type': 'Image',
+  title: 'Council chamber during a public session',
+  image_field: 'image',
+  image_scales: {
+    image: [imageScales(pageHero)],
+  },
+};
+
+export const documentUID = 'a1b2c3d4e5f60718293a4b5c6d7e8f90';
+
+/** A Document exercising every block the add-on ships. */
+export const pageContent: Record<string, any> = {
+  '@id': '/annual-review',
+  '@type': 'Document',
+  UID: documentUID,
+  id: 'annual-review',
+  title: 'Annual review',
+  description:
+    'What changed this year across services, budgets and the way decisions are taken.',
+  creators: ['Comms team'],
+  effective: '2026-08-20T09:00:00+00:00',
+  modified: '2026-08-28T17:30:00+00:00',
+  preview_image_link: previewImageLink,
+  blocks_layout: {
+    items: [
+      blockIds.title,
+      blockIds.byline,
+      blockIds.mainImage,
+      blockIds.intro,
+      blockIds.hero,
+      blockIds.quote,
+      blockIds.body,
+      blockIds.grid,
+      blockIds.listing,
+      blockIds.social,
+    ],
+  },
+  blocks: {
+    [blockIds.title]: { '@type': 'title' },
+    [blockIds.byline]: {
+      '@type': 'documentByline',
+      showPublished: true,
+      showModified: true,
+      showAuthor: true,
+    },
+    [blockIds.mainImage]: {
+      '@type': 'mainImageBlock',
+      align: 'full',
+      size: 'l',
+      title: 'A year of public sessions',
+      description: 'Attendance rose by a third on the previous year.',
+      theme: 'default',
+    },
+    [blockIds.intro]: {
+      '@type': 'slate',
+      value: slate(
+        'This review sets out what the organisation did over the past twelve months, what it cost, and what is planned next. Figures are drawn from the audited accounts published alongside it.',
+      ),
+    },
+    [blockIds.hero]: {
+      '@type': 'heroBlock',
+      variation: 'flex',
+      overwrite: true,
+      title: 'Budget hearing draws a full room',
+      description:
+        'Residents filled the chamber to question next year’s spending plan.',
+      headerText: 'In focus',
+      footerText: 'Reported 14 August 2026',
+      button: true,
+      buttonText: 'Read the full report',
+      showDate: true,
+      tags: ['Policy', 'Community'],
+      textSide: 'left',
+      imageSize: '50%',
+      imageFit: 'cover',
+      blockWidth: 'layout',
+      titleTag: 'h2',
+      href: [listingItems[0]],
+      theme: 'default',
+    },
+    [blockIds.quote]: {
+      '@type': 'quoteBlock',
+      backgroundStyle: 'filled',
+      author: 'Chair of the review panel',
+      value: slate(
+        'The test of a review like this is whether someone outside the organisation can follow the reasoning. That is what we set out to make possible.',
+      ),
+      theme: 'brand',
+    },
+    [blockIds.body]: {
+      '@type': 'slate',
+      value: slate(
+        'Each section below links to the underlying data. Where a figure is provisional it is marked as such, and the date it was last revised is given.',
+      ),
+    },
+    [blockIds.grid]: {
+      '@type': 'gridBlock',
+      theme: 'default',
+      ...imageGrid(3),
+    },
+    // One representative embed. The rest have their own stories and the
+    // `Blocks/Gallery` Embeds view; stacking eleven third-party iframes on one
+    // page would say more about those services than about this theme.
+    [blockIds.social]: {
+      '@type': 'blueskyBlock',
+      ...socialBlocks.blueskyBlock,
+    },
+    [blockIds.listing]: {
+      '@type': 'listing',
+      variation: 'grid',
+      gridColumns: 3,
+      headlineButtonText: 'See all publications',
+      // `hasQuery` in `withQuerystringResults` is `querystring.query.length > 0`.
+      // With an empty query the block takes the *folder* path and ignores the
+      // store entirely, so real criteria are what make `pageStore` take effect.
+      querystring: {
+        query: [
+          {
+            i: 'portal_type',
+            o: 'plone.app.querystring.operation.selection.any',
+            v: ['News Item', 'Document', 'Event', 'File'],
+          },
+        ],
+        sort_on: 'effective',
+        sort_order: 'reverse',
+      },
+      theme: 'default',
+    },
+  },
+};
+
+/**
+ * Store state the listing block needs.
+ *
+ * `withQuerystringResults` reads `state.querystringsearch.subrequests` under
+ * `${content.UID}-${blockId}`, so seeding that key is what makes the listing
+ * render results instead of an empty state.
+ */
+export const pageStore = {
+  querystringsearch: {
+    subrequests: {
+      [`${documentUID}-${blockIds.listing}`]: {
+        loading: false,
+        loaded: true,
+        error: null,
+        items: listingItems,
+        total: listingItems.length,
+        batching: {},
+      },
+    },
+  },
+  content: { data: pageContent },
+};
+
+/** A News Item, to show the byline and hero against a different type. */
+export const newsContent: Record<string, any> = {
+  ...pageContent,
+  '@id': '/news/library-reopens-after-refurbishment',
+  '@type': 'News Item',
+  id: 'library-reopens-after-refurbishment',
+  title: 'Library reopens after refurbishment',
+  description:
+    'Longer opening hours, a new study area and a lift to the first floor.',
+  blocks_layout: {
+    items: [
+      blockIds.title,
+      blockIds.byline,
+      blockIds.mainImage,
+      blockIds.intro,
+      blockIds.quote,
+    ],
+  },
+};
+
+/**
+ * An Event, built from the initial blocks upstream VLT defines for the type.
+ *
+ * `config.blocks.initialBlocks.Event` is `title`, `eventMetadata` (marked
+ * `fixed` and `required`, so an editor cannot remove it) and `slate` — see
+ * `@kitconcept/volto-light-theme/config/blocks.tsx`. The distinct look comes
+ * from `eventMetadata`, which reads the *content item's* scheduling fields
+ * rather than any block data of its own.
+ */
+export const eventContent: Record<string, any> = {
+  '@id': '/events/accessibility-workshop',
+  '@type': 'Event',
+  UID: 'e1f2a3b4c5d60718293a4b5c6d7e8f01',
+  id: 'accessibility-workshop',
+  title: 'Accessibility workshop for content editors',
+  description:
+    'A hands-on session on alt text, heading structure and colour contrast, aimed at anyone who publishes to the site.',
+  creators: ['Comms team'],
+  effective: '2026-08-01T09:00:00+00:00',
+  modified: '2026-08-12T14:00:00+00:00',
+  // Fields `eventMetadata` renders
+  start: '2026-09-05T13:00:00+00:00',
+  end: '2026-09-05T16:00:00+00:00',
+  whole_day: false,
+  open_end: false,
+  location: 'Council chamber, ground floor',
+  event_url: 'https://example.org/events/accessibility-workshop',
+  contact_name: 'Training team',
+  contact_email: 'training@example.org',
+  contact_phone: '+55 11 5555 0100',
+  preview_image_link: previewImageLink,
+  blocks_layout: {
+    items: [blockIds.title, 'ev-metadata', blockIds.intro, blockIds.quote],
+  },
+  blocks: {
+    [blockIds.title]: { '@type': 'title' },
+    'ev-metadata': { '@type': 'eventMetadata', fixed: true, required: true },
+    [blockIds.intro]: {
+      '@type': 'slate',
+      value: slate(
+        'Bring a laptop. The session is capped at twenty places and runs to three hours with a short break.',
+      ),
+    },
+    [blockIds.quote]: {
+      '@type': 'quoteBlock',
+      backgroundStyle: 'transparent',
+      author: 'Previous attendee',
+      theme: 'default',
+      value: slate(
+        'I had been publishing for two years and still learned something in the first ten minutes.',
+      ),
+    },
+  },
+};
diff --git a/frontend/packages/volto-light-theme/src/storybook/withTheme.tsx b/frontend/packages/volto-light-theme/src/storybook/withTheme.tsx
new file mode 100644
index 0000000..e629d5e
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/storybook/withTheme.tsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import type { Decorator } from '@storybook/react';
+
+import { createThemeDefinition } from '../config/blocks';
+import { themeCustomProperties } from '../helpers/themeStyles';
+import {
+  defaultTheme,
+  corporateTheme,
+  natalTheme,
+} from '../components/Controlpanels/Themes/fixtures';
+import type { ThemeSettings } from '../types/theme';
+
+/**
+ * Storybook decorator that puts a story in the same styling context a block has
+ * on a real page.
+ *
+ * Three things a bare story does not get:
+ *
+ * 1. **A colour mode.** This has to be applied to `document.documentElement`,
+ *    not to a wrapper. Upstream VLT registers six tokens with
+ *    `@property { syntax: '<color>' }` — `--primary-color`,
+ *    `--primary-foreground-color`, `--secondary-color`,
+ *    `--secondary-foreground-color`, `--accent-color` and
+ *    `--accent-foreground-color`. A *registered* custom property is computed
+ *    eagerly at the element that declares it, so its `light-dark()` is resolved
+ *    once at `:root` and inherited as a flat colour; a descendant that changes
+ *    `color-scheme` cannot make it re-resolve. Setting the mode on the root is
+ *    also what a real page does.
+ * 2. **A block theme.** `--theme-*` is only defined when a themed block wrapper
+ *    supplies it. Stories render views bare, so all 14 properties are undefined
+ *    and every themed colour silently falls back — which is how six missing
+ *    focus outlines went unnoticed.
+ * 3. **A site theme.** The Themes control panel sends `ISCVLTThemeDefinition`
+ *    records; applying one is what a real site does.
+ *
+ * It also constrains every story to `--default-container-width` and centres it,
+ * so components are seen at the measure they occupy on a page rather than
+ * stretched across the viewport. A story that is genuinely full-bleed — the page
+ * views, the header bar — can opt out with `parameters: { fullBleed: true }`.
+ */
+
+/** The colour modes `_root.scss` defines a `[data-theme]` block for. */
+const COLOR_MODES = {
+  light: 'light',
+  dark: 'dark',
+  'high-contrast': 'dark',
+} as const;
+
+type ColorMode = keyof typeof COLOR_MODES;
+
+/** Site themes offered in the toolbar, shaped as the control panel serves them. */
+const SITE_THEMES: Record<string, ThemeSettings | null> = {
+  none: null,
+  default: defaultTheme,
+  corporate: corporateTheme,
+  natal: natalTheme,
+};
+
+/**
+ * Build the inline custom properties for one block theme.
+ *
+ * Reuses `createThemeDefinition` rather than restating the mapping, so a theme
+ * added in `config/blocks.ts` needs no change here.
+ */
+function blockThemeStyle(name: string): Record<string, string> {
+  if (name === 'none') return {};
+  return createThemeDefinition(name, name).style;
+}
+
+export const globalTypes = {
+  colorMode: {
+    name: 'Colour mode',
+    description: 'light-dark() resolution and [data-theme] overrides',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'contrast',
+      dynamicTitle: true,
+      items: [
+        { value: 'light', title: 'Light' },
+        { value: 'dark', title: 'Dark' },
+        { value: 'high-contrast', title: 'High contrast' },
+      ],
+    },
+  },
+  blockTheme: {
+    name: 'Block theme',
+    description: 'The --theme-* mapping a themed block carries',
+    defaultValue: 'default',
+    toolbar: {
+      icon: 'paintbrush',
+      dynamicTitle: true,
+      items: [
+        { value: 'none', title: 'No block theme' },
+        { value: 'default', title: 'Primary' },
+        { value: 'brand', title: 'Brand' },
+      ],
+    },
+  },
+  siteTheme: {
+    name: 'Site theme',
+    description: 'An ISCVLTThemeDefinition record from the control panel',
+    defaultValue: 'none',
+    toolbar: {
+      icon: 'globe',
+      dynamicTitle: true,
+      items: [
+        { value: 'none', title: 'Stylesheet defaults' },
+        { value: 'default', title: 'Default' },
+        { value: 'corporate', title: 'Corporate' },
+        { value: 'natal', title: 'Natal' },
+      ],
+    },
+  },
+};
+
+/**
+ * The themed shell a story renders inside.
+ *
+ * A real component rather than inline decorator code, so it may use hooks.
+ */
+function ThemedStory({
+  colorMode,
+  blockTheme,
+  siteTheme,
+  fullBleed,
+  children,
+}: {
+  colorMode: ColorMode;
+  blockTheme: string;
+  siteTheme: string;
+  fullBleed: boolean;
+  children: React.ReactNode;
+}) {
+  React.useEffect(() => {
+    const root = document.documentElement;
+    const previous = root.getAttribute('data-theme');
+    root.setAttribute('data-theme', colorMode);
+    root.style.colorScheme = COLOR_MODES[colorMode] ?? 'light';
+    return () => {
+      if (previous === null) root.removeAttribute('data-theme');
+      else root.setAttribute('data-theme', previous);
+      root.style.colorScheme = '';
+    };
+  }, [colorMode]);
+
+  // Unregistered properties resolve where they are *used*, so they need the
+  // colour scheme here too: Storybook's preview resets `color-scheme` below
+  // `<html>`, which would otherwise leave them resolving in light mode however
+  // the root is set. Registered properties were already fixed at `:root` above,
+  // so between the two every token follows the toolbar.
+  const style = {
+    colorScheme: COLOR_MODES[colorMode] ?? 'light',
+    background: 'var(--primary-color)',
+    color: 'var(--primary-foreground-color)',
+    minHeight: '100vh',
+    ...blockThemeStyle(blockTheme),
+    ...themeCustomProperties(SITE_THEMES[siteTheme]),
+  } as React.CSSProperties;
+
+  return (
+    <div style={style}>
+      <div
+        style={{ maxWidth: 'var(--default-container-width)', margin: '0 auto' }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export const withTheme: Decorator = (Story, context) => (
+  <ThemedStory
+    colorMode={(context.globals.colorMode ?? 'light') as ColorMode}
+    blockTheme={(context.globals.blockTheme ?? 'default') as string}
+    siteTheme={(context.globals.siteTheme ?? 'none') as string}
+    fullBleed={Boolean(context.parameters?.fullBleed)}
+  >
+    <Story />
+  </ThemedStory>
+);
+
+export default withTheme;
diff --git a/frontend/packages/volto-light-theme/src/theme/_globals.scss b/frontend/packages/volto-light-theme/src/theme/_globals.scss
index 6356924..381b922 100644
--- a/frontend/packages/volto-light-theme/src/theme/_globals.scss
+++ b/frontend/packages/volto-light-theme/src/theme/_globals.scss
@@ -74,7 +74,7 @@ body .block.search .search-wrapper {
     @include color-block-change-vertical-spacing();
   }
 }
-/* Seleciona os formulários, exceto se estiverem dentro do sidebar ou do schemaForm */
+/* Select forms, except those inside the sidebar or the schemaForm */
 .ui.form:not(#sidebar *, #sidebar, .block.schemaForm *, .block.schemaForm) {
   .ui.secondary.pointing.menu {
     .item {
diff --git a/frontend/packages/volto-light-theme/src/theme/_main.scss b/frontend/packages/volto-light-theme/src/theme/_main.scss
index 66ff2f7..ec098b3 100644
--- a/frontend/packages/volto-light-theme/src/theme/_main.scss
+++ b/frontend/packages/volto-light-theme/src/theme/_main.scss
@@ -16,6 +16,7 @@
 @import 'components/dropdownMenu';
 @import 'components/footer';
 @import 'components/breadcrumbs';
+@import 'components/documentByLine';
 @import 'components/search';
 @import 'components/themesControlpanel';
 @import 'blocks/listing';
diff --git a/frontend/packages/volto-light-theme/src/theme/_root.scss b/frontend/packages/volto-light-theme/src/theme/_root.scss
index ffd6ea0..da8d9df 100644
--- a/frontend/packages/volto-light-theme/src/theme/_root.scss
+++ b/frontend/packages/volto-light-theme/src/theme/_root.scss
@@ -16,6 +16,7 @@
   // Brand colors
   --brand-color: #f4822c;
   --brand-color-dark: #b55e1c;
+  --brand-color-darker: #af5009;
 
   // Semantic colors
   --primary-color: light-dark(
@@ -49,7 +50,7 @@
   );
   --secondary-accent-color: light-dark(
     var(--secondary-accent-color-light, var(--brand-color)),
-    var(--secondary-accent-color-dark, var(--brand-color))
+    var(--secondary-accent-color-dark, var(--brand-color-dark))
   );
 
   --accent-color: light-dark(
@@ -82,7 +83,7 @@
     var(--neutral-low-foreground-color-dark, var(--gray-10))
   );
   --neutral-accent-color: light-dark(
-    var(--neutral-accent-color-light, var(--brand-color)),
+    var(--neutral-accent-color-light, var(--brand-color-darker)),
     var(--neutral-accent-color-dark, var(--brand-color))
   );
 
@@ -91,9 +92,21 @@
   // Content Types
   --news-item-color: var(--pure-black);
   --document-color: var(--accent-color);
-  --event-color: red;
-  --file-color: blue;
-  --image-color: green;
+  // Defaults are literals rather than palette entries: these three sit off the
+  // brand scale. A site theme overrides them through `--*-color-light` /
+  // `--*-color-dark`, the names `themeStyles.ts` derives from its settings.
+  --event-color: light-dark(
+    var(--event-color-light, #d32f2f),
+    var(--event-color-dark, #d32f2f)
+  );
+  --file-color: light-dark(
+    var(--file-color-light, #1976d2),
+    var(--file-color-dark, #1976d2)
+  );
+  --image-color: light-dark(
+    var(--image-color-light, #388e3c),
+    var(--image-color-dark, #388e3c)
+  );
 
   // Layout mappings
   --header-background: var(--primary-color);
@@ -122,27 +135,44 @@
   --font-body: system-ui, sans-serif;
 
   // Block theme: Default
+  // Ground
   --block-theme-default-bg: var(--primary-color);
   --block-theme-default-text: var(--primary-foreground-color);
+  --block-theme-default-high-contrast: var(--primary-foreground-color);
   --block-theme-default-low-contrast: var(--primary-low-foreground-color);
   --block-theme-default-accent-color: var(--primary-accent-color);
+  // High Ground
   --block-theme-default-high-bg: var(--neutral-color);
   --block-theme-default-top-text: var(--neutral-foreground-color);
+  --block-theme-default-top-high-contrast: var(--neutral-foreground-color);
   --block-theme-default-top-low-contrast: var(--neutral-low-foreground-color);
   --block-theme-default-top-accent-color: var(--neutral-accent-color);
+  // Border
   --block-theme-default-border: var(--accent-color);
   --block-theme-default-border-width: 4px 0 0;
+  // Pattern
+  --block-theme-default-pattern-image: none;
+  --block-theme-default-pattern-opacity: 0;
 
   // Block theme: Brand
+  // Ground
   --block-theme-brand-bg: var(--accent-color);
   --block-theme-brand-text: var(--accent-foreground-color);
+  --block-theme-brand-high-contrast: var(--accent-foreground-color);
   --block-theme-brand-low-contrast: var(--accent-low-foreground-color);
   --block-theme-brand-accent-color: var(--accent-accent-color);
+  // High Ground
   --block-theme-brand-high-bg: var(--primary-color);
   --block-theme-brand-top-text: var(--primary-foreground-color);
+  --block-theme-brand-top-high-contrast: var(--primary-foreground-color);
   --block-theme-brand-top-low-contrast: var(--primary-low-foreground-color);
   --block-theme-brand-top-accent-color: var(--primary-accent-color);
+  // Border
   --block-theme-brand-border: unset;
+  --block-theme-brand-border-width: 0;
+  // Pattern
+  --block-theme-brand-pattern-image: none;
+  --block-theme-brand-pattern-opacity: 0;
 
   // Links
   --link-color: var(--brand-color);
@@ -191,6 +221,11 @@
   --file-color: var(--text-high-contrast);
   --image-color: var(--text-high-contrast);
 
+  --block-theme-default-high-contrast: var(--text-high-contrast);
+  --block-theme-default-top-high-contrast: var(--text-high-contrast);
+  --block-theme-brand-high-contrast: var(--text-high-contrast);
+  --block-theme-brand-top-high-contrast: var(--text-high-contrast);
+
   --block-theme-default-border: var(--border-high-contrast);
   --block-theme-default-border-width: 3px;
   --block-theme-brand-border: var(--border-high-contrast);
diff --git a/frontend/packages/volto-light-theme/src/theme/_variables.scss b/frontend/packages/volto-light-theme/src/theme/_variables.scss
index 34cbd1c..8a3d4a4 100644
--- a/frontend/packages/volto-light-theme/src/theme/_variables.scss
+++ b/frontend/packages/volto-light-theme/src/theme/_variables.scss
@@ -23,6 +23,7 @@ $font-sizes: (
 );
 
 $line-heights: (
+  2xs: 0.875rem,
   xs: 1rem,
   s: 1.125rem,
   m: 1.5rem,
diff --git a/frontend/packages/volto-light-theme/src/theme/blockThemes.test.ts b/frontend/packages/volto-light-theme/src/theme/blockThemes.test.ts
new file mode 100644
index 0000000..19fe865
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/theme/blockThemes.test.ts
@@ -0,0 +1,132 @@
+import { describe, expect, it } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { createThemeDefinition } from '../config/blocks';
+
+/**
+ * Guards the contract between `createThemeDefinition` and `_root.scss`.
+ *
+ * The factory maps 14 semantic `--theme-*` properties onto
+ * `--block-theme-{name}-*` tokens, but nothing makes the stylesheet define
+ * them. When four of them were missing, the failure was silent: a `var()` with
+ * no definition and no fallback is *invalid at computed-value time*, so the
+ * whole declaration is dropped. That took out six focus outlines in
+ * `_listing.scss` — `outline: 2px solid var(--theme-top-high-contrast-foreground-color)`
+ * simply never rendered, leaving keyboard focus invisible on listing cards.
+ *
+ * Nothing else catches this. There is no typecheck in CI, stylelint does not
+ * resolve custom properties across files, and a story renders happily without
+ * an outline. These tests read the SCSS as text for that reason: the point is
+ * to check what the stylesheet *declares*, which only the source can answer.
+ */
+
+const THEME_DIR = __dirname;
+
+/** The themes registered in `config/blocks.ts`. */
+const THEMES = ['default', 'brand'];
+
+function readTheme(file: string): string {
+  return fs.readFileSync(path.join(THEME_DIR, file), 'utf8');
+}
+
+/**
+ * Every `--block-theme-*` custom property declared in `_root.scss`'s **`:root`**
+ * block.
+ *
+ * Scoped to `:root` deliberately. `[data-theme='high-contrast']` redeclares
+ * several of these, so scanning the whole file would accept a token that exists
+ * *only* in high-contrast mode and is undefined in light and dark — which is
+ * exactly what `--block-theme-brand-border-width` did.
+ */
+function declaredTokens(): Set<string> {
+  const source = readTheme('_root.scss');
+  const start = source.indexOf(':root {');
+  expect(start, '_root.scss has no :root block').toBeGreaterThanOrEqual(0);
+  // the block ends at the first closing brace in column 0
+  const end = source.indexOf('\n}', start);
+  const root = source.slice(start, end);
+
+  return new Set(
+    [...root.matchAll(/^\s*(--block-theme-[a-z-]+):/gm)].map((m) => m[1]),
+  );
+}
+
+/** Every `--theme-*` property referenced by any stylesheet in `src/theme`. */
+function referencedThemeProps(): Map<string, string[]> {
+  const found = new Map<string, string[]>();
+  const walk = (dir: string) => {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        walk(full);
+      } else if (entry.name.endsWith('.scss')) {
+        const text = fs.readFileSync(full, 'utf8');
+        for (const m of text.matchAll(/var\((--theme-[a-z-]+)/g)) {
+          found.set(m[1], [...(found.get(m[1]) ?? []), entry.name]);
+        }
+      }
+    }
+  };
+  walk(THEME_DIR);
+  return found;
+}
+
+describe('block theme token contract', () => {
+  const declared = declaredTokens();
+
+  it.each(THEMES)(
+    'theme "%s" defines every property the factory maps',
+    (theme) => {
+      const mapped = createThemeDefinition(theme, theme).style;
+      const missing = Object.values(mapped)
+        .map((value) => value.match(/var\((--block-theme-[a-z-]+)\)/)?.[1])
+        .filter((token): token is string => Boolean(token))
+        .filter((token) => !declared.has(token));
+
+      expect(
+        missing,
+        `_root.scss does not declare ${missing.join(', ')} — every ` +
+          `var() reading them is dropped as invalid at computed-value time`,
+      ).toEqual([]);
+    },
+  );
+
+  it('maps exactly the 14 documented properties', () => {
+    expect(
+      Object.keys(createThemeDefinition('default', 'x').style),
+    ).toHaveLength(14);
+  });
+
+  it('maps every --theme-* property the stylesheets reference', () => {
+    const mapped = new Set(
+      Object.keys(createThemeDefinition('default', 'default').style),
+    );
+    const unmapped = [...referencedThemeProps().entries()]
+      .filter(([prop]) => !mapped.has(prop))
+      .map(([prop, files]) => `${prop} (${[...new Set(files)].join(', ')})`);
+
+    expect(
+      unmapped,
+      'these are read by a stylesheet but no theme supplies them, so the ' +
+        'declarations using them are dropped',
+    ).toEqual([]);
+  });
+
+  it('keeps the focus outlines in _listing.scss resolvable', () => {
+    // The specific regression: these six had no fallback, so an undefined
+    // token removed the outline entirely rather than degrading it.
+    const listing = readTheme(path.join('blocks', '_listing.scss'));
+    const outlines = [
+      ...listing.matchAll(/outline:[^;]*var\((--theme-[a-z-]+)\)/g),
+    ].map((m) => m[1]);
+
+    expect(outlines.length).toBeGreaterThan(0);
+    const mapped = new Set(
+      Object.keys(createThemeDefinition('default', 'default').style),
+    );
+    for (const prop of outlines) {
+      expect(mapped.has(prop), `${prop} is not mapped by any theme`).toBe(true);
+    }
+  });
+});
diff --git a/frontend/packages/volto-light-theme/src/theme/blocks/_heroBlock.scss b/frontend/packages/volto-light-theme/src/theme/blocks/_heroBlock.scss
index 5a9199e..cfca35c 100644
--- a/frontend/packages/volto-light-theme/src/theme/blocks/_heroBlock.scss
+++ b/frontend/packages/volto-light-theme/src/theme/blocks/_heroBlock.scss
@@ -217,7 +217,7 @@ $hero-card-overlap: 60px;
   .hero-file-type {
     display: inline-block;
     margin-bottom: $spacing-small;
-    color: var(--theme-low-contrast-foreground);
+    color: var(--theme-low-contrast-foreground-color);
     @include body-text-bold();
     @include add(size, 2xs);
     letter-spacing: 0.03em;
diff --git a/frontend/packages/volto-light-theme/src/theme/blocks/_quoteBlock.scss b/frontend/packages/volto-light-theme/src/theme/blocks/_quoteBlock.scss
index d643b0d..359bbec 100644
--- a/frontend/packages/volto-light-theme/src/theme/blocks/_quoteBlock.scss
+++ b/frontend/packages/volto-light-theme/src/theme/blocks/_quoteBlock.scss
@@ -1,5 +1,5 @@
 // =============================================================================
-// Quote Block (Bloco de Citação)
+// Quote Block
 // A blockquote with a solid left border and optional filled background
 // =============================================================================
 
diff --git a/frontend/packages/volto-light-theme/src/theme/components/_documentByLine.scss b/frontend/packages/volto-light-theme/src/theme/components/_documentByLine.scss
new file mode 100644
index 0000000..8253fbb
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/theme/components/_documentByLine.scss
@@ -0,0 +1,20 @@
+.documentByLine {
+  .info {
+    @include add(size, xs);
+    @include add(height, s);
+    @include add(weight, normal);
+    display: inline-block;
+    &:not(:last-child)::after {
+      margin-right: 5px;
+      margin-left: 5px;
+      content: '-';
+    }
+    &.author {
+      .name {
+        &:not(:last-child)::after {
+          content: ', ';
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/packages/volto-light-theme/src/theme/components/_header.scss b/frontend/packages/volto-light-theme/src/theme/components/_header.scss
index c657280..a576e8c 100644
--- a/frontend/packages/volto-light-theme/src/theme/components/_header.scss
+++ b/frontend/packages/volto-light-theme/src/theme/components/_header.scss
@@ -12,14 +12,14 @@ body header.header-wrapper {
   container-type: inline-size;
 
   .header {
-    // Seção principal do Header
+    // Main header section
     .header-main {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1.5rem;
 
-      // Wrapper do Logo e Navegação
+      // Logo and navigation wrapper
       .logo-nav-wrapper {
         display: flex;
         min-width: 0;
diff --git a/frontend/packages/volto-light-theme/src/theme/components/_navigation.scss b/frontend/packages/volto-light-theme/src/theme/components/_navigation.scss
index 002f78a..02252fe 100644
--- a/frontend/packages/volto-light-theme/src/theme/components/_navigation.scss
+++ b/frontend/packages/volto-light-theme/src/theme/components/_navigation.scss
@@ -124,6 +124,7 @@
       }
       .submenu-header-wrapper {
         display: block;
+        color: var(--fatmenu-foreground);
         .submenu-header {
           > h2 {
             margin-bottom: 14px;
diff --git a/frontend/packages/volto-light-theme/src/types/assets.d.ts b/frontend/packages/volto-light-theme/src/types/assets.d.ts
new file mode 100644
index 0000000..9b07fb6
--- /dev/null
+++ b/frontend/packages/volto-light-theme/src/types/assets.d.ts
@@ -0,0 +1,18 @@
+/**
+ * Bundler-provided asset imports.
+ *
+ * Webpack (Storybook) and esbuild (the Claude Design export) both resolve an
+ * image import to a URL string — a served path in one, an inlined data URI in
+ * the other. TypeScript needs telling; without this every fixture importing a
+ * photograph raises TS2307.
+ */
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
diff --git a/frontend/packages/volto-light-theme/src/types/theme.ts b/frontend/packages/volto-light-theme/src/types/theme.ts
index bc44de1..d2ca82c 100644
--- a/frontend/packages/volto-light-theme/src/types/theme.ts
+++ b/frontend/packages/volto-light-theme/src/types/theme.ts
@@ -21,13 +21,50 @@
  * when a non-colour setting arrives.
  */
 export type ThemeSettings = {
-  primary_color?: string;
-  primary_foreground_color?: string;
+  primary_color_light?: string;
+  primary_color_dark?: string;
+  primary_foreground_color_light?: string;
+  primary_foreground_color_dark?: string;
+  primary_low_foreground_color_light?: string;
+  primary_low_foreground_color_dark?: string;
+  primary_accent_color_light?: string;
+  primary_accent_color_dark?: string;
+
+  secondary_color_light?: string;
+  secondary_color_dark?: string;
+  secondary_foreground_color_light?: string;
+  secondary_foreground_color_dark?: string;
+  secondary_low_foreground_color_light?: string;
+  secondary_low_foreground_color_dark?: string;
+  secondary_accent_color_light?: string;
+  secondary_accent_color_dark?: string;
+
+  accent_color_light?: string;
+  accent_color_dark?: string;
+  accent_foreground_color_light?: string;
+  accent_foreground_color_dark?: string;
+  accent_low_foreground_color_light?: string;
+  accent_low_foreground_color_dark?: string;
+  accent_accent_color_light?: string;
+  accent_accent_color_dark?: string;
+
+  neutral_color_light?: string;
+  neutral_color_dark?: string;
+  neutral_foreground_color_light?: string;
+  neutral_foreground_color_dark?: string;
+  neutral_low_foreground_color_light?: string;
+  neutral_low_foreground_color_dark?: string;
+  neutral_accent_color_light?: string;
+  neutral_accent_color_dark?: string;
+
+  event_color_light?: string;
+  event_color_dark?: string;
+  file_color_light?: string;
+  file_color_dark?: string;
+  image_color_light?: string;
+  image_color_dark?: string;
+
   header_foreground_color?: string;
-  secondary_color?: string;
-  secondary_foreground_color?: string;
-  accent_color?: string;
-  accent_foreground_color?: string;
 };
 
 /**
diff --git a/news/22.documentation b/news/22.documentation
new file mode 100644
index 0000000..45ef9c9
--- /dev/null
+++ b/news/22.documentation
@@ -0,0 +1 @@
+Added a machine-extracted design system reference under `docs/design-system/`: an inventory of every block, listing variation, theme mapping and custom property with its resolved light and dark value; a gap analysis carrying a full WCAG contrast audit of the shipped palette; and self-contained preview pages for the colour system, the block themes and the type scale, marked up for import into Claude Design. @ericof
diff --git a/news/22.documentation.2 b/news/22.documentation.2
new file mode 100644
index 0000000..eb813b4
--- /dev/null
+++ b/news/22.documentation.2
@@ -0,0 +1 @@
+Added preview pages for the four blocks the add-on ships, generated from the built Storybook rather than hand-written: each is the real component output with its computed styles inlined, captured in both colour modes and, for the blocks that read `--theme-*`, in both block themes. @ericof
diff --git a/news/22.documentation.3 b/news/22.documentation.3
new file mode 100644
index 0000000..78b9e2e
--- /dev/null
+++ b/news/22.documentation.3
@@ -0,0 +1 @@
+Rewrote the design system manifest from verified evidence and moved it under `docs/design-system/`, leaving a short pointer at the repository root. The previous draft carried 69 unverified claims and 51 open items, and re-documented the schemas of blocks belonging to dependencies; the manifest now covers what the add-on owns, states the rules that govern how it composes with the layers beneath it, and points at the runtime inventory rather than repeating a list that goes stale. @ericof
diff --git a/news/22.documentation.4 b/news/22.documentation.4
new file mode 100644
index 0000000..c9e35fb
--- /dev/null
+++ b/news/22.documentation.4
@@ -0,0 +1 @@
+Brought the design system documentation up to date with the Storybook work: the story count and classification, the container and theme decorator conventions, the blocks gallery result, and where story images belong. @ericof
diff --git a/news/22.documentation.5 b/news/22.documentation.5
new file mode 100644
index 0000000..b02ff3c
--- /dev/null
+++ b/news/22.documentation.5
@@ -0,0 +1 @@
+Reduced the gaps document to what is still open. It had grown to hold a record of every defect fixed along the way, which obscured the point of the document; the durable findings about registered custom properties and stylesheet scoping moved into the manifest, where they belong as rules rather than as history, and the sections were renumbered with the inbound references updated to match. @ericof
diff --git a/news/22.documentation.6 b/news/22.documentation.6
new file mode 100644
index 0000000..ba08d32
--- /dev/null
+++ b/news/22.documentation.6
@@ -0,0 +1 @@
+Reconciled the design-system documentation with the palette and theme-schema changes: the contrast section now records both WCAG failures as fixed and what fixed them, the per-project overlay section describes the 38 `_light`/`_dark` colour fields the control panel actually serves, and the content-type colours, base ramp and type scale carry their current values. `GAPS.md` was renumbered when its resolved sections were removed, so every cross-reference in `DESIGN_SYSTEM.md`, `INVENTORY.md` and the preview pages was re-pointed; the identical `narrow` and `default` container widths were restored as an open gap, having been removed while still true. @ericof