diff --git a/packages/stacks-docs/_includes/layouts/home.html b/packages/stacks-docs/_includes/layouts/home.html
index 207fe405cc..c056ac3616 100644
--- a/packages/stacks-docs/_includes/layouts/home.html
+++ b/packages/stacks-docs/_includes/layouts/home.html
@@ -194,7 +194,7 @@ <h1 class="flex--item fw-bold mln2 mb0 fs-display1 lh-xs stacks-title">Stacks</h
         </div>
     </header>
     <div class="flex--item bg-black-100 p64 sm:pt24 sm:pl24 sm:pr24 sm:pb24">
-        <nav class="d-grid grid__4 lg:grid__2 sm:grid__1 g16 w100 wmx12 mx-auto" aria-label="Global">
+        <nav class="d-grid grid__3 sm:grid__1 g16 w100 wmx12 mx-auto" aria-label="Global">
             <a class="d-flex s-card p16 bs-sm bar-md h:bs-md sm:ai-center" href="{{ "/product/develop/using-stacks" | url }}">
                 <div class="flex--item fc-theme-primary-400 mr16">
                     {% spot "Puzzle" %}
@@ -216,23 +216,10 @@ <h1 class="flex--item fw-bold mln2 mb0 fs-display1 lh-xs stacks-title">Stacks</h
                 </div>
             </a>
 
-            <a class="d-flex s-card p16 bs-sm bar-md h:bs-md sm:ai-center" href="{{ "/content/guidelines/principles" | url }}">
-                <div class="flex--item fc-theme-primary-400 mr16">
-                    {% spot "DocumentAlt" %}
-                </div>
-                <div class="flex--item">
-                    <div class="fw-bold fs-body3 fc-theme-primary-400 mb2">Content</div>
-                    <div class="fc-medium">Principles and tactics for writing at Stack Overflow.</div>
-                </div>
-            </a>
-
-            <a class="d-flex s-card p16 bs-sm bar-md h:bs-md sm:ai-center" href="{{ "/brand/principles" | url }}">
-                <div class="flex--item fc-theme-primary-400 mr16">
-                    {% spot "Theme" %}
-                </div>
+            <a class="d-flex bg-orange-100 bc-theme-primary-500 s-card p16 bs-sm bar-md h:bs-md sm:ai-center" href="https://alpha.stackoverflow.design">
                 <div class="flex--item">
-                    <div class="fw-bold fs-body3 fc-theme-primary-400 mb2">Brand</div>
-                    <div class="fc-medium">Visual patterns and guidelines for Stack Overflow’s brand.</div>
+                    <div class="fw-bold fs-body3 fc-theme-primary-400 mb2">Looking for brand & content?</div>
+                    <div class="fc-medium">Check out our refreshed brand guidelines, including tone of voice, Stack Sans typeface, and logo files.</div>
                 </div>
             </a>
         </nav>
