diff --git a/packages/stacks-classic/lib/components/description/description.less b/packages/stacks-classic/lib/components/description/description.less
index 6a999981dd..60386caa47 100644
--- a/packages/stacks-classic/lib/components/description/description.less
+++ b/packages/stacks-classic/lib/components/description/description.less
@@ -17,11 +17,8 @@
         --_de-fc: var(--yellow-400);
     }
 
-    .has-form-input({
-        padding-bottom: var(--su8);
-    });
-
     color: var(--_de-fc);
     font-size: var(--fs-body1);
+    margin-bottom: 0;
     padding: 0 var(--su2); // Helps the label visually line up with inputs
 }
diff --git a/packages/stacks-classic/lib/components/form-group/form-group.less b/packages/stacks-classic/lib/components/form-group/form-group.less
index 8948599f42..39fbb9e211 100644
--- a/packages/stacks-classic/lib/components/form-group/form-group.less
+++ b/packages/stacks-classic/lib/components/form-group/form-group.less
@@ -16,7 +16,13 @@
     legend.s-label {
         margin-bottom: var(--su8);
     }
-    
+
+    &:has(.s-input, .s-textarea, .s-select) {
+        .s-label + .s-description {
+            margin-top: var(--sun8);
+        }
+    }
+
 
     flex-direction: var(--_fg-fd);
 
diff --git a/packages/stacks-classic/lib/components/input-message/input-message.less b/packages/stacks-classic/lib/components/input-message/input-message.less
index a6fab7014c..6674baf360 100644
--- a/packages/stacks-classic/lib/components/input-message/input-message.less
+++ b/packages/stacks-classic/lib/components/input-message/input-message.less
@@ -45,5 +45,6 @@
     color: var(--_im-fc);
 
     font-size: var(--fs-caption);
+    margin-bottom: 0;
     padding: var(--su2);
 }
