Add MVP home & about pages behind switch (#15092)

- Add home page for English only behind switch m24-home
- Add about page for English only behind switchm24-about
- Add beta font files 
- Move grid variables to a new file

bedrock/mozorg/templates/mozorg/about/includes/m24/amplify.html

@@ -0,0 +1,32 @@
+
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<section class="m24-c-content">
+  <div class="m24-c-copy">
+    <h2 class="m24-c-copy-title">Lorem ipsum dolor sit amet</h2>
+    <p>Suspendisse commodo sed erat in pellentesque. In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Nam vel justo urna.</p>
+  </div>
+
+  <div class="m24-c-grid m24-l-grid-pair">
+    <div class="m24-c-grid-cell">
+      <div class="m24-grid-cell-media">
+        <img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
+      </div>
+      <p class="m24-grid-cell-title"> In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Suspendisse commodo sed erat in pellentesque.</p>
+      <p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text="">Nam vel justo urna</a></p>
+    </div>
+
+    <div class="m24-c-grid-cell">
+      <div class="m24-grid-cell-media">
+        <img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
+      </div>
+      <p class="m24-grid-cell-title"> In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Suspendisse commodo sed erat in pellentesque.</p>
+      <p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text="">Nam vel justo urna</a></p>
+    </div>
+  </div>
+
+</section>

bedrock/mozorg/templates/mozorg/about/includes/m24/careers.html

@@ -0,0 +1,27 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+
+{% macro career_pic(img_src_tall, img_src_square) -%}
+<picture>
+  <source srcset="{{ static(img_src_square) }}" media="(max-width: 768px)" width="216" height="216"> <!-- 2:1 -->
+  <img src="{{ static(img_src_tall) }}" alt="" width="216" height="324"> <!-- 2.7:1 -->
+</picture>
+{%- endmacro %}
+
+<div class="m24-c-consider">
+  <h2 class="m24-c-consider-title">Mozilla jobs are where skill meets passion</h2>
+  <div class="m24-c-consider-media">
+    {{ career_pic('img/m24/todo-2-3.svg', 'img/m24/todo-1-1.svg') }}
+    {{ career_pic('img/m24/todo-2-3.svg', 'img/m24/todo-1-1.svg') }}
+    {{ career_pic('img/m24/todo-2-3.svg', 'img/m24/todo-1-1.svg') }}
+    {{ career_pic('img/m24/todo-2-3.svg', 'img/m24/todo-1-1.svg') }}
+  </div>
+  <p class="m24-consider-cta-info">Interested in advocacy? Love coding? Join our best-in-class talent and let’s transform the web, for everyone.</p>
+  <div class="m24-c-consider-cta">
+    <a href="{{ url('careers.home') }}" class="m24-c-cta" data-cta-text="Check out jobs">Check out jobs</a>
+  </div>
+</div>

bedrock/mozorg/templates/mozorg/about/includes/m24/hero.html

@@ -0,0 +1,20 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<section class="m24-c-hero">
+  <div class="m24-c-copy">
+    <h1 class="m24-c-copy-title m24-t-2xl">Activists for change on and off the screen</h1>
+    <p>We don't answer to shareholders because we don't have any. We're guided by ten principles. And a love for the interweb.</p>
+    <p class="m24-c-copy-cta"><a href="{{ url('mozorg.about.manifesto') }}" class="m24-c-cta" data-cta-text="Mission">Read our mission</a></p>
+  </div>
+
+  <div class="m24-c-hero-media">
+    <picture>
+      <source srcset="{{ static('img/m24/todo-2-1.svg') }}" media="(max-width: 768px)" width="768" height="384"> <!-- 2:1 -->
+      <img src="{{ static('img/m24/todo-27-1.svg') }}" alt="" width="1440" height="533"> <!-- 2.7:1 -->
+    </picture>
+  </div>
+</section>

bedrock/mozorg/templates/mozorg/about/includes/m24/idea.html

@@ -0,0 +1,17 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<div class="m24-c-transition m24-t-purple"><hr></div>
+<div class="m24-t-purple">
+  <section class="m24-c-showcase">
+    <h2 class="m24-c-showcase-title">IDEA ipsum dolor sit amet</h2>
+    <p class="m24-c-showcase-subtitle">Suspendisse commodo sed erat in pellentesque. In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Nam vel justo urna.</p>
+    <div class="m24-c-showcase-media">
+      <img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" height="500" width="500">
+    </div>
+    <p class="m24-c-showcase-cta"><a href="{{ url('mozorg.impact-report.index') }}" class="m24-c-cta" data-cta-text="IDEA">Read the report</a></p>
+  </section>
+</div>

bedrock/mozorg/templates/mozorg/about/includes/m24/leadership.html

@@ -0,0 +1,18 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<div class="m24-t-green">
+  <section class="m24-c-showcase">
+    <h2 class="m24-c-showcase-title">Leadership ipsum dolor sit amet</h2>
+    <p class="m24-c-showcase-subtitle">Suspendisse commodo sed erat in pellentesque. In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Nam vel justo urna.</p>
+    <div class="m24-c-showcase-media">
+      <img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" height="500" width="500">
+    </div>
+    <p class="m24-c-showcase-cta"><a href="{{ url('mozorg.about.leadership.index') }}" class="m24-c-cta" data-cta-text="Leadership">Leadership</a></p>
+  </section>
+</div>
+
+<div class="m24-c-transition m24-l-reverse"><hr></div>

bedrock/mozorg/templates/mozorg/about/index-m24.html

@@ -0,0 +1,32 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+{% extends "base-protocol-mozilla.html" %}
+
+{% block page_title %}Learn About Mozilla{% endblock %}
+{% block page_title_suffix %}{% endblock %}
+
+{% block page_desc %}
+  Mozilla makes browsers, apps, code and tools that put people before profit. Our mission: Keep the internet open and accessible to all.
+{% endblock %}
+
+{% block body_id %}about{% endblock %}
+
+{% block page_css %}
+  {{ css_bundle('m24') }}
+{% endblock %}
+
+{% block content %}
+
+{% include 'mozorg/about/includes/m24/hero.html'%}
+{% include 'mozorg/about/includes/m24/amplify.html'%}
+{% include 'mozorg/about/includes/m24/idea.html'%}
+{% include 'mozorg/about/includes/m24/careers.html'%}
+{% include 'mozorg/about/includes/m24/leadership.html'%}
+
+<div class="m24-c-transition m24-t-black"><hr></div>
+
+{% endblock %}

bedrock/mozorg/templates/mozorg/home/home-m24.html

@@ -0,0 +1,49 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+{% extends "mozorg/home/base.html" %}
+
+{# Bug 1438302, Issue 13019: Avoid duplicate content for English pages. #}
+{%- block page_title_full -%}
+  {%- if LANG == 'en-US' -%}
+    Internet for people, not profit — Mozilla (US)
+  {%- elif LANG == 'en-GB' -%}
+    Internet for people, not profit — Mozilla (UK)
+  {%- else -%}
+    Internet for people, not profit
+  {%- endif -%}
+{%- endblock -%}
+{% block page_title_suffix %}{% endblock %}
+
+{% block page_desc %}Did you know? Mozilla — the maker of Firefox — fights to keep the internet a global public resource, open and accessible to all.{% endblock %}
+
+{% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}
+
+{% block page_css %}
+  {{ css_bundle('m24') }}
+{% endblock %}
+
+{% block site_header %}
+    {% include 'includes/protocol/navigation/navigation.html' %}
+{% endblock %}
+
+{% set utm_params = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=homepage' %}
+
+{% block content %}
+
+<main>
+
+  {% include 'mozorg/home/includes/m24/hero.html'%}
+  {% include 'mozorg/home/includes/m24/products.html'%}
+  {% include 'mozorg/home/includes/m24/donate.html'%}
+  {% include 'mozorg/home/includes/m24/ai-grid.html'%}
+  {% include 'mozorg/home/includes/m24/showcase.html'%}
+  {% include 'mozorg/home/includes/m24/join.html'%}
+
+</main>
+
+<div class="m24-c-transition m24-t-black"><hr></div>
+{% endblock %}

bedrock/mozorg/templates/mozorg/home/includes/m24/ai-grid.html

@@ -0,0 +1,32 @@
+
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<section class="m24-c-content">
+  <div class="m24-c-copy">
+    <h2 class="m24-c-copy-title">Lorem ipsum dolor sit amet</h2>
+    <p>Suspendisse commodo sed erat in pellentesque. In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Nam vel justo urna.</p>
+  </div>
+
+  <div class="m24-c-grid m24-l-grid-pair">
+    <div class="m24-c-grid-cell">
+      <div class="m24-grid-cell-media">
+
+        <img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
+      </div>
+      <p class="m24-grid-cell-title"> In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Suspendisse commodo sed erat in pellentesque.</p>
+      <p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text=""> Nam vel justo urna</a></p>
+    </div>
+
+    <div class="m24-c-grid-cell">
+      <div class="m24-grid-cell-media">
+        <img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
+      </div>
+      <p class="m24-grid-cell-title"> In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Suspendisse commodo sed erat in pellentesque.</p>
+      <p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text="">Nam vel justo urna</a></p>
+    </div>
+  </div>
+</section>

bedrock/mozorg/templates/mozorg/home/includes/m24/donate.html

@@ -0,0 +1,21 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<div class="m24-t-dark" id="donate">
+  <div class="m24-c-donate">
+    <h2 class="m24-c-donate-title">Donate to Mozilla’s non-profit</h2>
+    <div class="m24-c-donate-media"><img src="{{ static('img/m24/todo-27-1.svg') }}" alt="" height="253" width="680"></div>
+    <div class="m24-c-donate-info">
+      <p class="m24-c-donate-info-title">Where do your dollars go?</p>
+      <ul class="mzp-u-list-styled">
+        <li>Funding new AI privacy technologies</li>
+        <li>Building innovation labs</li>
+        <li>Sponsoring incoming 2025 Fellows</li>
+      </ul>
+    </div>
+    <p class="m24-c-donate-cta"><a href="https://foundation.mozilla.org/?form=Mozilla-Website-Homepage" class="m24-c-cta" data-cta-text="Donate">Donate</a></p>
+  </div>
+</div>

bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html

@@ -0,0 +1,21 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<section class="m24-c-hero">
+  <div class="m24-c-copy">
+    <h1 class="m24-c-copy-title m24-t-2xl">Reclaim the internet</h1>
+    <p>You might know Mozilla for creating Firefox. We're also a non-profit, campaigning, advocating, funding, and other ing’s for a
+    healthy internet. Because the web can be a wild place. Together, we can take it back.</p>
+    <p class="m24-c-copy-cta"><a href="{{ url('mozorg.about.index') }}" class="m24-c-cta" data-cta-text="Learn about us">Learn about us</a></p>
+  </div>
+
+  <div class="m24-c-hero-media">
+    <picture>
+      <source srcset="{{ static('img/m24/todo-2-1.svg') }}" media="(max-width: 768px)" width="768" height="384"> <!-- 2:1 -->
+      <img src="{{ static('img/m24/todo-27-1.svg') }}" alt="" width="1440" height="533"> <!-- 2.7:1 -->
+    </picture>
+  </div>
+</section>

bedrock/mozorg/templates/mozorg/home/includes/m24/join.html

@@ -0,0 +1,32 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<section class="m24-c-content">
+  <div class="m24-c-copy">
+    <h2 class="m24-c-copy-title">Join us in shaping the web’s future</h2>
+    <p>Here are a few ways we’d love to collaborate with you to make the internet a place for everyone, everywhere.</p>
+  </div>
+
+  <div class="m24-c-grid m24-l-grid-pair">
+    <div class="m24-c-grid-cell">
+      <div class="m24-grid-cell-media">
+        <img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
+      </div>
+      <p class="m24-grid-cell-title">At the Data Futures Lab, partner with researchers and policymakers to give people control of their data again.</p>
+      <p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text="">Apply now</a></p>
+    </div>
+
+    <div class="m24-c-grid-cell">
+      <div class="m24-grid-cell-media">
+        <img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
+      </div>
+      <p class="m24-grid-cell-title">Get the Firefox browser built just for developers and play a role in how people surf tomorrow.</p>
+      <p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text="">Get the developer version</a></p>
+    </div>
+  </div>
+
+  <p class="m24-c-section-cta"><a href="" class="m24-c-cta" data-cta-text="">Contribute</a></p>
+</section>

bedrock/mozorg/templates/mozorg/home/includes/m24/products.html

@@ -0,0 +1,51 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<section class="m24-c-content">
+  <div class="m24-c-copy">
+    <h2 class="m24-c-copy-title">Surf the web, on your terms</h2>
+    <p>Mozilla builds tools for browsing, shopping, keeping personal data personal, and more.</p>
+  </div>
+  <ul class="m24-c-spring">
+    <li class="m24-c-spring-item">
+      <a class="m24-c-spring-link" href="{{ url('firefox') }}" data-cta-text="Firefox" data-cta-position="product-list">
+        <strong class="m24-c-spring-title">Firefox</strong>
+        <span class="m24-c-spring-info">Browse with speed, privacy, and control.</span>
+      </a>
+    </li>
+    <li class="m24-c-spring-item">
+      <a class="m24-c-spring-link" href="https://www.fakespot.com/{{ utm_params }}" data-cta-text="Fakespot" data-cta-position="product-list">
+        <strong class="m24-c-spring-title">Fakespot</strong>
+        <span class="m24-c-spring-info">Spot fake reviews, products, and maybe one day fake people. </span>
+      </a>
+    </li>
+    <li class="m24-c-spring-item">
+      <a class="m24-c-spring-link" href="https://getpocket.com/signup{{ utm_params }}" data-cta-text="Pocket" data-cta-position="product-list">
+        <strong class="m24-c-spring-title">Pocket</strong>
+        <span class="m24-c-spring-info">Save content and read it later on any device, online or off.</span>
+      </a>
+    </li>
+    <li class="m24-c-spring-item">
+      <a class="m24-c-spring-link" href="{{ url('products.vpn.landing') }}" data-cta-text="VPN" data-cta-position="product-list">
+        <strong class="m24-c-spring-title">VPN</strong>
+        <span class="m24-c-spring-info">Stay safe on public Wi-Fi, block advertisers, and more.</span>
+      </a>
+    </li>
+    <li class="m24-c-spring-item">
+      <a class="m24-c-spring-link" href="https://monitor.mozilla.org/{{ utm_params }}" data-cta-text="Monitor" data-cta-position="product-list">
+        <strong class="m24-c-spring-title">Monitor</strong>
+        <span class="m24-c-spring-info">Check if your data has been breached then make it private.</span>
+      </a>
+    </li>
+    <li class="m24-c-spring-item">
+      <a class="m24-c-spring-link" href="https://www.thunderbird.net/{{ utm_params }}" data-cta-text="Thunderbird" data-cta-position="product-list">
+        <strong class="m24-c-spring-title">Thunderbird</strong>
+        <span class="m24-c-spring-info">Access email, calendars, and contacts in one fast app.</span>
+      </a>
+    </li>
+  </ul>
+  <p class="m24-c-section-cta"><a href="{{ url('products.landing') }}" class="m24-c-cta">Learn about our products</a></p>
+</section>

bedrock/mozorg/templates/mozorg/home/includes/m24/showcase.html

@@ -0,0 +1,19 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+<div class="m24-c-transition"><hr></div>
+
+<div class="m24-t-green">
+  <section class="m24-c-showcase">
+    <h2 class="m24-c-showcase-title">Rise25 ipsum dolor sit amet</h2>
+    <p class="m24-c-showcase-subtitle">Suspendisse commodo sed erat in pellentesque. In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Nam vel justo urna.</p>
+    <div class="m24-c-showcase-media">
+        <img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" height="500" width="500">
+    </div>
+    <p class="m24-c-showcase-info">Sed eu mattis</p>
+    <p class="m24-c-showcase-cta"><a href="https://rise25.mozilla.org/" class="m24-c-cta" data-cta-text="">Learn more</a></p>
+  </section>
+</div>

bedrock/mozorg/urls.py

@@ -23,7 +23,7 @@ from .util import page
 
 urlpatterns = [
     path("", views.HomeView.as_view(), name="mozorg.home"),
-    page("about/", "mozorg/about/index.html", ftl_files=["mozorg/about"]),
+    path("about/", views.AboutView.as_view(), name="mozorg.about.index"),
     page("about/manifesto/", "mozorg/about/manifesto.html", ftl_files=["mozorg/about/manifesto"]),
     page("about/manifesto/details/", "mozorg/about/manifesto-details.html", ftl_files=["mozorg/about/manifesto"]),
     page("account/", "mozorg/account.html", ftl_files=["firefox/accounts"]),

bedrock/mozorg/views.py

@@ -17,12 +17,12 @@ from django.views.generic import TemplateView
 from jsonview.decorators import json_view
 from product_details import product_details
 
+from bedrock.base.waffle import switch
 from bedrock.contentful.api import ContentfulPage
 from bedrock.mozorg.credits import CreditsFile
 from bedrock.mozorg.forms import MiecoEmailForm
 from bedrock.mozorg.models import WebvisionDoc
 from bedrock.newsletter.forms import NewsletterFooterForm
-from bedrock.utils.views import VariationTemplateView
 from lib import l10n_utils
 from lib.l10n_utils import L10nTemplateView, RequireSafeMixin
 from lib.l10n_utils.fluent import ftl_file_is_active
@@ -125,7 +125,8 @@ def namespaces(request, namespace):
     return django_render(request, template, context)
 
 
-class HomeView(VariationTemplateView):
+class HomeView(L10nTemplateView):
+    m24_template_name = "mozorg/home/home-m24.html"
     template_name = "mozorg/home/home-new.html"
     old_template_name = "mozorg/home/home-old.html"
     template_context_variations = ["1", "2", "3"]
@@ -136,12 +137,28 @@ class HomeView(VariationTemplateView):
     def get_template_names(self):
         experience = self.request.GET.get("xv", None)
 
-        if ftl_file_is_active("mozorg/home-new") and experience != "legacy":
+        if switch("m24-home") and self.request.locale.startswith("en"):
+            return [self.m24_template_name]
+        elif ftl_file_is_active("mozorg/home-new") and experience != "legacy":
             return [self.template_name]
 
         return [self.old_template_name]
 
 
+class AboutView(L10nTemplateView):
+    m24_template_name = "mozorg/about/index-m24.html"
+    template_name = "mozorg/about/index.html"
+    activation_files = ["mozorg/about"]
+
+    ftl_files_map = {template_name: ["mozorg/about"]}
+
+    def get_template_names(self):
+        if switch("m24-about") and self.request.locale.startswith("en"):
+            return [self.m24_template_name]
+
+        return [self.template_name]
+
+
 @method_decorator(never_cache, name="dispatch")
 class ContentfulPreviewView(L10nTemplateView):
     def get_context_data(self, **kwargs):

media/css/m24/base.scss

@@ -6,26 +6,165 @@
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
 
 // variables
+@import 'vars/animation';
 @import 'vars/color';
+@import 'vars/grid';
 @import 'vars/spacing';
 @import 'vars/text';
-@import 'vars/animation';
 
-$mobile-square-img-max-width: 363px;
+// components
+@import 'consider';
+@import 'copy';
+@import 'donate';
+@import 'grid';
+@import 'hero';
+@import 'showcase';
+@import 'spring';
+@import 'transition';
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Sans Text';
+    font-style: normal;
+    font-weight: normal;
+    src:
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBold.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Sans Text';
+    font-style: normal;
+    font-weight: bold;
+    src:
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Bold.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Sans Text';
+    font-style: italic;
+    font-weight: normal;
+    src:
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Sans Text';
+    font-style: italic;
+    font-weight: bold;
+    src:
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-BoldIt.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-BoldIt.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla SemiSlab';
+    font-style: normal;
+    font-weight: normal;
+    src:
+        url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-SemiBold.woff2') format('woff2'),
+        url('#{$m24-font-path}mozilla-semi-slab/MozillaSemiSlab-SemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla SemiSlab';
+    font-style: normal;
+    font-weight: bold;
+    src:
+        url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Bold.woff2') format('woff2'),
+        url('#{$m24-font-path}mozilla-semi-slab/MozillaSemiSlab-Bold.woff') format('woff');
+}
+
+
+/* Protocol overrides ------------------------------------------------------------ */
+
+body {
+    background-color: $m24-color-white;
+    color: $m24-color-black;
+    font-family: 'Mozilla Sans Text', sans-serif;
+    font-variant-ligatures: none;
+    line-height: 1.2;
+}
+
+h1, h2, h3, h4, h5 {
+    color: $m24-color-black;
+    font-family: 'Mozilla SemiSlab', serif;
+    font-variant-ligatures: none;
+    font-weight: bold;
+}
+
+strong {
+    font-weight: 900;
+}
+
+a:link {
+    color: $m24-color-black;
+
+    &:hover,
+    &:focus {
+        color: $m24-color-black;
+    }
+
+    &:visited{
+        &:hover,
+        &:focus {
+            color: $m24-color-black;
+        }
+    }
+}
+
+*:focus,
+*:focus-visible {
+    outline-offset: 6px;
+}
 
 /* ------------------------------------------------------------------------------- */
 
-// can only be used inside a component that is 1440px with $content-padding on each side
+.m24-c-container {
-@function grid($n) {
+    @include container;
-    $total-columns: 12;
-    $one-column: calc(100% / #{$total-columns});
-    $minus: calc($grid-gutter * ($grid-columns - $n) / $grid-columns);
-    @return calc($one-column * #{$n} - #{$minus});
 }
 
-// can only be used inside a component that is 1440px with $content-padding on each side
+.m24-c-content {
-@mixin grid {
+    @include container;
-    display: grid;
+    padding-top: $spacer-xl;
-    grid-template-columns: repeat($grid-columns, 1fr);
+    padding-bottom: $spacer-xl;
-    gap: $grid-gutter;
+}
+
+/* ------------------------------------------------------------------------------- */
+
+.m24-c-section-cta {
+    margin-bottom: 0;
+    padding: $spacer-xs 0;
+    text-align: right;
+}
+
+.m24-c-cta {
+    color: $m24-color-black;
+    display: inline-block;
+    font-family: 'Mozilla SemiSlab', serif;
+    font-size: $text-button-lg;
+
+    &:hover {
+        color: $m24-color-dark-green;
+    }
+
+    &:focus-visible {
+        color: $m24-color-black;
+    }
+
+    &:active {
+        color: $m24-color-black;
+    }
+
+    &.m24-t-small {
+        font-family: 'Mozilla Sans Text', sans-serif;
+        font-size: $text-button-sm;
+    }
 }

media/css/m24/consider.scss

@@ -0,0 +1,83 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+
+.m24-c-consider {
+    @include container;
+    color: $m24-color-black;
+    background-color: $m24-color-white;
+    padding: $spacer-xl $container-padding;
+
+    * {
+        margin-bottom: 0;
+    }
+}
+
+.m24-c-consider-title {
+    font-size: $alias-text-title-h2;
+    padding-bottom: $spacer-xl;
+    text-wrap-style: balance;
+}
+
+.m24-c-consider-media {
+    @include grid;
+    padding-bottom: $spacer-xl;
+
+    picture {
+        display: grid; // removes line height so there's no extra space underneath
+        grid-column: auto / span 6;
+    }
+
+    picture:nth-child(1),
+    picture:nth-child(3) {
+        justify-self: end;
+    }
+}
+
+.m24-consider-cta-info {
+    font-size: $alias-text-title-h4;
+}
+
+.m24-c-consider-cta {
+    padding-top: $spacer-lg;
+    text-align: right;
+}
+
+@media #{$mq-md} {
+    .m24-c-consider-media {
+        display: flex;
+        gap: $grid-gutter;
+    }
+}
+
+@media #{$mq-lg} {
+    .m24-c-consider {
+        @include grid;
+    }
+
+    .m24-c-consider-title {
+        grid-column: 1/-1;
+        padding-bottom: $spacer-xl;
+    }
+
+    .m24-c-consider-media {
+        grid-column: 1/-1;
+        grid-row: 2/4;
+        padding: 0;
+
+        picture {
+            grid-column: auto / span 3;
+        }
+    }
+
+    .m24-consider-cta-info {
+        grid-column: 1/7;
+    }
+
+    .m24-c-consider-cta {
+        grid-column: 7/-1;
+        padding: 0;
+        place-self: end;
+    }
+}

media/css/m24/copy.scss

@@ -0,0 +1,44 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+
+.m24-c-copy {
+    box-sizing: border-box;
+    font-size: $alias-text-title-h4;
+    margin: 0 auto;
+    max-width: $content-max;
+
+    p {
+        margin-bottom: 0;
+        text-wrap-style: balance;
+    }
+}
+
+.m24-c-copy-title {
+    font-size: $alias-text-title-h2;
+    margin-bottom: 0;
+    padding-bottom: $spacer-sm;
+    text-wrap-style: balance;
+
+    &.m24-t-2xl {
+        font-size: $alias-text-title-h1;
+    }
+}
+
+.m24-c-copy-cta {
+    text-align: right;
+    padding-top: $spacer-md;
+}
+
+@media #{$mq-xl} {
+    .m24-c-copy {
+        p {
+            max-width: grid(9);
+        }
+    }
+
+    p.m24-c-copy-cta {
+        max-width: 100%;
+    }
+}

media/css/m24/donate.scss

@@ -0,0 +1,83 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+
+.m24-c-donate {
+    @include container;
+    color: $m24-color-black;
+    background-color: $m24-color-white;
+    padding: $spacer-xl $container-padding;
+
+    * {
+        margin-bottom: 0;
+    }
+}
+
+.m24-c-donate-title {
+    font-size: $alias-text-title-h2;
+    padding-bottom: $spacer-3xl;
+    text-wrap-style: balance;
+}
+
+.m24-c-donate-media {
+    img {
+        display: block;
+    }
+}
+
+.m24-c-donate-info {
+    padding-top: $spacer-xl;
+    font-size: $alias-text-title-h5;
+}
+
+.m24-c-donate-info-title {
+    font-size: $alias-text-title-h4;
+    padding-bottom: $spacer-xs;
+}
+
+.m24-c-donate-cta {
+    padding: $spacer-lg 0 0;
+    text-align: right;
+
+    a {
+        text-align: right;
+    }
+}
+
+.m24-consider-cta-text {
+    font-size: $alias-text-title-h4;
+    padding-top: $spacer-xs;
+}
+
+
+@media #{$mq-lg} {
+    .m24-c-donate {
+        @include grid;
+    }
+
+    .m24-c-donate-title {
+        grid-column: 1/-1;
+    }
+
+    .m24-c-donate-media {
+        grid-column: 1/7;
+        grid-row: 2/4;
+    }
+
+    .m24-c-donate-info {
+        padding-top: 0;
+        grid-column: 7/-1;
+        text-wrap-style: balance;
+    }
+
+    .m24-c-donate-cta {
+        place-self: end;
+        grid-column: 1/-1;
+        padding: 0;
+
+        a {
+            grid-column: 2/-1;
+        }
+    }
+}

media/css/m24/grid.scss

@@ -0,0 +1,62 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+.m24-c-grid {
+    padding: $spacer-xl 0;
+}
+
+.m24-c-grid-cell {
+    padding-top: $spacer-lg;
+
+    &:first-child {
+        padding-top: 0;
+    }
+}
+
+.m24-l-grid-pair .m24-c-grid-cell {
+    max-width: $mobile-square-img-max-width;
+    margin: 0 auto;
+}
+
+.m24-grid-cell-cta {
+    margin: 0;
+}
+
+@media #{$mq-md} {
+    .m24-c-grid {
+        @include grid;
+    }
+
+    .m24-c-grid-cell {
+        padding-top: 0;
+    }
+
+    .m24-l-grid-pair .m24-c-grid-cell {
+        grid-column: 1/7;
+        max-width: auto;
+
+        + .m24-c-grid-cell {
+            grid-column: 7/-1;
+        }
+    }
+}
+
+@media #{$mq-xl} {
+    .m24-l-grid-pair .m24-c-grid-cell {
+        grid-column: 2/5;
+
+        + .m24-c-grid-cell {
+            grid-column: 9/-2;
+        }
+    }
+}
+
+.m24-grid-cell-media {
+    padding-bottom: $spacer-sm;
+}
+
+.m24-grid-cell-title {
+    margin-bottom: 0;
+    padding-bottom: $spacer-sm;
+}

media/css/m24/hero.scss

@@ -0,0 +1,33 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+
+.m24-c-hero {
+    @include container;
+    padding-top: $spacer-2xl;
+
+    * {
+        margin-bottom: 0;
+    }
+}
+
+.m24-c-hero-title {
+    font-size: $text-title-2xl;
+}
+
+.m24-c-hero-media {
+    margin: 0 calc(-1 * $container-padding);
+    padding-top: $spacer-xl;
+
+    img {
+        display: block;
+        border: $spacer-xs solid $color-black; // this does not change from light to dark mode
+        box-sizing: border-box;
+    }
+}
+
+.m24-c-hero-cta {
+    padding: $spacer-md 0 0;
+    text-align: right;
+}

media/css/m24/showcase.scss

@@ -0,0 +1,70 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+
+
+.m24-c-showcase {
+    @include container;
+    padding-top: $spacer-xl;
+    padding-bottom: $spacer-xl;
+
+    * {
+        margin-bottom: 0;
+    }
+}
+
+.m24-c-showcase-title {
+    font-size: $alias-text-title-h2;
+}
+
+.m24-c-showcase-subtitle {
+    font-size: $alias-text-title-h4;
+    text-wrap-style: balance;
+    padding-top: $spacer-sm;
+}
+
+.m24-c-showcase-media {
+    text-align: center;
+    padding: $spacer-xl 0;
+    position: relative;
+}
+
+.m24-c-showcase-info {
+    padding-bottom: $spacer-xl;
+    font-size: $alias-text-title-h3;
+}
+
+.m24-c-showcase-cta {
+    text-align: right;
+}
+
+@media #{$mq-lg} {
+    .m24-c-showcase {
+        @include grid;
+        grid-template-rows: min-content min-content auto min-content;
+    }
+
+    .m24-c-showcase-title {
+        grid-column: 1/-1;
+    }
+
+    .m24-c-showcase-subtitle {
+        grid-column: 1/10;
+    }
+
+    .m24-c-showcase-media {
+        grid-column: 1/-1;
+        align-self: center;
+    }
+
+    .m24-c-showcase-info {
+        grid-column: 1/7;
+        padding-bottom: 0;
+    }
+
+    .m24-c-showcase-cta {
+        grid-column: 7/-1;
+
+    }
+}

media/css/m24/spring.scss

@@ -0,0 +1,95 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+$logo-spacing: calc(24px + #{$spacer-xs});
+
+.m24-c-spring {
+    padding: $spacer-xl 0;
+    margin: 0;
+}
+
+.m24-c-spring-item {
+    border-bottom: 4px solid $m24-color-light-gray;
+    margin-bottom: 0;
+}
+
+.m24-c-spring-link {
+    @include grid;
+    background-color: $m24-color-white;
+    color: $m24-color-black;
+    display: grid;
+    gap: $spacer-2xs $grid-gutter;
+    margin: 0 calc($container-padding * -1);
+    padding: $spacer-sm $container-padding;
+    position: relative;
+    text-decoration: none;
+
+    &:hover,
+    &:link:active, // override protocol
+    &:focus-visible {
+        @include invert-colors;
+        background-color: $m24-color-white; // override protocl
+        position: relative;
+        z-index: 2;
+    }
+
+    &::before,
+    &::after {
+        content: '';
+        background-image: url('/media/img/m24/todo-1-1.svg');
+        background-size: 15px auto;
+        background-repeat: no-repeat;
+        background-position: center left;
+        display: block;
+        width: 24px;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+    }
+
+    &::before {
+        left: $container-padding;
+    }
+
+    &::after {
+        content: '';
+        background-image: url('/media/img/icons/m24-small/arrow-right.svg');
+        right: $container-padding;
+    }
+
+    &:focus-visible::after,
+    &:active::after,
+    &:hover::after {
+        background-image: url('/media/img/icons/m24-small/arrow-right-white.svg');
+    }
+}
+
+.m24-c-spring-title {
+    color: $m24-color-black;
+    display: inline-block;
+    font-size: $alias-text-title-h4;
+    font-weight: 600;
+    grid-column: 1 / span 10;
+    padding-left: $logo-spacing;
+    line-height: 1;
+}
+
+.m24-c-spring-info {
+    color: $m24-color-functional-gray;
+    grid-column: 1 / span 11;
+    padding-left: $logo-spacing;
+}
+
+@media #{$mq-lg} {
+    .m24-c-spring-title {
+        grid-column: 1 / 4;
+        align-content: center;
+    }
+
+    .m24-c-spring-info {
+        grid-column: 4 / 11;
+        padding-left: 0;
+        align-content: end;
+    }
+}

media/css/m24/transition.scss

@@ -0,0 +1,87 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+
+// TODO: shutter lines are not equal height in Figma
+
+.m24-c-transition {
+    overflow: hidden;
+    position: relative;
+    height: calc($spacer-xl * 2);
+    background-color: transparent;
+
+    hr,
+    &::before,
+    &::after {
+        content: '';
+        display: block;
+        height: $spacer-xl;
+        width: 100%;
+        background-color: $m24-color-light-green;
+        margin: 0;
+        border: 0;
+        top: 0;
+        left: 0;
+        position: absolute;
+    }
+
+    &.m24-t-purple {
+        background-color: transparent;
+
+        hr,
+        &::before,
+        &::after {
+            background-color: $token-color-light-pink;
+        }
+    }
+
+    &.m24-t-black {
+        background-color: transparent;
+
+        hr,
+        &::before,
+        &::after {
+            background-color: $m24-color-black;
+        }
+    }
+
+    &::before {
+        transform: translate(calc(grid(10) * -1), 0);
+    }
+
+    hr {
+        transform: translate(calc(grid(8) * -1), 0);
+        top: $spacer-xl;
+    }
+
+    &::after {
+        top: $spacer-xl;
+        transform: translate(grid(8), 0);
+    }
+
+    &.m24-l-reverse {
+        &::before {
+            display: none;
+            left: 50%;
+            transform: translate(-50%,0);
+        }
+
+        hr {
+            top: 0;
+            left: 50%;
+            transform: translate(-50%,0);
+            margin-left: grid(2);
+        }
+
+        &::after {
+            left: 50%;
+            transform: translate(-50%,0);
+            width: grid(4);
+        }
+    }
+
+    &.m24-l-reverse + .m24-c-transition {
+        margin-top: calc($spacer-xl * -2);
+    }
+}

media/css/m24/vars/color.scss

@@ -2,6 +2,9 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
+/* ------------------------------------------------------------------------------- */
+// hex code colors
+// do not reference these directly, use the $m24-color-* variables as they will adapt for dark mode
 $token-color-black: #000;
 $token-color-light-gray: #f4f4f4;
 $token-color-dark-gray: #181818;
@@ -9,103 +12,120 @@ $token-color-functional-gray-on-white: #707070;
 $token-color-functional-gray-on-black: #828282;
 $token-color-white: #fff;
 $token-color-green: #00D230;
-$token-color-light-green: #E5F4E5;
+$token-color-light-green: #D6FFCD;
-$token-color-dark-green: #155E2A;
+$token-color-dark-green: #28733F;
-$token-color-orange: #ff9502;
+$token-color-orange: #FF9456;
-$token-color-light-orange: #FFF9F0;
+$token-color-light-orange: #FAF0E6;
-$token-color-dark-orange: #F10900;
+$token-color-dark-orange: #FF453F;
-$token-color-pink: #FF0089;
+$token-color-pink: #FF97E2;
-$token-color-light-pink: #FFEAF4;
+$token-color-light-pink: #FFF1F8;
-$token-color-dark-pink: #7F00CA;
+$token-color-dark-pink: #AE49EC;
 $token-color-feedback-success: $token-color-green;
 $token-color-feedback-caution: $token-color-dark-orange;
 $token-color-feedback-error: $token-color-orange;
 
+// define CSS variables for the browser
+// do not reference these directly, use the $m24-color-* variables
 :root {
-        --white-on-black: #{$token-color-white};
+    // black and white
-        --black-on-white: #{$token-color-black};
+    --m24-white: #{$token-color-white};
-        --light-gray-on-white: #{$token-color-light-gray};
+    --m24-black: #{$token-color-black};
-        --light-gray-on-dark-gray: #{$token-color-light-gray};
+
-        --dark-gray-on-light-gray: #{$token-color-dark-gray};
+    // gray
-        --white-on-light-gray: #{$token-color-white};
+    --m24-light-gray: #{$token-color-light-gray};
-        --white-on-dark-gray: #{$token-color-white};
+    --m24-dark-gray: #{$token-color-dark-gray};
-        --black-on-dark-gray: #{$token-color-black};
+    --m24-functional-gray: #{$token-color-functional-gray-on-white};
-        --dark-gray-on-black: #{$token-color-dark-gray};
+
-        --functional-gray-on-white: #{$token-color-functional-gray-on-white};
+    // green
-        --functional-gray-on-black: #{$token-color-functional-gray-on-black};
+    --m24-green: #{$token-color-green};
-        --green-on-white: #{$token-color-dark-green};
+    --m24-light-green: #{$token-color-light-green};
-        --green-on-black: #{$token-color-green};
+    --m24-dark-green: #{$token-color-dark-green};
+
+    // pink
+    --m24-pink: #{$token-color-pink};
+    --m24-light-pink: #{$token-color-light-pink};
+    --m24-dark-pink: #{$token-color-dark-pink};
+
+    // orange
+    --m24-orange: #{$token-color-orange};
+    --m24-light-orange: #{$token-color-light-orange};
+    --m24-dark-orange: #{$token-color-dark-orange};
+}
+
+/* ------------------------------------------------------------------------------- */
+// define sass variables to hold CSS variables
+// reference these!
+
+// black and white
+$m24-color-white: var(--m24-white);
+$m24-color-black: var(--m24-black);
+
+// gray
+$m24-color-light-gray: var(--m24-light-gray);
+$m24-color-dark-gray: var(--m24-dark-gray);
+$m24-color-functional-gray: var(--m24-functional-gray);
+
+// green
+$m24-color-green: var(--m24-green);
+$m24-color-light-green: var(--m24-light-green);
+$m24-color-dark-green: var(--m24-dark-green);
+
+// orange
+$m24-color-orange: var(--m24-orange);
+$m24-color-light-orange: var(--m24-light-orange);
+$m24-color-dark-orange: var(--m24-dark-orange);
+
+// pink
+$m24-color-pink: var(--m24-pink);
+$m24-color-light-pink: var(--m24-light-pink);
+$m24-color-dark-pink: var(--m24-dark-pink);
+
+
+/* ------------------------------------------------------------------------------- */
+// this mixin will invert the values of the CSS variables, essentially giving you "dark mode"
+
+@mixin invert-colors {
+    // black and white
+    --m24-white: #{$token-color-black};
+    --m24-black: #{$token-color-white};
+
+    // gray
+    --m24-light-gray: #{$token-color-dark-gray};
+    --m24-dark-gray: #{$token-color-light-gray};
+    --m24-functional-gray: #{$token-color-functional-gray-on-black};
+
+    // green
+    --m24-green: #{$token-color-green};
+    --m24-light-green: #{$token-color-dark-green};
+    --m24-dark-green: #{$token-color-light-green};
+
+    // pink
+    --m24-pink: #{$token-color-pink};
+    --m24-light-pink: #{$token-color-dark-pink};
+    --m24-dark-pink: #{$token-color-light-pink};
+
+    // orange
+    --m24-orange: #{$token-color-orange};
+    --m24-light-orange: #{$token-color-dark-orange};
+    --m24-dark-orange: #{$token-color-light-orange};
+}
+
+/* ------------------------------------------------------------------------------- */
+
+.m24-t-light-alt {
+    background-color: $m24-color-light-gray;
+}
+
+.m24-t-dark {
+    @include invert-colors;
+    background-color: $m24-color-white;
+    color: $m24-color-black;
+}
+
+.m24-t-green {
+    background-color: $m24-color-light-green;
 }
 
-.m24-t-dark,
 .m24-t-purple {
-    --white-on-black: #{$token-color-black};
+    background-color: $token-color-light-pink;
-    --black-on-white: #{$token-color-white};
-    --light-gray-on-white: #{$token-color-dark-gray};
-    --light-gray-on-dark-gray: #{$token-color-dark-gray};
-    --dark-gray-on-light-gray: #{$token-color-light-gray};
-    --white-on-light-gray: #{$token-color-light-gray};
-    --white-on-dark-gray: #{$token-color-dark-gray};
-    --black-on-dark-gray: #{$token-color-dark-gray};
-    --dark-gray-on-black: #{$token-color-black};
-    --functional-gray-on-white: #{$token-color-functional-gray-on-black};
-    --functional-gray-on-black: #{$token-color-functional-gray-on-white};
-    --green-on-white: #{$token-color-green};
-    --green-on-black: #{$token-color-dark-green};
-
-    // dark mode not supported for now
-    // @media (prefers-color-scheme: dark) {
-    //     --white-on-black: #{$token-color-dark-gray};
-    //     --black-on-white: #{$token-color-functional-gray-on-black};
-    //     --light-gray-on-white: #{$token-color-light-gray};
-    //     --light-gray-on-dark-gray: #{$token-color-light-gray};
-    //     --dark-gray-on-light-gray: #{$token-color-dark-gray};
-    //     --white-on-light-gray: #{$token-color-white};
-    //     --white-on-dark-gray: #{$token-color-white};
-    //     --black-on-dark-gray: #{$token-color-black};
-    //     --dark-gray-on-black: #{$token-color-dark-gray};
-    //     --functional-gray-on-white: #{$token-color-functional-gray-on-black);
-    //     --functional-gray-on-black: #{$token-color-functional-gray-on-white};
-    //     --green-on-white: #{$token-color-dark-green};
-    //     --green-on-black: #{$token-color-green};
-    // }
 }
-
-// dark mode not supported for now
-// @media (prefers-color-scheme: dark) {
-//     :root {
-//         --white-on-black: #{$token-color-black};
-//         --black-on-white: #{$token-color-white};
-//         --light-gray-on-white: #{$token-color-dark-gray};
-//         --light-gray-on-dark-gray: #{$token-color-dark-gray};
-//         --dark-gray-on-light-gray: #{$token-color-light-gray};
-//         --white-on-light-gray: #{$token-color-light-gray};
-//         --white-on-dark-gray: #{$token-color-dark-gray};
-//         --black-on-dark-gray: #{$token-color-dark-gray};
-//         --dark-gray-on-black: #{$token-color-black};
-//         --functional-gray-on-white: #{$token-color-functional-gray-on-black};
-//         --functional-gray-on-black: #{$token-color-functional-gray-on-white};
-//         --green-on-white: #{$token-color-green};
-//         --green-on-black: #{$token-color-dark-green};
-//     }
-
-//     .m24-t-purple {
-//         --black-on-white: #{$token-color-black};
-//     }
-// }
-
-$color-white-on-black: var(--white-on-black);
-$color-black-on-white: var(--black-on-white);
-$color-light-gray-on-white: var(--light-gray-on-white);
-$color-light-gray-on-dark-gray: var(--light-gray-on-dark-gray);
-$color-dark-gray-on-light-gray: var(--dark-gray-on-light-gray);
-$color-white-on-light-gray: var(--white-on-light-gray);
-$color-white-on-dark-gray: var(--white-on-dark-gray);
-$color-black-on-dark-gray: var(--black-on-dark-gray);
-$color-dark-gray-on-black: var(--dark-gray-on-black);
-$color-functional-gray-on-white: var(--functional-gray-on-white);
-$color-functional-gray-on-black: var(--functional-gray-on-black);
-$color-green-on-white: var(--green-on-white);
-$color-green-on-black: var(--green-on-black);
-$color-purple: #{$token-color-dark-pink};
-$color-black: #{$token-color-black};

media/css/m24/vars/grid.scss

@@ -0,0 +1,56 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+:root {
+    // grid
+    --grid-margin: 16px;
+    --grid-gutter: 8px;
+}
+
+@media #{$mq-md} {
+    :root {
+        // grid
+        --grid-margin: 24px;
+        --grid-gutter: 12px;
+    }
+}
+
+@media #{$mq-xl} {
+    :root {
+        // grid
+        --grid-margin: 32px;
+        --grid-gutter: 16px;
+    }
+}
+
+// grid
+$grid-margin: var(--grid-margin);
+$grid-gutter: var(--grid-gutter);
+$grid-columns: 12;
+
+// image in grid
+$mobile-square-img-max-width: 363px;
+
+@function grid($n) {
+    // can only be used inside a container that is full width with $content-padding on each side
+    $total-columns: 12;
+    $one-column: calc(100% / #{$total-columns});
+    $minus: calc($grid-gutter * ($grid-columns - $n) / $grid-columns);
+    @return calc($one-column * #{$n} - #{$minus});
+}
+
+@mixin grid {
+    // can only be used inside a container that is full width with $content-padding on each side
+    display: grid;
+    grid-template-columns: repeat($grid-columns, 1fr);
+    gap: $grid-gutter;
+}
+
+@mixin container {
+    box-sizing: border-box;
+    margin: 0 auto;
+    max-width: $content-max;
+    padding: 0 $container-padding;
+    position: relative;
+}

media/css/m24/vars/spacing.scss

@@ -13,10 +13,6 @@
     --spacer-xs: 8px;
     --spacer-2xs: 4px;
 
-    // grid
-    --grid-margin: 16px;
-    --grid-gutter: 8px;
-
     // container
     --container-padding: 16px;
 }
@@ -33,10 +29,6 @@
         --spacer-xs: 8px;
         --spacer-2xs: 4px;
 
-        // grid
-        --grid-margin: 24px;
-        --grid-gutter: 12px;
-
         // container
         --container-padding: 24px;
     }