diff --git a/packages/stacks-docs/brand/colors.html b/packages/stacks-docs/brand/colors.html
deleted file mode 100644
index 72e8c837eb..0000000000
--- a/packages/stacks-docs/brand/colors.html
+++ /dev/null
@@ -1,153 +0,0 @@
----
-layout: page
-title: Colors
-description: See the <a href="/product/foundation/colors/">Product</a> section for colors when building with Stacks. While there is some cross-over with the Product colors, using Stacks color classes will mean they adjust depending on context (e.g., dark mode)
----
-<section class="stacks-section">
-    {% header "h2", "Primary" %}
-    <div class="d-flex flex__allitems4 g32 ff-row-wrap">
-        <div class="flex--item s-card wmn2 bs-sm p0 mb24">
-            <div class="h96 bg-orange-400 mln1 mrn1 mtn1 btr-sm"></div>
-            <div class="p12">
-                <h3 class="fs-body3 lh-sm fc-dark mb12">Orange</h3>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Hex</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">#F48024</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Pantone</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">Orange 021 U</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 pt8 pb6 d-flex">
-                    <span>Stacks</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">orange-400</span>
-                </div>
-            </div>
-        </div>
-        <div class="flex--item s-card wmn2 bs-sm p0 mb24">
-            <div class="h96 mln1 mrn1 mtn1 btr-sm ba" style="background:#242729"></div>
-            <div class="p12">
-                <h3 class="fs-body3 lh-sm fc-dark mb12">Black</h3>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Hex</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">#242729</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Pantone</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">Black 6 U</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 pt8 pb6 d-flex">
-                    <span>Stacks</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">black-600</span>
-                </div>
-            </div>
-        </div>
-        <div class="flex--item s-card wmn2 bs-sm p0 mb24">
-            <div class="h96 mln1 mrn1 mtn1 btr-sm" style="background:#BBC0C4"></div>
-            <div class="p12">
-                <h3 class="fs-body3 lh-sm fc-dark mb12">Gray</h3>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Hex</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">#BBC0C4</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Pantone</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">442 U</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 pt8 pb6 d-flex">
-                    <span>Stacks</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">black-300</span>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Secondary" %}
-    <div class="d-flex flex__allitems4 g32 ff-row-wrap">
-        <div class="flex--item s-card wmn2 bs-sm p0 mb24">
-            <div class="h96 mln1 mrn1 mtn1 btr-sm" style="background:#0095FF"></div>
-            <div class="p12">
-                <h3 class="fs-body3 lh-sm fc-dark mb12">Blue</h3>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Hex</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">#0095FF</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Pantone</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">2995 U</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 pt8 pb6 d-flex">
-                    <span>Stacks</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">blue-400</span>
-                </div>
-            </div>
-        </div>
-        <div class="flex--item s-card wmn2 bs-sm p0 mb24">
-            <div class="h96 mln1 mrn1 mtn1 btr-sm" style="background:#FFB500"></div>
-            <div class="p12">
-                <h3 class="fs-body3 lh-sm fc-dark mb12">Yellow</h3>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Hex</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">#FFB500</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Pantone</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">109 U</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 pt8 pb6 d-flex">
-                    <span>Stacks</span>
-                    <span class="fc-black-300 ff-mono ml-auto py1">n/a</span>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Verticals" %}
-    <div class="d-flex flex__allitems4 g32 ff-row-wrap">
-        <div class="flex--item s-card wmn2 bs-sm p0 mb24">
-            <div class="h96 mln1 mrn1 mtn1 btr-sm" style="background:#2B2D6E"></div>
-            <div class="p12">
-                <h3 class="fs-body3 lh-sm fc-dark mb12">Teams Purple</h3>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Hex</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">#2B2D6E</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Pantone</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">2105 U</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 pt8 pb6 d-flex">
-                    <span>Stacks</span>
-                    <span class="fc-black-300 ff-mono ml-auto py1">n/a</span>
-                </div>
-            </div>
-        </div>
-        <div class="flex--item s-card wmn2 bs-sm p0 mb24">
-            <div class="h96 mln1 mrn1 mtn1 btr-sm" style="background:#075ec3"></div>
-            <div class="p12">
-                <h3 class="fs-body3 lh-sm fc-dark mb12">Advertising Blue</h3>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Hex</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">#075EC3</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 py8 d-flex">
-                    <span>Pantone</span>
-                    <span class="stacks-code js-clipboard h:bg-black-225 c-pointer ml-auto">2935 U</span>
-                </div>
-                <div class="fs-body1 fc-medium bt bc-black-150 pt8 pb6 d-flex">
-                    <span>Stacks</span>
-                    <span class="fc-black-300 ff-mono ml-auto py1">n/a</span>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<!-- Additional javascript -->
-<script src="{{ "/assets/dist/entry.brand.colors.js" | url }}" defer></script>
-
-{% include 'toast-clipboard.html' %}
diff --git a/packages/stacks-docs/brand/copywriting/concepts.html b/packages/stacks-docs/brand/copywriting/concepts.html
deleted file mode 100644
index 7fdbb6fc83..0000000000
--- a/packages/stacks-docs/brand/copywriting/concepts.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-layout: page
-title: Concepts guidelines
-description: Quick guidelines for how to identify and refer to different conceptual units present on Stack Overflow
----
-
-<section class="stacks-section">
-    {% header "h2", "Post scores" %}
-    <ul class="stacks-list">
-        <li>Questions, answers, and other types of Posts have <em>scores</em>.</li>
-        <li>A post’s <em>score</em> is calculated by subtracting the total number of downvotes from the total number of upvotes.</li>
-        <li>In almost all cases when referring to the sum of votes, we will use the term <em>score</em>.</li>
-        <li>
-            Use of the  term <em>votes</em> to refer to the post’s score is only acceptable in cases where we need to present the data in the format 
-            <code>{ScoreValue} votes</code> (as is done in the <a href="/product/components/post-summary/">post summary component</a>). In this case, "votes" 
-            stands in for the "balance of votes (up minus down)" on the post.
-        </li>
-        <li><em>Upvote</em> and <em>downvote</em> (one word, no hyphen) should be used when referring to the individual types of votes cast on a post.</li>
-        <li>While the unit for score is obstensibly "points", use of this unit in reference to score or votes is not encouraged.</li>
-    </ul>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Incorrect</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Correct</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Highest voted posts</td>
-                <td>Highest scored posts</td>
-            </tr>
-            <tr>
-                <td>Total number of votes for this answer</td>
-                <td>Total score for this answer</td>
-            </tr>
-            <tr>
-                <td>Only top voted answers are eligible</td>
-                <td>Only top scored answers are eligible</td>
-            </tr>
-            <tr>
-                <td colspan="2" class="ta-center fw-bold">When in the Post Summary only:</td>
-            </tr>
-            <tr>
-                <td>8 score</td>
-                <td rowspan="3" class="ta-center va-middle bb bbw1 bc-black-225">8 votes</td>
-            </tr>
-            <tr>
-                <td>Score: 8</td>
-            </tr>
-            <tr>
-                <td>8 points</td>
-            </tr>
-        </tbody>
-    </table>
-</section>
diff --git a/packages/stacks-docs/brand/copywriting/naming.html b/packages/stacks-docs/brand/copywriting/naming.html
deleted file mode 100644
index 58fd574294..0000000000
--- a/packages/stacks-docs/brand/copywriting/naming.html
+++ /dev/null
@@ -1,284 +0,0 @@
----
-layout: page
-title: Naming guidelines
-description: Quick guidelines for using Stack Overflow and our product names.
----
-
-<section class="stacks-section">
-    {% header "h2", "Stack Overflow" %}
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Incorrect</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Correct</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Stackoverflow</td>
-                <td rowspan="3" class="va-middle ta-center bb bc-black-225">Stack Overflow</td>
-            </tr>
-            <tr>
-                <td>stackoverflow</td>
-            </tr>
-            <tr>
-                <td>StackOverflow</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h2", "Stack Overflow for Teams" %}
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Incorrect</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Correct</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Stack Overflow Teams</td>
-                <td rowspan="4" class="va-middle ta-center bb bc-black-225">Stack Overflow for Teams</td>
-            </tr>
-            <tr>
-                <td>Teams</td>
-            </tr>
-            <tr>
-                <td>Stack Overflow for Business</td>
-            </tr>
-            <tr>
-                <td>Stack Overflow for Enterprise</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Specific plans" %}
-
-    {% header "h4", "Do" %}
-
-    <ul class="stacks-list">
-        <li>Use “Free, Basic, Business, Enterprise” once you’re talking about specifics.</li>
-        <li>Use ‘Private Q&A’ as a descriptor to refer to our product suite on stackoverflow.com or with an audience that we’re certain is aware of our special sauces – our Q&A format.</li>
-        <li>Once discussing in-depth, use the terms: <em>Stack Overflow for Teams</em>, <em>Stack Overflow Business</em>, <em>Stack Overflow Enterprise</em>. Note: we won’t reference the base tier as <em>Stack Overflow Basic</em>.</li>
-    </ul>
-
-    {% header "h4", "Don’t" %}
-
-    <ul class="stacks-list mb64">
-        <li>Don’t use “for” when referencing each tier. It is simply <strong>Free</strong>, <strong>Basic</strong>, <strong>Business</strong>, and <strong>Enterprise</strong></li>
-        <li>Don’t append <strong>Free</strong>, <strong>Basic</strong>, <strong>Business</strong>, or <strong>Enterprise</strong> to the end of Stack Overflow for Teams</li>
-        <li>Don’t use ‘Private Q&A’ when referring to our product suite for marketing and promotional efforts outside of our core stackoverflow.com audience.</li>
-    </ul>
-
-    {% header "h3", "Knowledge Reuse" %}
-
-    <p class="stacks-copy">“Knowledge reuse” is a term we use frequently in reference to Stack Overflow for Teams as something it facilitates. It can be lowercase the majority of the time, except when referring to our <a href="https://stackoverflowteams.com/c/stack-overflow/questions/12132" title="Employees only have access to this">{% icon "Lock", "va-middle", "14" %} proprietary metric</a>, in which case use “Knowledge Reuse”.</p>
-
-    {% header "h4", "Examples" %}
-
-    <ul class="stacks-list">
-        <li>“Unlike simply sharing information, <strong>knowledge reuse</strong> takes collaboration a step further by creating a system where ideas are shared, quickly accessed, improved upon, and then put back into the system.”</li>
-        <li>“We have calculated your <strong>Knowledge Reuse</strong> metric as…”</li>
-    </ul>
-
-    {% header "h3", "Communities & Community" %}
-
-    <p class="stacks-copy">“Communities” and “Community” are capitalized when referring to the Stack Overflow for Teams feature.</p>
-
-    {% header "h4", "Examples" %}
-
-    <ul class="stacks-list">
-        <li>With <strong>Communities</strong> you can help your teammates know what’s trending, who’s sharing knowledge, and where there’s opportunity to contribute or learn around specific areas of interest.</li>
-        <li>Subscribe to a <strong>Community</strong> and get notifications for new questions and answers.</li>
-    </ul>
-
-    {% header "h2", "Collectives on Stack Overflow" %}
-
-    {% header "h3", "Trade Mark" %} 
-
-    <ul class="stacks-list">
-        <li>We have trademarked “Collectives™ on Stack Overflow”.</li>
-        <li>Apply the trademark ™ symbol to the first instance of “Collectives™ on Stack Overflow” in a document, communication, or marketing materials/assets.</li>
-        <li>If there is a headline/title slide, use the symbol in the first instance of the product name in the <strong>body copy</strong> of your document, in addition to using the ™  in the <strong>headline/title</strong>.</li>
-        <li>Where possible, use the unicode character for trade mark:</li>
-    </ul>
-
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td><code class="stacks-code">&lt;sup&gt;TM&lt;/sup&gt;</code></td>
-                <td rowspan="2" class="va-middle ta-center bb bc-black-225"><code class="stacks-code">™</code></td>
-            </tr>
-            <tr>
-                <td><code class="stacks-code">TM</code></td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "…on Stack Overflow" %} 
-
-    <ul class="stacks-list">
-        <li>Use … “on Stack Overflow” sparingly.</li>
-        <li>Don’t use “…on Stack Overflow” unless there’s a lack of surrounding context and we need the audience to know it’s associated with Stack Overflow.</li>
-        <li>Adding “…on Stack Overflow” doesn’t add clarity in the context of other Stack Overflow products and features.</li>
-    </ul>
-
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} When to use “on Stack Overflow”</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>You’re writing “Collectives™ on Stack Overflow” for the first time on a page</td>
-            </tr>
-            <tr>
-                <td>When it should be differentiated from other external products or features </td>
-            </tr>
-            <tr>
-                <td>When it needs to be associated with Stack Overflow </td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Collectives vs. collectives" %} 
-
-    <p class="stacks-copy">When do you capitalize the C in “Collective(s)”?</p>
-
-    <ul class="stacks-list">
-        <li>Always capitalize “Collectives” and “Collective” when you are using them as proper nouns.</li>
-        <li>If you’re just generally referring to a collective, even if it comes right after a company name, it will always be lowercase.
-            <ul>
-                <li>We can see in Audiobubble’s collective that there are…</li>
-                <li>Google Cloud has a collective for its biggest advocates…</li>
-            </ul>
-        </li>
-        <li>Even if you’re putting “Join a collective” on a button or in a headline, it will be lowercase unless it is directly following the name of a company.</li>
-    </ul>
-
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>join the Google Cloud <strong class="fc-red-400">collective</strong></td>
-                <td>join the Google Cloud <strong class="fc-green-400">Collective</strong></td>
-            </tr>
-            <tr>
-                <td>join an <strong class="fc-red-400">Collective</strong></td>
-                <td>join a <strong class="fc-green-400">collective</strong></td>
-            </tr>
-            <tr>
-                <td>A company’s <strong class="fc-red-400">Collective</strong> page will be located at the top right of the screen</td>
-                <td>A company’s <strong class="fc-green-400">collective</strong> page will be located at the top right of the screen</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h2", "Capitalization" %}
-    
-    {% header "h3", "Headers, subheaders, and tabs" %}
-    
-    <ul class="stacks-list">
-        <li>Do follow the <a href="/content/guidelines/grammar-and-mechanics/#use-sentence-casing">capitalization rules</a> for headers, sub-headers, and menu tabs.</li>
-        <li>Use sentence case for all headings (Sentence case involves capitalizing the first word, first word of a subtitle, and all proper nouns.)</li>
-        <li>Capitalize the first word of a heading</li>
-        <li>Capitalize proper or trademarked nouns (names of products, people, or specific companies)
-        <li>Lowercase for everything else</li>
-    </ul>
-    
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>User Roles</td>
-                <td>User roles</td>
-            </tr>
-        </tbody>
-    </table>
-    
-    {% header "h3", "Product and feature names" %}
-    
-    <p class="stacks-copy">
-        If a product or feature isn’t unique to Stack Overflow, <strong>don’t</strong> capitalize it (blogs, pages, etc.) If it is unique to Stack Overflow as its own product, <strong>do</strong> capitalize it.
-    </p>
-    
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>As soon as it’s ready, put your <strong class="fc-red-400">Blog Post</strong> up</td>
-                <td>As soon as it’s ready, put your <strong class="fc-green-400">blog post</strong> up</td>
-            </tr>
-            <tr>
-                <td>content health</td>
-                <td>Content Health</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h4", "Articles vs. articles" %}
-
-    <ul class="stacks-list">
-        <li>This can be confusing, because we have a feature called “Articles,” under which you may write a how-to guide, or an announcement, or indeed, an article. So this one depends on the context.</li>
-        <li>If you’re referring to a generic article, it’s lowercase.</li>
-        <li>When in doubt, ask, “Is this referring to the specific website section (Articles), or to the thing (articles)?”</li>
-        <li>If you’re talking about the Articles section of your collective on Stack Overflow, you’ll call it “Articles.”</li>
-    </ul>
-
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>I’m writing an article and then I’m going to put it in our team’s <strong class="fc-red-400">articles</strong> section</td>
-                <td>I’m writing an article and then I’m going to put it in our team’s <strong class="fc-green-400">Articles</strong> section</td>
-            </tr>
-            <tr>
-                <td>In <strong class="fc-red-400">articles</strong>, you can find how-to guides, blog posts, and articles</td>
-                <td>In <strong class="fc-green-400">Articles</strong>, you can find how-to guides, blog posts, and articles</td>
-            </tr>
-            <tr>
-                <td>Create articles</td>
-                <td>Create Articles</td>
-            </tr>
-            <tr>
-                <td>Pinned articles</td>
-                <td>Pinned Articles</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h4", "User roles" %} 
-    
-    <p class="stacks-copy">
-        Capitalize user roles, no matter where they are and in what context.
-    </p>
-
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>employees</td>
-                <td>Employees</td>
-            </tr>
-            <tr>
-                <td>Recommended members</td>
-                <td>Recommended Members</td>
-            </tr>
-        </tbody>
-    </table>
-
-</section>
\ No newline at end of file
diff --git a/packages/stacks-docs/brand/data-visualization.html b/packages/stacks-docs/brand/data-visualization.html
deleted file mode 100644
index 4aa2ae98e3..0000000000
--- a/packages/stacks-docs/brand/data-visualization.html
+++ /dev/null
@@ -1,269 +0,0 @@
----
-layout: page
-title: Data visualization
-description: Tell a story with data visualizations. Use this section for guidance and examples.
----
-
-<section class="stacks-section">
-    {% header "h2", "Guidelines" %}
-    <p class="stacks-copy">Why use data visualization? Charts, graphs, and visuals draw attention to the data. While raw data can be hard to understand, data visualization presents a compelling story that answers a specific question and can inspire action. When presenting data through visualizations, keep the following principles in mind:</p>
-
-    {% header "h3", "Focus" %}
-    <p class="stacks-copy">Designs should immediately draw the viewer’s eye to the most important information. That’s why the most important data should have the highest contrast. As you design, consider how much attention the data warrants—is it the main focus or just a supporting asset?</p>
-
-    {% header "h3", "Explicit" %}
-    <p class="stacks-copy">Designs should be easy to understand and accessible to all. Always use real data that’s represented accurately. Consider what range your data set has and how it will scale with more or fewer data points.</p>
-
-    {% header "h3", "Purpose" %}
-    <p class="stacks-copy">Don’t add extraneous data or ornamentation. Answer a single question with clear and accurate information. What’s the story you’re trying to tell?</p>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Chart types" %}
-    <p class="stacks-copy">There are many types of charts and graphs, so when you’re designing one, think first about its function. For example: are you comparing something? Or are you highlighting a trend over a long period of time? Below, we’ve grouped several types of charts according to their recommended functions (You’ll see some types in multiple groups). Before you start designing, determine what you’d like to communicate to your audience, and use that to guide you in selecting the appropriate chart or graph type.</p>
-
-    {% header "h3", "Comparison" %}
-    <p class="stacks-copy">This is the most common type of chart. Compare two or more values within two different parameters as the framework. This chart type helps to show differences/similarities between items and give context to the impact of those differences/similarities.</p>
-
-    <div class="d-flex my24 g24 ff-row-wrap flex__allitems3 fc-black-400 ta-center">
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96"><g fill="currentColor"><path clip-rule="evenodd" d="m4 0h-4v92 4h4 92v-4h-92z" fill-rule="evenodd"/><path d="m11 47h22v39h-22z"/><path d="m67 58h22v28h-22z" fill-opacity=".2"/><path d="m39 12h22v74h-22z" fill-opacity=".6"/></g></svg>
-            <div class="mt12">Bar chart</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96"><g fill="currentColor"><circle cx="21.5" cy="69.5" r="6.5"/><ellipse cx="36" cy="53.5" fill-opacity=".2" rx="10" ry="9.5"/><circle cx="57" cy="56" r="7"/><circle cx="72.5" cy="34.5" fill-opacity=".6" r="14.5"/><path clip-rule="evenodd" d="m4 0h-4v92 4h4 92v-4h-92z" fill-rule="evenodd"/></g></svg>
-            <div class="mt12">Bubble chart</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96"><g stroke="currentColor"><path d="m24 33.5-9 35 34-3.5 34.5 2.5-20-28-14.5-8.5z" fill="currentColor" fill-opacity=".2" stroke-width="2"/><path d="m13.7609 27.6547 35.2391-20.3453 35.2391 20.3453v40.6906l-35.2391 20.3453-35.2391-20.3453z" stroke-width="4"/><g stroke-opacity=".2" stroke-width="2"><path d="m24.0192 33.5773 24.9808-14.4226 24.9808 14.4226v28.8453l-24.9808 14.4227-24.9808-14.4227z"/><path d="m34.4115 39.5773 14.5885-8.4226 14.5885 8.4226v16.8453l-14.5885 8.4227-14.5885-8.4227z"/></g></g></svg>
-            <div class="mt12">Radar chart</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96"><g fill="currentColor"><path clip-rule="evenodd" d="m4 0h-4v92 4h4 92v-4h-92z" fill-rule="evenodd"/><path d="m11 31h5v55h-5z"/><path d="m40 31h5v55h-5z"/><path d="m70 51h5v35h-5z"/><g fill-opacity=".6"><path d="m25 48h5v38h-5z"/><path d="m54 58h5v28h-5z"/><path d="m84 40h5v46h-5z"/></g><path d="m18 58h5v28h-5z" fill-opacity=".2"/><path d="m47 12h5v74h-5z" fill-opacity=".2"/><path d="m77 34h5v52h-5z" fill-opacity=".2"/></g></svg>
-            <div class="mt12">Grouped bar chart</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96" ><g fill="currentColor"><path clip-rule="evenodd" d="m4 0h-4v92 4h4 92v-4h-92z" fill-rule="evenodd"/><path d="m11 47h22v39h-22z"/><path d="m11 17h22v12h-22z" fill-opacity=".2"/><path d="m11 32h22v12h-22z" fill-opacity=".6"/><path d="m39 71h22v15h-22z"/><path d="m39 42h22v7h-22z" fill-opacity=".2"/><path d="m39 52h22v16h-22z" fill-opacity=".6"/><path d="m67 59h22v27h-22z"/><path d="m67 30h22v7h-22z" fill-opacity=".2"/><path d="m67 40h22v16h-22z" fill-opacity=".6"/></g></svg>
-            <div class="mt12">Stacked bar graph</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96" ><g fill="currentColor"><g fill-opacity=".2"><path d="m57.8 52.3377-15.6-11.2208-15.6 8.4156-15.6 16.5194v19.9481h78v-48l-15.6 3.1169z"/><path d="m56.8182 62.1034-15.2727-8.6896-15.2728 18-15.2727 4.0345v10.5517h78v-36l-16.9091 9.6207z"/><path d="m56.8182 72.5185-15.2727 1.9259-15.2728 7.7037h-15.2727v3.8519h78v-26l-16.9091 9.9506z"/></g><path clip-rule="evenodd" d="m4 0h-4v92 4h4 92v-4h-92z" fill-rule="evenodd"/></g></svg>
-            <div class="mt12">Stacked area graph</div>
-        </div>
-    </div>
-
-    {% header "h3", "Part-to-a-whole" %}
-    <p class="stacks-copy">Uses size or area to show how some group, entity, or amount breaks down into individual pieces that each represent a proportion of the whole. The data represented in these types of charts aren’t just about how things are divided, it’s about how they’re divided in relation to their whole and to each other. Each part (segment) of the chart represents data points that contribute to the whole and amount to 100% in total. This type makes it easier to identify equal or obviously different values.</p>
-
-    <div class="d-flex my24 g24 ff-row-wrap flex__allitems3 fc-black-400 ta-center">
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" width="96" height="96" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M82.395 66.385A39 39 0 0 0 87 48H70c0 12.15-9.85 22-22 22s-22-9.85-22-22a21.93 21.93 0 0 1 6.444-15.556L20.423 20.423a39 39 0 1 0 61.972 45.962z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M78.94 24.259a39 39 0 0 0-20.846-13.93l-4.399 16.416C63.085 29.255 70 37.82 70 48h17a39 39 0 0 0-8.06-23.741z" fill="currentColor" fill-opacity=".3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M37.906 10.329a39 39 0 0 0-17.483 10.094l12.02 12.02A21.93 21.93 0 0 1 48 26c1.97 0 3.879.259 5.695.744l4.399-16.415a39 39 0 0 0-20.188 0z" fill="currentColor" fill-opacity=".6"/></svg>
-            <div class="mt12">Donut chart</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" width="96" height="96" fill="none"><path d="M87 48a39 39 0 1 1-66.577-27.577L48 48h39z" fill="currentColor"/><path d="M20.423 20.423a39 39 0 0 1 37.67-10.094L48 48 20.423 20.423z" fill="currentColor" fill-opacity=".6"/><path d="M58.094 10.329A39 39 0 0 1 87 48H48l10.094-37.671z" fill="currentColor" fill-opacity=".3"/></svg>
-            <div class="mt12">Pie chart</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96" ><g fill="currentColor"><g fill="currentColor"><path d="m11 6h78v80h-78z" fill-opacity=".1"/><g fill-opacity=".2"><path d="m57.8 32-15.6-18-15.6 13.5-15.6 26.5v32h78v-77l-15.6 5z"/><path d="m56.8182 47.5-15.2727-14-15.2728 29-15.2727 6.5v17h78v-58l-16.9091 15.5z"/><path d="m56.8182 64.7407-15.2727 3.0371-15.2728 12.1481h-15.2727v6.0741h78v-41l-16.9091 15.6914z"/></g><path clip-rule="evenodd" d="m4 0h-4v92 4h4 92v-4h-92z" fill-rule="evenodd"/></g></svg>
-            <div class="mt12">Stacked area graph (100%)</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96" ><g fill="currentColor"><path clip-rule="evenodd" d="m4 0h-4v92 4h4 92v-4h-92z" fill-rule="evenodd"/><path d="m11 40h22v46h-22z"/><path d="m11 5h22v14h-22z" fill-opacity=".2"/><path d="m11 22h22v15h-22z" fill-opacity=".6"/><path d="m39 58h22v28h-22z"/><path d="m39 5h22v12h-22z" fill-opacity=".2"/><path d="m39 20h22v35h-22z" fill-opacity=".6"/><path d="m67 47h22v39h-22z"/><path d="m67 5h22v5h-22z" fill-opacity=".2"/><path d="m67 13h22v31h-22z" fill-opacity=".6"/></g></svg>
-            <div class="mt12">Stacked bar graph (100%)</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" width="96" height="96" fill="none"><path fill="currentColor" d="M7 7H37V55H7z"/><path fill="currentColor" fill-opacity=".2" d="M7 60H89V90H7z"/><path fill="currentColor" fill-opacity=".6" d="M42 7H89V55H42z"/></svg>
-            <div class="mt12">Treemap</div>
-        </div>
-    </div>
-
-    {% header "h3", "Correlations" %}
-    <p class="stacks-copy">Shows relationships and connections between the data or shows correlations between two or more variables. Often used as the first step toward the detection of cause-effect relationships. Use this type of chart to check whether there is any relationship between two variables and also to notice anomalies or clusters in the data.</p>
-
-    <div class="d-flex my24 g24 ff-row-wrap flex__allitems3 fc-black-400 ta-center">
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96" ><g stroke="currentColor"><path d="m24 33.5-9 35 34-3.5 34.5 2.5-20-28-14.5-8.5z" fill="currentColor" fill-opacity=".2" stroke-width="2"/><path d="m13.7609 27.6547 35.2391-20.3453 35.2391 20.3453v40.6906l-35.2391 20.3453-35.2391-20.3453z" stroke-width="4"/><g stroke-opacity=".2" stroke-width="2"><path d="m24.0192 33.5773 24.9808-14.4226 24.9808 14.4226v28.8453l-24.9808 14.4227-24.9808-14.4227z"/><path d="m34.4115 39.5773 14.5885-8.4226 14.5885 8.4226v16.8453l-14.5885 8.4227-14.5885-8.4227z"/></g></g></svg>
-            <div class="mt12">Radar</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96" ><g fill="currentColor"><path clip-rule="evenodd" d="m4 0h-4v92 4h4 92v-4h-92z" fill-rule="evenodd"/><circle cx="15.5" cy="80.5" r="2.5"/><circle cx="20.5" cy="72.5" r="2.5"/><circle cx="26.5" cy="78.5" r="2.5"/><circle cx="26.5" cy="66.5" r="2.5"/><circle cx="32.5" cy="72.5" r="2.5"/><circle cx="33.5" cy="61.5" r="2.5"/><circle cx="44.5" cy="59.5" r="2.5"/><circle cx="46.5" cy="52.5" r="2.5"/><circle cx="54.5" cy="52.5" r="2.5"/><circle cx="62.5" cy="69.5" r="2.5"/><circle cx="56.5" cy="45.5" r="2.5"/><circle cx="64.5" cy="40.5" r="2.5"/><circle cx="80.5" cy="52.5" r="2.5"/><circle cx="72.5" cy="33.5" r="2.5"/><circle cx="72.5" cy="17.5" r="2.5"/><circle cx="80.5" cy="15.5" r="2.5"/><circle cx="64.5" cy="32.5" r="2.5"/><circle cx="67.5" cy="25.5" r="2.5"/><circle cx="48.5" cy="45.5" r="2.5"/><circle cx="32.5" cy="30.5" r="2.5"/><circle cx="56.5" cy="37.5" r="2.5"/><circle cx="44.5" cy="25.5" r="2.5"/><circle cx="75.5" cy="25.5" r="2.5"/><circle cx="38.5" cy="52.5" r="2.5"/><circle cx="41.5" cy="67.5" r="2.5"/></g></svg>
-            <div class="mt12">Scatterplot</div>
-        </div>
-    </div>
-
-    {% header "h3", "Trend over time" %}
-    <p class="stacks-copy">Analyze data over a time period as a way to identify trends or changes in values. Viewing data over time helps to understand performance, particularly when paired with an established target or goal. Use this type of chart to better understand how something is currently performing and to track any changes over time.</p>
-
-    <div class="d-flex my24 g24 ff-row-wrap flex__allitems3 fc-black-400 ta-center">
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" width="96" height="96" fill="none"><path d="M57.8 52.338L42.2 41.117l-15.6 8.416L11 66.052V86h78V38l-15.6 3.117-15.6 11.22z" fill="currentColor" fill-opacity=".2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 0H0v96h96v-4H4V0z" fill="currentColor"/></svg>
-            <div class="mt12">Area chart</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96" ><path clip-rule="evenodd" d="m4 0h-4v92 4h4 92v-4h-92z" fill="currentColor" fill-rule="evenodd"/><g stroke="currentColor" stroke-width="4"><path d="m13 40h18v27h-18z"/><path d="m22 38v-12"/><path d="m16 24h12"/><path d="m16 83h12"/><path d="m14 58h16"/><path d="m22 81v-12"/><path d="m42 23h18v39h-18z"/><path d="m51 23v-16"/><path d="m45 5h12"/><path d="m45 83h12"/><path d="m43 41h16"/><path d="m51 82v-19"/><path d="m70 51h18v17h-18z"/><path d="m79 50v-12"/><path d="m73 36h12"/><path d="m73 83h12"/><path d="m79 81v-12"/></g></svg>
-            <div class="mt12">Candlestick</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96" ><g fill="currentColor"><path clip-rule="evenodd" d="m4 0h-4v92 4h4 92v-4h-92z" fill-rule="evenodd"/><path d="m11 47h20v39h-20z"/><path d="m70 47h19v39h-19z"/><path d="m50 33h20v53h-20z" fill-opacity=".2"/><path d="m31 12h19v74h-19z" fill-opacity=".6"/></g></svg>
-            <div class="mt12">Histogram</div>
-        </div>
-        <div class="flex--item s-card">
-            <svg class="svg-icon native" width="96" height="96" fill="none"><path d="M11 66.052l15.6-16.52 15.6-8.415 15.6 11.22 15.6-11.22L89 38" stroke="currentColor" stroke-width="5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 0H0v96h96v-4H4V0z" fill="currentColor"/></svg>
-            <div class="mt12">Line chart</div>
-        </div>
-    </div>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Color palette and usage" %}
-    <p class="stacks-copy">What colors to use and when? Consider the following when choosing the primary color of your data visualization and in what order to add more colors:</p>
-
-    {% header "h3", "Blue" %}
-    <p class="stacks-copy">Useful for denoting neutral related metrics.</p>
-
-    <div class="overflow-hidden bar-lg ff-mono mb32 theme-light__forced">
-        <div class="flex--item bg-blue-600 p12 fc-white d-flex jc-space-between">
-            <span>#004487</span>
-            <span>blue-600</span>
-        </div>
-        <div class="flex--item bg-blue-500 p12 fc-white d-flex jc-space-between">
-            <span>#0077cc</span>
-            <span>blue-500</span>
-        </div>
-        <div class="flex--item bg-blue-400 p12 fc-white d-flex jc-space-between">
-            <span>#379fef</span>
-            <span>blue-400</span>
-        </div>
-        <div class="flex--item bg-blue-400 p12 fc-dark d-flex jc-space-between">
-            <span>#0095ff</span>
-            <span>blue-400</span>
-        </div>
-        <div class="flex--item bg-blue-300 p12 fc-dark d-flex jc-space-between">
-            <span>#cfeafe</span>
-            <span>blue-300</span>
-        </div>
-        <div class="flex--item bg-blue-200 p12 fc-dark d-flex jc-space-between">
-            <span>#f2f9ff</span>
-            <span>blue-200</span>
-        </div>
-    </div>
-
-    {% comment %} <a class="s-btn s-btn__outlined s-btn__icon" href="#">
-        {% icon "Share", "mr2" %}
-        Open in Google Sheets
-    </a> {% endcomment %}
-
-    {% header "h3", "Green" %}
-    <p class="stacks-copy">Useful for denoting positive related metrics.</p>
-
-    <div class="overflow-hidden bar-lg ff-mono mb32 theme-light__forced">
-        <div class="flex--item p12 bg-green-600 fc-white d-flex jc-space-between">
-            <span>#1e472c</span>
-            <span>color-900</span>
-        </div>
-        <div class="flex--item p12 bg-green-600 fc-white d-flex jc-space-between">
-            <span>#29603b</span>
-            <span>color-800</span>
-        </div>
-        <div class="flex--item p12 bg-green-500 fc-white d-flex jc-space-between">
-            <span>#2f6f44</span>
-            <span>color-700</span>
-        </div>
-        <div class="flex--item p12 bg-green-400 fc-dark d-flex jc-space-between">
-            <span>#48a868</span>
-            <span>color-500</span>
-        </div>
-        <div class="flex--item p12 bg-green-300 fc-dark d-flex jc-space-between">
-            <span>#a6d9b7</span>
-            <span>color-200</span>
-        </div>
-        <div class="flex--item p12 bg-green-100 fc-dark d-flex jc-space-between">
-            <span>#eef8f1</span>
-            <span>color-025</span>
-        </div>
-    </div>
-
-    {% header "h3", "Red" %}
-    <p class="stacks-copy">Using for denoting negative metrics.</p>
-
-    <div class="overflow-hidden bar-lg ff-mono mb32 theme-light__forced">
-        <div class="flex--item p12 bg-red-600 fc-white d-flex jc-space-between">
-            <span>#7a1819</span>
-            <span>red-600</span>
-        </div>
-        <div class="flex--item p12 bg-red-500 fc-white d-flex jc-space-between">
-            <span>#ac2726</span>
-            <span>red-500</span>
-        </div>
-        <div class="flex--item p12 bg-red-400 fc-white d-flex jc-space-between">
-            <span>#d1383d</span>
-            <span>red-400</span>
-        </div>
-        <div class="flex--item p12 bg-red-400 fc-dark d-flex jc-space-between">
-            <span>#de535e</span>
-            <span>red-400</span>
-        </div>
-        <div class="flex--item p12 bg-red-300 fc-dark d-flex jc-space-between">
-            <span>#f4b4bb</span>
-            <span>red-300</span>
-        </div>
-        <div class="flex--item p12 bg-red-200 fc-dark d-flex jc-space-between">
-            <span>#fdf3f4</span>
-            <span>red-200</span>
-        </div>
-    </div>
-
-    {% header "h3", "Multi-colored" %}
-    <p class="stacks-copy">Useful for denoting unrelated metrics.</p>
-
-    <div class="overflow-hidden ff-mono mb32 theme-light__forced">
-        <div style="background: #27348b;" class="flex--item p12 fc-white d-flex jc-space-between mb6 bar-lg">
-            <span>#27348b</span>
-        </div>
-        <div class="flex--item p12 bg-orange-400 fc-dark d-flex jc-space-between mb6 bar-lg">
-            <span>#f2720c</span>
-            <span>orange-400</span>
-        </div>
-        <div class="flex--item p12 bg-green-400 fc-dark d-flex jc-space-between mb6 bar-lg">
-            <span>#48a868</span>
-            <span>green-400</span>
-        </div>
-        <div class="flex--item p12 bg-blue-400 fc-dark d-flex jc-space-between mb6 bar-lg">
-            <span>#379fef</span>
-            <span>blue-400</span>
-        </div>
-        <div style="background: #f7cc46;" class="flex--item p12 fc-dark d-flex jc-space-between mb6 bar-lg">
-            <span>#f7cc46</span>
-        </div>
-        <div class="flex--item p12 bg-orange-300 fc-dark d-flex jc-space-between mb6 bar-lg">
-            <span>#fee3cf</span>
-            <span>orange-300</span>
-        </div>
-    </div>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Accessibility" %}
-    <p class="stacks-copy">It’s important to remember that you know more about the data than the target audience and that others may have a different set of constraints than you do. Make sure your data visualization is making the data clear and accessible to all by:</p>
-    <ul class="stacks-list">
-        <li>Having sufficient contrast with the background for any objects using colour (ex: dots, bars, lines, etc.).</li>
-        <li>Color must not be the only means of conveying information (consider adding labels).</li>
-        <li>Avoid overwhelming the user with too much information</li>
-    </ul>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Sources, resources & inspiration" %}
-    <p class="stacks-copy">Here are some links to help you learn more about data visualization.</p>
-
-    <ul class="stacks-list">
-        <li><a href="https://stackoverflow.blog/tag/stackoverflowknows/">Stack Overflow Knows Surveys</a></li>
-        <li><a href="https://datavizproject.com/">Data Viz Project</a></li>
-        <li><a href="https://datavizcatalogue.com/">The Data Visualisation Catalogue</a></li>
-        <li><a href="https://www.anychart.com/chartopedia/usage-type/">Anychart’s Chartopedia</a></li>
-        <li><a href="https://depictdatastudio.com/charts/">Interactive Chart Chooser by Depict Data Studio</a></li>
-        <li><a href="https://www.beautiful.ai/topic/data-visualization">Beautiful.ai Blog</a></li>
-        <li><a href="https://blog.datawrapper.de/10-ways-to-use-fewer-colors-in-your-data-visualizations/">10 ways to use fewer colors in your data visualizations</a></li>
-    </ul>
-</section>
diff --git a/packages/stacks-docs/brand/logo.html b/packages/stacks-docs/brand/logo.html
deleted file mode 100644
index 441c57516e..0000000000
--- a/packages/stacks-docs/brand/logo.html
+++ /dev/null
@@ -1,245 +0,0 @@
----
-layout: page
-title: Logo
-description: Guidelines and resources for using our logos. Use of our logos requires our prior written permission and your compliance with the <a href="https://stackexchange.com/legal/trademark-guidance">Guidelines for the Use of the Stack Overflow Trademarks</a>.
----
-<section class="stacks-section">
-    {% header "h2", "Stack Overflow" %}
-    <img class="my16 wmx100" src="{{ "/assets/img/logos/so/logo-stackoverflow.svg" | url }}" />
-    <div class="d-flex gx4 ai-center fc-light mb32">
-        <div class="flex--item ml-auto">Download as:</div>
-        <a href="{{ "/assets/img/logos/so/logo-stackoverflow.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-        <a href="{{ "/assets/img/logos/so/logo-stackoverflow.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-    </div>
-
-    {% header "h3", "Logo breakdown" %}
-    <p class="stacks-copy">
-        Generally logo breakdowns can get a little silly, but in practicality, our logo’s spacing is based on the following dimensions and angles.
-    </p>
-    <p class="stacks-copy">
-        Our logo is broken down into two components, the glyph and its wordmark. These are often separated when displaying the full logo wouldn’t be appropriate. Examples of this include favicons, or logged-in headers. These are accessible in various pixel-locked sizes within our <a href="{{ "/product/foundation/icons" | url }}">icons set</a> and are available as <code class="stacks-code">@Svg.LogoGlyph</code> and <code class="stacks-code">@Svg.LogoWordmark</code>.
-    </p>
-    <p class="stacks-copy">
-        <img class="wmx100" src="{{ "/assets/img/logos/so/logo-stackoverflow__breakdown.svg" | url }}" />
-    </p>
-
-    {% header "h3", "Color alternatives" %}
-    <div class="d-flex flex__allitems6 ta-center sm:fd-column w100">
-        <div class="flex--item p64">
-            {% embed "LogoMd", "native wmx100" %}
-        </div>
-        <div class="flex--item bg-black-150 p64">
-            {% embed "LogoMd", "native wmx100" %}
-        </div>
-    </div>
-    <div class="d-flex flex__allitems6 ta-center sm:fd-column w100 mb32">
-        <div class="flex--item bg-orange-400 fc-white p64">
-            {% embed "LogoMd", "wmx100" %}
-        </div>
-        <div class="flex--item bg-black-600 fc-white p64">
-            {% embed "LogoMd", "wmx100" %}
-        </div>
-    </div>
-
-    {% header "h3", "Minimum sizes" %}
-    <div class="d-flex ai-center mt12 mb32 sm:fd-column sm:ai-start g32">
-        <img class="flex--item wmx100" src="{{ "/assets/img/logos/so/logo-print.svg" | url }}" />
-        <img class="flex--item wmx100" src="{{ "/assets/img/logos/so/logo-screen.svg" | url }}" />
-    </div>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Products" %}
-    <p class="stacks-copy">
-        If you need to use one of these in product, you can find them in the <a href="{{ "/product/foundation/icons" | url }}">icon set</a>.
-    </p>
-
-    {% header "h3", "Stack Overflow for Teams" %}
-    <div class="d-flex gx32 fw-wrap mt24">
-        <div class="flex--item mb12">
-            <img class="h48 wauto" src="{{ "/assets/img/logos/teams/teams-logo.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/teams/teams-logo.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/teams/teams-logo.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-            </div>
-        </div>
-        <div class="flex--item mb12">
-            <img class="h48 wauto" src="{{ "/assets/img/logos/teams/teams-logo-compact.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/teams/teams-logo-compact.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/teams/teams-logo-compact.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-            </div>
-        </div>
-    </div>
-
-    {% header "h3", "Collectives on Stack Overflow" %}
-    <div class="d-flex gx32 fw-wrap mt24">
-        <div class="flex--item mb12">
-            <img class="h48 wauto" src="{{ "/assets/img/logos/collectives/collectives-logo.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/collectives/collectives-logo.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/collectives/collectives-logo.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-            </div>
-        </div>
-        <div class="flex--item mb12">
-            <img class="h48 wauto" src="{{ "/assets/img/logos/collectives/collectives-logo-compact.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/collectives/collectives-logo-compact.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/collectives/collectives-logo-compact.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-            </div>
-        </div>
-    </div>
-
-    {% header "h3", "Stack Overflow Talent" %}
-    <div class="d-flex gx32 fw-wrap mt24">
-        <div class="flex--item mb12">
-            <img class="h48 wauto" src="{{ "/assets/img/logos/talent/talent-logo.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/talent/talent-logo.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/talent/talent-logo.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-            </div>
-        </div>
-        <div class="flex--item mb12">
-            <img class="h48 wauto" src="{{ "/assets/img/logos/talent/talent-logo-compact.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/talent/talent-logo-compact.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/talent/talent-logo-compact.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-            </div>
-        </div>
-    </div>
-
-    {% header "h3", "Stack Overflow Advertising" %}
-    <div class="d-flex gx32 fw-wrap mt24">
-        <div class="flex--item mb12">
-            <img class="h48 wauto" src="{{ "/assets/img/logos/audience/soa-logo.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/audience/soa-logo.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/audience/soa-logo.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-            </div>
-        </div>
-        <div class="flex--item mb12">
-            <img class="h48 wauto" src="{{ "/assets/img/logos/audience/soa-logo-compact.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/audience/soa-logo-compact.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/audience/soa-logo-compact.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-            </div>
-        </div>
-    </div>
-
-    {% header "h2", "Community logos" %}
-    <img class="my16 wmx100" src="{{ "/assets/img/logos/so/logo-community.svg" | url }}" />
-
-    {% header "h3", "International" %}
-    <div class="d-flex gx32 fw-wrap mt24">
-        <div class="flex--item mb12">
-            <img class="wmx100" src="{{ "/assets/img/logos/so/logo-br.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/so/logo-br.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/so/logo-br.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-                <a href="{{ "/assets/img/logos/so/logo-br.pdf" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PDF</a>
-            </div>
-        </div>
-        <div class="flex--item mb12">
-            <img class="wmx100" src="{{ "/assets/img/logos/so/logo-jp.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/so/logo-jp.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/so/logo-jp.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-                <a href="{{ "/assets/img/logos/so/logo-jp.pdf" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PDF</a>
-            </div>
-        </div>
-        <div class="flex--item">
-            <img class="wmx100" src="{{ "/assets/img/logos/so/logo-ru.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/so/logo-ru.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/so/logo-ru.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-                <a href="{{ "/assets/img/logos/so/logo-ru.pdf" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PDF</a>
-            </div>
-        </div>
-        <div class="flex--item">
-            <img class="wmx100" src="{{ "/assets/img/logos/so/logo-es.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/so/logo-es.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/so/logo-es.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-                <a href="{{ "/assets/img/logos/so/logo-es.pdf" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PDF</a>
-            </div>
-        </div>
-    </div>
-
-    {% header "h3", "Stack Exchange" %}
-    <div class="d-flex gx32 fw-wrap mt24">
-        <div class="flex--item mb12">
-            <img class="h48" src="{{ "/assets/img/logos/sf/sf-logo.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/sf/sf-logo.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/sf/sf-logo.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-                <a href="{{ "/assets/img/logos/sf/sf-logo.eps" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">EPS</a>
-            </div>
-        </div>
-        <div class="flex--item mb12">
-            <img class="h48" src="{{ "/assets/img/logos/sf/sf-icon.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/sf/sf-icon.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/sf/sf-icon.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-            </div>
-        </div>
-        <div class="flex--item mb12">
-            <img class="h48" src="{{ "/assets/img/logos/su/su-logo.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/su/su-logo.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/su/su-logo.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-                <a href="{{ "/assets/img/logos/su/su-logo.eps" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">EPS</a>
-            </div>
-        </div>
-        <div class="flex--item mb12">
-            <img class="h48" src="{{ "/assets/img/logos/su/su-icon.svg" | url }}" />
-            <div class="d-flex gx4 ai-center fc-light fs-fine mt16 mb32">
-                <div class="flex--item">Download:</div>
-                <a href="{{ "/assets/img/logos/su/su-icon.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-                <a href="{{ "/assets/img/logos/su/su-icon.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Stack Overflow Meta" %}
-    <img class="my16 wmx100" src="{{ "/assets/img/logos/so/logo-meta.svg" | url }}" />
-    <div class="d-flex gx4 ai-center fc-light mb32">
-        <div class="flex--item">Download as:</div>
-        <a href="{{ "/assets/img/logos/so/logo-meta.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-        <a href="{{ "/assets/img/logos/so/logo-meta.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-    </div>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Stack Exchange" %}
-    <img class="my16 wmx100" src="{{ "/assets/img/logos/se/se-logo.svg" | url }}" />
-    <div class="d-flex gx4 ai-center fc-light mb32">
-        <div class="flex--item">Download as:</div>
-        <a href="{{ "/assets/img/logos/se/se-logo.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-        <a href="{{ "/assets/img/logos/se/se-logo.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-        <a href="{{ "/assets/img/logos/se/se-logo.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">EPS</a>
-    </div>
-
-    <img class="my16 w128" src="{{ "/assets/img/logos/se/se-icon.svg" | url }}" />
-    <div class="d-flex gx4 ai-center fc-light mb32">
-        <div class="flex--item">Download as:</div>
-        <a href="{{ "/assets/img/logos/se/se-icon.svg" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">SVG</a>
-        <a href="{{ "/assets/img/logos/se/se-icon.png" | url }}" class="flex--item s-btn s-btn__filled s-btn__xs">PNG</a>
-    </div>
-</section>
diff --git a/packages/stacks-docs/brand/principles.html b/packages/stacks-docs/brand/principles.html
deleted file mode 100644
index e6868ac43c..0000000000
--- a/packages/stacks-docs/brand/principles.html
+++ /dev/null
@@ -1,18 +0,0 @@
----
-layout: page
-title: Brand principles
-description: Whether it’s in an internal project, a product feature, or an external marketing campaign, the following design principles guide the Stack Overflow brand direction. These principles represent the approach and opinion all things Stack Overflow should have.
----
-<section class="stacks-section">
-    {% header "h3", "Focused" %}
-    <p class="stacks-copy">Designs should focus the person on what’s important at hand. Designs should focus on the central goal, pushing distractions and interruptions to the side until the stated goal is completed.</p>
-
-    {% header "h3", "Welcoming" %}
-    <p class="stacks-copy">Our designs shouldn’t feel “members only”, but inviting and approachable. Designs should be intentional and intuitive, not be some secret codex for users to decipher. While the subjects developers talk about may seem impersonal, our design approach shouldn’t be.</p>
-
-    {% header "h3", "Purposeful" %}
-    <p class="stacks-copy">Everything in its right place. Our designs might be packed with information, but everything should be purposeful. Don’t add extraneous data or ornamentation as it might distract people from the central goal at hand.</p>
-
-    {% header "h3", "Five percent fun" %}
-    <p class="stacks-copy">We’re quirky, not corny. We enjoy the long joke. Our humor is dry and pops up in unexpected, but appropriate, places. We’re “business in front, party in the back.”</p>
-</section>
diff --git a/packages/stacks-docs/brand/typography.html b/packages/stacks-docs/brand/typography.html
deleted file mode 100644
index da2cc7e44c..0000000000
--- a/packages/stacks-docs/brand/typography.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-layout: page
-title: Typography
-description: In our Marketing material we use two fonts, here is some simple usage guidence.
----
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Source+Sans+Pro:400,400i,700,700i&#038;display=swap" type="text/css" media="all">
-
-<section class="stacks-section">
-    {% header "h2", "Headers" %}
-    <p class="stacks-copy"><em>Roboto Slab</em> is an open-source slab serif with geometric forms and friendly and open curves. We use it for headings and numerical call outs.</p>
-
-    <a class="s-btn s-btn__outlined s-btn__icon" href="https://fonts.google.com/specimen/Roboto+Slab">
-        {% icon "Share", "mr2" %}
-        Download at Google Fonts
-    </a>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Paragraphs & subheadings" %}
-    <p class="stacks-copy"><em>Source Sans Pro</em> is an open-source sans serif that works well for legibility in UI environments.</p>
-
-    <a class="s-btn s-btn__outlined s-btn__icon" href="https://fonts.google.com/specimen/Source+Sans+Pro">
-        {% icon "Share", "mr2" %}
-        Download at Google Fonts
-    </a>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Examples" %}
-    <p class="stacks-copy">Some examples of common patterns. Sizing in these examples is based on the <a href="/product/foundation/typography/#sizes">Product standards</a>. In other mediums you can just use the relative sizes.</p>
-
-    <aside class="s-notice s-notice__warning mb24" role="status">The non-Stacks <code>p-*</code> classes will only work on some Stack Overflow owned sites.</aside>
-
-    {% header "h3", "Hero headline & paragraph" %}
-<div class="stacks-preview mb24">
-{% highlight html %}
-<h1 class="p-ff-roboto-slab fs-display1 lh-sm mb24">
-    Knowledge sharing and collaboration without distractions
-</h1>
-<p class="p-ff-source fs-title">
-    Stack Overflow for Teams is a knowledge management & collaboration solution that technologists already trust.
-</p>
-{% endhighlight %}
-    <div class="stacks-preview--example">
-        <h1 class="fs-display1 lh-sm mb24 fw-normal" style="font-family: 'Roboto Slab';">
-            Knowledge sharing and collaboration without distractions
-        </h1>
-        <p class="p-ff-source fs-title fc-black-400 mb0 wmx5" style="font-family: 'Source Sans Pro';">
-            Stack Overflow for Teams is a knowledge management & collaboration solution that technologists already trust.
-        </p>
-    </div>
-</div>
-
-    {% header "h3", "Section headline & preface" %}
-<div class="stacks-preview mb24">
-{% highlight html %}
-<h1 class="p-ff-roboto-slab-bold fs-headline2 mb12">
-    Improves other tools
-</h1>
-<p class="p-ff-source fs-subheading">
-    Streamline workflows across the entire organization
-</p>
-{% endhighlight %}
-    <div class="stacks-preview--example">
-        <h1 class="mb12 fs-headline2 fw-bold" style="font-family: 'Roboto Slab';">
-            Improves other tools
-        </h1>
-        <p class="p-ff-source fs-subheading fc-black-400 mb0" style="font-family: 'Source Sans Pro';">
-            Streamline workflows across the entire organization
-        </p>
-    </div>
-</div>
-
-    {% header "h3", "Item headline & preface" %}
-<div class="stacks-preview mb24">
-{% highlight html %}
-<h1 class="p-ff-roboto-slab-bold fs-title mb12">
-    Improves other tools
-</h1>
-<p class="p-ff-source fs-body3">
-    Help engineers be more efficient and streamline knowledge sharing using a tool they already love and trust.
-</p>
-{% endhighlight %}
-    <div class="stacks-preview--example">
-        <h1 class="mb12 fs-title fw-bold" style="font-family: 'Roboto Slab';">
-            Software engineers
-        </h1>
-        <p class="p-ff-source fs-body3 fc-black-400 mb0 wmx3" style="font-family: 'Source Sans Pro';">
-            Help engineers be more efficient and streamline knowledge sharing using a tool they already love and trust.
-        </p>
-    </div>
-</div>
-
-    {% header "h3", "Numbers (large)" %}
-<div class="stacks-preview mb24">
-{% highlight html %}
-<div class="p-ff-roboto-slab-bold fs-display3">
-    82%
-</div>
-<div class="p-ff-source fs-body3">
-    of developers visit us at least once per week
-</div>
-{% endhighlight %}
-    <div class="stacks-preview--example">
-        <div class="fs-display3 fw-bold" style="font-family: 'Roboto Slab';">
-            82%
-        </div>
-        <div class="fs-body3 wmx2" style="font-family: 'Source Sans Pro';">
-            of developers visit us at least once per week
-        </div>
-    </div>
-</div>
-
-    {% header "h3", "Numbers (small)" %}
-<div class="stacks-preview mb24">
-{% highlight html %}
-<div class="p-ff-roboto-slab-bold fs-title mb4">
-    5,000+
-</div>
-<div class="p-ff-source fs-body2">
-    Stack Overflow for Teams instances active every day
-</div>
-{% endhighlight %}
-    <div class="stacks-preview--example">
-        <div class="fs-title fw-bold mb4" style="font-family: 'Roboto Slab';">
-            5,000+
-        </div>
-        <div class="fs-body2 wmx2" style="font-family: 'Source Sans Pro';">
-            Stack Overflow for Teams instances active every day
-        </div>
-    </div>
-</div>
-
-</section>
\ No newline at end of file
diff --git a/packages/stacks-docs/content/examples/alt-text.html b/packages/stacks-docs/content/examples/alt-text.html
deleted file mode 100644
index 3050371c6d..0000000000
--- a/packages/stacks-docs/content/examples/alt-text.html
+++ /dev/null
@@ -1,153 +0,0 @@
----
-layout: page
-title: Alt-text
-description: Everything we know about alt-texts, when to use them, and how to craft them. For a helpful decision tree on how and when to write alt-text, check out the W3C’s <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">alt-text decision tree</a>.
----
-<section class="stacks-section">
-    {% header "h2", "How to write alt-text" %}
-    <p class="stacks-copy">
-        An alt-text is a description of an image that’s shown to people who can’t see the image. Alt-texts help people with little or no vision who use assistive technologies, people who have turned off images, and search engines.
-    </p>
-    {% header "h3", "Describe the image concisely" %}
-    <p class="stacks-copy">
-        It might sound obvious, but an alt-text should describe the image in case an image doesn’t display or someone has trouble seeing it. The goal of alt-text is to give the necessary information from the image <strong class="ws-nowrap">at a glance</strong>. It’s best to include only the necessary information.
-    </p>
-    <div class="ta-center w100 wmx5 mb8">
-        <img src="{{ "/assets/img/community.svg" | url }}"" alt="Man and woman using laptops at a standing table, Illustration.">
-    </div>
-    <table class="s-table s-table__lg va-middle fs-body2 va-top w100 wmx5 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“People using computers.”</td>
-                <td rowspan="3" class="bb bc-black-225">“Man and woman using laptops at a standing table, Illustration.”</td>
-            </tr>
-            <tr>
-                <td>“Man in a purple shirt and woman in blue pants are typing on laptops and there’s a plant on the floor nearby.”</td>
-            </tr>
-            <tr>
-                <td>“Man and woman using computers, illustrated by Jane Doe © 2019.”</td>
-            </tr>
-        </tbody>
-    </table>
-    <p class="stacks-copy">
-        Take context into account. For instance, if the image above is part of a blog post about standing tables, then it’s safer to skip the part about standing tables.
-    </p>
-    {% header "h3", "Don’t say it’s an image" %}
-    <p class="stacks-copy">
-        Don’t start alt-texts with things like “Image of” or “Photo of.”. Screen readers add that by default. If it’s a special type of image (like an icon), you can note that at the end.
-    </p>
-    <table class="s-table s-table__lg va-middle fs-body2 va-top w100 wmx5 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“Image of a rocket.”</td>
-                <td rowspan="3">“A rocket.”</td>
-            </tr>
-            <tr>
-                <td>“Illustration of a rocket.”</td>
-            </tr>
-            <tr>
-                <td>Photo of a rocket.”</td>
-            </tr>
-            <tr>
-                <td>“Icon of a rocket.”</td>
-                <td>“A rocket, icon.”</td>
-            </tr>
-        </tbody>
-    </table>
-    {% header "h3", "End with a period" %}
-    <p class="stacks-copy">
-        End the alt-text with a period. This makes screen readers pause a bit after the last word in the alt-text, creating a natural pause before the next bit of text.
-    </p>
-</section>
-<section class="stacks-section">
-    {% header "h2", "When not to write alt-text" %}
-    <p class="stacks-copy">
-        In most cases you should use an alt-text for images, but there are some exceptions where you should leave the alt-text blank.
-    </p>
-    {% header "h3", "Decorative images" %}
-    <p class="stacks-copy">
-        If an image does not convey any meaning to the user, leave the alt-text blank.
-    </p>
-    <div class="stacks-preview mb16">
-{% highlight html %}
-<div>
-    <img src="rocket.svg" alt="">
-    <h2>…</h2>
-    <p>…</p>
-</div>
-{% endhighlight %}
-        <div class="stacks-preview--example">
-            <div class="d-flex fd-column gy8 wmx3">
-                <div class="flex--item">
-                    <img src="{{ "/assets/img/efficiency.svg" | url }}"" alt="">
-                </div>
-                <h2 class="flex--item fs-body3 fw-normal fc-dark m0">Improve efficiency and ship better code</h2>
-                <p class="flex--item fs-body1 fc-medium m0">There’s a reason the world’s largest developer teams rely on Stack Overflow Enterprise—it leads to better product and allows distributed teams to securely collaborate and share knowledge.</p>
-            </div>
-        </div>
-    </div>
-    <p class="stacks-copy">
-        The rocket here doesn’t add meaningful information.
-    </p>
-    {% header "h3", "Images accompanied by text" %}
-    <p class="stacks-copy">
-        If an image has a label nearby, leave the alt-text blank.
-    </p>
-    <div class="stacks-preview mb16">
-{% highlight html %}
-<div>
-    <img src="leaderboard.svg" alt="">
-    <h2>…</h2>
-    <p>…</p>
-</div>
-{% endhighlight %}
-        <div class="stacks-preview--example">
-            <div class="d-flex gx8 ai-center wmx4">
-                <div class="flex--item">
-                    <img src="{{ "/assets/img/leaderboard.svg" | url }}"" alt="" width="44" height="43">
-                </div>
-                <div class="flex--item">
-                    <h2 class="flex--item fs-body1 fw-bold fw-normal fc-dark mb4">TOP LEADERBOARD: 728X90</h2>
-                    <p class="flex--item fs-body1 fc-medium m0">This ad unit is the most visible on the site.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-    <p class="stacks-copy">
-        The nearby text here already explains what the graphic illustrates. If there was alt-text here, screen readers would repeat information to the user.
-    </p>
-    {% tip %}
-        <strong>Note:</strong> In these cases, leaving the alt attribute empty (<code class="stacks-code bg-blue-300">alt=""</code>) will cause a screenreader to skip over the image. <Strong>Never <em>remove</em> the alt-attribute.</Strong> When a screenreader comes to an image without an alt attribute, it will dictate the filename (Eg. “SO underscore logo dot png”).
-    {% endtip %}
-</section>
-<section class="stacks-section">
-    {% header "h2", "How to add alt-text" %}
-    {% header "h3", "Using &lt;img&gt;" %}
-    <p class="stacks-copy">
-        Inside an <code class="stacks-code">&lt;img&gt;</code> tag, add the alt-text inside the <code class="stacks-code">alt</code> attribute:
-    </p>
-    <div class="stacks-preview mb16">
-{% highlight html %}
-<img src="image.png" alt="The alt text.">
-<img src="image.svg" alt="The alt text.">
-{% endhighlight %}
-    </div>
-    {% header "h3", "Using inline SVG" %}
-    <p class="stacks-copy">
-        Inline SVG doesn’t support the <code class="stacks-code">alt</code> attribute, so instead add two wai-aria attributes: <code class="stacks-code">role="img"</code> and <code class="stacks-code">aria-label="The alt-text."</code>:
-    </p>
-    <div class="stacks-preview mb16">
-{% highlight html %}
-<svg role="img" aria-label="the alt-text" viewBox="…">…</svg>
-{% endhighlight %}
-    </div>
-</section>
-<p class="m0 fc-caption fc-light">This content was adapted from <a href="https://axesslab.com/alt-texts/">Axess Lab</a>.</p>
diff --git a/packages/stacks-docs/content/examples/error-messages.html b/packages/stacks-docs/content/examples/error-messages.html
deleted file mode 100644
index 3a09d9cccc..0000000000
--- a/packages/stacks-docs/content/examples/error-messages.html
+++ /dev/null
@@ -1,208 +0,0 @@
----
-layout: page
-title: Error messages
-description: Things don’t always run smoothly. Our systems can fail. It’s important to craft clear, logical, and accessible error messages that help folks get things done.
----
-<section class="stacks-section">
-    {% header "h2", "Understand the error" %}
-    <p class="stacks-copy">
-        Before writing anything, make sure you know the answers to these questions:
-    </p>
-    <ul class="stacks-list">
-        <li>What happened?</li>
-        <li>How did it happen?</li>
-        <li>How can it be fixed?</li>
-        <li>Is it a user or system error, or both?</li>
-    </ul>
-    <p class="stacks-copy">
-        How can we expect a user to know what’s going on and how to fix something if <em>we</em> don’t?
-    </p>
-</section>
-<section class="stacks-section">
-    {% header "h2", "Set a basic structure" %}
-    <p class="stacks-copy">
-        A good error message structure explains what happened and what can be done about it. A good error message has the following structure:
-    </p>
-    <p class="stacks-copy p16 bar-md bg-black-100 ba bc-black-225">
-        <span class="fs-body2 ff-mono">[The error]</span>
-        <span class="fs-body2 ff-mono">[How to fix it]</span>
-    </p>
-    <p class="stacks-copy">
-        Here’s an example of an inline form error message:
-    </p>
-
-    <div class="d-flex p16 bar-md bg-black-100 has-error mb16 ba bc-black-225">
-        <div class="flex--item">
-            <div class="s-input-message fs-body2">This SVG file is invalid.</div>
-            <div class="fs-body2 ff-mono mt8 d-inline-block">[The error]</div>
-        </div>
-        <div class="flex--item">
-            <div class="s-input-message fs-body2">Check its syntax or <a>pick another file</a>.</div>
-            <div class="fs-body2 ff-mono mt8 d-inline-block">[How to fix it]</div>
-        </div>
-    </div>
-
-    <p class="stacks-copy">
-        If we can’t place the specific error, we’re deliberately vague. The best we can do is tell the user how they might fix it.
-    </p>
-    <div class="d-flex p16 bar-md bg-black-100 has-error mb16 ba bc-black-225">
-        <div class="flex--item">
-            <div class="s-input-message fs-body2">There was a problem syncing data.</div>
-            <div class="fs-body2 ff-mono mt8 d-inline-block">[The error]</div>
-        </div>
-        <div class="flex--item">
-            <div class="s-input-message fs-body2">Check your database configuration and try again.</div>
-            <div class="fs-body2 ff-mono mt8 d-inline-block">[How to fix it]</div>
-        </div>
-    </div>
-</section>
-<section class="stacks-section">
-    {% header "h2", "Keep it short and simple" %}
-    <p class="stacks-copy">
-        We want to help folks fix errors quickly, so error messages should <a href="{{ "/content/guidelines/principles#short,-simple-sentences" | url }}">be concise</a>. Strip out unnecessary words. Keep detail only when it’s relevant.
-    </p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“Can’t create ‘Engineering’ because a team with that name already exists. Specify a different name.”</td>
-                <td>“‘Engineering’ already exists. Try another team name.”</td>
-            </tr>
-            <tr>
-                <td>“Your notification failed and needs to be re-authorized.”</td>
-                <td>“Notification failed, please <a href="#">re-authorize it</a>.”</td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-<section class="stacks-section">
-    {% header "h2", "Consider etiquette" %}
-    {% header "h3", "System error" %}
-    <p class="stacks-copy">
-        Apologize when it’s the system’s fault and let the user know it’s not their fault. Use <a href="{{ "/content/guidelines/principles#use-active-voice" | url }}">an active voice</a> to accept responsibility. For example:
-    </p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“Your changes couldn’t be saved.”</td>
-                <td>“We couldn’t save your changes.”</td>
-            </tr>
-        </tbody>
-    </table>
-    {% header "h3", "User error" %}
-    <p class="stacks-copy">
-        Sometimes it’s the user’s fault, but there are ways to tell them without sounding like we’re pointing the finger. For example, we can focus on the desired action rather than telling the user they’ve messed up:
-    </p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“You’ve missed your name.”</td>
-                <td>“Please enter your name.”</td>
-            </tr>
-            <tr>
-                <td>“You can’t leave this blank.”</td>
-                <td>“Please enter a team name.”</td>
-            </tr>
-        </tbody>
-    </table>
-    <p class="stacks-copy">
-        A passive voice can work for more serious user errors, such as “This card was declined”.
-    </p>
-</section>
-<section class="stacks-section">
-    {% header "h2", "Use the right tone" %}
-    <p class="stacks-copy">
-        <a href="{{ "/content/guidelines/voice-and-tone#tone" | url }}">Tone is how you say something</a>. A message’s tone should depend on how serious the error is. Warmth is great for less serious errors, but avoid anything too lighthearted for serious errors.
-    </p>
-    <p class="stacks-copy">
-        <strong>Avoid mechanical language and jargon, opting for plain language at all times</strong>. The aim is to make a user feel like you’re there, helping them solve the error.
-    </p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“The password entered does not match our records. Please re-enter your password.”</td>
-                <td>“That password’s not right. Try again.”</td>
-            </tr>
-        </tbody>
-    </table>
-    <p class="stacks-copy">
-        At the same time, error messages are not the place to be clever or <a href="{{ "/content/guidelines/principles#jokes-&-cultural-references" | url }}">make jokes</a>. This will only muddy your message and add to your user’s frustration.
-    </p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“Whoops! Looks like your card was declined. Better ask Mom for another one.”</td>
-                <td>“This card was declined. Try another payment method.”</td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-<section class="stacks-section">
-    {% header "h2", "What happens next" %}
-    <p class="stacks-copy">
-        Some errors might need a button or link to fix or dismiss the message.
-    </p>
-    <p class="stacks-copy">
-        Always say what happens next. Buttons and links should make sense when read in isolation. Avoid just using things like “OK”. “OK” can be used to dismiss a message or take an action. Be clear to the user what they’re saying “OK” to.
-    </p>
-
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>
-                    <h2 class="fs-subheading lh-sm fc-dark mb6">Can’t display metrics</h2>
-                    <p class="fs-body1 fc-medium mb16">You need to restart your data sync.</p>
-                    <div class="d-flex gx8 ai-center">
-                        <button class="flex--item s-btn s-btn__filled js-modal-primary-btn" type="button">OK</button>
-                        <button class="flex--item s-btn js-modal-cancel-btn" type="button">Cancel</button>
-                    </div>
-                </td>
-                <td>
-                    <h2 class="fs-subheading lh-sm fc-dark mb6">Can’t display metrics</h2>
-                    <p class="fs-body1 fc-medium mb16">You need to restart your data sync.</p>
-                    <div class="d-flex gx8 ai-center">
-                        <button class="flex--item s-btn s-btn__filled js-modal-primary-btn" type="button">OK, restart sync</button>
-                        <button class="flex--item s-btn js-modal-cancel-btn" type="button">Cancel</button>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-<section class="stacks-section">
-    {% header "h2", "Design, placement, and timing" %}
-    <p class="stacks-copy">
-        Error messages should take the whole user experience into consideration. It should be clear what triggers an error message and what it’s related to.
-    </p>
-    <ul class="stacks-list">
-        <li><a href="{{ "/product/components/inputs#validation-states" | url }}">Inline validation</a> styles are best for displaying errors in <strong>UI with form fields</strong>.</li>
-        <li><a href="{{ "/product/components/notices#inline" | url }}">Inline notifications</a> are best for displaying errors in <strong>UI without form fields</strong>. They should be located within close proximity of items that affect a feature.</li>
-    <li><a href="{{ "/product/components/modals" | url }}">Modals</a> are best when you want to ensure you <strong>capture someone’s focus</strong>.</li>
-    </ul>
-    <p class="stacks-copy">
-        <a href="{{ "/product/components/notices#toast" | url }}">Toast notifications</a> are best for confirming that an action someone performed is taking place or successfully completed. Since they appear away from the layout and disappear after a few seconds, toast notifications aren’t recommended for error messages.
-    </p>
-</section>
diff --git a/packages/stacks-docs/content/examples/preferences-settings.html b/packages/stacks-docs/content/examples/preferences-settings.html
deleted file mode 100644
index a4f77bf91f..0000000000
--- a/packages/stacks-docs/content/examples/preferences-settings.html
+++ /dev/null
@@ -1,274 +0,0 @@
----
-layout: page
-title: Preferences and settings
-description:
----
-<section class="stacks-section">
-    {% header "h2", "Write labels in the affirmative" %}
-    <p class="stacks-copy">Preferences and settings should always be written in the affirmative—even if the preference is meant to disable a feature. When a user checks a feature preference, they should be <em>getting</em> that feature.</p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>
-                    <div class="d-flex g8 ai-center">
-                        <div class="flex--item">
-                            <input class="s-checkbox" type="checkbox" id="affirmative-dont-example1" checked onclick="return false;" />
-                        </div>
-                        <label class="flex--item s-label fw-normal" for="affirmative-dont-example1">Disable sticky header</label>
-                    </div>
-                </td>
-                <td>
-                    <div class="d-flex g8 ai-center">
-                        <div class="flex--item">
-                            <input class="s-checkbox" type="checkbox" id="affirmative-do-example1" onclick="return false;" />
-                        </div>
-                        <label class="flex--item s-label fw-normal" for="affirmative-do-example1">Enable sticky header</label>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="d-flex g8 ai-center">
-                        <div class="flex--item">
-                            <input class="s-checkbox" type="checkbox" id="affirmative-dont-example2" onclick="return false;" />
-                        </div>
-                        <label class="flex--item s-label fw-normal" for="affirmative-dont-example2">Disable left navigation</label>
-                    </div>
-                </td>
-                <td>
-                    <div class="d-flex g8 ai-center">
-                        <div class="flex--item">
-                            <input class="s-checkbox" type="checkbox" id="affirmative-do-example2" onclick="return false;" checked />
-                        </div>
-                        <label class="flex--item s-label fw-normal" for="affirmative-do-example2">Enable left navigation</label>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="d-flex g8 ai-center">
-                        <div class="flex--item">
-                            <input class="s-checkbox" type="checkbox" id="affirmative-dont-example3" checked onclick="return false;" />
-                        </div>
-                        <label class="flex--item s-label fw-normal" for="affirmative-dont-example3">Disable light mode</label>
-                    </div>
-                </td>
-                <td>
-                    <div class="d-flex g8 ai-center">
-                        <div class="flex--item">
-                            <input class="s-checkbox" type="checkbox" id="affirmative-do-example3" onclick="return false;" />
-                        </div>
-                        <label class="flex--item s-label fw-normal" for="affirmative-do-example3">Enable dark mode</label>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="d-flex g8 ai-center">
-                        <div class="flex--item">
-                            <input class="s-checkbox" type="checkbox" id="affirmative-dont-example4" onclick="return false;" />
-                        </div>
-                        <label class="flex--item s-label fw-normal" for="affirmative-dont-example4">Disallow advertising</label>
-                    </div>
-                </td>
-                <td>
-                    <div class="d-flex g8 ai-center">
-                        <div class="flex--item">
-                            <input class="s-checkbox" type="checkbox" id="affirmative-do-example4" checked onclick="return false;" />
-                        </div>
-                        <label class="flex--item s-label fw-normal" for="affirmative-do-example4">Allow advertising</label>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="d-flex g8 ai-center">
-                        <div class="flex--item">
-                            <input class="s-checkbox" type="checkbox" id="affirmative-dont-example5" checked onclick="return false;" />
-                        </div>
-                        <label class="flex--item s-label fw-normal" for="affirmative-dont-example5">Hide your real name</label>
-                    </div>
-                </td>
-                <td>
-                    <div class="d-flex g8 ai-center">
-                        <div class="flex--item">
-                            <input class="s-checkbox" type="checkbox" id="affirmative-do-example5" onclick="return false;" />
-                        </div>
-                        <label class="flex--item s-label fw-normal" for="affirmative-do-example5">Show your real name</label>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-<section class="stacks-section">
-    {% header "h2", "Use descriptions to explain" %}
-    <p class="stacks-copy">Descriptions are optional and can supplement a label in a few ways:</p>
-    <ul class="stacks-list">
-        <li>Further define a label</li>
-        <li>Explain how the input will be used</li>
-        <li>Show an example a valid input</li>
-    </ul>
-    <p class="stacks-copy">Avoid using tooltips.</p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>
-                    <div class="d-flex gy4 fd-column">
-                        <div class="flex--item">
-                            <label class="d-block s-label" for="descriptions-dont-example1">
-                                Site name
-                            </label>
-                        </div>
-                        <div class="d-flex ps-relative">
-                            <input class="s-input" id="descriptions-dont-example1" type="text" placeholder="" />
-                        </div>
-                    </div>
-                </td>
-                <td>
-                    <div class="d-flex gy4 fd-column">
-                        <div class="flex--item">
-                            <label class="d-block s-label" for="descriptions-do-example1">
-                                Site name
-                                <p class="s-description mt2">Describes the site in the product, emails, integrations, and logs.</p>
-                            </label>
-                        </div>
-                        <div class="d-flex ps-relative">
-                            <input class="s-input" id="descriptions-do-example1" type="text" placeholder="" />
-                        </div>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="d-flex gy4 fd-column">
-                        <div class="d-flex jc-space-between ai-center">
-                            <label class="flex--item s-label" for="descriptions-dont-example2">
-                                App descriptor
-                            </label>
-                            <span class="px12 mrn12 fc-black-350" title="This is automatically generated. You only need to manually set this if you’re reinstalling the app." data-controller="s-tooltip" data-s-tooltip-placement="bottom-end">{% icon "Help" %}</span>
-                        </div>
-                        <div class="d-flex ps-relative">
-                            <input class="s-input" id="descriptions-dont-example2" type="text" placeholder="" />
-                        </div>
-                    </div>
-                </td>
-                <td>
-                    <div class="d-flex gy4 fd-column">
-                        <div class="flex--item">
-                            <label class="d-block s-label" for="descriptions-do-example2">
-                                App descriptor
-                                <p class="s-description mt2">This is automatically generated. You only need to manually set this if you’re reinstalling the app.</p>
-                            </label>
-                        </div>
-                        <div class="d-flex ps-relative">
-                            <input class="s-input" id="descriptions-do-example2" type="text" placeholder="" />
-                        </div>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="d-flex gy4 fd-column">
-                        <div class="flex--item">
-                            <label class="d-block s-label" for="descriptions-dont-example3">
-                                Industries
-                            </label>
-                        </div>
-                        <div class="d-flex ps-relative">
-                            <input class="s-input" id="descriptions-dont-example3" type="text" placeholder="e.g. Advertising, Finance" />
-                        </div>
-                    </div>
-                </td>
-                <td>
-                    <div class="d-flex gy4 fd-column">
-                        <div class="flex--item">
-                            <label class="d-block s-label" for="descriptions-do-example3">
-                                Industries
-                                <p class="s-description mt2">Add up to 4.</p>
-                            </label>
-                        </div>
-                        <div class="d-flex ps-relative">
-                            <input class="s-input" id="descriptions-do-example3" type="text" placeholder="e.g. Advertising, Finance" />
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-<section class="stacks-section">
-    {% header "h2", "Don’t rely on placeholder text" %}
-    <p class="stacks-copy">Placeholder text can be used to show an example of a valid input.</p>
-    <p class="stacks-copy">Placeholder text disappears once a character is typed in the input, so the user should be able to complete their task without placeholder text always visible.</p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>
-                    <div class="d-flex gy4 fd-column">
-                        <div class="flex--item">
-                            <label class="d-block s-label" for="placeholder-dont-example1">
-                                Single sign-on Service Url
-                            </label>
-                        </div>
-                        <div class="d-flex ps-relative">
-                            <input class="s-input" id="placeholder-dont-example1" type="text" placeholder="Must be https" />
-                        </div>
-                    </div>
-                </td>
-                <td>
-                    <div class="d-flex gy4 fd-column">
-                        <div class="flex--item">
-                            <label class="d-block s-label" for="placeholder-do-example1">
-                                Single sign-on Service Url
-                                <p class="s-description mt2">Must be https</p>
-                            </label>
-                        </div>
-                        <div class="d-flex ps-relative">
-                            <input class="s-input" id="placeholder-do-example1" type="text" placeholder="https://..." />
-                        </div>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="d-flex gy4 fd-column">
-                        <div class="flex--item">
-                            <label class="d-block s-label " for="placeholder-dont-example2">
-                                Role
-                            </label>
-                        </div>
-                        <div class="d-flex ps-relative">
-                            <input class="s-input" id="placeholder-dont-example2" type="text" placeholder="Add up to 2 roles" />
-                        </div>
-                    </div>
-                </td>
-                <td>
-                    <div class="d-flex gy4 fd-column">
-                        <div class="flex--item">
-                            <label class="d-block s-label" for="placeholder-do-example2">
-                                Role
-                                <p class="s-description mt2">Add up to 2 roles</p>
-                            </label>
-                        </div>
-                        <div class="d-flex ps-relative">
-                            <input class="s-input" id="placeholder-do-example2" type="text" placeholder="e.g. Full Stack, Back-end" />
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</section>
diff --git a/packages/stacks-docs/content/examples/success-messages.html b/packages/stacks-docs/content/examples/success-messages.html
deleted file mode 100644
index 49e72772f7..0000000000
--- a/packages/stacks-docs/content/examples/success-messages.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-layout: page
-title: Success messages
-description: It’s important that we keep users informed when actions are successfully completed. Success states throughout the user flow let users know that they’re either getting closer to achieving the goal, or have completed it.
----
-<section class="stacks-section">
-    {% header "h2", "Understand the situation" %}
-    <p class="stacks-copy">
-        Before writing anything, make sure you know the answers to these questions:
-    </p>
-    <ul class="stacks-list">
-        <li>How close is the user to achieving the intended goal?</li>
-        <li>What does the user need to do next?</li>
-        <li>Is this message likely to appear frequently or is it unique?</li>
-    </ul>
-</section>
-<section class="stacks-section">
-    {% header "h2", "Be specific" %}
-    <p class="stacks-copy">
-        A good success message provides clear information that the performed action was completed. It’s fine to let users know that what they did was successful, but even better to be specific about the action they took.
-    </p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“Successfully saved.”</td>
-                <td>“Your account details have been saved.”</td>
-            </tr>
-            <tr>
-                <td>“Upgrade complete.”</td>
-                <td>“You’ve upgraded to the Business tier of Teams.”</td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-<section class="stacks-section">
-    {% header "h2", "Use the right tone" %}
-    <p class="stacks-copy">
-        <a href="{{ "/content/guidelines/voice-and-tone#tone" | url }}">Tone is how you say something</a>. Excitement makes sense for successfully finishing a large task, but avoid overdoing it for a regular system success. Limit <a href="{{ "/content/guidelines/grammar-and-mechanics#exclamation-points" | url }}">exclamation marks</a> to one per page.
-    </p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“Thanks for updating your email.”</td>
-                <td>“Your email has been updated.”</td>
-            </tr>
-            <tr>
-                <td>“Account created.”</td>
-                <td>“Thanks for signing up. Your account has been created.”</td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-<section class="stacks-section">
-    {% header "h2", "What happens next" %}
-    <p class="stacks-copy">
-        Is the successful action part of a larger goal? Are there other recommended actions that need to be performed? Success messages can be a good way to guide the user to the next action for a more seamless interaction.
-    </p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>
-                    <p>“We’ve saved your profile changes.”</p>
-                    <button class="s-btn s-btn__filled" type="button">OK</button>
-                </td>
-                <td>
-                    <p>“We’ve saved your profile changes.”</p>
-                    <button class="s-btn s-btn__filled" type="button">View profile</button>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <p>“Your payment is complete.”</p>
-                    <button class="s-btn s-btn__filled" type="button">OK</button>
-                </td>
-                <td>
-                    <p>“Your payment is complete.”</p>
-                    <button class="s-btn s-btn__filled" type="button">View receipt</button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-<section class="stacks-section">
-    {% header "h2", "Design, placement, and timing" %}
-    <ul class="stacks-list">
-        <li><a href="{{ "/product/components/inputs#validation-states" | url }}">Inline validation</a> styles are best for displaying success in <strong>UI with form fields</strong>.</li>
-        <li><a href="{{ "/product/components/notices#inline" | url }}">Toasts</a> are best for <strong>common success messages</strong>. Since they appear away from the layout and disappear after a few seconds, these are great for simple actions that were successfully completed.</li>
-    <li><a href="{{ "/product/components/modals" | url }}">Modals</a> are best when you want to ensure you <strong>capture someone’s focus</strong> for a decision.</li>
-    </ul>
-</section>
diff --git a/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html b/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html
deleted file mode 100644
index b40c1a8735..0000000000
--- a/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html
+++ /dev/null
@@ -1,631 +0,0 @@
----
-layout: page
-title: Grammar and mechanics
-description: A guide to help anyone who writes, edits, or translates public-facing text for Stack Overflow.
----
-<section class="stacks-section">
-    {% header "h2", "Basics" %}
-    {% header "h3", "Use active tense (most of the time)" %}
-    <p class="stacks-copy">You should <em>almost</em> always write in the active voice, particularly if the user needs to do something.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“You should update your profile”</td>
-                <td>“Update your profile”</td>
-            </tr>
-        </tbody>
-    </table>
-    <p class="stacks-copy">While it’s generally best to avoid the passive voice, <em>in certain situations it helps you sound softer without adding too many words</em>. It’s especially useful for time-sensitive messages like payment confirmations and error messages. You can also use the passive voice to avoid referring to yourself or Stack Overflow.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“We cancelled your order.”</td>
-                <td>“Your order has been cancelled.”</td>
-            </tr>
-            <tr>
-                <td>“We’ve suspended your account.”</td>
-                <td>“Your account has been suspended.”</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Use contractions" %}
-    <p class="stacks-copy">Contractions make copy sound more human. Avoid contractions that sound awkward when you say them out loud, or are not commonly used in everyday conversation.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“This’ll help you get answers to your questions.”</td>
-                <td>“It’s designed to help you get answers to your questions.”</td>
-            </tr>
-            <tr>
-                <td>“There must’ve been an error with your order.”</td>
-                <td>“There’s an error with your order.”</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Use sentence casing" %}
-    <p class="stacks-copy">Use sentence casing for all headings and calls-to-action. Proper or trademarked nouns (e.g. countries, product names) should be capitalized. If a feature or product is unique to Stack Overflow, capitalize it (Stack Overflow for Teams, Stack Overflow Jobs).</p>
-
-    {% header "h4", "Headings" %}
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Performance Overview</td>
-                <td>Performance overview</td>
-            </tr>
-            <tr>
-                <td>Edit Your Profile</td>
-                <td>Edit your profile</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h4", "Buttons and links" %}
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Post Job</td>
-                <td>Post job</td>
-            </tr>
-            <tr>
-                <td>flag comment</td>
-                <td>Flag comment</td>
-            </tr>
-            <tr>
-                <td>cancel</td>
-                <td>Cancel</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h4", "Feature or product names" %}
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Job Alerts</td>
-                <td>job alerts</td>
-            </tr>
-            <tr>
-                <td>Blog</td>
-                <td>blog</td>
-            </tr>
-            <tr>
-                <td>Profile</td>
-                <td>profile</td>
-            </tr>
-            <tr>
-                <td>Stack Overflow talent</td>
-                <td>Stack Overflow Talent</td>
-            </tr>
-            <tr>
-                <td>stack exchange</td>
-                <td>Stack Exchange</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Use American spelling and standards" %}
-    <p class="stacks-copy">Use American spelling for all public-facing content. When in doubt, check the <a href="https://www.merriam-webster.com/">Merriam-Webster dictionary</a> for the preferred spelling of specific terms.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Recognise</td>
-                <td>Recognize</td>
-            </tr>
-            <tr>
-                <td>Travelled</td>
-                <td>Traveled</td>
-            </tr>
-            <tr>
-                <td>Colour</td>
-                <td>Color</td>
-            </tr>
-            <tr>
-                <td>9 April 2019</td>
-                <td>April 9, 2019</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "OK" %}
-    <p class="stacks-copy">Let’s use the abbreviated version of “OK”. This is preferred to “Okay” and its variants. “OK” should be fully capitalized in every context. Tonally, it may be appropriate to use “OK” in an <a href="{{ "/content/examples/error-messages#what-happens-next" | url }}">actionable button</a>—if it isn’t used alone.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Okay</td>
-                <td rowspan="3" class="bb bc-black-225">OK</td>
-            </tr>
-            <tr>
-                <td>okay</td>
-            </tr>
-            <tr>
-                <td>Ok</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Pronouns" %}
-    <p class="stacks-copy">We think it’s most clear to leave off any possessives when referring to users or features. However, if you must, refer to users as “you.” Don’t put words in their mouths with phrases that use “I” or “my.”</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>My Teams</td>
-                <td>Teams</td>
-            </tr>
-            <tr>
-                <td>My settings</td>
-                <td>Settings</td>
-            </tr>
-            <tr>
-                <td>Change my email settings</td>
-                <td>Change your email settings</td>
-            </tr>
-        </tbody>
-    </table>
-    <p class="stacks-copy">When referring to Stack Overflow, use “we.” However, try to avoid inserting Stack Overflow into the content as much as possible.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Stack Overflow is here to help. They’ll make changes soon.</td>
-                <td>Stack Overflow is here to help. We’ll make changes soon.</td>
-            </tr>
-        </tbody>
-    </table>
-    <p class="stacks-copy">Use “their” as a singular, gender-neutral pronoun when the gender of the subject is unknown or unimportant. Avoid using gendered terms.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>When a new user is added, he or she will be able to edit content.</td>
-                <td>When a new user is added, they’ll be able to edit content.</td>
-            </tr>
-            <tr>
-                <td>We appreciate the guys and gals of Stack Overflow.</td>
-                <td>We appreciate the Stack Overflow community.</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Mind your verbs and nouns" %}
-    <p class="stacks-copy">Take extra care when using “login,” and “log in.” The former is a noun while the latter is a verb. Do not use “login” as a verb. The same logic applies to “signup,” “sign up.”</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Login to ask a question</td>
-                <td>Log in to ask a question</td>
-            </tr>
-            <tr>
-                <td>Add a log in to your account</td>
-                <td>Add a login to your account</td>
-            </tr>
-            <tr>
-                <td>Signup to ask a question</td>
-                <td>Sign up to ask a question</td>
-            </tr>
-            <tr>
-                <td>Complete email sign up</td>
-                <td>Complete email signup</td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Punctuation" %}
-    {% header "h3", "Ampersands" %}
-    <p class="stacks-copy">Don’t use ampersands (&) unless it’s part of a branded term. Spell out the word “and” instead.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Update your email address & password</td>
-                <td>Update your email address and password</td>
-            </tr>
-            <tr>
-                <td>Stack Overflow Q and A</td>
-                <td>Stack Overflow Q&A</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Apostrophes" %}
-    <p class="stacks-copy">Use apostrophes to represent omitted letters or numbers (can’t, you’re, ’90s) and to form possessives.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Admins role</td>
-                <td>Admin’s role</td>
-            </tr>
-            <tr>
-                <td>Moderators’s tasks</td>
-                <td>Moderators’ tasks</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Colons" %}
-    <p class="stacks-copy">Avoid using colons unless you’re introducing a list. If you need to use a colon in a sentence, don’t capitalize the first word after it.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Your job listing was published: On January 15</td>
-                <td>Your job listing was published on January 15 </td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Ellipses" %}
-    <p class="stacks-copy">The ellipses (…) can be used in place of a missing piece of text (most commonly to show the deletion of words from a quote). Avoid using ellipses in text. It’s appropriate to use an ellipses in input placeholder copy. Use the real single character ellipsis unicode (…) instead of three periods (...).</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Avoid subjective questions… stick to fact-based questions.</td>
-                <td>Avoid subjective questions. Stick to fact-based questions.</td>
-            </tr>
-            <tr>
-                <td>Search...</td>
-                <td>Search…</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Exclamation points" %}
-    <p class="stacks-copy">Don’t use exclamation points unless something is really exciting! If you have to use one, limit yourself to one exclamation mark per page.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Your email settings have been saved!</td>
-                <td>You’ve published your first job listing!</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Hyphens" %}
-    <p class="stacks-copy">Use hyphens to combine two words that modify or describe the noun that follows, or join prefixes and suffixes when there are two vowels beside each other.</p>
-    <p class="stacks-copy">Use an en dash with no spaces in between (–) for a fixed range of numbers. Avoid using them in a sentence. Avoid using em dashes in microcopy.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Start your free 14 day trial.</td>
-                <td>Start your free 14-day trial.</td>
-            </tr>
-            <tr>
-                <td>January 7 – 9</td>
-                <td>January 7–9</td>
-            </tr>
-            <tr>
-                <td>Get started – sign up today.</td>
-                <td>Get started. Sign up today. </td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Question marks" %}
-    <p class="stacks-copy">Avoid using question marks wherever possible. Reword into affirmative statements wherever you can. It’s okay to use question marks if you don’t know the result of the question (“Did you forget your email?”).</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Want to learn more?</td>
-                <td>Learn more</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Quotation marks" %}
-    <p class="stacks-copy">Use quotation marks to define words (“Accepted answer”) or to quote text. Always use <a href="http://smartquotesforsmartpeople.com/">smart, curly quotes</a> (“), not vertical, straight quotes ("). Single curly quotes (’) can be used when nested within a set of double quotes. Place punctuation marks inside quotation marks.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>"I meet people who use Stack Overflow every single day", said Joel Spolsky.</td>
-                <td>“I meet people who use Stack Overflow every single day,” said Joel Spolsky.</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Commas" %}
-    <p class="stacks-copy">Use the oxford comma in sentences. Don’t use a comma to separate two distinct phrases (comma splicing). Use two sentences instead.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Our community is rooted in kindness, collaboration and mutual respect.</td>
-                <td>Our community is rooted in kindness, collaboration, and mutual respect.</td>
-            </tr>
-            <tr>
-                <td>Thanks for contacting us, we’ll be in touch soon.</td>
-                <td>Thank you for contacting us. We’ll be in touch soon.</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Periods" %}
-    <p class="stacks-copy">Don’t use periods in interface copy unless it’s a full sentence or description.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t use periods in:</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do use periods in:</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Sentence fragments</td>
-                <td>Complete sentences</td>
-            </tr>
-            <tr>
-                <td>Top-level headings and titles</td>
-                <td>Body text, descriptions, and subtitles</td>
-            </tr>
-            <tr>
-                <td>Buttons</td>
-                <td>Help text under text boxes (form fields)</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Semicolons" %}
-    <p class="stacks-copy">Avoid using semicolons. When connecting two closely related ideas, use a comma or write two sentences.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>We shaved off about five minutes from last year’s survey; the survey should take about 25 minutes to complete.</td>
-                <td>We shaved off about five minutes from last year’s survey. The survey should take about 25 minutes to complete. </td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Date and time" %}
-    <p class="stacks-copy">These conventions apply to all English language sites, and do not include international Stack Overflow sites.</p>
-    {% header "h3", "General" %}
-    <p class="stacks-copy">In most cases, use relative dates and times (eg. 3 minutes ago) with the exact date and time in the <code class="stacks-code">title</code> attribute (eg. September 2, 2019 at 4:35 pm). When possible, use the longhand time (eg. 7 years ago). If there are space constraints, use the abbreviations below.</p>
-
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb24">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-black-225 bg-transparent fs-body1 s-table--cell4">Longhand</th>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-black-225 bg-transparent fs-body1 s-table--cell4">Abbreviation</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>7 years</td>
-                <td>7y</td>
-            </tr>
-            <tr>
-                <td>3 months</td>
-                <td>3mo</td>
-            </tr>
-            <tr>
-                <td>6 days</td>
-                <td>6d</td>
-            </tr>
-            <tr>
-                <td>6 hours</td>
-                <td>6h</td>
-            </tr>
-            <tr>
-                <td>5 minutes</td>
-                <td>5min</td>
-            </tr>
-            <tr>
-                <td>12 seconds</td>
-                <td>12s</td>
-            </tr>
-        </tbody>
-    </table>
-
-    <p class="stacks-copy">Use exact dates for moderator tools and other cases where the user needs quick access to the exact date and time.</p>
-
-    {% header "h3", "Dates" %}
-    <p class="stacks-copy">If you’re using exact dates, use the month’s full name where possible (eg. October). If there are space constraints, use 3-letter abbreviations with the exception of May, (eg. Oct.). Always write out the full year.</p>
-    <p class="stacks-copy">Don’t write dates numerically since differing international standards can lead to confusion (eg. 08-12-19 vs. 12-08-19).</p>
-    <p class="stacks-copy">There is no need to add <sup>st</sup>, <sup>nd</sup>, <sup>th</sup>, or <sup>rd</sup> to dates.</p>
-
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>September 2, ’19</td>
-                <td>September 2, 2019</td>
-            </tr>
-            <tr>
-                <td>9-2-19</td>
-                <td>Sep. 2, 2019</td>
-            </tr>
-            <tr>
-                <td>September 2nd</td>
-                <td>September 2</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Time" %}
-    <p class="stacks-copy">If you’re using exact time, use the 12-hour clock, followed by am or pm. Include a space after the last number (eg 1:20 pm)</p>
-    <p class="stacks-copy">Time should be relative to the user’s time zone (not UTC).</p>
-    <p class="stacks-copy">If indicating both the date and time, separate them with the word “at”, rather than with a comma (eg. September 2, 2019 at 4:35 pm) or “@” symbol (eg. September 2, 2019 @ 4:35 pm).</p>
-    <p class="stacks-copy">Include a time zone only if it’s necessary, such as for an event listing (eg. 7 pm Eastern).</p>
-
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>15:30</td>
-                <td>3:30 pm</td>
-            </tr>
-            <tr>
-                <td>
-                    September 2, 2019 @ 4:35 pm<br>
-                    September 2, 2019, 4:35 pm
-                </td>
-                <td>September 2, 2019 at 4:35 pm</td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Components" %}
-    {% header "h3", "Buttons and links" %}
-    <p class="stacks-copy">Buttons and links should be clear and predictable. People should be able to anticipate what will happen when they click or tap. Button and link text should be sentence case and action led (starting with a verb). To provide enough context, use a verb+noun format except for common actions like Save or Close.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>New team</td>
-                <td>Create new team</td>
-            </tr>
-            <tr>
-                <td>Settings</td>
-                <td>View settings</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Headings and subheadings" %}
-    <p class="stacks-copy">All headings or subheadings should be concise, scannable, and sentence case. Don’t use periods at the end of headings. If a subheading is a full sentence, you may use a period. </p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Edit Your Profile.</td>
-                <td>Edit profile</td>
-            </tr>
-        </tbody>
-    </table>
-
-    {% header "h3", "Lists" %}
-    <p class="stacks-copy">When writing lists:</p>
-    <ul class="stacks-list">
-        <li>Use a colon (:) to introduce an <em>unordered</em> list.</li>
-        <li>Use sentence case.</li>
-        <li>If any list item contains two or more sentences, punctuate all list items.</li>
-        <li>If all list items are one sentence or fragments, don’t punctuate.</li>
-    </ul>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>
-                    To edit your Team’s tags…
-                    <ul>
-                        <li>Go to your Team and select “settings”,</li>
-                        <li>Select “tag settings”</li>
-                    </ul>
-                </td>
-                <td>
-                    To edit your Team’s tags:
-                    <ul>
-                        <li>Go to your Team</li>
-                        <li>Select “settings”</li>
-                        <li>Select “tag settings”</li>
-                    </ul>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-
-<section class="stacks-section">
-    {% header "h2", "Naming guidelines" %}
-    <p class="stacks-copy">For guidelines on using our product names, see <a href="/brand/copywriting/naming">Naming guidelines</a> in our Brand section.</p>
-</section>
-
diff --git a/packages/stacks-docs/content/guidelines/principles.html b/packages/stacks-docs/content/guidelines/principles.html
deleted file mode 100644
index caa863ffa0..0000000000
--- a/packages/stacks-docs/content/guidelines/principles.html
+++ /dev/null
@@ -1,173 +0,0 @@
----
-layout: page
-title: Content principles
-description: Principles and tactics for writing at Stack Overflow. These will help produce clear, consistent content for users of different professions, identities, and levels of English fluency.
----
-<section class="stacks-section">
-    {% header "h2", "7th grade reading level" %}
-    <p class="stacks-copy">
-        Write for a 7th grade reading level. Stack Overflow users are busy people with limited time and attention. They’re also located all over the world with different levels of English fluency. You can help everyone follow along by choosing simple, consistent words and phrases, and being careful about jokes and cultural references.
-    </p>
-    {% header "h3", "Simple words" %}
-    <p class="stacks-copy">If there’s a simpler word to say what you mean, use it. Always choose the short, simple word over the long, complicated one. Don’t complicate your ideas with business or insider jargon. Only use jargon when you have reason to believe it will improve user understanding.</p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx4 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Optimize</td>
-                <td>Improve</td>
-            </tr>
-            <tr>
-                <td>Falsified</td>
-                <td>Fake</td>
-            </tr>
-            <tr>
-                <td>In order to</td>
-                <td>To</td>
-            </tr>
-            <tr>
-                <td>Leverage</td>
-                <td>Use</td>
-            </tr>
-            <tr>
-                <td>Garner</td>
-                <td>Get</td>
-            </tr>
-            <tr>
-                <td>Despite the fact</td>
-                <td>Although</td>
-            </tr>
-        </tbody>
-    </table>
-    {% header "h3", "Short, simple sentences" %}
-    <p class="stacks-copy">Trim word bloat. Don’t make people read more than they need to.</p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Questions should be merged when they are 99% identical and it would be beneficial to have all the answers from multiple duplicate questions in one place.</td>
-                <td>Merge questions that are almost alike. This option will also merge answer lists. </td>
-            </tr>
-            <tr>
-                <td>If you need to delete your account, merge accounts, or have an issue that can't be addressed by Meta, please use the form below:</td>
-                <td>Questions? Contact us.</td>
-            </tr>
-        </tbody>
-    </table>
-    {% header "h3", "Jokes & cultural references" %}
-    <p class="stacks-copy">Be careful with jokes and cultural references. Jokes, idioms, slang, and regional or cultural references don’t always translate well for our global audience. The next time you’re making a reference, ask yourself if there’s a more universal way to make your point.</p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“It was like trying to take care of your kids while playing WoW at the same time.”</td>
-                <td>“It was like trying to rub your stomach and pat your head at the same time.”</td>
-            </tr>
-            <tr>
-                <td>“This person likes to keep an air of mystery to them.”</td>
-                <td><em>In this situation, humor isn’t appropriate. <a href="{{ "/content/voice-and-tone" | url }}">See more about tone.</a></em></td>
-            </tr>
-        </tbody>
-    </table>
-    {% header "h3", "Naming" %}
-    <p class="stacks-copy">Pick names early and implement them consistently. Consistent language reduces the number of things your users have to learn or remember. If multiple names already exist, identify and eliminate them.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx4 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Inbox alerts</td>
-                <td rowspan="3" class="bb bbw1 bc-black-225">Inbox notifications</td>
-            </tr>
-            <tr>
-                <td>Inbox notifications</td>
-            </tr>
-            <tr>
-                <td>Inbox messages</td>
-            </tr>
-        </tbody>
-    </table>
-    {% header "h3", "Exaggeration" %}
-    <p class="stacks-copy">Avoid exaggerated statements. When possible, back up your claims with facts and data. Be careful with adjectives and modifiers.</p>
-    <table class="s-table s-table__lg fs-body2 w100 wmx5">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Endless possibilities</td>
-                <td rowspan="4">Choose from external hosting options or host on stackoverflow.com.</td>
-            </tr>
-            <tr>
-                <td>Dynamic</td>
-            </tr>
-            <tr>
-                <td>Innovative</td>
-            </tr>
-            <tr>
-                <td>Powerful</td>
-            </tr>
-            <tr>
-                <td>Your privacy is our #1 priority.</td>
-                <td>Manage your privacy through simple settings.</td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-<section class="stacks-section">
-    {% header "h2", "Action-oriented" %}
-    <p class="stacks-copy">Users are trying to get things done. Write and structure your content so that people can <strong>easily scan and take the most important actions. Avoid using negative language.</strong></p>
-    {% header "h3", "Make it scannable" %}
-    <p class="stacks-copy">Use headings and bullets to make your content easier to scan.</p>
-    {% header "h3", "Say it up front" %}
-    <p class="stacks-copy">Think about what people need to know right away, and move that information to the top.</p>
-    {% header "h3", "Use active voice" %}
-    <p class="stacks-copy">Use the active voice, particularly in product content. Start every CTA with a strong verb.</p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Your company can use Stack Overflow to reach the world’s developers. We’re excited to help you start the developer hiring process.</td>
-                <td>Reach the world’s developers.<br><a href="#">Create job listing</a></td>
-            </tr>
-            <tr>
-                <td>For 14 days, you can try Teams for free. We make it easy for you to create a team.</td>
-                <td>Get started with a 14-day free trial.<br><a href="#">Create Team</a></td>
-            </tr>
-        </tbody>
-    </table>
-    {% header "h3", "Negative language" %}
-    <p class="stacks-copy">Be careful with negative language. It is usually longer, less friendly, and less active than positive language.</p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 wmx6">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“It doesn’t work” is not a problem statement.</td>
-                <td>Use specific examples in your problem statement. </td>
-            </tr>
-            <tr>
-                <td>Password cannot be empty.</td>
-                <td>Enter your password to continue.</td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-<p class="m0 fc-caption fc-light">This content was adapted from <a href="http://www.nicelysaid.co/">Nicely Said</a> and the <a href="https://polaris.shopify.com/content/product-content">Shopify Content Guide</a>.</p>
diff --git a/packages/stacks-docs/content/guidelines/voice-and-tone.html b/packages/stacks-docs/content/guidelines/voice-and-tone.html
deleted file mode 100644
index 17db03ea02..0000000000
--- a/packages/stacks-docs/content/guidelines/voice-and-tone.html
+++ /dev/null
@@ -1,132 +0,0 @@
----
-layout: page
-title: Voice and tone
-description: The difference between voice and tone, and how each applies to Stack Overflow.
----
-<section class="stacks-section">
-    {% header "h2", "Voice" %}
-    <p class="stacks-copy">
-        <strong>Voice is the company’s public personality.</strong> A clear, consistent voice makes all communications sound like they came from the same place.
-    </p>
-    {% header "h3", "Transparent, not blunt" %}
-    <ul class="stacks-list">
-        <li>Be upfront with users, especially if we make a mistake.</li>
-        <li>Back up claims with facts and concrete examples.</li>
-        <li>Break down complicated situations into steps to help users focus on one thing at at time.</li>
-    </ul>
-    {% header "h3", "Empathetic, not overprotective" %}
-    <ul class="stacks-list">
-        <li>Communicate in a way that’s thoughtful toward people’s situations and emotions.</li>
-        <li>Offer encouragement and practical advice. </li>
-        <li>Help people on their own terms by using words they’ll understand.</li>
-    </ul>
-    {% header "h3", "Confident, not arrogant" %}
-    <ul class="stacks-list">
-        <li>Don’t talk down to users.</li>
-        <li>Don’t assume users are familiar with Stack Overflow or how it works.</li>
-        <li>Help people succeed by speaking plainly at the moments they’re likely to need help.</li>
-    </ul>
-    {% header "h3", "Mission-driven, not political" %}
-    <ul class="stacks-list">
-        <li>Be straightforward about our mission to be a welcoming, inclusive community.</li>
-        <li>Avoid us vs. them binaries (eg. newbies vs. power users)</li>
-    </ul>
-    <table class="s-table s-table__lg fs-body2 w100 wmx6">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell6">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell6">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>“Join us in building an expert community of the best developers in the world.”</td>
-                <td rowspan="2">“Join us in building a community where all people feel welcome and can participate, regardless of expertise or identity.”</td>
-            </tr>
-            <tr>
-                <td>“Join us in a movement to diversify the developer community and amplify marginalized voices in technology.”</td>
-            </tr>
-            <tr>
-                <td>“If you’re new to the site, make it as easy as possible for experienced community members to help you. Remember that they are volunteers.”</td>
-                <td>“If you’re here to get help, make it as easy as possible for others to help you. <a href="#">Follow our guidelines</a> and remember that our community is made possible by volunteers.”</td>
-            </tr>
-            <tr>
-                <td>“If you’re an experienced contributor, be patient and welcoming. New users may have a hard time learning how to participate in our community.”</td>
-                <td>“If you’re here to help others, be patient and welcoming. Learning how to participate in our community can be hard. Offer support if you see someone struggling or otherwise in need of help.”</td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-<section class="stacks-section">
-    {% header "h2", "Tone" %}
-    <p class="stacks-copy">
-        <strong>Tone changes to fit the situation.</strong> Help people succeed by showing your empathy and matching your tone with the user’s emotions and situations, especially in times of stress or confusion. <strong>Avoid jargon</strong> unless it’s absolutely necessary. <strong>Let people know how things will benefit them</strong>, and <strong>what they can do next</strong>.
-    </p>
-    {% header "h3", "Positive" %}
-    <p class="stacks-copy">In positive situations, a user may feel interest, curiosity, and/or delight. You can match those emotions by adopting an <strong>encouraging and friendly tone</strong>. If you’re writing good news like an announcement or confirmation, it’s ok to be more casual. </p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-black-225 bg-transparent fs-body1 s-table--cell4">Context</th>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Payment successfully processed</td>
-                <td>“We have processed your payment for 65 Candidate Search seats on June 12, 2018. <a href="#">View receipt</a>”</td>
-                <td>“Your payment has been successfully processed. <a href="#">View receipt</a>”</td>
-            </tr>
-            <tr>
-                <td>Team has hit 100 answer milestone</td>
-                <td>“Your team contributed 100 answers, 90 questions, 354 upvotes, and 19 edits in the last 30 days.”</td>
-                <td>“Your team contributed 100 answers last month! Continue growing your team’s knowledge by <a href="#">inviting more team members</a>.”</td>
-            </tr>
-        </tbody>
-    </table>
-    {% header "h3", "Neutral" %}
-    <p class="stacks-copy">In neutral situations, the user may feel interest, curiosity, and/or stress. You can match these emotions by adopting a <strong>straightforward and helpful tone</strong>. If you’re providing instructions, provide enough detail to give the user confidence. Avoid telling the user how they should think or feel.</p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-black-225 bg-transparent fs-body1 s-table--cell4">Context</th>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>User’s bounty has been posted</td>
-                <td>“Your bounty has been posted. The bountied question will get a special indicator and appear on the Featured tab for one week. Don’t worry if you don’t get the answer you want &ndash; you can always post another bounty.”</td>
-                <td>“Your bounty has been posted. You’ll be notified when you receive answers.”</td>
-            </tr>
-            <tr>
-                <td>First time posting an answer</td>
-                <td>“Tags come with advanced features like tag watching, wikis, and synonyms.”</td>
-                <td>“Use tags to add as much (or as little) structure as your organization needs.”</td>
-            </tr>
-        </tbody>
-    </table>
-    {% header "h3", "Negative" %}
-    <p class="stacks-copy">In negative situations, the user might be feeling confusion, stress, annoyance, and even anger. Match their emotions by adopting a <strong>gentle, calm, and serious tone</strong>. These are important moments to show readers that you care about their feelings. Write calmly so people can focus on your message. Avoid scary, technical terms and words like “alert,” “immediately,” or “urgent” unless they’re absolutely necessary. Let people know what went wrong, and tell them what they should do next</p>
-    <table class="s-table s-table__lg fs-body2 va-top w100 mb48">
-        <thead>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-black-225 bg-transparent fs-body1 s-table--cell4">Context</th>
-            <th class="btw0 bxw0 bbw3 bbw3 bc-red-400 fc-red-400 bg-transparent fs-body1 s-table--cell4">{% icon "Clear", "mtn1 mbn1" %} Don’t</th>
-            <th class="btw0 bxw0 bbw3 bc-green-400 fc-green-400 bg-transparent fs-body1 s-table--cell4">{% icon "Checkmark", "mtn1 mbn1" %} Do</th>
-        </thead>
-        <tbody>
-            <tr>
-                <td>No Candidate Search results</td>
-                <td>“0 results.”</td>
-                <td>“No candidates matched your search. Try different keywords or adjust your filters.”</td>
-            </tr>
-            <tr>
-                <td>Account is suspended</td>
-                <td>“Due to clear signs of falsified accounts being used to artificially inflate your reputation, your account has been temporarily suspended for 7 days.<br><br>It is not fair to other users of Stack Overflow to allow users to gain reputation through <a href="#">sockpuppets</a>.”</td>
-                <td>“We noticed fraudulent voting activity on this account. This violates our <a href="#">community rules</a>, and the account will be suspended for 7 days. <br><br>If you believe this message is a mistake, <a href="#">let us know</a>.”</td>
-            </tr>
-            <tr>
-                <td>Error message</td>
-                <td>“It looks like there are incomplete place-holders; please ensure all necessary detail is complete.”</td>
-                <td>“Update the placeholder text to continue.”</td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-<p class="m0 fc-caption fc-light">This content was adapted from <a href="http://www.nicelysaid.co/">Nicely Said</a> and the <a href="https://polaris.shopify.com/content/product-content">Shopify Content Guide</a>.</p>
diff --git a/packages/stacks-docs/netlify.toml b/packages/stacks-docs/netlify.toml
index e02de7f018..94061e0a16 100644
--- a/packages/stacks-docs/netlify.toml
+++ b/packages/stacks-docs/netlify.toml
@@ -34,14 +34,6 @@
   from = "/email"
   to = "/email/guidelines/getting-started"
 
-[[redirects]]
-  from = "/content"
-  to = "/content/guidelines/principles"
-
-[[redirects]]
-  from = "/brand"
-  to = "/brand/principles"
-
 [[redirects]]
   from = "/product/guidelines"
   to = "/product/develop/using-stacks"
@@ -230,18 +222,6 @@
   from = "/product/base/pointer-events"
   to = "/product/base/interactivity"
 
-[[redirects]]
-  from = "/content/principles"
-  to = "/content/guidelines/principles"
-
-[[redirects]]
-  from = "/content/voice-and-tone"
-  to = "/content/guidelines/voice-and-tone"
-
-[[redirects]]
-  from = "/content/grammar-and-mechanics"
-  to = "/content/guidelines/grammar-and-mechanics"
-
 [[redirects]]
   from = "/assets/img/logo-stacks@2x.png"
   to = "/assets/img/logos/so/logo-stacks@2x.png"
@@ -297,3 +277,86 @@
 [[redirects]]
   from = "/product/base/typography"
   to = "/product/foundation/typography"
+
+# Brand & content migrated Feb 2026
+# To-do: remove 'alpha' when launched 
+
+[[redirects]]
+  from = "/content"
+  to = "https://alpha.stackoverflow.design/copy"
+  status = 302
+
+[[redirects]]
+  from = "/content/guidelines/principles"
+  to = "https://alpha.stackoverflow.design/copy"
+  status = 302
+
+[[redirects]]
+  from = "/content/guidelines/voice-and-tone"
+  to = "https://alpha.stackoverflow.design/copy/voice"
+  status = 302
+
+[[redirects]]
+  from = "/content/guidelines/grammar-and-mechanics/"
+  to = "https://alpha.stackoverflow.design/copy/styleguide#grammar-and-mechanics"
+  status = 302
+
+[[redirects]]
+  from = "/content/examples/alt-text/"
+  to = "https://alpha.stackoverflow.design/system/accessibility/alt"
+  status = 302
+
+[[redirects]]
+  from = "/content/examples/error-messages/"
+  to = "https://alpha.stackoverflow.design/copy/patterns/messages#error-messages"
+  status = 302
+
+[[redirects]]
+  from = "/content/examples/preferences-settings/"
+  to = "https://alpha.stackoverflow.design/copy/patterns/settings"
+  status = 302
+
+[[redirects]]
+  from = "/content/examples/success-messages/"
+  to = "https://alpha.stackoverflow.design/copy/patterns/messages#success-messages"
+  status = 302
+
+[[redirects]]
+  from = "/brand"
+  to = "https://alpha.stackoverflow.design/brand"
+  status = 302
+
+[[redirects]]
+  from = "/brand/colors"
+  to = "https://alpha.stackoverflow.design/brand/color"
+  status = 302
+
+[[redirects]]
+  from = "/brand/copywriting/concepts"
+  to = "https://alpha.stackoverflow.design/copy/styleguide#post-scores"
+  status = 302
+
+[[redirects]]
+  from = "/brand/copywriting/naming"
+  to = "https://alpha.stackoverflow.design/copy/naming"
+  status = 302
+
+[[redirects]]
+  from = "/brand/data-visualization"
+  to = "https://alpha.stackoverflow.design/brand"
+  status = 302
+
+[[redirects]]
+  from = "/brand/logo"
+  to = "https://alpha.stackoverflow.design/brand/logo"
+  status = 302
+
+[[redirects]]
+  from = "/brand/typography"
+  to = "https://alpha.stackoverflow.design/brand/typography"
+  status = 302
+
+[[redirects]]
+  from = "/brand/principles"
+  to = "https://alpha.stackoverflow.design/copy/voice"
+  status = 302
\ No newline at end of file