diff --git a/app/components-preview/page.tsx b/app/components-preview/page.tsx
index ac3f7ae..4d8e60c 100644
--- a/app/components-preview/page.tsx
+++ b/app/components-preview/page.tsx
@@ -37,6 +37,197 @@ export default function ComponentsPreview() {
           </p>
         </header>
 
+        {/* Button Section */}
+        <section className="space-y-[var(--spacing-scale-024)]">
+          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
+            Button Component
+          </h2>
+
+          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
+            <div className="space-y-[var(--spacing-scale-016)]">
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  All Variants
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
+                  <Button variant="filled" size="medium">
+                    Filled
+                  </Button>
+                  <Button variant="filled-inverse" size="medium">
+                    Filled Inverse
+                  </Button>
+                  <Button variant="outline" size="medium">
+                    Outline
+                  </Button>
+                  <Button variant="outline-inverse" size="medium">
+                    Outline Inverse
+                  </Button>
+                  <Button variant="ghost" size="medium">
+                    Ghost
+                  </Button>
+                  <Button variant="ghost-inverse" size="medium">
+                    Ghost Inverse
+                  </Button>
+                  <Button variant="danger" size="medium">
+                    Danger
+                  </Button>
+                  <Button variant="danger-inverse" size="medium">
+                    Danger Inverse
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  All Sizes - Danger Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
+                  <Button variant="danger" size="xsmall">
+                    XSmall
+                  </Button>
+                  <Button variant="danger" size="small">
+                    Small
+                  </Button>
+                  <Button variant="danger" size="medium">
+                    Medium
+                  </Button>
+                  <Button variant="danger" size="large">
+                    Large
+                  </Button>
+                  <Button variant="danger" size="xlarge">
+                    XLarge
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  All Sizes - Danger Inverse Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
+                  <Button variant="danger-inverse" size="xsmall">
+                    XSmall
+                  </Button>
+                  <Button variant="danger-inverse" size="small">
+                    Small
+                  </Button>
+                  <Button variant="danger-inverse" size="medium">
+                    Medium
+                  </Button>
+                  <Button variant="danger-inverse" size="large">
+                    Large
+                  </Button>
+                  <Button variant="danger-inverse" size="xlarge">
+                    XLarge
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  All Sizes - Ghost Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
+                  <Button variant="ghost" size="xsmall">
+                    XSmall
+                  </Button>
+                  <Button variant="ghost" size="small">
+                    Small
+                  </Button>
+                  <Button variant="ghost" size="medium">
+                    Medium
+                  </Button>
+                  <Button variant="ghost" size="large">
+                    Large
+                  </Button>
+                  <Button variant="ghost" size="xlarge">
+                    XLarge
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  All Sizes - Ghost Inverse Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
+                  <Button variant="ghost-inverse" size="xsmall">
+                    XSmall
+                  </Button>
+                  <Button variant="ghost-inverse" size="small">
+                    Small
+                  </Button>
+                  <Button variant="ghost-inverse" size="medium">
+                    Medium
+                  </Button>
+                  <Button variant="ghost-inverse" size="large">
+                    Large
+                  </Button>
+                  <Button variant="ghost-inverse" size="xlarge">
+                    XLarge
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  States - Danger Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
+                  <Button variant="danger" size="medium">
+                    Normal
+                  </Button>
+                  <Button variant="danger" size="medium" disabled>
+                    Disabled
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  States - Danger Inverse Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
+                  <Button variant="danger-inverse" size="medium">
+                    Normal
+                  </Button>
+                  <Button variant="danger-inverse" size="medium" disabled>
+                    Disabled
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  States - Ghost Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
+                  <Button variant="ghost" size="medium">
+                    Normal
+                  </Button>
+                  <Button variant="ghost" size="medium" disabled>
+                    Disabled
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  States - Ghost Inverse Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
+                  <Button variant="ghost-inverse" size="medium">
+                    Normal
+                  </Button>
+                  <Button variant="ghost-inverse" size="medium" disabled>
+                    Disabled
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* Tooltip Section */}
         <section className="space-y-[var(--spacing-scale-024)]">
           <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
