diff --git a/l10n/context.js b/l10n/context.js
new file mode 100644
index 000000000..105da7e85
--- /dev/null
+++ b/l10n/context.js
@@ -0,0 +1,12 @@
+import getFluentContext from "./fluent.js";
+
+/**
+ * @param {string} locale
+ * @returns {Promise<import("@fred").L10nContext>}
+ */
+export async function addFluent(locale) {
+  return {
+    locale: locale,
+    l10n: getFluentContext(locale),
+  };
+}
diff --git a/l10n/de.ftl b/l10n/de.ftl
new file mode 100644
index 000000000..a0c809a52
--- /dev/null
+++ b/l10n/de.ftl
@@ -0,0 +1,49 @@
+content-feedback-question = War diese Übersetzung hilfreich?
+content-feedback-reason = Warum war diese Übersetzung nicht hilfreich?
+content-feedback-thanks = Vielen Dank für die Rückmeldung!
+
+reference-toc-header = In diesem Artikel
+
+footer-tagline = Dein Bauplan für ein besseres Internet.
+footer-mofo = Besuche die gemeinnützige Muttergesellschaft der <a data-l10n-name="moco">Mozilla Corporation</a>, die <a data-l10n-name="mofo">Mozilla Foundation</a>.
+footer-copyright = Teile dieses Inhalts sind ©1998–2024 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfügbar unter <a data-l10n-name="cc">einer Creative-Commons-Lizenz</a>.
+
+search-modal-site-search = Erweiterte Suche nach <em>{ $query }</em>
+
+site-search-search-stats = { $results } Dokumente gefunden.
+site-search-suggestion-matches =  { $relation ->
+    [gt] mehr als { $matches ->
+        [one]   { $matches } Übereinstimmung
+       *[other] { $matches } Übereinstimmungen
+    }
+   *[eq] { $matches ->
+        [one]   { $matches } Übereinstimmung
+       *[other] { $matches } Übereinstimmungen
+    }
+}
+site-search-suggestions-text = Meinten Sie:
+
+
+theme-default = Systemstandard
+
+blog-time-to-read = { $minutes ->
+    [one]   { $minutes } Minute Lesezeit
+   *[other] { $minutes } Minuten Lesezeit
+}
+blog-post-not-found = Blogartikel nicht gefunden.
+
+blog-previous = Voriger Artikel
+blog-next = Nächster Artikel
+
+No = Nein
+Submit = Abschicken
+Yes = Ja
+
+Report = Report
+
+obs-title = HTTP Observatory
+obs-landing-intro = Seit 2016 verbessert HTTP Observatory die Sicherheit durch Analyse der Einhaltung bewährter Sicherheitspraktiken. Es hat durch 47 Millionen Scans Einblicke in über 6,9 Millionen Websites geliefert.
+obs-assessment = Das von Mozilla entwickelte HTTP Observatory führt eine umfassende Bewertung der HTTP-Header und weiterer zentraler Sicherheitskonfigurationen einer Website durch.
+obs-scanning = Der automatisierte Scan-Prozess liefert Entwicklern und Website-Administratoren detailliertes, handlungsorientiertes Feedback und konzentriert sich darauf, potenzielle Sicherheitslücken zu erkennen und zu beheben.
+obs-security = Das Tool unterstützt Entwickler und Website-Administratoren maßgeblich dabei, ihre Websites in einem sich stetig weiterentwickelnden digitalen Umfeld gegen häufige Sicherheitsbedrohungen abzusichern.
+obs-mdn = Das HTTP Observatory bietet wirksame Sicherheitseinblicke auf Grundlage von Mozillas Expertise und Engagement für ein sichereres Internet sowie basierend auf etablierten Trends und Richtlinien.
diff --git a/l10n/en-US.ftl b/l10n/en-US.ftl
new file mode 100644
index 000000000..9929a8779
--- /dev/null
+++ b/l10n/en-US.ftl
@@ -0,0 +1,148 @@
+# TODO Use comments, see: https://firefox-source-docs.mozilla.org/l10n/fluent/review.html#comments
+# TODO Consider using terms, see: https://firefox-source-docs.mozilla.org/l10n/fluent/review.html#terms and https://projectfluent.org/fluent/guide/references.html#message-references
+
+article-footer-last-modified = This page was last modified on <time data-l10n-name="date">{ $date }</timestamp> by <a data-l10n-name="contributors">MDN contributors</a>.
+article-footer-source-title = Folder: { $folder } (Opens in a new tab)
+
+baseline-asterisk = { $asterisk } Some parts of this feature may have varying levels of support.
+baseline-high-extra = This feature is well established and works across many devices and browser versions. It’s been available across browsers since { $date }.
+baseline-low-extra = Since { $date }, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
+baseline-not-extra = This feature is not Baseline because it does not work in some of the most widely-used browsers.
+baseline-supported-in = Supported in { $browsers }
+baseline-unsupported-in = Not widely supported in { $browsers }
+baseline-supported-and-unsupported-in = Supported in { $supported }, but not widely supported in { $unsupported }
+
+homepage-hero-title = Resources for Developers,<br> by Developers
+homepage-hero-description = Documenting <a data-l10n-name="css">CSS</a>, <a data-l10n-name="html">HTML</a>, and <a data-l10n-name="js">JavaScript</a>, since 2005.
+
+not-found-title = Page not found
+not-found-description = Sorry, the page <code data-l10n-name="url">{ $url }</code> could not be found.
+not-found-fallback-english = <strong data-l10n-name="strong">Good news:</strong> The page you requested exists in <em data-l10n-name="em">English</em>.
+not-found-fallback-search = The page you requested doesn't exist, but you could try a site search for:
+not-found-back = Go back to the home page
+
+reference-toc-header = In this article
+
+footer-mofo = Visit <a data-l10n-name="moco">Mozilla Corporation’s</a> not-for-profit parent, the <a data-l10n-name="mofo">Mozilla Foundation</a>.
+footer-copyright = Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a data-l10n-name="cc">a Creative Commons license</a>.
+
+search-modal-site-search = Site search for <em>{ $query }</em>
+
+site-search-search-stats = Found { $results } documents.
+site-search-suggestion-matches =  { $relation ->
+    [gt] more than { $matches ->
+        [one]   { $matches } match
+       *[other] { $matches } matches
+    }
+   *[eq] { $matches ->
+        [one]   { $matches } match
+       *[other] { $matches } matches
+    }
+}
+site-search-suggestions-text = Did you mean:
+
+blog-time-to-read = { $minutes ->
+    [one]   { $minutes } minute read
+   *[other] { $minutes } minutes read
+}
+blog-post-not-found = Blog post not found.
+
+blog-previous = Previous post
+blog-next = Next post
+
+Report = Report
+
+obs-title = HTTP Observatory
+obs-landing-intro = Launched in 2016, the HTTP Observatory enhances web security by analyzing compliance with best security practices. It has provided insights to over 6.9 million websites through 47 million scans.
+obs-assessment = Developed by Mozilla, the HTTP Observatory performs an in-depth assessment of a site’s HTTP headers and other key security configurations.
+obs-scanning = Its automated scanning process provides developers and website administrators with detailed, actionable feedback, focusing on identifying and addressing potential security vulnerabilities.
+obs-security = The tool is instrumental in helping developers and website administrators strengthen their sites against common security threats in a constantly advancing digital environment.
+obs-mdn = The HTTP Observatory provides effective security insights, guided by Mozilla's expertise and commitment to a safer and more secure internet and based on well-established trends and guidelines.
+
+
+compat-loading = Loading…
+
+compat-browser-version-date = { $browser } { $version } – Released { $date }
+compat-browser-version-released = Released { $date }
+
+compat-link-report-issue = Report problems with this compatibility data
+compat-link-report-issue-title = Report an issue with this compatibility data
+compat-link-report-missing-title = Report missing compatibility data
+compat-link-report-missing = Report this issue
+compat-link-source = View data on GitHub
+compat-link-source-title = File: { $filename }
+
+compat-deprecated = Deprecated
+compat-experimental = Experimental
+compat-nonstandard = Non-standard
+compat-no = No
+
+compat-support-full = Full support
+compat-support-partial = Partial support
+compat-support-no = No support
+compat-support-unknown = Support unknown
+compat-support-preview = Preview browser support
+compat-support-prefix = Implemented with the vendor prefix: { $prefix }
+compat-support-altname = Alternate name: { $altname }
+compat-support-removed = Removed in { $version } and later
+compat-support-see-impl-url = See <a data-l10n-name="impl_url">{ $label }</a>
+compat-support-flags =
+  { NUMBER($has_added) ->
+    [one] From version { $version_added }
+    *[other] {""}
+  }{ $has_last ->
+    [one] { NUMBER($has_added) ->
+          *[zero] Until { $versionLast } users
+          [one] {" "}until { $versionLast } users
+      }
+    *[zero] { NUMBER($has_added) ->
+          *[zero] Users
+          [one] {" "}users
+      }
+  }
+  {" "}must explicitly set the <code data-l10n-name="name">{ $flag_name }</code>{" "}
+  { $flag_type ->
+    *[preference] preference
+    [runtime_flag] runtime flag
+  }{ NUMBER($has_value) ->
+    [one] {" "}to <code data-l10n-name="value">{ $flag_value }</code>
+    *[other] {""}
+  }{"."}
+  { NUMBER($flag_type) ->
+    [preference] To change preferences in { $browser_name }, visit { $browser_pref_url }.
+    *[other] {""}
+  }
+
+compat-legend = Legend
+compat-legend-tip = Tip: you can click/tap on a cell for more information.
+compat-legend-yes = { compat-support-full }
+compat-legend-partial = { compat-support-partial }
+compat-legend-preview = In development. Supported in a pre-release version.
+compat-legend-no = { compat-support-no }
+compat-legend-unknown = Compatibility unknown
+compat-legend-experimental = { compat-experimental }. Expect behavior to change in the future.
+compat-legend-nonstandard = { compat-nonstandard }. Check cross-browser support before using.
+compat-legend-deprecated = { compat-deprecated }. Not for use in new websites.
+compat-legend-footnote = See implementation notes.
+compat-legend-disabled = User must explicitly enable this feature.
+compat-legend-altname = Uses a non-standard name.
+compat-legend-prefix = Requires a vendor prefix or different name for use.
+compat-legend-more = Has more compatibility info.
+
+sidebar-filter-matches = { $matches ->
+  [0] No matches
+  [1] { $matches } match
+   *[other] { $matches } matches
+}
+
+placement-note = Ad
+placement-no = Don't want to see ads?
+
+pagination-next = Next page
+pagination-prev = Previous page
+pagination-current = Current page
+pagination-goto = Go to page { $page }
+
+logout = Sign out
+login = Log in
+settings = My settings
diff --git a/l10n/es.ftl b/l10n/es.ftl
new file mode 100644
index 000000000..4496ba9ee
--- /dev/null
+++ b/l10n/es.ftl
@@ -0,0 +1,2 @@
+blog-toc-title = En este artículo
+
diff --git a/l10n/fluent.js b/l10n/fluent.js
new file mode 100644
index 000000000..fe9469a63
--- /dev/null
+++ b/l10n/fluent.js
@@ -0,0 +1,288 @@
+import { FluentBundle, FluentResource } from "@fluent/bundle";
+import insane from "insane";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+import de_ftl from "../l10n/de.ftl";
+import enUS_ftl from "../l10n/en-US.ftl";
+import es_ftl from "../l10n/es.ftl";
+import fr_ftl from "../l10n/fr.ftl";
+import ja_ftl from "../l10n/ja.ftl";
+import ko_ftl from "../l10n/ko.ftl";
+import ptBR_ftl from "../l10n/pt-BR.ftl";
+import ru_ftl from "../l10n/ru.ftl";
+import zhCN_ftl from "../l10n/zh-CN.ftl";
+import zhTW_ftl from "../l10n/zh-TW.ftl";
+
+/**
+ * @import { AllowedTags } from "insane";
+ */
+
+/** @type {Record<string, string>} */
+const ftlMap = {
+  "en-US": enUS_ftl,
+  de: de_ftl,
+  es: es_ftl,
+  fr: fr_ftl,
+  ja: ja_ftl,
+  ko: ko_ftl,
+  "pt-BR": ptBR_ftl,
+  ru: ru_ftl,
+  "zh-CN": zhCN_ftl,
+  "zh-TW": zhTW_ftl,
+};
+
+const ALLOWED_TAGS = ["i", "strong", "br", "em"];
+const ALLOWED_ATTRIBUTES = ["title", "aria-label"];
+
+export class Fluent {
+  /**
+   * @param {string} locale
+   * @param {string[]} resources
+   */
+  constructor(locale = "en-US", resources = []) {
+    this.locale = locale;
+
+    this.usBundle = Fluent.constructBundle(new FluentBundle(locale), [
+      enUS_ftl,
+    ]);
+
+    if (resources.length > 0) {
+      this.bundle = Fluent.constructBundle(new FluentBundle(locale), [
+        enUS_ftl,
+        ...resources,
+      ]);
+    }
+  }
+
+  /**
+   * @param {FluentBundle} bundle
+   * @param {string[]} resources
+   */
+  static constructBundle(bundle, resources = []) {
+    for (const r of resources) {
+      const errors = bundle.addResource(new FluentResource(r), {
+        allowOverrides: true,
+      });
+      if (errors.length > 0) {
+        console.error(errors);
+      }
+    }
+    return bundle;
+  }
+
+  /**
+   * @param {string} id
+   * @param {string} [attr]
+   * @param {Record<string, any>} [args]
+   * @param {Record<string, import("../types/fluent.js").Element>} [elements]
+   * @returns {string | ReturnType<typeof unsafeHTML> | undefined}
+   */
+  get(id, attr, args, elements) {
+    const message = this.getMessage(id, attr, args);
+    if (!message) {
+      return;
+    }
+    return Fluent.sanitize(message, elements);
+  }
+
+  /**
+   * @param {string} message
+   * @param {Record<string, import("../types/fluent.js").Element>} [elements]
+   * @returns {string | ReturnType<typeof unsafeHTML>}
+   */
+  static sanitize(message, elements = {}) {
+    /** @type { Record<string, string[]> } */
+    const allowedAttributes = {};
+    for (const t of Object.values(elements)) {
+      allowedAttributes[t.tag] = [
+        ...Object.keys(t).filter((x) => x !== "tag"),
+        ...ALLOWED_ATTRIBUTES,
+      ];
+    }
+
+    const allowedTags = [
+      ...Object.values(elements).map((t) => t.tag),
+      ...ALLOWED_TAGS,
+    ];
+
+    let safe = true;
+    const sanitized = insane(
+      message,
+      {
+        allowedAttributes,
+        allowedTags: /** @type {AllowedTags[]} */ (allowedTags),
+        allowedSchemes: ["http", "https", "mailto"],
+        filter(token) {
+          // TODO: use element names directly
+          const name = token.attrs["data-l10n-name"];
+          if (name) {
+            for (const [k, v] of Object.entries(elements[name] || {})) {
+              token.attrs[k] = v;
+            }
+          }
+          if (
+            ALLOWED_TAGS.includes(token.tag) ||
+            (name &&
+              Object.keys(elements).includes(name) &&
+              elements[name]?.tag === token.tag)
+          ) {
+            safe = false;
+            return true;
+          }
+          return false;
+        },
+      },
+      true,
+    );
+    return safe ? sanitized : unsafeHTML(sanitized);
+  }
+
+  /**
+   * @param {string} id
+   * @param {string} [attr]
+   * @param {Record<string, any>} [args]
+   * @param {FluentBundle | undefined} [bundle]
+   * @param {boolean} [us]
+   * @returns {string | undefined}
+   */
+  getMessage(id, attr, args = {}, bundle = this.bundle, us = false) {
+    const parentMessage = bundle ? bundle.getMessage(id) : undefined;
+    let message;
+
+    if (this.locale === "qa") {
+      return `[${id}${attr ? `.${attr}` : ""}]`;
+    }
+
+    if (!parentMessage) {
+      if (us) {
+        // console.error(`string ${id} doesn't exist`);
+        // return `[${id}${attr ? `.${attr}` : ""}]`;
+        return;
+      }
+      return this.getMessage(id, attr, args, this.usBundle, true);
+    }
+
+    if (attr) {
+      message = parentMessage.attributes[attr];
+      if (!message) {
+        if (us) {
+          // console.error(`string ${id} with ${attr} attribute doesn't exist`);
+          // return `[${id}.${attr}]`;
+          return;
+        }
+        return this.getMessage(id, attr, args, this.usBundle, true);
+      }
+    } else if (parentMessage.value) {
+      message = parentMessage.value;
+    }
+
+    if (!message || !bundle) {
+      return "";
+    }
+
+    /** @type {Error[]} */
+    const errors = [];
+    const formatted = bundle?.formatPattern(message, args, errors);
+    if (errors.length > 0) {
+      console.error(errors);
+    }
+    return formatted;
+  }
+}
+
+/** @type {Map<string, Fluent>} */
+const fluent = new Map();
+
+/**
+ * @param {string} [locale]
+ */
+function getLocale(locale) {
+  if (!locale) {
+    return;
+  }
+  if (!fluent.has(locale)) {
+    const ftl = ftlMap[locale];
+    const localeF = new Fluent(locale, ftl ? [ftl] : undefined);
+    fluent.set(locale, localeF);
+  }
+  return fluent.get(locale);
+}
+
+/**
+ * @param {string} [locale]
+ */
+export default function getFluentContext(locale) {
+  /**
+   * @overload
+   * @param {string} id
+   * @param {string} [_comment]
+   * @returns {import("../types/fluent.js").L10nTag}
+   */
+
+  /**
+   * @overload
+   * @param {TemplateStringsArray} strings
+   * @returns {string}
+   */
+
+  /**
+   * @param {string | TemplateStringsArray} idOrStrings
+   * @param {string} [_comment]
+   * @returns {import("../types/fluent.js").L10nTag | string}
+   */
+  function l10n(idOrStrings, _comment) {
+    if (typeof idOrStrings === "string") {
+      // called as a function, returning a template tag:
+      // l10n("foobar")`Foobar`
+      const id = idOrStrings;
+      const localizedString = getLocale(locale)?.get(id);
+      const fallbackString = `[${id}]`;
+      /** @type {import("../types/fluent.js").L10nTag} */
+      const tag = (strings) => {
+        // we don't currently support any expressions in the template string
+        // we might in the future, if we use l10n.raw a lot
+        const templateString = strings[0];
+        return localizedString || templateString || fallbackString;
+      };
+      tag.toString = () => {
+        // called as a function, used as a function:
+        // ${l10n("foobar")}
+        return (
+          (typeof localizedString === "string" && localizedString) ||
+          fallbackString
+        );
+      };
+      return tag;
+    }
+    // called directly as a template tag:
+    // l10n`Foobar`
+    // TODO: create consistent logic for id generation at runtime and scrapetime
+    const strings = idOrStrings;
+    const templateString = strings[0];
+    return templateString || "";
+  }
+
+  /**
+   * @param {{ id: string, attr?: string, args?: Record<string, any>, elements?: Record<string, import("../types/fluent.js").Element> }} param0
+   */
+  l10n.raw = function ({ id, attr, args, elements }) {
+    const fluent = getLocale(locale);
+    if (fluent) {
+      return fluent.get(id, attr, args, elements);
+    }
+    return `[${id}]`;
+  };
+
+  return l10n;
+}
+
+// const l10n = getFluentContext("en-US");
+
+// console.log(l10n`Hello`);
+// console.log(l10n("hello")`Hello`);
+// console.log(l10n("hello", "a greeting to the user")`Hello`);
+// console.log(l10n.raw({ id: "hello" }));
+// console.log(`${l10n("hello")}`);
+
+// should show error:
+// l10n("hello")`Hello ${"world"}`;
diff --git a/l10n/fr.ftl b/l10n/fr.ftl
new file mode 100644
index 000000000..8d318cfd0
--- /dev/null
+++ b/l10n/fr.ftl
@@ -0,0 +1 @@
+blog-toc-title = Dans cet article
diff --git a/l10n/ja.ftl b/l10n/ja.ftl
new file mode 100644
index 000000000..18dca3b5d
--- /dev/null
+++ b/l10n/ja.ftl
@@ -0,0 +1,2 @@
+blog-toc-title = この記事では
+
diff --git a/l10n/ko.ftl b/l10n/ko.ftl
new file mode 100644
index 000000000..dc1345d54
--- /dev/null
+++ b/l10n/ko.ftl
@@ -0,0 +1 @@
+blog-toc-title = 목차
diff --git a/l10n/mixin.js b/l10n/mixin.js
new file mode 100644
index 000000000..9e6b03b74
--- /dev/null
+++ b/l10n/mixin.js
@@ -0,0 +1,24 @@
+import { getSymmetricContext } from "../symmetric-context/both.js";
+
+import getFluentContext from "./fluent.js";
+
+/**
+ * @import { LitElement } from "lit";
+ */
+
+/**
+ * @template {new (...args: any[]) => LitElement} TBase
+ * @param {TBase} Base
+ */
+export const L10nMixin = (Base) =>
+  class LocalizedElement extends Base {
+    /**
+     * @param  {...any} args
+     */
+    constructor(...args) {
+      super(...args);
+      const context = getSymmetricContext();
+      this.locale = context.locale;
+      this.l10n = getFluentContext(this.locale);
+    }
+  };
diff --git a/l10n/pt-BR.ftl b/l10n/pt-BR.ftl
new file mode 100644
index 000000000..b70e17860
--- /dev/null
+++ b/l10n/pt-BR.ftl
@@ -0,0 +1,2 @@
+blog-toc-title = Neste artigo
+
diff --git a/l10n/ru.ftl b/l10n/ru.ftl
new file mode 100644
index 000000000..19fac2cba
--- /dev/null
+++ b/l10n/ru.ftl
@@ -0,0 +1 @@
+blog-toc-title = В этой статье
diff --git a/l10n/zh-CN.ftl b/l10n/zh-CN.ftl
new file mode 100644
index 000000000..d928eded8
--- /dev/null
+++ b/l10n/zh-CN.ftl
@@ -0,0 +1 @@
+blog-toc-title = 在本文中
diff --git a/l10n/zh-TW.ftl b/l10n/zh-TW.ftl
new file mode 100644
index 000000000..d928eded8
--- /dev/null
+++ b/l10n/zh-TW.ftl
@@ -0,0 +1 @@
+blog-toc-title = 在本文中