From e6127f1a3ff92d68de43c1e3b71cdfb74a57f2e0 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 29 Apr 2026 07:20:16 -0600
Subject: [PATCH] Component cleanup

---
 .cursor/rules/component-props.mdc             |   5 +-
 .cursor/rules/component-structure.mdc         |  47 ++++-
 .cursor/rules/create-flow.mdc                 |   2 +-
 .cursor/rules/routes.mdc                      |   8 +-
 AGENTS.md                                     |   5 +
 README.md                                     |   4 +-
 app/(admin)/monitor/MonitorPageContent.tsx    |   6 +-
 .../WebVitalsDashboard.container.tsx          |   5 +-
 .../WebVitalsDashboard.types.ts               |   2 +-
 .../WebVitalsDashboard.view.tsx               |   0
 .../_components}/WebVitalsDashboard/index.tsx |   0
 app/(app)/create/CreateFlowLayoutClient.tsx   |   4 +-
 .../components/ApplicableScopeField.tsx       |   2 +-
 .../CreateFlowLockupCardStepShell.tsx         |   4 +-
 .../create/components/ModalTextAreaField.tsx  |   2 +-
 .../create/review-template/[slug]/page.tsx    |   4 +-
 .../card/CommunicationMethodsScreen.tsx       |   2 +-
 .../screens/card/ConflictManagementScreen.tsx |   2 +-
 .../screens/card/MembershipMethodsScreen.tsx  |   2 +-
 .../screens/completed/CompletedScreen.tsx     |  10 +-
 .../screens/review/CommunityReviewScreen.tsx  |  10 +-
 .../screens/review/FinalReviewScreen.tsx      |  17 +-
 .../right-rail/DecisionApproachesScreen.tsx   |  33 +--
 .../profile/_components/ProfilePage.view.tsx  |  16 +-
 app/(marketing)/page.tsx                      |  36 ++--
 app/(marketing)/rules/[id]/page.tsx           |   4 +-
 .../{icons => asset/Avatar}/Avatar.tsx        |   0
 app/components/asset/Avatar/index.tsx         |   2 +
 .../AvatarContainer/AvatarContainer.tsx       |   0
 .../AvatarContainer/index.tsx                 |   0
 app/components/asset/{ => icon}/Icon.tsx      |  20 +-
 app/components/asset/icon/index.tsx           |   3 +
 app/components/asset/index.tsx                |   3 -
 .../buttons/{ => Button}/Button.tsx           |   2 +-
 app/components/buttons/Button/index.tsx       |   1 +
 .../InlineTextButton.tsx                      |   0
 .../buttons/InlineTextButton/index.tsx        |   2 +
 app/components/cards/Card/Card.view.tsx       | 101 ---------
 app/components/cards/Card/index.tsx           |   2 -
 .../CardStack/CardStack.container.tsx         |   3 +-
 .../CardStack/CardStack.types.ts              |   0
 .../CardStack/CardStack.view.tsx              |  32 +--
 .../{utility => cards}/CardStack/index.tsx    |   0
 .../Icon.container.tsx}                       |  12 +-
 .../IconCard.types.ts => Icon/Icon.types.ts}  |   4 +-
 .../IconCard.view.tsx => Icon/Icon.view.tsx}  |   6 +-
 app/components/cards/Icon/index.tsx           |   2 +
 app/components/cards/IconCard/index.tsx       |   2 -
 .../Mini.container.tsx}                       |  14 +-
 .../MiniCard.types.ts => Mini/Mini.types.ts}  |   4 +-
 .../MiniCard.view.tsx => Mini/Mini.view.tsx}  |  10 +-
 app/components/cards/Mini/index.tsx           |   2 +
 app/components/cards/MiniCard/index.tsx       |   2 -
 .../Rule.container.tsx}                       |  12 +-
 .../RuleCard.types.ts => Rule/Rule.types.ts}  |  15 +-
 .../RuleCard.view.tsx => Rule/Rule.view.tsx}  |   8 +-
 app/components/cards/Rule/index.tsx           |   2 +
 app/components/cards/RuleCard/index.tsx       |   5 -
 .../Selection.container.tsx}                  |  16 +-
 .../Selection.types.ts}                       |   6 +-
 .../cards/Selection/Selection.view.tsx        | 104 ++++++++++
 app/components/cards/Selection/index.tsx      |   2 +
 .../cards/{NumberCard.tsx => Step/Step.tsx}   |  15 +-
 app/components/cards/Step/index.tsx           |   2 +
 .../TemplateChipDetailModal.tsx               |   2 +-
 .../TemplateReviewCard/TemplateReviewCard.tsx |  19 +-
 .../controls/Checkbox/Checkbox.container.tsx  |   2 +-
 .../CheckboxGroup/CheckboxGroup.container.tsx |   2 +-
 .../controls/Chip/Chip.container.tsx          |   2 +-
 .../IncrementerBlock.types.ts                 |   2 +-
 .../IncrementerBlock.view.tsx                 |   2 +-
 .../InfoMessageBox.container.tsx              |   5 +-
 .../InfoMessageBox/InfoMessageBox.types.ts    |   0
 .../InfoMessageBox/InfoMessageBox.view.tsx    |   2 +-
 .../InfoMessageBox/index.tsx                  |   0
 .../InputWithCounter.container.tsx            |   2 +-
 .../MultiSelect/MultiSelect.container.tsx     |   2 +-
 .../controls/MultiSelect/MultiSelect.view.tsx |   4 +-
 .../RadioGroup/RadioGroup.container.tsx       |   2 +-
 .../SelectInput/SelectInput.container.tsx     |   2 +-
 .../SelectOption/SelectOption.container.tsx   |   2 +-
 .../controls/Switch/Switch.container.tsx      |   2 +-
 .../controls/TextArea/TextArea.container.tsx  |   2 +-
 .../TextInput/TextInput.container.tsx         |   2 +-
 .../controls/Toggle/Toggle.container.tsx      |   2 +-
 .../ToggleGroup/ToggleGroup.container.tsx     |   2 +-
 .../controls/Upload/Upload.container.tsx      |   2 +-
 .../controls/Upload/Upload.view.tsx           |   2 +-
 app/components/layout/List/List.types.ts      |   2 +-
 .../layout/ListEntry/ListEntry.types.ts       |   2 +-
 .../layout/ListEntry/ListEntry.view.tsx       |   2 +-
 .../modals/ContextMenu/ContextMenu.tsx        |  41 ----
 .../modals/ContextMenu/ContextMenuDivider.tsx |  27 ---
 .../modals/ContextMenu/ContextMenuSection.tsx |  36 ----
 .../ContextMenuItem.container.tsx             | 101 ---------
 .../ContextMenuItem/ContextMenuItem.types.ts  |  27 ---
 .../ContextMenuItem/ContextMenuItem.view.tsx  |  71 -------
 .../modals/ContextMenuItem/index.tsx          |   2 -
 app/components/modals/Create/Create.view.tsx  |   4 +-
 .../modals/Create/useCreateModalA11y.ts       |   2 +-
 .../modals/Dialog/Dialog.container.tsx        |   5 +-
 app/components/modals/Dialog/Dialog.view.tsx  |   4 +-
 app/components/modals/Login/Login.view.tsx    |   2 +-
 .../ModalFooter/ModalFooter.container.tsx     |   2 +-
 .../ModalFooter/ModalFooter.types.ts          |   0
 .../ModalFooter/ModalFooter.view.tsx          |   0
 .../{utility => modals}/ModalFooter/index.tsx |   0
 .../ModalHeader/ModalHeader.container.tsx     |   2 +-
 .../ModalHeader/ModalHeader.types.ts          |   0
 .../ModalHeader/ModalHeader.view.tsx          |   0
 .../{utility => modals}/ModalHeader/index.tsx |   0
 .../ConditionalNavigationClient.tsx           |   4 +-
 .../CreateFlowFooter.container.tsx            |   2 +-
 .../CreateFlowFooter.types.ts                 |   0
 .../CreateFlowFooter.view.tsx                 |   0
 .../CreateFlowFooter/index.tsx                |   0
 .../CreateFlowTopNav.container.tsx            |   4 +-
 .../CreateFlowTopNav.types.ts                 |   0
 .../CreateFlowTopNav.view.tsx                 |   6 +-
 .../CreateFlowTopNav/index.tsx                |   0
 app/components/navigation/Footer.tsx          |   6 +-
 .../navigation/{MenuBar.tsx => Menu.tsx}      |  16 +-
 .../navigation/MenuBarItem/index.tsx          |   2 -
 .../MenuItem.container.tsx}                   |  14 +-
 .../MenuItem.types.ts}                        |  22 +-
 .../MenuItem.view.tsx}                        |  10 +-
 app/components/navigation/MenuItem/index.tsx  |   2 +
 .../Top.container.tsx}                        |  91 ++++-----
 .../TopNav.types.ts => Top/Top.types.ts}      |   4 +-
 .../TopNav.view.tsx => Top/Top.view.tsx}      |  84 ++++----
 .../TopWithPathname.tsx}                      |  18 +-
 app/components/navigation/Top/index.tsx       |   3 +
 app/components/navigation/TopNav/index.tsx    |   3 -
 .../CardSteps/CardSteps.container.tsx         |  40 ++++
 .../sections/CardSteps/CardSteps.types.ts     |  18 ++
 .../sections/CardSteps/CardSteps.view.tsx     |  61 ++++++
 app/components/sections/CardSteps/index.tsx   |   2 +
 .../CommunityRuleDocument.types.ts            |  16 --
 .../CommunityRuleDocument.view.tsx            |  65 ------
 .../sections/CommunityRuleDocument/index.tsx  |   2 -
 .../sections/FeatureGrid/FeatureGrid.view.tsx |   6 +-
 .../GovernanceTemplateGrid.tsx                |   4 +-
 .../NumberedCards/NumberedCards.container.tsx |  35 ----
 .../NumberedCards/NumberedCards.types.ts      |  15 --
 .../NumberedCards/NumberedCards.view.tsx      |  70 -------
 .../sections/NumberedCards/index.tsx          |   2 -
 .../sections/RuleStack/RuleStack.view.tsx     |   2 +-
 .../type/CommunityRule/CommunityRule.types.ts |  28 +++
 .../type/CommunityRule/CommunityRule.view.tsx |  56 +++++
 app/components/type/CommunityRule/index.tsx   |   7 +
 .../type/HeaderLockup/HeaderLockup.view.tsx   |  15 +-
 .../InputLabel/InputLabel.container.tsx       |   3 +-
 .../InputLabel/InputLabel.types.ts            |   0
 .../InputLabel/InputLabel.view.tsx            |   0
 .../{utility => type}/InputLabel/index.tsx    |   0
 app/components/type/Section/Section.types.ts  |  10 +
 app/components/type/Section/Section.view.tsx  |  55 +++++
 app/components/type/Section/index.tsx         |   2 +
 .../SectionHeader}/SectionHeader.tsx          |  50 +++--
 app/components/type/SectionHeader/index.tsx   |   2 +
 .../type/TextBlock/TextBlock.types.ts         |  11 +
 .../type/TextBlock/TextBlock.view.tsx         |  71 +++++++
 app/components/type/TextBlock/index.tsx       |   2 +
 .../DecisionMakingSidebar.container.tsx       |  44 ----
 .../DecisionMakingSidebar.types.ts            |  33 ---
 .../DecisionMakingSidebar.view.tsx            |  76 -------
 .../utility/DecisionMakingSidebar/index.tsx   |   2 -
 .../utility/Scrollbar/Scrollbar.container.tsx |   2 +-
 .../utility/Separator/Separator.tsx           |  13 --
 app/components/utility/Separator/index.tsx    |   1 -
 app/components/utility/Tag/Tag.container.tsx  |   2 +-
 app/components/utility/Tag/Tag.view.tsx       |  15 +-
 app/not-found.tsx                             |   4 +-
 docs/README.md                                |   3 +
 docs/create-flow.md                           |   4 +-
 docs/figma-component-registry.md              | 192 +++++++++++++++++-
 docs/guides/backend-linear-tickets.md         |  20 +-
 lib/assetUtils.ts                             |   9 +
 lib/create/buildFinalReviewCategories.ts      |   2 +-
 lib/create/buildPublishPayload.ts             |  17 +-
 lib/create/documentEntryGuards.ts             |  26 +++
 lib/create/templateReviewMapping.ts           |  26 +--
 lib/propNormalization.ts                      |  34 ++--
 messages/en/components/cardSteps.json         |   7 +
 .../en/components/{menuBar.json => menu.json} |   0
 messages/en/components/numberedCards.json     |   8 -
 messages/en/create/topNav.json                |   2 +
 messages/en/index.ts                          |   8 +-
 messages/en/pages/home.json                   |   5 +-
 next.config.mjs                               |   2 +-
 prisma/seed.ts                                |   2 +-
 .../assets/{Vector_Dao.svg => vector/dao.svg} |   0
 .../default.svg}                              |   0
 .../mutual-aid.svg}                           |   0
 .../open-source.svg}                          |   0
 .../{Vector_Shapes.svg => vector/shapes.svg}  |   0
 .../worker-coop.svg}                          |   0
 stories/ContextMenu/ContextMenu.stories.js    | 138 -------------
 stories/WebVitalsDashboard.stories.js         |   4 +-
 stories/{icons => asset}/Avatar.stories.js    |   6 +-
 .../AvatarContainer.stories.js                |   8 +-
 stories/asset/Icon.stories.js                 |   4 +-
 stories/{icons => asset}/Logo.stories.js      |  10 +-
 .../CardStack.stories.js                      |   6 +-
 .../{IconCard.stories.js => Icon.stories.js}  |  10 +-
 .../{MiniCard.stories.js => Mini.stories.js}  |  14 +-
 .../{RuleCard.stories.js => Rule.stories.js}  |  14 +-
 .../{Card.stories.js => Selection.stories.js} |  14 +-
 ...{NumberCard.stories.js => Step.stories.js} |  44 ++--
 stories/cards/TemplateReviewCard.stories.js   |   4 +-
 .../InfoMessageBox.stories.js                 |   4 +-
 .../RailLockupAndInfoBox.stories.js}          |  27 ++-
 .../ModalFooter.stories.js                    |   4 +-
 .../ModalHeader.stories.js                    |   4 +-
 .../CreateFlowFooter.stories.js               |   4 +-
 .../CreateFlowTopNav.stories.js               |   4 +-
 stories/navigation/Menu.stories.js            | 101 +++++++++
 stories/navigation/MenuBar.stories.js         | 101 ---------
 ...BarItem.stories.js => MenuItem.stories.js} |  74 +++----
 .../{TopNav.stories.js => Top.stories.js}     |  10 +-
 stories/pages/CompletedPage.stories.js        |   2 +-
 stories/pages/FinalReviewPage.stories.js      |   2 +-
 ...dCards.stories.js => CardSteps.stories.js} |  23 ++-
 .../sections/CommunityRuleDocument.stories.js |  58 ------
 stories/sections/FeatureGrid.stories.js       |   6 +-
 .../GovernanceTemplateGrid.stories.js         |   2 +-
 stories/sections/RuleStack.stories.js         |   2 +-
 stories/type/CommunityRule.stories.js         |  85 ++++++++
 stories/type/Section.stories.tsx              |  56 +++++
 .../SectionHeader.stories.js                  |  34 +++-
 stories/type/TextBlock.stories.js             |  35 ++++
 stories/utility/Separator.stories.js          |  28 ---
 ...cument.test.tsx => CommunityRule.test.tsx} |  10 +-
 tests/components/ContextMenu.test.tsx         |  23 ---
 tests/components/ContextMenuItem.test.tsx     |  25 ---
 tests/components/CreateFlowFooter.test.tsx    |   2 +-
 tests/components/CreateFlowTopNav.test.tsx    |   2 +-
 .../components/DecisionMakingSidebar.test.tsx |  38 ----
 tests/components/FinalReviewPage.test.tsx     |  12 +-
 tests/components/Icon.test.tsx                | 108 +++++++++-
 tests/components/IconCard.test.tsx            | 112 ----------
 tests/components/InfoMessageBox.test.tsx      |   2 +-
 tests/components/InputLabel.test.tsx          |   2 +-
 tests/components/Logo.test.tsx                |   2 +-
 tests/components/ModalFooter.test.tsx         |   2 +-
 tests/components/ModalHeader.test.tsx         |   2 +-
 tests/components/ReviewPage.test.tsx          |   6 +-
 tests/components/Section.test.tsx             |  30 +++
 tests/components/SectionHeader.test.tsx       |   2 +-
 tests/components/Separator.test.tsx           |  22 --
 tests/components/TemplateReviewCard.test.tsx  |   4 +-
 tests/components/TextBlock.test.tsx           |  26 +++
 .../{TopNav.test.tsx => Top.test.tsx}         |  28 +--
 tests/e2e/critical-journeys.spec.ts           |   8 +-
 tests/pages/decision-approaches.test.jsx      |  17 +-
 tests/pages/home.test.jsx                     |  16 +-
 tests/pages/page-flow.test.jsx                |  13 +-
 tests/pages/user-journey.test.jsx             |  22 +-
 tests/unit/CardStack.test.jsx                 |   2 +-
 ...beredCards.test.jsx => CardSteps.test.jsx} |  96 ++++-----
 .../unit/{RuleCard.test.jsx => Rule.test.jsx} |  42 ++--
 tests/unit/RuleStack.test.jsx                 |   2 +-
 .../{Card.test.jsx => Selection.test.jsx}     |  26 +--
 .../{NumberCard.test.jsx => Step.test.jsx}    |  54 ++---
 tests/unit/buildPublishPayload.test.ts        |  33 +++
 tests/unit/templateReviewMapping.test.ts      |   2 +-
 tests/utils/test-utils.tsx                    |   2 +-
 267 files changed, 2087 insertions(+), 2196 deletions(-)
 rename app/{components/sections => (admin)/monitor/_components}/WebVitalsDashboard/WebVitalsDashboard.container.tsx (95%)
 rename app/{components/sections => (admin)/monitor/_components}/WebVitalsDashboard/WebVitalsDashboard.types.ts (92%)
 rename app/{components/sections => (admin)/monitor/_components}/WebVitalsDashboard/WebVitalsDashboard.view.tsx (100%)
 rename app/{components/sections => (admin)/monitor/_components}/WebVitalsDashboard/index.tsx (100%)
 rename app/components/{icons => asset/Avatar}/Avatar.tsx (100%)
 create mode 100644 app/components/asset/Avatar/index.tsx
 rename app/components/{utility => asset}/AvatarContainer/AvatarContainer.tsx (100%)
 rename app/components/{utility => asset}/AvatarContainer/index.tsx (100%)
 rename app/components/asset/{ => icon}/Icon.tsx (83%)
 create mode 100644 app/components/asset/icon/index.tsx
 delete mode 100644 app/components/asset/index.tsx
 rename app/components/buttons/{ => Button}/Button.tsx (99%)
 create mode 100644 app/components/buttons/Button/index.tsx
 rename app/components/buttons/{ => InlineTextButton}/InlineTextButton.tsx (100%)
 create mode 100644 app/components/buttons/InlineTextButton/index.tsx
 delete mode 100644 app/components/cards/Card/Card.view.tsx
 delete mode 100644 app/components/cards/Card/index.tsx
 rename app/components/{utility => cards}/CardStack/CardStack.container.tsx (96%)
 rename app/components/{utility => cards}/CardStack/CardStack.types.ts (100%)
 rename app/components/{utility => cards}/CardStack/CardStack.view.tsx (97%)
 rename app/components/{utility => cards}/CardStack/index.tsx (100%)
 rename app/components/cards/{IconCard/IconCard.container.tsx => Icon/Icon.container.tsx} (70%)
 rename app/components/cards/{IconCard/IconCard.types.ts => Icon/Icon.types.ts} (80%)
 rename app/components/cards/{IconCard/IconCard.view.tsx => Icon/Icon.view.tsx} (91%)
 create mode 100644 app/components/cards/Icon/index.tsx
 delete mode 100644 app/components/cards/IconCard/index.tsx
 rename app/components/cards/{MiniCard/MiniCard.container.tsx => Mini/Mini.container.tsx} (90%)
 rename app/components/cards/{MiniCard/MiniCard.types.ts => Mini/Mini.types.ts} (90%)
 rename app/components/cards/{MiniCard/MiniCard.view.tsx => Mini/Mini.view.tsx} (93%)
 create mode 100644 app/components/cards/Mini/index.tsx
 delete mode 100644 app/components/cards/MiniCard/index.tsx
 rename app/components/cards/{RuleCard/RuleCard.container.tsx => Rule/Rule.container.tsx} (90%)
 rename app/components/cards/{RuleCard/RuleCard.types.ts => Rule/Rule.types.ts} (86%)
 rename app/components/cards/{RuleCard/RuleCard.view.tsx => Rule/Rule.view.tsx} (98%)
 create mode 100644 app/components/cards/Rule/index.tsx
 delete mode 100644 app/components/cards/RuleCard/index.tsx
 rename app/components/cards/{Card/Card.container.tsx => Selection/Selection.container.tsx} (61%)
 rename app/components/cards/{Card/Card.types.ts => Selection/Selection.types.ts} (76%)
 create mode 100644 app/components/cards/Selection/Selection.view.tsx
 create mode 100644 app/components/cards/Selection/index.tsx
 rename app/components/cards/{NumberCard.tsx => Step/Step.tsx} (90%)
 create mode 100644 app/components/cards/Step/index.tsx
 rename app/components/{utility => controls}/InfoMessageBox/InfoMessageBox.container.tsx (90%)
 rename app/components/{utility => controls}/InfoMessageBox/InfoMessageBox.types.ts (100%)
 rename app/components/{utility => controls}/InfoMessageBox/InfoMessageBox.view.tsx (97%)
 rename app/components/{utility => controls}/InfoMessageBox/index.tsx (100%)
 delete mode 100644 app/components/modals/ContextMenu/ContextMenu.tsx
 delete mode 100644 app/components/modals/ContextMenu/ContextMenuDivider.tsx
 delete mode 100644 app/components/modals/ContextMenu/ContextMenuSection.tsx
 delete mode 100644 app/components/modals/ContextMenuItem/ContextMenuItem.container.tsx
 delete mode 100644 app/components/modals/ContextMenuItem/ContextMenuItem.types.ts
 delete mode 100644 app/components/modals/ContextMenuItem/ContextMenuItem.view.tsx
 delete mode 100644 app/components/modals/ContextMenuItem/index.tsx
 rename app/components/{utility => modals}/ModalFooter/ModalFooter.container.tsx (83%)
 rename app/components/{utility => modals}/ModalFooter/ModalFooter.types.ts (100%)
 rename app/components/{utility => modals}/ModalFooter/ModalFooter.view.tsx (100%)
 rename app/components/{utility => modals}/ModalFooter/index.tsx (100%)
 rename app/components/{utility => modals}/ModalHeader/ModalHeader.container.tsx (83%)
 rename app/components/{utility => modals}/ModalHeader/ModalHeader.types.ts (100%)
 rename app/components/{utility => modals}/ModalHeader/ModalHeader.view.tsx (100%)
 rename app/components/{utility => modals}/ModalHeader/index.tsx (100%)
 rename app/components/{utility => navigation}/CreateFlowFooter/CreateFlowFooter.container.tsx (92%)
 rename app/components/{utility => navigation}/CreateFlowFooter/CreateFlowFooter.types.ts (100%)
 rename app/components/{utility => navigation}/CreateFlowFooter/CreateFlowFooter.view.tsx (100%)
 rename app/components/{utility => navigation}/CreateFlowFooter/index.tsx (100%)
 rename app/components/{utility => navigation}/CreateFlowTopNav/CreateFlowTopNav.container.tsx (88%)
 rename app/components/{utility => navigation}/CreateFlowTopNav/CreateFlowTopNav.types.ts (100%)
 rename app/components/{utility => navigation}/CreateFlowTopNav/CreateFlowTopNav.view.tsx (96%)
 rename app/components/{utility => navigation}/CreateFlowTopNav/index.tsx (100%)
 rename app/components/navigation/{MenuBar.tsx => Menu.tsx} (81%)
 delete mode 100644 app/components/navigation/MenuBarItem/index.tsx
 rename app/components/navigation/{MenuBarItem/MenuBarItem.container.tsx => MenuItem/MenuItem.container.tsx} (93%)
 rename app/components/navigation/{MenuBarItem/MenuBarItem.types.ts => MenuItem/MenuItem.types.ts} (61%)
 rename app/components/navigation/{MenuBarItem/MenuBarItem.view.tsx => MenuItem/MenuItem.view.tsx} (74%)
 create mode 100644 app/components/navigation/MenuItem/index.tsx
 rename app/components/navigation/{TopNav/TopNav.container.tsx => Top/Top.container.tsx} (77%)
 rename app/components/navigation/{TopNav/TopNav.types.ts => Top/Top.types.ts} (94%)
 rename app/components/navigation/{TopNav/TopNav.view.tsx => Top/Top.view.tsx} (87%)
 rename app/components/navigation/{TopNav/TopNavWithPathname.tsx => Top/TopWithPathname.tsx} (77%)
 create mode 100644 app/components/navigation/Top/index.tsx
 delete mode 100644 app/components/navigation/TopNav/index.tsx
 create mode 100644 app/components/sections/CardSteps/CardSteps.container.tsx
 create mode 100644 app/components/sections/CardSteps/CardSteps.types.ts
 create mode 100644 app/components/sections/CardSteps/CardSteps.view.tsx
 create mode 100644 app/components/sections/CardSteps/index.tsx
 delete mode 100644 app/components/sections/CommunityRuleDocument/CommunityRuleDocument.types.ts
 delete mode 100644 app/components/sections/CommunityRuleDocument/CommunityRuleDocument.view.tsx
 delete mode 100644 app/components/sections/CommunityRuleDocument/index.tsx
 delete mode 100644 app/components/sections/NumberedCards/NumberedCards.container.tsx
 delete mode 100644 app/components/sections/NumberedCards/NumberedCards.types.ts
 delete mode 100644 app/components/sections/NumberedCards/NumberedCards.view.tsx
 delete mode 100644 app/components/sections/NumberedCards/index.tsx
 create mode 100644 app/components/type/CommunityRule/CommunityRule.types.ts
 create mode 100644 app/components/type/CommunityRule/CommunityRule.view.tsx
 create mode 100644 app/components/type/CommunityRule/index.tsx
 rename app/components/{utility => type}/InputLabel/InputLabel.container.tsx (89%)
 rename app/components/{utility => type}/InputLabel/InputLabel.types.ts (100%)
 rename app/components/{utility => type}/InputLabel/InputLabel.view.tsx (100%)
 rename app/components/{utility => type}/InputLabel/index.tsx (100%)
 create mode 100644 app/components/type/Section/Section.types.ts
 create mode 100644 app/components/type/Section/Section.view.tsx
 create mode 100644 app/components/type/Section/index.tsx
 rename app/components/{sections => type/SectionHeader}/SectionHeader.tsx (53%)
 create mode 100644 app/components/type/SectionHeader/index.tsx
 create mode 100644 app/components/type/TextBlock/TextBlock.types.ts
 create mode 100644 app/components/type/TextBlock/TextBlock.view.tsx
 create mode 100644 app/components/type/TextBlock/index.tsx
 delete mode 100644 app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
 delete mode 100644 app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.types.ts
 delete mode 100644 app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.view.tsx
 delete mode 100644 app/components/utility/DecisionMakingSidebar/index.tsx
 delete mode 100644 app/components/utility/Separator/Separator.tsx
 delete mode 100644 app/components/utility/Separator/index.tsx
 create mode 100644 lib/create/documentEntryGuards.ts
 create mode 100644 messages/en/components/cardSteps.json
 rename messages/en/components/{menuBar.json => menu.json} (100%)
 delete mode 100644 messages/en/components/numberedCards.json
 rename public/assets/{Vector_Dao.svg => vector/dao.svg} (100%)
 rename public/assets/{Vector_Default.svg => vector/default.svg} (100%)
 rename public/assets/{Vector_MutualAid.svg => vector/mutual-aid.svg} (100%)
 rename public/assets/{Vector_OpenSource.svg => vector/open-source.svg} (100%)
 rename public/assets/{Vector_Shapes.svg => vector/shapes.svg} (100%)
 rename public/assets/{Vector_WorkerCoop.svg => vector/worker-coop.svg} (100%)
 delete mode 100644 stories/ContextMenu/ContextMenu.stories.js
 rename stories/{icons => asset}/Avatar.stories.js (93%)
 rename stories/{utility => asset}/AvatarContainer.stories.js (95%)
 rename stories/{icons => asset}/Logo.stories.js (94%)
 rename stories/{create-flow => cards}/CardStack.stories.js (94%)
 rename stories/cards/{IconCard.stories.js => Icon.stories.js} (88%)
 rename stories/cards/{MiniCard.stories.js => Mini.stories.js} (90%)
 rename stories/cards/{RuleCard.stories.js => Rule.stories.js} (98%)
 rename stories/cards/{Card.stories.js => Selection.stories.js} (95%)
 rename stories/cards/{NumberCard.stories.js => Step.stories.js} (79%)
 rename stories/{utility => controls}/InfoMessageBox.stories.js (86%)
 rename stories/{utility/DecisionMakingSidebar.stories.js => controls/RailLockupAndInfoBox.stories.js} (52%)
 rename stories/{utility => modals}/ModalFooter.stories.js (93%)
 rename stories/{utility => modals}/ModalHeader.stories.js (87%)
 rename stories/{utility => navigation}/CreateFlowFooter.stories.js (89%)
 rename stories/{utility => navigation}/CreateFlowTopNav.stories.js (91%)
 create mode 100644 stories/navigation/Menu.stories.js
 delete mode 100644 stories/navigation/MenuBar.stories.js
 rename stories/navigation/{MenuBarItem.stories.js => MenuItem.stories.js} (64%)
 rename stories/navigation/{TopNav.stories.js => Top.stories.js} (97%)
 rename stories/sections/{NumberedCards.stories.js => CardSteps.stories.js} (68%)
 delete mode 100644 stories/sections/CommunityRuleDocument.stories.js
 create mode 100644 stories/type/CommunityRule.stories.js
 create mode 100644 stories/type/Section.stories.tsx
 rename stories/{sections => type}/SectionHeader.stories.js (71%)
 create mode 100644 stories/type/TextBlock.stories.js
 delete mode 100644 stories/utility/Separator.stories.js
 rename tests/components/{CommunityRuleDocument.test.tsx => CommunityRule.test.tsx} (69%)
 delete mode 100644 tests/components/ContextMenu.test.tsx
 delete mode 100644 tests/components/ContextMenuItem.test.tsx
 delete mode 100644 tests/components/DecisionMakingSidebar.test.tsx
 delete mode 100644 tests/components/IconCard.test.tsx
 create mode 100644 tests/components/Section.test.tsx
 delete mode 100644 tests/components/Separator.test.tsx
 create mode 100644 tests/components/TextBlock.test.tsx
 rename tests/components/{TopNav.test.tsx => Top.test.tsx} (80%)
 rename tests/unit/{NumberedCards.test.jsx => CardSteps.test.jsx} (55%)
 rename tests/unit/{RuleCard.test.jsx => Rule.test.jsx} (80%)
 rename tests/unit/{Card.test.jsx => Selection.test.jsx} (76%)
 rename tests/unit/{NumberCard.test.jsx => Step.test.jsx} (81%)

diff --git a/.cursor/rules/component-props.mdc b/.cursor/rules/component-props.mdc
index 200beec..dcc5917 100644
--- a/.cursor/rules/component-props.mdc
+++ b/.cursor/rules/component-props.mdc
@@ -34,8 +34,9 @@ export type ChipPaletteValue = (typeof CHIP_PALETTE_OPTIONS)[number];
   distinct Figma node.
 - For create-flow screens, node ids come from `CREATE_FLOW_SCREEN_REGISTRY`
   in `app/(app)/create/utils/createFlowScreenRegistry.ts`. For everything else,
-  pull the node id from the Figma file directly. Use `TODO(figma)` as a
-  placeholder rather than omitting the docstring entirely.
+  prefer `Figma: "<Path>" (<node-id>)` from the file. If the node id is not
+  wired yet, use `Figma: "<Path>"` plus a short note (e.g. *canonical code under
+  \`controls/\`*) rather than omitting the docstring.
 
 ```typescript
 /**
diff --git a/.cursor/rules/component-structure.mdc b/.cursor/rules/component-structure.mdc
index 449befe..f64dcc9 100644
--- a/.cursor/rules/component-structure.mdc
+++ b/.cursor/rules/component-structure.mdc
@@ -51,13 +51,48 @@ export { default } from "./<Name>.container";
 export type { <Name>Props } from "./<Name>.types";
 ```
 
-## Single-file pattern (exception)
+## Small presentational packages (buttons)
 
-`app/components/buttons/*.tsx` and other trivially-presentational components
-can stay as a single file when they have **no derived state and only a
-handful of props** (e.g. `Button.tsx`, `InlineTextButton.tsx`). If you find
-yourself adding state, side effects, or enum logic, promote it to the split
-pattern.
+`app/components/buttons/<Name>/` holds **`index.tsx`** plus **`<Name>.tsx`**
+(the **`Button`**, **`InlineTextButton`** packages today). Promote to the full
+container/view/types split when state or logic outgrows a single module (like **`controls/TextInput`**).
+
+## `cards/` packages
+
+Prefer the **container / view / types** layout for **`Selection/`**, **`CardStack/`**, **`Rule/`**,
+**`Icon/`**, **`Mini/`**, **`TemplateReviewCard/`**. **`Step/`** keeps a single
+**`<Name>.tsx`** next to **`index.tsx`** until complexity justifies a split.
+
+## `modals/` packages
+
+Use the same **container / view / types** split where those files exist (**`Alert`**, **`Create`**, **`Dialog`**, **`Login`**, **`Tooltip`**, **`ModalHeader`**, **`ModalFooter`**).
+
+## `navigation/` packages
+
+Use the **container / view / types** split + per-package **`index.tsx`** for **`Top/`**, **`CreateFlowTopNav/`**, **`CreateFlowFooter/`**, **`NavigationItem/`**, **`Link/`**, **`MenuItem/`**. **`TopWithPathname.tsx`** lives inside **`Top/`** as the pathname + session wrapper.
+
+**Root-level** **`Menu.tsx`**, **`Footer.tsx`**, **`ConditionalNavigation.tsx`**, and **`ConditionalNavigationClient.tsx`** sit beside those folders—no bucket-level barrel. Figma **Navigation / Menu** maps to **`Menu`** + **`MenuItem`** (see **`docs/figma-component-registry.md`**, Navigation conventions) and **`routes.mdc`** for shell behavior.
+
+## `progress/` packages
+
+Use the **container / view / types** split + **`index.tsx`** for **`Stepper/`** and **`ProportionBar/`** (same shape as **`controls/`**). See **`docs/figma-component-registry.md`** — **Progress conventions** for Figma **Progress** vs **Control / Proportion**.
+
+## `sections/` packages
+
+Section-level compositions are **mixed**: many folders use **`container` / `view` / `types`** (**`FeatureGrid/`**, **`QuoteBlock/`**, …), while **`ContentBanner.tsx`** and **`SectionNumber.tsx`** are **single modules** at the bucket root. Prefer the **split** for **new** composites; see **`docs/figma-component-registry.md`** — **Sections conventions**. **`SectionHeader/`** lives under **`type/`** (Figma Type / SectionHeader). Published rule typography body **`CommunityRule/`** lives under **`type/`** (see **Type conventions**).
+
+## `type/` packages
+
+**`type/`** is mostly **`container` / `view` / `types`** + **`index.tsx`** (**`HeaderLockup/`**, **`ContentLockup/`**, **`NumberedList/`**, **`InputLabel/`**). **`SectionHeader/`** is a small presentational package (**`SectionHeader.tsx`** + **`index.tsx`**) for the Figma Type SectionHeader lockup. **`CommunityRule/`**, **`Section/`**, and **`TextBlock/`** are **view + types** packages (Community Rule document tree). See **`docs/figma-component-registry.md`** — **Type conventions**.
+
+## No package-level barrels
+
+Do **not** add **`app/components/<bucket>/index.tsx`** that re-exports every
+sibling under that bucket (there is no `buttons/index.tsx` or `asset/index.tsx`).
+Import **`…/buttons/Button`**, **`…/asset/icon`**, **`…/asset/Logo`**, etc.—same
+mental model everywhere.
+
+**Per-component** **`index.tsx`** entrypoints (**`Logo/index.tsx`**, **`controls/TextInput/index.tsx`**, …) stay as documented above—aggregating an entire **`buttons/`** or **`asset/`** tier in one file does not.
 
 ## Wrapper / group components
 
diff --git a/.cursor/rules/create-flow.mdc b/.cursor/rules/create-flow.mdc
index caa10b8..d9ffda7 100644
--- a/.cursor/rules/create-flow.mdc
+++ b/.cursor/rules/create-flow.mdc
@@ -29,7 +29,7 @@ Reach for these before writing new markup:
 | Toggle-chip row + inline "+ Add" input | `app/(app)/create/components/ApplicableScopeField` |
 | `[– value +]` numeric stepper (± label) | `app/components/controls/Incrementer` / `IncrementerBlock` |
 | Mid-paragraph "expand / see all" link button | `app/components/buttons/InlineTextButton` |
-| Help-icon + label above a control | `app/components/utility/InputLabel` (`helpIcon` prop) |
+| Help-icon + label above a control | `app/components/type/InputLabel` (`helpIcon` prop) |
 | Toggle chip (dim-but-clickable) | `Chip` with `state="Disabled" disabled={false}` |
 | Card-click → structured creation modal | `Create` with `backdropVariant="blurredYellow"` |
 
diff --git a/.cursor/rules/routes.mdc b/.cursor/rules/routes.mdc
index 9d253ed..8ad772d 100644
--- a/.cursor/rules/routes.mdc
+++ b/.cursor/rules/routes.mdc
@@ -14,10 +14,10 @@ the file tree without affecting URLs.
 
 | Group | URL surface | Audience | Chrome |
 |---|---|---|---|
-| `app/(marketing)/` | `/`, `/learn`, `/blog`, `/templates`, future public pages | Public, indexable | TopNav (via root) + marketing `<Footer />` |
-| `app/(app)/` | `/create/*`, `/login`, `/profile`, future signed-in surfaces | Authenticated product | TopNav (via root) — no footer except **`/profile`** (see `profile/layout.tsx`) |
-| `app/(admin)/` | `/monitor`, future ops dashboards | Operators | TopNav (via root) — no footer |
-| `app/(dev)/` | `/components-preview`, future dev previews | Local dev (NODE_ENV gated) | TopNav (via root) — no footer |
+| `app/(marketing)/` | `/`, `/learn`, `/blog`, `/templates`, future public pages | Public, indexable | `Top` (via root) + marketing `<Footer />` |
+| `app/(app)/` | `/create/*`, `/login`, `/profile`, future signed-in surfaces | Authenticated product | `Top` (via root) — no footer except **`/profile`** (see `profile/layout.tsx`) |
+| `app/(admin)/` | `/monitor`, future ops dashboards | Operators | `Top` (via root) — no footer |
+| `app/(dev)/` | `/components-preview`, future dev previews | Local dev (NODE_ENV gated) | `Top` (via root) — no footer |
 | `app/api/` | API routes | n/a | n/a |
 
 Route folders **must not** sit loose at the top level of `app/`. If a new
diff --git a/AGENTS.md b/AGENTS.md
index 5c26812..7b68453 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -41,6 +41,8 @@ priors — they reflect deliberate decisions.
    (`app/components/Foo` → `tests/components/Foo.test.tsx`).
 5. **Routes live inside groups** — `(marketing)`, `(app)`, `(admin)`,
    `(dev)`. Don't drop a new route folder loose at the top of `app/`.
+   **Admin-only widgets** may live in **`app/(admin)/<route>/_components/`**
+   when only that route uses them (e.g. **`WebVitalsDashboard`** on **`/monitor`**).
 6. **No new pathname-sniffing chrome.** Compose chrome via group/nested
    layouts, not `usePathname()` checks. (`ConditionalNavigation` is the
    sole tolerated exception — it carries SSR session state.)
@@ -83,3 +85,6 @@ For changes under `prisma/`: `npm run migrate:smoke` (see
 - [docs/README.md](docs/README.md) — index of user-facing docs.
 - [docs/create-flow.md](docs/create-flow.md) — wizard URL/persistence canon
   (read alongside `create-flow.mdc`).
+- [docs/figma-component-registry.md](docs/figma-component-registry.md) —
+  Figma ↔ component bucket map after refactors (Type, Sections, admin
+  `_components/`, etc.).
diff --git a/README.md b/README.md
index 769f4ed..6ada988 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,9 @@ Backend setup (Postgres, Prisma, magic-link auth) is documented in
 ## Project layout
 
 ```text
-app/              Next.js app router (routes, components, hooks, contexts)
+app/              Next.js app router: route groups (marketing), (app), (admin), (dev);
+                  shared components under app/components/; optional _components/
+                  colocated with a route (e.g. (admin)/monitor/_components/)
 lib/              Shared library code (i18n, validation, utilities)
 messages/en/      Localized UI copy (see docs/guides/i18n-translation-workflow.md)
 prisma/           Database schema, migrations, seed
diff --git a/app/(admin)/monitor/MonitorPageContent.tsx b/app/(admin)/monitor/MonitorPageContent.tsx
index dd839f9..91fe526 100644
--- a/app/(admin)/monitor/MonitorPageContent.tsx
+++ b/app/(admin)/monitor/MonitorPageContent.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import WebVitalsDashboard from "../../components/sections/WebVitalsDashboard";
-import TopNav from "../../components/navigation/TopNav";
+import WebVitalsDashboard from "./_components/WebVitalsDashboard";
+import Top from "../../components/navigation/Top";
 import Footer from "../../components/navigation/Footer";
 import { useMessages } from "../../contexts/MessagesContext";
 
@@ -11,7 +11,7 @@ export default function MonitorPageContent() {
 
   return (
     <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
-      <TopNav folderTop={false} />
+      <Top folderTop={false} />
 
       <main className="container mx-auto px-[var(--spacing-scale-024)] py-[var(--spacing-scale-032)]">
         <div className="max-w-6xl mx-auto">
diff --git a/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.container.tsx b/app/(admin)/monitor/_components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
similarity index 95%
rename from app/components/sections/WebVitalsDashboard/WebVitalsDashboard.container.tsx
rename to app/(admin)/monitor/_components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
index 05767a1..f582d89 100644
--- a/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.container.tsx
+++ b/app/(admin)/monitor/_components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { memo, useEffect, useState } from "react";
-import { useMessages } from "../../../contexts/MessagesContext";
-import { logger } from "../../../../lib/logger";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import { logger } from "../../../../../lib/logger";
 import WebVitalsDashboardView from "./WebVitalsDashboard.view";
 import type { Metrics, Vitals, VitalData } from "./WebVitalsDashboard.types";
 
@@ -78,7 +78,6 @@ const WebVitalsDashboardContainer = memo(() => {
     fetchVitals();
 
     if (typeof window !== "undefined") {
-      // web-vitals v4+ exposes onLCP / onCLS / … — legacy getLCP was removed.
       import("web-vitals").then(
         ({ onCLS, onFID, onFCP, onLCP, onTTFB }) => {
           onLCP((metric) => {
diff --git a/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.types.ts b/app/(admin)/monitor/_components/WebVitalsDashboard/WebVitalsDashboard.types.ts
similarity index 92%
rename from app/components/sections/WebVitalsDashboard/WebVitalsDashboard.types.ts
rename to app/(admin)/monitor/_components/WebVitalsDashboard/WebVitalsDashboard.types.ts
index bb6deeb..1ddc1b7 100644
--- a/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.types.ts
+++ b/app/(admin)/monitor/_components/WebVitalsDashboard/WebVitalsDashboard.types.ts
@@ -1,4 +1,4 @@
-import type messages from "../../../../messages/en/index";
+import type messages from "../../../../../messages/en/index";
 
 export interface VitalData {
   value: number;
diff --git a/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.view.tsx b/app/(admin)/monitor/_components/WebVitalsDashboard/WebVitalsDashboard.view.tsx
similarity index 100%
rename from app/components/sections/WebVitalsDashboard/WebVitalsDashboard.view.tsx
rename to app/(admin)/monitor/_components/WebVitalsDashboard/WebVitalsDashboard.view.tsx
diff --git a/app/components/sections/WebVitalsDashboard/index.tsx b/app/(admin)/monitor/_components/WebVitalsDashboard/index.tsx
similarity index 100%
rename from app/components/sections/WebVitalsDashboard/index.tsx
rename to app/(admin)/monitor/_components/WebVitalsDashboard/index.tsx
diff --git a/app/(app)/create/CreateFlowLayoutClient.tsx b/app/(app)/create/CreateFlowLayoutClient.tsx
index 983136f..60a816b 100644
--- a/app/(app)/create/CreateFlowLayoutClient.tsx
+++ b/app/(app)/create/CreateFlowLayoutClient.tsx
@@ -13,14 +13,14 @@ import { useCreateFlowNavigation } from "./hooks/useCreateFlowNavigation";
 import { useCreateFlowExit } from "./hooks/useCreateFlowExit";
 import { useCreateFlowFinalize } from "./hooks/useCreateFlowFinalize";
 import { useTemplateReviewActions } from "./hooks/useTemplateReviewActions";
-import CreateFlowTopNav from "../../components/utility/CreateFlowTopNav";
+import CreateFlowFooter from "../../components/navigation/CreateFlowFooter";
+import CreateFlowTopNav from "../../components/navigation/CreateFlowTopNav";
 import { getNextStep, getStepIndex } from "./utils/flowSteps";
 import { getProportionBarProgressForCreateFlowStep } from "./utils/createFlowProportionProgress";
 import {
   createFlowStepUsesCenteredTextLayout,
   createFlowStepUsesCardLayout,
 } from "./utils/createFlowScreenRegistry";
-import CreateFlowFooter from "../../components/utility/CreateFlowFooter";
 import Button from "../../components/buttons/Button";
 import { isValidCreateFlowSaveEmail } from "../../../lib/create/isValidCreateFlowSaveEmail";
 import {
diff --git a/app/(app)/create/components/ApplicableScopeField.tsx b/app/(app)/create/components/ApplicableScopeField.tsx
index eb993c6..035593f 100644
--- a/app/(app)/create/components/ApplicableScopeField.tsx
+++ b/app/(app)/create/components/ApplicableScopeField.tsx
@@ -9,7 +9,7 @@
 
 import { memo, useState } from "react";
 import Chip from "../../../components/controls/Chip";
-import InputLabel from "../../../components/utility/InputLabel";
+import InputLabel from "../../../components/type/InputLabel";
 
 export interface ApplicableScopeFieldProps {
   /** Label rendered above the capsule row. */
diff --git a/app/(app)/create/components/CreateFlowLockupCardStepShell.tsx b/app/(app)/create/components/CreateFlowLockupCardStepShell.tsx
index 52b1690..14c05d1 100644
--- a/app/(app)/create/components/CreateFlowLockupCardStepShell.tsx
+++ b/app/(app)/create/components/CreateFlowLockupCardStepShell.tsx
@@ -8,8 +8,8 @@ import {
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
 } from "./createFlowLayoutTokens";
 
-/** Shared `RuleCard` / template card chrome: width + radius; padding comes from `RuleCard` (L+expanded = 24px). */
-export const CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS =
+/** Shared `Rule` / template card chrome: width + radius; padding comes from `Rule` (L+expanded = 24px). */
+export const CREATE_FLOW_REVIEW_RULE_LAYOUT_CLASS =
   "w-full min-w-0 rounded-[12px] md:rounded-[24px] md:max-w-[640px]";
 
 type CreateFlowLockupCardStepShellProps = {
diff --git a/app/(app)/create/components/ModalTextAreaField.tsx b/app/(app)/create/components/ModalTextAreaField.tsx
index 143b35d..69e3621 100644
--- a/app/(app)/create/components/ModalTextAreaField.tsx
+++ b/app/(app)/create/components/ModalTextAreaField.tsx
@@ -8,7 +8,7 @@
 
 import { memo, useId } from "react";
 import TextArea from "../../../components/controls/TextArea";
-import InputLabel from "../../../components/utility/InputLabel";
+import InputLabel from "../../../components/type/InputLabel";
 
 export interface ModalTextAreaFieldProps {
   /** Label rendered above the text area. */
diff --git a/app/(app)/create/review-template/[slug]/page.tsx b/app/(app)/create/review-template/[slug]/page.tsx
index f0106eb..f2a579c 100644
--- a/app/(app)/create/review-template/[slug]/page.tsx
+++ b/app/(app)/create/review-template/[slug]/page.tsx
@@ -11,7 +11,7 @@ import {
 import messages from "../../../../../messages/en/index";
 import Alert from "../../../../components/modals/Alert";
 import {
-  CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS,
+  CREATE_FLOW_REVIEW_RULE_LAYOUT_CLASS,
   CreateFlowLockupCardStepShell,
 } from "../../components/CreateFlowLockupCardStepShell";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
@@ -118,7 +118,7 @@ export default function ReviewTemplatePage({ params }: PageProps) {
     >
       <TemplateReviewCard
         template={template}
-        ruleCardClassName={CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS}
+        ruleCardClassName={CREATE_FLOW_REVIEW_RULE_LAYOUT_CLASS}
         size={mdUp ? "L" : "M"}
       />
     </CreateFlowLockupCardStepShell>
diff --git a/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx b/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
index 7213651..379bf2e 100644
--- a/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
+++ b/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
@@ -24,7 +24,7 @@ import {
   useFacetRecommendations,
 } from "../../hooks/useFacetRecommendations";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../../components/utility/CardStack";
+import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
diff --git a/app/(app)/create/screens/card/ConflictManagementScreen.tsx b/app/(app)/create/screens/card/ConflictManagementScreen.tsx
index 1196112..7e2adc7 100644
--- a/app/(app)/create/screens/card/ConflictManagementScreen.tsx
+++ b/app/(app)/create/screens/card/ConflictManagementScreen.tsx
@@ -22,7 +22,7 @@ import {
   useFacetRecommendations,
 } from "../../hooks/useFacetRecommendations";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../../components/utility/CardStack";
+import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
diff --git a/app/(app)/create/screens/card/MembershipMethodsScreen.tsx b/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
index 124639b..babe911 100644
--- a/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
+++ b/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
@@ -23,7 +23,7 @@ import {
   useFacetRecommendations,
 } from "../../hooks/useFacetRecommendations";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../../components/utility/CardStack";
+import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
diff --git a/app/(app)/create/screens/completed/CompletedScreen.tsx b/app/(app)/create/screens/completed/CompletedScreen.tsx
index 8d9fb97..7b615ac 100644
--- a/app/(app)/create/screens/completed/CompletedScreen.tsx
+++ b/app/(app)/create/screens/completed/CompletedScreen.tsx
@@ -2,8 +2,8 @@
 
 import { useState, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import CommunityRuleDocument from "../../../../components/sections/CommunityRuleDocument";
-import type { CommunityRuleDocumentSection } from "../../../../components/sections/CommunityRuleDocument/CommunityRuleDocument.types";
+import CommunityRule from "../../../../components/type/CommunityRule";
+import type { CommunityRuleSection } from "../../../../components/type/CommunityRule/CommunityRule.types";
 import Alert from "../../../../components/modals/Alert";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { fetchPublishedRuleDetail } from "../../../../../lib/create/api";
@@ -24,7 +24,7 @@ function initialCompletedUi(
 ): {
   headerTitle: string;
   headerDescription: string | undefined;
-  documentSections: CommunityRuleDocumentSection[];
+  documentSections: CommunityRuleSection[];
 } {
   if (ruleIdFromUrl) {
     return {
@@ -80,7 +80,7 @@ export function CompletedScreen() {
     string | undefined
   >(initial.headerDescription);
   const [documentSections, setDocumentSections] =
-    useState<CommunityRuleDocumentSection[]>(initial.documentSections);
+    useState<CommunityRuleSection[]>(initial.documentSections);
 
   useEffect(() => {
     if (!ruleIdParam) return;
@@ -170,7 +170,7 @@ export function CompletedScreen() {
               aria-hidden
             />
             <div className="w-full min-w-0 py-0 md:pb-8">
-              <CommunityRuleDocument
+              <CommunityRule
                 sections={documentSections}
                 useCardStyle={!mdUp}
                 className={mdUp ? "min-w-0" : "w-full min-w-0 p-4"}
diff --git a/app/(app)/create/screens/review/CommunityReviewScreen.tsx b/app/(app)/create/screens/review/CommunityReviewScreen.tsx
index 7578f9e..0891551 100644
--- a/app/(app)/create/screens/review/CommunityReviewScreen.tsx
+++ b/app/(app)/create/screens/review/CommunityReviewScreen.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
-import RuleCard from "../../../../components/cards/RuleCard";
+import Rule from "../../../../components/cards/Rule";
 import { useTranslation } from "../../../../contexts/MessagesContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { useCreateFlow } from "../../context/CreateFlowContext";
@@ -12,6 +12,10 @@ import {
   CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
 } from "../../components/createFlowLayoutTokens";
+import {
+  getAssetPath,
+  vectorMarkPath,
+} from "../../../../../lib/assetUtils";
 
 /**
  * Targets for a `pendingTemplateAction` redirect. Customize resumes the
@@ -90,13 +94,13 @@ export function CommunityReviewScreen() {
           />
         </div>
         <div className={CREATE_FLOW_MD_UP_GRID_CELL_CLASS}>
-          <RuleCard
+          <Rule
             title={cardTitle}
             description={cardDescription}
             size={lgUp ? "L" : "M"}
             expanded={false}
             backgroundColor="bg-[var(--color-teal-teal50,#c9fef9)]"
-            logoUrl="/assets/Vector_MutualAid.svg"
+            logoUrl={getAssetPath(vectorMarkPath("mutual-aid"))}
             logoAlt={cardTitle}
             className="rounded-[24px]"
           />
diff --git a/app/(app)/create/screens/review/FinalReviewScreen.tsx b/app/(app)/create/screens/review/FinalReviewScreen.tsx
index ac585d2..e104cc5 100644
--- a/app/(app)/create/screens/review/FinalReviewScreen.tsx
+++ b/app/(app)/create/screens/review/FinalReviewScreen.tsx
@@ -1,14 +1,13 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
-import RuleCard from "../../../../components/cards/RuleCard";
-import type { Category } from "../../../../components/cards/RuleCard/RuleCard.types";
+import Rule, { type Category } from "../../../../components/cards/Rule";
 import { TemplateChipDetailModal } from "../../../../components/cards/TemplateReviewCard/TemplateChipDetailModal";
 import { useMessages, useTranslation } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import {
-  CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS,
+  CREATE_FLOW_REVIEW_RULE_LAYOUT_CLASS,
   CreateFlowLockupCardStepShell,
 } from "../../components/CreateFlowLockupCardStepShell";
 import {
@@ -22,12 +21,16 @@ import {
   type FinalReviewChipEditPatch,
   type FinalReviewChipEditTarget,
 } from "../../components/FinalReviewChipEditModal";
+import {
+  getAssetPath,
+  vectorMarkPath,
+} from "../../../../../lib/assetUtils";
 
 /**
  * `finalReview.json.categories` ships a demo ordering + localized names
  * (Values / Communication / Membership / Decision-making / Conflict
  * management). We reuse that ordering for the state-derived rows so the
- * RuleCard layout stays stable across customize / use-without-changes /
+ * Rule layout stays stable across customize / use-without-changes /
  * plain-custom flows, and fall back to the demo chips when state resolves
  * to nothing selected.
  */
@@ -183,16 +186,16 @@ export function FinalReviewScreen() {
       lockupTitle={t("title")}
       lockupDescription={t("description")}
     >
-      <RuleCard
+      <Rule
         title={ruleCardTitle}
         description={ruleCardDescription}
         size={mdUp ? "L" : "M"}
         expanded={true}
         backgroundColor="bg-[#c9fef9]"
-        logoUrl="/assets/Vector_MutualAid.svg"
+        logoUrl={getAssetPath(vectorMarkPath("mutual-aid"))}
         logoAlt={ruleCardTitle}
         categories={finalReviewCategories}
-        className={CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS}
+        className={CREATE_FLOW_REVIEW_RULE_LAYOUT_CLASS}
         onClick={() => {}}
       />
       <FinalReviewChipEditModal
diff --git a/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx b/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
index 9e8bccd..d27681e 100644
--- a/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
+++ b/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
@@ -17,12 +17,13 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import DecisionMakingSidebar from "../../../../components/utility/DecisionMakingSidebar";
-import CardStack from "../../../../components/utility/CardStack";
+import CardStack from "../../../../components/cards/CardStack";
+import HeaderLockup from "../../../../components/type/HeaderLockup";
 import Create from "../../../../components/modals/Create";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
-import type { InfoMessageBoxItem } from "../../../../components/utility/InfoMessageBox/InfoMessageBox.types";
-import type { CardStackItem } from "../../../../components/utility/CardStack/CardStack.types";
+import InfoMessageBox from "../../../../components/controls/InfoMessageBox";
+import type { InfoMessageBoxItem } from "../../../../components/controls/InfoMessageBox/InfoMessageBox.types";
+import type { CardStackItem } from "../../../../components/cards/CardStack/CardStack.types";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
@@ -204,16 +205,20 @@ export function DecisionApproachesScreen() {
       contentTopBelowMd="space-800"
       lgVerticalAlign="start"
       header={
-        <DecisionMakingSidebar
-          title={da.sidebar.title}
-          description={sidebarDescription}
-          messageBoxTitle={da.messageBox.title}
-          messageBoxItems={messageBoxItems}
-          messageBoxCheckedIds={messageBoxCheckedIds}
-          onMessageBoxCheckboxChange={handleMessageBoxCheckboxChange}
-          size={mdUp ? "L" : "M"}
-          justification={mdUp ? "left" : "center"}
-        />
+        <div className="flex w-full min-w-0 flex-col gap-3">
+          <HeaderLockup
+            title={da.sidebar.title}
+            description={sidebarDescription}
+            size={mdUp ? "L" : "M"}
+            justification={mdUp ? "left" : "center"}
+          />
+          <InfoMessageBox
+            title={da.messageBox.title}
+            items={messageBoxItems}
+            checkedIds={messageBoxCheckedIds}
+            onCheckboxChange={handleMessageBoxCheckboxChange}
+          />
+        </div>
       }
     >
       <div className="flex w-full min-w-0 flex-col items-stretch gap-6 py-0">
diff --git a/app/(app)/profile/_components/ProfilePage.view.tsx b/app/(app)/profile/_components/ProfilePage.view.tsx
index e93877a..fd9ba6d 100644
--- a/app/(app)/profile/_components/ProfilePage.view.tsx
+++ b/app/(app)/profile/_components/ProfilePage.view.tsx
@@ -2,11 +2,11 @@
 
 import { useId, useMemo } from "react";
 import Button from "../../../components/buttons/Button";
-import RuleCard from "../../../components/cards/RuleCard";
+import Rule from "../../../components/cards/Rule";
 import TextInput from "../../../components/controls/TextInput";
 import List from "../../../components/layout/List";
 import type { ListItem, ListSize } from "../../../components/layout/List";
-import Icon from "../../../components/asset/Icon";
+import Icon from "../../../components/asset/icon";
 import Dialog from "../../../components/modals/Dialog";
 import Alert from "../../../components/modals/Alert";
 import HeaderLockup from "../../../components/type/HeaderLockup";
@@ -82,10 +82,10 @@ const profileSectionHeadingClass =
   "font-bricolage text-base font-bold leading-[22px] text-[var(--color-content-default-primary)] md:font-inter md:text-xl md:font-bold md:leading-7 xl:font-bricolage-grotesque xl:font-bold xl:text-[28px] xl:leading-9";
 
 /**
- * Sticky `top` for page content below the product {@link TopNav} (standard variant).
- * Must match `TopNav.view.tsx`: nav `h` 40px → `lg` 84px → `xl` 88px, plus `header` `border-b` (+1px).
+ * Sticky `top` for page content below the product {@link Top} (standard variant).
+ * Must match `Top.view.tsx`: nav `h` 40px → `lg` 84px → `xl` 88px, plus `header` `border-b` (+1px).
  */
-const stickyBelowTopNavTopClass =
+const stickyBelowTopTopClass =
   "top-[41px] lg:top-[85px] xl:top-[89px]";
 
 export type ProfilePageSignedOutViewProps = {
@@ -111,7 +111,7 @@ export function ProfilePageSignedOutView({
         <header
           className={
             profileLgUp
-              ? `sticky z-10 bg-[var(--color-surface-default-primary)] ${stickyBelowTopNavTopClass}`
+              ? `sticky z-10 bg-[var(--color-surface-default-primary)] ${stickyBelowTopTopClass}`
               : `flex flex-col gap-1 py-3 md:sticky md:top-[41px] md:z-10 md:bg-[var(--color-surface-default-primary)]`
           }
         >
@@ -304,7 +304,7 @@ export function ProfilePageView({
               </h2>
               <div className="flex flex-col gap-3">
                 {showDraftCard && draft?.hasDraft ? (
-                  <RuleCard
+                  <Rule
                     title={(() => {
                       const raw = draft.state.title;
                       const s = typeof raw === "string" ? raw.trim() : "";
@@ -337,7 +337,7 @@ export function ProfilePageView({
                   />
                 ) : null}
                 {rules.map((rule) => (
-                  <RuleCard
+                  <Rule
                     key={rule.id}
                     title={rule.title}
                     description={rule.summary ?? undefined}
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index 8a29944..d6cbb64 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -14,15 +14,12 @@ const LogoWall = dynamic(() => import("../components/sections/LogoWall"), {
   ssr: true,
 });
 
-const NumberedCards = dynamic(
-  () => import("../components/sections/NumberedCards"),
-  {
-    loading: () => (
-      <section className="py-[var(--spacing-scale-032)] min-h-[300px]" />
-    ),
-    ssr: true,
-  },
-);
+const CardSteps = dynamic(() => import("../components/sections/CardSteps"), {
+  loading: () => (
+    <section className="py-[var(--spacing-scale-032)] min-h-[300px]" />
+  ),
+  ssr: true,
+});
 
 const FeatureGrid = dynamic(
   () => import("../components/sections/FeatureGrid"),
@@ -54,22 +51,27 @@ export default function Page() {
     ctaHref: t("pages.home.heroBanner.ctaHref"),
   };
 
-  const numberedCardsData = {
-    title: t("pages.home.numberedCards.title"),
-    subtitle: t("pages.home.numberedCards.subtitle"),
-    cards: [
+  const cardStepsData = {
+    title: t("pages.home.cardSteps.title"),
+    subtitle: t("pages.home.cardSteps.subtitle"),
+    headingDesktopLines: [
+      t("pages.home.cardSteps.headingDesktopLine1"),
+      t("pages.home.cardSteps.headingDesktopLine2"),
+      t("pages.home.cardSteps.headingDesktopLine3"),
+    ] as const,
+    steps: [
       {
-        text: t("pages.home.numberedCards.cards.card1.text"),
+        text: t("pages.home.cardSteps.cards.card1.text"),
         iconShape: "blob",
         iconColor: "green",
       },
       {
-        text: t("pages.home.numberedCards.cards.card2.text"),
+        text: t("pages.home.cardSteps.cards.card2.text"),
         iconShape: "gear",
         iconColor: "purple",
       },
       {
-        text: t("pages.home.numberedCards.cards.card3.text"),
+        text: t("pages.home.cardSteps.cards.card3.text"),
         iconShape: "star",
         iconColor: "orange",
       },
@@ -92,7 +94,7 @@ export default function Page() {
     <div>
       <HeroBanner {...heroBannerData} />
       <LogoWall />
-      <NumberedCards {...numberedCardsData} />
+      <CardSteps {...cardStepsData} />
       <Suspense
         fallback={
           <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
diff --git a/app/(marketing)/rules/[id]/page.tsx b/app/(marketing)/rules/[id]/page.tsx
index e8f4f62..ee6fa8b 100644
--- a/app/(marketing)/rules/[id]/page.tsx
+++ b/app/(marketing)/rules/[id]/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { getPublicPublishedRuleById } from "../../../../lib/server/publishedRules";
 import { parseDocumentSectionsForDisplay } from "../../../../lib/create/buildPublishPayload";
-import CommunityRuleDocument from "../../../components/sections/CommunityRuleDocument";
+import CommunityRule from "../../../components/type/CommunityRule";
 import HeaderLockup from "../../../components/type/HeaderLockup";
 
 interface PageProps {
@@ -65,7 +65,7 @@ export default async function PublicRuleDetailPage({ params }: PageProps) {
           size="L"
           palette="inverse"
         />
-        <CommunityRuleDocument sections={sections} />
+        <CommunityRule sections={sections} />
       </div>
     </div>
   );
diff --git a/app/components/icons/Avatar.tsx b/app/components/asset/Avatar/Avatar.tsx
similarity index 100%
rename from app/components/icons/Avatar.tsx
rename to app/components/asset/Avatar/Avatar.tsx
diff --git a/app/components/asset/Avatar/index.tsx b/app/components/asset/Avatar/index.tsx
new file mode 100644
index 0000000..a2e37c4
--- /dev/null
+++ b/app/components/asset/Avatar/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Avatar";
+export type { AvatarSizeValue } from "./Avatar";
diff --git a/app/components/utility/AvatarContainer/AvatarContainer.tsx b/app/components/asset/AvatarContainer/AvatarContainer.tsx
similarity index 100%
rename from app/components/utility/AvatarContainer/AvatarContainer.tsx
rename to app/components/asset/AvatarContainer/AvatarContainer.tsx
diff --git a/app/components/utility/AvatarContainer/index.tsx b/app/components/asset/AvatarContainer/index.tsx
similarity index 100%
rename from app/components/utility/AvatarContainer/index.tsx
rename to app/components/asset/AvatarContainer/index.tsx
diff --git a/app/components/asset/Icon.tsx b/app/components/asset/icon/Icon.tsx
similarity index 83%
rename from app/components/asset/Icon.tsx
rename to app/components/asset/icon/Icon.tsx
index cddba05..0b91225 100644
--- a/app/components/asset/Icon.tsx
+++ b/app/components/asset/icon/Icon.tsx
@@ -1,14 +1,15 @@
 "use client";
 
+import Image from "next/image";
 import { memo } from "react";
-import ArrowBackIcon from "./icon/arrow_back.svg";
-import ContentCopyIcon from "./icon/content_copy.svg";
-import EditIcon from "./icon/edit.svg";
-import ExclamationIcon from "./icon/exclamation.svg";
-import ChevronRightIcon from "./icon/chevron_right.svg";
-import LogOutIcon from "./icon/log_out.svg";
-import MailIcon from "./icon/mail.svg";
-import WarningIcon from "./icon/warning.svg";
+import ArrowBackIcon from "./arrow_back.svg";
+import ContentCopyIcon from "./content_copy.svg";
+import EditIcon from "./edit.svg";
+import ExclamationIcon from "./exclamation.svg";
+import ChevronRightIcon from "./chevron_right.svg";
+import LogOutIcon from "./log_out.svg";
+import MailIcon from "./mail.svg";
+import WarningIcon from "./warning.svg";
 
 export const ICON_NAME_OPTIONS = [
   "arrow_back",
@@ -75,12 +76,13 @@ function IconComponent({
   // Turbopack/webpack mismatch: `.svg` may be a URL string instead of SVGR output.
   if (typeof resolved === "string") {
     return (
-      <img
+      <Image
         src={resolved}
         width={size}
         height={size}
         className={className}
         alt=""
+        unoptimized
         aria-hidden={ariaHidden}
       />
     );
diff --git a/app/components/asset/icon/index.tsx b/app/components/asset/icon/index.tsx
new file mode 100644
index 0000000..d42ef15
--- /dev/null
+++ b/app/components/asset/icon/index.tsx
@@ -0,0 +1,3 @@
+export { default } from "./Icon";
+export { ICON_NAME_OPTIONS } from "./Icon";
+export type { IconName, IconProps } from "./Icon";
diff --git a/app/components/asset/index.tsx b/app/components/asset/index.tsx
deleted file mode 100644
index 7ae1046..0000000
--- a/app/components/asset/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Icon, ICON_NAME_OPTIONS } from "./Icon";
-export type { IconName, IconProps } from "./Icon";
-export { default as Logo } from "./logo";
diff --git a/app/components/buttons/Button.tsx b/app/components/buttons/Button/Button.tsx
similarity index 99%
rename from app/components/buttons/Button.tsx
rename to app/components/buttons/Button/Button.tsx
index ef5308c..20193a5 100644
--- a/app/components/buttons/Button.tsx
+++ b/app/components/buttons/Button/Button.tsx
@@ -4,7 +4,7 @@ import type {
   ButtonTypeValue,
   ButtonPaletteValue,
   ButtonStateValue,
-} from "../../../lib/propNormalization";
+} from "../../../../lib/propNormalization";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
diff --git a/app/components/buttons/Button/index.tsx b/app/components/buttons/Button/index.tsx
new file mode 100644
index 0000000..c4719be
--- /dev/null
+++ b/app/components/buttons/Button/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Button";
diff --git a/app/components/buttons/InlineTextButton.tsx b/app/components/buttons/InlineTextButton/InlineTextButton.tsx
similarity index 100%
rename from app/components/buttons/InlineTextButton.tsx
rename to app/components/buttons/InlineTextButton/InlineTextButton.tsx
diff --git a/app/components/buttons/InlineTextButton/index.tsx b/app/components/buttons/InlineTextButton/index.tsx
new file mode 100644
index 0000000..e7fdb36
--- /dev/null
+++ b/app/components/buttons/InlineTextButton/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./InlineTextButton";
+export type { InlineTextButtonProps } from "./InlineTextButton";
diff --git a/app/components/cards/Card/Card.view.tsx b/app/components/cards/Card/Card.view.tsx
deleted file mode 100644
index e9ba02d..0000000
--- a/app/components/cards/Card/Card.view.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client";
-
-import Tag from "../../utility/Tag";
-import type { CardViewProps } from "./Card.types";
-
-function InfoIcon() {
-  return (
-    <span
-      className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent font-inter text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
-      aria-hidden
-    >
-      ?
-    </span>
-  );
-}
-
-function CardTag({
-  recommended,
-  selected,
-}: {
-  recommended: boolean;
-  selected: boolean;
-}) {
-  if (selected) return <Tag variant="selected" />;
-  if (recommended) return <Tag variant="recommended" />;
-  return null;
-}
-
-export function CardView({
-  label,
-  supportText,
-  recommended,
-  selected,
-  orientation,
-  showInfoIcon,
-  id: cardId,
-  className,
-  onClick,
-  onKeyDown,
-}: CardViewProps) {
-  const borderClass = "border border-[var(--color-border-default-primary)]";
-  const selectedBorder = selected
-    ? "outline outline-2 outline-dashed outline-black outline-offset-[-2px]"
-    : "";
-  const baseClasses = `select-none rounded-[var(--radius-measures-radius-small)] bg-[#FFFFFF] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
-
-  if (orientation === "horizontal") {
-    return (
-      <div
-        {...(cardId ? { "data-card-id": cardId } : {})}
-        role="button"
-        tabIndex={0}
-        aria-label={supportText ? `${label}: ${supportText}` : label}
-        className={baseClasses}
-        onClick={onClick}
-        onKeyDown={onKeyDown}
-      >
-        <div className="flex flex-col gap-2 items-start w-full">
-          <CardTag recommended={recommended} selected={selected} />
-          <span className="font-inter text-base font-semibold leading-6 text-black w-full">
-            {label}
-          </span>
-          {supportText ? (
-            <p className="font-inter text-sm font-normal leading-5 text-black w-full">
-              {supportText}
-            </p>
-          ) : null}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      {...(cardId ? { "data-card-id": cardId } : {})}
-      role="button"
-      tabIndex={0}
-      aria-label={supportText ? `${label}: ${supportText}` : label}
-      className={`${baseClasses} flex flex-row items-center justify-between gap-4`}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-    >
-      <div className="min-w-0 flex-1 flex flex-col gap-1">
-        <div className="flex items-center gap-2">
-          <span className="font-inter text-base font-semibold leading-6 text-black">
-            {label}
-          </span>
-          {showInfoIcon ? <InfoIcon /> : null}
-        </div>
-        {supportText ? (
-          <p className="font-inter text-sm font-normal leading-5 text-black">
-            {supportText}
-          </p>
-        ) : null}
-      </div>
-      <div className="shrink-0 w-[6rem]">
-        <CardTag recommended={recommended} selected={selected} />
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/cards/Card/index.tsx b/app/components/cards/Card/index.tsx
deleted file mode 100644
index 160e0bf..0000000
--- a/app/components/cards/Card/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./Card.container";
-export type { CardProps } from "./Card.types";
diff --git a/app/components/utility/CardStack/CardStack.container.tsx b/app/components/cards/CardStack/CardStack.container.tsx
similarity index 96%
rename from app/components/utility/CardStack/CardStack.container.tsx
rename to app/components/cards/CardStack/CardStack.container.tsx
index bcf498a..756a508 100644
--- a/app/components/utility/CardStack/CardStack.container.tsx
+++ b/app/components/cards/CardStack/CardStack.container.tsx
@@ -8,7 +8,8 @@ const DEFAULT_TOGGLE_LABEL = "See all communication approaches";
 const DEFAULT_SHOW_LESS_LABEL = "Show less";
 
 /**
- * Figma: "Utility / CardStack" (TODO(figma)). Selectable stack of cards with
+ * Figma: "Utility / CardStack"; canonical code under `cards/`.
+ * Selectable stack of cards with
  * an optional "see all"/"show less" expand toggle.
  */
 const CardStackContainer = memo<CardStackProps>(
diff --git a/app/components/utility/CardStack/CardStack.types.ts b/app/components/cards/CardStack/CardStack.types.ts
similarity index 100%
rename from app/components/utility/CardStack/CardStack.types.ts
rename to app/components/cards/CardStack/CardStack.types.ts
diff --git a/app/components/utility/CardStack/CardStack.view.tsx b/app/components/cards/CardStack/CardStack.view.tsx
similarity index 97%
rename from app/components/utility/CardStack/CardStack.view.tsx
rename to app/components/cards/CardStack/CardStack.view.tsx
index 6ec8f7e..292af39 100644
--- a/app/components/utility/CardStack/CardStack.view.tsx
+++ b/app/components/cards/CardStack/CardStack.view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import HeaderLockup from "../../type/HeaderLockup";
-import Card from "../../cards/Card";
+import Selection from "../Selection";
 import type { CardStackViewProps } from "./CardStack.types";
 
 export function CardStackView({
@@ -59,7 +59,7 @@ export function CardStackView({
         ) : null}
         <div className="flex w-full min-w-0 flex-col gap-2">
           {displayedCards.map((item) => (
-            <Card
+            <Selection
               key={item.id}
               id={item.id}
               label={item.label}
@@ -103,7 +103,7 @@ export function CardStackView({
       {expanded ? (
         <div className="mx-auto grid w-full max-w-[min(100%,860px)] grid-cols-1 gap-x-4 gap-y-6 md:grid-cols-2">
           {cards.map((item) => (
-            <Card
+            <Selection
               key={item.id}
               id={item.id}
               label={item.label}
@@ -120,7 +120,7 @@ export function CardStackView({
         <>
           <div className="flex w-full flex-col gap-2 md:hidden">
             {compactCards.map((item) => (
-              <Card
+              <Selection
                 key={item.id}
                 id={item.id}
                 label={item.label}
@@ -143,7 +143,7 @@ export function CardStackView({
             <div className="hidden flex-col gap-2 lg:flex">
               <div className="flex justify-center gap-2">
                 {compactCards.slice(0, 3).map((item) => (
-                  <Card
+                  <Selection
                     key={item.id}
                     id={item.id}
                     label={item.label}
@@ -162,7 +162,7 @@ export function CardStackView({
                   {compactCards
                     .slice(3, compactRecommendedLimit)
                     .map((item) => (
-                      <Card
+                      <Selection
                         key={item.id}
                         id={item.id}
                         label={item.label}
@@ -181,7 +181,7 @@ export function CardStackView({
             <div className="hidden flex-col gap-2 md:flex lg:hidden">
               <div className="flex justify-center gap-2">
                 {compactCards.slice(0, 2).map((item) => (
-                  <Card
+                  <Selection
                     key={item.id}
                     id={item.id}
                     label={item.label}
@@ -197,7 +197,7 @@ export function CardStackView({
               </div>
               <div className="flex justify-center gap-2">
                 {compactCards.slice(2, 4).map((item) => (
-                  <Card
+                  <Selection
                     key={item.id}
                     id={item.id}
                     label={item.label}
@@ -213,7 +213,7 @@ export function CardStackView({
               </div>
               {compactCards[4] ? (
                 <div className="flex justify-center gap-2">
-                  <Card
+                  <Selection
                     id={compactCards[4].id}
                     label={compactCards[4].label}
                     supportText={compactCards[4].supportText}
@@ -233,7 +233,7 @@ export function CardStackView({
         <>
           <div className="flex w-full flex-col gap-2 md:hidden">
             {compactCards.map((item) => (
-              <Card
+              <Selection
                 key={item.id}
                 id={item.id}
                 label={item.label}
@@ -253,7 +253,7 @@ export function CardStackView({
               <div className="mx-auto hidden w-full max-w-[min(100%,860px)] flex-col gap-2 md:flex lg:hidden">
                 <div className="flex justify-center gap-2">
                   {compactCards.slice(0, 2).map((item) => (
-                    <Card
+                    <Selection
                       key={item.id}
                       id={item.id}
                       label={item.label}
@@ -268,7 +268,7 @@ export function CardStackView({
                   ))}
                 </div>
                 <div className="flex justify-center">
-                  <Card
+                  <Selection
                     id={compactCards[2].id}
                     label={compactCards[2].label}
                     supportText={compactCards[2].supportText}
@@ -283,7 +283,7 @@ export function CardStackView({
               </div>
               <div className="mx-auto hidden w-full max-w-[min(100%,860px)] flex-wrap justify-center gap-2 lg:flex">
                 {compactCards.map((item) => (
-                  <Card
+                  <Selection
                     key={item.id}
                     id={item.id}
                     label={item.label}
@@ -305,7 +305,7 @@ export function CardStackView({
                   key={item.id}
                   className="flex w-full min-w-0 shrink-0 justify-center md:w-[281px] md:max-w-[281px]"
                 >
-                  <Card
+                  <Selection
                     id={item.id}
                     label={item.label}
                     supportText={item.supportText}
@@ -326,7 +326,7 @@ export function CardStackView({
           {/* Compact under 640: single column, up to 5 recommended cards */}
           <div className="flex w-full flex-col gap-2 md:hidden">
             {compactCards.map((item) => (
-              <Card
+              <Selection
                 key={item.id}
                 id={item.id}
                 label={item.label}
@@ -352,7 +352,7 @@ export function CardStackView({
                       : "md:col-start-4 md:col-span-2";
               return (
                 <div key={item.id} className={colClass}>
-                  <Card
+                  <Selection
                     id={item.id}
                     label={item.label}
                     supportText={item.supportText}
diff --git a/app/components/utility/CardStack/index.tsx b/app/components/cards/CardStack/index.tsx
similarity index 100%
rename from app/components/utility/CardStack/index.tsx
rename to app/components/cards/CardStack/index.tsx
diff --git a/app/components/cards/IconCard/IconCard.container.tsx b/app/components/cards/Icon/Icon.container.tsx
similarity index 70%
rename from app/components/cards/IconCard/IconCard.container.tsx
rename to app/components/cards/Icon/Icon.container.tsx
index 205b82d..442f4fb 100644
--- a/app/components/cards/IconCard/IconCard.container.tsx
+++ b/app/components/cards/Icon/Icon.container.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { memo } from "react";
-import { IconCardView } from "./IconCard.view";
-import type { IconCardProps } from "./IconCard.types";
+import { IconView } from "./Icon.view";
+import type { IconProps } from "./Icon.types";
 
-const IconCardContainer = memo<IconCardProps>(
+const IconContainer = memo<IconProps>(
   ({ icon, title, description, className = "", onClick }) => {
     const handleClick = () => {
       if (onClick) onClick();
@@ -18,7 +18,7 @@ const IconCardContainer = memo<IconCardProps>(
     };
 
     return (
-      <IconCardView
+      <IconView
         icon={icon}
         title={title}
         description={description}
@@ -30,6 +30,6 @@ const IconCardContainer = memo<IconCardProps>(
   },
 );
 
-IconCardContainer.displayName = "IconCard";
+IconContainer.displayName = "Icon";
 
-export default IconCardContainer;
+export default IconContainer;
diff --git a/app/components/cards/IconCard/IconCard.types.ts b/app/components/cards/Icon/Icon.types.ts
similarity index 80%
rename from app/components/cards/IconCard/IconCard.types.ts
rename to app/components/cards/Icon/Icon.types.ts
index 04f6c11..28f84f6 100644
--- a/app/components/cards/IconCard/IconCard.types.ts
+++ b/app/components/cards/Icon/Icon.types.ts
@@ -1,4 +1,4 @@
-export interface IconCardProps {
+export interface IconProps {
   icon: React.ReactNode;
   title: string;
   description: string;
@@ -6,7 +6,7 @@ export interface IconCardProps {
   onClick?: () => void;
 }
 
-export interface IconCardViewProps {
+export interface IconViewProps {
   icon: React.ReactNode;
   title: string;
   description: string;
diff --git a/app/components/cards/IconCard/IconCard.view.tsx b/app/components/cards/Icon/Icon.view.tsx
similarity index 91%
rename from app/components/cards/IconCard/IconCard.view.tsx
rename to app/components/cards/Icon/Icon.view.tsx
index c4b462a..7a2e1c0 100644
--- a/app/components/cards/IconCard/IconCard.view.tsx
+++ b/app/components/cards/Icon/Icon.view.tsx
@@ -1,15 +1,15 @@
 "use client";
 
-import type { IconCardViewProps } from "./IconCard.types";
+import type { IconViewProps } from "./Icon.types";
 
-export function IconCardView({
+export function IconView({
   icon,
   title,
   description,
   className,
   onClick,
   onKeyDown,
-}: IconCardViewProps) {
+}: IconViewProps) {
   return (
     <div
       className={`border border-[var(--color-border-default-primary)] flex flex-col h-[350px] items-start justify-between p-[var(--measures-spacing-020)] relative w-[288px] bg-transparent cursor-pointer transition-all duration-200 hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-2 ${className}`}
diff --git a/app/components/cards/Icon/index.tsx b/app/components/cards/Icon/index.tsx
new file mode 100644
index 0000000..8f9bbed
--- /dev/null
+++ b/app/components/cards/Icon/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Icon.container";
+export type { IconProps } from "./Icon.types";
diff --git a/app/components/cards/IconCard/index.tsx b/app/components/cards/IconCard/index.tsx
deleted file mode 100644
index ed26dd5..0000000
--- a/app/components/cards/IconCard/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./IconCard.container";
-export type { IconCardProps } from "./IconCard.types";
diff --git a/app/components/cards/MiniCard/MiniCard.container.tsx b/app/components/cards/Mini/Mini.container.tsx
similarity index 90%
rename from app/components/cards/MiniCard/MiniCard.container.tsx
rename to app/components/cards/Mini/Mini.container.tsx
index b9cb788..84b421e 100644
--- a/app/components/cards/MiniCard/MiniCard.container.tsx
+++ b/app/components/cards/Mini/Mini.container.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { memo, useMemo } from "react";
-import MiniCardView from "./MiniCard.view";
-import type { MiniCardProps } from "./MiniCard.types";
+import MiniView from "./Mini.view";
+import type { MiniProps } from "./Mini.types";
 
-const MiniCardContainer = memo<MiniCardProps>(
+const MiniContainer = memo<MiniProps>(
   ({
     children,
     className = "",
@@ -75,7 +75,7 @@ const MiniCardContainer = memo<MiniCardProps>(
     }, [href, onClick, computedAriaLabel]);
 
     return (
-      <MiniCardView
+      <MiniView
         className={className}
         backgroundColor={backgroundColor}
         panelContent={panelContent}
@@ -87,11 +87,11 @@ const MiniCardContainer = memo<MiniCardProps>(
         wrapperProps={wrapperProps}
       >
         {children}
-      </MiniCardView>
+      </MiniView>
     );
   },
 );
 
-MiniCardContainer.displayName = "MiniCard";
+MiniContainer.displayName = "Mini";
 
-export default MiniCardContainer;
+export default MiniContainer;
diff --git a/app/components/cards/MiniCard/MiniCard.types.ts b/app/components/cards/Mini/Mini.types.ts
similarity index 90%
rename from app/components/cards/MiniCard/MiniCard.types.ts
rename to app/components/cards/Mini/Mini.types.ts
index 32f8b21..ca0f41c 100644
--- a/app/components/cards/MiniCard/MiniCard.types.ts
+++ b/app/components/cards/Mini/Mini.types.ts
@@ -1,4 +1,4 @@
-export interface MiniCardProps {
+export interface MiniProps {
   children?: React.ReactNode;
   className?: string;
   backgroundColor?: string;
@@ -11,7 +11,7 @@ export interface MiniCardProps {
   ariaLabel?: string;
 }
 
-export interface MiniCardViewProps {
+export interface MiniViewProps {
   children?: React.ReactNode;
   className: string;
   backgroundColor: string;
diff --git a/app/components/cards/MiniCard/MiniCard.view.tsx b/app/components/cards/Mini/Mini.view.tsx
similarity index 93%
rename from app/components/cards/MiniCard/MiniCard.view.tsx
rename to app/components/cards/Mini/Mini.view.tsx
index 2496ef1..fe83111 100644
--- a/app/components/cards/MiniCard/MiniCard.view.tsx
+++ b/app/components/cards/Mini/Mini.view.tsx
@@ -2,9 +2,9 @@
 
 import { memo } from "react";
 import Image from "next/image";
-import type { MiniCardViewProps } from "./MiniCard.types";
+import type { MiniViewProps } from "./Mini.types";
 
-function MiniCardView({
+function MiniView({
   children,
   className,
   backgroundColor,
@@ -15,7 +15,7 @@ function MiniCardView({
   computedAriaLabel,
   wrapperElement,
   wrapperProps,
-}: MiniCardViewProps) {
+}: MiniViewProps) {
   const cardContentElement = (
     <div className={`h-[186px] flex flex-col gap-[7px] ${className}`}>
       {/* Top part - Inner panel */}
@@ -81,6 +81,6 @@ function MiniCardView({
   );
 }
 
-MiniCardView.displayName = "MiniCardView";
+MiniView.displayName = "MiniView";
 
-export default memo(MiniCardView);
+export default memo(MiniView);
diff --git a/app/components/cards/Mini/index.tsx b/app/components/cards/Mini/index.tsx
new file mode 100644
index 0000000..c3c2e1a
--- /dev/null
+++ b/app/components/cards/Mini/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Mini.container";
+export type { MiniProps } from "./Mini.types";
diff --git a/app/components/cards/MiniCard/index.tsx b/app/components/cards/MiniCard/index.tsx
deleted file mode 100644
index 39a3801..0000000
--- a/app/components/cards/MiniCard/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./MiniCard.container";
-export type { MiniCardProps } from "./MiniCard.types";
diff --git a/app/components/cards/RuleCard/RuleCard.container.tsx b/app/components/cards/Rule/Rule.container.tsx
similarity index 90%
rename from app/components/cards/RuleCard/RuleCard.container.tsx
rename to app/components/cards/Rule/Rule.container.tsx
index 13909e1..389f13d 100644
--- a/app/components/cards/RuleCard/RuleCard.container.tsx
+++ b/app/components/cards/Rule/Rule.container.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { memo } from "react";
-import { RuleCardView } from "./RuleCard.view";
-import type { RuleCardProps } from "./RuleCard.types";
+import { RuleView } from "./Rule.view";
+import type { RuleProps } from "./Rule.types";
 
 declare global {
   interface Window {
@@ -21,7 +21,7 @@ declare global {
  * Figma: "Card / Rule" — e.g. profile `22143:900771` when **Has bottom link** is on
  * (`hasBottomLinks` + `bottomLinks` / optional `bottomStatusLabel`).
  */
-const RuleCardContainer = memo<RuleCardProps>(
+const RuleContainer = memo<RuleProps>(
   ({
     title,
     description,
@@ -72,7 +72,7 @@ const RuleCardContainer = memo<RuleCardProps>(
     };
 
     return (
-      <RuleCardView
+      <RuleView
         title={title}
         description={description}
         icon={icon}
@@ -95,6 +95,6 @@ const RuleCardContainer = memo<RuleCardProps>(
   },
 );
 
-RuleCardContainer.displayName = "RuleCard";
+RuleContainer.displayName = "Rule";
 
-export default RuleCardContainer;
+export default RuleContainer;
diff --git a/app/components/cards/RuleCard/RuleCard.types.ts b/app/components/cards/Rule/Rule.types.ts
similarity index 86%
rename from app/components/cards/RuleCard/RuleCard.types.ts
rename to app/components/cards/Rule/Rule.types.ts
index fa41176..c4f2871 100644
--- a/app/components/cards/RuleCard/RuleCard.types.ts
+++ b/app/components/cards/Rule/Rule.types.ts
@@ -1,4 +1,5 @@
 import type { ChipOption } from "../../controls/MultiSelect/MultiSelect.types";
+import type { RuleSizeValue } from "../../../../lib/propNormalization";
 
 export interface Category {
   name: string;
@@ -14,14 +15,14 @@ export interface Category {
 }
 
 /** Bottom row for `Card / Rule` when Figma **Has bottom link** is on (profile, etc.). */
-export interface RuleCardBottomLink {
+export interface RuleBottomLink {
   id: string;
   label: string;
   href?: string;
   onClick?: () => void;
 }
 
-export interface RuleCardProps {
+export interface RuleProps {
   title: string;
   description?: string;
   icon?: React.ReactNode;
@@ -29,7 +30,7 @@ export interface RuleCardProps {
   className?: string;
   onClick?: () => void;
   expanded?: boolean;
-  size?: "XS" | "S" | "M" | "L";
+  size?: RuleSizeValue;
   categories?: Category[];
   logoUrl?: string;
   logoAlt?: string;
@@ -44,10 +45,10 @@ export interface RuleCardProps {
   hasBottomLinks?: boolean;
   /** Uppercase chip (e.g. IN PROGRESS); omit when no left badge. */
   bottomStatusLabel?: string;
-  bottomLinks?: RuleCardBottomLink[];
+  bottomLinks?: RuleBottomLink[];
 }
 
-export interface RuleCardViewProps {
+export interface RuleViewProps {
   title: string;
   description?: string;
   icon?: React.ReactNode;
@@ -56,7 +57,7 @@ export interface RuleCardViewProps {
   onClick?: () => void;
   onKeyDown?: (_event: React.KeyboardEvent<HTMLDivElement>) => void;
   expanded: boolean;
-  size: "XS" | "S" | "M" | "L";
+  size: RuleSizeValue;
   categories?: Category[];
   logoUrl?: string;
   logoAlt?: string;
@@ -64,5 +65,5 @@ export interface RuleCardViewProps {
   hideCategoryAddButton?: boolean;
   hasBottomLinks?: boolean;
   bottomStatusLabel?: string;
-  bottomLinks?: RuleCardBottomLink[];
+  bottomLinks?: RuleBottomLink[];
 }
diff --git a/app/components/cards/RuleCard/RuleCard.view.tsx b/app/components/cards/Rule/Rule.view.tsx
similarity index 98%
rename from app/components/cards/RuleCard/RuleCard.view.tsx
rename to app/components/cards/Rule/Rule.view.tsx
index 69f440e..c61fb15 100644
--- a/app/components/cards/RuleCard/RuleCard.view.tsx
+++ b/app/components/cards/Rule/Rule.view.tsx
@@ -4,9 +4,9 @@ import Image from "next/image";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import MultiSelect from "../../controls/MultiSelect";
 import NavigationLink from "../../navigation/Link";
-import type { RuleCardBottomLink, RuleCardViewProps } from "./RuleCard.types";
+import type { RuleBottomLink, RuleViewProps } from "./Rule.types";
 
-export function RuleCardView({
+export function RuleView({
   title,
   description,
   icon,
@@ -24,7 +24,7 @@ export function RuleCardView({
   hasBottomLinks = false,
   bottomStatusLabel,
   bottomLinks,
-}: RuleCardViewProps) {
+}: RuleViewProps) {
   const t = useTranslation("ruleCard");
   const ariaLabel = t("ariaLabel")?.replace("{title}", title) || title;
   const interactiveCard = !hasBottomLinks;
@@ -181,7 +181,7 @@ export function RuleCardView({
         ? "rounded-[var(--measures-radius-300,12px)]"
         : "rounded-[var(--radius-measures-radius-small)]";
 
-  function renderBottomLink(link: RuleCardBottomLink) {
+  function renderBottomLink(link: RuleBottomLink) {
     const shared = {
       variant: "paragraph" as const,
       type: "primary" as const,
diff --git a/app/components/cards/Rule/index.tsx b/app/components/cards/Rule/index.tsx
new file mode 100644
index 0000000..c32fa06
--- /dev/null
+++ b/app/components/cards/Rule/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Rule.container";
+export type { Category, RuleBottomLink, RuleProps } from "./Rule.types";
diff --git a/app/components/cards/RuleCard/index.tsx b/app/components/cards/RuleCard/index.tsx
deleted file mode 100644
index b96054c..0000000
--- a/app/components/cards/RuleCard/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default } from "./RuleCard.container";
-export type {
-  RuleCardBottomLink,
-  RuleCardProps,
-} from "./RuleCard.types";
diff --git a/app/components/cards/Card/Card.container.tsx b/app/components/cards/Selection/Selection.container.tsx
similarity index 61%
rename from app/components/cards/Card/Card.container.tsx
rename to app/components/cards/Selection/Selection.container.tsx
index e18dc90..10a2d7f 100644
--- a/app/components/cards/Card/Card.container.tsx
+++ b/app/components/cards/Selection/Selection.container.tsx
@@ -1,10 +1,14 @@
 "use client";
 
 import { memo } from "react";
-import { CardView } from "./Card.view";
-import type { CardProps } from "./Card.types";
+import { SelectionView } from "./Selection.view";
+import type { SelectionProps } from "./Selection.types";
 
-const CardContainer = memo<CardProps>(
+/**
+ * Figma: "Card / CardSelection" — stacked tile e.g. `16775:28762` (recommended + label + supportText).
+ * `orientation="horizontal"` selects that vertical stack; `"vertical"` is label + optional info icon with tag on the right (CardStack expanded / single-column).
+ */
+const SelectionContainer = memo<SelectionProps>(
   ({
     label,
     supportText = "",
@@ -28,7 +32,7 @@ const CardContainer = memo<CardProps>(
     };
 
     return (
-      <CardView
+      <SelectionView
         label={label}
         supportText={supportText}
         recommended={recommended}
@@ -44,6 +48,6 @@ const CardContainer = memo<CardProps>(
   },
 );
 
-CardContainer.displayName = "Card";
+SelectionContainer.displayName = "Selection";
 
-export default CardContainer;
+export default SelectionContainer;
diff --git a/app/components/cards/Card/Card.types.ts b/app/components/cards/Selection/Selection.types.ts
similarity index 76%
rename from app/components/cards/Card/Card.types.ts
rename to app/components/cards/Selection/Selection.types.ts
index 42efdeb..3df9ec0 100644
--- a/app/components/cards/Card/Card.types.ts
+++ b/app/components/cards/Selection/Selection.types.ts
@@ -1,17 +1,17 @@
-export interface CardProps {
+export interface SelectionProps {
   label: string;
   supportText?: string;
   recommended?: boolean;
   selected?: boolean;
   orientation: "horizontal" | "vertical";
   showInfoIcon?: boolean;
-  /** Optional id for the card root (e.g. data-card-id for focus after modal close). */
+  /** Optional id for the root (e.g. `data-card-id` for focus after modal close). */
   id?: string;
   className?: string;
   onClick?: () => void;
 }
 
-export interface CardViewProps {
+export interface SelectionViewProps {
   label: string;
   supportText: string;
   recommended: boolean;
diff --git a/app/components/cards/Selection/Selection.view.tsx b/app/components/cards/Selection/Selection.view.tsx
new file mode 100644
index 0000000..0890900
--- /dev/null
+++ b/app/components/cards/Selection/Selection.view.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import Tag from "../../utility/Tag";
+import type { SelectionViewProps } from "./Selection.types";
+
+function InfoIcon() {
+  return (
+    <span
+      className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent font-inter text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
+      aria-hidden
+    >
+      ?
+    </span>
+  );
+}
+
+function SelectionTag({
+  recommended,
+  selected,
+}: {
+  recommended: boolean;
+  selected: boolean;
+}) {
+  if (selected) return <Tag variant="selected" />;
+  if (recommended) return <Tag variant="recommended" />;
+  return null;
+}
+
+export function SelectionView({
+  label,
+  supportText,
+  recommended,
+  selected,
+  orientation,
+  showInfoIcon,
+  id: selectionId,
+  className,
+  onClick,
+  onKeyDown,
+}: SelectionViewProps) {
+  const borderClass = "border border-[var(--color-border-default-primary)]";
+  const selectedBorder = selected
+    ? "outline outline-2 outline-dashed outline-black outline-offset-[-2px]"
+    : "";
+
+  // Figma: "Card / CardSelection" vertical stack — node `16775:28762` (dev).
+  // Prop `orientation="horizontal"` is this stacked layout (historical naming).
+  if (orientation === "horizontal") {
+    const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] px-4 py-3 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
+
+    return (
+      <div
+        {...(selectionId ? { "data-card-id": selectionId } : {})}
+        role="button"
+        tabIndex={0}
+        aria-label={supportText ? `${label}: ${supportText}` : label}
+        className={`${baseClasses} flex min-h-0 w-full flex-col items-start justify-center gap-1`}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+      >
+        <SelectionTag recommended={recommended} selected={selected} />
+        <span className="w-full font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
+          {label}
+        </span>
+        {supportText ? (
+          <p className="w-full font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
+            {supportText}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
+  const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
+
+  return (
+    <div
+      {...(selectionId ? { "data-card-id": selectionId } : {})}
+      role="button"
+      tabIndex={0}
+      aria-label={supportText ? `${label}: ${supportText}` : label}
+      className={`${baseClasses} flex flex-row items-center justify-between gap-4`}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+    >
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <div className="flex items-center gap-1">
+          <span className="font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
+            {label}
+          </span>
+          {showInfoIcon ? <InfoIcon /> : null}
+        </div>
+        {supportText ? (
+          <p className="font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
+            {supportText}
+          </p>
+        ) : null}
+      </div>
+      <div className="shrink-0">
+        <SelectionTag recommended={recommended} selected={selected} />
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/cards/Selection/index.tsx b/app/components/cards/Selection/index.tsx
new file mode 100644
index 0000000..c97781c
--- /dev/null
+++ b/app/components/cards/Selection/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Selection.container";
+export type { SelectionProps } from "./Selection.types";
diff --git a/app/components/cards/NumberCard.tsx b/app/components/cards/Step/Step.tsx
similarity index 90%
rename from app/components/cards/NumberCard.tsx
rename to app/components/cards/Step/Step.tsx
index 6772da0..a25675b 100644
--- a/app/components/cards/NumberCard.tsx
+++ b/app/components/cards/Step/Step.tsx
@@ -1,19 +1,18 @@
 "use client";
 
 import { memo } from "react";
-import SectionNumber from "../sections/SectionNumber";
+import type { StepSizeValue } from "../../../../lib/propNormalization";
+import SectionNumber from "../../sections/SectionNumber";
 
-export type NumberCardSizeValue = "small" | "medium" | "large" | "xlarge";
-
-interface NumberCardProps {
+interface StepProps {
   number: number;
   text: string;
-  size?: NumberCardSizeValue;
+  size?: StepSizeValue;
   iconShape?: string;
   iconColor?: string;
 }
 
-const NumberCard = memo<NumberCardProps>(({ number, text, size: sizeProp }) => {
+const Step = memo<StepProps>(({ number, text, size: sizeProp }) => {
   const baseClasses =
     "bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg";
 
@@ -101,6 +100,6 @@ const NumberCard = memo<NumberCardProps>(({ number, text, size: sizeProp }) => {
   );
 });
 
-NumberCard.displayName = "NumberCard";
+Step.displayName = "Step";
 
-export default NumberCard;
+export default Step;
diff --git a/app/components/cards/Step/index.tsx b/app/components/cards/Step/index.tsx
new file mode 100644
index 0000000..3d385c7
--- /dev/null
+++ b/app/components/cards/Step/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Step";
+export type { StepSizeValue } from "../../../../lib/propNormalization";
diff --git a/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx b/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx
index 5bfd110..8a3ca5c 100644
--- a/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx
+++ b/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx
@@ -3,7 +3,7 @@
 import { useMemo } from "react";
 import Create from "../../modals/Create";
 import Chip from "../../controls/Chip";
-import InputLabel from "../../utility/InputLabel";
+import InputLabel from "../../type/InputLabel";
 import ContentLockup from "../../type/ContentLockup";
 import ModalTextAreaField from "../../../(app)/create/components/ModalTextAreaField";
 import { useMessages, useTranslation } from "../../../contexts/MessagesContext";
diff --git a/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx b/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx
index 27467ef..63871e9 100644
--- a/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx
+++ b/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx
@@ -2,11 +2,8 @@
 
 import { useMemo, useState } from "react";
 import Image from "next/image";
-import RuleCard from "../RuleCard";
-import type {
-  Category,
-  RuleCardProps,
-} from "../RuleCard/RuleCard.types";
+import Rule from "../Rule";
+import type { Category, RuleProps } from "../Rule";
 import { getAssetPath } from "../../../../lib/assetUtils";
 import type { RuleTemplateDto } from "../../../../lib/create/fetchTemplates";
 import {
@@ -21,14 +18,14 @@ import { TemplateChipDetailModal } from "./TemplateChipDetailModal";
 
 export interface TemplateReviewCardProps {
   template: RuleTemplateDto;
-  /** Merged onto RuleCard `className` (e.g. final-review desktop vs mobile radius/padding). */
+  /** Merged onto Rule `className` (e.g. final-review desktop vs mobile radius/padding). */
   ruleCardClassName?: string;
-  /** RuleCard size; create-flow passes `L` at/above `md`, `M` below (640px). */
-  size?: RuleCardProps["size"];
+  /** Rule size; create-flow passes `L` at/above `md`, `M` below (640px). */
+  size?: RuleProps["size"];
 }
 
 /**
- * Expanded RuleCard for template review: surfaces + icon from Figma catalog (21764-16435);
+ * Expanded Rule for template review: surfaces + icon from Figma catalog (21764-16435);
  * tag rows from API `body`. Chip clicks open a read-only detail modal per
  * facet group (values / communication / membership / decision-making / conflict
  * management) so reviewers can see what each chip means without editing.
@@ -56,7 +53,7 @@ export function TemplateReviewCard({
           setActiveChipId(chipId);
         },
       })),
-    [rawCategories],
+    [rawCategories, setActiveChipId],
   );
 
   const activeDetail =
@@ -64,7 +61,7 @@ export function TemplateReviewCard({
 
   return (
     <>
-      <RuleCard
+      <Rule
         title={template.title}
         description={summary}
         expanded
diff --git a/app/components/controls/Checkbox/Checkbox.container.tsx b/app/components/controls/Checkbox/Checkbox.container.tsx
index 7235392..f6e98ef 100644
--- a/app/components/controls/Checkbox/Checkbox.container.tsx
+++ b/app/components/controls/Checkbox/Checkbox.container.tsx
@@ -6,7 +6,7 @@ import { CheckboxView } from "./Checkbox.view";
 import type { CheckboxProps } from "./Checkbox.types";
 
 /**
- * Figma: "Control / Checkbox" (TODO(figma)). Single boolean checkbox with
+ * Figma: "Control / Checkbox". Single boolean checkbox with
  * optional label, supporting standard and inverse modes.
  */
 const CheckboxContainer = memo<CheckboxProps>(
diff --git a/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx b/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
index bc1b9f4..b988394 100644
--- a/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
+++ b/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
@@ -5,7 +5,7 @@ import { CheckboxGroupView } from "./CheckboxGroup.view";
 import type { CheckboxGroupProps } from "./CheckboxGroup.types";
 
 /**
- * Figma: "Control / CheckboxGroup" (TODO(figma)). Group of checkboxes sharing
+ * Figma: "Control / CheckboxGroup". Group of checkboxes sharing
  * a name that emits the array of currently selected values.
  */
 const CheckboxGroupContainer = ({
diff --git a/app/components/controls/Chip/Chip.container.tsx b/app/components/controls/Chip/Chip.container.tsx
index edb36d8..cfdbfb6 100644
--- a/app/components/controls/Chip/Chip.container.tsx
+++ b/app/components/controls/Chip/Chip.container.tsx
@@ -5,7 +5,7 @@ import ChipView from "./Chip.view";
 import type { ChipProps } from "./Chip.types";
 
 /**
- * Figma: "Control / Chip" (TODO(figma)). Compact pill-shaped tag with
+ * Figma: "Control / Chip". Compact pill-shaped tag with
  * selectable, removable, and inline-editable (custom) states.
  */
 const ChipContainer = memo<ChipProps>(
diff --git a/app/components/controls/IncrementerBlock/IncrementerBlock.types.ts b/app/components/controls/IncrementerBlock/IncrementerBlock.types.ts
index cf61523..8742ff2 100644
--- a/app/components/controls/IncrementerBlock/IncrementerBlock.types.ts
+++ b/app/components/controls/IncrementerBlock/IncrementerBlock.types.ts
@@ -2,7 +2,7 @@ import type { IncrementerProps } from "../Incrementer/Incrementer.types";
 import type {
   InputLabelPaletteValue,
   InputLabelSizeValue,
-} from "../../utility/InputLabel/InputLabel.types";
+} from "../../type/InputLabel/InputLabel.types";
 
 export interface IncrementerBlockProps extends IncrementerProps {
   /** Label text displayed above the incrementer. */
diff --git a/app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx b/app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx
index bc478fc..828497e 100644
--- a/app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx
+++ b/app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx
@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import Incrementer from "../Incrementer";
-import InputLabel from "../../utility/InputLabel";
+import InputLabel from "../../type/InputLabel";
 import type { IncrementerBlockViewProps } from "./IncrementerBlock.types";
 
 function IncrementerBlockView({
diff --git a/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx b/app/components/controls/InfoMessageBox/InfoMessageBox.container.tsx
similarity index 90%
rename from app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx
rename to app/components/controls/InfoMessageBox/InfoMessageBox.container.tsx
index 83309a7..784a4a6 100644
--- a/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx
+++ b/app/components/controls/InfoMessageBox/InfoMessageBox.container.tsx
@@ -5,8 +5,9 @@ import InfoMessageBoxView from "./InfoMessageBox.view";
 import type { InfoMessageBoxProps } from "./InfoMessageBox.types";
 
 /**
- * Figma: "Utility / InfoMessageBox" (TODO(figma)). Bordered message box that
- * lists checkbox items under a title with an optional leading icon.
+ * Figma: "Utility / InfoMessageBox"; canonical code under `controls/`.
+ * Bordered message box that lists checkbox items under a title with optional
+ * leading icon.
  */
 const InfoMessageBoxContainer = memo<InfoMessageBoxProps>(
   ({
diff --git a/app/components/utility/InfoMessageBox/InfoMessageBox.types.ts b/app/components/controls/InfoMessageBox/InfoMessageBox.types.ts
similarity index 100%
rename from app/components/utility/InfoMessageBox/InfoMessageBox.types.ts
rename to app/components/controls/InfoMessageBox/InfoMessageBox.types.ts
diff --git a/app/components/utility/InfoMessageBox/InfoMessageBox.view.tsx b/app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx
similarity index 97%
rename from app/components/utility/InfoMessageBox/InfoMessageBox.view.tsx
rename to app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx
index e2e44ff..7fd474d 100644
--- a/app/components/utility/InfoMessageBox/InfoMessageBox.view.tsx
+++ b/app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { memo } from "react";
-import CheckboxGroup from "../../controls/CheckboxGroup";
+import CheckboxGroup from "../CheckboxGroup";
 import type { InfoMessageBoxViewProps } from "./InfoMessageBox.types";
 
 /** Exclamation icon per Figma 19751:35053 – vertical bar + dot inside circle; circle bg white 10% opacity, no border */
diff --git a/app/components/utility/InfoMessageBox/index.tsx b/app/components/controls/InfoMessageBox/index.tsx
similarity index 100%
rename from app/components/utility/InfoMessageBox/index.tsx
rename to app/components/controls/InfoMessageBox/index.tsx
diff --git a/app/components/controls/InputWithCounter/InputWithCounter.container.tsx b/app/components/controls/InputWithCounter/InputWithCounter.container.tsx
index 7cdba29..0722ecb 100644
--- a/app/components/controls/InputWithCounter/InputWithCounter.container.tsx
+++ b/app/components/controls/InputWithCounter/InputWithCounter.container.tsx
@@ -5,7 +5,7 @@ import { InputWithCounterView } from "./InputWithCounter.view";
 import type { InputWithCounterProps } from "./InputWithCounter.types";
 
 /**
- * Figma: "Control / InputWithCounter" (TODO(figma)).
+ * Figma: "Control / InputWithCounter".
  * Single-line text input with a label, optional help glyph, and a live
  * `value.length / maxLength` counter underneath.
  */
diff --git a/app/components/controls/MultiSelect/MultiSelect.container.tsx b/app/components/controls/MultiSelect/MultiSelect.container.tsx
index fd70a8a..cfeabb5 100644
--- a/app/components/controls/MultiSelect/MultiSelect.container.tsx
+++ b/app/components/controls/MultiSelect/MultiSelect.container.tsx
@@ -5,7 +5,7 @@ import MultiSelectView from "./MultiSelect.view";
 import type { MultiSelectProps } from "./MultiSelect.types";
 
 /**
- * Figma: "Control / MultiSelect" (TODO(figma)). Labelled set of chips for
+ * Figma: "Control / MultiSelect". Labelled set of chips for
  * picking multiple values, with an optional add button for custom entries.
  */
 const MultiSelectContainer = memo<MultiSelectProps>(
diff --git a/app/components/controls/MultiSelect/MultiSelect.view.tsx b/app/components/controls/MultiSelect/MultiSelect.view.tsx
index 0bb1b96..46f8004 100644
--- a/app/components/controls/MultiSelect/MultiSelect.view.tsx
+++ b/app/components/controls/MultiSelect/MultiSelect.view.tsx
@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import Chip from "../Chip";
-import InputLabel from "../../utility/InputLabel";
+import InputLabel from "../../type/InputLabel";
 import type { MultiSelectViewProps } from "./MultiSelect.types";
 
 function MultiSelectView({
@@ -88,7 +88,7 @@ function MultiSelectView({
             }}
             className={
               !addButtonText
-                ? // Circular button with border (RuleCard style)
+                ? // Circular button with border (Rule style)
                   `bg-[var(--color-surface-default-transparent,rgba(0,0,0,0))] border-[1.25px] ${isInverse ? "border-[var(--color-border-default-primary,#141414)]" : "border-[var(--color-border-default-tertiary,#464646)]"} border-solid flex items-center justify-center ${isSmall ? "size-[30px]" : "size-[40px]"} rounded-[var(--measures-radius-full,9999px)] shrink-0 hover:opacity-80 transition-opacity`
                 : // Text add control (default palette: white label + brand “+”; inverse: inverse primary for both)
                   `flex items-center justify-center overflow-hidden rounded-[var(--measures-radius-full,9999px)] shrink-0 hover:opacity-80 transition-opacity ${
diff --git a/app/components/controls/RadioGroup/RadioGroup.container.tsx b/app/components/controls/RadioGroup/RadioGroup.container.tsx
index 80faa14..5d5f283 100644
--- a/app/components/controls/RadioGroup/RadioGroup.container.tsx
+++ b/app/components/controls/RadioGroup/RadioGroup.container.tsx
@@ -5,7 +5,7 @@ import { RadioGroupView } from "./RadioGroup.view";
 import type { RadioGroupProps } from "./RadioGroup.types";
 
 /**
- * Figma: "Control / RadioGroup" (TODO(figma)). Group of radio buttons sharing
+ * Figma: "Control / RadioGroup". Group of radio buttons sharing
  * a name that emits the single currently selected value.
  */
 const RadioGroupContainer = ({
diff --git a/app/components/controls/SelectInput/SelectInput.container.tsx b/app/components/controls/SelectInput/SelectInput.container.tsx
index 6106320..75628cc 100644
--- a/app/components/controls/SelectInput/SelectInput.container.tsx
+++ b/app/components/controls/SelectInput/SelectInput.container.tsx
@@ -18,7 +18,7 @@ import { SelectInputView } from "./SelectInput.view";
 import type { SelectInputProps } from "./SelectInput.types";
 
 /**
- * Figma: "Control / SelectInput" (TODO(figma)). Custom-styled select dropdown
+ * Figma: "Control / SelectInput". Custom-styled select dropdown
  * with a labelled trigger button and floating option menu.
  */
 const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
diff --git a/app/components/controls/SelectOption/SelectOption.container.tsx b/app/components/controls/SelectOption/SelectOption.container.tsx
index 675614a..0407926 100644
--- a/app/components/controls/SelectOption/SelectOption.container.tsx
+++ b/app/components/controls/SelectOption/SelectOption.container.tsx
@@ -5,7 +5,7 @@ import { SelectOptionView } from "./SelectOption.view";
 import type { SelectOptionProps } from "./SelectOption.types";
 
 /**
- * Figma: "Control / SelectOption" (TODO(figma)). Single option row rendered
+ * Figma: "Control / SelectOption". Single option row rendered
  * inside `SelectInput`'s dropdown menu.
  */
 const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
diff --git a/app/components/controls/Switch/Switch.container.tsx b/app/components/controls/Switch/Switch.container.tsx
index 5019501..232989a 100644
--- a/app/components/controls/Switch/Switch.container.tsx
+++ b/app/components/controls/Switch/Switch.container.tsx
@@ -5,7 +5,7 @@ import { SwitchView } from "./Switch.view";
 import type { SwitchProps } from "./Switch.types";
 
 /**
- * Figma: "Control / Switch" (TODO(figma)). Animated on/off toggle switch,
+ * Figma: "Control / Switch". Animated on/off toggle switch,
  * optionally paired with a trailing text label.
  */
 const SwitchContainer = memo(
diff --git a/app/components/controls/TextArea/TextArea.container.tsx b/app/components/controls/TextArea/TextArea.container.tsx
index f72a6eb..3287594 100644
--- a/app/components/controls/TextArea/TextArea.container.tsx
+++ b/app/components/controls/TextArea/TextArea.container.tsx
@@ -6,7 +6,7 @@ import { TextAreaView } from "./TextArea.view";
 import type { TextAreaProps } from "./TextArea.types";
 
 /**
- * Figma: "Control / TextArea" (TODO(figma)). Multi-line text input with size
+ * Figma: "Control / TextArea". Multi-line text input with size
  * variants, an embedded appearance, and an optional label and help glyph.
  */
 const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
diff --git a/app/components/controls/TextInput/TextInput.container.tsx b/app/components/controls/TextInput/TextInput.container.tsx
index e0dcefe..8f312fb 100644
--- a/app/components/controls/TextInput/TextInput.container.tsx
+++ b/app/components/controls/TextInput/TextInput.container.tsx
@@ -6,7 +6,7 @@ import { TextInputView } from "./TextInput.view";
 import type { TextInputProps } from "./TextInput.types";
 
 /**
- * Figma: "Control / TextInput" (TODO(figma)). Single-line text input with size
+ * Figma: "Control / TextInput". Single-line text input with size
  * variants and managed default/active/focus/error states.
  */
 const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
diff --git a/app/components/controls/Toggle/Toggle.container.tsx b/app/components/controls/Toggle/Toggle.container.tsx
index 6186b1e..f0aa5f1 100644
--- a/app/components/controls/Toggle/Toggle.container.tsx
+++ b/app/components/controls/Toggle/Toggle.container.tsx
@@ -5,7 +5,7 @@ import { ToggleView } from "./Toggle.view";
 import type { ToggleProps } from "./Toggle.types";
 
 /**
- * Figma: "Control / Toggle" (TODO(figma)). Pill-shaped toggle button with
+ * Figma: "Control / Toggle". Pill-shaped toggle button with
  * checked/unchecked states and optional leading icon and text.
  */
 const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
diff --git a/app/components/controls/ToggleGroup/ToggleGroup.container.tsx b/app/components/controls/ToggleGroup/ToggleGroup.container.tsx
index 9281a40..3efee12 100644
--- a/app/components/controls/ToggleGroup/ToggleGroup.container.tsx
+++ b/app/components/controls/ToggleGroup/ToggleGroup.container.tsx
@@ -5,7 +5,7 @@ import { ToggleGroupView } from "./ToggleGroup.view";
 import type { ToggleGroupProps } from "./ToggleGroup.types";
 
 /**
- * Figma: "Control / ToggleGroup" (TODO(figma)). Segmented row of `Toggle`
+ * Figma: "Control / ToggleGroup". Segmented row of `Toggle`
  * buttons whose corner radii are shared based on position (left/middle/right).
  */
 const ToggleGroupContainer = memo(
diff --git a/app/components/controls/Upload/Upload.container.tsx b/app/components/controls/Upload/Upload.container.tsx
index 78b8f2b..622621b 100644
--- a/app/components/controls/Upload/Upload.container.tsx
+++ b/app/components/controls/Upload/Upload.container.tsx
@@ -5,7 +5,7 @@ import UploadView from "./Upload.view";
 import type { UploadProps } from "./Upload.types";
 
 /**
- * Figma: "Control / Upload" (TODO(figma)). Click-to-upload tile with a label
+ * Figma: "Control / Upload". Click-to-upload tile with a label
  * and hint text used to add an image from the user's device.
  */
 const UploadContainer = memo<UploadProps>(
diff --git a/app/components/controls/Upload/Upload.view.tsx b/app/components/controls/Upload/Upload.view.tsx
index eb4cbaf..c61dbf4 100644
--- a/app/components/controls/Upload/Upload.view.tsx
+++ b/app/components/controls/Upload/Upload.view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { memo } from "react";
-import InputLabel from "../../utility/InputLabel";
+import InputLabel from "../../type/InputLabel";
 import type { UploadViewProps } from "./Upload.types";
 
 function UploadView({
diff --git a/app/components/layout/List/List.types.ts b/app/components/layout/List/List.types.ts
index 7a9366f..040d81a 100644
--- a/app/components/layout/List/List.types.ts
+++ b/app/components/layout/List/List.types.ts
@@ -1,4 +1,4 @@
-import type { IconName } from "../../asset/Icon";
+import type { IconName } from "../../asset/icon";
 import type {
   ListEntryVariant,
   ListSize,
diff --git a/app/components/layout/ListEntry/ListEntry.types.ts b/app/components/layout/ListEntry/ListEntry.types.ts
index cbfec59..42bf958 100644
--- a/app/components/layout/ListEntry/ListEntry.types.ts
+++ b/app/components/layout/ListEntry/ListEntry.types.ts
@@ -1,4 +1,4 @@
-import type { IconName } from "../../asset/Icon";
+import type { IconName } from "../../asset/icon";
 
 export const LIST_SIZE_OPTIONS = ["s", "m", "l"] as const;
 export type ListSize = (typeof LIST_SIZE_OPTIONS)[number];
diff --git a/app/components/layout/ListEntry/ListEntry.view.tsx b/app/components/layout/ListEntry/ListEntry.view.tsx
index daced17..3380d3d 100644
--- a/app/components/layout/ListEntry/ListEntry.view.tsx
+++ b/app/components/layout/ListEntry/ListEntry.view.tsx
@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import Link from "next/link";
-import Icon, { type IconName } from "../../asset/Icon";
+import Icon, { type IconName } from "../../asset/icon";
 import Divider from "../../utility/Divider";
 import { FIGMA_LIST_ENTRY_OUTER, listEntrySizeLayout } from "../listSizeLayout";
 import type {
diff --git a/app/components/modals/ContextMenu/ContextMenu.tsx b/app/components/modals/ContextMenu/ContextMenu.tsx
deleted file mode 100644
index ffdc2a6..0000000
--- a/app/components/modals/ContextMenu/ContextMenu.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client";
-
-import { forwardRef, memo } from "react";
-
-interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
-  ({ className = "", children, ...props }, ref) => {
-    const menuClasses = `
-      bg-black
-      border border-[var(--color-border-default-tertiary)]
-      rounded-[var(--measures-radius-medium)]
-      shadow-lg
-      p-[4px]
-      min-w-[200px]
-      max-w-[300px]
-      ${className}
-    `
-      .trim()
-      .replace(/\s+/g, " ");
-
-    return (
-      <div
-        ref={ref}
-        className={menuClasses}
-        role="menu"
-        style={{ backgroundColor: "#000000" }}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-ContextMenu.displayName = "ContextMenu";
-
-export default memo(ContextMenu);
diff --git a/app/components/modals/ContextMenu/ContextMenuDivider.tsx b/app/components/modals/ContextMenu/ContextMenuDivider.tsx
deleted file mode 100644
index 4073b09..0000000
--- a/app/components/modals/ContextMenu/ContextMenuDivider.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client";
-
-import { forwardRef, memo } from "react";
-
-interface ContextMenuDividerProps extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string;
-}
-
-const ContextMenuDivider = forwardRef<HTMLDivElement, ContextMenuDividerProps>(
-  ({ className = "", ...props }, ref) => {
-    const dividerClasses = `
-    border-t border-[var(--color-border-default-tertiary)]
-    my-1
-    ${className}
-  `
-      .trim()
-      .replace(/\s+/g, " ");
-
-    return (
-      <div ref={ref} className={dividerClasses} role="separator" {...props} />
-    );
-  },
-);
-
-ContextMenuDivider.displayName = "ContextMenuDivider";
-
-export default memo(ContextMenuDivider);
diff --git a/app/components/modals/ContextMenu/ContextMenuSection.tsx b/app/components/modals/ContextMenu/ContextMenuSection.tsx
deleted file mode 100644
index 61634f4..0000000
--- a/app/components/modals/ContextMenu/ContextMenuSection.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import { forwardRef, memo } from "react";
-
-interface ContextMenuSectionProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-const ContextMenuSection = forwardRef<HTMLDivElement, ContextMenuSectionProps>(
-  ({ title, children, className = "", ...props }, ref) => {
-    const sectionClasses = `
-    ${className}
-  `
-      .trim()
-      .replace(/\s+/g, " ");
-
-    return (
-      <div ref={ref} className={sectionClasses} role="group" {...props}>
-        {title && (
-          <div className="px-3 py-2">
-            <div className="text-[var(--color-content-default-primary)] text-sm font-medium">
-              {title}
-            </div>
-          </div>
-        )}
-        {children}
-      </div>
-    );
-  },
-);
-
-ContextMenuSection.displayName = "ContextMenuSection";
-
-export default memo(ContextMenuSection);
diff --git a/app/components/modals/ContextMenuItem/ContextMenuItem.container.tsx b/app/components/modals/ContextMenuItem/ContextMenuItem.container.tsx
deleted file mode 100644
index 4d50ba5..0000000
--- a/app/components/modals/ContextMenuItem/ContextMenuItem.container.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client";
-
-import { forwardRef, memo, useCallback } from "react";
-import { ContextMenuItemView } from "./ContextMenuItem.view";
-import type { ContextMenuItemProps } from "./ContextMenuItem.types";
-
-const ContextMenuItemContainer = forwardRef<
-  HTMLDivElement,
-  ContextMenuItemProps
->(
-  (
-    {
-      children,
-      selected = false,
-      hasSubmenu = false,
-      disabled = false,
-      className = "",
-      onClick,
-      size: sizeProp = "medium",
-      ...props
-    },
-    ref,
-  ) => {
-    const size = sizeProp;
-    const getTextSize = (): string => {
-      switch (size) {
-        case "small":
-          return "text-[10px] leading-[14px]";
-        case "medium":
-          return "text-[14px] leading-[20px]";
-        case "large":
-          return "text-[16px] leading-[24px]";
-        default:
-          return "text-[14px] leading-[20px]";
-      }
-    };
-
-    const itemClasses = `
-      flex items-center justify-between
-      px-[8px] py-[4px]
-      text-[var(--color-content-default-brand-primary)]
-      ${getTextSize()}
-      cursor-pointer
-      transition-colors duration-150
-      ${
-        selected
-          ? "bg-[var(--color-surface-default-secondary)] rounded-[var(--measures-radius-small)]"
-          : ""
-      }
-      ${
-        disabled
-          ? "opacity-50 cursor-not-allowed"
-          : "hover:!bg-[var(--color-surface-default-secondary)] hover:!rounded-[var(--measures-radius-small)]"
-      }
-      ${className}
-    `
-      .trim()
-      .replace(/\s+/g, " ");
-
-    const handleClick = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        if (!disabled && onClick) {
-          onClick(e);
-        }
-      },
-      [disabled, onClick],
-    );
-
-    const handleKeyDown = useCallback(
-      (e: React.KeyboardEvent<HTMLDivElement>) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          if (!disabled && onClick) {
-            onClick(e);
-          }
-        }
-      },
-      [disabled, onClick],
-    );
-
-    return (
-      <ContextMenuItemView
-        ref={ref}
-        selected={selected}
-        hasSubmenu={hasSubmenu}
-        disabled={disabled}
-        className={className}
-        itemClasses={itemClasses}
-        handleClick={handleClick}
-        handleKeyDown={handleKeyDown}
-        {...props}
-      >
-        {children}
-      </ContextMenuItemView>
-    );
-  },
-);
-
-ContextMenuItemContainer.displayName = "ContextMenuItem";
-
-export default memo(ContextMenuItemContainer);
diff --git a/app/components/modals/ContextMenuItem/ContextMenuItem.types.ts b/app/components/modals/ContextMenuItem/ContextMenuItem.types.ts
deleted file mode 100644
index 27aadbe..0000000
--- a/app/components/modals/ContextMenuItem/ContextMenuItem.types.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export type ContextMenuItemSizeValue = "small" | "medium" | "large";
-
-export interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-  selected?: boolean;
-  hasSubmenu?: boolean;
-  disabled?: boolean;
-  className?: string;
-  onClick?: (
-    _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
-  ) => void;
-  /**
-   * Context menu item size.
-   */
-  size?: ContextMenuItemSizeValue;
-}
-
-export interface ContextMenuItemViewProps {
-  children?: React.ReactNode;
-  selected: boolean;
-  hasSubmenu: boolean;
-  disabled: boolean;
-  className: string;
-  itemClasses: string;
-  handleClick: (_e: React.MouseEvent<HTMLDivElement>) => void;
-  handleKeyDown: (_e: React.KeyboardEvent<HTMLDivElement>) => void;
-}
diff --git a/app/components/modals/ContextMenuItem/ContextMenuItem.view.tsx b/app/components/modals/ContextMenuItem/ContextMenuItem.view.tsx
deleted file mode 100644
index aa67acc..0000000
--- a/app/components/modals/ContextMenuItem/ContextMenuItem.view.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { forwardRef } from "react";
-import type { ContextMenuItemViewProps } from "./ContextMenuItem.types";
-
-export const ContextMenuItemView = forwardRef<
-  HTMLDivElement,
-  ContextMenuItemViewProps
->(
-  (
-    {
-      children,
-      selected,
-      hasSubmenu,
-      disabled,
-      itemClasses,
-      handleClick,
-      handleKeyDown,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={itemClasses}
-        role="menuitem"
-        tabIndex={disabled ? -1 : 0}
-        aria-current={selected ? "true" : undefined}
-        aria-disabled={disabled}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        {...props}
-      >
-        <div className="flex items-center gap-[8px]">
-          {selected && (
-            <svg
-              className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          )}
-          <span>{children}</span>
-        </div>
-        {hasSubmenu && (
-          <svg
-            className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M9 5l7 7-7 7"
-            />
-          </svg>
-        )}
-      </div>
-    );
-  },
-);
-
-ContextMenuItemView.displayName = "ContextMenuItemView";
diff --git a/app/components/modals/ContextMenuItem/index.tsx b/app/components/modals/ContextMenuItem/index.tsx
deleted file mode 100644
index e7bbe20..0000000
--- a/app/components/modals/ContextMenuItem/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./ContextMenuItem.container";
-export type { ContextMenuItemProps } from "./ContextMenuItem.types";
diff --git a/app/components/modals/Create/Create.view.tsx b/app/components/modals/Create/Create.view.tsx
index e881e49..98ffaa3 100644
--- a/app/components/modals/Create/Create.view.tsx
+++ b/app/components/modals/Create/Create.view.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import ContentLockup from "../../type/ContentLockup";
-import ModalFooter from "../../utility/ModalFooter";
-import ModalHeader from "../../utility/ModalHeader";
+import ModalFooter from "../ModalFooter";
+import ModalHeader from "../ModalHeader";
 import { CreateModalFrameView } from "./CreateModalFrame.view";
 import type { CreateViewProps } from "./Create.types";
 
diff --git a/app/components/modals/Create/useCreateModalA11y.ts b/app/components/modals/Create/useCreateModalA11y.ts
index de50f1e..baa93df 100644
--- a/app/components/modals/Create/useCreateModalA11y.ts
+++ b/app/components/modals/Create/useCreateModalA11y.ts
@@ -78,5 +78,5 @@ export function useCreateModalA11y(
       document.removeEventListener("keydown", handleTab);
       previousActiveElementRef.current?.focus();
     };
-  }, [isOpen]);
+  }, [dialogRef, isOpen]);
 }
diff --git a/app/components/modals/Dialog/Dialog.container.tsx b/app/components/modals/Dialog/Dialog.container.tsx
index db6f25e..7713665 100644
--- a/app/components/modals/Dialog/Dialog.container.tsx
+++ b/app/components/modals/Dialog/Dialog.container.tsx
@@ -32,7 +32,6 @@ const DialogContainer = memo<DialogProps>(
         title={title}
         description={description}
         footer={footer}
-        children={children}
         className={className}
         ariaLabel={ariaLabel}
         ariaLabelledBy={titleId}
@@ -40,7 +39,9 @@ const DialogContainer = memo<DialogProps>(
         backdropVariant={backdropVariant}
         overlayRef={overlayRef}
         dialogRef={dialogRef}
-      />
+      >
+        {children}
+      </DialogView>
     );
   },
 );
diff --git a/app/components/modals/Dialog/Dialog.view.tsx b/app/components/modals/Dialog/Dialog.view.tsx
index ee718c4..218060b 100644
--- a/app/components/modals/Dialog/Dialog.view.tsx
+++ b/app/components/modals/Dialog/Dialog.view.tsx
@@ -2,8 +2,8 @@
 
 import { memo } from "react";
 import ContentLockup from "../../type/ContentLockup";
-import ModalFooter from "../../utility/ModalFooter";
-import ModalHeader from "../../utility/ModalHeader";
+import ModalFooter from "../ModalFooter";
+import ModalHeader from "../ModalHeader";
 import { CreateModalFrameView } from "../Create/CreateModalFrame.view";
 import type { DialogViewProps } from "./Dialog.types";
 
diff --git a/app/components/modals/Login/Login.view.tsx b/app/components/modals/Login/Login.view.tsx
index 934eec7..6a1ae2f 100644
--- a/app/components/modals/Login/Login.view.tsx
+++ b/app/components/modals/Login/Login.view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { createPortal } from "react-dom";
-import ModalHeader from "../../utility/ModalHeader";
+import ModalHeader from "../ModalHeader";
 import type { LoginBackdropVariant, LoginViewProps } from "./Login.types";
 
 const backdropClasses: Record<LoginBackdropVariant, string> = {
diff --git a/app/components/utility/ModalFooter/ModalFooter.container.tsx b/app/components/modals/ModalFooter/ModalFooter.container.tsx
similarity index 83%
rename from app/components/utility/ModalFooter/ModalFooter.container.tsx
rename to app/components/modals/ModalFooter/ModalFooter.container.tsx
index e6a2556..ecede9c 100644
--- a/app/components/utility/ModalFooter/ModalFooter.container.tsx
+++ b/app/components/modals/ModalFooter/ModalFooter.container.tsx
@@ -5,7 +5,7 @@ import { ModalFooterView } from "./ModalFooter.view";
 import type { ModalFooterProps } from "./ModalFooter.types";
 
 /**
- * Figma: "Utility / ModalFooter" (TODO(figma)).
+ * Figma: "Utility / ModalFooter". Lives under `modals/` with other composed modal chrome.
  * Sticky modal footer slot used by the create-flow + login modals to host
  * primary/secondary actions.
  */
diff --git a/app/components/utility/ModalFooter/ModalFooter.types.ts b/app/components/modals/ModalFooter/ModalFooter.types.ts
similarity index 100%
rename from app/components/utility/ModalFooter/ModalFooter.types.ts
rename to app/components/modals/ModalFooter/ModalFooter.types.ts
diff --git a/app/components/utility/ModalFooter/ModalFooter.view.tsx b/app/components/modals/ModalFooter/ModalFooter.view.tsx
similarity index 100%
rename from app/components/utility/ModalFooter/ModalFooter.view.tsx
rename to app/components/modals/ModalFooter/ModalFooter.view.tsx
diff --git a/app/components/utility/ModalFooter/index.tsx b/app/components/modals/ModalFooter/index.tsx
similarity index 100%
rename from app/components/utility/ModalFooter/index.tsx
rename to app/components/modals/ModalFooter/index.tsx
diff --git a/app/components/utility/ModalHeader/ModalHeader.container.tsx b/app/components/modals/ModalHeader/ModalHeader.container.tsx
similarity index 83%
rename from app/components/utility/ModalHeader/ModalHeader.container.tsx
rename to app/components/modals/ModalHeader/ModalHeader.container.tsx
index b0da587..ab3e835 100644
--- a/app/components/utility/ModalHeader/ModalHeader.container.tsx
+++ b/app/components/modals/ModalHeader/ModalHeader.container.tsx
@@ -5,7 +5,7 @@ import { ModalHeaderView } from "./ModalHeader.view";
 import type { ModalHeaderProps } from "./ModalHeader.types";
 
 /**
- * Figma: "Utility / ModalHeader" (TODO(figma)).
+ * Figma: "Utility / ModalHeader". Lives under `modals/` with other composed modal chrome.
  * Sticky 48px modal header with optional close (left) and more-options
  * (right) icon buttons.
  */
diff --git a/app/components/utility/ModalHeader/ModalHeader.types.ts b/app/components/modals/ModalHeader/ModalHeader.types.ts
similarity index 100%
rename from app/components/utility/ModalHeader/ModalHeader.types.ts
rename to app/components/modals/ModalHeader/ModalHeader.types.ts
diff --git a/app/components/utility/ModalHeader/ModalHeader.view.tsx b/app/components/modals/ModalHeader/ModalHeader.view.tsx
similarity index 100%
rename from app/components/utility/ModalHeader/ModalHeader.view.tsx
rename to app/components/modals/ModalHeader/ModalHeader.view.tsx
diff --git a/app/components/utility/ModalHeader/index.tsx b/app/components/modals/ModalHeader/index.tsx
similarity index 100%
rename from app/components/utility/ModalHeader/index.tsx
rename to app/components/modals/ModalHeader/index.tsx
diff --git a/app/components/navigation/ConditionalNavigationClient.tsx b/app/components/navigation/ConditionalNavigationClient.tsx
index f6e322b..c1505c6 100644
--- a/app/components/navigation/ConditionalNavigationClient.tsx
+++ b/app/components/navigation/ConditionalNavigationClient.tsx
@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import { usePathname } from "next/navigation";
-import TopNavWithPathname from "./TopNav/TopNavWithPathname";
+import TopWithPathname from "./Top/TopWithPathname";
 
 export type ConditionalNavigationClientProps = {
   initialSignedIn: boolean;
@@ -22,7 +22,7 @@ const ConditionalNavigationClient = memo(
       return null;
     }
 
-    return <TopNavWithPathname initialSignedIn={initialSignedIn} />;
+    return <TopWithPathname initialSignedIn={initialSignedIn} />;
   },
 );
 
diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx b/app/components/navigation/CreateFlowFooter/CreateFlowFooter.container.tsx
similarity index 92%
rename from app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
rename to app/components/navigation/CreateFlowFooter/CreateFlowFooter.container.tsx
index c924229..333fdf0 100644
--- a/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
+++ b/app/components/navigation/CreateFlowFooter/CreateFlowFooter.container.tsx
@@ -5,7 +5,7 @@ import { CreateFlowFooterView } from "./CreateFlowFooter.view";
 import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
 
 /**
- * Figma: "Utility / CreateFlowFooter" (TODO(figma)). Sticky footer for the
+ * Figma: "Utility / CreateFlowFooter". Sticky footer for the
  * create flow with a back action, optional secondary button, and progress bar.
  */
 const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(
diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts b/app/components/navigation/CreateFlowFooter/CreateFlowFooter.types.ts
similarity index 100%
rename from app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts
rename to app/components/navigation/CreateFlowFooter/CreateFlowFooter.types.ts
diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx b/app/components/navigation/CreateFlowFooter/CreateFlowFooter.view.tsx
similarity index 100%
rename from app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
rename to app/components/navigation/CreateFlowFooter/CreateFlowFooter.view.tsx
diff --git a/app/components/utility/CreateFlowFooter/index.tsx b/app/components/navigation/CreateFlowFooter/index.tsx
similarity index 100%
rename from app/components/utility/CreateFlowFooter/index.tsx
rename to app/components/navigation/CreateFlowFooter/index.tsx
diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx b/app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.container.tsx
similarity index 88%
rename from app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
rename to app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.container.tsx
index 81c513d..807ec41 100644
--- a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
+++ b/app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.container.tsx
@@ -6,8 +6,8 @@ import { CreateFlowTopNavView } from "./CreateFlowTopNav.view";
 import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
 
 /**
- * Figma: "Utility / CreateFlowTopNav" (TODO(figma)). Top navigation bar for
- * the create flow with exit, share, export, and edit actions.
+ * Figma: Utility / CreateFlowTopNav — wizard header (create-flow chrome).
+ * Exit, optional share / export / edit; strings in `messages/en/create/topNav.json`.
  */
 const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
   ({
diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts b/app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.types.ts
similarity index 100%
rename from app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts
rename to app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.types.ts
diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx b/app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx
similarity index 96%
rename from app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx
rename to app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx
index 3148eee..b44f138 100644
--- a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx
+++ b/app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import Logo from "../../asset/logo";
+import Logo from "../../asset/Logo";
 import Button from "../../buttons/Button";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
@@ -27,12 +27,12 @@ export function CreateFlowTopNavView({
     <header
       className={`bg-black w-full ${className}`}
       role="banner"
-      aria-label="Create Rule Flow Navigation"
+      aria-label={t("bannerAriaLabel")}
     >
       <nav
         className="flex items-center justify-between mx-auto max-w-[639px] md:max-w-[1920px] px-[var(--spacing-measures-spacing-500,20px)] md:px-[48px] py-[var(--spacing-measures-spacing-300,12px)] md:py-[var(--spacing-measures-spacing-016,16px)]"
         role="navigation"
-        aria-label="Create Flow Navigation"
+        aria-label={t("navAriaLabel")}
       >
         <Logo size="createFlow" wordmark palette={buttonPalette} />
 
diff --git a/app/components/utility/CreateFlowTopNav/index.tsx b/app/components/navigation/CreateFlowTopNav/index.tsx
similarity index 100%
rename from app/components/utility/CreateFlowTopNav/index.tsx
rename to app/components/navigation/CreateFlowTopNav/index.tsx
diff --git a/app/components/navigation/Footer.tsx b/app/components/navigation/Footer.tsx
index 9c45007..370ca0d 100644
--- a/app/components/navigation/Footer.tsx
+++ b/app/components/navigation/Footer.tsx
@@ -3,8 +3,8 @@
 import { memo } from "react";
 import { useTranslation } from "../../contexts/MessagesContext";
 import Link from "next/link";
-import Logo from "../asset/logo";
-import Separator from "../utility/Separator";
+import Logo from "../asset/Logo";
+import Divider from "../utility/Divider";
 import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 
 /**
@@ -158,7 +158,7 @@ const Footer = memo(() => {
             </div>
           </div>
 
-          <Separator />
+          <Divider />
 
           <div
             className="flex w-full flex-col
diff --git a/app/components/navigation/MenuBar.tsx b/app/components/navigation/Menu.tsx
similarity index 81%
rename from app/components/navigation/MenuBar.tsx
rename to app/components/navigation/Menu.tsx
index 50c7cbe..cebf562 100644
--- a/app/components/navigation/MenuBar.tsx
+++ b/app/components/navigation/Menu.tsx
@@ -3,27 +3,27 @@
 import { memo } from "react";
 import { useTranslation } from "../../contexts/MessagesContext";
 
-export type MenuBarSizeValue =
+export type MenuSizeValue =
   | "X Small"
   | "Small"
   | "Medium"
   | "Large"
   | "X Large";
 
-interface MenuBarProps extends React.HTMLAttributes<HTMLElement> {
+interface MenuProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
   className?: string;
   /**
-   * Menu bar size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large".
+   * Menu size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large".
    * @default "X Small"
    */
-  size?: MenuBarSizeValue;
+  size?: MenuSizeValue;
 }
 
-const MenuBar = memo<MenuBarProps>(
+const Menu = memo<MenuProps>(
   ({ children, className = "", size: sizeProp = "X Small", ...props }) => {
     const size = sizeProp ?? "X Small";
-    const t = useTranslation("menuBar");
+    const t = useTranslation("menu");
 
     // Size styles based on Figma specifications
     const sizeStyles: Record<
@@ -57,6 +57,6 @@ const MenuBar = memo<MenuBarProps>(
   },
 );
 
-MenuBar.displayName = "MenuBar";
+Menu.displayName = "Menu";
 
-export default MenuBar;
+export default Menu;
diff --git a/app/components/navigation/MenuBarItem/index.tsx b/app/components/navigation/MenuBarItem/index.tsx
deleted file mode 100644
index 33cc29c..0000000
--- a/app/components/navigation/MenuBarItem/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./MenuBarItem.container";
-export type { MenuBarItemProps } from "./MenuBarItem.types";
diff --git a/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx b/app/components/navigation/MenuItem/MenuItem.container.tsx
similarity index 93%
rename from app/components/navigation/MenuBarItem/MenuBarItem.container.tsx
rename to app/components/navigation/MenuItem/MenuItem.container.tsx
index cd232db..19934ac 100644
--- a/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx
+++ b/app/components/navigation/MenuItem/MenuItem.container.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { memo } from "react";
-import MenuBarItemView from "./MenuBarItem.view";
-import type { MenuBarItemProps } from "./MenuBarItem.types";
+import MenuItemView from "./MenuItem.view";
+import type { MenuItemProps } from "./MenuItem.types";
 
-const MenuBarItemContainer = memo<MenuBarItemProps>(
+const MenuItemContainer = memo<MenuItemProps>(
   ({
     href = "#",
     buttonOnClick,
@@ -106,7 +106,7 @@ const MenuBarItemContainer = memo<MenuBarItemProps>(
     };
 
     return (
-      <MenuBarItemView
+      <MenuItemView
         href={href}
         buttonOnClick={buttonOnClick}
         disabled={disabled}
@@ -115,11 +115,11 @@ const MenuBarItemContainer = memo<MenuBarItemProps>(
         accessibilityProps={accessibilityProps}
       >
         {children}
-      </MenuBarItemView>
+      </MenuItemView>
     );
   },
 );
 
-MenuBarItemContainer.displayName = "MenuBarItem";
+MenuItemContainer.displayName = "MenuItem";
 
-export default MenuBarItemContainer;
+export default MenuItemContainer;
diff --git a/app/components/navigation/MenuBarItem/MenuBarItem.types.ts b/app/components/navigation/MenuItem/MenuItem.types.ts
similarity index 61%
rename from app/components/navigation/MenuBarItem/MenuBarItem.types.ts
rename to app/components/navigation/MenuItem/MenuItem.types.ts
index 28012f3..b76c195 100644
--- a/app/components/navigation/MenuBarItem/MenuBarItem.types.ts
+++ b/app/components/navigation/MenuItem/MenuItem.types.ts
@@ -1,40 +1,40 @@
-export type MenuBarItemSizeValue =
+export type MenuItemSizeValue =
   | "X Small"
   | "Small"
   | "Medium"
   | "Large"
   | "X Large";
 
-export type MenuBarItemStateValue = "default" | "hover" | "selected";
+export type MenuItemStateValue = "default" | "hover" | "selected";
 
-export type MenuBarItemModeValue = "default" | "inverse";
+export type MenuItemModeValue = "default" | "inverse";
 
-export interface MenuBarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface MenuItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;
   /** When set, renders a `<button type="button">` instead of a link (e.g. open login modal). */
   buttonOnClick?: () => void;
   children?: React.ReactNode;
   /**
-   * Menu bar item state: "default", "hover", or "selected".
+   * Menu item state: "default", "hover", or "selected".
    * @default "default"
    */
-  state?: MenuBarItemStateValue;
+  state?: MenuItemStateValue;
   /**
-   * Menu bar item mode. Default mode has yellow text on dark background.
+   * Menu item mode. Default mode has yellow text on dark background.
    * Inverse mode has black text on yellow background (for folderTop variant).
    * @default "default"
    */
-  mode?: MenuBarItemModeValue;
+  mode?: MenuItemModeValue;
   /**
    * Whether to show an icon (for future icon support).
    * @default false
    */
   icon?: boolean;
   /**
-   * Menu bar item size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large".
+   * Menu item size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large".
    * @default "X Small"
    */
-  size?: MenuBarItemSizeValue;
+  size?: MenuItemSizeValue;
   className?: string;
   disabled?: boolean;
   /**
@@ -45,7 +45,7 @@ export interface MenuBarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorE
   ariaLabel?: string;
 }
 
-export interface MenuBarItemViewProps {
+export interface MenuItemViewProps {
   href: string;
   buttonOnClick?: () => void;
   children?: React.ReactNode;
diff --git a/app/components/navigation/MenuBarItem/MenuBarItem.view.tsx b/app/components/navigation/MenuItem/MenuItem.view.tsx
similarity index 74%
rename from app/components/navigation/MenuBarItem/MenuBarItem.view.tsx
rename to app/components/navigation/MenuItem/MenuItem.view.tsx
index 037c1f0..7b57aaf 100644
--- a/app/components/navigation/MenuBarItem/MenuBarItem.view.tsx
+++ b/app/components/navigation/MenuItem/MenuItem.view.tsx
@@ -1,14 +1,14 @@
 import { memo } from "react";
-import type { MenuBarItemViewProps } from "./MenuBarItem.types";
+import type { MenuItemViewProps } from "./MenuItem.types";
 
-function MenuBarItemView({
+function MenuItemView({
   href,
   buttonOnClick,
   children,
   disabled,
   combinedStyles,
   accessibilityProps,
-}: MenuBarItemViewProps) {
+}: MenuItemViewProps) {
   if (disabled) {
     return (
       <span className={combinedStyles} {...accessibilityProps}>
@@ -37,6 +37,6 @@ function MenuBarItemView({
   );
 }
 
-MenuBarItemView.displayName = "MenuBarItemView";
+MenuItemView.displayName = "MenuItemView";
 
-export default memo(MenuBarItemView);
+export default memo(MenuItemView);
diff --git a/app/components/navigation/MenuItem/index.tsx b/app/components/navigation/MenuItem/index.tsx
new file mode 100644
index 0000000..869d1e4
--- /dev/null
+++ b/app/components/navigation/MenuItem/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./MenuItem.container";
+export type { MenuItemProps } from "./MenuItem.types";
diff --git a/app/components/navigation/TopNav/TopNav.container.tsx b/app/components/navigation/Top/Top.container.tsx
similarity index 77%
rename from app/components/navigation/TopNav/TopNav.container.tsx
rename to app/components/navigation/Top/Top.container.tsx
index bf7c64a..b32a525 100644
--- a/app/components/navigation/TopNav/TopNav.container.tsx
+++ b/app/components/navigation/Top/Top.container.tsx
@@ -4,15 +4,31 @@ import { memo, useCallback } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { useAuthModal } from "../../../contexts/AuthModalContext";
 import { useTranslation } from "../../../contexts/MessagesContext";
-import MenuBarItem from "../MenuBarItem";
+import MenuItem from "../MenuItem";
 import Button from "../../buttons/Button";
-import AvatarContainer from "../../utility/AvatarContainer";
-import Avatar from "../../icons/Avatar";
+import AvatarContainer from "../../asset/AvatarContainer";
+import Avatar from "../../asset/Avatar";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import { clearAnonymousCreateFlowStorage } from "../../../(app)/create/utils/anonymousDraftStorage";
 import { clearCoreValueDetailsLocalStorage } from "../../../(app)/create/utils/coreValueDetailsLocalStorage";
-import { TopNavView } from "./TopNav.view";
-import type { TopNavProps, NavSize } from "./TopNav.types";
+import { TopView } from "./Top.view";
+import type { TopProps, NavSize } from "./Top.types";
+
+type MenuClusterSize = "X Small" | "Small" | "Medium" | "Large" | "X Large";
+
+/** Map responsive `NavSize` breakpoints to Figma menu item sizes (shared by nav links + login). */
+const NAV_SIZE_TO_MENU_ITEM_SIZE: Record<NavSize, MenuClusterSize> = {
+  default: "Small",
+  xsmall: "X Small",
+  xsmallUseCases: "X Small",
+  home: "X Small",
+  homeMd: "Medium",
+  homeUseCases: "Small",
+  large: "Large",
+  largeUseCases: "Large",
+  homeXlarge: "X Large",
+  xlarge: "X Large",
+};
 
 export const avatarImages = [
   { src: getAssetPath(ASSETS.AVATAR_1), alt: "Avatar 1" },
@@ -20,7 +36,7 @@ export const avatarImages = [
   { src: getAssetPath(ASSETS.AVATAR_3), alt: "Avatar 3" },
 ];
 
-const TopNavContainer = memo<TopNavProps>(
+const TopContainer = memo<TopProps>(
   ({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
     const pathname = usePathname();
     const router = useRouter();
@@ -28,7 +44,7 @@ const TopNavContainer = memo<TopNavProps>(
     const t = useTranslation("header");
 
     /**
-     * TopNav is hidden on `/create` routes by ConditionalNavigationClient, so
+     * `Top` is hidden on `/create` routes by ConditionalNavigationClient, so
      * this button is always clicked from outside the wizard — there is no
      * mounted CreateFlowProvider to reset. Wiping the anonymous draft keys
      * here guarantees a fresh start; the provider that mounts on `/create`
@@ -68,35 +84,15 @@ const TopNavContainer = memo<TopNavProps>(
     ];
 
     const renderNavigationItems = (size: NavSize) => {
-      // Map NavSize to Figma MenuBarItem sizes
-      const sizeMap: Record<
-        NavSize,
-        "X Small" | "Small" | "Medium" | "Large" | "X Large"
-      > = {
-        default: "Small",
-        xsmall: "X Small",
-        xsmallUseCases: "X Small",
-        home: "X Small",
-        homeMd: "Medium",
-        homeUseCases: "Small",
-        large: "Large",
-        largeUseCases: "Large",
-        homeXlarge: "X Large",
-        xlarge: "X Large",
-      };
-
-      // Determine mode based on folderTop
       const mode = folderTop ? "inverse" : "default";
 
       return navigationItems.map((item, index) => {
-        // Map size to Figma size
-        let itemSize = sizeMap[size] || "Small";
+        const itemSize = NAV_SIZE_TO_MENU_ITEM_SIZE[size];
 
-        // Pass reducedPadding for "use cases" button (item with extraPadding: true)
         const isUseCases = item.extraPadding === true;
 
         return (
-          <MenuBarItem
+          <MenuItem
             key={index}
             href={item.href}
             size={itemSize}
@@ -109,7 +105,7 @@ const TopNavContainer = memo<TopNavProps>(
             )}
           >
             {item.text}
-          </MenuBarItem>
+          </MenuItem>
         );
       });
     };
@@ -133,22 +129,7 @@ const TopNavContainer = memo<TopNavProps>(
     };
 
     const renderLoginButton = (size: NavSize) => {
-      // Map NavSize to Figma MenuBarItem sizes
-      const sizeMap: Record<
-        NavSize,
-        "X Small" | "Small" | "Medium" | "Large" | "X Large"
-      > = {
-        default: "Small",
-        xsmall: "X Small",
-        xsmallUseCases: "X Small",
-        home: "X Small",
-        homeMd: "Medium",
-        homeUseCases: "Small",
-        large: "Large",
-        largeUseCases: "Large",
-        homeXlarge: "X Large",
-        xlarge: "X Large",
-      };
+      const itemSize = NAV_SIZE_TO_MENU_ITEM_SIZE[size];
 
       // Determine mode based on folderTop and breakpoint size
       // folderTop: inverse mode (black text) for smallest breakpoints (xsmall/home)
@@ -167,20 +148,20 @@ const TopNavContainer = memo<TopNavProps>(
 
       if (loggedIn) {
         return (
-          <MenuBarItem
+          <MenuItem
             href="/profile"
-            size={sizeMap[size] || "Small"}
+            size={itemSize}
             mode={mode}
             state={navSelected ? "selected" : "default"}
             ariaLabel={ariaLabel}
           >
             {label}
-          </MenuBarItem>
+          </MenuItem>
         );
       }
 
       return (
-        <MenuBarItem
+        <MenuItem
           buttonOnClick={() =>
             openLogin({
               variant: "default",
@@ -189,13 +170,13 @@ const TopNavContainer = memo<TopNavProps>(
             })
           }
           href="/login"
-          size={sizeMap[size] || "Small"}
+          size={itemSize}
           mode={mode}
           state={navSelected ? "selected" : "default"}
           ariaLabel={ariaLabel}
         >
           {label}
-        </MenuBarItem>
+        </MenuItem>
       );
     };
 
@@ -223,7 +204,7 @@ const TopNavContainer = memo<TopNavProps>(
     };
 
     return (
-      <TopNavView
+      <TopView
         folderTop={folderTop}
         loggedIn={loggedIn}
         profile={profile}
@@ -238,6 +219,6 @@ const TopNavContainer = memo<TopNavProps>(
   },
 );
 
-TopNavContainer.displayName = "TopNav";
+TopContainer.displayName = "Top";
 
-export default TopNavContainer;
+export default TopContainer;
diff --git a/app/components/navigation/TopNav/TopNav.types.ts b/app/components/navigation/Top/Top.types.ts
similarity index 94%
rename from app/components/navigation/TopNav/TopNav.types.ts
rename to app/components/navigation/Top/Top.types.ts
index e786e20..c394f4f 100644
--- a/app/components/navigation/TopNav/TopNav.types.ts
+++ b/app/components/navigation/Top/Top.types.ts
@@ -1,6 +1,6 @@
 import type React from "react";
 
-export interface TopNavProps {
+export interface TopProps {
   className?: string;
   size?: "320-429" | "430-639" | "640-1023" | "1024-1440" | "1440+";
   loggedIn?: boolean;
@@ -21,7 +21,7 @@ export type NavSize =
   | "homeXlarge"
   | "xlarge";
 
-export interface TopNavViewProps {
+export interface TopViewProps {
   folderTop: boolean;
   loggedIn: boolean;
   profile: boolean;
diff --git a/app/components/navigation/TopNav/TopNav.view.tsx b/app/components/navigation/Top/Top.view.tsx
similarity index 87%
rename from app/components/navigation/TopNav/TopNav.view.tsx
rename to app/components/navigation/Top/Top.view.tsx
index b99c983..c6f11fd 100644
--- a/app/components/navigation/TopNav/TopNav.view.tsx
+++ b/app/components/navigation/Top/Top.view.tsx
@@ -4,12 +4,12 @@ import { memo } from "react";
 import Script from "next/script";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import { getAssetPath } from "../../../../lib/assetUtils";
-import MenuBar from "../MenuBar";
-import type { TopNavViewProps } from "./TopNav.types";
+import Menu from "../Menu";
+import type { TopViewProps } from "./Top.types";
 
-import Logo from "../../asset/logo";
+import Logo from "../../asset/Logo";
 
-function TopNavView({
+function TopView({
   folderTop,
   loggedIn: _loggedIn,
   profile: _profile,
@@ -19,7 +19,7 @@ function TopNavView({
   renderNavigationItems,
   renderLoginButton,
   renderCreateRuleButton,
-}: TopNavViewProps) {
+}: TopViewProps) {
   const t = useTranslation(folderTop ? "homeHeader" : "header");
 
   // Render folderTop variant (HomeHeader style)
@@ -27,7 +27,7 @@ function TopNavView({
     return (
       <>
         <Script
-          id="top-nav-schema"
+          id="top-navigation-schema"
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
         />
@@ -50,12 +50,12 @@ function TopNavView({
                 palette={folderTop ? "inverse" : "default"}
               />
 
-              {/* XSmall menu bar - positioned next to logo */}
+              {/* XSmall menu — positioned next to logo */}
               <div className="block sm:hidden -me-[2px]">
-                <MenuBar size="X Small">
+                <Menu size="X Small">
                   {renderNavigationItems("xsmall")}
                   {logIn && renderLoginButton("xsmall")}
-                </MenuBar>
+                </Menu>
               </div>
 
               {/* Decorative Union images for tab appearance */}
@@ -84,31 +84,31 @@ function TopNavView({
 
             {/* Navigation Links - Centered in header for SM and up */}
             <div className="absolute left-1/2 transform -translate-x-1/2 hidden sm:block">
-              {/* 430-639px (sm: breakpoint): MenuBar X Small */}
+              {/* 430-639px (sm: breakpoint): Menu X Small */}
               <div className="hidden sm:block md:hidden">
-                <MenuBar size="X Small">
+                <Menu size="X Small">
                   {renderNavigationItems("xsmall")}
                   {logIn && renderLoginButton("xsmall")}
-                </MenuBar>
+                </Menu>
               </div>
 
-              {/* 640-1023px (md: breakpoint): MenuBar Small */}
+              {/* 640-1023px (md: breakpoint): Menu Small */}
               <div className="hidden md:block lg:hidden">
-                <MenuBar size="Small">
+                <Menu size="Small">
                   {renderNavigationItems("homeMd")}
-                </MenuBar>
+                </Menu>
               </div>
 
-              {/* 1024-1440px (lg: breakpoint): MenuBar Large */}
+              {/* 1024-1440px (lg: breakpoint): Menu Large */}
               <div className="hidden lg:block xl:hidden">
-                <MenuBar size="Large">{renderNavigationItems("large")}</MenuBar>
+                <Menu size="Large">{renderNavigationItems("large")}</Menu>
               </div>
 
-              {/* 1440px+ (xl: breakpoint): MenuBar X Large */}
+              {/* 1440px+ (xl: breakpoint): Menu X Large */}
               <div className="hidden xl:block">
-                <MenuBar size="X Large">
+                <Menu size="X Large">
                   {renderNavigationItems("homeXlarge")}
-                </MenuBar>
+                </Menu>
               </div>
             </div>
 
@@ -153,7 +153,7 @@ function TopNavView({
    * Standard marketing / app top nav.
    * Figma: "Navigation / Top" (Community-Rule-System, node 22078-808559) — horizontal
    * padding, logo ~200px left, menu cluster centered in the bar (`left-1/2` + translate),
-   * log in + create rule on the right. Breakpoints and MenuBar sizes unchanged from prior map.
+   * log in + create rule on the right. Breakpoints and Menu sizes unchanged from prior map.
    */
   // Render standard variant (Header style)
   return (
@@ -182,7 +182,7 @@ function TopNavView({
         >
           <div
             className="relative z-20 min-w-0 shrink-0 sm:w-[200px] sm:max-w-[200px] sm:shrink-0"
-            data-topnav="logo"
+            data-top="logo"
           >
             <Logo
               size={logoSize}
@@ -194,51 +194,51 @@ function TopNavView({
           {/* XSmall: nav + login in flow (flex-1) — same as before */}
           <div
             className="flex min-w-0 flex-1 items-center justify-end sm:hidden"
-            data-topnav="nav-xs-flow"
+            data-top="nav-xs-flow"
           >
             <div className="block" data-testid="nav-xs">
-              <MenuBar size="X Small">
+              <Menu size="X Small">
                 {renderNavigationItems("xsmall")}
                 {logIn && renderLoginButton("xsmall")}
-              </MenuBar>
+              </Menu>
             </div>
           </div>
 
           {/* sm+ — Figma: nav cluster centered in bar (not between logo and actions) */}
           <div
             className="pointer-events-none hidden sm:absolute sm:left-1/2 sm:top-1/2 sm:z-10 sm:flex sm:-translate-x-1/2 sm:-translate-y-1/2 sm:items-center sm:justify-center"
-            data-topnav="nav-center"
+            data-top="nav-center"
           >
             <div
               className="pointer-events-auto hidden sm:flex md:hidden"
               data-testid="nav-sm"
             >
-              <MenuBar size="X Small">
+              <Menu size="X Small">
                 {renderNavigationItems("xsmall")}
                 {logIn && renderLoginButton("xsmall")}
-              </MenuBar>
+              </Menu>
             </div>
             <div
               className="pointer-events-auto hidden md:flex lg:hidden"
               data-testid="nav-md"
             >
-              <MenuBar size="X Small">
+              <Menu size="X Small">
                 {renderNavigationItems("xsmall")}
-              </MenuBar>
+              </Menu>
             </div>
             <div
               className="pointer-events-auto hidden lg:flex xl:hidden"
               data-testid="nav-lg"
             >
-              <MenuBar size="Large">{renderNavigationItems("large")}</MenuBar>
+              <Menu size="Large">{renderNavigationItems("large")}</Menu>
             </div>
             <div
               className="pointer-events-auto hidden xl:flex"
               data-testid="nav-xl"
             >
-              <MenuBar size="X Large">
+              <Menu size="X Large">
                 {renderNavigationItems("xlarge")}
-              </MenuBar>
+              </Menu>
             </div>
           </div>
 
@@ -259,9 +259,9 @@ function TopNavView({
             {/* Medium breakpoint */}
             <div className="hidden md:block lg:hidden" data-testid="auth-md">
               <div className="flex items-center gap-[var(--spacing-measures-spacing-010)]">
-                <MenuBar size="Small">
+                <Menu size="Small">
                   {logIn && renderLoginButton("xsmall")}
-                </MenuBar>
+                </Menu>
                 {renderCreateRuleButton("xsmall", "medium", "medium")}
               </div>
             </div>
@@ -269,9 +269,9 @@ function TopNavView({
             {/* Large breakpoint */}
             <div className="hidden lg:block xl:hidden" data-testid="auth-lg">
               <div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
-                <MenuBar size="Large">
+                <Menu size="Large">
                   {logIn && renderLoginButton("large")}
-                </MenuBar>
+                </Menu>
                 {renderCreateRuleButton("large", "xlarge", "xlarge")}
               </div>
             </div>
@@ -279,9 +279,9 @@ function TopNavView({
             {/* XLarge breakpoint */}
             <div className="hidden xl:block" data-testid="auth-xl">
               <div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
-                <MenuBar size="X Large">
+                <Menu size="X Large">
                   {logIn && renderLoginButton("xlarge")}
-                </MenuBar>
+                </Menu>
                 {renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
               </div>
             </div>
@@ -292,7 +292,7 @@ function TopNavView({
   );
 }
 
-TopNavView.displayName = "TopNavView";
+TopView.displayName = "TopView";
 
-export default memo(TopNavView);
-export { TopNavView };
+export default memo(TopView);
+export { TopView };
diff --git a/app/components/navigation/TopNav/TopNavWithPathname.tsx b/app/components/navigation/Top/TopWithPathname.tsx
similarity index 77%
rename from app/components/navigation/TopNav/TopNavWithPathname.tsx
rename to app/components/navigation/Top/TopWithPathname.tsx
index ba6d1e0..13faa77 100644
--- a/app/components/navigation/TopNav/TopNavWithPathname.tsx
+++ b/app/components/navigation/Top/TopWithPathname.tsx
@@ -2,17 +2,17 @@
 
 import { memo, useCallback, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
-import TopNav from "./TopNav.container";
-import type { TopNavProps } from "./TopNav.types";
+import Top from "./Top.container";
+import type { TopProps } from "./Top.types";
 import { fetchAuthSession } from "../../../../lib/create/api";
 
-export type TopNavWithPathnameProps = Omit<TopNavProps, "folderTop"> & {
+export type TopWithPathnameProps = Omit<TopProps, "folderTop"> & {
   /** From Server Component (`getNavAuthSignedIn`); matches first HTML paint. */
   initialSignedIn?: boolean;
 };
 
 /**
- * TopNav wrapper: `folderTop` from pathname; Log in vs Profile from session.
+ * `Top` wrapper: `folderTop` from pathname; Log in vs Profile from session.
  *
  * **SSR:** Parent passes `initialSignedIn` from `getSessionUser()` so the hydrated
  * header matches the cookie (Next.js pattern for HttpOnly session UI).
@@ -20,8 +20,8 @@ export type TopNavWithPathnameProps = Omit<TopNavProps, "folderTop"> & {
  * **Client:** Refetch on pathname change (magic-link redirect, stale layout after
  * `router.refresh()`), **popstate** / **pageshow** `persisted` (bfcache / back).
  */
-const TopNavWithPathname = memo<TopNavWithPathnameProps>((props) => {
-  const { initialSignedIn = false, ...topNavRest } = props;
+const TopWithPathname = memo<TopWithPathnameProps>((props) => {
+  const { initialSignedIn = false, ...topRest } = props;
   const pathname = usePathname();
   const isHomePage = pathname === "/";
   const [loggedIn, setLoggedIn] = useState(initialSignedIn);
@@ -69,9 +69,9 @@ const TopNavWithPathname = memo<TopNavWithPathnameProps>((props) => {
     return () => window.removeEventListener("popstate", onPopState);
   }, [syncSession]);
 
-  return <TopNav {...topNavRest} folderTop={isHomePage} loggedIn={loggedIn} />;
+  return <Top {...topRest} folderTop={isHomePage} loggedIn={loggedIn} />;
 });
 
-TopNavWithPathname.displayName = "TopNavWithPathname";
+TopWithPathname.displayName = "TopWithPathname";
 
-export default TopNavWithPathname;
+export default TopWithPathname;
diff --git a/app/components/navigation/Top/index.tsx b/app/components/navigation/Top/index.tsx
new file mode 100644
index 0000000..bedab18
--- /dev/null
+++ b/app/components/navigation/Top/index.tsx
@@ -0,0 +1,3 @@
+export { default } from "./Top.container";
+export type { TopProps, NavSize } from "./Top.types";
+export { avatarImages } from "./Top.container";
diff --git a/app/components/navigation/TopNav/index.tsx b/app/components/navigation/TopNav/index.tsx
deleted file mode 100644
index b8b6507..0000000
--- a/app/components/navigation/TopNav/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default } from "./TopNav.container";
-export type { TopNavProps, NavSize } from "./TopNav.types";
-export { avatarImages } from "./TopNav.container";
diff --git a/app/components/sections/CardSteps/CardSteps.container.tsx b/app/components/sections/CardSteps/CardSteps.container.tsx
new file mode 100644
index 0000000..105af48
--- /dev/null
+++ b/app/components/sections/CardSteps/CardSteps.container.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { memo } from "react";
+import { useSchemaData } from "../../../hooks";
+import CardStepsView from "./CardSteps.view";
+import type { CardStepsProps } from "./CardSteps.types";
+
+/**
+ * Figma: "Community Rule System" → Sections → SectionCardSteps ([17434:19695](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17434-19695)).
+ * Composes **`cards/Step`** (Figma Card / Step), not **`progress/Stepper`**.
+ */
+const CardStepsContainer = memo<CardStepsProps>(
+  ({ title, subtitle, steps, headingDesktopLines }) => {
+    const schemaData = useSchemaData({
+      type: "HowTo",
+      name: title,
+      description: subtitle,
+      steps: steps.map((item) => ({
+        name: item.text,
+        text: item.text,
+      })),
+    });
+
+    const schemaJson = JSON.stringify(schemaData);
+
+    return (
+      <CardStepsView
+        title={title}
+        subtitle={subtitle}
+        steps={steps}
+        headingDesktopLines={headingDesktopLines}
+        schemaJson={schemaJson}
+      />
+    );
+  },
+);
+
+CardStepsContainer.displayName = "CardSteps";
+
+export default CardStepsContainer;
diff --git a/app/components/sections/CardSteps/CardSteps.types.ts b/app/components/sections/CardSteps/CardSteps.types.ts
new file mode 100644
index 0000000..036f67e
--- /dev/null
+++ b/app/components/sections/CardSteps/CardSteps.types.ts
@@ -0,0 +1,18 @@
+/** One row in the section grid; rendered with `cards/Step`. */
+export interface CardStepsItem {
+  text: string;
+  iconShape?: string;
+  iconColor?: string;
+}
+
+export interface CardStepsProps {
+  title: string;
+  subtitle: string;
+  steps: CardStepsItem[];
+  /** Large-screen heading split: line 1–3 (e.g. How / CommunityRule / helps). */
+  headingDesktopLines?: readonly [string, string, string];
+}
+
+export interface CardStepsViewProps extends CardStepsProps {
+  schemaJson: string;
+}
diff --git a/app/components/sections/CardSteps/CardSteps.view.tsx b/app/components/sections/CardSteps/CardSteps.view.tsx
new file mode 100644
index 0000000..a679c19
--- /dev/null
+++ b/app/components/sections/CardSteps/CardSteps.view.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useTranslation } from "../../../contexts/MessagesContext";
+import SectionHeader from "../../type/SectionHeader";
+import Step from "../../cards/Step";
+import Button from "../../buttons/Button";
+import type { CardStepsViewProps } from "./CardSteps.types";
+
+function CardStepsView({
+  title,
+  subtitle,
+  steps,
+  headingDesktopLines,
+  schemaJson,
+}: CardStepsViewProps) {
+  const t = useTranslation();
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: schemaJson }}
+      />
+      <section className="bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]">
+        <div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
+          <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-032)] sm:gap-y-[var(--spacing-scale-048)] lg:gap-y-[var(--spacing-scale-056)]">
+            <div>
+              <SectionHeader
+                variant="multi-line"
+                title={title}
+                subtitle={subtitle}
+                titleLg={t("cardSteps.titleLg")}
+                stackedDesktopLines={headingDesktopLines}
+              />
+            </div>
+
+            <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]">
+              {steps.map((item, index) => (
+                <Step
+                  key={index}
+                  number={index + 1}
+                  text={item.text}
+                  iconShape={item.iconShape}
+                  iconColor={item.iconColor}
+                />
+              ))}
+            </div>
+
+            <div className="text-center">
+              <Button buttonType="outline" palette="default" size="large">
+                {t("cardSteps.buttons.seeHowItWorks")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default CardStepsView;
diff --git a/app/components/sections/CardSteps/index.tsx b/app/components/sections/CardSteps/index.tsx
new file mode 100644
index 0000000..ef6d7f1
--- /dev/null
+++ b/app/components/sections/CardSteps/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./CardSteps.container";
+export * from "./CardSteps.types";
diff --git a/app/components/sections/CommunityRuleDocument/CommunityRuleDocument.types.ts b/app/components/sections/CommunityRuleDocument/CommunityRuleDocument.types.ts
deleted file mode 100644
index b812bb7..0000000
--- a/app/components/sections/CommunityRuleDocument/CommunityRuleDocument.types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export interface CommunityRuleDocumentEntry {
-  title: string;
-  body: string;
-}
-
-export interface CommunityRuleDocumentSection {
-  categoryName: string;
-  entries: CommunityRuleDocumentEntry[];
-}
-
-export interface CommunityRuleDocumentProps {
-  sections: CommunityRuleDocumentSection[];
-  className?: string;
-  /** When true, wrap in white background with left teal bar (small breakpoint). */
-  useCardStyle?: boolean;
-}
diff --git a/app/components/sections/CommunityRuleDocument/CommunityRuleDocument.view.tsx b/app/components/sections/CommunityRuleDocument/CommunityRuleDocument.view.tsx
deleted file mode 100644
index 35db080..0000000
--- a/app/components/sections/CommunityRuleDocument/CommunityRuleDocument.view.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import type { CommunityRuleDocumentProps } from "./CommunityRuleDocument.types";
-
-const SECTION_GAP = "var(--measures-spacing-1200, 64px)";
-const TEAL_BG = "var(--color-teal-teal50, #c9fef9)";
-const SECTION_LINE_COLOR = "var(--color-border-default-tertiary, #464646)";
-
-function CommunityRuleDocumentView({
-  sections,
-  className = "",
-  useCardStyle = false,
-}: CommunityRuleDocumentProps) {
-  const rootClass = useCardStyle
-    ? `rounded-[12px] bg-white pl-3 border-l-4 ${className}`
-    : className;
-  const rootStyle = useCardStyle ? { borderLeftColor: TEAL_BG } : undefined;
-
-  const sectionLineStyle = useCardStyle
-    ? undefined
-    : { borderLeftColor: SECTION_LINE_COLOR };
-
-  return (
-    <div
-      className={`flex flex-col min-w-0 ${rootClass}`}
-      style={{ gap: SECTION_GAP, ...rootStyle }}
-    >
-      {sections.map((section, sectionIndex) => (
-        <div
-          key={sectionIndex}
-          className={`flex flex-col min-w-0 ${!useCardStyle ? "border-l pl-3" : ""}`}
-          style={sectionLineStyle}
-        >
-          {/* Section content: line runs full height of this block via border-left */}
-          <div className="flex flex-1 flex-col gap-4 min-w-0">
-            <p className="font-inter font-medium text-[16px] leading-[20px] text-[var(--color-content-invert-secondary,#1f1f1f)] shrink-0">
-              {section.categoryName}
-            </p>
-            <div className="flex flex-col min-w-0" style={{ gap: "24px" }}>
-              {section.entries.map((entry, entryIndex) => (
-                <div
-                  key={entryIndex}
-                  className="flex flex-col min-w-0"
-                  style={{ gap: "6px" }}
-                >
-                  <p className="font-inter font-bold text-[20px] leading-[28px] text-[var(--color-content-invert-primary)] shrink-0">
-                    {entry.title}
-                  </p>
-                  <p className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-primary)] shrink-0">
-                    {entry.body}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-CommunityRuleDocumentView.displayName = "CommunityRuleDocumentView";
-
-export default memo(CommunityRuleDocumentView);
diff --git a/app/components/sections/CommunityRuleDocument/index.tsx b/app/components/sections/CommunityRuleDocument/index.tsx
deleted file mode 100644
index c184ed7..0000000
--- a/app/components/sections/CommunityRuleDocument/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./CommunityRuleDocument.view";
-export type { CommunityRuleDocumentProps } from "./CommunityRuleDocument.types";
diff --git a/app/components/sections/FeatureGrid/FeatureGrid.view.tsx b/app/components/sections/FeatureGrid/FeatureGrid.view.tsx
index d24d178..48f8c14 100644
--- a/app/components/sections/FeatureGrid/FeatureGrid.view.tsx
+++ b/app/components/sections/FeatureGrid/FeatureGrid.view.tsx
@@ -2,7 +2,7 @@
 
 import { useTranslation } from "../../../contexts/MessagesContext";
 import ContentLockup from "../../type/ContentLockup";
-import MiniCard from "../../cards/MiniCard";
+import Mini from "../../cards/Mini";
 import type { FeatureGridViewProps } from "./FeatureGrid.types";
 
 function FeatureGridView({
@@ -37,10 +37,10 @@ function FeatureGridView({
             />
           </div>
 
-          {/* MiniCard Grid */}
+          {/* Mini grid */}
           <div className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)] lg:mt-0 lg:flex-grow lg:shrink-0">
             {features.map((feature, index) => (
-              <MiniCard
+              <Mini
                 key={index}
                 backgroundColor={feature.backgroundColor}
                 labelLine1={feature.labelLine1}
diff --git a/app/components/sections/GovernanceTemplateGrid/GovernanceTemplateGrid.tsx b/app/components/sections/GovernanceTemplateGrid/GovernanceTemplateGrid.tsx
index beadfb9..339ab52 100644
--- a/app/components/sections/GovernanceTemplateGrid/GovernanceTemplateGrid.tsx
+++ b/app/components/sections/GovernanceTemplateGrid/GovernanceTemplateGrid.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react";
 import Image from "next/image";
 import { useMediaQuery } from "../../../hooks/useMediaQuery";
-import RuleCard from "../../cards/RuleCard";
+import Rule from "../../cards/Rule";
 import { getAssetPath } from "../../../../lib/assetUtils";
 import type { GovernanceTemplateCatalogEntry } from "../../../../lib/templates/governanceTemplateCatalog";
 
@@ -53,7 +53,7 @@ export function GovernanceTemplateGrid({
       `}
     >
       {entries.map((card) => (
-        <RuleCard
+        <Rule
           key={card.slug}
           title={card.title}
           description={card.description}
diff --git a/app/components/sections/NumberedCards/NumberedCards.container.tsx b/app/components/sections/NumberedCards/NumberedCards.container.tsx
deleted file mode 100644
index 3273e34..0000000
--- a/app/components/sections/NumberedCards/NumberedCards.container.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { useSchemaData } from "../../../hooks";
-import NumberedCardsView from "./NumberedCards.view";
-import type { NumberedCardsProps } from "./NumberedCards.types";
-
-const NumberedCardsContainer = memo<NumberedCardsProps>(
-  ({ title, subtitle, cards }) => {
-    const schemaData = useSchemaData({
-      type: "HowTo",
-      name: title,
-      description: subtitle,
-      steps: cards.map((card) => ({
-        name: card.text,
-        text: card.text,
-      })),
-    });
-
-    const schemaJson = JSON.stringify(schemaData);
-
-    return (
-      <NumberedCardsView
-        title={title}
-        subtitle={subtitle}
-        cards={cards}
-        schemaJson={schemaJson}
-      />
-    );
-  },
-);
-
-NumberedCardsContainer.displayName = "NumberedCards";
-
-export default NumberedCardsContainer;
diff --git a/app/components/sections/NumberedCards/NumberedCards.types.ts b/app/components/sections/NumberedCards/NumberedCards.types.ts
deleted file mode 100644
index 6250610..0000000
--- a/app/components/sections/NumberedCards/NumberedCards.types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export interface Card {
-  text: string;
-  iconShape?: string;
-  iconColor?: string;
-}
-
-export interface NumberedCardsProps {
-  title: string;
-  subtitle: string;
-  cards: Card[];
-}
-
-export interface NumberedCardsViewProps extends NumberedCardsProps {
-  schemaJson: string;
-}
diff --git a/app/components/sections/NumberedCards/NumberedCards.view.tsx b/app/components/sections/NumberedCards/NumberedCards.view.tsx
deleted file mode 100644
index dc8a660..0000000
--- a/app/components/sections/NumberedCards/NumberedCards.view.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-"use client";
-
-import { useTranslation } from "../../../contexts/MessagesContext";
-import SectionHeader from "../SectionHeader";
-import NumberCard from "../../cards/NumberCard";
-import Button from "../../buttons/Button";
-import type { NumberedCardsViewProps } from "./NumberedCards.types";
-
-function NumberedCardsView({
-  title,
-  subtitle,
-  cards,
-  schemaJson,
-}: NumberedCardsViewProps) {
-  const t = useTranslation();
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: schemaJson }}
-      />
-      <section className="bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]">
-        <div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
-          <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]">
-            {/* Section Header */}
-            <div>
-              <SectionHeader
-                title={title}
-                subtitle={subtitle}
-                titleLg={t("numberedCards.titleLg")}
-              />
-            </div>
-
-            {/* Cards Container */}
-            <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]">
-              {cards.map((card, index) => (
-                <NumberCard
-                  key={index}
-                  number={index + 1}
-                  text={card.text}
-                  iconShape={card.iconShape}
-                  iconColor={card.iconColor}
-                />
-              ))}
-            </div>
-
-            {/* Call to Action Button */}
-            <div className="text-center sm:text-left lg:text-center">
-              {/* Filled button for xsm and sm breakpoints */}
-              <div className="block lg:hidden">
-                <Button buttonType="filled" palette="default" size="large">
-                  {t("numberedCards.buttons.createCommunityRule")}
-                </Button>
-              </div>
-              {/* Outline button for lg and xlg breakpoints */}
-              <div className="hidden lg:block">
-                <Button buttonType="outline" palette="default" size="large">
-                  {t("numberedCards.buttons.seeHowItWorks")}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </>
-  );
-}
-
-export default NumberedCardsView;
diff --git a/app/components/sections/NumberedCards/index.tsx b/app/components/sections/NumberedCards/index.tsx
deleted file mode 100644
index 1f02634..0000000
--- a/app/components/sections/NumberedCards/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./NumberedCards.container";
-export * from "./NumberedCards.types";
diff --git a/app/components/sections/RuleStack/RuleStack.view.tsx b/app/components/sections/RuleStack/RuleStack.view.tsx
index ce041f9..d6b7842 100644
--- a/app/components/sections/RuleStack/RuleStack.view.tsx
+++ b/app/components/sections/RuleStack/RuleStack.view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useTranslation } from "../../../contexts/MessagesContext";
-import SectionHeader from "../SectionHeader";
+import SectionHeader from "../../type/SectionHeader";
 import Button from "../../buttons/Button";
 import { GovernanceTemplateGrid } from "../GovernanceTemplateGrid";
 import { GovernanceTemplateGridSkeleton } from "../GovernanceTemplateGrid/GovernanceTemplateGridSkeleton";
diff --git a/app/components/type/CommunityRule/CommunityRule.types.ts b/app/components/type/CommunityRule/CommunityRule.types.ts
new file mode 100644
index 0000000..0dc9e21
--- /dev/null
+++ b/app/components/type/CommunityRule/CommunityRule.types.ts
@@ -0,0 +1,28 @@
+/** Labeled paragraph group (Figma “Text” stacks under Membership / Decision-making, etc.). */
+export interface CommunityRuleLabeledBlock {
+  label: string;
+  body: string;
+}
+
+export interface CommunityRuleEntry {
+  title: string;
+  /** Plain text; split on blank lines into paragraphs when rendering. */
+  body: string;
+  /**
+   * When set, rendered as Figma-style label + body stacks. If non-empty, takes
+   * precedence over {@link body} for main content (body may be empty).
+   */
+  blocks?: CommunityRuleLabeledBlock[];
+}
+
+export interface CommunityRuleSection {
+  categoryName: string;
+  entries: CommunityRuleEntry[];
+}
+
+export interface CommunityRuleProps {
+  sections: CommunityRuleSection[];
+  className?: string;
+  /** When true, wrap in white background with left teal bar (small breakpoint). */
+  useCardStyle?: boolean;
+}
diff --git a/app/components/type/CommunityRule/CommunityRule.view.tsx b/app/components/type/CommunityRule/CommunityRule.view.tsx
new file mode 100644
index 0000000..ef38ad5
--- /dev/null
+++ b/app/components/type/CommunityRule/CommunityRule.view.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { memo } from "react";
+import Section from "../Section";
+import TextBlock from "../TextBlock";
+import type { CommunityRuleProps } from "./CommunityRule.types";
+
+/**
+ * Figma: **Sections** canvas, “Community Rule” frame (16489:4507). Composes
+ * **`Section`** (22002:30757) + **`TextBlock`** (22001:29793); canonical code under **`type/CommunityRule`**.
+ */
+
+const SECTION_GAP = "var(--measures-spacing-1200, 64px)";
+const TEAL_BG = "var(--color-teal-teal50, #c9fef9)";
+
+function CommunityRuleView({
+  sections,
+  className = "",
+  useCardStyle = false,
+}: CommunityRuleProps) {
+  const rootClass = useCardStyle
+    ? `rounded-[12px] bg-white pl-3 border-l-4 ${className}`
+    : className;
+  const rootStyle = useCardStyle ? { borderLeftColor: TEAL_BG } : undefined;
+
+  return (
+    <div
+      className={`flex flex-col min-w-0 ${rootClass}`}
+      style={{ gap: SECTION_GAP, ...rootStyle }}
+    >
+      {sections.map((ruleSection, sectionIndex) => (
+        <Section
+          key={sectionIndex}
+          categoryName={ruleSection.categoryName}
+          showRail={!useCardStyle}
+        >
+          {ruleSection.entries.map((entry, entryIndex) => {
+            const hasBlocks = Boolean(entry.blocks?.length);
+            return (
+              <TextBlock
+                key={entryIndex}
+                title={entry.title}
+                body={hasBlocks ? undefined : entry.body}
+                rows={hasBlocks ? entry.blocks : undefined}
+              />
+            );
+          })}
+        </Section>
+      ))}
+    </div>
+  );
+}
+
+CommunityRuleView.displayName = "CommunityRuleView";
+
+export default memo(CommunityRuleView);
diff --git a/app/components/type/CommunityRule/index.tsx b/app/components/type/CommunityRule/index.tsx
new file mode 100644
index 0000000..d9ed029
--- /dev/null
+++ b/app/components/type/CommunityRule/index.tsx
@@ -0,0 +1,7 @@
+export { default } from "./CommunityRule.view";
+export type {
+  CommunityRuleProps,
+  CommunityRuleLabeledBlock,
+  CommunityRuleEntry,
+  CommunityRuleSection,
+} from "./CommunityRule.types";
diff --git a/app/components/type/HeaderLockup/HeaderLockup.view.tsx b/app/components/type/HeaderLockup/HeaderLockup.view.tsx
index 05ec729..a34c49e 100644
--- a/app/components/type/HeaderLockup/HeaderLockup.view.tsx
+++ b/app/components/type/HeaderLockup/HeaderLockup.view.tsx
@@ -46,7 +46,8 @@ function HeaderLockupView({
 
       {/* Description */}
       {description != null &&
-        !(typeof description === "string" && description.length === 0) && (
+        !(typeof description === "string" && description.length === 0) &&
+        (typeof description === "string" ? (
           <p
             className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 ${descriptionColorClass} text-ellipsis w-full whitespace-pre-wrap ${
               isLeft ? "" : "text-center"
@@ -56,7 +57,17 @@ function HeaderLockupView({
           >
             {description}
           </p>
-        )}
+        ) : (
+          <div
+            className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 ${descriptionColorClass} text-ellipsis w-full whitespace-pre-wrap ${
+              isLeft ? "" : "text-center"
+            } ${
+              isL ? "text-[18px] leading-[1.3]" : "text-[14px] leading-[20px]"
+            }`}
+          >
+            {description}
+          </div>
+        ))}
     </div>
   );
 }
diff --git a/app/components/utility/InputLabel/InputLabel.container.tsx b/app/components/type/InputLabel/InputLabel.container.tsx
similarity index 89%
rename from app/components/utility/InputLabel/InputLabel.container.tsx
rename to app/components/type/InputLabel/InputLabel.container.tsx
index 8679f6e..e084040 100644
--- a/app/components/utility/InputLabel/InputLabel.container.tsx
+++ b/app/components/type/InputLabel/InputLabel.container.tsx
@@ -5,7 +5,8 @@ import InputLabelView from "./InputLabel.view";
 import type { InputLabelProps } from "./InputLabel.types";
 
 /**
- * Figma: "Utility / InputLabel" (TODO(figma)). Reusable form-input label with
+ * Figma: "Utility / InputLabel"; canonical code under `type/`.
+ * Reusable form-input label with
  * optional asterisk, help icon, and helper text.
  */
 const InputLabelContainer = memo<InputLabelProps>(
diff --git a/app/components/utility/InputLabel/InputLabel.types.ts b/app/components/type/InputLabel/InputLabel.types.ts
similarity index 100%
rename from app/components/utility/InputLabel/InputLabel.types.ts
rename to app/components/type/InputLabel/InputLabel.types.ts
diff --git a/app/components/utility/InputLabel/InputLabel.view.tsx b/app/components/type/InputLabel/InputLabel.view.tsx
similarity index 100%
rename from app/components/utility/InputLabel/InputLabel.view.tsx
rename to app/components/type/InputLabel/InputLabel.view.tsx
diff --git a/app/components/utility/InputLabel/index.tsx b/app/components/type/InputLabel/index.tsx
similarity index 100%
rename from app/components/utility/InputLabel/index.tsx
rename to app/components/type/InputLabel/index.tsx
diff --git a/app/components/type/Section/Section.types.ts b/app/components/type/Section/Section.types.ts
new file mode 100644
index 0000000..8e59e56
--- /dev/null
+++ b/app/components/type/Section/Section.types.ts
@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+export interface SectionProps {
+  /** Category label (16px medium, invert secondary). */
+  categoryName: string;
+  /** When true, renders the 12px-gapped vertical rail like Figma Section (22002:30757). */
+  showRail?: boolean;
+  children: ReactNode;
+  className?: string;
+}
diff --git a/app/components/type/Section/Section.view.tsx b/app/components/type/Section/Section.view.tsx
new file mode 100644
index 0000000..38d3da2
--- /dev/null
+++ b/app/components/type/Section/Section.view.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { memo } from "react";
+import type { SectionProps } from "./Section.types";
+
+/**
+ * Figma: **Section** (22002:30757) — vertical rail + category + stacked content
+ * (typically **TextBlock** children inside Community Rule).
+ */
+
+const SECTION_LINE_COLOR = "var(--color-border-default-tertiary, #464646)";
+
+const CATEGORY_CLASS =
+  "font-inter font-medium text-[16px] leading-[20px] text-[var(--color-content-invert-secondary,#1f1f1f)] shrink-0 w-full min-w-0";
+
+function SectionView({
+  categoryName,
+  showRail = true,
+  children,
+  className = "",
+}: SectionProps) {
+  const inner = (
+    <div className="flex min-w-0 flex-1 flex-col gap-4" style={{ gap: "16px" }}>
+      <p className={CATEGORY_CLASS}>{categoryName}</p>
+      <div className="flex min-w-0 flex-col gap-6">{children}</div>
+    </div>
+  );
+
+  if (!showRail) {
+    return (
+      <div className={`flex min-w-0 flex-col ${className}`.trim()} data-name="Section">
+        {inner}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`flex min-w-0 items-stretch gap-3 ${className}`.trim()}
+      style={{ gap: "12px" }}
+      data-name="Section"
+    >
+      <div
+        className="w-px shrink-0 self-stretch"
+        style={{ backgroundColor: SECTION_LINE_COLOR }}
+        aria-hidden
+      />
+      {inner}
+    </div>
+  );
+}
+
+SectionView.displayName = "SectionView";
+
+export default memo(SectionView);
diff --git a/app/components/type/Section/index.tsx b/app/components/type/Section/index.tsx
new file mode 100644
index 0000000..d60ff29
--- /dev/null
+++ b/app/components/type/Section/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Section.view";
+export type { SectionProps } from "./Section.types";
diff --git a/app/components/sections/SectionHeader.tsx b/app/components/type/SectionHeader/SectionHeader.tsx
similarity index 53%
rename from app/components/sections/SectionHeader.tsx
rename to app/components/type/SectionHeader/SectionHeader.tsx
index 0d14e35..948e63e 100644
--- a/app/components/sections/SectionHeader.tsx
+++ b/app/components/type/SectionHeader/SectionHeader.tsx
@@ -1,28 +1,42 @@
 "use client";
 
 import { memo } from "react";
-
-export type SectionHeaderVariantValue = "default" | "multi-line";
+import type { SectionHeaderVariantValue } from "../../../../lib/propNormalization";
 
 interface SectionHeaderProps {
   title: string;
   subtitle: string;
   titleLg?: string;
   variant?: SectionHeaderVariantValue;
+  /** When set with `variant="multi-line"`, large screens show three title lines (Figma SectionCardSteps). */
+  stackedDesktopLines?: readonly [string, string, string];
 }
 
+/**
+ * Figma: **Type / SectionHeader** ([17411:10981](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17411-10981)).
+ * Responsive title + subtitle lockup: stacked on small viewports, split row from `lg` up.
+ */
 const SectionHeader = memo<SectionHeaderProps>(
-  ({ title, subtitle, titleLg, variant: variantProp = "default" }) => {
+  ({
+    title,
+    subtitle,
+    titleLg,
+    variant: variantProp = "default",
+    stackedDesktopLines,
+  }) => {
     const variant = variantProp;
+    const useStackedDesktop =
+      variant === "multi-line" && stackedDesktopLines != null;
+    const rowAlignClasses =
+      variant === "multi-line"
+        ? "lg:flex-row lg:justify-between lg:items-center xl:gap-[var(--spacing-scale-024)]"
+        : "lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--spacing-scale-024)]";
+
     return (
       <div
-        className={
-          variant === "multi-line"
-            ? "flex flex-col gap-[var(--spacing-scale-004)] w-full lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--spacing-scale-024)]"
-            : "flex flex-col gap-[var(--spacing-scale-004)] w-full lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--spacing-scale-024)]"
-        }
+        className={`flex flex-col gap-[var(--spacing-scale-004)] w-full ${rowAlignClasses}`}
       >
-        {/* Title Container - Left side (lg breakpoint) */}
+        {/* Title — left column at lg+ */}
         <div
           className={
             variant === "multi-line"
@@ -33,27 +47,35 @@ const SectionHeader = memo<SectionHeaderProps>(
           <h2
             className={
               variant === "multi-line"
-                ? "font-bricolage-grotesque font-bold text-[28px] leading-[36px] md:font-bold md:text-[32px] md:leading-[40px] lg:w-[410px] lg:text-left xl:text-[40px] xl:leading-[52px] text-[var(--color-content-default-primary)]"
+                ? "font-bricolage-grotesque font-bold text-[28px] leading-[36px] md:text-[32px] md:leading-[40px] lg:w-[410px] lg:text-left xl:text-[40px] xl:leading-[52px] text-[var(--color-content-default-primary)]"
                 : "font-bricolage-grotesque font-bold text-[28px] leading-[36px] sm:text-[32px] sm:leading-[40px] lg:text-[32px] lg:leading-[40px] lg:w-[369px] lg:pr-[var(--spacing-scale-096)] xl:text-[40px] xl:leading-[52px] xl:w-[452px] xl:pr-[var(--spacing-scale-096)] text-[var(--color-content-default-primary)]"
             }
           >
             <span className="block lg:hidden">{title}</span>
-            <span className="hidden lg:block">{titleLg || title}</span>
+            {useStackedDesktop ? (
+              <span className="hidden lg:block">
+                <span className="block">{stackedDesktopLines[0]}</span>
+                <span className="block">{stackedDesktopLines[1]}</span>
+                <span className="block">{stackedDesktopLines[2]}</span>
+              </span>
+            ) : (
+              <span className="hidden lg:block">{titleLg || title}</span>
+            )}
           </h2>
         </div>
 
-        {/* Subtitle Container */}
+        {/* Subtitle — right column at lg+ (Figma X Large / Large / stacked small) */}
         <div
           className={
             variant === "multi-line"
-              ? "lg:w-[50%] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center lg:justify-end lg:ml-[var(--spacing-scale-016)] xl:ml-[0px] xl:w-[50%] xl:h-[156px] xl:flex xl:items-center xl:justify-end"
+              ? "lg:w-[50%] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center lg:justify-end lg:ml-[var(--spacing-scale-016)] xl:ml-0 xl:w-[50%] xl:h-[156px] xl:flex xl:items-center xl:justify-end"
               : "lg:w-[928px] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center lg:justify-end xl:h-[156px] xl:flex xl:items-center xl:justify-end"
           }
         >
           <p
             className={
               variant === "multi-line"
-                ? "font-inter font-normal text-[14px] leading-[20px] md:font-normal md:text-[18px] md:leading-[130%] xl:text-[24px] xl:leading-[32px] text-[var(--color-content-default-tertiary)]"
+                ? "font-inter font-normal text-[14px] leading-[20px] md:text-[18px] md:leading-[130%] xl:text-[24px] xl:leading-[32px] text-[var(--color-content-default-tertiary)] lg:text-right"
                 : "font-inter font-normal text-[18px] leading-[130%] sm:text-[18px] sm:leading-[32px] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)] tracking-[0px]"
             }
           >
diff --git a/app/components/type/SectionHeader/index.tsx b/app/components/type/SectionHeader/index.tsx
new file mode 100644
index 0000000..89d7e8a
--- /dev/null
+++ b/app/components/type/SectionHeader/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./SectionHeader";
+export type { SectionHeaderVariantValue } from "../../../../lib/propNormalization";
diff --git a/app/components/type/TextBlock/TextBlock.types.ts b/app/components/type/TextBlock/TextBlock.types.ts
new file mode 100644
index 0000000..30f4e15
--- /dev/null
+++ b/app/components/type/TextBlock/TextBlock.types.ts
@@ -0,0 +1,11 @@
+import type { CommunityRuleLabeledBlock } from "../CommunityRule/CommunityRule.types";
+
+export interface TextBlockProps {
+  /** Figma X Small/Heading — entry title (20px bold, 28px line). */
+  title: string;
+  /** Plain copy; blank-line splits become paragraphs when `rows` is absent. */
+  body?: string;
+  /** Figma labeled stacks (14px medium label + 14px body). Overrides plain `body` when non-empty. */
+  rows?: CommunityRuleLabeledBlock[];
+  className?: string;
+}
diff --git a/app/components/type/TextBlock/TextBlock.view.tsx b/app/components/type/TextBlock/TextBlock.view.tsx
new file mode 100644
index 0000000..dcc2a65
--- /dev/null
+++ b/app/components/type/TextBlock/TextBlock.view.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { memo } from "react";
+import type { TextBlockProps } from "./TextBlock.types";
+
+/**
+ * Figma: Utility / **Community Rule / Text Block** (22001:29793).
+ * Title + body paragraphs and/or labeled rows (12px between stacks, 8px label→body).
+ */
+
+const ENTRY_TITLE_CLASS =
+  "font-inter font-bold text-[20px] leading-[28px] text-[var(--color-content-invert-primary)] shrink-0";
+
+const ROW_LABEL_CLASS =
+  "font-inter font-medium text-[14px] leading-[18px] text-[var(--color-content-invert-primary)] shrink-0";
+
+const PARAGRAPH_CLASS =
+  "font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-primary)] shrink-0";
+
+function bodyToParagraphs(body: string): string[] {
+  return body
+    .split(/\n\n/)
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0);
+}
+
+function ParagraphGroup({ text }: { text: string }) {
+  const paragraphs = bodyToParagraphs(text);
+  if (paragraphs.length === 0) return null;
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      {paragraphs.map((p, i) => (
+        <p key={i} className={`${PARAGRAPH_CLASS} whitespace-pre-wrap`}>
+          {p}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+function TextBlockView({
+  title,
+  body = "",
+  rows,
+  className = "",
+}: TextBlockProps) {
+  const hasRows = rows && rows.length > 0;
+
+  return (
+    <div
+      className={`flex min-w-0 flex-col gap-2 ${className}`.trim()}
+      data-name="TextBlock"
+    >
+      <p className={`${ENTRY_TITLE_CLASS} w-full min-w-0`}>{title}</p>
+      <div className="flex min-w-0 flex-col gap-3">
+        {hasRows
+          ? rows!.map((row, i) => (
+              <div key={i} className="flex min-w-0 flex-col gap-2">
+                <p className={ROW_LABEL_CLASS}>{row.label}</p>
+                <ParagraphGroup text={row.body} />
+              </div>
+            ))
+          : body.trim().length > 0 && <ParagraphGroup text={body} />}
+      </div>
+    </div>
+  );
+}
+
+TextBlockView.displayName = "TextBlockView";
+
+export default memo(TextBlockView);
diff --git a/app/components/type/TextBlock/index.tsx b/app/components/type/TextBlock/index.tsx
new file mode 100644
index 0000000..53b1e24
--- /dev/null
+++ b/app/components/type/TextBlock/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./TextBlock.view";
+export type { TextBlockProps } from "./TextBlock.types";
diff --git a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
deleted file mode 100644
index 11b6180..0000000
--- a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import DecisionMakingSidebarView from "./DecisionMakingSidebar.view";
-import type { DecisionMakingSidebarProps } from "./DecisionMakingSidebar.types";
-
-/**
- * Figma: "Utility / DecisionMakingSidebar" (TODO(figma)). Sidebar pairing a
- * header lockup with an `InfoMessageBox` checklist for decision-making screens.
- */
-const DecisionMakingSidebarContainer = memo<DecisionMakingSidebarProps>(
-  ({
-    title,
-    description,
-    messageBoxTitle,
-    messageBoxItems,
-    messageBoxCheckedIds,
-    onMessageBoxCheckboxChange,
-    size: sizeProp = "L",
-    justification: justificationProp = "left",
-    className = "",
-  }) => {
-    const size = sizeProp;
-    const justification = justificationProp;
-
-    return (
-      <DecisionMakingSidebarView
-        title={title}
-        description={description}
-        messageBoxTitle={messageBoxTitle}
-        messageBoxItems={messageBoxItems}
-        messageBoxCheckedIds={messageBoxCheckedIds}
-        onMessageBoxCheckboxChange={onMessageBoxCheckboxChange}
-        size={size}
-        justification={justification}
-        className={className}
-      />
-    );
-  },
-);
-
-DecisionMakingSidebarContainer.displayName = "DecisionMakingSidebar";
-
-export default DecisionMakingSidebarContainer;
diff --git a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.types.ts b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.types.ts
deleted file mode 100644
index 38e0ccd..0000000
--- a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.types.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { ReactNode } from "react";
-import type {
-  HeaderLockupJustificationValue,
-  HeaderLockupSizeValue,
-} from "../../type/HeaderLockup/HeaderLockup.types";
-import type { InfoMessageBoxItem } from "../InfoMessageBox/InfoMessageBox.types";
-
-export interface DecisionMakingSidebarProps {
-  title: string;
-  /** Description text or ReactNode (e.g. with underlined "add") */
-  description?: string | ReactNode;
-  messageBoxTitle: string;
-  messageBoxItems: InfoMessageBoxItem[];
-  messageBoxCheckedIds?: string[];
-  onMessageBoxCheckboxChange?: (id: string, checked: boolean) => void;
-  size?: HeaderLockupSizeValue;
-  justification?: HeaderLockupJustificationValue;
-  className?: string;
-}
-
-export interface DecisionMakingSidebarViewProps {
-  title: string;
-  description: string | ReactNode | undefined;
-  messageBoxTitle: string;
-  messageBoxItems: InfoMessageBoxItem[];
-  messageBoxCheckedIds: string[] | undefined;
-  onMessageBoxCheckboxChange:
-    | ((id: string, checked: boolean) => void)
-    | undefined;
-  size: "L" | "M";
-  justification: "left" | "center";
-  className: string;
-}
diff --git a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.view.tsx b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.view.tsx
deleted file mode 100644
index 218ec70..0000000
--- a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.view.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import HeaderLockup from "../../type/HeaderLockup";
-import InfoMessageBox from "../InfoMessageBox";
-import type { DecisionMakingSidebarViewProps } from "./DecisionMakingSidebar.types";
-
-function DecisionMakingSidebarView({
-  title,
-  description,
-  messageBoxTitle,
-  messageBoxItems,
-  messageBoxCheckedIds,
-  onMessageBoxCheckboxChange,
-  size,
-  justification,
-  className,
-}: DecisionMakingSidebarViewProps) {
-  const isL = size === "L";
-  const isLeft = justification === "left";
-  const isStringDescription = typeof description === "string";
-
-  return (
-    <div className={`flex flex-col gap-3 w-full min-w-0 ${className}`}>
-      {isStringDescription ? (
-        <HeaderLockup
-          title={title}
-          description={description as string}
-          justification={justification}
-          size={size}
-        />
-      ) : (
-        <div
-          className={`flex flex-col gap-[var(--measures-spacing-200,8px)] py-[12px] relative ${
-            isLeft ? "items-start" : "items-center"
-          }`}
-        >
-          <div className="flex items-center relative shrink-0 w-full">
-            <h1
-              className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${
-                isLeft ? "text-left" : "text-center"
-              } ${
-                isL
-                  ? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]"
-                  : "font-bricolage-grotesque font-bold text-[28px] leading-[36px]"
-              }`}
-            >
-              {title}
-            </h1>
-          </div>
-          {description != null && (
-            <p
-              className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
-                isLeft ? "" : "text-center"
-              } ${
-                isL ? "text-[18px] leading-[1.3]" : "text-[14px] leading-[20px]"
-              }`}
-            >
-              {description}
-            </p>
-          )}
-        </div>
-      )}
-      <InfoMessageBox
-        title={messageBoxTitle}
-        items={messageBoxItems}
-        checkedIds={messageBoxCheckedIds}
-        onCheckboxChange={onMessageBoxCheckboxChange ?? undefined}
-      />
-    </div>
-  );
-}
-
-DecisionMakingSidebarView.displayName = "DecisionMakingSidebarView";
-
-export default memo(DecisionMakingSidebarView);
diff --git a/app/components/utility/DecisionMakingSidebar/index.tsx b/app/components/utility/DecisionMakingSidebar/index.tsx
deleted file mode 100644
index 30e82d5..0000000
--- a/app/components/utility/DecisionMakingSidebar/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./DecisionMakingSidebar.container";
-export type { DecisionMakingSidebarProps } from "./DecisionMakingSidebar.types";
diff --git a/app/components/utility/Scrollbar/Scrollbar.container.tsx b/app/components/utility/Scrollbar/Scrollbar.container.tsx
index e5c16e7..a4d3eda 100644
--- a/app/components/utility/Scrollbar/Scrollbar.container.tsx
+++ b/app/components/utility/Scrollbar/Scrollbar.container.tsx
@@ -5,7 +5,7 @@ import { ScrollbarView } from "./Scrollbar.view";
 import type { ScrollbarProps } from "./Scrollbar.types";
 
 /**
- * Figma: "Utility / Scrollbar" (TODO(figma)).
+ * Figma: "Utility / Scrollbar".
  * Custom-styled scrollable wrapper. Most surfaces should attach
  * `SCROLLBAR_DESIGN_CLASS` directly instead of nesting through this view.
  */
diff --git a/app/components/utility/Separator/Separator.tsx b/app/components/utility/Separator/Separator.tsx
deleted file mode 100644
index b12a398..0000000
--- a/app/components/utility/Separator/Separator.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { memo } from "react";
-
-const Separator = memo(() => {
-  return (
-    <div className="flex flex-col items-center self-stretch">
-      <div className="flex items-start self-stretch h-px w-full bg-[var(--border-color-default-secondary)]" />
-    </div>
-  );
-});
-
-Separator.displayName = "Separator";
-
-export default Separator;
diff --git a/app/components/utility/Separator/index.tsx b/app/components/utility/Separator/index.tsx
deleted file mode 100644
index 8234c76..0000000
--- a/app/components/utility/Separator/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Separator";
diff --git a/app/components/utility/Tag/Tag.container.tsx b/app/components/utility/Tag/Tag.container.tsx
index d36c36c..9be840b 100644
--- a/app/components/utility/Tag/Tag.container.tsx
+++ b/app/components/utility/Tag/Tag.container.tsx
@@ -10,7 +10,7 @@ const DEFAULT_LABELS: Record<TagProps["variant"], string> = {
 };
 
 /**
- * Figma: "Utility / Tag" (TODO(figma)). Small status pill (e.g. "RECOMMENDED"
+ * Figma: "Utility / Tag". Small status pill (e.g. "RECOMMENDED"
  * or "SELECTED") used to annotate cards and options.
  */
 const TagContainer = memo<TagProps>(({ variant, children, className = "" }) => {
diff --git a/app/components/utility/Tag/Tag.view.tsx b/app/components/utility/Tag/Tag.view.tsx
index 26db892..2cc2a51 100644
--- a/app/components/utility/Tag/Tag.view.tsx
+++ b/app/components/utility/Tag/Tag.view.tsx
@@ -3,19 +3,20 @@
 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.
+ * Tag view – Figma 17861-22238; **`Selection`** (Figma Card / CardSelection, `16775:28762`).
  */
 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]";
+  const bgClass = isRecommended
+    ? "bg-[var(--color-surface-inverse-brand-accent)]"
+    : "bg-[var(--color-gray-1000)]";
+  const textClass = isRecommended
+    ? "text-[var(--color-content-inverse-brand-primary)]"
+    : "text-[var(--color-gray-000)]";
 
   return (
     <span
-      className={`inline-flex w-[6rem] min-w-[6rem] items-center justify-center rounded px-2 py-0.5 font-inter text-[10px] font-medium uppercase leading-3 ${bgClass} ${textClass} ${className}`}
+      className={`inline-flex shrink-0 items-center justify-center rounded-[2px] px-1 py-0.5 font-inter text-[10px] font-medium uppercase leading-3 ${bgClass} ${textClass} ${className}`}
       role="status"
     >
       {children}
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 7e6e668..27bccba 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import messages from "../messages/en/index";
 import { getTranslation } from "../lib/i18n/getTranslation";
 import { getGovernanceTemplateCatalogEntry } from "../lib/templates/governanceTemplateCatalog";
-import Icon from "./components/asset/Icon";
+import Icon from "./components/asset/icon";
 import Button from "./components/buttons/Button";
 import HeroDecor from "./components/sections/HeroBanner/HeroDecor";
 
@@ -17,7 +17,7 @@ const NOT_FOUND_TEMPLATE_SLUGS = [
  * Figma: 404 page frame 22078-808557; 480px lockup 22078-808903; title + CTA group 22078-808908
  * (filled / Go home left, outline / Browse right, 16px between).
  * Same [HeroDecor](app/components/sections/HeroBanner/HeroDecor.tsx) SVG as home; 404 places it only behind the title stack.
- * Shell: [app/layout.tsx](app/layout.tsx) `TopNav` only — no site footer.
+ * Shell: [app/layout.tsx](app/layout.tsx) `Top` only — no site footer.
  * Template chip row: Figma 22078-809968 — one row, 16px gaps, 20px to hint (no inner scroll; page handles overflow if needed).
  * Hero pattern: behind the 404 + bar + h1; wide SVG is painted with overflow-x-clip on `main` so it does not widen the scrollport.
  */
diff --git a/docs/README.md b/docs/README.md
index ba49832..bd300a8 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -8,6 +8,9 @@ User-facing docs. Implementation conventions live in `.cursor/rules/`.
   URLs, persistence. Source of truth for product/eng alignment.
 - [testing-guide.md](./testing-guide.md) — Testing philosophy, layer
   coverage, and Prisma migration smoke before merge.
+- [figma-component-registry.md](./figma-component-registry.md) — Figma
+  Community Rule System file ↔ `app/components/` (and route-colocated
+  admin UI) map.
 
 ## Author guides (`guides/`)
 
diff --git a/docs/create-flow.md b/docs/create-flow.md
index ee649a0..a03b913 100644
--- a/docs/create-flow.md
+++ b/docs/create-flow.md
@@ -43,7 +43,7 @@ Order is defined in code by [`FLOW_STEP_ORDER`](../app/(app)/create/utils/flowSt
 | 15 | Review and complete | `final-review` | `/create/final-review` |
 | 16 | Review and complete | `completed` | `/create/completed` |
 
-**Primary entry:** marketing header “Create rule” navigates to **`/create`**, which redirects to **`/create/informational`** (see [`TopNav.container.tsx`](../app/components/navigation/TopNav/TopNav.container.tsx)).
+**Primary entry:** marketing header “Create rule” navigates to **`/create`**, which redirects to **`/create/informational`** (see [`Top.container.tsx`](../app/components/navigation/Top/Top.container.tsx)).
 
 Active step for chrome and navigation is resolved from the pathname via [`parseCreateFlowScreenFromPathname`](../app/(app)/create/utils/flowSteps.ts) inside [`useCreateFlowNavigation`](../app/(app)/create/hooks/useCreateFlowNavigation.ts).
 
@@ -73,7 +73,7 @@ Only one `?fromFlow=1` marker exists, on one hop (`/create/review` → `/templat
 
 Server drafts (`/api/drafts/me`) are **not** touched here. Per product plan they are not auto-hydrated into the create flow; users select and load a specific saved draft from the profile page. So wiping `localStorage` is sufficient for the "fresh slate" invariant.
 
-**Final-review RuleCard category chips** are derived from `CreateFlowState` via [`buildFinalReviewCategoriesFromState`](../lib/create/buildFinalReviewCategories.ts): for the Customize / plain custom-rule path it resolves `selected{Communication,Membership,DecisionApproach,ConflictManagement}MethodIds` against the curated method presets in `messages/en/create/customRule/*.json`, and `buildCoreValuesForDocument` supplies the `Values` row from `coreValuesChipsSnapshot` + `selectedCoreValueIds`. For the Use-without-changes path the template body lives in `state.sections`; the helper renders `categoryName` + entry titles directly. The demo chips shipped in `finalReview.json` remain the fallback only when nothing in state resolves to any chip (e.g. direct navigation for development).
+**Final-review Rule category chips** are derived from `CreateFlowState` via [`buildFinalReviewCategoriesFromState`](../lib/create/buildFinalReviewCategories.ts): for the Customize / plain custom-rule path it resolves `selected{Communication,Membership,DecisionApproach,ConflictManagement}MethodIds` against the curated method presets in `messages/en/create/customRule/*.json`, and `buildCoreValuesForDocument` supplies the `Values` row from `coreValuesChipsSnapshot` + `selectedCoreValueIds`. For the Use-without-changes path the template body lives in `state.sections`; the helper renders `categoryName` + entry titles directly. The demo chips shipped in `finalReview.json` remain the fallback only when nothing in state resolves to any chip (e.g. direct navigation for development).
 
 **Starting the wizard from a template at `final-review` directly** is out of scope until a dedicated product ticket ships. A **full create-from-template** experience will **likely use separate route(s)** when product and eng define it (may still align conceptually with the same three stages where behavior overlaps the custom path).
 
diff --git a/docs/figma-component-registry.md b/docs/figma-component-registry.md
index f4cbe5d..9070909 100644
--- a/docs/figma-component-registry.md
+++ b/docs/figma-component-registry.md
@@ -4,18 +4,188 @@ Quick map from the Figma file **Community Rule System** (`agv0VBLiBlcnSAaiAORgPR
 
 | Figma (page) | Code | Notes |
 | --- | --- | --- |
-| [Utility](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=20515-15809) | `utility/` | Create chrome, modals header/footer, tag, scroll, sidebar, dividers, etc. |
-| [Asset](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=1240-9089) | `asset/` + `icons/` | Icons, logos; Avatar component currently under `icons/Avatar.tsx` |
-| [Button](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=497-3016) | `buttons/` | Figma `Button/`; code uses plural folder name. |
-| [Card](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17865-24349) | `cards/` | Step / rule / icon / selection style cards. |
-| [Control](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=5944-58611) | `controls/` | Inputs, toggles, select, switch, upload, etc. |
-| [Layout](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21836-20542) | `layout/` | List / list entry / list edit. |
-| [Modals](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=5944-47704) | `modals/` | Alert, create, dialog, login, tooltip, context menu, … |
-| [Navigation](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=5944-69518) | `navigation/` | Top nav, footer, menu bar, link. |
-| [Progress](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21163-24443) | `progress/` | Stepper, proportion bar. |
-| [Sections](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17865-24546) | `sections/` | Page-level / marketing-style compositions. |
-| [Type](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21473-29498) | `type/` | Some “section header” / lockup patterns also live in `sections/`; check both. |
+| [Utility](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=20515-15809) | `utility/` | Create chrome, tag, scroll, sidebar, dividers, etc. |
+| [Asset](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=1240-9089) | **`app/components/asset/`**, **`public/assets/template-mark/`**, **`public/assets/vector/`** | Components under **`asset/`**; flat kebab **`*.svg`** in **`template-mark/`** & **`vector/`** (see conventions below). |
+| [Button](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=497-3016) | `buttons/` | PascalCase package per primitive — **`Button/`**, **`InlineTextButton/`** (see conventions below). |
+| [Card](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17865-24349) | `cards/` | One PascalCase package per surface—**`Selection/`** (Figma **Card / CardSelection**), **`CardStack/`**, **`Rule/`** (Figma **Card / Rule**), **`Icon/`**, **`Mini/`**, **`Step/`** (Figma **Card / Step**), **`TemplateReviewCard/`** (see conventions below). |
+| [Control](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=5944-58611) | `controls/` | Checkbox, radio, text field, select, toggle, switch, incrementer, upload, multi-select, chip, … (see **Control conventions** below). **`InfoMessageBox`** canonical here. |
+| [Layout](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21836-20542) | `layout/` | **`List/`**, **`ListEntry/`** + **`listSizeLayout.ts`**. **Tabs** / **Accordion** are in Figma only—**not** in code yet (see **Layout conventions**). |
+| [Modals](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=5944-47704) | `modals/` | Alert, Create, Dialog, Login, Tooltip, **`ModalHeader`** / **`ModalFooter`** (see **Modals conventions**). |
+| [Navigation](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=5944-69518) | `navigation/` | **Footer**, **Top**, **`Menu`** + **`MenuItem`**, **Link** matrix — plus create-flow chrome (see **Navigation conventions**, [**CR-104**](https://linear.app/community-rule/issue/CR-104/backlog-design-system-component-cleanup) §8). |
+| [Progress](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21163-24443) | `progress/` | **`Stepper`**, **`ProportionBar`** — see **Progress conventions**. |
+| [Sections](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17865-24546) | `sections/` | Marketing / page compositions — see **Sections conventions** ([**CR-104**](https://linear.app/community-rule/issue/CR-104/backlog-design-system-component-cleanup) §10). |
+| [Type](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21473-29498) | `type/` | Section header, lockups, numbered list, input label, published rule tree — see **Type conventions** ([**CR-104**](https://linear.app/community-rule/issue/CR-104/backlog-design-system-component-cleanup) §11). |
 | — | `content/` | Not a Figma DS page; app content shells / thumbnails. |
 | — | `localization/` | Not a Figma DS page; i18n UI. |
+| — | `app/(admin)/**/_components/` | Admin-only UI colocated with a route (e.g. **`WebVitalsDashboard`** under **`monitor/_components/`** for **`/monitor`** and **`/api/web-vitals`**). Outside **`app/components/`** buckets; document here when it’s effectively part of the design-system map. |
+
+## Utility conventions (Figma “Utility” canvas)
+
+- **Figma `.utility/Input`** (field primitive) maps to **`controls/TextInput`** (and related control atoms). No separate `utility/Input` component — **Control** is canonical.
+- **`InputLabel`** (standalone label + optional help asterisk/helpers) lives under **`type/InputLabel`** (Figma may still nest it under Utility in the file).
+- **Lines / rules:** use **`utility/Divider`** only (`content` \| `menu` × horizontal \| vertical). The old **`Separator`** component was removed; Figma aligns with Divider, not a second primitive.
+- **Create-flow chrome (`CreateFlowFooter`, `CreateFlowTopNav`)** lives next to **`Top`** / **`Footer`** under **`navigation/`** — wizard shell / step navigation, grouped with other nav-like components even though Figma files it under Utility.
+- **Scrims / number indicators:** promote to shared **`utility`** primitives only when reuse is justified; otherwise keep local to screens.
+
+## Button conventions (Figma “Button” canvas)
+
+- **`buttons/Button/`** — **`Button.tsx`** + **`index.tsx`**. Variants (**filled**, **outline**, **ghost**, **danger**) and **`palette`** / **`size`** align with **`lib/propNormalization`**. **`href`** renders an `<a>` when not disabled.
+- **`buttons/InlineTextButton/`** — tertiary inline **`<button>`** (underline, inherited typography) for in-paragraph controls—**not** primary actions.
+
+## Control conventions (Figma [“Control”](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=5944-58611) canvas)
+
+Inventory aligns with [**CR-104**](https://linear.app/community-rule/issue/CR-104/backlog-design-system-component-cleanup) §5 (audit only—confirm with product before new primitives).
+
+| Figma (typical control) | Code (`app/components/controls/`) | Notes |
+| --- | --- | --- |
+| Checkbox + group | **`Checkbox/`**, **`CheckboxGroup/`** | |
+| Radio + group | **`RadioButton/`**, **`RadioGroup/`** | |
+| Text input (single-line) | **`TextInput/`** | Same primitive as Figma `.utility/Input` matrix (**Utility** calls it out; **Control** is canonical). |
+| Select | **`SelectInput/`**, **`SelectOption/`** | `SelectDropdown` lives beside **`SelectInput`** as an implementation detail. |
+| Text area | **`TextArea/`** | |
+| Toggle (single) | **`Toggle/`** | Not the same as **Toggle Group**. |
+| Toggle group | **`ToggleGroup/`** | |
+| Switch | **`Switch/`** | |
+| Proportion / incrementer | **`Incrementer/`**, **`IncrementerBlock/`** | The **wizard progress bar** is **`progress/ProportionBar`** (Figma **Progress**, not `controls/`). Naming split is intentional until docs/product reconcile—see **CR-104** Naming table + [**CR-60**](https://linear.app/community-rule/issue/CR-60/control-incrementer). |
+| Upload | **`Upload/`** | |
+| Multi-select | **`MultiSelect/`** | |
+| Chip | **`Chip/`** | |
+| Field + counter | **`InputWithCounter/`** | Composite. |
+| Info / guidance strip | **`InfoMessageBox/`** | May be nested under Utility in the file; **code home** is **`controls/`**. |
+
+**Gaps / TBD:** date picker and other checklist-style items on the Control canvas—**not** assumed shipped; confirm with design.
+
+- **Pattern:** **`container` / `view` / `types`** for heavier controls (**`TextInput`**, **`MultiSelect`**, …); **`index.tsx`** entry per package; enum slices in **`lib/propNormalization`** where listed in **`testing.mdc`**.
+
+## Layout conventions (Figma [“Layout”](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21836-20542) canvas)
+
+Tracks [**CR-104**](https://linear.app/community-rule/issue/CR-104/backlog-design-system-component-cleanup) §6: **inventory only**. **Do not** add **`Tabs`**, **`Accordion`**, or other Layout primitives until a shipped surface needs them and design is agreed—**no scaffold components** for Figma-only patterns.
+
+| Figma (typical) | Code (`app/components/layout/`) | Notes |
+| --- | --- | --- |
+| List / list container | **`List/`** | **`List.container.tsx`**, **`List.view.tsx`**, **`List.types.ts`**. |
+| List item / entry row | **`ListEntry/`** | **`ListEntry.container.tsx`**, **`ListEntry.view.tsx`**, **`ListEntry.types.ts`** (re-exports **`LIST_SIZE_OPTIONS`** consumed by **`List`**). |
+| Shared list sizing | **`listSizeLayout.ts`** | Layout constants / classes shared by **`List`** and **`ListEntry`**. |
+| List edit | — | No **`ListEdit`** package in this repo today; editing flows may be screen-local or future work—confirm in Figma vs product before introducing a shared primitive. |
+| Tabs | — | **Not implemented.** |
+| Accordion | — | **Not implemented.** |
+
+**Coverage note:** Figma’s Base / List matrix may be larger than **`List`** / **`ListEntry`** props—parity is **incremental**, not assumed 1:1.
+
+## Modals conventions (Figma [“Modals”](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=5944-47704) canvas)
+
+Inventory aligns with [**CR-104**](https://linear.app/community-rule/issue/CR-104/backlog-design-system-component-cleanup) §7. **No new modal packages** in this pass—only documentation of what already lives in **`app/components/modals/`**.
+
+| Figma (typical) | Code (`app/components/modals/`) | Notes |
+| --- | --- | --- |
+| Modal / Alert | **`Alert/`** | Toast + banner variants; details in **`alerts.mdc`**. |
+| Modal / Create | **`Create/`** | Create-flow modal; **`CreateModalFrame.view.tsx`** + **`useCreateModalA11y.ts`** are **shared** with **`Dialog`**. |
+| Modal / Login | **`Login/`** | **`LoginForm.tsx`** is also wired from **`AuthModalContext`** and **`/login`**. |
+| Modal / Tooltip | **`Tooltip/`** | |
+| Dialog (generic overlay) | **`Dialog/`** | Reuses **`CreateModalFrameView`** and **`useCreateModalA11y`**. |
+| Context menu | — | **Not implemented** — removed unused primitives; reintroduce when a shipped surface needs it. |
+| Headers / footers (often under Utility in Figma) | **`ModalHeader/`**, **`ModalFooter/`** | Composed chrome; **canonical code** is under **`modals/`**. |
+
+**Gaps / TBD:** **Modal / Share** — product may use share callbacks elsewhere; no dedicated **`Share/`** modal package yet (**CR-104**).
+
+- **Pattern:** **`container` / `view` / `types`** for **`Alert`**, **`Create`**, **`Dialog`**, **`Login`**, **`Tooltip`**, **`ModalHeader`**, **`ModalFooter`**.
+
+## Navigation conventions (Figma [“Navigation”](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=5944-69518) canvas)
+
+Inventory aligns with [**CR-104**](https://linear.app/community-rule/issue/CR-104/backlog-design-system-component-cleanup) §8: **audit / documentation only** — **no new navigation packages** and **no renames** without product/design sign-off.
+
+**Figma (Navigation canvas)** lists **Footer**, "**Top**", **Menu** plus **`.utility/Menu Item`**, and the **Link** property matrix. **Code** (per §8): **`Footer`**, **`Top`** (package **`Top/`**), **`Menu.tsx`** + **`MenuItem/`**, **`NavigationItem`**, **`Link`** — paths below.
+
+| Figma (typical) | Code (`app/components/navigation/`) | Notes |
+| --- | --- | --- |
+| Navigation / Footer | **`Footer.tsx`** | Marketing site footer; single module at bucket root. |
+| Navigation / Top | **`Top/`** | **`Top.container.tsx`**, **`Top.view.tsx`**, **`Top.types.ts`**, **`index.tsx`**. **`TopWithPathname.tsx`** wraps **`Top`**: **`folderTop`** from pathname, session sync (**`initialSignedIn`** from server). |
+| Navigation / **Menu**; Figma **`.utility/Menu Item`** | **`Menu.tsx`** + **`MenuItem/`** | **`Menu`** — root **`nav`** (**`role="menubar"`**). **`MenuItem/`** — split package for entries. |
+| (same Figma family; composable row) | **`NavigationItem/`** | Split package; rows inside **`Top`** and related shells. Overlap with “menu item” frames is **document-only** — do not assume 1:1 Figma node ↔ file without design. |
+| **Link** matrix | **`Link/`** | Next.js **`Link`** wrapper + Figma “Link, CTA” styling; used in nav and content (e.g. **`Rule`**). |
+| Create-flow top chrome (often **Utility** in Figma) | **`CreateFlowTopNav/`** | Wizard header; **`CreateFlowLayoutClient`**. |
+| Create-flow bottom chrome (often **Utility** in Figma) | **`CreateFlowFooter/`** | Wizard footer + **`ProportionBar`**; **`CreateFlowLayoutClient`**. |
+| App shell (not a DS atom) | **`ConditionalNavigation.tsx`**, **`ConditionalNavigationClient.tsx`** | Server: session for first paint. Client: hide global **`Top`** on **`/create/*`** and **`/login`**; else **`TopWithPathname`**. **Tolerated `usePathname()`** — no new pathname-conditional chrome (**`routes.mdc`**). |
+
+**Also under Utility in Figma:** **`CreateFlowTopNav`** / **`CreateFlowFooter`** are filed under Utility but **canonical code** is here with **`Top`** / **`Footer`** (see **Utility conventions**).
+
+**Gaps / TBD (§8):** **`Link`** — Figma carries **many state variants**; the repo may need a **visual parity pass**, not necessarily new files. Confirm with design before treating current props as complete.
+
+**Naming (historical CR-104 note):** Figma **Navigation / Menu** now matches code **`Menu`** + **`MenuItem`** (replacing the older **`MenuBar`** / **`MenuBarItem`** names).
+
+- **Pattern:** **`container` / `view` / `types`** + **`index.tsx`** for **`Top`**, **`CreateFlowTopNav`**, **`CreateFlowFooter`**, **`NavigationItem`**, **`Link`**, **`MenuItem`**. Root **`Menu.tsx`** and **`Footer.tsx`** stay single-file until a split is justified.
+
+## Progress conventions (Figma [“Progress”](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21163-24443) canvas)
+
+Inventory aligns with [**CR-104**](https://linear.app/community-rule/issue/CR-104/backlog-design-system-component-cleanup) §9.
+
+| Figma (typical) | Code (`app/components/progress/`) | Notes |
+| --- | --- | --- |
+| Progress / Stepper | **`Stepper/`** | **`Stepper.container.tsx`**, **`Stepper.view.tsx`**, **`Stepper.types.ts`**, **`index.tsx`**. Dots use **`role="progressbar"`** with **`active`** (1-based) and **`totalSteps`**. |
+| Progress / Bar (multi-segment) | **`ProportionBar/`** | Three background segments + fill layer. **`progress`** is **`ProportionBarState`** (`1-0` … `3-2`; see **`ProportionBar.types.ts`**). Middle-segment ratios for **`2-*`** match Figma (non-uniform; see **`ProportionBar.view.tsx`**). |
+| Figma **Control / Proportion** (incrementer) | **`controls/Incrementer/`**, **`IncrementerBlock/`** | **Not** the wizard bar — numeric control. Wizard chrome uses **`ProportionBar`** (see **Control conventions** + [**CR-60**](https://linear.app/community-rule/issue/CR-60/control-incrementer)). |
+
+**Composition:** **`CreateFlowFooter`** (under **`navigation/`**) embeds **`ProportionBar`** in the create-flow shell (Figma often files that chrome under **Utility**).
+
+**Gaps / TBD:** **`ProportionBar` `variant`** (`default` \| `segmented`, from **`lib/propNormalization`**) is **reserved** — both values render the **same** fill today. Extend visually only when design distinguishes them. **`aria-label`** strings in **`ProportionBar.view.tsx`** are **hardcoded English**; move to **`messages/`** if product wants i18n here.
+
+## Sections conventions (Figma [“Sections”](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17865-24546) canvas)
+
+Inventory aligns with [**CR-104**](https://linear.app/community-rule/issue/CR-104/backlog-design-system-component-cleanup) §10: **audit / documentation** — many Figma blocks are **marketing-only**; confirm roadmap before treating gaps as committed build work.
+
+**Cross-bucket:** Figma **Type / SectionHeader** ([17411:10981](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17411-10981)) is implemented as **`type/SectionHeader/`** and composed by **`sections/CardSteps`**, **`sections/RuleStack`**, etc. The **Community Rule** long-form body ([16489:4507](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=16489-4507)) is filed under **Sections** in Figma but implemented in **`type/CommunityRule/`** — see **Type conventions**.
+
+| Figma / product (typical) | Code (`app/components/sections/`) | Notes |
+| --- | --- | --- |
+| Hero | **`HeroBanner/`** | **`HeroBanner.tsx`** + **`HeroDecor.tsx`** + **`index.tsx`** (presentational package). |
+| Content banner | **`ContentBanner.tsx`** | Single module at bucket root. |
+| Logo wall | **`LogoWall/`** | **`container` / `view` / `types`** + **`index.tsx`**. |
+| Card steps (SectionCardSteps) | **`CardSteps/`** | Composes **`cards/Step`** (Figma **Card / Step** — not **`progress/Stepper`**). |
+| Rule stack | **`RuleStack/`** | |
+| Feature grid | **`FeatureGrid/`** | |
+| Quote block | **`QuoteBlock/`** | |
+| Ask organizer | **`AskOrganizer/`** | |
+| Related content | **`RelatedArticles/`** | Article list / cards — confirm naming vs Figma “related slider” frames. |
+| Template grid (governance) | **`GovernanceTemplateGrid/`** | **`GovernanceTemplateGridSkeleton`** colocated. |
+| Section index / number | **`SectionNumber.tsx`** | Single module. |
+
+**Gaps / TBD (§10, confirm with design / roadmap):** **PageHeader**, **CardGroup**, **Section Accordion**, **Section / Stats** (hero metrics distinct from **`cards/Step`** — [**CR-59**](https://linear.app/community-rule/issue/CR-59/card-stat)), **Related slider** (vs **`RelatedArticles`** parity), **About header**, **triple-step** / text blocks, **orgs** strip, and other Figma-only compositions.
+
+- **Pattern:** Prefer **`container` / `view` / `types`** + **`index.tsx`** for **new** section composites. Older or small surfaces may stay a **single `*.tsx`** at **`sections/`** root (**`ContentBanner`**, **`SectionNumber`**) — match neighbors when extending.
+
+## Type conventions (Figma [“Type”](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21473-29498) canvas)
+
+Inventory aligns with [**CR-104**](https://linear.app/community-rule/issue/CR-104/backlog-design-system-component-cleanup) §11. Figma **Type** covers section headers (1 vs 3 lines, size tiers), **Header / Content lockups**, **Type / Numbered List** (+ list item), long-form text exemplars, and related typography. In code, those surfaces live under **`app/components/type/`** (plus **`InputLabel`**, which Figma sometimes nests under Utility — see **Utility conventions**).
+
+**Cross-bucket:** **`CommunityRule/`** implements the **Sections** canvas frame **Community Rule** ([**16489:4507**](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=16489-4507)) — typography-first long-form body; **canonical code** is under **`type/`** (not **`sections/`**).
+
+| Figma (typical) | Code (`app/components/type/`) | Notes |
+| --- | --- | --- |
+| Section header (1 vs 3 lines, responsive sizes) | **`SectionHeader/`** | Figma [**17411:10981**](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17411-10981). **`SectionHeader.tsx`** + **`index.tsx`**; **`default`** / **`multi-line`**; optional **`stackedDesktopLines`**. Composed by **`sections/CardSteps`**, **`sections/RuleStack`**, etc. |
+| Header lockup / content lockup | **`HeaderLockup/`**, **`ContentLockup/`** | **`container` / `view` / `types`** + **`index.tsx`** where split. |
+| Type / Numbered List (+ item) | **`NumberedList/`** | **`container` / `view` / `types`** + **`index.tsx`**. |
+| `.utility/Input label` (often filed under Utility in Figma) | **`InputLabel/`** | See also **Utility conventions** — **`InputLabel`** is canonical under **`type/`**. |
+| “Community Rule” published body (Sections canvas) | **`CommunityRule/`** | Composes **`Section`** + **`TextBlock`**. Category + entries; optional entry **`blocks`**; plain **`body`** splits on blank lines. |
+| Community Rule **Section** (rail + category + stack) | **`Section/`** | Figma [**22002:30757**](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22002-30757). Optional vertical rail (`showRail`). |
+| Community Rule **Text Block** (title + paragraphs or labeled rows) | **`TextBlock/`** | Figma Utility [**22001:29793**](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22001-29793). **`rows`** for label + body stacks (12px / 8px gaps). |
+
+**Gaps / TBD (§11, confirm with design / roadmap):** Additional large **Type**-canvas text compositions or exemplars that do not map cleanly to **`CommunityRule`**, **`TextBlock`**, or the lockup components may stay **Figma-only** until a shipped surface needs them — same rule as other CR-104 inventories (no scaffold purely for parity).
+
+## Card conventions (Figma “Card” canvas)
+
+- **Pattern:** follow the **container / view / types** split (**`Selection/`**, **`CardStack/`**, **`Rule/`**, **`Icon/`**, **`Mini/`**) unless a component stays a single module (**`Step/`** uses one **`Step.tsx`** + **`index.tsx`** only).
+- **`Rule/`** — Figma **Card / Rule**. **`Rule.container.tsx`**, **`Rule.view.tsx`**, **`Rule.types.ts`**.
+- **`Selection/`** — Figma **Card / CardSelection** (e.g. `16775:28762`): optional recommended/selected **`Tag`**, label, support text. Stacked layout uses `orientation="horizontal"`; row + info icon + tag right uses `orientation="vertical"`.
+- **`Step/`** — Figma **Card / Step** (numbered step tile + text). Shipped on the home page via **`sections/CardSteps`**. Not the **Progress / Stepper** wizard control.
+- **`CardStack/`** — selectable stacks + expand affordance for create-flow method pickers (**Figma may still say “Utility / CardStack”;** code lives here).
+- **`TemplateReviewCard/`** — template review grid + chip detail modal (**`TemplateChipDetailModal`** colocated in the package).
+
+## Asset conventions (Figma “Asset” canvas)
+
+- **Imports:** use **`asset/icon`** (named **`Icon`** component), **`asset/Logo`**, **`asset/Avatar`**, etc.—same rule as **`buttons/Button`**, no top-level **`asset/index.tsx`** barrel.
+- **`asset/icon/`** — **`Icon.tsx`** maps icon names to SVG modules beside it (`arrow_back.svg`, …); **`index.tsx`** re-exports **`Icon`** and **`ICON_NAME_OPTIONS`** / types.
+- **`public/assets/vector/<slug>.svg`** — Figma Asset / Vector marks (same kebab **`slug`** convention as **`public/assets/template-mark/`**). Use **`vectorMarkPath(slug)`** in **`lib/assetUtils.ts`**.
+- **`asset/Logo`** — Community Rule **`Logo`** component (folder PascalCase, like **`Avatar/`**).
+- **`asset/Avatar`** + **`asset/AvatarContainer`** — paired circular image stacks (e.g. top nav). Fuller DS Avatar behavior (**initials**, upload routing, …) tracked as **[CR-58](https://linear.app/community-rule/issue/CR-58)**.
 
 *Update this when you add a new top-level `app/components/*` package or a new Figma canvas.*
diff --git a/docs/guides/backend-linear-tickets.md b/docs/guides/backend-linear-tickets.md
index be106b6..6a25c8c 100644
--- a/docs/guides/backend-linear-tickets.md
+++ b/docs/guides/backend-linear-tickets.md
@@ -138,7 +138,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 3. Surface API errors: invalid email, 429 `retryAfterMs`, expired/invalid token, network failure (accessible copy).
 4. Ensure `fetch` calls use `credentials: "include"` where needed (see [lib/create/api.ts](lib/create/api.ts)).
 5. **Dev:** without `SMTP_URL`, verify URL is logged; with Mailhog, use [docker-compose.yml](docker-compose.yml) and `SMTP_URL=smtp://localhost:1025`.
-6. **Marketing header:** When signed in (`fetchAuthSession`), **Log in** becomes **Profile** linking to [`/profile`](app/(app)/profile/page.tsx) (placeholder until Ticket 15 / CR-86). Implemented in [TopNavWithPathname.tsx](app/components/navigation/TopNav/TopNavWithPathname.tsx) + [TopNav.container.tsx](app/components/navigation/TopNav/TopNav.container.tsx).
+6. **Marketing header:** When signed in (`fetchAuthSession`), **Log in** becomes **Profile** linking to [`/profile`](app/(app)/profile/page.tsx) (placeholder until Ticket 15 / CR-86). Implemented in [TopWithPathname.tsx](app/components/navigation/Top/TopWithPathname.tsx) + [Top.container.tsx](app/components/navigation/Top/Top.container.tsx).
 
 **Acceptance criteria:**
 
@@ -149,7 +149,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Status:** [CR-74](https://linear.app/community-rule/issue/CR-74/backend-magic-link-sign-in-ui-apis-ticket-3-cr-75-done) **Done** for shipped UI/APIs. **Residual checklist** below: repo doc items are **done**; use Linear (CR-74 or child issue) to track **per-environment** staging URL checks.
 
-**Files:** [app/(app)/login/](app/(app)/login/), [app/(app)/profile/](app/(app)/profile/) (placeholder), [app/components/modals/Login/](app/components/modals/Login/), [messages/en/pages/login.json](messages/en/pages/login.json), [messages/en/pages/profile.json](messages/en/pages/profile.json), [messages/en/components/header.json](messages/en/components/header.json), [app/components/navigation/TopNav/TopNav.container.tsx](app/components/navigation/TopNav/TopNav.container.tsx), [app/components/navigation/TopNav/TopNavWithPathname.tsx](app/components/navigation/TopNav/TopNavWithPathname.tsx), [lib/create/api.ts](lib/create/api.ts), [app/api/auth/magic-link/request/route.ts](app/api/auth/magic-link/request/route.ts), [app/api/auth/magic-link/verify/route.ts](app/api/auth/magic-link/verify/route.ts), [prisma/schema.prisma](prisma/schema.prisma) (`MagicLinkToken`), [lib/server/mail.ts](lib/server/mail.ts). Onboarding: [CONTRIBUTING.md](CONTRIBUTING.md), [`.env.example`](.env.example).
+**Files:** [app/(app)/login/](app/(app)/login/), [app/(app)/profile/](app/(app)/profile/) (placeholder), [app/components/modals/Login/](app/components/modals/Login/), [messages/en/pages/login.json](messages/en/pages/login.json), [messages/en/pages/profile.json](messages/en/pages/profile.json), [messages/en/components/header.json](messages/en/components/header.json), [app/components/navigation/Top/Top.container.tsx](app/components/navigation/Top/Top.container.tsx), [app/components/navigation/Top/TopWithPathname.tsx](app/components/navigation/Top/TopWithPathname.tsx), [lib/create/api.ts](lib/create/api.ts), [app/api/auth/magic-link/request/route.ts](app/api/auth/magic-link/request/route.ts), [app/api/auth/magic-link/verify/route.ts](app/api/auth/magic-link/verify/route.ts), [prisma/schema.prisma](prisma/schema.prisma) (`MagicLinkToken`), [lib/server/mail.ts](lib/server/mail.ts). Onboarding: [CONTRIBUTING.md](CONTRIBUTING.md), [`.env.example`](.env.example).
 
 ### Residual / before CR-75 (create-flow session UI)
 
@@ -173,7 +173,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 **Implementation (repo):**
 
 1. [app/(app)/create/layout.tsx](app/(app)/create/layout.tsx): session + `enableAnonymousPersistence`; anonymous exit → `openLogin({ variant: 'saveProgress', nextPath })`; signed-in exit → `useCreateFlowExit`.
-2. [CreateFlowTopNav](app/components/utility/CreateFlowTopNav/): i18n [`messages/en/create/topNav.json`](messages/en/create/topNav.json); logo + Share/Export/Edit (completed) + Exit/Save & Exit only.
+2. [CreateFlowTopNav](app/components/navigation/CreateFlowTopNav/): i18n [`messages/en/create/topNav.json`](messages/en/create/topNav.json); logo + Share/Export/Edit (completed) + Exit/Save & Exit only.
 3. [useCreateFlowExit](app/(app)/create/hooks/useCreateFlowExit.ts): `saveDraftToServer` when sync + signed in; `clearState` + home.
 4. [CreateFlowContext](app/(app)/create/context/CreateFlowContext.tsx): optional anonymous localStorage mirror via `enableAnonymousPersistence`.
 5. **QA:** [ProfilePageClient](app/(app)/profile/ProfilePageClient.tsx) Sign out when session present.
@@ -183,7 +183,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - [x] Completed step still works; **Save & Exit** gating uses session + step (not conflated with `completed` only).
 - [x] Signed in + sync: Save & Exit persists server-side; anonymous: localStorage + exit modal + transfer after magic link. Sign out on profile clears session. _(Re-verify on staging/prod as needed.)_
 
-**Files:** [app/(app)/create/layout.tsx](app/(app)/create/layout.tsx), [app/(app)/create/hooks/useCreateFlowExit.ts](app/(app)/create/hooks/useCreateFlowExit.ts), [app/components/utility/CreateFlowTopNav/](app/components/utility/CreateFlowTopNav/), [app/(app)/create/context/CreateFlowContext.tsx](app/(app)/create/context/CreateFlowContext.tsx), [messages/en/create/topNav.json](messages/en/create/topNav.json), [app/(app)/profile/ProfilePageClient.tsx](app/(app)/profile/ProfilePageClient.tsx).
+**Files:** [app/(app)/create/layout.tsx](app/(app)/create/layout.tsx), [app/(app)/create/hooks/useCreateFlowExit.ts](app/(app)/create/hooks/useCreateFlowExit.ts), [app/components/navigation/CreateFlowTopNav/](app/components/navigation/CreateFlowTopNav/), [app/(app)/create/context/CreateFlowContext.tsx](app/(app)/create/context/CreateFlowContext.tsx), [messages/en/create/topNav.json](messages/en/create/topNav.json), [app/(app)/profile/ProfilePageClient.tsx](app/(app)/profile/ProfilePageClient.tsx).
 
 ---
 
@@ -332,7 +332,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 1. Keep [`docs/create-flow.md`](create-flow.md) in sync with product/Figma (stage ↔ step mapping, future template routes).
 2. ~~Remove legacy [`app/(app)/create/[step]/page.tsx`](app/(app)/create/[step]/page.tsx)~~ — replaced by [`app/(app)/create/[screenId]/page.tsx`](app/(app)/create/[screenId]/page.tsx) with real screens; unknown slugs `notFound()`.
 3. ~~Unify **step source of truth** / **resume after `SignedInDraftHydration`~~ — moved to **[CR-86](https://linear.app/community-rule/issue/CR-86/backend-profile-dashboard-account-figma-profile)** (profile lists drafts, continue at last step, new rule vs server draft; see `docs/create-flow.md` known gaps).
-4. Wire [`CreateFlowFooter`](app/components/utility/CreateFlowFooter/) `ProportionBar` to step progress from `FLOW_STEP_ORDER` (and `review-template` / `completed` exceptions per design); optional **two-level progress** (stage + step within stage) when design specifies.
+4. Wire [`CreateFlowFooter`](app/components/navigation/CreateFlowFooter/) `ProportionBar` to step progress from `FLOW_STEP_ORDER` (and `review-template` / `completed` exceptions per design); optional **two-level progress** (stage + step within stage) when design specifies.
 5. When Figma hands off, surface **stage labels** in create shell (top nav, footer, or step chrome) using the mapping in `create-flow.md`.
 
 **Acceptance criteria:**
@@ -342,7 +342,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - [x] Footer progress reflects step index via `getProportionBarProgressForCreateFlowStep` (optional stage labels still Figma-dependent).
 - [x] Template **Customize** prefill is documented (maps template body to `selected*Ids` + `coreValuesChipsSnapshot`, routes to `core-values` when Community has data else `informational`); full template-customize-from-mid-wizard entry beyond `core-values` stays deferred.
 
-**Files:** [`docs/create-flow.md`](create-flow.md), [`app/(app)/create/`](app/(app)/create/), [`app/components/utility/CreateFlowFooter/`](app/components/utility/CreateFlowFooter/), optionally [`docs/backend-roadmap.md`](backend-roadmap.md) §12 cross-links.
+**Files:** [`docs/create-flow.md`](create-flow.md), [`app/(app)/create/`](app/(app)/create/), [`app/components/navigation/CreateFlowFooter/`](app/components/navigation/CreateFlowFooter/), optionally [`docs/backend-roadmap.md`](backend-roadmap.md) §12 cross-links.
 
 **Linear:** [CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo) **Done**. Open-ended draft/hydration work: **[CR-86](https://linear.app/community-rule/issue/CR-86/backend-profile-dashboard-account-figma-profile)**. **Parallel** to templates (7–8) and publish (6); not part of **CR-72 → CR-83**.
 
@@ -411,7 +411,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - **Communication / Membership / Conflict management / Decision approaches** (card-style screens, e.g. [`CommunicationMethodsScreen.tsx`](../../app/(app)/create/screens/card/CommunicationMethodsScreen.tsx)) — there is **no `Add custom method` affordance**. The inline `add` link in the page description (`messages/en/create/customRule/*.json`, `compactDescriptionLinkLabel: "add"`) only toggles `setExpanded(true)` on the card stack — it shows more preset cards, it does **not** open a creation modal.
 - **Confirm stakeholders** — multiselect-style add (free-text chip), pending real invite work in **Ticket 18 / CR-90**.
 - **Community structure** — multiselect-style add (free-text chip).
-- **Final Review** ([`FinalReviewScreen.tsx`](../../app/(app)/create/screens/review/FinalReviewScreen.tsx)) — renders `<RuleCard categories=…>` and only wires `onChipClick`. `category.onAddClick` is **not provided**, so the `+` button on each MultiSelect category renders by default (`addButton={!hideCategoryAddButton}` in [`RuleCard.view.tsx`](../../app/components/cards/RuleCard/RuleCard.view.tsx)) but **does nothing** when clicked. Dead control we are shipping today.
+- **Final Review** ([`FinalReviewScreen.tsx`](../../app/(app)/create/screens/review/FinalReviewScreen.tsx)) — renders `<Rule categories=…>` and only wires `onChipClick`. `category.onAddClick` is **not provided**, so the `+` button on each MultiSelect category renders by default (`addButton={!hideCategoryAddButton}` in [`Rule.view.tsx`](../../app/components/cards/Rule/Rule.view.tsx)) but **does nothing** when clicked. Dead control we are shipping today.
 
 **Open product questions (block implementation until resolved):**
 
@@ -426,7 +426,7 @@ _Section B — Final Review screen `+` button per category:_
 1. Pick one:
    - **Option 1 — fresh modal in place.** Clicking `+` opens [`FinalReviewChipEditModal`](../../app/(app)/create/components/FinalReviewChipEditModal.tsx) seeded empty for the category. On Save, append a new chip and write through to the matching `*MethodDetailsById` (or `coreValueDetailsByChipId` + snapshot) map, matching the editable chip flow that just shipped.
    - **Option 2 — bounce back to the source step.** Navigate the user to the corresponding custom-rule step (e.g. communication chip `+` → `/create/communication`) so they add via the existing card-page flow, then return to Final Review.
-   - **Option 3 — hide the button.** Pass `hideCategoryAddButton` to the Final Review `<RuleCard>` so the dead control disappears until product knows what they want.
+   - **Option 3 — hide the button.** Pass `hideCategoryAddButton` to the Final Review `<Rule>` so the dead control disappears until product knows what they want.
 2. If Option 1, what is the empty state of the modal (title only, all fields, recommended seeds)?
 3. If Option 2, how do we preserve the user's place on Final Review so they can come back without re-confirming everything?
 4. Does the answer differ for `coreValues` vs the four method categories? (Different edit-fields components, different state slices.)
@@ -436,7 +436,7 @@ _Section B — Final Review screen `+` button per category:_
 1. **Product + design pass** answering Sections A and B; produce Figma for whichever options win on each affected page and on Final Review.
 2. **Custom-rule card pages (if Option A1 wins):** add an `Add custom <method>` button alongside the card stack on each of the four pages. Reuse the page's `*EditFields` component inside a `customPending`-style modal (same dismiss-drops / confirm-persists semantics as `CoreValuesSelectScreen`). Persist into the matching `*MethodDetailsById` slice and selected-id list.
 3. **Final Review (if Option B1 wins):** wire `category.onAddClick` per category in [`FinalReviewScreen.tsx`](../../app/(app)/create/screens/review/FinalReviewScreen.tsx) → open `FinalReviewChipEditModal` seeded empty for the matching `groupKey`, with a `customPending` mode that drops the new entry on dismiss and persists on Save (parity with the current chip-edit flow).
-4. **Final Review (if Option B3 wins, interim):** pass `hideCategoryAddButton` to the Final Review `<RuleCard>` so the no-op `+` is removed.
+4. **Final Review (if Option B3 wins, interim):** pass `hideCategoryAddButton` to the Final Review `<Rule>` so the no-op `+` is removed.
 5. **i18n:** add copy for the new buttons, modal headers, validation, and confirmation/discard prompts under `messages/en/create/customRule/*.json` and `messages/en/create/reviewAndComplete/finalReview.json`.
 6. **Tests:** Vitest component tests covering dismiss-drops vs confirm-persists for each new modal (mirror the new `CoreValuesSelectScreen.test.tsx` `custom chip — confirmed vs dismissed` pair).
 
@@ -453,7 +453,7 @@ _Section B — Final Review screen `+` button per category:_
 - [ ] If Option B3 (interim) ships first: the Final Review `+` is no longer rendered (no dead controls).
 - [ ] Once Option A1 / B1 are picked: implementation tickets file under this one with `customPending` parity and tests, no regressions to the existing chip-edit flow.
 
-**Files (reference):** [`app/(app)/create/screens/card/CommunicationMethodsScreen.tsx`](../../app/(app)/create/screens/card/CommunicationMethodsScreen.tsx), [`MembershipMethodsScreen.tsx`](../../app/(app)/create/screens/card/MembershipMethodsScreen.tsx), [`ConflictManagementScreen.tsx`](../../app/(app)/create/screens/card/ConflictManagementScreen.tsx), [`right-rail/DecisionApproachesScreen.tsx`](../../app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx), [`select/CoreValuesSelectScreen.tsx`](../../app/(app)/create/screens/select/CoreValuesSelectScreen.tsx), [`review/FinalReviewScreen.tsx`](../../app/(app)/create/screens/review/FinalReviewScreen.tsx), [`components/FinalReviewChipEditModal.tsx`](../../app/(app)/create/components/FinalReviewChipEditModal.tsx), [`components/methodEditFields/`](../../app/(app)/create/components/methodEditFields/), [`components/cards/RuleCard/RuleCard.view.tsx`](../../app/components/cards/RuleCard/RuleCard.view.tsx).
+**Files (reference):** [`app/(app)/create/screens/card/CommunicationMethodsScreen.tsx`](../../app/(app)/create/screens/card/CommunicationMethodsScreen.tsx), [`MembershipMethodsScreen.tsx`](../../app/(app)/create/screens/card/MembershipMethodsScreen.tsx), [`ConflictManagementScreen.tsx`](../../app/(app)/create/screens/card/ConflictManagementScreen.tsx), [`right-rail/DecisionApproachesScreen.tsx`](../../app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx), [`select/CoreValuesSelectScreen.tsx`](../../app/(app)/create/screens/select/CoreValuesSelectScreen.tsx), [`review/FinalReviewScreen.tsx`](../../app/(app)/create/screens/review/FinalReviewScreen.tsx), [`components/FinalReviewChipEditModal.tsx`](../../app/(app)/create/components/FinalReviewChipEditModal.tsx), [`components/methodEditFields/`](../../app/(app)/create/components/methodEditFields/), [`components/cards/Rule/Rule.view.tsx`](../../app/components/cards/Rule/Rule.view.tsx).
 
 **Linear:** [CR-91](https://linear.app/community-rule/issue/CR-91/productdesign-add-button-behavior-on-custom-rule-pages-and-final) (**Backlog**). Sibling product/design ticket to **CR-90** (same "copy promises a feature, UI doesn't deliver" pattern). **Parallel** to the CR-72 → CR-83 chain; not on the critical path.
 
diff --git a/lib/assetUtils.ts b/lib/assetUtils.ts
index b75662f..b348c26 100644
--- a/lib/assetUtils.ts
+++ b/lib/assetUtils.ts
@@ -25,6 +25,15 @@ export function getAssetPath(assetPath: string): string {
   return assetPath.startsWith("/") ? assetPath : `/${assetPath}`;
 }
 
+/**
+ * Decorative vector marks in `public/assets/vector/<kebab-case>.svg`
+ * (Figma Asset / Vector). Same folder pattern as governance template marks
+ * under `assets/template-mark/`.
+ */
+export function vectorMarkPath(slug: string): string {
+  return `assets/vector/${slug}.svg`;
+}
+
 /**
  * Asset paths for common components
  */
diff --git a/lib/create/buildFinalReviewCategories.ts b/lib/create/buildFinalReviewCategories.ts
index 1a4cea6..743f3b0 100644
--- a/lib/create/buildFinalReviewCategories.ts
+++ b/lib/create/buildFinalReviewCategories.ts
@@ -231,7 +231,7 @@ export function buildFinalReviewCategoryRowsDetailed(
 }
 
 /**
- * Derive the final-review RuleCard category rows from the current
+ * Derive the final-review Rule category rows from the current
  * {@link CreateFlowState}.
  *
  * Two-mode contract, mirroring the two template entry points:
diff --git a/lib/create/buildPublishPayload.ts b/lib/create/buildPublishPayload.ts
index 2ef42f3..a12e834 100644
--- a/lib/create/buildPublishPayload.ts
+++ b/lib/create/buildPublishPayload.ts
@@ -6,7 +6,7 @@ import type {
   DecisionApproachDetailEntry,
   MembershipMethodDetailEntry,
 } from "../../app/(app)/create/types";
-import type { CommunityRuleDocumentSection } from "../../app/components/sections/CommunityRuleDocument/CommunityRuleDocument.types";
+import type { CommunityRuleSection } from "../../app/components/type/CommunityRule/CommunityRule.types";
 import {
   communicationPresetFor,
   conflictManagementPresetFor,
@@ -14,14 +14,11 @@ import {
   membershipPresetFor,
   methodLabelFor,
 } from "./finalReviewChipPresets";
+import { isDocumentEntry } from "./documentEntryGuards";
 
-function isDocumentEntry(x: unknown): x is { title: string; body: string } {
-  if (!x || typeof x !== "object") return false;
-  const o = x as Record<string, unknown>;
-  return typeof o.title === "string" && typeof o.body === "string";
-}
+export { isDocumentEntry } from "./documentEntryGuards";
 
-function isDocumentSection(x: unknown): x is CommunityRuleDocumentSection {
+function isDocumentSection(x: unknown): x is CommunityRuleSection {
   if (!x || typeof x !== "object") return false;
   const o = x as Record<string, unknown>;
   if (typeof o.categoryName !== "string") return false;
@@ -32,10 +29,10 @@ function isDocumentSection(x: unknown): x is CommunityRuleDocumentSection {
 /** Narrow `CreateFlowState.sections` into Community Rule document sections. */
 export function parseSectionsFromCreateFlowState(
   state: CreateFlowState,
-): CommunityRuleDocumentSection[] {
+): CommunityRuleSection[] {
   const raw = state.sections;
   if (!Array.isArray(raw)) return [];
-  const out: CommunityRuleDocumentSection[] = [];
+  const out: CommunityRuleSection[] = [];
   for (const x of raw) {
     if (isDocumentSection(x)) out.push(x);
   }
@@ -233,7 +230,7 @@ export function buildMethodSelectionsForDocument(
 /** Read `document.sections` from a stored published payload for display. */
 export function parseDocumentSectionsForDisplay(
   document: unknown,
-): CommunityRuleDocumentSection[] {
+): CommunityRuleSection[] {
   if (!document || typeof document !== "object") return [];
   const sections = (document as Record<string, unknown>).sections;
   if (!Array.isArray(sections)) return [];
diff --git a/lib/create/documentEntryGuards.ts b/lib/create/documentEntryGuards.ts
new file mode 100644
index 0000000..b2bef26
--- /dev/null
+++ b/lib/create/documentEntryGuards.ts
@@ -0,0 +1,26 @@
+import type {
+  CommunityRuleEntry,
+  CommunityRuleLabeledBlock,
+} from "../../app/components/type/CommunityRule/CommunityRule.types";
+
+function isLabeledBlock(x: unknown): x is CommunityRuleLabeledBlock {
+  if (!x || typeof x !== "object") return false;
+  const o = x as Record<string, unknown>;
+  return typeof o.label === "string" && typeof o.body === "string";
+}
+
+/** Shared by publish payload parsing and template body parsing — keep in sync. */
+export function isDocumentEntry(x: unknown): x is CommunityRuleEntry {
+  if (!x || typeof x !== "object") return false;
+  const o = x as Record<string, unknown>;
+  if (typeof o.title !== "string" || o.title.trim().length === 0) {
+    return false;
+  }
+  if (typeof o.body !== "string") return false;
+  if (o.blocks !== undefined) {
+    if (!Array.isArray(o.blocks) || !o.blocks.every(isLabeledBlock)) {
+      return false;
+    }
+  }
+  return true;
+}
diff --git a/lib/create/templateReviewMapping.ts b/lib/create/templateReviewMapping.ts
index b054453..8861004 100644
--- a/lib/create/templateReviewMapping.ts
+++ b/lib/create/templateReviewMapping.ts
@@ -1,18 +1,9 @@
-import type { Category } from "../../app/components/cards/RuleCard/RuleCard.types";
+import type { Category } from "../../app/components/cards/Rule";
 import type { ChipOption } from "../../app/components/controls/MultiSelect/MultiSelect.types";
+import type { CommunityRuleSection } from "../../app/components/type/CommunityRule/CommunityRule.types";
+import { isDocumentEntry } from "./documentEntryGuards";
 
-function isDocumentEntry(x: unknown): x is { title: string; body: string } {
-  if (!x || typeof x !== "object") return false;
-  const o = x as Record<string, unknown>;
-  return typeof o.title === "string" && typeof o.body === "string";
-}
-
-function isDocumentSection(
-  x: unknown,
-): x is {
-  categoryName: string;
-  entries: { title: string; body: string }[];
-} {
+function isDocumentSection(x: unknown): x is CommunityRuleSection {
   if (!x || typeof x !== "object") return false;
   const o = x as Record<string, unknown>;
   if (typeof o.categoryName !== "string") return false;
@@ -79,7 +70,7 @@ export interface TemplateChipDetail {
 }
 
 /**
- * Maps API template `body` (published-rule document shape) to RuleCard category
+ * Maps API template `body` (published-rule document shape) to Rule category
  * rows **plus** a chipId → detail lookup for wiring chip clicks to the
  * read-only detail modal.
  */
@@ -144,8 +135,11 @@ export function templateSummaryFromBody(
   for (const s of sections) {
     if (!isDocumentSection(s)) continue;
     const first = s.entries[0];
-    if (isDocumentEntry(first) && first.body.trim()) {
-      return first.body.trim();
+    if (isDocumentEntry(first)) {
+      const main = first.body.trim();
+      if (main.length > 0) return main;
+      const fromBlock = first.blocks?.[0]?.body?.trim();
+      if (fromBlock && fromBlock.length > 0) return fromBlock;
     }
   }
   return "";
diff --git a/lib/propNormalization.ts b/lib/propNormalization.ts
index 952726a..fd56eef 100644
--- a/lib/propNormalization.ts
+++ b/lib/propNormalization.ts
@@ -72,14 +72,14 @@ export type AlertSizeValue = (typeof ALERT_SIZE_OPTIONS)[number];
 export const TOOLTIP_POSITION_OPTIONS = ["top", "bottom"] as const;
 export type TooltipPositionValue = (typeof TOOLTIP_POSITION_OPTIONS)[number];
 
-export const MENU_BAR_SIZE_OPTIONS = [
+export const MENU_SIZE_OPTIONS = [
   "X Small",
   "Small",
   "Medium",
   "Large",
   "X Large",
 ] as const;
-export type MenuBarSizeValue = (typeof MENU_BAR_SIZE_OPTIONS)[number];
+export type MenuSizeValue = (typeof MENU_SIZE_OPTIONS)[number];
 
 export const NAVIGATION_ITEM_VARIANT_OPTIONS = ["default"] as const;
 export type NavigationItemVariantValue =
@@ -145,13 +145,13 @@ export const QUOTE_BLOCK_VARIANT_OPTIONS = [
 export type QuoteBlockVariantValue =
   (typeof QUOTE_BLOCK_VARIANT_OPTIONS)[number];
 
-export const NUMBER_CARD_SIZE_OPTIONS = [
+export const STEP_SIZE_OPTIONS = [
   "small",
   "medium",
   "large",
   "xlarge",
 ] as const;
-export type NumberCardSizeValue = (typeof NUMBER_CARD_SIZE_OPTIONS)[number];
+export type StepSizeValue = (typeof STEP_SIZE_OPTIONS)[number];
 
 export const ASK_ORGANIZER_VARIANT_OPTIONS = [
   "centered",
@@ -162,14 +162,6 @@ export const ASK_ORGANIZER_VARIANT_OPTIONS = [
 export type AskOrganizerVariantValue =
   (typeof ASK_ORGANIZER_VARIANT_OPTIONS)[number];
 
-export const CONTEXT_MENU_ITEM_SIZE_OPTIONS = [
-  "small",
-  "medium",
-  "large",
-] as const;
-export type ContextMenuItemSizeValue =
-  (typeof CONTEXT_MENU_ITEM_SIZE_OPTIONS)[number];
-
 export const TOGGLE_GROUP_POSITION_OPTIONS = [
   "left",
   "middle",
@@ -185,8 +177,8 @@ export const TEXT_AREA_APPEARANCE_OPTIONS = ["default", "embedded"] as const;
 export type TextAreaAppearanceValue =
   (typeof TEXT_AREA_APPEARANCE_OPTIONS)[number];
 
-export const RULE_CARD_SIZE_OPTIONS = ["XS", "S", "M", "L"] as const;
-export type RuleCardSizeValue = (typeof RULE_CARD_SIZE_OPTIONS)[number];
+export const RULE_SIZE_OPTIONS = ["XS", "S", "M", "L"] as const;
+export type RuleSizeValue = (typeof RULE_SIZE_OPTIONS)[number];
 
 export const CHIP_STATE_OPTIONS = [
   "unselected",
@@ -212,19 +204,19 @@ export const INPUT_LABEL_PALETTE_OPTIONS = ["default", "inverse"] as const;
 export type InputLabelPaletteValue =
   (typeof INPUT_LABEL_PALETTE_OPTIONS)[number];
 
-export const MENU_BAR_ITEM_STATE_OPTIONS = [
+export const MENU_ITEM_STATE_OPTIONS = [
   "default",
   "hover",
   "selected",
 ] as const;
-export type MenuBarItemStateValue =
-  (typeof MENU_BAR_ITEM_STATE_OPTIONS)[number];
+export type MenuItemStateValue =
+  (typeof MENU_ITEM_STATE_OPTIONS)[number];
 
-export const MENU_BAR_ITEM_MODE_OPTIONS = ["default", "inverse"] as const;
-export type MenuBarItemModeValue = (typeof MENU_BAR_ITEM_MODE_OPTIONS)[number];
+export const MENU_ITEM_MODE_OPTIONS = ["default", "inverse"] as const;
+export type MenuItemModeValue = (typeof MENU_ITEM_MODE_OPTIONS)[number];
 
-export const MENU_BAR_ITEM_SIZE_OPTIONS = MENU_BAR_SIZE_OPTIONS;
-export type MenuBarItemSizeValue = MenuBarSizeValue;
+export const MENU_ITEM_SIZE_OPTIONS = MENU_SIZE_OPTIONS;
+export type MenuItemSizeValue = MenuSizeValue;
 
 export const BUTTON_TYPE_OPTIONS = [
   "filled",
diff --git a/messages/en/components/cardSteps.json b/messages/en/components/cardSteps.json
new file mode 100644
index 0000000..a5c2508
--- /dev/null
+++ b/messages/en/components/cardSteps.json
@@ -0,0 +1,7 @@
+{
+  "_comment": "CardSteps section defaults (shared across pages)",
+  "titleLg": "How CommunityRule helps",
+  "buttons": {
+    "seeHowItWorks": "See how it works"
+  }
+}
diff --git a/messages/en/components/menuBar.json b/messages/en/components/menu.json
similarity index 100%
rename from messages/en/components/menuBar.json
rename to messages/en/components/menu.json
diff --git a/messages/en/components/numberedCards.json b/messages/en/components/numberedCards.json
deleted file mode 100644
index 25f6089..0000000
--- a/messages/en/components/numberedCards.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "_comment": "NumberedCards component defaults (shared across pages)",
-  "titleLg": "How CommunityRule helps",
-  "buttons": {
-    "createCommunityRule": "Create CommunityRule",
-    "seeHowItWorks": "See how it works"
-  }
-}
diff --git a/messages/en/create/topNav.json b/messages/en/create/topNav.json
index 7574805..103fa92 100644
--- a/messages/en/create/topNav.json
+++ b/messages/en/create/topNav.json
@@ -1,4 +1,6 @@
 {
+  "bannerAriaLabel": "Create rule flow navigation",
+  "navAriaLabel": "Create flow navigation",
   "saveAndExit": "Save & Exit",
   "exit": "Exit",
   "share": "Share",
diff --git a/messages/en/index.ts b/messages/en/index.ts
index 62495fb..6bd2960 100644
--- a/messages/en/index.ts
+++ b/messages/en/index.ts
@@ -1,13 +1,13 @@
 import common from "./common.json";
 import heroBanner from "./components/heroBanner.json";
-import numberedCards from "./components/numberedCards.json";
+import cardSteps from "./components/cardSteps.json";
 import askOrganizer from "./components/askOrganizer.json";
 import featureGrid from "./components/featureGrid.json";
 import footer from "./components/footer.json";
 import header from "./components/header.json";
 import homeHeader from "./components/homeHeader.json";
 import languageSwitcher from "./components/languageSwitcher.json";
-import menuBar from "./components/menuBar.json";
+import menu from "./components/menu.json";
 import quoteBlock from "./components/quoteBlock.json";
 import ruleCard from "./components/ruleCard.json";
 import ruleStack from "./components/ruleStack.json";
@@ -54,14 +54,14 @@ import createTemplateReview from "./create/templateReview.json";
 export default {
   common,
   heroBanner,
-  numberedCards,
+  cardSteps,
   askOrganizer,
   featureGrid,
   footer,
   header,
   homeHeader,
   languageSwitcher,
-  menuBar,
+  menu,
   quoteBlock,
   ruleCard,
   ruleStack,
diff --git a/messages/en/pages/home.json b/messages/en/pages/home.json
index 564c934..c0c5a08 100644
--- a/messages/en/pages/home.json
+++ b/messages/en/pages/home.json
@@ -7,8 +7,11 @@
     "ctaText": "Learn how CommunityRule works",
     "ctaHref": "#"
   },
-  "numberedCards": {
+  "cardSteps": {
     "title": "How CommunityRule works",
+    "headingDesktopLine1": "How",
+    "headingDesktopLine2": "CommunityRule",
+    "headingDesktopLine3": "helps",
     "subtitle": "Here's a quick overview of the process, from start to finish.",
     "cards": {
       "card1": {
diff --git a/next.config.mjs b/next.config.mjs
index 43a3808..d5caa5c 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -7,7 +7,7 @@ const nextConfig = {
   serverExternalPackages: ["@prisma/client"],
   /**
    * `next dev --turbopack` does not use `webpack()`; without this, `.svg`
-   * imports resolve as asset URLs and {@link app/components/asset/Icon.tsx}
+   * imports resolve as asset URLs and {@link app/components/asset/icon/Icon.tsx}
    * cannot render them as components.
    */
   turbopack: {
diff --git a/prisma/seed.ts b/prisma/seed.ts
index e5936fe..a906b33 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -5,7 +5,7 @@ import { seedMethodFacets } from "./seed/methodFacets";
  * Curated rule templates for GET /api/templates.
  * Home “Popular templates” list uses `lib/templates/governanceTemplateCatalog.ts` (Figma 21764-16435);
  * DB titles/descriptions should stay aligned with `governanceTemplateCatalog.ts`.
- * `body.sections` use the same category row labels as the final-review RuleCard
+ * `body.sections` use the same category row labels as the final-review Rule
  * (Values, Communication, Membership, Decision-making, Conflict management) so
  * template review matches that layout; `entries[].title` = chip labels, `body` = supporting text.
  * Chip titles per template are sourced from the product **Template Composition** workbook (xlsx column
diff --git a/public/assets/Vector_Dao.svg b/public/assets/vector/dao.svg
similarity index 100%
rename from public/assets/Vector_Dao.svg
rename to public/assets/vector/dao.svg
diff --git a/public/assets/Vector_Default.svg b/public/assets/vector/default.svg
similarity index 100%
rename from public/assets/Vector_Default.svg
rename to public/assets/vector/default.svg
diff --git a/public/assets/Vector_MutualAid.svg b/public/assets/vector/mutual-aid.svg
similarity index 100%
rename from public/assets/Vector_MutualAid.svg
rename to public/assets/vector/mutual-aid.svg
diff --git a/public/assets/Vector_OpenSource.svg b/public/assets/vector/open-source.svg
similarity index 100%
rename from public/assets/Vector_OpenSource.svg
rename to public/assets/vector/open-source.svg
diff --git a/public/assets/Vector_Shapes.svg b/public/assets/vector/shapes.svg
similarity index 100%
rename from public/assets/Vector_Shapes.svg
rename to public/assets/vector/shapes.svg
diff --git a/public/assets/Vector_WorkerCoop.svg b/public/assets/vector/worker-coop.svg
similarity index 100%
rename from public/assets/Vector_WorkerCoop.svg
rename to public/assets/vector/worker-coop.svg
diff --git a/stories/ContextMenu/ContextMenu.stories.js b/stories/ContextMenu/ContextMenu.stories.js
deleted file mode 100644
index 32f3c45..0000000
--- a/stories/ContextMenu/ContextMenu.stories.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, { useState } from "react";
-import ContextMenu from "../../app/components/modals/ContextMenu/ContextMenu";
-import ContextMenuItem from "../../app/components/modals/ContextMenuItem";
-import ContextMenuSection from "../../app/components/modals/ContextMenu/ContextMenuSection";
-import ContextMenuDivider from "../../app/components/modals/ContextMenu/ContextMenuDivider";
-
-export default {
-  title: "Components/ContextMenu/ContextMenu",
-  component: ContextMenu,
-  argTypes: {
-    className: {
-      control: { type: "text" },
-    },
-  },
-};
-
-const Template = (args) => (
-  <ContextMenu {...args}>
-    <ContextMenuItem>Context Menu Item</ContextMenuItem>
-    <ContextMenuItem>Context Menu Item</ContextMenuItem>
-    <ContextMenuItem hasSubmenu>Context Menu Item</ContextMenuItem>
-    <ContextMenuItem hasSubmenu>Context Menu Item</ContextMenuItem>
-    <ContextMenuDivider />
-    <ContextMenuItem selected>Context Menu Item</ContextMenuItem>
-    <ContextMenuItem>Context Menu Item</ContextMenuItem>
-    <ContextMenuDivider />
-    <ContextMenuSection title="Section Title">
-      <ContextMenuItem>Context Menu Item</ContextMenuItem>
-      <ContextMenuItem>Context Menu Item</ContextMenuItem>
-    </ContextMenuSection>
-  </ContextMenu>
-);
-
-export const Default = Template.bind({});
-
-export const WithCustomStyling = Template.bind({});
-WithCustomStyling.args = {
-  className: "min-w-[250px]",
-};
-
-// Individual component stories
-export const MenuItem = () => (
-  <div className="space-y-2">
-    <ContextMenuItem>Default Menu Item</ContextMenuItem>
-    <ContextMenuItem selected>Selected Menu Item</ContextMenuItem>
-    <ContextMenuItem hasSubmenu>Menu Item with Submenu</ContextMenuItem>
-    <ContextMenuItem disabled>Disabled Menu Item</ContextMenuItem>
-  </div>
-);
-
-export const MenuSection = () => (
-  <ContextMenu>
-    <ContextMenuSection title="First Section">
-      <ContextMenuItem>Item 1</ContextMenuItem>
-      <ContextMenuItem>Item 2</ContextMenuItem>
-    </ContextMenuSection>
-    <ContextMenuDivider />
-    <ContextMenuSection title="Second Section">
-      <ContextMenuItem>Item 3</ContextMenuItem>
-      <ContextMenuItem>Item 4</ContextMenuItem>
-    </ContextMenuSection>
-  </ContextMenu>
-);
-
-export const MenuDivider = () => (
-  <ContextMenu>
-    <ContextMenuItem>Item Above</ContextMenuItem>
-    <ContextMenuDivider />
-    <ContextMenuItem>Item Below</ContextMenuItem>
-  </ContextMenu>
-);
-
-export const Interactive = () => {
-  const [selectedItem, setSelectedItem] = useState("");
-
-  return (
-    <ContextMenu>
-      <ContextMenuItem
-        selected={selectedItem === "item1"}
-        onClick={() => setSelectedItem("item1")}
-      >
-        Context Menu Item 1
-      </ContextMenuItem>
-      <ContextMenuItem
-        selected={selectedItem === "item2"}
-        onClick={() => setSelectedItem("item2")}
-      >
-        Context Menu Item 2
-      </ContextMenuItem>
-      <ContextMenuItem
-        selected={selectedItem === "item3"}
-        onClick={() => setSelectedItem("item3")}
-      >
-        Context Menu Item 3
-      </ContextMenuItem>
-    </ContextMenu>
-  );
-};
-
-// Comparison stories
-export const AllVariants = () => (
-  <div className="space-y-4">
-    <div>
-      <h3 className="text-sm font-medium mb-2">Default Items</h3>
-      <ContextMenu>
-        <ContextMenuItem>Context Menu Item</ContextMenuItem>
-        <ContextMenuItem>Context Menu Item</ContextMenuItem>
-      </ContextMenu>
-    </div>
-
-    <div>
-      <h3 className="text-sm font-medium mb-2">With Submenu Indicators</h3>
-      <ContextMenu>
-        <ContextMenuItem hasSubmenu>Context Menu Item</ContextMenuItem>
-        <ContextMenuItem hasSubmenu>Context Menu Item</ContextMenuItem>
-      </ContextMenu>
-    </div>
-
-    <div>
-      <h3 className="text-sm font-medium mb-2">With Selected Item</h3>
-      <ContextMenu>
-        <ContextMenuItem>Context Menu Item</ContextMenuItem>
-        <ContextMenuItem selected>Context Menu Item</ContextMenuItem>
-        <ContextMenuItem>Context Menu Item</ContextMenuItem>
-      </ContextMenu>
-    </div>
-
-    <div>
-      <h3 className="text-sm font-medium mb-2">With Sections</h3>
-      <ContextMenu>
-        <ContextMenuSection title="Section Title">
-          <ContextMenuItem>Context Menu Item</ContextMenuItem>
-          <ContextMenuItem>Context Menu Item</ContextMenuItem>
-        </ContextMenuSection>
-      </ContextMenu>
-    </div>
-  </div>
-);
diff --git a/stories/WebVitalsDashboard.stories.js b/stories/WebVitalsDashboard.stories.js
index e19144c..3659e12 100644
--- a/stories/WebVitalsDashboard.stories.js
+++ b/stories/WebVitalsDashboard.stories.js
@@ -1,7 +1,7 @@
-import WebVitalsDashboard from "../app/components/sections/WebVitalsDashboard";
+import WebVitalsDashboard from "../app/(admin)/monitor/_components/WebVitalsDashboard";
 
 export default {
-  title: "Components/WebVitalsDashboard",
+  title: "Components/Monitor/WebVitalsDashboard",
   component: WebVitalsDashboard,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/icons/Avatar.stories.js b/stories/asset/Avatar.stories.js
similarity index 93%
rename from stories/icons/Avatar.stories.js
rename to stories/asset/Avatar.stories.js
index 1016640..13863e5 100644
--- a/stories/icons/Avatar.stories.js
+++ b/stories/asset/Avatar.stories.js
@@ -1,14 +1,14 @@
-import Avatar from "../../app/components/icons/Avatar";
+import Avatar from "../../app/components/asset/Avatar";
 
 export default {
-  title: "Components/Icons/Avatar",
+  title: "Components/Asset/Avatar",
   component: Avatar,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "A simple avatar component that displays user profile images with multiple size variants. Supports custom images and alt text for accessibility.",
+          "Rounded profile image primitive; stacks with **`AvatarContainer`**. Fuller DS-driven Avatar behavior is **[CR-58](https://linear.app/community-rule/issue/CR-58)**.",
       },
     },
   },
diff --git a/stories/utility/AvatarContainer.stories.js b/stories/asset/AvatarContainer.stories.js
similarity index 95%
rename from stories/utility/AvatarContainer.stories.js
rename to stories/asset/AvatarContainer.stories.js
index 2162ae1..55a95d3 100644
--- a/stories/utility/AvatarContainer.stories.js
+++ b/stories/asset/AvatarContainer.stories.js
@@ -1,15 +1,15 @@
-import AvatarContainer from "../../app/components/utility/AvatarContainer";
-import Avatar from "../../app/components/icons/Avatar";
+import AvatarContainer from "../../app/components/asset/AvatarContainer";
+import Avatar from "../../app/components/asset/Avatar";
 
 export default {
-  title: "Components/Utility/AvatarContainer",
+  title: "Components/Asset/AvatarContainer",
   component: AvatarContainer,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "A container component that groups multiple avatars together with overlapping spacing. Useful for displaying multiple users or team members in a compact format.",
+          "Stacks multiple `Avatar` children with overlapping spacing. Lives under `asset/` next to Avatar-related chrome.",
       },
     },
   },
diff --git a/stories/asset/Icon.stories.js b/stories/asset/Icon.stories.js
index 538cb8e..75aab31 100644
--- a/stories/asset/Icon.stories.js
+++ b/stories/asset/Icon.stories.js
@@ -1,4 +1,6 @@
-import { Icon, ICON_NAME_OPTIONS } from "../../app/components/asset";
+import Icon, {
+  ICON_NAME_OPTIONS,
+} from "../../app/components/asset/icon";
 
 export default {
   title: "Components/Asset/Icon",
diff --git a/stories/icons/Logo.stories.js b/stories/asset/Logo.stories.js
similarity index 94%
rename from stories/icons/Logo.stories.js
rename to stories/asset/Logo.stories.js
index 522b37c..d979c31 100644
--- a/stories/icons/Logo.stories.js
+++ b/stories/asset/Logo.stories.js
@@ -1,7 +1,7 @@
-import Logo from "../../app/components/asset/logo";
+import Logo from "../../app/components/asset/Logo";
 
 export default {
-  title: "Components/Icons/Logo",
+  title: "Components/Asset/Logo",
   component: Logo,
   parameters: {
     layout: "centered",
@@ -118,13 +118,13 @@ export const IconOnly = {
   },
 };
 
-export const TopNavContext = {
+export const TopContext = {
   args: {},
   render: () => (
     <div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)] p-8">
       <div className="max-w-4xl mx-auto">
         <h2 className="text-white font-semibold mb-6">
-          TopNav Context (Responsive)
+          Top (navigation) — responsive
         </h2>
         <div className="space-y-4">
           <div className="flex items-center space-x-4">
@@ -143,7 +143,7 @@ export const TopNavContext = {
     docs: {
       description: {
         story:
-          "TopNav context showing responsive logo sizes. Text hides on smallest breakpoint, shows on larger breakpoints.",
+          "`Top` (Figma Navigation / Top) logo sizes: folder-top vs header variants.",
       },
     },
   },
diff --git a/stories/create-flow/CardStack.stories.js b/stories/cards/CardStack.stories.js
similarity index 94%
rename from stories/create-flow/CardStack.stories.js
rename to stories/cards/CardStack.stories.js
index 3b583aa..545d0be 100644
--- a/stories/create-flow/CardStack.stories.js
+++ b/stories/cards/CardStack.stories.js
@@ -1,4 +1,4 @@
-import CardStack from "../../app/components/utility/CardStack";
+import CardStack from "../../app/components/cards/CardStack";
 
 const SAMPLE_CARDS = [
   {
@@ -43,14 +43,14 @@ const SAMPLE_CARDS = [
 ];
 
 export default {
-  title: "Create Flow/CardStack",
+  title: "Components/Cards/CardStack",
   component: CardStack,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "Card stack for the create flow: compact grid or expanded list with toggle. Uses Card components; toggle visible only when hasMore is true.",
+          "Card stack for the create flow: compact grid or expanded list with toggle. Uses Selection tiles; toggle visible only when hasMore is true.",
       },
     },
   },
diff --git a/stories/cards/IconCard.stories.js b/stories/cards/Icon.stories.js
similarity index 88%
rename from stories/cards/IconCard.stories.js
rename to stories/cards/Icon.stories.js
index 2c93784..ccb0686 100644
--- a/stories/cards/IconCard.stories.js
+++ b/stories/cards/Icon.stories.js
@@ -1,9 +1,9 @@
-import IconCard from "../../app/components/cards/IconCard";
-import { getAssetPath } from "../../lib/assetUtils";
+import Icon from "../../app/components/cards/Icon";
+import { getAssetPath, vectorMarkPath } from "../../lib/assetUtils";
 
 export default {
-  title: "Components/Cards/IconCard",
-  component: IconCard,
+  title: "Components/Cards/Icon",
+  component: Icon,
   parameters: {
     layout: "centered",
     docs: {
@@ -34,7 +34,7 @@ export default {
 // Worker's Coop icon
 const WorkerCoopIcon = () => (
   <img
-    src={getAssetPath("assets/Vector_WorkerCoop.svg")}
+    src={getAssetPath(vectorMarkPath("worker-coop"))}
     alt=""
     className="w-[36px] h-[36px]"
     width="36"
diff --git a/stories/cards/MiniCard.stories.js b/stories/cards/Mini.stories.js
similarity index 90%
rename from stories/cards/MiniCard.stories.js
rename to stories/cards/Mini.stories.js
index aba9211..a05a636 100644
--- a/stories/cards/MiniCard.stories.js
+++ b/stories/cards/Mini.stories.js
@@ -1,8 +1,8 @@
-import MiniCard from "../../app/components/cards/MiniCard";
+import Mini from "../../app/components/cards/Mini";
 
 export default {
-  title: "Components/Cards/MiniCard",
-  component: MiniCard,
+  title: "Components/Cards/Mini",
+  component: Mini,
   parameters: {
     layout: "centered",
   },
@@ -37,25 +37,25 @@ export const Default = {
 export const ColorVariants = {
   render: () => (
     <div className="grid grid-cols-2 gap-4">
-      <MiniCard
+      <Mini
         backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
         labelLine1="Decision-making"
         labelLine2="support"
         panelContent="assets/Feature_Support.png"
       />
-      <MiniCard
+      <Mini
         backgroundColor="bg-[#D1FFE2]"
         labelLine1="Values alignment"
         labelLine2="exercises"
         panelContent="assets/Feature_Exercises.png"
       />
-      <MiniCard
+      <Mini
         backgroundColor="bg-[#F4CAFF]"
         labelLine1="Membership"
         labelLine2="guidance"
         panelContent="assets/Feature_Guidance.png"
       />
-      <MiniCard
+      <Mini
         backgroundColor="bg-[#CBDDFF]"
         labelLine1="Conflict resolution"
         labelLine2="tools"
diff --git a/stories/cards/RuleCard.stories.js b/stories/cards/Rule.stories.js
similarity index 98%
rename from stories/cards/RuleCard.stories.js
rename to stories/cards/Rule.stories.js
index 5378837..7300a58 100644
--- a/stories/cards/RuleCard.stories.js
+++ b/stories/cards/Rule.stories.js
@@ -1,9 +1,9 @@
-import RuleCard from "../../app/components/cards/RuleCard";
+import Rule from "../../app/components/cards/Rule";
 import Image from "next/image";
 
 export default {
-  title: "Components/Cards/RuleCard",
-  component: RuleCard,
+  title: "Components/Cards/Rule",
+  component: Rule,
   parameters: {
     layout: "centered",
     docs: {
@@ -305,7 +305,7 @@ export const AllVariants = {
   // eslint-disable-next-line no-unused-vars
   render: (_args) => (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
-      <RuleCard
+      <Rule
         title="Consensus clusters"
         description="Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council."
         backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
@@ -320,7 +320,7 @@ export const AllVariants = {
         }
         onClick={() => console.log("Consensus clusters selected")}
       />
-      <RuleCard
+      <Rule
         title="Consensus"
         description="Decisions that affect the group collectively should involve participation of all participants."
         backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
@@ -335,7 +335,7 @@ export const AllVariants = {
         }
         onClick={() => console.log("Consensus selected")}
       />
-      <RuleCard
+      <Rule
         title="Elected Board"
         description="An elected board determines policies and organizes their implementation."
         backgroundColor="bg-[var(--color-surface-default-brand-red)]"
@@ -350,7 +350,7 @@ export const AllVariants = {
         }
         onClick={() => console.log("Elected Board selected")}
       />
-      <RuleCard
+      <Rule
         title="Petition"
         description="All participants can propose and vote on proposals for the group."
         backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
diff --git a/stories/cards/Card.stories.js b/stories/cards/Selection.stories.js
similarity index 95%
rename from stories/cards/Card.stories.js
rename to stories/cards/Selection.stories.js
index 7f37b5d..0b6468f 100644
--- a/stories/cards/Card.stories.js
+++ b/stories/cards/Selection.stories.js
@@ -1,8 +1,8 @@
-import Card from "../../app/components/cards/Card";
+import Selection from "../../app/components/cards/Selection";
 
 export default {
-  title: "Components/Cards/Card",
-  component: Card,
+  title: "Components/Cards/Selection",
+  component: Selection,
   parameters: {
     layout: "centered",
     docs: {
@@ -104,7 +104,7 @@ export const AllVariants = {
         <p className="font-inter text-sm font-medium text-gray-600">
           Horizontal + Recommended
         </p>
-        <Card
+        <Selection
           label="Label"
           supportText="Members vote to resolve a dispute democratically."
           recommended={true}
@@ -116,7 +116,7 @@ export const AllVariants = {
         <p className="font-inter text-sm font-medium text-gray-600">
           Horizontal + Selected
         </p>
-        <Card
+        <Selection
           label="Label"
           supportText="Members vote to resolve a dispute democratically."
           recommended={false}
@@ -128,7 +128,7 @@ export const AllVariants = {
         <p className="font-inter text-sm font-medium text-gray-600">
           Vertical + Recommended
         </p>
-        <Card
+        <Selection
           label="Label"
           supportText="Invite-only"
           recommended={true}
@@ -141,7 +141,7 @@ export const AllVariants = {
         <p className="font-inter text-sm font-medium text-gray-600">
           Vertical + Selected
         </p>
-        <Card
+        <Selection
           label="Label"
           supportText="Invite-only"
           recommended={false}
diff --git a/stories/cards/NumberCard.stories.js b/stories/cards/Step.stories.js
similarity index 79%
rename from stories/cards/NumberCard.stories.js
rename to stories/cards/Step.stories.js
index 552c933..5d55ad6 100644
--- a/stories/cards/NumberCard.stories.js
+++ b/stories/cards/Step.stories.js
@@ -1,14 +1,14 @@
-import NumberCard from "../../app/components/cards/NumberCard";
+import Step from "../../app/components/cards/Step";
 
 export default {
-  title: "Components/Cards/NumberCard",
-  component: NumberCard,
+  title: "Components/Cards/Step",
+  component: Step,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "Individual number card component that displays a step in a process with a numbered icon and descriptive text. Supports explicit size variants (Small, Medium, Large, XLarge) matching Figma designs, or responsive layouts when size is not specified.",
+          "Figma Card / Step: numbered tile with descriptive text. Supports explicit size variants (small, medium, large, xlarge) matching Figma, or responsive layouts when size is not specified.",
       },
     },
   },
@@ -23,9 +23,9 @@ export default {
     },
     size: {
       control: { type: "select" },
-      options: ["Small", "Medium", "Large", "XLarge", undefined],
+      options: ["small", "medium", "large", "xlarge", undefined],
       description:
-        "Explicit size variant matching Figma designs. If not specified, uses responsive breakpoints for backward compatibility.",
+        "Explicit size variant matching Figma. If not specified, uses responsive breakpoints for backward compatibility.",
     },
     iconShape: {
       control: { type: "select" },
@@ -129,34 +129,34 @@ export const AllSizes = {
     <div className="space-y-8">
       <div>
         <h3 className="mb-4 text-lg font-semibold">Small</h3>
-        <NumberCard
+        <Step
           number={1}
           text="Document how your community makes decisions"
-          size="Small"
+          size="small"
         />
       </div>
       <div>
         <h3 className="mb-4 text-lg font-semibold">Medium</h3>
-        <NumberCard
+        <Step
           number={2}
           text="Document how your community makes decisions"
-          size="Medium"
+          size="medium"
         />
       </div>
       <div>
         <h3 className="mb-4 text-lg font-semibold">Large</h3>
-        <NumberCard
+        <Step
           number={3}
           text="Document how your community makes decisions"
-          size="Large"
+          size="large"
         />
       </div>
       <div>
         <h3 className="mb-4 text-lg font-semibold">XLarge</h3>
-        <NumberCard
+        <Step
           number={1}
           text="Document how your community makes decisions"
-          size="XLarge"
+          size="xlarge"
         />
       </div>
     </div>
@@ -180,24 +180,16 @@ export const AllNumbers = {
   },
   render: (args) => (
     <div className="space-y-4">
-      <NumberCard {...args} number={1} text="First step in the process" />
-      <NumberCard
-        {...args}
-        number={2}
-        text="Second step with different content"
-      />
-      <NumberCard
-        {...args}
-        number={3}
-        text="Third and final step of the workflow"
-      />
+      <Step {...args} number={1} text="First step in the process" />
+      <Step {...args} number={2} text="Second step with different content" />
+      <Step {...args} number={3} text="Third and final step of the workflow" />
     </div>
   ),
   parameters: {
     docs: {
       description: {
         story:
-          "Shows all three numbered cards with different content to demonstrate the visual hierarchy.",
+          "Shows three Step tiles with different content to demonstrate the visual hierarchy.",
       },
     },
   },
diff --git a/stories/cards/TemplateReviewCard.stories.js b/stories/cards/TemplateReviewCard.stories.js
index f8a57a9..33c5701 100644
--- a/stories/cards/TemplateReviewCard.stories.js
+++ b/stories/cards/TemplateReviewCard.stories.js
@@ -42,11 +42,11 @@ export default {
     size: {
       control: "select",
       options: ["XS", "S", "M", "L"],
-      description: "RuleCard size variant",
+      description: "Rule size variant",
     },
     ruleCardClassName: {
       control: "text",
-      description: "Class names merged onto the inner RuleCard",
+      description: "Class names merged onto the inner Rule",
     },
   },
 };
diff --git a/stories/utility/InfoMessageBox.stories.js b/stories/controls/InfoMessageBox.stories.js
similarity index 86%
rename from stories/utility/InfoMessageBox.stories.js
rename to stories/controls/InfoMessageBox.stories.js
index 725807d..9050721 100644
--- a/stories/utility/InfoMessageBox.stories.js
+++ b/stories/controls/InfoMessageBox.stories.js
@@ -1,7 +1,7 @@
-import InfoMessageBox from "../../app/components/utility/InfoMessageBox";
+import InfoMessageBox from "../../app/components/controls/InfoMessageBox";
 
 export default {
-  title: "Components/Utility/InfoMessageBox",
+  title: "Components/Controls/InfoMessageBox",
   component: InfoMessageBox,
   parameters: {
     layout: "centered",
diff --git a/stories/utility/DecisionMakingSidebar.stories.js b/stories/controls/RailLockupAndInfoBox.stories.js
similarity index 52%
rename from stories/utility/DecisionMakingSidebar.stories.js
rename to stories/controls/RailLockupAndInfoBox.stories.js
index 0ddcc7e..7209f48 100644
--- a/stories/utility/DecisionMakingSidebar.stories.js
+++ b/stories/controls/RailLockupAndInfoBox.stories.js
@@ -1,15 +1,20 @@
-import DecisionMakingSidebar from "../../app/components/utility/DecisionMakingSidebar";
+import React from "react";
+import HeaderLockup from "../../app/components/type/HeaderLockup";
+import InfoMessageBox from "../../app/components/controls/InfoMessageBox";
 
+/**
+ * Compose pattern used by create-flow “decision approaches” rail: headline lockup
+ * plus bordered checklist — no standalone wrapper component.
+ */
 export default {
-  title: "Components/Utility/DecisionMakingSidebar",
-  component: DecisionMakingSidebar,
+  title: "Components/Controls/Rail header (lockup + info box)",
   parameters: {
     layout: "centered",
     backgrounds: { default: "dark" },
     docs: {
       description: {
         component:
-          "HeaderLockup + InfoMessageBox for decision-making step sidebars.",
+          "`HeaderLockup` stacked with `InfoMessageBox` — same chrome as decision-approaches step sidebars.",
       },
     },
   },
@@ -28,7 +33,20 @@ const messageItems = [
   { id: "c2", label: "Majority vote" },
 ];
 
+const compose = (args) => (
+  <div className="flex w-full min-w-0 flex-col gap-3">
+    <HeaderLockup
+      title={args.title}
+      description={args.description}
+      size={args.size}
+      justification={args.justification}
+    />
+    <InfoMessageBox title={args.messageBoxTitle} items={args.messageBoxItems} />
+  </div>
+);
+
 export const Default = {
+  render: compose,
   args: {
     title: "How does your group make decisions?",
     description:
@@ -41,6 +59,7 @@ export const Default = {
 };
 
 export const Medium = {
+  render: compose,
   args: {
     title: "Decision-making",
     description: "Short description.",
diff --git a/stories/utility/ModalFooter.stories.js b/stories/modals/ModalFooter.stories.js
similarity index 93%
rename from stories/utility/ModalFooter.stories.js
rename to stories/modals/ModalFooter.stories.js
index 983d5ca..09b53ad 100644
--- a/stories/utility/ModalFooter.stories.js
+++ b/stories/modals/ModalFooter.stories.js
@@ -1,7 +1,7 @@
-import ModalFooter from "../../app/components/utility/ModalFooter";
+import ModalFooter from "../../app/components/modals/ModalFooter";
 
 export default {
-  title: "Components/Utility/ModalFooter",
+  title: "Components/Modals/ModalFooter",
   component: ModalFooter,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/utility/ModalHeader.stories.js b/stories/modals/ModalHeader.stories.js
similarity index 87%
rename from stories/utility/ModalHeader.stories.js
rename to stories/modals/ModalHeader.stories.js
index 12498ee..0d5becb 100644
--- a/stories/utility/ModalHeader.stories.js
+++ b/stories/modals/ModalHeader.stories.js
@@ -1,7 +1,7 @@
-import ModalHeader from "../../app/components/utility/ModalHeader";
+import ModalHeader from "../../app/components/modals/ModalHeader";
 
 export default {
-  title: "Components/Utility/ModalHeader",
+  title: "Components/Modals/ModalHeader",
   component: ModalHeader,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/utility/CreateFlowFooter.stories.js b/stories/navigation/CreateFlowFooter.stories.js
similarity index 89%
rename from stories/utility/CreateFlowFooter.stories.js
rename to stories/navigation/CreateFlowFooter.stories.js
index 086f196..9cb3a6f 100644
--- a/stories/utility/CreateFlowFooter.stories.js
+++ b/stories/navigation/CreateFlowFooter.stories.js
@@ -1,8 +1,8 @@
-import CreateFlowFooter from "../../app/components/utility/CreateFlowFooter";
+import CreateFlowFooter from "../../app/components/navigation/CreateFlowFooter";
 import Button from "../../app/components/buttons/Button";
 
 export default {
-  title: "Components/Utility/CreateFlowFooter",
+  title: "Components/Navigation/CreateFlowFooter",
   component: CreateFlowFooter,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/utility/CreateFlowTopNav.stories.js b/stories/navigation/CreateFlowTopNav.stories.js
similarity index 91%
rename from stories/utility/CreateFlowTopNav.stories.js
rename to stories/navigation/CreateFlowTopNav.stories.js
index 2b511f4..4b8c12b 100644
--- a/stories/utility/CreateFlowTopNav.stories.js
+++ b/stories/navigation/CreateFlowTopNav.stories.js
@@ -1,7 +1,7 @@
-import CreateFlowTopNav from "../../app/components/utility/CreateFlowTopNav";
+import CreateFlowTopNav from "../../app/components/navigation/CreateFlowTopNav";
 
 export default {
-  title: "Components/Utility/CreateFlowTopNav",
+  title: "Components/Navigation/CreateFlowTopNav",
   component: CreateFlowTopNav,
   parameters: {
     layout: "fullscreen",
diff --git a/stories/navigation/Menu.stories.js b/stories/navigation/Menu.stories.js
new file mode 100644
index 0000000..02cc1b1
--- /dev/null
+++ b/stories/navigation/Menu.stories.js
@@ -0,0 +1,101 @@
+import Menu from "../../app/components/navigation/Menu";
+import MenuItem from "../../app/components/navigation/MenuItem";
+
+export default {
+  title: "Components/Navigation/Menu",
+  component: Menu,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Navigation Menu (`role=\"menubar\"`) groups MenuItem children. Consistent spacing and layout for horizontal nav clusters with multiple size variants.",
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["X Small", "Small", "Medium", "Large", "X Large"],
+      description: "The size of the menu and its children",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    size: "Small",
+  },
+  render: (args) => (
+    <Menu {...args}>
+      <MenuItem size="Large">Home</MenuItem>
+      <MenuItem size="Large">About</MenuItem>
+      <MenuItem size="Large">Contact</MenuItem>
+    </Menu>
+  ),
+};
+
+export const Sizes = {
+  args: {},
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-white font-semibold mb-3">X Small Size</h3>
+        <Menu size="X Small">
+          <MenuItem size="X Small">Home</MenuItem>
+          <MenuItem size="X Small">About</MenuItem>
+          <MenuItem size="X Small">Contact</MenuItem>
+        </Menu>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">Small Size</h3>
+        <Menu size="Small">
+          <MenuItem size="Large">Home</MenuItem>
+          <MenuItem size="Large">About</MenuItem>
+          <MenuItem size="Large">Contact</MenuItem>
+        </Menu>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">Medium Size</h3>
+        <Menu size="Medium">
+          <MenuItem size="Large">Home</MenuItem>
+          <MenuItem size="Large">About</MenuItem>
+          <MenuItem size="Large">Contact</MenuItem>
+        </Menu>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">Large Size</h3>
+        <Menu size="Large">
+          <MenuItem size="Large">Home</MenuItem>
+          <MenuItem size="Large">About</MenuItem>
+          <MenuItem size="Large">Contact</MenuItem>
+        </Menu>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">X Large Size</h3>
+        <Menu size="X Large">
+          <MenuItem size="X Large">Home</MenuItem>
+          <MenuItem size="X Large">About</MenuItem>
+          <MenuItem size="X Large">Contact</MenuItem>
+        </Menu>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Different size variants of the menu with consistent spacing and layout.",
+      },
+    },
+  },
+};
diff --git a/stories/navigation/MenuBar.stories.js b/stories/navigation/MenuBar.stories.js
deleted file mode 100644
index cb2bb7e..0000000
--- a/stories/navigation/MenuBar.stories.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import MenuBar from "../../app/components/navigation/MenuBar";
-import MenuBarItem from "../../app/components/navigation/MenuBarItem";
-
-export default {
-  title: "Components/Navigation/MenuBar",
-  component: MenuBar,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A navigation menu bar container that groups MenuBarItem components together. Provides consistent spacing and layout for navigation menus with multiple size variants.",
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["X Small", "Small", "Medium", "Large", "X Large"],
-      description: "The size of the menu bar and its children",
-    },
-    className: {
-      control: { type: "text" },
-      description: "Additional CSS classes",
-    },
-  },
-  tags: ["autodocs"],
-};
-
-export const Default = {
-  args: {
-    size: "Small",
-  },
-  render: (args) => (
-    <MenuBar {...args}>
-      <MenuBarItem size="Large">Home</MenuBarItem>
-      <MenuBarItem size="Large">About</MenuBarItem>
-      <MenuBarItem size="Large">Contact</MenuBarItem>
-    </MenuBar>
-  ),
-};
-
-export const Sizes = {
-  args: {},
-  render: () => (
-    <div className="space-y-6">
-      <div>
-        <h3 className="text-white font-semibold mb-3">X Small Size</h3>
-        <MenuBar size="X Small">
-          <MenuBarItem size="X Small">Home</MenuBarItem>
-          <MenuBarItem size="X Small">About</MenuBarItem>
-          <MenuBarItem size="X Small">Contact</MenuBarItem>
-        </MenuBar>
-      </div>
-
-      <div>
-        <h3 className="text-white font-semibold mb-3">Small Size</h3>
-        <MenuBar size="Small">
-          <MenuBarItem size="Large">Home</MenuBarItem>
-          <MenuBarItem size="Large">About</MenuBarItem>
-          <MenuBarItem size="Large">Contact</MenuBarItem>
-        </MenuBar>
-      </div>
-
-      <div>
-        <h3 className="text-white font-semibold mb-3">Medium Size</h3>
-        <MenuBar size="Medium">
-          <MenuBarItem size="Large">Home</MenuBarItem>
-          <MenuBarItem size="Large">About</MenuBarItem>
-          <MenuBarItem size="Large">Contact</MenuBarItem>
-        </MenuBar>
-      </div>
-
-      <div>
-        <h3 className="text-white font-semibold mb-3">Large Size</h3>
-        <MenuBar size="Large">
-          <MenuBarItem size="Large">Home</MenuBarItem>
-          <MenuBarItem size="Large">About</MenuBarItem>
-          <MenuBarItem size="Large">Contact</MenuBarItem>
-        </MenuBar>
-      </div>
-
-      <div>
-        <h3 className="text-white font-semibold mb-3">X Large Size</h3>
-        <MenuBar size="X Large">
-          <MenuBarItem size="X Large">Home</MenuBarItem>
-          <MenuBarItem size="X Large">About</MenuBarItem>
-          <MenuBarItem size="X Large">Contact</MenuBarItem>
-        </MenuBar>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Different size variants of the menu bar with consistent spacing and layout.",
-      },
-    },
-  },
-};
diff --git a/stories/navigation/MenuBarItem.stories.js b/stories/navigation/MenuItem.stories.js
similarity index 64%
rename from stories/navigation/MenuBarItem.stories.js
rename to stories/navigation/MenuItem.stories.js
index 645bc38..434a85c 100644
--- a/stories/navigation/MenuBarItem.stories.js
+++ b/stories/navigation/MenuItem.stories.js
@@ -1,14 +1,14 @@
-import MenuBarItem from "../../app/components/navigation/MenuBarItem";
+import MenuItem from "../../app/components/navigation/MenuItem";
 
 export default {
-  title: "Components/Navigation/MenuBarItem",
-  component: MenuBarItem,
+  title: "Components/Navigation/MenuItem",
+  component: MenuItem,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "A navigation menu item component with multiple variants, sizes, and states. Can render as a link or disabled span with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators.",
+          "A navigation menu item with multiple variants, sizes, and states. Renders as a link or button (or disabled span) with accessibility support. Use Tab to test focus indicators.",
       },
     },
   },
@@ -51,12 +51,12 @@ export const Modes = {
   render: (args) => (
     <div className="space-y-4">
       <div className="space-x-4">
-        <MenuBarItem {...args} mode="default">
+        <MenuItem {...args} mode="default">
           Default
-        </MenuBarItem>
-        <MenuBarItem {...args} mode="inverse">
+        </MenuItem>
+        <MenuItem {...args} mode="inverse">
           Inverse
-        </MenuBarItem>
+        </MenuItem>
       </div>
     </div>
   ),
@@ -77,21 +77,21 @@ export const Sizes = {
   render: (args) => (
     <div className="space-y-4">
       <div className="space-x-4">
-        <MenuBarItem {...args} size="X Small">
+        <MenuItem {...args} size="X Small">
           X Small
-        </MenuBarItem>
-        <MenuBarItem {...args} size="Small">
+        </MenuItem>
+        <MenuItem {...args} size="Small">
           Small
-        </MenuBarItem>
-        <MenuBarItem {...args} size="Medium">
+        </MenuItem>
+        <MenuItem {...args} size="Medium">
           Medium
-        </MenuBarItem>
-        <MenuBarItem {...args} size="Large">
+        </MenuItem>
+        <MenuItem {...args} size="Large">
           Large
-        </MenuBarItem>
-        <MenuBarItem {...args} size="X Large">
+        </MenuItem>
+        <MenuItem {...args} size="X Large">
           X Large
-        </MenuBarItem>
+        </MenuItem>
       </div>
     </div>
   ),
@@ -113,10 +113,10 @@ export const States = {
   render: (args) => (
     <div className="space-y-4">
       <div className="space-x-4">
-        <MenuBarItem {...args}>Normal</MenuBarItem>
-        <MenuBarItem {...args} disabled>
+        <MenuItem {...args}>Normal</MenuItem>
+        <MenuItem {...args} disabled>
           Disabled
-        </MenuBarItem>
+        </MenuItem>
       </div>
     </div>
   ),
@@ -136,42 +136,42 @@ export const AllModes = {
       <div>
         <h3 className="text-white font-semibold mb-3">Default Mode</h3>
         <div className="space-x-4">
-          <MenuBarItem size="X Small" mode="default">
+          <MenuItem size="X Small" mode="default">
             X Small
-          </MenuBarItem>
-          <MenuBarItem size="Large" mode="default">
+          </MenuItem>
+          <MenuItem size="Large" mode="default">
             Large
-          </MenuBarItem>
-          <MenuBarItem size="X Large" mode="default">
+          </MenuItem>
+          <MenuItem size="X Large" mode="default">
             X Large
-          </MenuBarItem>
+          </MenuItem>
         </div>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">Inverse Mode</h3>
         <div className="space-x-4">
-          <MenuBarItem mode="inverse" size="X Small">
+          <MenuItem mode="inverse" size="X Small">
             X Small
-          </MenuBarItem>
-          <MenuBarItem mode="inverse" size="Large">
+          </MenuItem>
+          <MenuItem mode="inverse" size="Large">
             Large
-          </MenuBarItem>
-          <MenuBarItem mode="inverse" size="X Large">
+          </MenuItem>
+          <MenuItem mode="inverse" size="X Large">
             X Large
-          </MenuBarItem>
+          </MenuItem>
         </div>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">Disabled States</h3>
         <div className="space-x-4">
-          <MenuBarItem size="Large" mode="default" disabled>
+          <MenuItem size="Large" mode="default" disabled>
             Default Disabled
-          </MenuBarItem>
-          <MenuBarItem mode="inverse" size="Large" disabled>
+          </MenuItem>
+          <MenuItem mode="inverse" size="Large" disabled>
             Inverse Disabled
-          </MenuBarItem>
+          </MenuItem>
         </div>
       </div>
     </div>
diff --git a/stories/navigation/TopNav.stories.js b/stories/navigation/Top.stories.js
similarity index 97%
rename from stories/navigation/TopNav.stories.js
rename to stories/navigation/Top.stories.js
index d52a538..04a4145 100644
--- a/stories/navigation/TopNav.stories.js
+++ b/stories/navigation/Top.stories.js
@@ -1,8 +1,8 @@
-import TopNav from "../../app/components/navigation/TopNav";
+import Top from "../../app/components/navigation/Top";
 
 export default {
-  title: "Components/Navigation/TopNav",
-  component: TopNav,
+  title: "Components/Navigation/Top",
+  component: Top,
   parameters: {
     layout: "fullscreen",
     docs: {
@@ -117,7 +117,7 @@ export const StandardInPageContext = {
   },
   render: (args) => (
     <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
-      <TopNav {...args} />
+      <Top {...args} />
       <main className="p-8">
         <div className="max-w-4xl mx-auto">
           <h1 className="text-2xl font-bold text-white mb-4">
@@ -168,7 +168,7 @@ export const HomePageInContext = {
   },
   render: (args) => (
     <div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)]">
-      <TopNav {...args} />
+      <Top {...args} />
       <main className="p-8">
         <div className="max-w-4xl mx-auto text-center">
           <h1 className="text-4xl font-bold text-white mb-4">
diff --git a/stories/pages/CompletedPage.stories.js b/stories/pages/CompletedPage.stories.js
index 8da1e99..0292167 100644
--- a/stories/pages/CompletedPage.stories.js
+++ b/stories/pages/CompletedPage.stories.js
@@ -28,7 +28,7 @@ export default {
     docs: {
       description: {
         component:
-          "Completed flow: teal background, inverse HeaderLockup, CommunityRule document, optional bottom toast.",
+          "Completed flow: teal background, inverse HeaderLockup, CommunityRule body, optional bottom toast.",
       },
     },
   },
diff --git a/stories/pages/FinalReviewPage.stories.js b/stories/pages/FinalReviewPage.stories.js
index 096cd2b..03a0e03 100644
--- a/stories/pages/FinalReviewPage.stories.js
+++ b/stories/pages/FinalReviewPage.stories.js
@@ -8,7 +8,7 @@ export default {
     docs: {
       description: {
         component:
-          "Pre-finalize review: HeaderLockup + expanded RuleCard sections.",
+          "Pre-finalize review: HeaderLockup + expanded Rule sections.",
       },
     },
   },
diff --git a/stories/sections/NumberedCards.stories.js b/stories/sections/CardSteps.stories.js
similarity index 68%
rename from stories/sections/NumberedCards.stories.js
rename to stories/sections/CardSteps.stories.js
index aad4794..ce43129 100644
--- a/stories/sections/NumberedCards.stories.js
+++ b/stories/sections/CardSteps.stories.js
@@ -1,30 +1,30 @@
-import NumberedCards from "../../app/components/sections/NumberedCards";
+import CardSteps from "../../app/components/sections/CardSteps";
 
 export default {
-  title: "Components/Sections/NumberedCards",
-  component: NumberedCards,
+  title: "Components/Sections/CardSteps",
+  component: CardSteps,
   parameters: {
     layout: "fullscreen",
     docs: {
       description: {
         component:
-          "A component system for visually communicating multi-step workflows, processes, or value propositions. The component's modular design with NumberCard and SectionNumber sub-components makes it ideal for explaining any sequential process while maintaining brand consistency and accessibility standards across the design system.",
+          "Marketing section (Figma SectionCardSteps) that composes **cards/Step** tiles with a section header and CTA. Use for sequential explainers on the home page and similar surfaces.",
       },
     },
   },
   argTypes: {
     title: {
       control: { type: "text" },
-      description: "The main title for the section",
+      description: "The main title for the section (mobile single line)",
     },
     subtitle: {
       control: { type: "text" },
-      description: "The subtitle text below the main title",
+      description: "Supporting text beside / below the title on large screens",
     },
-    cards: {
+    steps: {
       control: { type: "object" },
       description:
-        "Array of card objects with text, iconShape, and iconColor properties",
+        "Items rendered as **Step** cards (text, optional iconShape, iconColor)",
     },
   },
   tags: ["autodocs"],
@@ -34,7 +34,8 @@ export const Default = {
   args: {
     title: "How CommunityRule works",
     subtitle: "Here's a quick overview of the process, from start to finish.",
-    cards: [
+    headingDesktopLines: ["How", "CommunityRule", "helps"],
+    steps: [
       {
         text: "Document how your community makes decisions",
         iconShape: "blob",
@@ -58,7 +59,7 @@ export const CustomContent = {
   args: {
     title: "Our Process",
     subtitle: "Follow these simple steps to get started with your project.",
-    cards: [
+    steps: [
       {
         text: "Define your project requirements and goals",
         iconShape: "blob",
@@ -85,7 +86,7 @@ export const CustomContent = {
     docs: {
       description: {
         story:
-          "Example with custom content and four cards to show flexibility.",
+          "Example with custom content and four **Step** tiles to show flexibility.",
       },
     },
   },
diff --git a/stories/sections/CommunityRuleDocument.stories.js b/stories/sections/CommunityRuleDocument.stories.js
deleted file mode 100644
index f882157..0000000
--- a/stories/sections/CommunityRuleDocument.stories.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import CommunityRuleDocument from "../../app/components/sections/CommunityRuleDocument";
-
-const sampleSections = [
-  {
-    categoryName: "Decision making",
-    entries: [
-      {
-        title: "How proposals pass",
-        body: "Important decisions require unanimous agreement. Proposals pass only if no serious objections remain.",
-      },
-      {
-        title: "Blocks",
-        body: "Anyone with a serious objection may block consensus and require further discussion.",
-      },
-    ],
-  },
-  {
-    categoryName: "Membership",
-    entries: [
-      {
-        title: "Joining",
-        body: "New members are welcomed by consensus of existing members.",
-      },
-    ],
-  },
-];
-
-export default {
-  title: "Components/Sections/CommunityRuleDocument",
-  component: CommunityRuleDocument,
-  parameters: {
-    layout: "padded",
-  },
-  argTypes: {
-    sections: {
-      control: false,
-      description: "Document sections, each with a categoryName and entries.",
-    },
-    useCardStyle: {
-      control: "boolean",
-      description: "When true, wraps the document in a white card with a teal bar",
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    sections: sampleSections,
-    useCardStyle: false,
-  },
-};
-
-export const CardStyle = {
-  args: {
-    sections: sampleSections,
-    useCardStyle: true,
-  },
-};
diff --git a/stories/sections/FeatureGrid.stories.js b/stories/sections/FeatureGrid.stories.js
index 110a62a..33c7143 100644
--- a/stories/sections/FeatureGrid.stories.js
+++ b/stories/sections/FeatureGrid.stories.js
@@ -14,7 +14,7 @@ A responsive feature grid component that displays organizational tools and servi
 
 - **Responsive Layout**: Adapts from 2x2 grid on mobile to 1x4 grid on tablet to horizontal layout on desktop
 - **ContentLockup Integration**: Uses the feature variant with "Learn more" link
-- **MiniCard Grid**: Four feature cards with color-coded backgrounds and icons
+- **Mini grid**: Four feature tiles with color-coded backgrounds and icons
 - **Accessibility**: Full keyboard navigation, focus indicators, and ARIA labels
 - **Design System**: Uses design tokens for consistent spacing, colors, and typography
 
@@ -26,7 +26,7 @@ A responsive feature grid component that displays organizational tools and servi
 
 ## Interactive Elements
 
-- **MiniCards**: Hover effects, focus indicators, and keyboard navigation
+- **Mini tiles**: Hover effects, focus indicators, and keyboard navigation
 - **Learn More Link**: Underlined link with focus states
 - **Color-coded Features**: Royal, green, pink, and blue backgrounds for categorization
 
@@ -69,7 +69,7 @@ export const Default = {
 Default FeatureGrid with standard content. This component demonstrates:
 
 - **ContentLockup**: Feature variant with title, subtitle, and "Learn more" link
-- **MiniCard Grid**: Four feature cards with different colors and icons
+- **Mini grid**: Four feature tiles with different colors and icons
 - **Responsive Design**: Layout adapts across mobile, tablet, and desktop breakpoints
 - **Interactive States**: Hover effects and focus indicators on all interactive elements
 
diff --git a/stories/sections/GovernanceTemplateGrid.stories.js b/stories/sections/GovernanceTemplateGrid.stories.js
index 1762e20..0ed726f 100644
--- a/stories/sections/GovernanceTemplateGrid.stories.js
+++ b/stories/sections/GovernanceTemplateGrid.stories.js
@@ -10,7 +10,7 @@ export default {
   argTypes: {
     entries: {
       control: false,
-      description: "Catalog entries to render as a 2-column grid of RuleCards",
+      description: "Catalog entries to render as a 2-column grid of Rules",
     },
     onTemplateClick: { action: "template-clicked" },
   },
diff --git a/stories/sections/RuleStack.stories.js b/stories/sections/RuleStack.stories.js
index e554a37..439ad8a 100644
--- a/stories/sections/RuleStack.stories.js
+++ b/stories/sections/RuleStack.stories.js
@@ -44,7 +44,7 @@ export default {
     docs: {
       description: {
         component:
-          "A complete template library component that displays governance patterns in a responsive grid layout. Includes SectionHeader with multi-line variant, interactive RuleCard components, and a call-to-action button. Features comprehensive accessibility, analytics tracking, and responsive design across all breakpoints.\n\n" +
+          "A complete template library component that displays governance patterns in a responsive grid layout. Composes **`type/SectionHeader`** (multi-line variant), interactive **`Rule`** cards, and a call-to-action button. Features comprehensive accessibility, analytics tracking, and responsive design across all breakpoints.\n\n" +
           "**Testing Scenarios:**\n" +
           "- **Responsive Testing**: Resize browser window to test layout adaptation from single column on mobile to 2x2 grid on larger screens\n" +
           "- **Interactive Testing**: Hover over cards to see effects, use Tab to navigate between cards, and click to see analytics events in console\n" +
diff --git a/stories/type/CommunityRule.stories.js b/stories/type/CommunityRule.stories.js
new file mode 100644
index 0000000..6b968e0
--- /dev/null
+++ b/stories/type/CommunityRule.stories.js
@@ -0,0 +1,85 @@
+import CommunityRule from "../../app/components/type/CommunityRule";
+
+const sampleSections = [
+  {
+    categoryName: "Decision making",
+    entries: [
+      {
+        title: "How proposals pass",
+        body: "Short opener line.\n\nImportant decisions require unanimous agreement. Proposals pass only if no serious objections remain.",
+      },
+      {
+        title: "Blocks",
+        body: "Anyone with a serious objection may block consensus and require further discussion.",
+      },
+    ],
+  },
+  {
+    categoryName: "Membership",
+    entries: [
+      {
+        title: "Joining",
+        body: "New members are welcomed by consensus of existing members.",
+      },
+    ],
+  },
+];
+
+export default {
+  title: "Components/Type/CommunityRule",
+  component: CommunityRule,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    sections: {
+      control: false,
+      description: "Rule sections, each with a categoryName and entries.",
+    },
+    useCardStyle: {
+      control: "boolean",
+      description: "When true, wraps the rule body in a white card with a teal bar",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    sections: sampleSections,
+    useCardStyle: false,
+  },
+};
+
+export const WithLabeledBlocks = {
+  args: {
+    sections: [
+      {
+        categoryName: "Membership",
+        entries: [
+          {
+            title: "Consensus or vote-based approval",
+            body: "",
+            blocks: [
+              {
+                label: "Eligibility & philosophy",
+                body: "Access to critical resources is restricted to safeguard the project.",
+              },
+              {
+                label: "Joining process",
+                body: "Volunteers who have completed two full distributions can submit a request.",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    useCardStyle: false,
+  },
+};
+
+export const CardStyle = {
+  args: {
+    sections: sampleSections,
+    useCardStyle: true,
+  },
+};
diff --git a/stories/type/Section.stories.tsx b/stories/type/Section.stories.tsx
new file mode 100644
index 0000000..a8dde42
--- /dev/null
+++ b/stories/type/Section.stories.tsx
@@ -0,0 +1,56 @@
+import Section from "../../app/components/type/Section";
+import TextBlock from "../../app/components/type/TextBlock";
+
+export default {
+  title: "Components/Type/Section",
+  component: Section,
+  parameters: { layout: "padded" },
+  argTypes: {
+    categoryName: { control: "text" },
+    showRail: { control: "boolean" },
+    children: { control: false },
+  },
+};
+
+export const Default = {
+  args: {
+    categoryName: "Values",
+    showRail: true,
+    children: (
+      <>
+        <TextBlock
+          title="Solidarity Forever"
+          body={`“Change needs all of us.”
+
+Food Not Bombs is not a charity. It is a project of solidarity.`}
+        />
+        <TextBlock
+          title="Shared Leadership"
+          body="Everyone coordinates, no one controls."
+        />
+      </>
+    ),
+  },
+};
+
+export const WithoutRail = {
+  args: {
+    categoryName: "Membership",
+    showRail: false,
+    children: (
+      <TextBlock
+        title="Open access"
+        rows={[
+          {
+            label: "Eligibility & philosophy",
+            body: "Anyone aligned with the mission may join.",
+          },
+          {
+            label: "Process",
+            body: "Complete two orientations, then lazy consensus.",
+          },
+        ]}
+      />
+    ),
+  },
+};
diff --git a/stories/sections/SectionHeader.stories.js b/stories/type/SectionHeader.stories.js
similarity index 71%
rename from stories/sections/SectionHeader.stories.js
rename to stories/type/SectionHeader.stories.js
index cbf77fb..0096f2f 100644
--- a/stories/sections/SectionHeader.stories.js
+++ b/stories/type/SectionHeader.stories.js
@@ -1,36 +1,35 @@
-import SectionHeader from "../../app/components/sections/SectionHeader";
+import SectionHeader from "../../app/components/type/SectionHeader";
 
 export default {
-  title: "Components/Sections/SectionHeader",
+  title: "Components/Type/SectionHeader",
   component: SectionHeader,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "A section header component that displays a title and subtitle with responsive typography and layout. Supports different title text for large breakpoints and maintains consistent spacing across all screen sizes. Includes 'default' and 'multi-line' variants with different layout behaviors.",
+          "Figma Type / SectionHeader ([17411:10981](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17411-10981)). Title + subtitle with responsive typography: stacked on small screens, split row from lg. **`default`**: top-aligned row; **`multi-line`**: vertically centered row on large screens (subtitle vs. title). Optional **`stackedDesktopLines`** for three-line desktop titles (CardSteps).",
       },
     },
   },
   argTypes: {
     title: {
       control: { type: "text" },
-      description: "The main title text (used for xsm and sm breakpoints)",
+      description: "Title for small viewports (and mobile/stacked layout)",
     },
     subtitle: {
       control: { type: "text" },
-      description: "The subtitle text below the main title",
+      description: "Subtitle / supporting copy",
     },
     titleLg: {
       control: { type: "text" },
       description:
-        "The title text for lg and xl breakpoints (optional, falls back to title)",
+        "Optional single-line title from lg up (when `stackedDesktopLines` is not set)",
     },
     variant: {
       control: { type: "select" },
       options: ["default", "multi-line"],
-      description:
-        "The layout variant - 'default' for traditional layout, 'multi-line' for 50/50 split layout",
+      description: "Layout variant (Figma 1-line vs 3-line row behavior)",
     },
   },
   tags: ["autodocs"],
@@ -56,7 +55,24 @@ export const MultiLine = {
     docs: {
       description: {
         story:
-          "The multi-line variant creates a 50/50 split layout at lg and xl breakpoints, with the title on the left and subtitle on the right. This variant is used in the RuleStack component.",
+          "Used in **RuleStack**: 50/50 row from lg with subtitle vertically centered against the title block.",
+      },
+    },
+  },
+};
+
+export const MultiLineStackedTitle = {
+  args: {
+    title: "How CommunityRule works",
+    subtitle: "Here's a quick overview of the process, from start to finish.",
+    variant: "multi-line",
+    stackedDesktopLines: ["How", "CommunityRule", "helps"],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Used in **CardSteps**: three-line Bricolage lockup on large screens with `stackedDesktopLines`.",
       },
     },
   },
diff --git a/stories/type/TextBlock.stories.js b/stories/type/TextBlock.stories.js
new file mode 100644
index 0000000..e6d22ec
--- /dev/null
+++ b/stories/type/TextBlock.stories.js
@@ -0,0 +1,35 @@
+import TextBlock from "../../app/components/type/TextBlock";
+
+export default {
+  title: "Components/Type/TextBlock",
+  component: TextBlock,
+  parameters: { layout: "padded" },
+  argTypes: {
+    title: { control: "text" },
+    body: { control: "text" },
+    rows: { control: false },
+  },
+};
+
+export const PlainBody = {
+  args: {
+    title: "Solidarity Forever",
+    body: "First paragraph line.\n\nSecond paragraph with more detail.",
+  },
+};
+
+export const LabeledRows = {
+  args: {
+    title: "Consensus or vote-based approval",
+    rows: [
+      {
+        label: "Eligibility & philosophy",
+        body: "Access to critical resources is restricted to safeguard the project.",
+      },
+      {
+        label: "Joining process",
+        body: "Volunteers who have completed two full distributions can submit a request.",
+      },
+    ],
+  },
+};
diff --git a/stories/utility/Separator.stories.js b/stories/utility/Separator.stories.js
deleted file mode 100644
index f708afe..0000000
--- a/stories/utility/Separator.stories.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import Separator from "../../app/components/utility/Separator";
-
-export default {
-  title: "Components/Utility/Separator",
-  component: Separator,
-  parameters: {
-    layout: "padded",
-  },
-  argTypes: {},
-};
-
-export const Default = {
-  render: () => (
-    <div style={{ width: 320 }}>
-      <Separator />
-    </div>
-  ),
-};
-
-export const InContext = {
-  render: () => (
-    <div style={{ width: 320, display: "flex", flexDirection: "column", gap: 12 }}>
-      <p>Above the separator</p>
-      <Separator />
-      <p>Below the separator</p>
-    </div>
-  ),
-};
diff --git a/tests/components/CommunityRuleDocument.test.tsx b/tests/components/CommunityRule.test.tsx
similarity index 69%
rename from tests/components/CommunityRuleDocument.test.tsx
rename to tests/components/CommunityRule.test.tsx
index e52aa17..c127a77 100644
--- a/tests/components/CommunityRuleDocument.test.tsx
+++ b/tests/components/CommunityRule.test.tsx
@@ -3,9 +3,9 @@ import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
 } from "../utils/componentTestSuite";
-import CommunityRuleDocument from "../../app/components/sections/CommunityRuleDocument";
+import CommunityRule from "../../app/components/type/CommunityRule";
 
-type Props = React.ComponentProps<typeof CommunityRuleDocument>;
+type Props = React.ComponentProps<typeof CommunityRule>;
 
 const sampleSections = [
   {
@@ -20,8 +20,8 @@ const sampleSections = [
 ];
 
 const config: ComponentTestSuiteConfig<Props> = {
-  component: CommunityRuleDocument,
-  name: "CommunityRuleDocument",
+  component: CommunityRule,
+  name: "CommunityRule",
   props: {
     sections: sampleSections,
   } as Props,
@@ -32,6 +32,6 @@ const config: ComponentTestSuiteConfig<Props> = {
   },
 };
 
-describe("CommunityRuleDocument", () => {
+describe("CommunityRule", () => {
   componentTestSuite<Props>(config);
 });
diff --git a/tests/components/ContextMenu.test.tsx b/tests/components/ContextMenu.test.tsx
deleted file mode 100644
index c2899df..0000000
--- a/tests/components/ContextMenu.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import ContextMenu from "../../app/components/modals/ContextMenu/ContextMenu";
-import ContextMenuItem from "../../app/components/modals/ContextMenuItem";
-import { componentTestSuite } from "../utils/componentTestSuite";
-
-type ContextMenuProps = React.ComponentProps<typeof ContextMenu>;
-
-componentTestSuite<ContextMenuProps>({
-  component: ContextMenu,
-  name: "ContextMenu",
-  props: {
-    children: <ContextMenuItem>Item</ContextMenuItem>,
-  } as ContextMenuProps,
-  requiredProps: [],
-  primaryRole: "menu",
-  testCases: {
-    renders: true,
-    accessibility: true,
-    keyboardNavigation: false,
-    disabledState: false,
-    errorState: false,
-  },
-});
diff --git a/tests/components/ContextMenuItem.test.tsx b/tests/components/ContextMenuItem.test.tsx
deleted file mode 100644
index bdb27f3..0000000
--- a/tests/components/ContextMenuItem.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import ContextMenuItem from "../../app/components/modals/ContextMenuItem";
-import { componentTestSuite } from "../utils/componentTestSuite";
-
-type ContextMenuItemProps = React.ComponentProps<typeof ContextMenuItem>;
-
-componentTestSuite<ContextMenuItemProps>({
-  component: ContextMenuItem,
-  name: "ContextMenuItem",
-  props: {
-    children: "Item",
-  } as ContextMenuItemProps,
-  requiredProps: [],
-  primaryRole: "menuitem",
-  testCases: {
-    renders: true,
-    accessibility: false,
-    keyboardNavigation: true,
-    disabledState: true,
-    errorState: false,
-  },
-  states: {
-    disabledProps: { disabled: true },
-  },
-});
diff --git a/tests/components/CreateFlowFooter.test.tsx b/tests/components/CreateFlowFooter.test.tsx
index fa8d5ae..caa79e5 100644
--- a/tests/components/CreateFlowFooter.test.tsx
+++ b/tests/components/CreateFlowFooter.test.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
-import CreateFlowFooter from "../../app/components/utility/CreateFlowFooter";
+import CreateFlowFooter from "../../app/components/navigation/CreateFlowFooter";
 import Button from "../../app/components/buttons/Button";
 import {
   componentTestSuite,
diff --git a/tests/components/CreateFlowTopNav.test.tsx b/tests/components/CreateFlowTopNav.test.tsx
index 403521e..5a370c2 100644
--- a/tests/components/CreateFlowTopNav.test.tsx
+++ b/tests/components/CreateFlowTopNav.test.tsx
@@ -3,7 +3,7 @@ import { describe, it, expect, vi } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/vitest";
-import CreateFlowTopNav from "../../app/components/utility/CreateFlowTopNav";
+import CreateFlowTopNav from "../../app/components/navigation/CreateFlowTopNav";
 import {
   componentTestSuite,
   ComponentTestSuiteConfig,
diff --git a/tests/components/DecisionMakingSidebar.test.tsx b/tests/components/DecisionMakingSidebar.test.tsx
deleted file mode 100644
index c5bde54..0000000
--- a/tests/components/DecisionMakingSidebar.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { renderWithProviders as render, screen } from "../utils/test-utils";
-import "@testing-library/jest-dom/vitest";
-import DecisionMakingSidebar from "../../app/components/utility/DecisionMakingSidebar";
-
-describe("DecisionMakingSidebar", () => {
-  const messageBoxItems = [{ id: "1", label: "Consensus" }];
-
-  it("renders title and description", () => {
-    render(
-      <DecisionMakingSidebar
-        title="How are decisions made?"
-        description="Pick approaches for your group."
-        messageBoxTitle="Select methods"
-        messageBoxItems={messageBoxItems}
-      />,
-    );
-    expect(
-      screen.getByRole("heading", { name: "How are decisions made?" }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText("Pick approaches for your group."),
-    ).toBeInTheDocument();
-  });
-
-  it("renders InfoMessageBox section", () => {
-    render(
-      <DecisionMakingSidebar
-        title="Decisions"
-        description="Desc"
-        messageBoxTitle="Select methods"
-        messageBoxItems={messageBoxItems}
-      />,
-    );
-    expect(screen.getByText("Select methods")).toBeInTheDocument();
-    expect(screen.getByText("Consensus")).toBeInTheDocument();
-  });
-});
diff --git a/tests/components/FinalReviewPage.test.tsx b/tests/components/FinalReviewPage.test.tsx
index bb237e3..cda5660 100644
--- a/tests/components/FinalReviewPage.test.tsx
+++ b/tests/components/FinalReviewPage.test.tsx
@@ -77,7 +77,7 @@ describe("FinalReviewScreen", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders RuleCard with fallback title when context has no name", () => {
+  it("renders Rule with fallback title when context has no name", () => {
     render(<FinalReviewScreen />);
     expect(screen.getByText(FALLBACK_CARD_TITLE)).toBeInTheDocument();
   });
@@ -89,7 +89,7 @@ describe("FinalReviewScreen", () => {
         replaceState({
           title: "Oak Park Commons",
           summary:
-            "Leftover template or one-line summary — must not appear as the RuleCard description.",
+            "Leftover template or one-line summary — must not appear as the Rule description.",
         });
       }, [replaceState]);
       return <FinalReviewScreen />;
@@ -100,7 +100,7 @@ describe("FinalReviewScreen", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("renders RuleCard title from create flow state", async () => {
+  it("renders Rule title from create flow state", async () => {
     render(
       <FinalReviewWithFlowState
         title="Oak Park Commons"
@@ -115,7 +115,7 @@ describe("FinalReviewScreen", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders RuleCard as a button (card is interactive)", () => {
+  it("renders Rule as a button (card is interactive)", () => {
     render(<FinalReviewScreen />);
     const buttons = screen.getAllByRole("button");
     expect(buttons.length).toBeGreaterThanOrEqual(1);
@@ -124,7 +124,7 @@ describe("FinalReviewScreen", () => {
     ).toBe(true);
   });
 
-  it("renders expanded RuleCard with category labels", () => {
+  it("renders expanded Rule with category labels", () => {
     render(<FinalReviewScreen />);
     expect(screen.getByText("Values")).toBeInTheDocument();
     expect(screen.getByText("Communication")).toBeInTheDocument();
@@ -143,7 +143,7 @@ describe("FinalReviewScreen", () => {
 
 /**
  * Seeds a Customize-from-template style state (method ids + core-value
- * snapshot) and asserts the final-review RuleCard renders the resolved
+ * snapshot) and asserts the final-review Rule renders the resolved
  * labels — the fix for "preselected chips don't register on final review".
  */
 function FinalReviewWithCustomizeSelections() {
diff --git a/tests/components/Icon.test.tsx b/tests/components/Icon.test.tsx
index 27921f9..1a7a26a 100644
--- a/tests/components/Icon.test.tsx
+++ b/tests/components/Icon.test.tsx
@@ -1,26 +1,112 @@
-import { describe } from "vitest";
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import Icon from "../../app/components/cards/Icon";
 import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
 } from "../utils/componentTestSuite";
-import { Icon } from "../../app/components/asset";
 
-type Props = React.ComponentProps<typeof Icon>;
+type IconProps = React.ComponentProps<typeof Icon>;
 
-const config: ComponentTestSuiteConfig<Props> = {
+const baseProps: IconProps = {
+  icon: <div data-testid="test-icon">Icon</div>,
+  title: "Worker's cooperatives",
+  description:
+    "Employee-owned businesses often need to clarify how power is shared",
+};
+
+const config: ComponentTestSuiteConfig<IconProps> = {
   component: Icon,
   name: "Icon",
-  props: {
-    name: "exclamation",
-    size: 24,
-  } as Props,
-  requiredProps: ["name"],
+  props: baseProps,
+  requiredProps: ["icon", "title", "description"],
+  optionalProps: {
+    className: "custom-class",
+    onClick: vi.fn(),
+  },
+  primaryRole: "button",
   testCases: {
     renders: true,
     accessibility: true,
+    keyboardNavigation: true,
+    disabledState: false,
+    errorState: false,
   },
 };
 
-describe("Icon", () => {
-  componentTestSuite<Props>(config);
+componentTestSuite<IconProps>(config);
+
+// Pure presentational; no provider context needed.
+describe("Icon (behavioral tests)", () => {
+  it("calls onClick when clicked", () => {
+    const handleClick = vi.fn();
+    render(
+      <Icon
+        icon={<div>Icon</div>}
+        title="Test Title"
+        description="Test Description"
+        onClick={handleClick}
+      />,
+    );
+    const card = screen.getByRole("button");
+    fireEvent.click(card);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClick when Enter key is pressed", () => {
+    const handleClick = vi.fn();
+    render(
+      <Icon
+        icon={<div>Icon</div>}
+        title="Test Title"
+        description="Test Description"
+        onClick={handleClick}
+      />,
+    );
+    const card = screen.getByRole("button");
+    fireEvent.keyDown(card, { key: "Enter" });
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClick when Space key is pressed", () => {
+    const handleClick = vi.fn();
+    render(
+      <Icon
+        icon={<div>Icon</div>}
+        title="Test Title"
+        description="Test Description"
+        onClick={handleClick}
+      />,
+    );
+    const card = screen.getByRole("button");
+    fireEvent.keyDown(card, { key: " " });
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders icon, title, and description", () => {
+    render(
+      <Icon
+        icon={<div data-testid="icon">Icon</div>}
+        title="Worker's cooperatives"
+        description="Employee-owned businesses"
+      />,
+    );
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+    expect(screen.getByText("Worker's cooperatives")).toBeInTheDocument();
+    expect(screen.getByText("Employee-owned businesses")).toBeInTheDocument();
+  });
+
+  it("has proper ARIA label", () => {
+    render(
+      <Icon
+        icon={<div>Icon</div>}
+        title="Test Title"
+        description="Test Description"
+      />,
+    );
+    const card = screen.getByRole("button");
+    expect(card).toHaveAttribute("aria-label", "Test Title: Test Description");
+  });
 });
diff --git a/tests/components/IconCard.test.tsx b/tests/components/IconCard.test.tsx
deleted file mode 100644
index c39bbe0..0000000
--- a/tests/components/IconCard.test.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from "react";
-import { describe, it, expect, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom/vitest";
-import IconCard from "../../app/components/cards/IconCard";
-import {
-  componentTestSuite,
-  type ComponentTestSuiteConfig,
-} from "../utils/componentTestSuite";
-
-type IconCardProps = React.ComponentProps<typeof IconCard>;
-
-const baseProps: IconCardProps = {
-  icon: <div data-testid="test-icon">Icon</div>,
-  title: "Worker's cooperatives",
-  description:
-    "Employee-owned businesses often need to clarify how power is shared",
-};
-
-const config: ComponentTestSuiteConfig<IconCardProps> = {
-  component: IconCard,
-  name: "IconCard",
-  props: baseProps,
-  requiredProps: ["icon", "title", "description"],
-  optionalProps: {
-    className: "custom-class",
-    onClick: vi.fn(),
-  },
-  primaryRole: "button",
-  testCases: {
-    renders: true,
-    accessibility: true,
-    keyboardNavigation: true,
-    disabledState: false,
-    errorState: false,
-  },
-};
-
-componentTestSuite<IconCardProps>(config);
-
-// Pure presentational; no provider context needed.
-describe("IconCard (behavioral tests)", () => {
-  it("calls onClick when clicked", () => {
-    const handleClick = vi.fn();
-    render(
-      <IconCard
-        icon={<div>Icon</div>}
-        title="Test Title"
-        description="Test Description"
-        onClick={handleClick}
-      />,
-    );
-    const card = screen.getByRole("button");
-    fireEvent.click(card);
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("calls onClick when Enter key is pressed", () => {
-    const handleClick = vi.fn();
-    render(
-      <IconCard
-        icon={<div>Icon</div>}
-        title="Test Title"
-        description="Test Description"
-        onClick={handleClick}
-      />,
-    );
-    const card = screen.getByRole("button");
-    fireEvent.keyDown(card, { key: "Enter" });
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("calls onClick when Space key is pressed", () => {
-    const handleClick = vi.fn();
-    render(
-      <IconCard
-        icon={<div>Icon</div>}
-        title="Test Title"
-        description="Test Description"
-        onClick={handleClick}
-      />,
-    );
-    const card = screen.getByRole("button");
-    fireEvent.keyDown(card, { key: " " });
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("renders icon, title, and description", () => {
-    render(
-      <IconCard
-        icon={<div data-testid="icon">Icon</div>}
-        title="Worker's cooperatives"
-        description="Employee-owned businesses"
-      />,
-    );
-    expect(screen.getByTestId("icon")).toBeInTheDocument();
-    expect(screen.getByText("Worker's cooperatives")).toBeInTheDocument();
-    expect(screen.getByText("Employee-owned businesses")).toBeInTheDocument();
-  });
-
-  it("has proper ARIA label", () => {
-    render(
-      <IconCard
-        icon={<div>Icon</div>}
-        title="Test Title"
-        description="Test Description"
-      />,
-    );
-    const card = screen.getByRole("button");
-    expect(card).toHaveAttribute("aria-label", "Test Title: Test Description");
-  });
-});
diff --git a/tests/components/InfoMessageBox.test.tsx b/tests/components/InfoMessageBox.test.tsx
index 0ad908e..2396128 100644
--- a/tests/components/InfoMessageBox.test.tsx
+++ b/tests/components/InfoMessageBox.test.tsx
@@ -2,7 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import InfoMessageBox from "../../app/components/utility/InfoMessageBox";
+import InfoMessageBox from "../../app/components/controls/InfoMessageBox";
 
 describe("InfoMessageBox", () => {
   const items = [
diff --git a/tests/components/InputLabel.test.tsx b/tests/components/InputLabel.test.tsx
index c177dbe..13374eb 100644
--- a/tests/components/InputLabel.test.tsx
+++ b/tests/components/InputLabel.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { screen } from "@testing-library/react";
 import { renderWithProviders as render } from "../utils/test-utils";
-import InputLabel from "../../app/components/utility/InputLabel";
+import InputLabel from "../../app/components/type/InputLabel";
 import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
diff --git a/tests/components/Logo.test.tsx b/tests/components/Logo.test.tsx
index 7969ec7..73a2935 100644
--- a/tests/components/Logo.test.tsx
+++ b/tests/components/Logo.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
-import Logo from "../../app/components/asset/logo";
+import Logo from "../../app/components/asset/Logo";
 import {
   componentTestSuite,
   ComponentTestSuiteConfig,
diff --git a/tests/components/ModalFooter.test.tsx b/tests/components/ModalFooter.test.tsx
index 80a7545..646da91 100644
--- a/tests/components/ModalFooter.test.tsx
+++ b/tests/components/ModalFooter.test.tsx
@@ -3,7 +3,7 @@ import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
 } from "../utils/componentTestSuite";
-import ModalFooter from "../../app/components/utility/ModalFooter";
+import ModalFooter from "../../app/components/modals/ModalFooter";
 
 type Props = React.ComponentProps<typeof ModalFooter>;
 
diff --git a/tests/components/ModalHeader.test.tsx b/tests/components/ModalHeader.test.tsx
index 6ed1ed8..ef0d2ce 100644
--- a/tests/components/ModalHeader.test.tsx
+++ b/tests/components/ModalHeader.test.tsx
@@ -3,7 +3,7 @@ import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
 } from "../utils/componentTestSuite";
-import ModalHeader from "../../app/components/utility/ModalHeader";
+import ModalHeader from "../../app/components/modals/ModalHeader";
 
 type Props = React.ComponentProps<typeof ModalHeader>;
 
diff --git a/tests/components/ReviewPage.test.tsx b/tests/components/ReviewPage.test.tsx
index fb321ab..e31c25a 100644
--- a/tests/components/ReviewPage.test.tsx
+++ b/tests/components/ReviewPage.test.tsx
@@ -39,12 +39,12 @@ describe("CommunityReviewScreen", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders RuleCard with title fallback when no community name is set", () => {
+  it("renders Rule with title fallback when no community name is set", () => {
     render(<CommunityReviewScreen />);
     expect(screen.getByText("Mutual Aid Mondays")).toBeInTheDocument();
   });
 
-  it("omits the RuleCard description when the user has not entered community context", () => {
+  it("omits the Rule description when the user has not entered community context", () => {
     render(<CommunityReviewScreen />);
     expect(
       screen.queryByText(
@@ -53,7 +53,7 @@ describe("CommunityReviewScreen", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("renders RuleCard as a button (card is interactive)", () => {
+  it("renders Rule as a button (card is interactive)", () => {
     render(<CommunityReviewScreen />);
     const buttons = screen.getAllByRole("button");
     expect(buttons.length).toBeGreaterThanOrEqual(1);
diff --git a/tests/components/Section.test.tsx b/tests/components/Section.test.tsx
new file mode 100644
index 0000000..30aea35
--- /dev/null
+++ b/tests/components/Section.test.tsx
@@ -0,0 +1,30 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import Section from "../../app/components/type/Section";
+import TextBlock from "../../app/components/type/TextBlock";
+
+type Props = React.ComponentProps<typeof Section>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: Section,
+  name: "Section",
+  props: {
+    categoryName: "Decision making",
+    showRail: true,
+    children: (
+      <TextBlock title="How proposals pass" body="Important decisions require alignment." />
+    ),
+  } as Props,
+  requiredProps: ["categoryName", "children"],
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("Section", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/SectionHeader.test.tsx b/tests/components/SectionHeader.test.tsx
index dc5fd36..f403464 100644
--- a/tests/components/SectionHeader.test.tsx
+++ b/tests/components/SectionHeader.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import SectionHeader from "../../app/components/sections/SectionHeader";
+import SectionHeader from "../../app/components/type/SectionHeader";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
 type SectionHeaderProps = React.ComponentProps<typeof SectionHeader>;
diff --git a/tests/components/Separator.test.tsx b/tests/components/Separator.test.tsx
deleted file mode 100644
index 5405ff1..0000000
--- a/tests/components/Separator.test.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { describe } from "vitest";
-import {
-  componentTestSuite,
-  type ComponentTestSuiteConfig,
-} from "../utils/componentTestSuite";
-import Separator from "../../app/components/utility/Separator";
-
-type Props = React.ComponentProps<typeof Separator>;
-
-const config: ComponentTestSuiteConfig<Props> = {
-  component: Separator,
-  name: "Separator",
-  props: {} as Props,
-  testCases: {
-    renders: true,
-    accessibility: true,
-  },
-};
-
-describe("Separator", () => {
-  componentTestSuite<Props>(config);
-});
diff --git a/tests/components/TemplateReviewCard.test.tsx b/tests/components/TemplateReviewCard.test.tsx
index 7367c7f..9ccdfa0 100644
--- a/tests/components/TemplateReviewCard.test.tsx
+++ b/tests/components/TemplateReviewCard.test.tsx
@@ -41,8 +41,8 @@ const config: ComponentTestSuiteConfig<Props> = {
   primaryRole: "button",
   testCases: {
     renders: true,
-    // RuleCard contains nested interactive elements (chips inside a clickable card)
-    // which trigger axe's "nested-interactive" rule. Tracked by RuleCard itself.
+    // Rule contains nested interactive elements (chips inside a clickable card)
+    // which trigger axe's "nested-interactive" rule. Tracked by Rule itself.
     accessibility: false,
   },
 };
diff --git a/tests/components/TextBlock.test.tsx b/tests/components/TextBlock.test.tsx
new file mode 100644
index 0000000..d1124a6
--- /dev/null
+++ b/tests/components/TextBlock.test.tsx
@@ -0,0 +1,26 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import TextBlock from "../../app/components/type/TextBlock";
+
+type Props = React.ComponentProps<typeof TextBlock>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: TextBlock,
+  name: "TextBlock",
+  props: {
+    title: "Policy title",
+    body: "Supporting text for the policy.",
+  } as Props,
+  requiredProps: ["title"],
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("TextBlock", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/TopNav.test.tsx b/tests/components/Top.test.tsx
similarity index 80%
rename from tests/components/TopNav.test.tsx
rename to tests/components/Top.test.tsx
index dcf1a43..39b656d 100644
--- a/tests/components/TopNav.test.tsx
+++ b/tests/components/Top.test.tsx
@@ -3,7 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/vitest";
-import TopNav from "../../app/components/navigation/TopNav";
+import Top from "../../app/components/navigation/Top";
 import { renderWithProviders } from "../utils/test-utils";
 import { CREATE_FLOW_ANONYMOUS_KEY } from "../../app/(app)/create/utils/anonymousDraftStorage";
 import { CORE_VALUE_DETAILS_STORAGE_KEY } from "../../app/(app)/create/utils/coreValueDetailsLocalStorage";
@@ -23,13 +23,13 @@ vi.mock("next/navigation", () => ({
   usePathname: () => "/",
 }));
 
-type TopNavProps = React.ComponentProps<typeof TopNav>;
+type TopProps = React.ComponentProps<typeof Top>;
 
 // Test folderTop=false variant (standard header)
-componentTestSuite<TopNavProps>({
-  component: TopNav,
-  name: "TopNav (folderTop=false)",
-  props: { folderTop: false } as TopNavProps,
+componentTestSuite<TopProps>({
+  component: Top,
+  name: "Top (folderTop=false)",
+  props: { folderTop: false } as TopProps,
   requiredProps: [],
   primaryRole: "banner",
   testCases: {
@@ -43,10 +43,10 @@ componentTestSuite<TopNavProps>({
 
 // Test folderTop=true variant (home header)
 // Note: Accessibility test may fail due to Next.js Script component behavior in test environment
-componentTestSuite<TopNavProps>({
-  component: TopNav,
-  name: "TopNav (folderTop=true)",
-  props: { folderTop: true } as TopNavProps,
+componentTestSuite<TopProps>({
+  component: Top,
+  name: "Top (folderTop=true)",
+  props: { folderTop: true } as TopProps,
   requiredProps: [],
   primaryRole: "banner",
   testCases: {
@@ -58,7 +58,7 @@ componentTestSuite<TopNavProps>({
   },
 });
 
-describe('TopNav "Create rule" button', () => {
+describe('Top "Create rule" button', () => {
   beforeEach(() => {
     pushMock.mockReset();
     window.localStorage.clear();
@@ -71,7 +71,7 @@ describe('TopNav "Create rule" button', () => {
    * Guards against localStorage stickiness on the marketing homepage: hitting
    * the top-nav "Create rule" from anywhere outside `/create` must wipe the
    * in-flight anonymous draft so the wizard always starts fresh. See
-   * handleCreateRuleClick in TopNav.container.tsx for the contract.
+   * handleCreateRuleClick in Top.container.tsx for the contract.
    */
   it("clears anonymous draft + core-value-details localStorage before routing to /create", async () => {
     window.localStorage.setItem(
@@ -83,9 +83,9 @@ describe('TopNav "Create rule" button', () => {
       JSON.stringify({ "1": { meaning: "m", signals: "s" } }),
     );
 
-    renderWithProviders(<TopNav folderTop={false} />);
+    renderWithProviders(<Top folderTop={false} />);
 
-    // TopNav renders the Create Rule button at three breakpoints (xs/sm/md);
+    // Top renders the Create Rule button at three breakpoints (xs/sm/md);
     // any of them clicking the same handler is the point.
     const [btn] = screen.getAllByRole("button", {
       name: /create a new rule/i,
diff --git a/tests/e2e/critical-journeys.spec.ts b/tests/e2e/critical-journeys.spec.ts
index bbf10d0..cc9f62e 100644
--- a/tests/e2e/critical-journeys.spec.ts
+++ b/tests/e2e/critical-journeys.spec.ts
@@ -22,10 +22,10 @@ test.describe("Critical User Journeys", () => {
       await learnButton.click();
     }
 
-    // 4. User scrolls to numbered cards section
-    // Note: SectionHeader shows "How CommunityRule works" on mobile, "How CommunityRule helps" on desktop
+    // 4. User scrolls to CardSteps section (home)
+    // Note: mobile title is one line; lg+ uses stacked "How / CommunityRule / helps" from home copy
     const howItWorksHeading = page.locator(
-      'h2:has-text("How CommunityRule works"), h2:has-text("How CommunityRule helps")',
+      'h2:has-text("How CommunityRule works"), h2:has-text("How"), h2:has-text("CommunityRule"), h2:has-text("helps")',
     );
     await expect(howItWorksHeading).toBeVisible();
 
@@ -129,7 +129,7 @@ test.describe("Critical User Journeys", () => {
       featureSection.locator("text=Conflict resolution"),
     ).toBeVisible();
 
-    // Check feature links - MiniCard components render as <a> tags with href="#..."
+    // Check feature links - Mini tiles render as <a> tags with href="#..."
     // There are 4 feature cards + 1 "Learn more" link = 5 total links
     // We check for the specific feature card links
     await expect(
diff --git a/tests/pages/decision-approaches.test.jsx b/tests/pages/decision-approaches.test.jsx
index 48ae06c..06604cb 100644
--- a/tests/pages/decision-approaches.test.jsx
+++ b/tests/pages/decision-approaches.test.jsx
@@ -26,16 +26,15 @@ describe("Create flow decision-approaches page", () => {
   test("renders sidebar description with add link", () => {
     render(<DecisionApproachesScreen />);
 
-    const description = screen.getByText((content, element) => {
-      if (element?.tagName !== "P") return false;
-      const text = element.textContent ?? "";
-      return (
-        text.includes("Select as many as you need") &&
-        text.includes("add") &&
-        text.includes("new decision making approaches")
-      );
+    const addControl = screen.getByRole("button", {
+      name: /^add$/,
     });
-    expect(description).toBeInTheDocument();
+    expect(addControl).toBeInTheDocument();
+
+    const description = addControl.parentElement;
+    expect(description).not.toBeNull();
+    expect(description?.textContent).toMatch(/Select as many as you need/);
+    expect(description?.textContent).toMatch(/new decision making approaches/);
   });
 
   test("renders message box with title and checkboxes", () => {
diff --git a/tests/pages/home.test.jsx b/tests/pages/home.test.jsx
index 485a39e..0aae429 100644
--- a/tests/pages/home.test.jsx
+++ b/tests/pages/home.test.jsx
@@ -20,7 +20,7 @@ describe("Page", () => {
     ).toBeGreaterThan(0);
 
     // Wait for dynamically imported components to load
-    // Check numbered cards section (using getAllByText since there are multiple instances)
+    // Check CardSteps section (using getAllByText since there are multiple instances)
     await waitFor(() => {
       expect(
         screen.getAllByText("How CommunityRule works").length,
@@ -70,10 +70,10 @@ describe("Page", () => {
     ).toBeGreaterThan(0);
   });
 
-  test("renders numbered cards with correct data", async () => {
+  test("renders CardSteps section with correct data", async () => {
     render(<Page />);
 
-    // Wait for dynamically imported NumberedCards component to load
+    // Wait for dynamically imported CardSteps component to load
     await waitFor(() => {
       expect(
         screen.getAllByText("How CommunityRule works").length,
@@ -140,7 +140,7 @@ describe("Page", () => {
 
     // Wait for dynamically imported components to load
     // LogoWall - should be present (even if just the component structure)
-    // NumberedCards
+    // CardSteps
     await waitFor(() => {
       expect(
         screen.getAllByText("How CommunityRule works").length,
@@ -192,7 +192,7 @@ describe("Page", () => {
       ).length,
     ).toBeGreaterThan(0);
 
-    // Wait for dynamically imported NumberedCards component
+    // Wait for dynamically imported CardSteps component
     await waitFor(() => {
       expect(
         screen.getAllByText(
@@ -239,12 +239,12 @@ describe("Page", () => {
     );
   });
 
-  test("renders numbered card items with correct content", async () => {
+  test("renders CardSteps step tiles with correct content", async () => {
     render(<Page />);
 
-    // Wait for dynamically imported NumberedCards component
+    // Wait for dynamically imported CardSteps component
     await waitFor(() => {
-      // Check all three numbered card items (using getAllByText since there are multiple instances)
+      // Three Step tiles inside CardSteps
       expect(
         screen.getAllByText("Document how your community makes decisions")
           .length,
diff --git a/tests/pages/page-flow.test.jsx b/tests/pages/page-flow.test.jsx
index 43a091d..ebc62bd 100644
--- a/tests/pages/page-flow.test.jsx
+++ b/tests/pages/page-flow.test.jsx
@@ -70,7 +70,7 @@ describe("Page Flow Integration", () => {
     expect(screen.getByAltText("Mutual Aid CO")).toBeInTheDocument();
     expect(screen.getByAltText("CU Boulder")).toBeInTheDocument();
 
-    // Numbered Cards section - wait for dynamically imported component
+    // CardSteps section — wait for dynamically imported component
     await waitFor(() => {
       expect(
         screen.getByRole("heading", { name: /How CommunityRule works/ }),
@@ -153,10 +153,10 @@ describe("Page Flow Integration", () => {
     expect(ctaButton).toBeInTheDocument();
   });
 
-  test("numbered cards display with correct icons and colors", async () => {
+  test("CardSteps section shows step tiles with expected icon/color props", async () => {
     render(<Page />);
 
-    // Wait for dynamically imported NumberedCards component
+    // Wait for dynamically imported CardSteps component
     await waitFor(() => {
       const cards = screen.getAllByText(
         /Document how your community|Build an operating manual|Get a link to your manual/,
@@ -189,11 +189,10 @@ describe("Page Flow Integration", () => {
     const seeAll = screen.getByRole("link", { name: "See all templates" });
     expect(seeAll).toHaveAttribute("href", "/templates");
 
-    // Check that create rule button is present
-    const createButton = screen.getByRole("button", {
-      name: "Create CommunityRule",
+    const seeHowButton = screen.getByRole("button", {
+      name: "See how it works",
     });
-    expect(createButton).toBeInTheDocument();
+    expect(seeHowButton).toBeInTheDocument();
   });
 
   test("ask organizer section has proper call-to-action", () => {
diff --git a/tests/pages/user-journey.test.jsx b/tests/pages/user-journey.test.jsx
index 409fb9b..324f79a 100644
--- a/tests/pages/user-journey.test.jsx
+++ b/tests/pages/user-journey.test.jsx
@@ -57,7 +57,7 @@ describe("User Journey Integration", () => {
     const learnButton = learnButtons[0];
     await user.click(learnButton);
 
-    // Wait for dynamically imported NumberedCards component
+    // Wait for dynamically imported CardSteps component
     await waitFor(() => {
       expect(screen.getByText("How CommunityRule works")).toBeInTheDocument();
     });
@@ -77,14 +77,14 @@ describe("User Journey Integration", () => {
     expect(screen.getByText("Petition")).toBeInTheDocument();
 
     // User clicks on a governance type to create a rule
-    const createButtons = screen.getAllByRole("button", {
-      name: "Create CommunityRule",
+    const seeHowButtons = screen.getAllByRole("button", {
+      name: "See how it works",
     });
-    expect(createButtons.length).toBeGreaterThan(0);
+    expect(seeHowButtons.length).toBeGreaterThan(0);
 
-    await user.click(createButtons[0]);
+    await user.click(seeHowButtons[0]);
     // Button should remain interactive
-    expect(createButtons[0]).toBeInTheDocument();
+    expect(seeHowButtons[0]).toBeInTheDocument();
   });
 
   test("user navigates through the application using header navigation", async () => {
@@ -127,10 +127,10 @@ describe("User Journey Integration", () => {
     expect(askLink).toHaveAttribute("href", "#contact");
   });
 
-  test("user explores the process through numbered cards", async () => {
+  test("user explores the process through CardSteps", async () => {
     render(<Page />);
 
-    // Wait for dynamically imported NumberedCards component
+    // Wait for dynamically imported CardSteps component
     await waitFor(() => {
       expect(
         screen.getByText("Document how your community makes decisions"),
@@ -278,10 +278,10 @@ describe("User Journey Integration", () => {
     ).toBeInTheDocument();
 
     // 6. User can take action
-    const createButtons = screen.getAllByRole("button", {
-      name: "Create CommunityRule",
+    const seeHowButtons = screen.getAllByRole("button", {
+      name: "See how it works",
     });
-    expect(createButtons.length).toBeGreaterThan(0);
+    expect(seeHowButtons.length).toBeGreaterThan(0);
 
     // 7. User can get help if needed
     expect(screen.getByText("Still have questions?")).toBeInTheDocument();
diff --git a/tests/unit/CardStack.test.jsx b/tests/unit/CardStack.test.jsx
index 5c56628..fba32b3 100644
--- a/tests/unit/CardStack.test.jsx
+++ b/tests/unit/CardStack.test.jsx
@@ -6,7 +6,7 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { vi, describe, test, expect, afterEach } from "vitest";
-import CardStack from "../../app/components/utility/CardStack";
+import CardStack from "../../app/components/cards/CardStack";
 
 const SAMPLE_CARDS = [
   {
diff --git a/tests/unit/NumberedCards.test.jsx b/tests/unit/CardSteps.test.jsx
similarity index 55%
rename from tests/unit/NumberedCards.test.jsx
rename to tests/unit/CardSteps.test.jsx
index cdc19fd..181530a 100644
--- a/tests/unit/NumberedCards.test.jsx
+++ b/tests/unit/CardSteps.test.jsx
@@ -4,14 +4,14 @@ import {
   cleanup,
 } from "../utils/test-utils";
 import { describe, test, expect, afterEach } from "vitest";
-import NumberedCards from "../../app/components/sections/NumberedCards";
+import CardSteps from "../../app/components/sections/CardSteps";
 
 afterEach(() => {
   cleanup();
 });
 
-describe("NumberedCards Component", () => {
-  const mockCards = [
+describe("CardSteps Component", () => {
+  const mockSteps = [
     {
       text: "Define your community values",
       iconShape: "circle",
@@ -29,23 +29,20 @@ describe("NumberedCards Component", () => {
     },
   ];
 
-  test("renders with title, subtitle, and cards", () => {
+  test("renders with title, subtitle, and step cards", () => {
     render(
-      <NumberedCards
+      <CardSteps
         title="How CommunityRule helps"
         subtitle="Build better communities step by step"
-        cards={mockCards}
+        steps={mockSteps}
       />,
     );
 
-    // Check for the heading (it contains both mobile and desktop versions)
     expect(screen.getByRole("heading")).toBeInTheDocument();
-    // Check for the subtitle text
     expect(
       screen.getByText("Build better communities step by step"),
     ).toBeInTheDocument();
 
-    // Check for card content
     expect(
       screen.getByText("Define your community values"),
     ).toBeInTheDocument();
@@ -59,55 +56,51 @@ describe("NumberedCards Component", () => {
 
   test("renders SectionHeader component", () => {
     render(
-      <NumberedCards
+      <CardSteps
         title="Test Title"
         subtitle="Test Subtitle"
-        cards={mockCards}
+        steps={mockSteps}
       />,
     );
 
-    // Check for the heading (it contains both mobile and desktop versions)
     expect(screen.getByRole("heading")).toBeInTheDocument();
-    // Check for the subtitle text
     expect(screen.getByText("Test Subtitle")).toBeInTheDocument();
   });
 
-  test("renders NumberCard components with correct props", () => {
-    render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
+  test("renders Step tiles with correct props", () => {
+    render(<CardSteps title="Test" subtitle="Test" steps={mockSteps} />);
 
-    // Check that NumberCard components receive correct props
-    expect(screen.getByText("1")).toBeInTheDocument(); // First card number
-    expect(screen.getByText("2")).toBeInTheDocument(); // Second card number
-    expect(screen.getByText("3")).toBeInTheDocument(); // Third card number
+    expect(screen.getByText("1")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+    expect(screen.getByText("3")).toBeInTheDocument();
   });
 
-  test("renders call-to-action buttons", () => {
-    render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
+  test("renders call-to-action button", () => {
+    render(<CardSteps title="Test" subtitle="Test" steps={mockSteps} />);
 
-    expect(
-      screen.getByRole("button", { name: "Create CommunityRule" }),
-    ).toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "See how it works" }),
     ).toBeInTheDocument();
   });
 
-  test("applies responsive button visibility", () => {
-    render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
+  test("renders stacked desktop heading lines when provided", () => {
+    const { container } = render(
+      <CardSteps
+        title="Mobile line"
+        subtitle="Test"
+        steps={mockSteps}
+        headingDesktopLines={["How", "CommunityRule", "helps"]}
+      />,
+    );
 
-    const createButton = screen.getByRole("button", {
-      name: "Create CommunityRule",
-    });
-    const seeHowButton = screen.getByRole("button", {
-      name: "See how it works",
-    });
-
-    expect(createButton.closest("div")).toHaveClass("block", "lg:hidden");
-    expect(seeHowButton.closest("div")).toHaveClass("hidden", "lg:block");
+    const h2 = container.querySelector("h2");
+    expect(h2?.textContent).toContain("Mobile line");
+    expect(h2?.textContent).toContain("CommunityRule");
+    expect(h2?.textContent).toContain("helps");
   });
 
   test("renders with design tokens", () => {
-    render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
+    render(<CardSteps title="Test" subtitle="Test" steps={mockSteps} />);
 
     const section = document.querySelector("section");
     expect(section).toHaveClass(
@@ -117,7 +110,7 @@ describe("NumberedCards Component", () => {
   });
 
   test("applies responsive grid layout", () => {
-    render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
+    render(<CardSteps title="Test" subtitle="Test" steps={mockSteps} />);
 
     const cardsContainer = document.querySelector(
       '[class*="grid grid-cols-1"]',
@@ -127,10 +120,10 @@ describe("NumberedCards Component", () => {
 
   test("renders schema markup", () => {
     render(
-      <NumberedCards
+      <CardSteps
         title="Test Title"
         subtitle="Test Description"
-        cards={mockCards}
+        steps={mockSteps}
       />,
     );
 
@@ -145,40 +138,37 @@ describe("NumberedCards Component", () => {
   });
 
   test("has proper semantic structure", () => {
-    render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
+    render(<CardSteps title="Test" subtitle="Test" steps={mockSteps} />);
 
     const section = document.querySelector("section");
     expect(section).toBeInTheDocument();
 
-    // Check for proper heading structure
     const headings = screen.getAllByRole("heading");
     expect(headings.length).toBeGreaterThan(0);
   });
 
-  test("handles empty cards array", () => {
-    render(<NumberedCards title="Test" subtitle="Test" cards={[]} />);
+  test("handles empty steps array", () => {
+    render(<CardSteps title="Test" subtitle="Test" steps={[]} />);
 
-    // Should still render the structure
     const section = document.querySelector("section");
     expect(section).toBeInTheDocument();
 
-    // Should render buttons even without cards
     expect(
-      screen.getByRole("button", { name: "Create CommunityRule" }),
+      screen.getByRole("button", { name: "See how it works" }),
     ).toBeInTheDocument();
   });
 
-  test("applies responsive text alignment", () => {
-    render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
+  test("centers call-to-action region", () => {
+    render(<CardSteps title="Test" subtitle="Test" steps={mockSteps} />);
 
-    const buttonContainer = screen
-      .getByRole("button", { name: "Create CommunityRule" })
+    const buttonRegion = screen
+      .getByRole("button", { name: "See how it works" })
       .closest("div");
-    expect(buttonContainer).toHaveClass("block", "lg:hidden");
+    expect(buttonRegion).toHaveClass("text-center");
   });
 
   test("renders with proper spacing", () => {
-    render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
+    render(<CardSteps title="Test" subtitle="Test" steps={mockSteps} />);
 
     const section = document.querySelector("section");
     expect(section).toHaveClass(
@@ -188,7 +178,7 @@ describe("NumberedCards Component", () => {
   });
 
   test("applies max-width constraint", () => {
-    render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
+    render(<CardSteps title="Test" subtitle="Test" steps={mockSteps} />);
 
     const container = document.querySelector(
       '[class*="max-w-[var(--spacing-measures-max-width-lg)]"]',
diff --git a/tests/unit/RuleCard.test.jsx b/tests/unit/Rule.test.jsx
similarity index 80%
rename from tests/unit/RuleCard.test.jsx
rename to tests/unit/Rule.test.jsx
index 33befdc..8917505 100644
--- a/tests/unit/RuleCard.test.jsx
+++ b/tests/unit/Rule.test.jsx
@@ -4,16 +4,16 @@ import {
   fireEvent,
 } from "../utils/test-utils";
 import { describe, it, expect, vi } from "vitest";
-import RuleCard from "../../app/components/cards/RuleCard";
+import Rule from "../../app/components/cards/Rule";
 
-describe("RuleCard Component", () => {
+describe("Rule Component", () => {
   const defaultProps = {
     title: "Test Rule",
     description: "This is a test rule description",
   };
 
   it("renders rule card with all required information", () => {
-    render(<RuleCard {...defaultProps} />);
+    render(<Rule {...defaultProps} />);
 
     expect(screen.getByText("Test Rule")).toBeInTheDocument();
     expect(
@@ -23,14 +23,14 @@ describe("RuleCard Component", () => {
 
   it("renders with custom className", () => {
     const customClass = "custom-rule-card";
-    render(<RuleCard {...defaultProps} className={customClass} />);
+    render(<Rule {...defaultProps} className={customClass} />);
 
     const card = screen.getByRole("button");
     expect(card).toHaveClass(customClass);
   });
 
   it("applies default background color", () => {
-    render(<RuleCard {...defaultProps} />);
+    render(<Rule {...defaultProps} />);
 
     const card = screen.getByRole("button");
     expect(card).toHaveClass("bg-[var(--color-community-teal-100)]");
@@ -38,7 +38,7 @@ describe("RuleCard Component", () => {
 
   it("applies custom background color", () => {
     const customBg = "bg-blue-100";
-    render(<RuleCard {...defaultProps} backgroundColor={customBg} />);
+    render(<Rule {...defaultProps} backgroundColor={customBg} />);
 
     const card = screen.getByRole("button");
     expect(card).toHaveClass(customBg);
@@ -46,14 +46,14 @@ describe("RuleCard Component", () => {
 
   it("renders with icon when provided", () => {
     const Icon = () => <span data-testid="icon">🚀</span>;
-    render(<RuleCard {...defaultProps} icon={<Icon />} />);
+    render(<Rule {...defaultProps} icon={<Icon />} />);
 
     expect(screen.getByTestId("icon")).toBeInTheDocument();
   });
 
   it("handles click events", () => {
     const handleClick = vi.fn();
-    render(<RuleCard {...defaultProps} onClick={handleClick} />);
+    render(<Rule {...defaultProps} onClick={handleClick} />);
 
     const card = screen.getByRole("button");
     fireEvent.click(card);
@@ -63,7 +63,7 @@ describe("RuleCard Component", () => {
 
   it("handles keyboard events", () => {
     const handleClick = vi.fn();
-    render(<RuleCard {...defaultProps} onClick={handleClick} />);
+    render(<Rule {...defaultProps} onClick={handleClick} />);
 
     const card = screen.getByRole("button");
 
@@ -77,7 +77,7 @@ describe("RuleCard Component", () => {
   });
 
   it("applies hover effects correctly", () => {
-    render(<RuleCard {...defaultProps} />);
+    render(<Rule {...defaultProps} />);
 
     const card = screen.getByRole("button");
     expect(card).toHaveClass(
@@ -87,7 +87,7 @@ describe("RuleCard Component", () => {
   });
 
   it("renders with proper accessibility attributes", () => {
-    render(<RuleCard {...defaultProps} />);
+    render(<Rule {...defaultProps} />);
 
     const card = screen.getByRole("button");
     expect(card).toHaveAttribute(
@@ -98,7 +98,7 @@ describe("RuleCard Component", () => {
   });
 
   it("handles empty description gracefully", () => {
-    render(<RuleCard {...defaultProps} description="" />);
+    render(<Rule {...defaultProps} description="" />);
 
     expect(screen.getByText("Test Rule")).toBeInTheDocument();
     expect(
@@ -107,14 +107,14 @@ describe("RuleCard Component", () => {
   });
 
   it("applies proper sizing for expanded states", () => {
-    render(<RuleCard {...defaultProps} expanded={true} size="L" />);
+    render(<Rule {...defaultProps} expanded={true} size="L" />);
 
     const card = screen.getByRole("button");
     expect(card).toHaveClass("w-[568px]");
   });
 
   it("applies proper accessibility attributes", () => {
-    render(<RuleCard {...defaultProps} expanded={true} />);
+    render(<Rule {...defaultProps} expanded={true} />);
 
     const card = screen.getByRole("button");
     expect(card).toHaveAttribute("aria-expanded", "true");
@@ -122,13 +122,13 @@ describe("RuleCard Component", () => {
   });
 
   it("renders without icon when not provided", () => {
-    render(<RuleCard {...defaultProps} />);
+    render(<Rule {...defaultProps} />);
 
     expect(screen.queryByTestId("icon")).not.toBeInTheDocument();
   });
 
   it("applies proper border and shadow classes", () => {
-    render(<RuleCard {...defaultProps} />);
+    render(<Rule {...defaultProps} />);
 
     const card = screen.getByRole("button");
     expect(card).toHaveClass("shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)]");
@@ -136,7 +136,7 @@ describe("RuleCard Component", () => {
   });
 
   it("maintains proper heading structure", () => {
-    render(<RuleCard {...defaultProps} />);
+    render(<Rule {...defaultProps} />);
 
     const heading = screen.getByRole("heading", { level: 3 });
     expect(heading).toHaveTextContent("Test Rule");
@@ -144,7 +144,7 @@ describe("RuleCard Component", () => {
   });
 
   it("applies proper font classes for title", () => {
-    render(<RuleCard {...defaultProps} size="L" />);
+    render(<Rule {...defaultProps} size="L" />);
 
     const heading = screen.getByRole("heading", { level: 3 });
     // Check for responsive font classes - at 1440px+ it should have font-bricolage-grotesque and font-extrabold
@@ -164,7 +164,7 @@ describe("RuleCard Component", () => {
       },
     ];
     render(
-      <RuleCard {...defaultProps} expanded={true} categories={categories} />,
+      <Rule {...defaultProps} expanded={true} categories={categories} />,
     );
 
     expect(screen.getByText("Values")).toBeInTheDocument();
@@ -172,7 +172,7 @@ describe("RuleCard Component", () => {
 
   it("renders with logo URL", () => {
     render(
-      <RuleCard
+      <Rule
         {...defaultProps}
         logoUrl="http://localhost:3845/assets/test.png"
         logoAlt="Test Logo"
@@ -184,7 +184,7 @@ describe("RuleCard Component", () => {
   });
 
   it("renders with community initials fallback", () => {
-    render(<RuleCard {...defaultProps} communityInitials="CE" />);
+    render(<Rule {...defaultProps} communityInitials="CE" />);
 
     expect(screen.getByText("CE")).toBeInTheDocument();
   });
diff --git a/tests/unit/RuleStack.test.jsx b/tests/unit/RuleStack.test.jsx
index 419aa59..1f8c537 100644
--- a/tests/unit/RuleStack.test.jsx
+++ b/tests/unit/RuleStack.test.jsx
@@ -179,7 +179,7 @@ describe("RuleStack Component", () => {
     expect(grid).toHaveClass("min-[768px]:grid", "min-[768px]:grid-cols-2");
   });
 
-  test("renders RuleCard components with catalog surface colors", async () => {
+  test("renders Rule components with catalog surface colors", async () => {
     render(<RuleStack />);
     await waitForRuleStackCards();
 
diff --git a/tests/unit/Card.test.jsx b/tests/unit/Selection.test.jsx
similarity index 76%
rename from tests/unit/Card.test.jsx
rename to tests/unit/Selection.test.jsx
index a3f7421..6704adc 100644
--- a/tests/unit/Card.test.jsx
+++ b/tests/unit/Selection.test.jsx
@@ -4,9 +4,9 @@ import {
   fireEvent,
 } from "../utils/test-utils";
 import { describe, it, expect, vi } from "vitest";
-import Card from "../../app/components/cards/Card";
+import Selection from "../../app/components/cards/Selection";
 
-describe("Card Component", () => {
+describe("Selection Component", () => {
   const defaultProps = {
     label: "Label",
     supportText: "Support text here",
@@ -14,26 +14,26 @@ describe("Card Component", () => {
   };
 
   it("renders label and supportText", () => {
-    render(<Card {...defaultProps} />);
+    render(<Selection {...defaultProps} />);
 
     expect(screen.getByText("Label")).toBeInTheDocument();
     expect(screen.getByText("Support text here")).toBeInTheDocument();
   });
 
   it("renders RECOMMENDED pill when recommended is true", () => {
-    render(<Card {...defaultProps} recommended={true} />);
+    render(<Selection {...defaultProps} recommended={true} />);
 
     expect(screen.getByText("RECOMMENDED")).toBeInTheDocument();
   });
 
   it("does not render RECOMMENDED pill when recommended is false", () => {
-    render(<Card {...defaultProps} recommended={false} />);
+    render(<Selection {...defaultProps} recommended={false} />);
 
     expect(screen.queryByText("RECOMMENDED")).not.toBeInTheDocument();
   });
 
   it("renders SELECTED pill and inset dashed outline when selected is true", () => {
-    render(<Card {...defaultProps} selected={true} />);
+    render(<Selection {...defaultProps} selected={true} />);
 
     expect(screen.getByText("SELECTED")).toBeInTheDocument();
     const card = screen.getByRole("button");
@@ -41,14 +41,14 @@ describe("Card Component", () => {
   });
 
   it("applies horizontal layout by default", () => {
-    render(<Card {...defaultProps} />);
+    render(<Selection {...defaultProps} />);
 
     expect(screen.getByText("Label")).toBeInTheDocument();
     expect(screen.getByText("Support text here")).toBeInTheDocument();
   });
 
   it("applies vertical layout when orientation is vertical", () => {
-    render(<Card {...defaultProps} orientation="vertical" />);
+    render(<Selection {...defaultProps} orientation="vertical" />);
 
     const card = screen.getByRole("button");
     expect(card).toHaveClass("flex-row");
@@ -56,7 +56,7 @@ describe("Card Component", () => {
 
   it("handles click events", () => {
     const handleClick = vi.fn();
-    render(<Card {...defaultProps} onClick={handleClick} />);
+    render(<Selection {...defaultProps} onClick={handleClick} />);
 
     const card = screen.getByRole("button");
     fireEvent.click(card);
@@ -66,7 +66,7 @@ describe("Card Component", () => {
 
   it("handles keyboard events", () => {
     const handleClick = vi.fn();
-    render(<Card {...defaultProps} onClick={handleClick} />);
+    render(<Selection {...defaultProps} onClick={handleClick} />);
 
     const card = screen.getByRole("button");
 
@@ -79,14 +79,14 @@ describe("Card Component", () => {
 
   it("renders with custom className", () => {
     const customClass = "custom-card";
-    render(<Card {...defaultProps} className={customClass} />);
+    render(<Selection {...defaultProps} className={customClass} />);
 
     const card = screen.getByRole("button");
     expect(card).toHaveClass(customClass);
   });
 
   it("renders with proper accessibility attributes", () => {
-    render(<Card {...defaultProps} />);
+    render(<Selection {...defaultProps} />);
 
     const card = screen.getByRole("button");
     expect(card).toHaveAttribute("aria-label", "Label: Support text here");
@@ -94,7 +94,7 @@ describe("Card Component", () => {
   });
 
   it("renders without supportText", () => {
-    render(<Card label="Label only" orientation="horizontal" />);
+    render(<Selection label="Label only" orientation="horizontal" />);
 
     expect(screen.getByText("Label only")).toBeInTheDocument();
     expect(screen.getByRole("button")).toHaveAttribute(
diff --git a/tests/unit/NumberCard.test.jsx b/tests/unit/Step.test.jsx
similarity index 81%
rename from tests/unit/NumberCard.test.jsx
rename to tests/unit/Step.test.jsx
index 0345d64..66993c8 100644
--- a/tests/unit/NumberCard.test.jsx
+++ b/tests/unit/Step.test.jsx
@@ -1,41 +1,41 @@
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
-import NumberCard from "../../app/components/cards/NumberCard";
+import Step from "../../app/components/cards/Step";
 
 // Pure presentational; no provider context needed.
-describe("NumberCard Component", () => {
+describe("Step Component", () => {
   const defaultProps = {
     number: 1,
     text: "Test Card Text",
   };
 
-  it("renders number card with all required information", () => {
-    render(<NumberCard {...defaultProps} />);
+  it("renders step with all required information", () => {
+    render(<Step {...defaultProps} />);
 
     expect(screen.getByText("1")).toBeInTheDocument();
     expect(screen.getByText("Test Card Text")).toBeInTheDocument();
   });
 
   it("renders with different numbers", () => {
-    const { rerender } = render(<NumberCard {...defaultProps} number={42} />);
+    const { rerender } = render(<Step {...defaultProps} number={42} />);
     expect(screen.getByText("42")).toBeInTheDocument();
 
-    rerender(<NumberCard {...defaultProps} number={999} />);
+    rerender(<Step {...defaultProps} number={999} />);
     expect(screen.getByText("999")).toBeInTheDocument();
   });
 
   it("renders with different text content", () => {
     const { rerender } = render(
-      <NumberCard {...defaultProps} text="Different Text" />,
+      <Step {...defaultProps} text="Different Text" />,
     );
     expect(screen.getByText("Different Text")).toBeInTheDocument();
 
-    rerender(<NumberCard {...defaultProps} text="Another Text" />);
+    rerender(<Step {...defaultProps} text="Another Text" />);
     expect(screen.getByText("Another Text")).toBeInTheDocument();
   });
 
   it("applies proper responsive layout classes when size is not specified", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -53,7 +53,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies proper responsive spacing when size is not specified", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -62,7 +62,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies proper responsive gap when size is not specified", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -71,7 +71,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies proper responsive height when size is not specified", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -80,7 +80,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies proper background and shadow", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -92,7 +92,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies proper border radius", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -101,14 +101,14 @@ describe("NumberCard Component", () => {
   });
 
   it("renders section number in correct position for responsive mode", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const numberElement = screen.getByText("1");
     expect(numberElement).toBeInTheDocument();
   });
 
   it("renders text content in correct position for responsive mode", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const textElement = screen.getByText("Test Card Text");
     expect(textElement).toBeInTheDocument();
@@ -125,14 +125,14 @@ describe("NumberCard Component", () => {
   });
 
   it("applies proper font classes to text", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const textElement = screen.getByText("Test Card Text");
     expect(textElement).toHaveClass("font-bricolage-grotesque");
   });
 
   it("applies proper text sizing for responsive mode", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const textElement = screen.getByText("Test Card Text");
     expect(textElement).toHaveClass(
@@ -147,7 +147,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies proper text color", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const textElement = screen.getByText("Test Card Text");
     expect(textElement).toHaveClass("text-[#141414]");
@@ -155,14 +155,14 @@ describe("NumberCard Component", () => {
 
   it("handles long text content gracefully", () => {
     const longText =
-      "This is a very long text that should wrap properly and not break the layout of the number card component";
-    render(<NumberCard {...defaultProps} text={longText} />);
+      "This is a very long text that should wrap properly and not break the layout of the Step component";
+    render(<Step {...defaultProps} text={longText} />);
 
     expect(screen.getByText(longText)).toBeInTheDocument();
   });
 
   it("maintains proper responsive behavior when size is not specified", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -192,7 +192,7 @@ describe("NumberCard Component", () => {
   });
 
   it("renders with proper flex layout", () => {
-    render(<NumberCard {...defaultProps} />);
+    render(<Step {...defaultProps} />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -201,7 +201,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies Small size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="small" />);
+    render(<Step {...defaultProps} size="small" />);
 
     // For Small size, text is directly in card div (no wrapper), so use closest("div")
     const card = screen.getByText("Test Card Text").closest("div");
@@ -220,7 +220,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies Medium size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="medium" />);
+    render(<Step {...defaultProps} size="medium" />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -238,7 +238,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies Large size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="large" />);
+    render(<Step {...defaultProps} size="large" />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -258,7 +258,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies XLarge size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="xlarge" />);
+    render(<Step {...defaultProps} size="xlarge" />);
 
     const card = screen
       .getByText("Test Card Text")
diff --git a/tests/unit/buildPublishPayload.test.ts b/tests/unit/buildPublishPayload.test.ts
index 2af899b..060d5c1 100644
--- a/tests/unit/buildPublishPayload.test.ts
+++ b/tests/unit/buildPublishPayload.test.ts
@@ -209,6 +209,39 @@ describe("parseDocumentSectionsForDisplay", () => {
     };
     expect(parseDocumentSectionsForDisplay(doc)).toEqual(doc.sections);
   });
+
+  it("accepts entries with labeled blocks and empty body", () => {
+    const doc = {
+      sections: [
+        {
+          categoryName: "Membership",
+          entries: [
+            {
+              title: "Open membership",
+              body: "",
+              blocks: [
+                { label: "Eligibility", body: "Anyone may join." },
+                { label: "Process", body: "Sign the sheet." },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+    expect(parseDocumentSectionsForDisplay(doc)).toEqual(doc.sections);
+  });
+
+  it("still parses entries with empty body and no blocks", () => {
+    const doc = {
+      sections: [
+        {
+          categoryName: "Values",
+          entries: [{ title: "Consensus", body: "" }],
+        },
+      ],
+    };
+    expect(parseDocumentSectionsForDisplay(doc)).toEqual(doc.sections);
+  });
 });
 
 describe("parseSectionsFromCreateFlowState", () => {
diff --git a/tests/unit/templateReviewMapping.test.ts b/tests/unit/templateReviewMapping.test.ts
index b6b8cbf..a0a0f66 100644
--- a/tests/unit/templateReviewMapping.test.ts
+++ b/tests/unit/templateReviewMapping.test.ts
@@ -7,7 +7,7 @@ import {
 } from "../../lib/create/templateReviewMapping";
 
 describe("templateReviewMapping", () => {
-  it("maps body sections to RuleCard categories", () => {
+  it("maps body sections to Rule categories", () => {
     const body = {
       sections: [
         {
diff --git a/tests/utils/test-utils.tsx b/tests/utils/test-utils.tsx
index e5b219f..34b950e 100644
--- a/tests/utils/test-utils.tsx
+++ b/tests/utils/test-utils.tsx
@@ -6,7 +6,7 @@ import { CreateFlowProvider } from "../../app/(app)/create/context/CreateFlowCon
 import messages from "../../messages/en/index";
 
 /**
- * Custom render function: MessagesProvider, AuthModalProvider (TopNav login), CreateFlowProvider.
+ * Custom render function: MessagesProvider, AuthModalProvider (`Top` login), CreateFlowProvider.
  */
 export function renderWithProviders(
   ui: ReactElement,