+ );
+}
diff --git a/app/components/utility/CardStack/index.tsx b/app/components/utility/CardStack/index.tsx
new file mode 100644
index 0000000..b9c4976
--- /dev/null
+++ b/app/components/utility/CardStack/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./CardStack.container";
+export type { CardStackProps, CardStackItem } from "./CardStack.types";
diff --git a/app/components/utility/Scrollbar/Scrollbar.types.ts b/app/components/utility/Scrollbar/Scrollbar.types.ts
new file mode 100644
index 0000000..29af7fd
--- /dev/null
+++ b/app/components/utility/Scrollbar/Scrollbar.types.ts
@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+export interface ScrollbarProps {
+ /** Content to scroll. */
+ children: ReactNode;
+ /** Optional class name merged with scrollbar-design. */
+ className?: string;
+ /** Vertical scroll only, horizontal only, or both. @default "vertical" */
+ orientation?: "vertical" | "horizontal" | "both";
+}
diff --git a/app/components/utility/Scrollbar/Scrollbar.view.tsx b/app/components/utility/Scrollbar/Scrollbar.view.tsx
new file mode 100644
index 0000000..445492c
--- /dev/null
+++ b/app/components/utility/Scrollbar/Scrollbar.view.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import type { ScrollbarProps } from "./Scrollbar.types";
+
+const overflowClass = {
+ vertical: "overflow-x-clip overflow-y-auto",
+ horizontal: "overflow-y-clip overflow-x-auto",
+ both: "overflow-auto",
+} as const;
+
+export function ScrollbarView({
+ children,
+ className = "",
+ orientation = "vertical",
+}: ScrollbarProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/app/components/utility/Scrollbar/index.tsx b/app/components/utility/Scrollbar/index.tsx
new file mode 100644
index 0000000..bc9e054
--- /dev/null
+++ b/app/components/utility/Scrollbar/index.tsx
@@ -0,0 +1,5 @@
+export { ScrollbarView as default } from "./Scrollbar.view";
+export type { ScrollbarProps } from "./Scrollbar.types";
+
+/** Class name to apply the design system scrollbar to any scrollable element (e.g. textarea, div). */
+export const SCROLLBAR_DESIGN_CLASS = "scrollbar-design";
diff --git a/app/components/utility/Tag/Tag.container.tsx b/app/components/utility/Tag/Tag.container.tsx
new file mode 100644
index 0000000..b052b1c
--- /dev/null
+++ b/app/components/utility/Tag/Tag.container.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { memo } from "react";
+import { TagView } from "./Tag.view";
+import type { TagProps } from "./Tag.types";
+
+const DEFAULT_LABELS: Record = {
+ recommended: "RECOMMENDED",
+ selected: "SELECTED",
+};
+
+const TagContainer = memo(
+ ({ variant, children, className = "" }) => {
+ const content = children ?? DEFAULT_LABELS[variant];
+ return (
+
+ {content}
+
+ );
+ },
+);
+
+TagContainer.displayName = "Tag";
+
+export default TagContainer;
diff --git a/app/components/utility/Tag/Tag.types.ts b/app/components/utility/Tag/Tag.types.ts
new file mode 100644
index 0000000..d0d3730
--- /dev/null
+++ b/app/components/utility/Tag/Tag.types.ts
@@ -0,0 +1,15 @@
+export type TagVariant = "recommended" | "selected";
+
+export interface TagProps {
+ /** Visual variant: recommended (yellow) or selected (dark) */
+ variant: TagVariant;
+ /** Tag text. Defaults to "RECOMMENDED" or "SELECTED" when not provided. */
+ children?: React.ReactNode;
+ className?: string;
+}
+
+export interface TagViewProps {
+ variant: TagVariant;
+ children: React.ReactNode;
+ className: string;
+}
diff --git a/app/components/utility/Tag/Tag.view.tsx b/app/components/utility/Tag/Tag.view.tsx
new file mode 100644
index 0000000..01bf193
--- /dev/null
+++ b/app/components/utility/Tag/Tag.view.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import type { TagViewProps } from "./Tag.types";
+
+/**
+ * Tag view – Figma 17861-22238.
+ * Recommended: light yellow bg (#F6EEA7), dark text (#3F3F3F).
+ * Selected: dark bg (#3F3F3F), white text (#FFFFFF).
+ * Typography: Inter Medium 10px, line-height 12, uppercase.
+ */
+export function TagView({ variant, children, className }: TagViewProps) {
+ const isRecommended = variant === "recommended";
+ const bgClass = isRecommended
+ ? "bg-[#F6EEA7]"
+ : "bg-[#3F3F3F]";
+ const textClass = isRecommended
+ ? "text-[#3F3F3F]"
+ : "text-[#FFFFFF]";
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/app/components/utility/Tag/index.tsx b/app/components/utility/Tag/index.tsx
new file mode 100644
index 0000000..1cff338
--- /dev/null
+++ b/app/components/utility/Tag/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Tag.container";
+export type { TagProps, TagVariant } from "./Tag.types";
diff --git a/app/create/[step]/page.tsx b/app/create/[step]/page.tsx
index 22b4786..5c0239b 100644
--- a/app/create/[step]/page.tsx
+++ b/app/create/[step]/page.tsx
@@ -17,8 +17,7 @@ const VALID_STEPS: CreateFlowStep[] = [
"select",
"upload",
"review",
- "compact-cards",
- "expanded-cards",
+ "cards",
"right-rail",
"final-review",
"completed",
diff --git a/app/create/cards/page.tsx b/app/create/cards/page.tsx
new file mode 100644
index 0000000..2814345
--- /dev/null
+++ b/app/create/cards/page.tsx
@@ -0,0 +1,299 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import HeaderLockup from "../../components/type/HeaderLockup";
+import CardStack from "../../components/utility/CardStack";
+import Create from "../../components/modals/Create";
+import TextArea from "../../components/controls/TextArea";
+
+const COMPACT_TITLE = "How should this community communicate with each-other?";
+const COMPACT_DESCRIPTION =
+ "You can select multiple methods for different needs or add your own";
+const EXPANDED_TITLE =
+ "What method should this community use to communicate with eachother?";
+const EXPANDED_DESCRIPTION = COMPACT_DESCRIPTION;
+
+/** Create is a shell; which variant shows is determined by which card was clicked; we pass different props and children by pendingCardId. */
+
+/** Card ids for "Add platform" Create modal variants. */
+const IN_PERSON_CARD_ID = "in-person-meetings";
+const SIGNAL_CARD_ID = "signal";
+const VIDEO_MEETINGS_CARD_ID = "video-meetings";
+
+/** Copy for the default confirm modal (non–add-platform cards). */
+const CONFIRM_MODAL = {
+ title: "Confirm selection",
+ description: "Confirm to select this option.",
+ nextButtonText: "Confirm",
+ showBackButton: false,
+ currentStep: undefined,
+ totalSteps: undefined,
+} as const;
+
+/**
+ * "Add platform" variants share the same header pattern and "Add Platform" button.
+ * Each has its own title, description, and body (three TextArea sections).
+ */
+const ADD_PLATFORM_MODALS: Record<
+ string,
+ { title: string; description: string; nextButtonText: string }
+> = {
+ [IN_PERSON_CARD_ID]: {
+ title: "In-Person Meetings",
+ description:
+ "Physical gatherings for high-bandwidth communication and relationship building.",
+ nextButtonText: "Add Platform",
+ },
+ [SIGNAL_CARD_ID]: {
+ title: "Signal",
+ description:
+ "End-to-end encrypted messaging ideal for small, security-minded groups",
+ nextButtonText: "Add Platform",
+ },
+ [VIDEO_MEETINGS_CARD_ID]: {
+ title: "Video Meetings",
+ description:
+ "Synchronous video calls for remote face-to-face interaction.",
+ nextButtonText: "Add Platform",
+ },
+};
+
+const SECTION_KEYS = [
+ "Core Principle & Scope",
+ "Logistics, Admin & Norms",
+ "Code of Conduct",
+] as const;
+type SectionKey = (typeof SECTION_KEYS)[number];
+
+/** Default section text per platform (Figma 20647-18271, 20647-18273, 20736-12668). */
+const ADD_PLATFORM_SECTION_DEFAULTS: Record<
+ string,
+ Record
+> = {
+ [IN_PERSON_CARD_ID]: {
+ "Core Principle & Scope": `We value the highest bandwidth of communication, physical presence, to build trust that digital tools cannot match. Consequently, we reserve this high-trust space for annual retreats, strategic planning, and high-stakes interpersonal repair where body language is essential.`,
+ "Logistics, Admin & Norms": `Logistics focus on physical accessibility, venue security, and travel equity. Organizers control entry via keys or door staff. Culturally, participants are expected to maintain mission focus and adhere strictly to the itinerary to respect everyone's time. Side conversations or distracting behaviors that derail the agenda are discouraged.`,
+ "Code of Conduct": `We aspire to operate within these principles. We don't need to see eye to eye on everything, but we believe the world can be improved by collective action. Aspire to do no harm to members of this community. Violence or physical intimidation will not be tolerated. We have a zero-tolerance policy for racism, sexism, and bigotry.`,
+ },
+ [SIGNAL_CARD_ID]: {
+ "Core Principle & Scope": `We use Signal for all operational communication. To keep our workspace organized, official channels are prepended with an emoji (e.g., 🤓). Public channels are open to all volunteers, while Core Channels are restricted to coordinators. All Core Members are designated as admins to share the technical workload.`,
+ "Logistics, Admin & Norms": `We encourage direct messages to build friendship, but all operational logistics must happen in group channels. To respect everyone's time, use "Emoji Reactions" (👍, ♥️) to acknowledge messages rather than typing "thanks," which triggers notifications for everyone. Text is a poor medium for nuance: if a conversation needs more context, move it to a call or in person.`,
+ "Code of Conduct": `This space relies on collective responsibility. Posting content that attracts unwanted legal attention or exposes members' real-world identities without consent is prohibited. We aspire to do no harm by practicing strict operational security. Intentionally leaking information violates our safety. We have a zero-tolerance policy for harassment or abuse.`,
+ },
+ [VIDEO_MEETINGS_CARD_ID]: {
+ "Core Principle & Scope": `We prioritize synchronous connection to read facial expressions without the barrier of travel, using this tool for weekly syncs and quick consensus checks that benefit from real-time debate before moving to a vote.`,
+ "Logistics, Admin & Norms": `The host manages technical security via waiting rooms to prevent intrusion. Culturally, the focus is on maximizing the value of synchronous time. Norms include muting when not speaking, using the "Raise Hand" feature to queue, and utilizing the chat box for non-interruptive side comments. Distractions should be minimized.`,
+ "Code of Conduct": `We have a zero-tolerance policy for racism, sexism, and bigotry, whether spoken or shared in the chat. We aspire to do no harm. "Zoom-bombing" or broadcasting graphic content is prohibited. Willfully spreading obviously false information will not be tolerated. Do not discuss sensitive data that could attract legal or security risk.`,
+ },
+};
+
+/**
+ * Section with heading + info icon and an editable TextArea.
+ * This variant uses TextArea only (no TextInput); design is "Add Signal" / "Add Video Meetings".
+ */
+function CreateModalSection({
+ title,
+ value,
+ onChange,
+}: {
+ title: string;
+ value: string;
+ onChange: (value: string) => void;
+}) {
+ return (
+