diff --git a/packages/stacks-classic/lib/components/label/label.less b/packages/stacks-classic/lib/components/label/label.less
index 38ca6582ad..6d5ec38a85 100644
--- a/packages/stacks-classic/lib/components/label/label.less
+++ b/packages/stacks-classic/lib/components/label/label.less
@@ -1,7 +1,6 @@
 .s-label {
     --_la-c: unset;
     --_la-fs: var(--fs-body2); // 16
-    --_la-pb: 0;
 
     // CONTEXTUAL STYLES
     &[for] {
@@ -30,9 +29,6 @@
     // Sizes
     &&__sm {
         --_la-fs: var(--fs-body1); // 14
-        .has-form-input({
-            --_la-pb: var(--su4);
-        });
     }
 
     &&__lg {
@@ -43,7 +39,10 @@
     .s-badge {
         font-weight: 400;
         margin-left: var(--su6);
-        vertical-align: middle;
+    }
+    &:has(.s-badge) {
+        display: flex;
+        align-items: center;
     }
 
     // TODO we shouldn't support descriptions and messages within labels
@@ -56,21 +55,12 @@
         padding: 0;
     }
 
-    .has-form-input({
-        --_la-pb: var(--su8);
-    });
-
-    &:has(+ .s-description) {
-        --_la-pb: var(--su4);
-    }
-
     cursor: var(--_la-c);
     font-size: var(--_la-fs);
-
     color: var(--black-500);
     font-family: inherit;
     font-weight: 600;
-    padding: 0 var(--su2) var(--_la-pb); // Helps the label visually line up with inputs
+    padding: 0 var(--su2); // Helps the label visually line up with inputs
 }
 
 .s-required-symbol {
@@ -80,18 +70,3 @@
     line-height: 0;
     text-decoration: none !important;
 }
-
-// Helper mixin to apply styles to elements
-// that have a form input sibling
-.has-form-input(@rules) {
-    &:has(
-        ~ .s-input,
-        ~ * .s-input,
-        ~ .s-select,
-        ~ * .s-select,
-        ~ .s-textarea,
-        ~ * .s-textarea
-    ) {
-        @rules();
-    }
-}
diff --git a/packages/stacks-docs/product/components/inputs.html b/packages/stacks-docs/product/components/inputs.html
index d29f0d56bc..90ce0c900b 100644
--- a/packages/stacks-docs/product/components/inputs.html
+++ b/packages/stacks-docs/product/components/inputs.html
@@ -13,14 +13,14 @@
     <div class="docs-preview">
 {% highlight html %}
 <!-- Base -->
-<div class="d-flex gy4 fd-column">
+<div class="s-form-group">
     <label class="s-label" for="example-item1">Full name</label>
-    <p class="s-description mtn2 mb0">This will be shown only to employers and other Team members.</p>
+    <p class="s-description">This will be shown only to employers and other Team members.</p>
     <input class="s-input" id="example-item1" type="text" placeholder="Enter your input here" />
 </div>
 
 <!-- Disabled -->
-<div class="d-flex gy4 fd-column is-disabled">
+<div class="s-form-group is-disabled">
     <label class="s-label" for="example-item2">Display name</label>
     <div class="d-flex ps-relative">
         <input class="s-input" id="example-item2" type="text" placeholder="Enter your input here" disabled />
@@ -29,7 +29,7 @@
 </div>
 
 <!-- Readonly -->
-<div class="d-flex gy4 fd-column ps-relative is-readonly">
+<div class="s-form-group ps-relative is-readonly">
     <label class="s-label" for="example-item3">Legal name</label>
     <div class="d-flex ps-relative">
         <input class="s-input" id="example-item3" type="text" placeholder="Enter your input here" readonly value="Prefilled readonly input" />
@@ -39,19 +39,19 @@
 {% endhighlight %}
         <div class="docs-preview--example">
             <div class="d-flex gy16 fd-column">
-                <div class="d-flex gy4 fd-column">
+                <div class="s-form-group">
                     <label class="s-label" for="example-item1">Full name</label>
-                    <p class="s-description mtn2 mb0">This will be shown only to employers and other Team members.</p>
+                    <p class="s-description">This will be shown only to employers and other Team members.</p>
                     <input class="s-input" id="example-item1" type="text" placeholder="Enter your input here" />
                 </div>
-                <div class="d-flex gy4 fd-column is-disabled">
+                <div class="s-form-group is-disabled">
                     <label class="s-label" for="example-item2">Display name</label>
                     <div class="d-flex ps-relative">
                         <input class="s-input" id="example-item2" type="text" placeholder="Enter your input here" disabled />
                         {% icon "Lock", "s-input-icon fc-black-400" %}
                     </div>
                 </div>
-                <div class="d-flex gy4 fd-column ps-relative is-readonly">
+                <div class="s-form-group ps-relative is-readonly">
                     <label class="s-label" for="example-item3">Legal name</label>
                     <div class="d-flex ps-relative">
                         <input class="s-input" id="example-item3" type="text" placeholder="Enter your input here" readonly value="Prefilled readonly input" />
@@ -107,16 +107,16 @@ <h1 class="fs-headline1 fw-normal mb16">
     </h1>
     <p class="fs-caption fc-black-400">Required fields<abbr class="s-required-symbol" title="required">*</abbr></p>
 </div>
-<form class="d-flex fd-column gy16">
-    <div class="d-flex gy4 fd-column">
+<form class="d-flex fd-column gy24">
+    <div class="s-form-group">
         <label class="s-label" for="example-title-required">Title<abbr class="s-required-symbol" title="required">*</abbr></label>
         <input class="s-input" id="example-title-required" type="text" placeholder="Type a title" />
     </div>
-    <div class="d-flex gy4 fd-column">
+    <div class="s-form-group">
         <label class="s-label" for="example-body-required">Body<abbr class="s-required-symbol" title="required">*</abbr></label>
         <textarea class="s-textarea hmn1" id="example-body-required" placeholder="Type a question"></textarea>
     </div>
-    <div class="d-flex gy4 fd-column">
+    <div class="s-form-group">
         <label class="s-label" for="example-ask-members">Ask team members</label>
         <input class="s-input" id="example-ask-members" type="text" placeholder="Type a name" />
     </div>
@@ -129,16 +129,16 @@ <h1 class="fs-headline1 fw-normal mb16">
                 </h1>
                 <p class="fs-caption fc-black-400">Required fields<abbr class="s-required-symbol" title="required">*</abbr></p>
             </div>
-            <form class="d-flex fd-column gy16">
-                <div class="d-flex gy4 fd-column">
+            <form class="d-flex fd-column gy24">
+                <div class="s-form-group">
                     <label class="s-label" for="example-title-required">Title<abbr class="s-required-symbol" title="required">*</abbr></label>
                     <input class="s-input" id="example-title-required" type="text" placeholder="Type a title" />
                 </div>
-                <div class="d-flex gy4 fd-column">
+                <div class="s-form-group">
                     <label class="s-label" for="example-body-required">Body<abbr class="s-required-symbol" title="required">*</abbr></label>
                     <textarea class="s-textarea hmn1" id="example-body-required" placeholder="Type a question"></textarea>
                 </div>
-                <div class="d-flex gy4 fd-column">
+                <div class="s-form-group">
                     <label class="s-label" for="example-ask-members">Ask team members</label>
                     <input class="s-input" id="example-ask-members" type="text" placeholder="Type a name" />
                 </div>
@@ -188,24 +188,24 @@ <h1 class="fs-headline1 fw-normal mb16">
     {% header "h4", "Warning" %}
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column has-warning">
+<div class="s-form-group has-warning">
     <label class="s-label" for="example-warning">Username</label>
     <div class="d-flex ps-relative">
         <input class="s-input" id="example-warning" type="text" placeholder="" aria-describedby="example-warning-desc" />
         @Svg.Alert.With("s-input-icon")
     </div>
-    <p id="example-warning-desc" class="s-input-message mb0">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
+    <p id="example-warning-desc" class="s-input-message">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
             <div>
-                <div class="d-flex gy4 fd-column has-warning">
+                <div class="s-form-group has-warning">
                     <label class="s-label" for="example-warning">Username</label>
                     <div class="d-flex ps-relative">
                         <input class="s-input" id="example-warning" type="text" value="AA" aria-describedby="example-warning-desc" />
                         {% icon "Alert", "s-input-icon" %}
                     </div>
-                    <p id="example-warning-desc" class="s-input-message mb0">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
+                    <p id="example-warning-desc" class="s-input-message">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
                 </div>
             </div>
         </div>
@@ -218,24 +218,24 @@ <h1 class="fs-headline1 fw-normal mb16">
 
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column has-error">
+<div class="s-form-group has-error">
     <label class="s-label" for="example-error">Username</label>
     <div class="d-flex ps-relative">
         <input class="s-input" id="example-error" type="text" placeholder="e.g. johndoe111" aria-describedby="example-error-desc" aria-invalid="true" />
         @Svg.AlertFill.With("s-input-icon")
     </div>
-    <p id="example-error-desc" class="s-input-message mb0">You must provide a username. <a href="#">Forgot your username?</a></p>
+    <p id="example-error-desc" class="s-input-message">You must provide a username. <a href="#">Forgot your username?</a></p>
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
             <div>
-                <div class="d-flex gy4 fd-column has-error">
+                <div class="s-form-group has-error">
                     <label class="s-label" for="example-error">Username</label>
                     <div class="d-flex ps-relative">
                         <input class="s-input" id="example-error" type="text" aria-describedby="example-error-desc" />
                         {% icon "AlertFill", "s-input-icon" %}
                     </div>
-                    <p id="example-error-desc" class="s-input-message mb0">You must provide a username. <a href="#">Forgot your username?</a></p>
+                    <p id="example-error-desc" class="s-input-message">You must provide a username. <a href="#">Forgot your username?</a></p>
                 </div>
             </div>
         </div>
@@ -244,24 +244,24 @@ <h1 class="fs-headline1 fw-normal mb16">
     {% header "h4", "Success" %}
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column has-success">
+<div class="s-form-group has-success">
     <label class="s-label" for="example-success">Username</label>
     <div class="d-flex ps-relative">
         <input class="s-input" id="example-success" type="text" aria-describedby="example-success-desc" />
         @Svg.Checkmark.With("s-input-icon")
     </div>
-    <p id="example-success-desc" class="s-input-message mb0">That name is available! <a href="#">Why do we require a username?</a></p>
+    <p id="example-success-desc" class="s-input-message">That name is available! <a href="#">Why do we require a username?</a></p>
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
             <div>
-                <div class="d-flex gy4 fd-column has-success">
+                <div class="s-form-group has-success">
                     <label class="s-label" for="example-success">Username</label>
                     <div class="d-flex ps-relative">
                         <input class="s-input" id="example-success" type="text" value="aaronshekey" aria-describedby="example-success-desc" />
                         {% icon "Check", "s-input-icon" %}
                     </div>
-                    <p id="example-success-desc" class="s-input-message mb0">That name is available! <a href="#">Why do we require a username?</a></p>
+                    <p id="example-success-desc" class="s-input-message">That name is available! <a href="#">Why do we require a username?</a></p>
                 </div>
             </div>
         </div>
@@ -345,7 +345,7 @@ <h1 class="fs-headline1 fw-normal mb16">
     {% header "h3", "Prepended inputs" %}
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column">
+<div class="s-form-group">
     <label class="s-label" for="website-url">Website URL</label>
     <div class="d-flex">
         <div class="s-input-fill order-first">https://</div>
@@ -356,7 +356,7 @@ <h1 class="fs-headline1 fw-normal mb16">
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <div class="d-flex gy4 fd-column">
+            <div class="s-form-group">
                 <label class="s-label" for="website-url">Website URL</label>
                 <div class="d-flex">
                     <div class="s-input-fill order-first">https://</div>
@@ -371,7 +371,7 @@ <h1 class="fs-headline1 fw-normal mb16">
     {% header "h3", "Appended inputs" %}
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column">
+<div class="s-form-group">
     <label class="s-label" for="min-salary">Minimum Salary</label>
     <div class="d-flex">
         <div class="d-flex ai-center order-last s-input-fill">
@@ -389,7 +389,7 @@ <h1 class="fs-headline1 fw-normal mb16">
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <div class="d-flex gy4 fd-column">
+            <div class="s-form-group">
                 <label class="s-label" for="min-salary">Minimum Salary</label>
                 <div class="d-flex">
                     <div class="d-flex ai-center order-last s-input-fill">
@@ -416,7 +416,7 @@ <h1 class="fs-headline1 fw-normal mb16">
 
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex fd-column g4">
+<div class="s-form-group">
     <label class="s-label" for="tag-selector">Tags</label>
     <div class="s-input">
         <div class="d-flex fw-wrap gx8 myn4">
@@ -432,19 +432,21 @@ <h1 class="fs-headline1 fw-normal mb16">
     </div>
 </div>
 {% endhighlight %}
-        <div class="docs-preview--example d-flex fd-column g4">
-            <label class="s-label" for="tag-selector">Tags</label>
-            <div class="s-input">
-                <div class="d-flex fw-wrap gx8 myn4">
-                    <span class="s-tag">
-                        svelte
-                        <button class="s-tag--dismiss" type="button">
-                            <span class="v-visible-sr">Dismiss svelte tag</span>
-                            {% icon "ClearSm" %}
-                        </button>
-                    </span>
+        <div class="docs-preview--example d-flex fd-column">
+            <div class="s-form-group">
+                <label class="s-label" for="tag-selector">Tags</label>
+                <div class="s-input">
+                    <div class="d-flex fw-wrap gx8 myn4">
+                        <span class="s-tag">
+                            svelte
+                            <button class="s-tag--dismiss" type="button">
+                                <span class="v-visible-sr">Dismiss svelte tag</span>
+                                {% icon "ClearSm" %}
+                            </button>
+                        </span>
+                    </div>
+                    <input id="tag-selector" class="s-input" type="text" role="presentation" placeholder="enter up to 5 tags">
                 </div>
-                <input id="tag-selector" class="s-input" type="text" role="presentation" placeholder="enter up to 5 tags">
             </div>
         </div>
     </div>
diff --git a/packages/stacks-docs/product/components/labels.html b/packages/stacks-docs/product/components/labels.html
index 7041267c13..f109459f5e 100644
--- a/packages/stacks-docs/product/components/labels.html
+++ b/packages/stacks-docs/product/components/labels.html
@@ -15,7 +15,7 @@
     {% header "h2", "Base style" %}
     <div class="docs-preview">
 {% highlight html %}
-<form class="d-flex gy4 fd-column">
+<form class="s-form-group">
     <label class="s-label" for="question-title">Question title</label>
     <div class="d-flex ps-relative">
         <input class="s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
@@ -23,7 +23,7 @@
 </form>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <form class="d-flex gy4 fd-column">
+            <form class="s-form-group">
                 <label class="s-label" for="question-title">Question title</label>
                 <div class="d-flex ps-relative">
                     <input class="s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
@@ -68,22 +68,22 @@
 
     <div class="docs-preview">
 {% highlight html %}
-<form class="d-flex gy4 fd-column">
-    <label class="d-block s-label" for="example-item">
+<form class="s-form-group">
+    <label class="s-label" for="example-item">
         Question title
     </label>
-    <p class="s-description mtn2 mb0">Clear question titles are more likely to get answered.</p>
+    <p class="s-description">Clear question titles are more likely to get answered.</p>
     <div class="d-flex ps-relative">
         <input class="s-input" id="example-item" type="text" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?" />
     </div>
 </form>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <form class="d-flex gy4 fd-column">
-                <label class="d-block s-label" for="question-title-copy">
+            <form class="s-form-group">
+                <label class="s-label" for="question-title-copy">
                     Question title
                 </label>
-                <p class="s-description mtn2 mb0">Clear question titles are more likely to get answered.</p>
+                <p class="s-description">Clear question titles are more likely to get answered.</p>
                 <div class="d-flex ps-relative">
                     <input class="s-input" id="question-title-copy" type="text" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?" />
                 </div>
@@ -98,16 +98,16 @@
 
     <div class="docs-preview">
 {% highlight html %}
-<form class="d-flex gy4 fd-column">
-    <label class="s-label" for="question-title-required">Question title <span class="s-badge s-badge__danger">Required</span></label>
+<form class="s-form-group">
+    <label class="s-label" for="question-title-required">Question title<span class="s-badge s-badge__danger">Required</span></label>
     <div class="d-flex ps-relative">
         <input class="s-input" type="text" id="question-title-required" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
     </div>
 </form>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <form class="d-flex gy4 fd-column">
-                <label class="s-label" for="question-title-required">Question title <span class="s-badge s-badge__danger">Required</span></label>
+            <form class="s-form-group">
+                <label class="s-label" for="question-title-required">Question title<span class="s-badge s-badge__danger">Required</span></label>
                 <div class="d-flex ps-relative">
                     <input class="s-input" type="text" id="question-title-required" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
                 </div>
@@ -117,16 +117,16 @@
 
     <div class="docs-preview">
 {% highlight html %}
-<form class="d-flex gy4 fd-column">
-    <label class="s-label" for="question-tags">Question tags <span class="s-badge">Optional</span></label>
+<form class="s-form-group">
+    <label class="s-label" for="question-tags">Question tags<span class="s-badge">Optional</span></label>
     <div class="d-flex ps-relative">
         <input class="s-input" type="text" id="question-tags" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
     </div>
 </form>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <form class="d-flex gy4 fd-column">
-                <label class="s-label" for="question-tags">Question tags <span class="s-badge">Optional</span></label>
+            <form class="s-form-group">
+                <label class="s-label" for="question-tags">Question tags<span class="s-badge">Optional</span></label>
                 <div class="d-flex ps-relative">
                     <input class="s-input" type="text" id="question-tags" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
                 </div>
@@ -136,16 +136,16 @@
 
     <div class="docs-preview">
 {% highlight html %}
-<form class="d-flex gy4 fd-column">
-    <label class="s-label" for="question-title-new">What is your favorite animal? <span class="s-badge s-badge__info">Saved for later</span></label>
+<form class="s-form-group">
+    <label class="s-label" for="question-title-new">What is your favorite animal?<span class="s-badge s-badge__info">Saved for later</span></label>
     <div class="d-flex ps-relative">
         <input class="s-input" type="text" id="question-title-new" placeholder="e.g. hedgehog, platypus, sugar glider"/>
     </div>
 </form>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <form class="d-flex gy4 fd-column">
-                <label class="s-label" for="question-title-new">What is your favorite animal? <span class="s-badge s-badge__info">Saved for later</span></label>
+            <form class="s-form-group">
+                <label class="s-label" for="question-title-new">What is your favorite animal?<span class="s-badge s-badge__info">Saved for later</span></label>
                 <div class="d-flex ps-relative">
                     <input class="s-input" type="text" id="question-title-new" placeholder="e.g. hedgehog, platypus, sugar glider"/>
                 </div>
@@ -155,16 +155,16 @@
 
     <div class="docs-preview">
 {% highlight html %}
-<form class="d-flex gy4 fd-column">
-    <label class="s-label" for="question-title-beta">Notify people <span class="s-badge s-badge__featured">New feature</span></label>
+<form class="s-form-group">
+    <label class="s-label" for="question-title-beta">Notify people<span class="s-badge s-badge__featured">New feature</span></label>
     <div class="d-flex ps-relative">
         <input class="s-input" type="text" id="question-title-beta" placeholder="e.g. jdoe, bgates, sjobs"/>
     </div>
 </form>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <form class="d-flex gy4 fd-column">
-                <label class="s-label" for="question-title-beta">Notify people <span class="s-badge s-badge__featured">New feature</span></label>
+            <form class="s-form-group">
+                <label class="s-label" for="question-title-beta">Notify people<span class="s-badge s-badge__featured">New feature</span></label>
                 <div class="d-flex ps-relative">
                     <input class="s-input" type="text" id="question-title-beta" placeholder="e.g. jdoe, bgates, sjobs"/>
                 </div>
diff --git a/packages/stacks-docs/product/components/select.html b/packages/stacks-docs/product/components/select.html
index deb5c02a79..a4e44c5bb8 100644
--- a/packages/stacks-docs/product/components/select.html
+++ b/packages/stacks-docs/product/components/select.html
@@ -10,7 +10,7 @@
     {% header "h2", "Base style" %}
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column">
+<div class="s-form-group">
     <label class="s-label" for="select-menu">
         How will you be traveling?
         <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
@@ -27,7 +27,7 @@
     </div>
 </div>
 
-<div class="d-flex gy4 fd-column is-disabled">
+<div class="s-form-group is-disabled">
     <label class="s-label" for="select-menu-disabled">Where are you staying?</label>
     <div class="s-select">
         <select id="select-menu-disabled" disabled>
@@ -44,7 +44,7 @@
         <div class="docs-preview--example">
             <div class="d-flex gy16 fd-column">
                 <div>
-                    <div class="d-flex gy4 fd-column">
+                    <div class="s-form-group">
                         <label class="s-label" for="select-menu">
                             How will you be traveling?
                             <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
@@ -62,7 +62,7 @@
                     </div>
                 </div>
                 <div>
-                    <div class="d-flex gy4 fd-column is-disabled">
+                    <div class="s-form-group is-disabled">
                         <label class="s-label" for="select-menu-disabled">Where are you staying?</label>
                         <div class="s-select">
                             <select id="select-menu-disabled" disabled>
@@ -111,7 +111,7 @@
     {% header "h4", "Warning" %}
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column has-warning">
+<div class="s-form-group has-warning">
     <label class="s-label" for="select-menu">
         How will you be traveling?
         <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
@@ -130,7 +130,7 @@
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <div class="d-flex gy4 fd-column has-warning">
+            <div class="s-form-group has-warning">
                 <label class="s-label" for="select-menu-warning">
                     How will you be traveling?
                     <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
@@ -153,7 +153,7 @@
     {% header "h4", "Error" %}
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column has-error">
+<div class="s-form-group has-error">
     <label class="s-label" for="select-menu">
         How will you be traveling?
         <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
@@ -172,7 +172,7 @@
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <div class="d-flex gy4 fd-column has-error">
+            <div class="s-form-group has-error">
                 <label class="s-label" for="select-menu-error">
                     How will you be traveling?
                     <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
@@ -195,7 +195,7 @@
     {% header "h4", "Success" %}
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column has-success">
+<div class="s-form-group has-success">
     <label class="s-label" for="select-menu">
         How will you be traveling?
         <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
@@ -214,7 +214,7 @@
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <div class="d-flex gy4 fd-column has-success">
+            <div class="s-form-group has-success">
                 <label class="s-label" for="select-menu-success">
                     How will you be traveling?
                     <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
diff --git a/packages/stacks-docs/product/components/textarea.html b/packages/stacks-docs/product/components/textarea.html
index c686ca9abd..231bf1faec 100644
--- a/packages/stacks-docs/product/components/textarea.html
+++ b/packages/stacks-docs/product/components/textarea.html
@@ -18,7 +18,7 @@
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <div class="d-flex gy4 fd-column">
+            <div class="s-form-group">
                 <label class="s-label" for="example-item7">Question body</label>
                 <div class="d-flex ps-relative">
                     <textarea class="s-textarea ps-relative w100" id="example-item7" placeholder="e.g. The Stack Overflow glyph used to have 6 bars, but now…"></textarea>
@@ -66,23 +66,23 @@
     {% header "h4", "Warning" %}
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column has-warning">
+<div class="s-form-group has-warning">
     <label class="s-label" for="example-warning">Description</label>
     <div class="d-flex ps-relative">
         <textarea class="s-textarea w100" id="example-warning" placeholder="Please describe your problem"></textarea>
         @Svg.Alert.With("s-input-icon")
     </div>
-    <p class="s-input-message mb0">Consider entering a description to help us better help you.</p>
+    <p class="s-input-message">Consider entering a description to help us better help you.</p>
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <div class="d-flex gy4 fd-column has-warning">
+            <div class="s-form-group has-warning">
                 <label class="s-label" for="example-warning">Description</label>
                 <div class="d-flex ps-relative">
                     <textarea class="s-textarea w100" id="example-warning" placeholder="Please describe your problem"></textarea>
                     {% icon "Alert", "s-input-icon" %}
                 </div>
-                <p class="s-input-message mb0">Consider entering a description to help us better help you.</p>
+                <p class="s-input-message">Consider entering a description to help us better help you.</p>
             </div>
         </div>
     </div>
@@ -90,23 +90,23 @@
     {% header "h4", "Error" %}
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column has-error">
+<div class="s-form-group has-error">
     <label class="s-label" for="example-success">Description</label>
     <div class="d-flex ps-relative">
         <textarea class="s-textarea w100" id="example-success" placeholder="Please describe your problem"></textarea>
         @Svg.AlertCircle.With("s-input-icon")
     </div>
-    <p class="s-input-message mb0">A description must be provided.</p>
+    <p class="s-input-message">A description must be provided.</p>
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <div class="d-flex gy4 fd-column has-error">
+            <div class="s-form-group has-error">
                 <label class="s-label" for="example-success1">Description</label>
                 <div class="d-flex ps-relative">
                     <textarea class="s-textarea w100" id="example-success1" placeholder="Please describe your problem"></textarea>
                     {% icon "AlertCircle", "s-input-icon" %}
                 </div>
-                <p class="s-input-message mb0">A description must be provided.</p>
+                <p class="s-input-message">A description must be provided.</p>
             </div>
         </div>
     </div>
@@ -114,23 +114,23 @@
     {% header "h4", "Success" %}
     <div class="docs-preview">
 {% highlight html %}
-<div class="d-flex gy4 fd-column has-success">
+<div class="s-form-group has-success">
     <label class="s-label" for="example-success">Description</label>
     <div class="d-flex ps-relative">
         <textarea class="s-textarea w100" id="example-success" placeholder="Please describe your problem">How do you know your company is ready for a design system? How do you implement one without too many pain points? How do you efficiently maintain one once it’s built?</textarea>
         @Svg.Checkmark.With("s-input-icon")
     </div>
-    <p class="s-input-message mb0">Thanks for providing a description.</p>
+    <p class="s-input-message">Thanks for providing a description.</p>
 </div>
 {% endhighlight %}
         <div class="docs-preview--example">
-            <div class="d-flex gy4 fd-column has-success">
+            <div class="s-form-group has-success">
                 <label class="s-label" for="example-success2">Description</label>
                 <div class="d-flex ps-relative">
                     <textarea class="s-textarea w100" id="example-success2" placeholder="Please describe your problem">How do you know your company is ready for a design system? How do you implement one without too many pain points? How do you efficiently maintain one once it’s built?</textarea>
                     {% icon "Check", "s-input-icon" %}
                 </div>
-                <p class="s-input-message mb0">Thanks for providing a description.</p>
+                <p class="s-input-message">Thanks for providing a description.</p>
             </div>
         </div>
     </div>
diff --git a/packages/stacks-svelte/src/components/Select/Select.svelte b/packages/stacks-svelte/src/components/Select/Select.svelte
index e8419ed07f..e794232f4b 100644
--- a/packages/stacks-svelte/src/components/Select/Select.svelte
+++ b/packages/stacks-svelte/src/components/Select/Select.svelte
@@ -165,7 +165,9 @@
 </script>
 
 <div
-    class={`d-flex ${labelPlacement === "top" ? " fd-column gy4" : "ai-center"}`}
+    class="s-form-group"
+    class:s-form-group__horizontal={labelPlacement === "left"}
+    class:ai-center={labelPlacement === "left"}
     class:has-error={vState === "error"}
     class:has-success={vState === "success"}
     class:has-warning={vState === "warning"}
diff --git a/packages/stacks-svelte/src/components/TextArea/TextArea.svelte b/packages/stacks-svelte/src/components/TextArea/TextArea.svelte
index 57197b0b43..bf4ccdbee8 100644
--- a/packages/stacks-svelte/src/components/TextArea/TextArea.svelte
+++ b/packages/stacks-svelte/src/components/TextArea/TextArea.svelte
@@ -123,7 +123,7 @@
 </script>
 
 <div
-    class="d-flex fd-column gy4"
+    class="s-form-group"
     class:has-error={state === "error"}
     class:has-success={state === "success"}
     class:has-warning={state === "warning"}
@@ -142,7 +142,7 @@
 
     {#if description}
         <!-- Renders a description between the label and input. -->
-        <p class="s-description mb0 mtn2" id={`${id}-description`}>
+        <p class="s-description" id={`${id}-description`}>
             {@render description()}
         </p>
     {/if}
diff --git a/packages/stacks-svelte/src/components/TextInput/TextInput.svelte b/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
index 55a3993b02..a20a65031b 100644
--- a/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
+++ b/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
@@ -178,7 +178,7 @@
 </script>
 
 <div
-    class="d-flex fd-column gy4"
+    class="s-form-group"
     class:has-error={state === "error"}
     class:has-success={state === "success"}
     class:has-warning={state === "warning"}
@@ -197,7 +197,7 @@
 
     {#if description}
         <!-- Renders a description between the label and input. -->
-        <p class="s-description mb0 mtn2" id={`${id}-description`}>
+        <p class="s-description" id={`${id}-description`}>
             {@render description()}
         </p>
     {/if}