diff --git a/astro/src/components/ShadowBoxSection.astro b/astro/src/components/ShadowBoxSection.astro
index 399780c6..785c8343 100644
--- a/astro/src/components/ShadowBoxSection.astro
+++ b/astro/src/components/ShadowBoxSection.astro
@@ -2,7 +2,7 @@
 interface Props {
   id?: string;
   theme?: string;
-  style?: string;
+  styling?: string;
   py?: number;
   fluid?: boolean;
 }
@@ -10,7 +10,7 @@ interface Props {
 const {
   id = undefined,
   theme = "secondary",
-  style = undefined,
+  styling = undefined,
   py = 5,
   fluid = true,
 } = Astro.props;
@@ -18,7 +18,7 @@ const {
 import { getBackgroundAndText } from "../lib/themes.ts";
 
 const outerBgAndTextClass = getBackgroundAndText(theme, undefined);
-const innerBgClass = getBackgroundAndText(undefined, style);
+const innerBgClass = getBackgroundAndText(undefined, styling);
 ---
 
 <section id={id} class:list={[outerBgAndTextClass, `p-${py - 1} p-sm-${py}`]}>
diff --git a/astro/src/components/ThemedBox.astro b/astro/src/components/ThemedBox.astro
index 1e10b188..55552393 100644
--- a/astro/src/components/ThemedBox.astro
+++ b/astro/src/components/ThemedBox.astro
@@ -1,7 +1,7 @@
 ---
 export interface Props {
   theme?: string;
-  style?: string;
+  styling?: string;
   text?: boolean;
   border?: number;
   class?: string;
@@ -10,7 +10,7 @@ export interface Props {
 
 const {
   theme = undefined,
-  style = undefined,
+  styling = undefined,
   text = true,
   border = 0,
   padding = 4,
@@ -19,8 +19,8 @@ const {
 
 import { getBackgroundAndText, getBorder } from "../lib/themes.ts";
 
-const bgAndTextClasses = getBackgroundAndText(theme, style, text);
-const borderClasses = getBorder(border, theme, style === "subtle");
+const bgAndTextClasses = getBackgroundAndText(theme, styling, text);
+const borderClasses = getBorder(border, theme, styling === "subtle");
 ---
 
 <div class:list={[bgAndTextClasses, borderClasses, `p-${padding}`, extraClasses]}>
diff --git a/astro/src/components/ThemedColumn.astro b/astro/src/components/ThemedColumn.astro
index da7a3eef..b8648310 100644
--- a/astro/src/components/ThemedColumn.astro
+++ b/astro/src/components/ThemedColumn.astro
@@ -8,7 +8,7 @@ interface Props extends ColumnProps, ThemedBoxProps {}
 
 const {
   theme = undefined,
-  style = undefined,
+  styling = undefined,
   text = true,
   border = 0,
   padding = 4,
@@ -17,8 +17,8 @@ const {
 
 import { getBackgroundAndText, getBorder } from "../lib/themes.ts";
 
-const bgAndTextClasses = getBackgroundAndText(theme, style, text);
-const borderClasses = getBorder(border, theme, style === "subtle");
+const bgAndTextClasses = getBackgroundAndText(theme, styling, text);
+const borderClasses = getBorder(border, theme, styling === "subtle");
 ---
 
 <Column {...columnProps} class:list={[bgAndTextClasses, borderClasses, `p-${padding}`]}><slot /></Column>
\ No newline at end of file
diff --git a/astro/src/components/ThemedSection.astro b/astro/src/components/ThemedSection.astro
index 0cdc4ccf..34cb3878 100644
--- a/astro/src/components/ThemedSection.astro
+++ b/astro/src/components/ThemedSection.astro
@@ -2,7 +2,7 @@
 interface Props {
   id?: string;
   theme?: string;
-  style?: string;
+  styling?: string;
   text?: boolean;
   yPaddings?: Array<string>;
   fluid?: boolean;
@@ -11,7 +11,7 @@ interface Props {
 const {
   id = undefined,
   theme = undefined,
-  style = undefined,
+  styling = undefined,
   text = false,
   yPaddings = ["xs-1", "sm-2", "md-3", "lg-4"],
   fluid = false,
@@ -19,7 +19,7 @@ const {
 
 import { getBackgroundAndText } from "../lib/themes.ts";
 
-const bgAndTextClass = getBackgroundAndText(theme, style, text);
+const bgAndTextClass = getBackgroundAndText(theme, styling, text);
 const yPaddingClasses = yPaddings.map((p) => `py-${p}`);
 ---
 
diff --git a/astro/src/layouts/BlogLayout.astro b/astro/src/layouts/BlogLayout.astro
index 7d2f2ace..b1f2815f 100644
--- a/astro/src/layouts/BlogLayout.astro
+++ b/astro/src/layouts/BlogLayout.astro
@@ -87,7 +87,7 @@ import ThemedSection from "@components/ThemedSection.astro";
       <strong>Blog</strong>
     </slot>
   </ImageHeading>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <div class="d-flex gap-4">
       <article class:list={[sidebar ? "d-none d-lg-block" : "col", "col-lg-9"]}>
         <h1 class="display-4 border-bottom mb-3" set:text={blog.data.title} />
diff --git a/astro/src/layouts/PolicyLayout.astro b/astro/src/layouts/PolicyLayout.astro
index 4a13f379..5a7e378c 100644
--- a/astro/src/layouts/PolicyLayout.astro
+++ b/astro/src/layouts/PolicyLayout.astro
@@ -22,7 +22,7 @@ const metadata: PageMetadata = {
       {title}
     </slot>
   </ImageHeading>
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <div class="d-print-none text-end pb-2">
       <button class="btn btn-contrast-dark btn-info" onclick="window.print()">
         Print this page
diff --git a/astro/src/layouts/TipLayout.astro b/astro/src/layouts/TipLayout.astro
index bc4212d4..c436280e 100644
--- a/astro/src/layouts/TipLayout.astro
+++ b/astro/src/layouts/TipLayout.astro
@@ -85,7 +85,7 @@ const metadata: PageMetadata = {
   </Fragment>
 
   <ImageHeading image={tip?.data.theme} slot="header" set:html={header} />
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <FlexColumn
       lgFlexRow gap="3" class="justify-content-lg-between"
     >
@@ -133,7 +133,7 @@ const metadata: PageMetadata = {
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <TipLicense />
   </ThemedSection>
 </Layout>
diff --git a/astro/src/pages/_fixable/index.astro b/astro/src/pages/_fixable/index.astro
index 07aaaa0e..e16ccf1a 100644
--- a/astro/src/pages/_fixable/index.astro
+++ b/astro/src/pages/_fixable/index.astro
@@ -39,7 +39,7 @@ const crumbs = [];
     </p>
   </Hero>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h1 class="display-4">Headings indicate <strong>structure</strong>.</h1>
     <FlexColumn
       xlFlexRow class="justify-content-xl-evenly align-items-center"
@@ -69,7 +69,7 @@ const crumbs = [];
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection theme="secondary" style="subtle">
+  <ThemedSection theme="secondary" styling="subtle">
     <h2 class="display-4">Color needs <strong>contrast</strong>.</h2>
     <FlexColumn
       lgFlexRow gap="4" class="py-3 justify-content-lg-evenly"
@@ -101,7 +101,7 @@ const crumbs = [];
     </FlexColumn>
   </ThemedSection>
 
-  <ShadowBoxSection theme="info" style="secondary">
+  <ShadowBoxSection theme="info" styling="secondary">
     <div class="p-3">
       <h2 class="display-4 text-center"
         >Forms require <strong>focus</strong>.</h2
@@ -247,7 +247,7 @@ const crumbs = [];
     </div>
   </ShadowBoxSection>
 
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <h2 class="display-4 my-3"
       >Links should be <strong>described</strong> and <strong>clickable</strong
       >.</h2
diff --git a/astro/src/pages/about/mission.astro b/astro/src/pages/about/mission.astro
index 1c25fe5a..86ac89bf 100644
--- a/astro/src/pages/about/mission.astro
+++ b/astro/src/pages/about/mission.astro
@@ -110,7 +110,7 @@ import partnerImage from "../../images/np_Business-partners-discussing-work-arra
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="display-3 pb-3">Our <strong>motivation</strong>.</h2>
     <p class="lead">
       One in every three households includes someone who has a disability. These
@@ -153,7 +153,7 @@ import partnerImage from "../../images/np_Business-partners-discussing-work-arra
         lg="3"
         xl="3"
         theme="info"
-        style="subtle"
+        styling="subtle"
         class="mx-4 my-auto rounded shadow-sm"
       >
         <Quote q="loneliness" />
diff --git a/astro/src/pages/about/policies.astro b/astro/src/pages/about/policies.astro
index f5ff5a99..45aa6000 100644
--- a/astro/src/pages/about/policies.astro
+++ b/astro/src/pages/about/policies.astro
@@ -34,7 +34,7 @@ const crumbs: Breadcrumbs = [
     and on Google Docs.
   </div>
 
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <h2 id="user" class="display-4"><strong>User</strong> Policies</h2>
     <p>
       These are policies for users of the tools that
diff --git a/astro/src/pages/about/story.astro b/astro/src/pages/about/story.astro
index 4b67690b..b99b4bc2 100644
--- a/astro/src/pages/about/story.astro
+++ b/astro/src/pages/about/story.astro
@@ -31,7 +31,7 @@ const crumbs: Breadcrumbs = [
   <ImageHeading image="blog" slot="header">
     Our Founder's <strong>Story</strong>
   </ImageHeading>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <p>
       People with disabilities are the
       <ExternalLink
@@ -53,7 +53,7 @@ const crumbs: Breadcrumbs = [
       lg="7"
       xxl="10"
       theme="primary"
-      style="subtle"
+      styling="subtle"
       border={1}
       text={true}
       class="mx-auto rounded-1 mb-4"
@@ -93,7 +93,7 @@ const crumbs: Breadcrumbs = [
       lg="9"
       xl="10"
       theme="primary"
-      style="subtle"
+      styling="subtle"
       border={1}
       text={true}
       class="mx-auto rounded-1 mb-4"
diff --git a/astro/src/pages/blog/authors/index.astro b/astro/src/pages/blog/authors/index.astro
index 71d87aa6..84e93963 100644
--- a/astro/src/pages/blog/authors/index.astro
+++ b/astro/src/pages/blog/authors/index.astro
@@ -23,7 +23,7 @@ import ThemedSection from "../../../components/ThemedSection.astro";
   <ImageHeading image="blog" slot="header">
     <strong>Blogs</strong> by author
   </ImageHeading>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="text-info-emphasis display-5" set:text={title} />
     <ul>
       {
diff --git a/astro/src/pages/blog/dates/index.astro b/astro/src/pages/blog/dates/index.astro
index 055e9fda..51ac9850 100644
--- a/astro/src/pages/blog/dates/index.astro
+++ b/astro/src/pages/blog/dates/index.astro
@@ -24,7 +24,7 @@ import ThemedSection from "../../../components/ThemedSection.astro";
   <ImageHeading image="blog" slot="header">
     <strong>Blogs</strong> by date
   </ImageHeading>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="text-info-emphasis display-5" set:text={title} />
     <ul>
       {
diff --git a/astro/src/pages/blog/topics/index.astro b/astro/src/pages/blog/topics/index.astro
index 333b65af..5fc10f2f 100644
--- a/astro/src/pages/blog/topics/index.astro
+++ b/astro/src/pages/blog/topics/index.astro
@@ -24,7 +24,7 @@ import ThemedSection from "../../../components/ThemedSection.astro";
   <ImageHeading image="blog" slot="header">
     <strong>Blogs</strong> by topic
   </ImageHeading>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="text-info-emphasis display-5" set:text={title} />
     <ul>
       {
diff --git a/astro/src/pages/donate.astro b/astro/src/pages/donate.astro
index fafcb76c..b4b790b4 100644
--- a/astro/src/pages/donate.astro
+++ b/astro/src/pages/donate.astro
@@ -98,10 +98,10 @@ if (!letter) throw new Error("Could not find content `markdown/donor-letter`");
     </div>
   </Hero>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
 
     <Row class="justify-content-center">
-      <ThemedBox theme="primary" style="subtle" border={1} padding={3} class="mb-5 p-3 rounded">
+      <ThemedBox theme="primary" styling="subtle" border={1} padding={3} class="mb-5 p-3 rounded">
         <div class="announcement lead text-center">
           An anonymous donor is currently <a href="/blog/2026-matching-campaign">matching contributions</a>
           up to&nbsp;$5,000. <br class="d-none d-lg-inline-block" /> Your&nbsp;donation will be doubled!
@@ -157,7 +157,7 @@ if (!letter) throw new Error("Could not find content `markdown/donor-letter`");
     </Row>
   </ThemedSection>
 
-  <ShadowBoxSection theme="info" style="secondary">
+  <ShadowBoxSection theme="info" styling="secondary">
     <h2 class="display-3 text-center fw-bold my-3">How can I help?</h2>
     <Row class="justify-content-center px-3">
       <Column lg="3" xl="2">
diff --git a/astro/src/pages/escape-room/_csun-2025.astro b/astro/src/pages/escape-room/_csun-2025.astro
index 6970c4ef..f1b85878 100644
--- a/astro/src/pages/escape-room/_csun-2025.astro
+++ b/astro/src/pages/escape-room/_csun-2025.astro
@@ -63,7 +63,7 @@ const timeSlots = ["7:20", "7:50", "8:20", "8:50", "9:20"];
   </Hero>
 
   <img src="/images/wave.svg" class="wave" />
-  <ThemedSection id="form" theme="secondary" style="subtle">
+  <ThemedSection id="form" theme="secondary" styling="subtle">
     <h2 class="display-3 mb-4">
       CSUN <strong>Escape Room</strong> Registration
     </h2>
diff --git a/astro/src/pages/escape-room/how-it-works.astro b/astro/src/pages/escape-room/how-it-works.astro
index 92b77136..fd380d98 100644
--- a/astro/src/pages/escape-room/how-it-works.astro
+++ b/astro/src/pages/escape-room/how-it-works.astro
@@ -55,7 +55,7 @@ import heroBg from "src/images/escape-room/shaded/puzzle-display.jpg";
     </p>
   </ThemedSection>
 
-  <ThemedSection style="subtle" theme="secondary">
+  <ThemedSection styling="subtle" theme="secondary">
     <h2 class="text-center text-info mb-4">Quotes from our Customers</h2>
     <Row baseRowCols="1" lgRowCols="3" g="3" class="align-items-stretch align-items-lg-center">
       {
@@ -75,7 +75,7 @@ import heroBg from "src/images/escape-room/shaded/puzzle-display.jpg";
     </Row>
   </ThemedSection>
 
-  <ThemedSection style="tertiary" id="faq">
+  <ThemedSection styling="tertiary" id="faq">
     <h2 class="text-info">Frequently Asked Questions</h2>
     <dl>
       <dt class="text-brand">What comes with an escape room kit?</dt>
diff --git a/astro/src/pages/escape-room/index.astro b/astro/src/pages/escape-room/index.astro
index 6285d90b..c63b260d 100644
--- a/astro/src/pages/escape-room/index.astro
+++ b/astro/src/pages/escape-room/index.astro
@@ -116,7 +116,7 @@ import woodenPuzzles from "src/images/escape-room/wooden-puzzles.png";
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection style="subtle" theme="secondary">
+  <ThemedSection styling="subtle" theme="secondary">
     <h2 class="text-center">Our build-your-own rooms.</h2>
     <p class="lead">
       Requests for the <Branding>Accessible Escape Room</Branding> have gone beyond
diff --git a/astro/src/pages/escape-room/our-story.astro b/astro/src/pages/escape-room/our-story.astro
index f1944881..5b5963bc 100644
--- a/astro/src/pages/escape-room/our-story.astro
+++ b/astro/src/pages/escape-room/our-story.astro
@@ -68,7 +68,7 @@ import heroBg from "src/images/escape-room/shaded/puzzle-display.jpg";
       </FlexColumn>
     </ThemedSection>
 
-    <ThemedSection theme="secondary" style="subtle">
+    <ThemedSection theme="secondary" styling="subtle">
       <FlexColumn
         lgReverse gap="5" class="justify-content-lg-between align-items-center"
       >
diff --git a/astro/src/pages/escape-room/themes/[id].astro b/astro/src/pages/escape-room/themes/[id].astro
index e4329eba..f065a149 100644
--- a/astro/src/pages/escape-room/themes/[id].astro
+++ b/astro/src/pages/escape-room/themes/[id].astro
@@ -112,11 +112,11 @@ import ThemedSection from "@components/ThemedSection.astro";
     </Row>
   </ThemedSection>
   <div class="local-wrapper">
-    <ThemedSection {theme} style="subtle">
+    <ThemedSection {theme} styling="subtle">
       <Content {components} />
     </ThemedSection>
   </div>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class={`text-${theme}-emphasis`}>This Escape Room Kit includes:</h2>
     <dl>
       <dt class="text-brand">A List of Required Materials</dt>
diff --git a/astro/src/pages/escape-room/themes/index.astro b/astro/src/pages/escape-room/themes/index.astro
index ff6f095f..7ab0c3de 100644
--- a/astro/src/pages/escape-room/themes/index.astro
+++ b/astro/src/pages/escape-room/themes/index.astro
@@ -39,7 +39,7 @@ const rooms = sortBy(
     </h1>
   </Hero>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="display-4 text-dark-emphasis text-center mb-4">Themes</h2>
     <Row
       baseRowCols="1" lgRowCols="2" g="4"
diff --git a/astro/src/pages/evaluations/index.astro b/astro/src/pages/evaluations/index.astro
index c8f66764..c221c87f 100644
--- a/astro/src/pages/evaluations/index.astro
+++ b/astro/src/pages/evaluations/index.astro
@@ -58,7 +58,7 @@ import ShadowBoxSection from "@components/ShadowBoxSection.astro";
     </div>
   </Hero>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="display-4 mb-3">
       Are you reaching <strong>everyone</strong> in your community?
     </h2>
@@ -140,7 +140,7 @@ import ShadowBoxSection from "@components/ShadowBoxSection.astro";
       </ThemedBox>
       <ThemedBox
         theme="primary"
-        style="subtle"
+        styling="subtle"
         text={true}
         border={1}
         class="d-flex flex-column justify-content-between col-10 col-lg-5 shadow rounded"
@@ -217,7 +217,7 @@ import ShadowBoxSection from "@components/ShadowBoxSection.astro";
     </Row>
   </ShadowBoxSection>
 
-  <ThemedSection id="request" theme="secondary" style="subtle" text={true}>
+  <ThemedSection id="request" theme="secondary" styling="subtle" text={true}>
     <h2 class="display-4"><strong>Request</strong> an accessibility evaluation.</h2>
     <GoogleForm
       id="info-form"
diff --git a/astro/src/pages/globa11y/index.astro b/astro/src/pages/globa11y/index.astro
index e98b08ce..2199c3af 100644
--- a/astro/src/pages/globa11y/index.astro
+++ b/astro/src/pages/globa11y/index.astro
@@ -45,7 +45,7 @@ import { Icon } from "astro-icon/components";
       </p>
     </div>
   </Hero>
-  <ThemedSection theme="secondary" style="subtle">
+  <ThemedSection theme="secondary" styling="subtle">
     <h2>Our Mission</h2>
     <p>
       Through <Branding>globa11y</Branding>, we empower low-income people with
@@ -65,7 +65,7 @@ import { Icon } from "astro-icon/components";
       barriers and building a future where inclusion drives innovation.
     </p>
   </ThemedSection>
-  <ThemedSection theme="primary" style="subtle">
+  <ThemedSection theme="primary" styling="subtle">
     <h2>Current Activities</h2>
     <p>
       <Branding>globa11y</Branding> is currently in its <strong
@@ -78,7 +78,7 @@ import { Icon } from "astro-icon/components";
       globa11y's future while directly supporting meaningful change
     </p>
   </ThemedSection>
-  <ThemedSection theme="secondary" style="subtle">
+  <ThemedSection theme="secondary" styling="subtle">
     <h2>Who We Are</h2>
     <p>
       <Branding>globa11y</Branding>, an initiative of <Branding
diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro
index ae0cc6cd..b8f7054b 100644
--- a/astro/src/pages/index.astro
+++ b/astro/src/pages/index.astro
@@ -73,7 +73,7 @@ const metadata: PageMetadata = {
     </Fragment>
   </Hero>
 
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <h2 class="display-3">What we <strong>believe</strong>.</h2>
     <FlexColumn
       xlFlexRow class="justify-content-xl-evenly align-items-center"
@@ -119,7 +119,7 @@ const metadata: PageMetadata = {
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <FlexColumn
       xlReverse gap="4" class="justify-content-xl-between align-items-xl-center"
     >
@@ -156,7 +156,7 @@ const metadata: PageMetadata = {
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection theme="secondary" style="subtle">
+  <ThemedSection theme="secondary" styling="subtle">
     <h2 class="display-3">Our <strong>services</strong>.</h2>
     <FlexColumn
       xlFlexRow gap="4" class="py-3 justify-content-lg-evenly justify-content-xl-center text-primary"
@@ -274,7 +274,7 @@ const metadata: PageMetadata = {
     </p>
   </ThemedSection>
 
-  <ThemedSection style="tertiary" id="journey">
+  <ThemedSection styling="tertiary" id="journey">
     <h2 class="display-4 mb-4">
       Start your organization's <strong>disability-inclusion</strong> journey.
     </h2>
diff --git a/astro/src/pages/join-us/_sponsor.astro b/astro/src/pages/join-us/_sponsor.astro
index 811ad80a..17f374a8 100644
--- a/astro/src/pages/join-us/_sponsor.astro
+++ b/astro/src/pages/join-us/_sponsor.astro
@@ -21,7 +21,7 @@ const crumbs = [
 ---
 
 <Layout {title} {crumbs} {metadata}>
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <p class="display-5">Sponsor information coming soon.</p>
   </ThemedSection>
 </Layout>
diff --git a/astro/src/pages/join-us/commitment-form.astro b/astro/src/pages/join-us/commitment-form.astro
index b2c98294..7f89b6c7 100644
--- a/astro/src/pages/join-us/commitment-form.astro
+++ b/astro/src/pages/join-us/commitment-form.astro
@@ -36,7 +36,7 @@ const crumbs: Breadcrumbs = [
   <ImageHeading image="team" slot="header">
     Volunteer <strong>Commitment</strong> Form
   </ImageHeading>
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <GoogleForm
       id="commitmentForm"
       key="AKfycbwoyy1tGaNv7-r8HJkA8SoWlKF7tCIynkbUOxQAM4adtK3eKHqwUcksLD-Fj1fRPw"
diff --git a/astro/src/pages/join-us/index.astro b/astro/src/pages/join-us/index.astro
index ce6f70f7..fbd38317 100644
--- a/astro/src/pages/join-us/index.astro
+++ b/astro/src/pages/join-us/index.astro
@@ -57,7 +57,7 @@ const metadata: PageMetadata = {
     </Fragment>
   </Hero>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <FlexColumn
       lgFlexRow gap="5" class="container justify-content-xl-between"
     >
@@ -70,7 +70,7 @@ const metadata: PageMetadata = {
       <ThemedColumn
         lg="6"
         theme="info"
-        style="subtle"
+        styling="subtle"
         class="my-auto rounded shadow"
       >
         <Quote q="kindness" />
diff --git a/astro/src/pages/join-us/loca11y-interview.astro b/astro/src/pages/join-us/loca11y-interview.astro
index d59faeed..706e87e9 100644
--- a/astro/src/pages/join-us/loca11y-interview.astro
+++ b/astro/src/pages/join-us/loca11y-interview.astro
@@ -52,7 +52,7 @@ const crumbs: Breadcrumbs = [
     </FlexColumn>
   </div>
 
-  <ThemedSection id="overview" style="tertiary">
+  <ThemedSection id="overview" styling="tertiary">
     <h2 class="display-4">Overview</h2>
     <p class="col lead">
       Thank you for your assistance to help our local communities become more
@@ -80,7 +80,7 @@ const crumbs: Breadcrumbs = [
     </Column>
   </ThemedSection>
 
-  <ThemedSection id="form" style="secondary">
+  <ThemedSection id="form" styling="secondary">
     <h2 class="display-4 text-info-emphasis">
       Interview <strong>Form</strong>
     </h2>
diff --git a/astro/src/pages/mutua11y/index.astro b/astro/src/pages/mutua11y/index.astro
index 52d1f803..a9dfa104 100644
--- a/astro/src/pages/mutua11y/index.astro
+++ b/astro/src/pages/mutua11y/index.astro
@@ -89,7 +89,7 @@ const contributors = await getCollection("collaborators", ({ data }) => {
     </Fragment>
   </Hero>
 
-  <ThemedSection theme="secondary" style="subtle">
+  <ThemedSection theme="secondary" styling="subtle">
     <FlexColumn
       xlFlexRow gap="4" class="justify-content-xl-between align-items-xl-center"
     >
@@ -108,7 +108,7 @@ const contributors = await getCollection("collaborators", ({ data }) => {
       <ThemedColumn
         xl="5"
         theme="primary"
-        style="subtle"
+        styling="subtle"
         border={1}
         class="text-start p-4 pb-0 shadow rounded"
       >
@@ -117,7 +117,7 @@ const contributors = await getCollection("collaborators", ({ data }) => {
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <FlexColumn
       xlReverse gap="4" class="justify-content-xl-between align-items-xl-center"
     >
@@ -142,7 +142,7 @@ const contributors = await getCollection("collaborators", ({ data }) => {
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <h2 class="display-3">How can I <strong>be involved</strong>?</h2>
     <FlexColumn
       lgFlexRow gap="4" class="py-3 justify-content-lg-evenly text-primary"
diff --git a/astro/src/pages/mutua11y/mentoring.astro b/astro/src/pages/mutua11y/mentoring.astro
index 2b3c1fdd..493916e9 100644
--- a/astro/src/pages/mutua11y/mentoring.astro
+++ b/astro/src/pages/mutua11y/mentoring.astro
@@ -49,7 +49,7 @@ const partners = await getCollection("collaborators", ({ data }) =>
     About <Branding>mutua11y mentoring</Branding>
   </ImageHeading>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2>Overview</h2>
 
     <p>
@@ -139,7 +139,7 @@ const partners = await getCollection("collaborators", ({ data }) =>
       </a>
     </p>
   </ThemedSection>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2>Who Can Be A <strong>Protégé</strong>?</h2>
     We are looking for individuals who have:
     <ul>
@@ -177,7 +177,7 @@ const partners = await getCollection("collaborators", ({ data }) =>
       identity, sexual orientation, national origin, or disability status.
     </p>
   </ThemedSection>
-  <ThemedSection theme="secondary" style="subtle">
+  <ThemedSection theme="secondary" styling="subtle">
     <h2>Partners</h2>
     <CollaboratorList items={partners} />
   </ThemedSection>
diff --git a/astro/src/pages/mutua11y/workshops.astro b/astro/src/pages/mutua11y/workshops.astro
index bdb362d3..a7378d5c 100644
--- a/astro/src/pages/mutua11y/workshops.astro
+++ b/astro/src/pages/mutua11y/workshops.astro
@@ -31,7 +31,7 @@ import ExternalLink from "@components/ExternalLink.astro";
 <Layout {title} brandedTitle {crumbs} {metadata}>
   <ImageHeading image="pen-paper" slot="header">Workshops</ImageHeading>
 
-  <ThemedSection style="secondarygit status">
+  <ThemedSection styling="secondary">
     <h2>Overview</h2>
     <p>
       <a href="/"><Branding>Accessible Community</Branding></a>, in partnership
@@ -78,7 +78,7 @@ import ExternalLink from "@components/ExternalLink.astro";
       </a>
     </p>
   </ThemedSection>
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <h2>Previous Workshops</h2>
 
     <h3>Building the business case for accessibility</h3>
diff --git a/astro/src/pages/podcasts/index.astro b/astro/src/pages/podcasts/index.astro
index 78f161c1..af4ced02 100644
--- a/astro/src/pages/podcasts/index.astro
+++ b/astro/src/pages/podcasts/index.astro
@@ -66,13 +66,13 @@ import ThemedSection from "@components/ThemedSection.astro";
     <h1 class="display-3">Podcast Series</h1>
   </ImageHeading>
   <ThemedSection yPaddings={['3']}>
-    <ThemedBox theme="primary" style="subtle" border={1} padding={3} class="rounded mb-4">
+    <ThemedBox theme="primary" styling="subtle" border={1} padding={3} class="rounded mb-4">
       <div class="d-flex flex-column flex-lg-row justify-content-center column-gap-3 align-items-center pt-2">
         <p class="lead text-center">Subscribe to the <Branding>Accessible Community</Branding>&nbsp;podcast.</p>
         <SocialLinks links={toUrlMap(shows[0]!.data.links)} iconSize="1.5em" gap={2} label="Podcast Locations" />
       </div>
     </ThemedBox>
-    <ThemedBox theme="primary" style="subtle" border={1} padding={3} class="rounded">
+    <ThemedBox theme="primary" styling="subtle" border={1} padding={3} class="rounded">
       <p class="lead text-center mb-0 p-2">
         Would you like to share your experiences? <br class="d-inline d-lg-none" />
         Fill out this <a href="/podcasts/interest-form/">interest form</a>.
@@ -82,7 +82,7 @@ import ThemedSection from "@components/ThemedSection.astro";
 
   {
     shows.map((show, index) => (
-      <ThemedSection style={(index % 2) ? "tertiary" : undefined} id={show.id}>
+      <ThemedSection styling={(index % 2) ? "tertiary" : undefined} id={show.id}>
         <h2 class="pb-2 mb-4 border-bottom border-primary" set:text={show.data.title} />
         <FlexColumn
           mdReverse
@@ -118,7 +118,7 @@ import ThemedSection from "@components/ThemedSection.astro";
   }
 
   {/* Credits */}
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <h2 class="display-4">Credits and Thanks</h2>
     <h3 class="mt-4 mb-2">Contributors</h3>
     <p>Thank you to all of our staff who help make these podcasts possible.</p>
diff --git a/astro/src/pages/services/index.astro b/astro/src/pages/services/index.astro
index 07a6080e..a52df318 100644
--- a/astro/src/pages/services/index.astro
+++ b/astro/src/pages/services/index.astro
@@ -80,7 +80,7 @@ const metadata: PageMetadata = {
     </div>
   </Hero>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <Row baseRowCols="1" lgRowCols="2" class="row-gap-4 mb-3">
       {
         services.map(({ icon, name, title, text, link }) => (
@@ -219,7 +219,7 @@ const metadata: PageMetadata = {
     </p>
   </ThemedSection>
 
-  <ThemedSection id="loca11y" style="secondary">
+  <ThemedSection id="loca11y" styling="secondary">
     <h2 class="display-3" aria-hidden="true">
       <Branding no-aria>About loca11y.org</Branding>
     </h2>
@@ -253,7 +253,7 @@ const metadata: PageMetadata = {
       accessibility, rather than quality of services.
     </p>
   </ThemedSection>
-  <ThemedSection id="globa11y" theme="primary" style="subtle">
+  <ThemedSection id="globa11y" theme="primary" styling="subtle">
     <h2 class="display-3" aria-hidden="true">
       About the <Branding no-aria>globa11y pilot</Branding>
     </h2>
diff --git a/astro/src/pages/team/[tag].astro b/astro/src/pages/team/[tag].astro
index ce864e85..4f03ec71 100644
--- a/astro/src/pages/team/[tag].astro
+++ b/astro/src/pages/team/[tag].astro
@@ -63,7 +63,7 @@ import ThemedSection from "../../components/ThemedSection.astro";
 
 <Layout {title} {crumbs} {metadata}>
   <ImageHeading image="team" slot="header" set:html={heading} />
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <ul class="list-group">
       {
         teamMembers.map((sm) => (
diff --git a/astro/src/pages/team/_alumni.astro b/astro/src/pages/team/_alumni.astro
index a52a3450..56f866e5 100644
--- a/astro/src/pages/team/_alumni.astro
+++ b/astro/src/pages/team/_alumni.astro
@@ -50,7 +50,7 @@ const crumbs = [
   <ImageHeading image="team" slot="header">
     Our <strong>Alumni</strong>
   </ImageHeading>
-  <ThemedSection theme="secondary" style="subtle">
+  <ThemedSection theme="secondary" styling="subtle">
     <p class="lead container-fluid">
       The dedication and skill of our volunteer community makes
       <Branding>Accessible Community's</Branding>
diff --git a/astro/src/pages/team/partners.astro b/astro/src/pages/team/partners.astro
index 1abf040a..0d570d7b 100644
--- a/astro/src/pages/team/partners.astro
+++ b/astro/src/pages/team/partners.astro
@@ -32,7 +32,7 @@ const partners = await getCollection("collaborators", ({ data }) =>
   <ImageHeading image="team" slot="header">
     <strong>Partners</strong>
   </ImageHeading>
-  <ThemedSection theme="secondary" style="subtle">
+  <ThemedSection theme="secondary" styling="subtle">
     <p class="lead mb-5 text-center">
       Thank you to the organizations that partner with us and support our work
       in various ways.
diff --git a/astro/src/pages/team/previous.astro b/astro/src/pages/team/previous.astro
index cbdda870..12cabd46 100644
--- a/astro/src/pages/team/previous.astro
+++ b/astro/src/pages/team/previous.astro
@@ -102,7 +102,7 @@ import ThemedSection from "../../components/ThemedSection.astro";
   <ImageHeading image="team" slot="header">
     Previous <strong>Contributors</strong>
   </ImageHeading>
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <Column noDefault xxl="9" class="pb-3">
       <p class="lead">
         We sincerely appreciate the time and energy that each person listed
diff --git a/astro/src/pages/team/staff.astro b/astro/src/pages/team/staff.astro
index 7823f0ab..54df9be4 100644
--- a/astro/src/pages/team/staff.astro
+++ b/astro/src/pages/team/staff.astro
@@ -68,7 +68,7 @@ const crumbs: Breadcrumbs = [
   <ImageHeading image="team" slot="header">
     Our <strong>Staff</strong>
   </ImageHeading>
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <p class="lead container-fluid">
       The dedication and skill of our volunteer community makes
       <Branding>Accessible Community's</Branding>
diff --git a/astro/src/pages/tips/archive.astro b/astro/src/pages/tips/archive.astro
index 7ea0c683..76198130 100644
--- a/astro/src/pages/tips/archive.astro
+++ b/astro/src/pages/tips/archive.astro
@@ -71,7 +71,7 @@ const crumbs: Breadcrumbs = [
     </Row>
   </ThemedSection>
 
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <TipLicense />
   </ThemedSection>
 </Layout>
diff --git a/astro/src/pages/tips/index.astro b/astro/src/pages/tips/index.astro
index 7fc2e4a9..87037843 100644
--- a/astro/src/pages/tips/index.astro
+++ b/astro/src/pages/tips/index.astro
@@ -46,7 +46,7 @@ const crumbs: Breadcrumbs = [
     Accessibility <strong>Tip</strong>&nbsp;of the <strong>Week</strong>
   </ImageHeading>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="display-3">Making accessibility <strong>simpler</strong>.</h2>
     <FlexColumn
       lgFlexRow gap="4" class="justify-content-lg-evenly align-items-lg-center py-2"
@@ -131,7 +131,7 @@ const crumbs: Breadcrumbs = [
   </ThemedSection>
   */}
 
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <TipLicense />
   </ThemedSection>
 </Layout>
diff --git a/astro/src/pages/volunteer.astro b/astro/src/pages/volunteer.astro
index 3c746eed..b40e1285 100644
--- a/astro/src/pages/volunteer.astro
+++ b/astro/src/pages/volunteer.astro
@@ -83,7 +83,7 @@ const orderedTeams = sortBy(teams, ["data.name"]);
     </Fragment>
   </Hero>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <FlexColumn
       lgFlexRow gap="4" class="justify-content-lg-between align-items-center"
     >
@@ -139,7 +139,7 @@ const orderedTeams = sortBy(teams, ["data.name"]);
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection id="teams" style="secondary">
+  <ThemedSection id="teams" styling="secondary">
     <h2 class="display-3">Volunteer <span class="fw-bold">Teams</span></h2>
     <div>
       <p>
@@ -182,7 +182,7 @@ const orderedTeams = sortBy(teams, ["data.name"]);
     </Row>
   </ThemedSection>
 
-  <ThemedSection id="form" style="tertiary">
+  <ThemedSection id="form" styling="tertiary">
     <h2 class="display-3 mb-4 text-info-emphasis">
       Volunteer <strong>Interest Form</strong>
     </h2>