@@ -46,19 +237,19 @@ export default function ComponentsPreview() {
           <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
             <div className="flex flex-wrap gap-[var(--spacing-scale-024)] items-center">
               <Tooltip text="Tooltip positioned at top" position="top">
-                <Button variant="default" size="medium">
+                <Button variant="filled" size="medium">
                   Hover me (Top)
                 </Button>
               </Tooltip>
 
               <Tooltip text="Tooltip positioned at bottom" position="bottom">
-                <Button variant="primary" size="medium">
+                <Button variant="filled-inverse" size="medium">
                   Hover me (Bottom)
                 </Button>
               </Tooltip>
 
               <Tooltip text="Disabled tooltip" disabled>
-                <Button variant="secondary" size="medium">
+                <Button variant="ghost" size="medium">
                   Disabled Tooltip
                 </Button>
               </Tooltip>
@@ -325,7 +516,7 @@ export default function ComponentsPreview() {
           <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
             <div className="space-y-[var(--spacing-scale-016)]">
               <Button
-                variant="primary"
+                variant="filled-inverse"
                 size="medium"
                 onClick={() => setCreateOpen(true)}
               >
@@ -337,7 +528,7 @@ export default function ComponentsPreview() {
                   Step {createStep} of 3
                 </p>
                 <Button
-                  variant="secondary"
+                  variant="ghost"
                   size="small"
                   onClick={() => setCreateStep((prev) => Math.max(1, prev - 1))}
                   disabled={createStep === 1}
@@ -345,7 +536,7 @@ export default function ComponentsPreview() {
                   Previous Step
                 </Button>
                 <Button
-                  variant="secondary"
+                  variant="ghost"
                   size="small"
                   onClick={() => setCreateStep((prev) => Math.min(3, prev + 1))}
                   disabled={createStep === 3}
diff --git a/app/components/Alert/Alert.view.tsx b/app/components/Alert/Alert.view.tsx
index 73ff342..374efa2 100644
--- a/app/components/Alert/Alert.view.tsx
+++ b/app/components/Alert/Alert.view.tsx
@@ -50,10 +50,10 @@ export function AlertView({
       </div>
       <Button
         variant="ghost"
-        size="xsmall"
+        size="large"
         onClick={onClose}
         ariaLabel="Close alert"
-        className="shrink-0"
+        className="shrink-0 [&_svg_path]:transition-colors [&_svg_path]:duration-200 hover:[&_svg_path]:fill-[var(--color-content-default-primary)]"
       >
         <svg
           width="20"
diff --git a/app/components/AskOrganizer/AskOrganizer.view.tsx b/app/components/AskOrganizer/AskOrganizer.view.tsx
index a1f2c28..553a6df 100644
--- a/app/components/AskOrganizer/AskOrganizer.view.tsx
+++ b/app/components/AskOrganizer/AskOrganizer.view.tsx
@@ -45,7 +45,7 @@ function AskOrganizerView({
           <Button
             href={buttonHref}
             size="large"
-            variant={variant === "inverse" ? "primary" : "default"}
+            variant={variant === "inverse" ? "filled-inverse" : "filled"}
             className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
             onClick={onContactClick}
             ariaLabel={ariaLabel}
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 10e6826..7640d96 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -3,13 +3,14 @@ import { memo } from "react";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   variant?:
-    | "default"
-    | "secondary"
-    | "primary"
-    | "outlined"
-    | "dark"
-    | "inverse"
-    | "ghost";
+    | "filled"
+    | "filled-inverse"
+    | "outline"
+    | "outline-inverse"
+    | "ghost"
+    | "ghost-inverse"
+    | "danger"
+    | "danger-inverse";
   size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
   className?: string;
   disabled?: boolean;
@@ -26,7 +27,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 const Button = memo<ButtonProps>(
   ({
     children,
-    variant = "default",
+    variant = "filled",
     size = "xsmall",
     className = "",
     disabled = false,
@@ -40,14 +41,14 @@ const Button = memo<ButtonProps>(
   }) => {
     const sizeStyles: Record<string, string> = {
       xsmall:
-        "px-[var(--spacing-scale-006)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
+        "p-[var(--spacing-scale-006)] gap-[var(--spacing-scale-002)]",
       small:
-        "px-[var(--spacing-measures-spacing-008)] py-[var(--spacing-measures-spacing-008)] gap-[var(--spacing-scale-004)]",
+        "p-[var(--spacing-scale-008)] gap-[var(--spacing-scale-002)]",
       medium: "p-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
       large:
-        "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
+        "p-[var(--spacing-scale-012)] gap-[var(--spacing-scale-006)]",
       xlarge:
-        "px-[var(--spacing-scale-020)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-008)]",
+        "p-[var(--spacing-scale-016)] gap-[var(--spacing-scale-008)]",
     };
 
     const fontStyles: Record<string, string> = {
@@ -59,19 +60,21 @@ const Button = memo<ButtonProps>(
     };
 
     const variantStyles: Record<string, string> = {
-      default:
-        "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset hover:scale-[1.02] hover:shadow-lg focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:scale-[1.02] active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 disabled:hover:shadow-none disabled:hover:outline-none",
-      secondary:
-        "bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
-      primary:
-        "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
-      outlined:
-        "bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-content-default-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-[1.5px] disabled:border-[var(--color-surface-default-secondary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
-      dark: "bg-transparent text-[var(--color-content-inverse-primary)] border border-[var(--border-color-default-primary)] hover:bg-transparent hover:text-[var(--color-content-inverse-brand-primary)] hover:border hover:border-[var(--border-color-inverse-brandprimary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-inverse-primary)] focus:outline-none focus:border focus:border-[var(--border-color-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
-      inverse:
-        "bg-transparent text-[var(--color-content-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-tertiary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      filled:
+        "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-invert-brand-primary)] hover:border-[var(--color-border-invert-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-inverse-primary)] focus:text-[var(--color-content-invert-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      "filled-inverse":
+        "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      outline:
+        "bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-border-invert-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-border-invert-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      "outline-inverse": "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-[var(--color-border-default-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-invert-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-border-default-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-transparent active:text-[var(--color-content-invert-primary)] active:border-[1.5px] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
       ghost:
-        "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-secondary)] active:text-[var(--color-content-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-transparent disabled:text-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+        "bg-transparent text-[var(--color-content-default-brand-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-default-primary)] hover:border-transparent hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      "ghost-inverse":
+        "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-invert-primary)] hover:border-transparent hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      danger:
+        "bg-transparent text-[var(--color-border-default-negative-primary)] border border-[var(--color-border-default-negative-primary)] hover:bg-[var(--color-surface-invert-negative-secondary)] hover:text-[var(--color-border-default-negative-primary)] hover:border-[var(--color-border-default-negative-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-border-default-negative-primary)] focus:outline-none focus:border-[var(--color-border-default-negative-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-invert-negative-primary)] active:text-[var(--color-content-invert-negative-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      "danger-inverse":
+        "bg-transparent text-[var(--color-content-invert-negative-primary)] border border-[var(--color-border-invert-negative-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-negative-primary)] hover:border-[var(--color-border-invert-negative-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-negative-primary)] focus:outline-none focus:border-[var(--color-border-invert-negative-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-negative-primary)] active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
     };
 
     const hoverOutlineStyles: Record<string, string> = {
@@ -82,13 +85,15 @@ const Button = memo<ButtonProps>(
       xlarge: "hover:outline-[2.5px]",
     };
 
-    // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, or ghost
+    // Only apply outline styles to filled variant, not filled-inverse, outline, outline-inverse, ghost, ghost-inverse, danger, or danger-inverse
     const outlineStyles =
-      variant === "primary" ||
-      variant === "outlined" ||
-      variant === "dark" ||
-      variant === "inverse" ||
-      variant === "ghost"
+      variant === "filled-inverse" ||
+      variant === "outline" ||
+      variant === "outline-inverse" ||
+      variant === "ghost" ||
+      variant === "ghost-inverse" ||
+      variant === "danger" ||
+      variant === "danger-inverse"
         ? ""
         : hoverOutlineStyles[size];
 
diff --git a/app/components/ContentLockup/ContentLockup.view.tsx b/app/components/ContentLockup/ContentLockup.view.tsx
index 7334b60..7d34f83 100644
--- a/app/components/ContentLockup/ContentLockup.view.tsx
+++ b/app/components/ContentLockup/ContentLockup.view.tsx
@@ -93,19 +93,19 @@ function ContentLockupView({
         <div className="flex justify-start">
           {/* Small button for xsm and sm breakpoints */}
           <div className="block md:hidden">
-            <Button variant="primary" size="small">
+            <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="small">
               {ctaText}
             </Button>
           </div>
           {/* Large button for md and lg breakpoints */}
           <div className="hidden md:block xl:hidden">
-            <Button variant="primary" size="large" className={buttonClassName}>
+            <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="large" className={buttonClassName}>
               {ctaText}
             </Button>
           </div>
           {/* XLarge button for xl breakpoint */}
           <div className="hidden xl:block">
-            <Button variant="primary" size="xlarge">
+            <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="xlarge">
               {ctaText}
             </Button>
           </div>
diff --git a/app/components/HomeHeader/HomeHeader.container.tsx b/app/components/HomeHeader/HomeHeader.container.tsx
index dd21d02..4fb1e8f 100644
--- a/app/components/HomeHeader/HomeHeader.container.tsx
+++ b/app/components/HomeHeader/HomeHeader.container.tsx
@@ -150,7 +150,7 @@ const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
     return (
       <Button
         size={buttonSize}
-        variant="secondary"
+        variant="ghost"
         ariaLabel={t("ariaLabels.createNewRule")}
       >
         {renderAvatarGroup(containerSize, avatarSize)}
diff --git a/app/components/ModalFooter/ModalFooter.view.tsx b/app/components/ModalFooter/ModalFooter.view.tsx
index b3e4fc1..1b4ffa2 100644
--- a/app/components/ModalFooter/ModalFooter.view.tsx
+++ b/app/components/ModalFooter/ModalFooter.view.tsx
@@ -30,7 +30,7 @@ export function ModalFooterView({
       {/* Back Button - Absolutely positioned bottom left */}
       {showBackButton && (
         <div className="absolute left-[16px] top-[12px]">
-          <Button variant="outlined" size="medium" onClick={onBack}>
+          <Button variant="outline" size="medium" onClick={onBack}>
             {defaultBackText}
           </Button>
         </div>
@@ -47,7 +47,7 @@ export function ModalFooterView({
       {showNextButton && (
         <div className="absolute right-[16px] top-[12px]">
           <Button
-            variant="default"
+            variant="filled"
             size="medium"
             onClick={onNext}
             disabled={nextButtonDisabled}
diff --git a/app/components/NumberedCards/NumberedCards.view.tsx b/app/components/NumberedCards/NumberedCards.view.tsx
index 77489fa..acc48fe 100644
--- a/app/components/NumberedCards/NumberedCards.view.tsx
+++ b/app/components/NumberedCards/NumberedCards.view.tsx
@@ -47,15 +47,15 @@ function NumberedCardsView({
 
             {/* Call to Action Button */}
             <div className="text-center sm:text-left lg:text-center">
-              {/* Default button for xsm and sm breakpoints */}
+              {/* Filled button for xsm and sm breakpoints */}
               <div className="block lg:hidden">
-                <Button variant="default" size="large">
+                <Button variant="filled" size="large">
                   {t("numberedCards.buttons.createCommunityRule")}
                 </Button>
               </div>
-              {/* Outlined button for lg and xlg breakpoints */}
+              {/* Outline button for lg and xlg breakpoints */}
               <div className="hidden lg:block">
-                <Button variant="outlined" size="large">
+                <Button variant="outline" size="large">
                   {t("numberedCards.buttons.seeHowItWorks")}
                 </Button>
               </div>
diff --git a/app/components/RuleStack/RuleStack.view.tsx b/app/components/RuleStack/RuleStack.view.tsx
index 671385f..a735e46 100644
--- a/app/components/RuleStack/RuleStack.view.tsx
+++ b/app/components/RuleStack/RuleStack.view.tsx
@@ -82,7 +82,7 @@ export function RuleStackView({
 
       {/* See all templates button */}
       <div className="flex justify-center">
-        <Button variant="outlined" size="large">
+        <Button variant="outline" size="large">
           {t("button.seeAllTemplates")}
         </Button>
       </div>
diff --git a/app/tailwind.css b/app/tailwind.css
index 7642f27..7d7b680 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -662,7 +662,7 @@
   --color-surface-default-brand-lavender: var(--color-lavender-lavender200);
   --color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100);
   --color-surface-default-brand-lime: var(--color-lime-lime100);
-  --color-surface-default-brand-primary: var(--color-yellow-yellow100);
+  --color-surface-default-brand-primary: var(--color-yellow-yellow1000);
   --color-surface-default-brand-secondary: var(--color-yellow-yellow800);
   --color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50);
   --color-surface-default-brand-rust: var(--color-rust-rust100);
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index cf525ab..efd0684 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -16,13 +16,14 @@ export default {
     variant: {
       control: { type: "select" },
       options: [
-        "default",
-        "secondary",
-        "primary",
-        "outlined",
-        "dark",
-        "inverse",
+        "filled",
+        "filled-inverse",
+        "outline",
+        "outline-inverse",
         "ghost",
+        "ghost-inverse",
+        "danger",
+        "danger-inverse",
       ],
       description: "The visual style variant of the button",
     },
@@ -58,27 +59,30 @@ export const Variants = {
   render: (_args) => (
     <div className="space-y-4">
       <div className="space-x-4">
-        <Button {..._args} variant="default">
-          Default
+        <Button {..._args} variant="filled">
+          Filled
         </Button>
-        <Button {..._args} variant="secondary">
-          Secondary
+        <Button {..._args} variant="filled-inverse">
+          Filled Inverse
         </Button>
-        <Button {..._args} variant="primary">
-          Primary
+        <Button {..._args} variant="outline">
+          Outline
         </Button>
-        <Button {..._args} variant="outlined">
-          Outlined
-        </Button>
-        <Button {..._args} variant="dark">
-          Dark
-        </Button>
-        <Button {..._args} variant="inverse">
-          Inverse
+        <Button {..._args} variant="outline-inverse">
+          Outline Inverse
         </Button>
         <Button {..._args} variant="ghost">
           Ghost
         </Button>
+        <Button {..._args} variant="ghost-inverse">
+          Ghost Inverse
+        </Button>
+        <Button {..._args} variant="danger">
+          Danger
+        </Button>
+        <Button {..._args} variant="danger-inverse">
+          Danger Inverse
+        </Button>
       </div>
     </div>
   ),
@@ -94,7 +98,7 @@ export const Variants = {
 export const Sizes = {
   args: {
     children: "Button",
-    variant: "default",
+    variant: "filled",
   },
   render: (_args) => (
     <div className="space-y-4">
@@ -130,7 +134,7 @@ export const States = {
   args: {
     children: "Button",
     size: "large",
-    variant: "default",
+    variant: "filled",
   },
   render: (_args) => (
     <div className="space-y-4">
@@ -156,116 +160,84 @@ export const AllVariants = {
   render: () => (
     <div className="space-y-6">
       <div>
-        <h3 className="text-white font-semibold mb-3">Default Variant</h3>
+        <h3 className="text-white font-semibold mb-3">Filled Variant</h3>
         <div className="space-x-4">
-          <Button size="xsmall">XSmall</Button>
-          <Button size="small">Small</Button>
-          <Button size="medium">Medium</Button>
-          <Button size="large">Large</Button>
-          <Button size="xlarge">XLarge</Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-white font-semibold mb-3">Secondary Variant</h3>
-        <div className="space-x-4">
-          <Button variant="secondary" size="xsmall">
+          <Button variant="filled" size="xsmall">
             XSmall
           </Button>
-          <Button variant="secondary" size="small">
+          <Button variant="filled" size="small">
             Small
           </Button>
-          <Button variant="secondary" size="medium">
+          <Button variant="filled" size="medium">
             Medium
           </Button>
-          <Button variant="secondary" size="large">
+          <Button variant="filled" size="large">
             Large
           </Button>
-          <Button variant="secondary" size="xlarge">
+          <Button variant="filled" size="xlarge">
             XLarge
           </Button>
         </div>
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Primary Variant</h3>
+        <h3 className="text-white font-semibold mb-3">Filled Inverse Variant</h3>
         <div className="space-x-4">
-          <Button variant="primary" size="xsmall">
+          <Button variant="filled-inverse" size="xsmall">
             XSmall
           </Button>
-          <Button variant="primary" size="small">
+          <Button variant="filled-inverse" size="small">
             Small
           </Button>
-          <Button variant="primary" size="medium">
+          <Button variant="filled-inverse" size="medium">
             Medium
           </Button>
-          <Button variant="primary" size="large">
+          <Button variant="filled-inverse" size="large">
             Large
           </Button>
-          <Button variant="primary" size="xlarge">
+          <Button variant="filled-inverse" size="xlarge">
             XLarge
           </Button>
         </div>
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Outlined Variant</h3>
+        <h3 className="text-white font-semibold mb-3">Outline Variant</h3>
         <div className="space-x-4">
-          <Button variant="outlined" size="xsmall">
+          <Button variant="outline" size="xsmall">
             XSmall
           </Button>
-          <Button variant="outlined" size="small">
+          <Button variant="outline" size="small">
             Small
           </Button>
-          <Button variant="outlined" size="medium">
+          <Button variant="outline" size="medium">
             Medium
           </Button>
-          <Button variant="outlined" size="large">
+          <Button variant="outline" size="large">
             Large
           </Button>
-          <Button variant="outlined" size="xlarge">
+          <Button variant="outline" size="xlarge">
             XLarge
           </Button>
         </div>
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Dark Variant</h3>
+        <h3 className="text-white font-semibold mb-3">Outline Inverse Variant</h3>
         <div className="space-x-4">
-          <Button variant="dark" size="xsmall">
+          <Button variant="outline-inverse" size="xsmall">
             XSmall
           </Button>
-          <Button variant="dark" size="small">
+          <Button variant="outline-inverse" size="small">
             Small
           </Button>
-          <Button variant="dark" size="medium">
+          <Button variant="outline-inverse" size="medium">
             Medium
           </Button>
-          <Button variant="dark" size="large">
+          <Button variant="outline-inverse" size="large">
             Large
           </Button>
-          <Button variant="dark" size="xlarge">
-            XLarge
-          </Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-white font-semibold mb-3">Inverse Variant</h3>
-        <div className="space-x-4">
-          <Button variant="inverse" size="xsmall">
-            XSmall
-          </Button>
-          <Button variant="inverse" size="small">
-            Small
-          </Button>
-          <Button variant="inverse" size="medium">
-            Medium
-          </Button>
-          <Button variant="inverse" size="large">
-            Large
-          </Button>
-          <Button variant="inverse" size="xlarge">
+          <Button variant="outline-inverse" size="xlarge">
             XLarge
           </Button>
         </div>
@@ -292,30 +264,96 @@ export const AllVariants = {
         </div>
       </div>
 
+      <div>
+        <h3 className="text-white font-semibold mb-3">Ghost Inverse Variant</h3>
+        <div className="space-x-4">
+          <Button variant="ghost-inverse" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="ghost-inverse" size="small">
+            Small
+          </Button>
+          <Button variant="ghost-inverse" size="medium">
+            Medium
+          </Button>
+          <Button variant="ghost-inverse" size="large">
+            Large
+          </Button>
+          <Button variant="ghost-inverse" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">Danger Variant</h3>
+        <div className="space-x-4">
+          <Button variant="danger" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="danger" size="small">
+            Small
+          </Button>
+          <Button variant="danger" size="medium">
+            Medium
+          </Button>
+          <Button variant="danger" size="large">
+            Large
+          </Button>
+          <Button variant="danger" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">Danger Inverse Variant</h3>
+        <div className="space-x-4">
+          <Button variant="danger-inverse" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="danger-inverse" size="small">
+            Small
+          </Button>
+          <Button variant="danger-inverse" size="medium">
+            Medium
+          </Button>
+          <Button variant="danger-inverse" size="large">
+            Large
+          </Button>
+          <Button variant="danger-inverse" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
       <div>
         <h3 className="text-white font-semibold mb-3">Disabled States</h3>
         <div className="space-x-4">
-          <Button size="large" disabled>
-            Default Disabled
+          <Button variant="filled" size="large" disabled>
+            Filled Disabled
           </Button>
-          <Button variant="secondary" size="large" disabled>
-            Secondary Disabled
+          <Button variant="filled-inverse" size="large" disabled>
+            Filled Inverse Disabled
           </Button>
-          <Button variant="primary" size="large" disabled>
-            Primary Disabled
+          <Button variant="outline" size="large" disabled>
+            Outline Disabled
           </Button>
-          <Button variant="outlined" size="large" disabled>
-            Outlined Disabled
-          </Button>
-          <Button variant="dark" size="large" disabled>
-            Dark Disabled
-          </Button>
-          <Button variant="inverse" size="large" disabled>
-            Inverse Disabled
+          <Button variant="outline-inverse" size="large" disabled>
+            Outline Inverse Disabled
           </Button>
           <Button variant="ghost" size="large" disabled>
             Ghost Disabled
           </Button>
+          <Button variant="ghost-inverse" size="large" disabled>
+            Ghost Inverse Disabled
+          </Button>
+          <Button variant="danger" size="large" disabled>
+            Danger Disabled
+          </Button>
+          <Button variant="danger-inverse" size="large" disabled>
+            Danger Inverse Disabled
+          </Button>
         </div>
       </div>
     </div>
diff --git a/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-chromium.png b/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-chromium.png
index d57ec1f..5bdc92e 100644
Binary files a/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-chromium.png and b/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-chromium.png differ
diff --git a/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-firefox.png b/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-firefox.png
index f9048f7..30764b9 100644
Binary files a/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-firefox.png and b/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-firefox.png differ
diff --git a/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-mobile.png b/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-mobile.png
index 33e7bde..fefd8e5 100644
Binary files a/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-mobile.png and b/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-mobile.png differ
diff --git a/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-webkit.png b/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-webkit.png
index 28a6605..f47bdf5 100644
Binary files a/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-webkit.png and b/tests/e2e/visual-regression.spec.ts-snapshots/blog-post-webkit.png differ
diff --git a/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-chromium.png b/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-chromium.png
index b1df06b..195bce9 100644
Binary files a/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-chromium.png and b/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-chromium.png differ
diff --git a/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-firefox.png b/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-firefox.png
index 0ba2e7b..163984c 100644
Binary files a/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-firefox.png and b/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-firefox.png differ
diff --git a/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-mobile.png b/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-mobile.png
index 206fef5..debd686 100644
Binary files a/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-mobile.png and b/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-mobile.png differ
diff --git a/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-webkit.png b/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-webkit.png
index c62b460..ddf608c 100644
Binary files a/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-webkit.png and b/tests/e2e/visual-regression.spec.ts-snapshots/homepage-full-webkit.png differ
diff --git a/tests/e2e/visual-regression.spec.ts-snapshots/homepage-viewport-mobile.png b/tests/e2e/visual-regression.spec.ts-snapshots/homepage-viewport-mobile.png
index ebb452d..bf75382 100644
Binary files a/tests/e2e/visual-regression.spec.ts-snapshots/homepage-viewport-mobile.png and b/tests/e2e/visual-regression.spec.ts-snapshots/homepage-viewport-mobile.png differ