@@ -54,10 +46,6 @@
         --spacer-xs: 8px;
         --spacer-2xs: 4px;
 
-        // grid
-        --grid-margin: 32px;
-        --grid-gutter: 16px;
-
         // container
         --container-padding: 32px;
     }
@@ -73,10 +61,5 @@ $spacer-sm: var(--spacer-sm);
 $spacer-xs: var(--spacer-xs);
 $spacer-2xs: var(--spacer-2xs);
 
-// grid
-$grid-margin: var(--grid-margin);
-$grid-gutter: var(--grid-gutter);
-$grid-columns: 12;
-
 // container
 $container-padding: var(--container-padding);

media/css/m24/vars/text.scss

@@ -2,6 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
+$m24-font-path: '/media/fonts/m24/';
+
 :root {
     // titles
     --text-title-2xl: 48px;
@@ -76,7 +78,6 @@ $text-body-sm: var(--text-body-sm);
 $text-button-lg: var(--text-button-lg);
 $text-button-sm: var(--text-button-sm);
 
-
 // aliases are to help with copying styles from the Basic Figma files
 // these should be find/replaced out at some point in the future
 $alias-text-title-h1: $text-title-2xl;

media/img/icons/m24-small/arrow-right-white.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24" height="24" style="enable-background:new 0 0 896.1732 896.1732" xmlns="http://www.w3.org/2000/svg">
+  <defs/>
+  <path d="M13.787 9.413h-3.014V.32h3.014v9.093ZM12.28 23.679l12-14.266H13.787v3.014h4.019l-5.526 6.57-5.527-6.57 7.632-.001-.004-3.013H.28l12 14.266Z" style="transform-box: fill-box; transform-origin: 50% 50%; fill: rgb(255, 255, 255);" transform="rotate(-90 0 0)"/>
+</svg>

media/img/icons/m24-small/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="enable-background:new 0 0 896.1732 896.1732"><path d="M13.787 9.413h-3.014V.32h3.014v9.093ZM12.28 23.679l12-14.266H13.787v3.014h4.019l-5.526 6.57-5.527-6.57 7.632-.001-.004-3.013H.28l12 14.266Z" style="transform-box:fill-box;transform-origin:50% 50%" transform="rotate(-90 0 0)"/></svg>

media/img/icons/m24-small/plus-white.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24" height="24" style="enable-background:new 0 0 896.1732 896.1732" xmlns="http://www.w3.org/2000/svg">
+  <defs/>
+  <path d="M3.914 9.793H.9V-.9h3.014V9.793Zm0 3.014 10.493-.126V9.793H3.914v3.014Z" transform="rotate(-90 7.654 6.753)" style="fill: rgb(255, 255, 255);"/>
+  <path d="m13.004 23.314-3.024.036.029-13.36h2.995v13.324Zm0-.014 10.493-.126v-2.888l-10.493-.003V23.3Z" transform="rotate(90 16.743 17.246)" style="fill: rgb(255, 255, 255);"/>
+</svg>

media/img/icons/m24-small/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="enable-background:new 0 0 896.1732 896.1732"><path d="M3.914 9.793H.9V-.9h3.014V9.793Zm0 3.014 10.493-.126V9.793H3.914v3.014Z" transform="rotate(-90 7.654 6.753)"/><path d="m13.004 23.314-3.024.036.029-13.36h2.995v13.324Zm0-.014 10.493-.126v-2.888l-10.493-.003V23.3Z" transform="rotate(90 16.743 17.246)"/></svg>

media/img/m24/todo-1-1.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 768 768" width="768px" height="768px" fill="#A9A9A9" xmlns="http://www.w3.org/2000/svg">
+  <defs/>
+  <rect width="768" height="768" style="fill: rgb(187, 187, 187);"/>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="364.538" y="393.633">1:1</text>
+</svg>

media/img/m24/todo-2-1.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 768 384" width="768px" height="384px" fill="#A9A9A9" xmlns="http://www.w3.org/2000/svg">
+  <defs/>
+  <rect width="768" height="384" style="fill: rgb(187, 187, 187);"/>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="364.538" y="201.698">2:1</text>
+</svg>

media/img/m24/todo-2-3.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 216 324" width="216px" height="324px" fill="#A9A9A9" xmlns="http://www.w3.org/2000/svg">
+  <defs/>
+  <rect width="216" height="324" style="fill: rgb(187, 187, 187);"/>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="88.535" y="171.655">2:3</text>
+</svg>

media/img/m24/todo-27-1.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 1440 533" width="1440px" height="533px" fill="#D3D3D3" xmlns="http://www.w3.org/2000/svg">
+  <defs/>
+  <rect width="1440" height="533" style="fill: rgb(187, 187, 187);"/>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="688.861" y="276.168">2.7:1</text>
+</svg>

media/img/m24/todo-4-5.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 400 500" width="400px" height="500px" fill="#A9A9A9" xmlns="http://www.w3.org/2000/svg">
+  <defs/>
+  <rect width="400" height="500" style="fill: rgb(187, 187, 187);"/>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="180.54" y="259.619">4:5</text>
+</svg>

media/static-bundles.json

@@ -1237,6 +1237,12 @@
         "css/firefox/built-for-you/landing.scss"
       ],
       "name": "firefox-built-for-you"
+    },
+    {
+      "files":  [
+        "css/m24/base.scss"
+      ],
+      "name": "m24"
     }
   ],
   "js": [