Open each core value as a card of meaning and signals steps, so groups write their own words from an empty field with Generate draft, skip values without blocking the flow, and Customize without keeping helper text as the description.

app/components/controls/MultiSelect/MultiSelect.view.tsx

@@ -63,7 +63,7 @@ function MultiSelectView({
 
       {!formHeader || !label ? (
         headerHelper && typeof headerHelper === "string" ? (
-          <p className="w-full text-x-small-paragraph text-[color:var(--color-content-default-tertiary)]">
+          <p className="w-full text-right text-x-small-paragraph text-[color:var(--color-content-default-tertiary)]">
             {headerHelper}
           </p>
         ) : null

app/components/modals/Create/Create.container.tsx

@@ -21,11 +21,14 @@ const CreateContainer = memo<CreateProps>(
     footerClassName,
     showBackButton = true,
     showNextButton = true,
+    showCancelButton = false,
     showRemoveButton = false,
     onBack,
     onNext,
+    onCancel,
     onRemove,
     backButtonText = "Back",
+    cancelButtonText,
     nextButtonText = "Next",
     removeButtonText,
     nextButtonDisabled = false,
@@ -59,11 +62,14 @@ const CreateContainer = memo<CreateProps>(
         footerClassName={footerClassName}
         showBackButton={showBackButton}
         showNextButton={showNextButton}
+        showCancelButton={showCancelButton}
         showRemoveButton={showRemoveButton}
         onBack={onBack}
         onNext={onNext}
+        onCancel={onCancel}
         onRemove={onRemove}
         backButtonText={backButtonText}
+        cancelButtonText={cancelButtonText}
         nextButtonText={nextButtonText}
         removeButtonText={removeButtonText}
         nextButtonDisabled={nextButtonDisabled}

app/components/modals/Create/Create.types.ts

@@ -16,11 +16,14 @@ export interface CreateProps {
   footerClassName?: string;
   showBackButton?: boolean;
   showNextButton?: boolean;
+  showCancelButton?: boolean;
   showRemoveButton?: boolean;
   onBack?: () => void;
   onNext?: () => void;
+  onCancel?: () => void;
   onRemove?: () => void;
   backButtonText?: string;
+  cancelButtonText?: string;
   nextButtonText?: string;
   removeButtonText?: string;
   nextButtonDisabled?: boolean;
@@ -61,11 +64,14 @@ export interface CreateViewProps {
   footerClassName?: string;
   showBackButton: boolean;
   showNextButton: boolean;
+  showCancelButton: boolean;
   showRemoveButton: boolean;
   onBack?: () => void;
   onNext?: () => void;
+  onCancel?: () => void;
   onRemove?: () => void;
   backButtonText: string;
+  cancelButtonText?: string;
   nextButtonText: string;
   removeButtonText?: string;
   nextButtonDisabled: boolean;

app/components/modals/Create/Create.view.tsx

@@ -17,11 +17,14 @@ export function CreateView({
   footerClassName,
   showBackButton,
   showNextButton,
+  showCancelButton,
   showRemoveButton,
   onBack,
   onNext,
+  onCancel,
   onRemove,
   backButtonText,
+  cancelButtonText,
   nextButtonText,
   removeButtonText,
   nextButtonDisabled,
@@ -79,11 +82,14 @@ export function CreateView({
       <ModalFooter
         showBackButton={showBackButton}
         showNextButton={showNextButton}
+        showCancelButton={showCancelButton}
         showRemoveButton={showRemoveButton}
         onBack={onBack}
         onNext={onNext}
+        onCancel={onCancel}
         onRemove={onRemove}
         backButtonText={backButtonText}
+        cancelButtonText={cancelButtonText}
         nextButtonText={nextButtonText}
         removeButtonText={removeButtonText}
         nextButtonDisabled={nextButtonDisabled}

app/components/modals/ModalFooter/ModalFooter.container.tsx

@@ -13,6 +13,7 @@ import type { ModalFooterProps } from "./ModalFooter.types";
 const ModalFooterContainer = memo<ModalFooterProps>((props) => {
   const t = useTranslation("common");
   const resolvedBackText = props.backButtonText ?? t("buttons.back");
+  const resolvedCancelText = props.cancelButtonText ?? t("buttons.cancel");
   const resolvedNextText = props.nextButtonText ?? t("buttons.next");
   const resolvedRemoveText = props.removeButtonText ?? t("buttons.remove");
 
@@ -20,6 +21,7 @@ const ModalFooterContainer = memo<ModalFooterProps>((props) => {
     <ModalFooterView
       {...props}
       backButtonText={resolvedBackText}
+      cancelButtonText={resolvedCancelText}
       nextButtonText={resolvedNextText}
       removeButtonText={resolvedRemoveText}
     />

app/components/modals/ModalFooter/ModalFooter.types.ts

@@ -1,6 +1,10 @@
 export interface ModalFooterProps {
   showBackButton?: boolean;
   showNextButton?: boolean;
+  /**
+   * Outline **Cancel** in the trailing group, left of Next (Overlay / Modal / Card).
+   */
+  showCancelButton?: boolean;
   /**
    * Danger **Remove** in the left footer slot (selected create-flow modules).
    * Takes the left slot instead of Back when both would otherwise show.
@@ -8,11 +12,16 @@ export interface ModalFooterProps {
   showRemoveButton?: boolean;
   onBack?: () => void;
   onNext?: () => void;
+  onCancel?: () => void;
   onRemove?: () => void;
   /**
    * Custom back button text. If not provided, uses localized "Back" from common.json
    */
   backButtonText?: string;
+  /**
+   * Custom cancel button text. If not provided, uses localized "Cancel" from common.json
+   */
+  cancelButtonText?: string;
   /**
    * Custom next button text. If not provided, uses localized "Next" from common.json
    */

app/components/modals/ModalFooter/ModalFooter.view.tsx

@@ -7,11 +7,14 @@ import type { ModalFooterProps } from "./ModalFooter.types";
 export function ModalFooterView({
   showBackButton = false,
   showNextButton = false,
+  showCancelButton = false,
   showRemoveButton = false,
   onBack,
   onNext,
+  onCancel,
   onRemove,
   backButtonText,
+  cancelButtonText,
   nextButtonText,
   removeButtonText,
   nextButtonDisabled = false,
@@ -26,6 +29,7 @@ export function ModalFooterView({
       ? stepperProp
       : currentStep !== undefined && totalSteps !== undefined;
   const showStartBack = showBackButton && !showRemoveButton;
+  const showTrailing = showCancelButton || showNextButton;
 
   return (
     <div
@@ -64,17 +68,29 @@ export function ModalFooterView({
         </div>
       )}
 
-      {showNextButton && (
-        <div className="absolute right-[16px] top-[12px]">
-          <Button
-            buttonType="filled"
-            palette="default"
-            size="medium"
-            onClick={onNext}
-            disabled={nextButtonDisabled}
-          >
-            {nextButtonText}
-          </Button>
+      {showTrailing && (
+        <div className="absolute right-[16px] top-[12px] flex items-center gap-[8px]">
+          {showCancelButton ? (
+            <Button
+              buttonType="outline"
+              palette="default"
+              size="medium"
+              onClick={onCancel}
+            >
+              {cancelButtonText}
+            </Button>
+          ) : null}
+          {showNextButton ? (
+            <Button
+              buttonType="filled"
+              palette="default"
+              size="medium"
+              onClick={onNext}
+              disabled={nextButtonDisabled}
+            >
+              {nextButtonText}
+            </Button>
+          ) : null}
         </div>
       )}