diff --git a/src/workflows/4-ux-design/data/page-creation-flows/flow-b-verbal.md b/src/workflows/4-ux-design/data/page-creation-flows/flow-b-verbal.md
index 35045fcc4..a8b587bdc 100644
--- a/src/workflows/4-ux-design/data/page-creation-flows/flow-b-verbal.md
+++ b/src/workflows/4-ux-design/data/page-creation-flows/flow-b-verbal.md
@@ -108,7 +108,7 @@ Generate page specification document:
- User flow description
- Next steps: "Create visualization (sketch/wireframe)"
-Save to: 4-scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/{{page_number}}-{{page_slug}}.md
+Save to: C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/{{page_number}}-{{page_slug}}.md
---
diff --git a/src/workflows/4-ux-design/data/page-creation-flows/flow-e-html.md b/src/workflows/4-ux-design/data/page-creation-flows/flow-e-html.md
index ef2d55ec7..46698b48b 100644
--- a/src/workflows/4-ux-design/data/page-creation-flows/flow-e-html.md
+++ b/src/workflows/4-ux-design/data/page-creation-flows/flow-e-html.md
@@ -78,7 +78,7 @@ Styling:
File: `prototypes/{{page_slug}}-prototype.html`
-Save to: `4-scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes/`
+Save to: `C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes/`
---
@@ -88,7 +88,7 @@ Save to: `4-scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes
+**Next:** We'll define the invisible layer — spacing and typography.
### 3. Present MENU OPTIONS
-Display: "**Select an Option:** [C] Continue to Generate Specification | [M] Return to Activity Menu"
+Display: "**Select an Option:** [C] Continue to Spacing & Typography | [M] Return to Activity Menu"
#### Menu Handling Logic:
diff --git a/src/workflows/4-ux-design/steps-p/step-08-spacing-typography.md b/src/workflows/4-ux-design/steps-p/step-08-spacing-typography.md
new file mode 100644
index 000000000..1cb443019
--- /dev/null
+++ b/src/workflows/4-ux-design/steps-p/step-08-spacing-typography.md
@@ -0,0 +1,210 @@
+---
+name: 'step-08-spacing-typography'
+description: 'Define spacing objects between sections and typography tokens for all text elements'
+
+# File References
+nextStepFile: './step-09-generate-spec.md'
+workflowFile: '../workflow.md'
+activityWorkflowFile: '../workflow-specify.md'
+---
+
+# Step 8: Spacing & Typography
+
+## STEP GOAL:
+
+Define the invisible layer — spacing objects between sections and typography tokens for all text elements. Every gap gets an ID, every heading gets a token.
+
+## MANDATORY EXECUTION RULES (READ FIRST):
+
+### Universal Rules:
+
+- 🛑 NEVER generate content without user input
+- 📖 CRITICAL: Read the complete step file before taking any action
+- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
+- 📋 YOU ARE A FACILITATOR, not a content generator
+- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`
+
+### Role Reinforcement:
+
+- ✅ You are Freya, a creative and thoughtful UX designer collaborating with the user
+- ✅ If you already have been given a name, communication_style and persona, continue to use those while playing this new role
+- ✅ We engage in collaborative dialogue, not command-response
+- ✅ You bring design expertise and systematic thinking, user brings product vision and domain knowledge
+- ✅ Maintain creative and thoughtful tone throughout
+
+### Step-Specific Rules:
+
+- 🎯 Focus on spacing between sections and typography tokens — the invisible layer
+- 🚫 FORBIDDEN to skip zero-spacing decisions (they are intentional design choices)
+- 💬 Approach: Walk through sections top-to-bottom, define each gap and heading
+- 📋 Use token names, never arbitrary pixel values
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Define spacing objects for every section boundary and typography tokens for all headings
+- 💾 Store spacing_objects and typography_tokens
+- 📖 Reference the section layout from step 02 for section order
+- 🚫 FORBIDDEN to use pixel values — always use token names
+
+## CONTEXT BOUNDARIES:
+
+- Available context: Layout sections (step 02), components (step 03), content (step 04)
+- Focus: Spacing between sections and typography scale
+- Limits: Do not redefine layout or components — only add the spacing and typography layer
+- Dependencies: Section layout must be defined
+
+## Sequence of Instructions (Do not deviate, skip, or optimize)
+
+### 1. Define Section-to-Section Spacing
+
+
+
+
+For each pair of adjacent sections from the layout (step 02):
+
+Present the pair and ask:
+
+
+**Spacing between sections:**
+
+Working through your page sections top to bottom:
+
+| Between | Above | Below | Spacing |
+|---------|-------|-------|---------|
+| Gap 1 | [Section A] | [Section B] | ? |
+| Gap 2 | [Section B] | [Section C] | ? |
+| ... | ... | ... | ? |
+
+**Available tokens:** `zero`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`
+
+**Guidelines:**
+- `zero` = sections form one visual unit (e.g., header + nav)
+- `sm`/`md` = related sections
+- `lg`/`xl` = standard section boundaries
+- `2xl`/`3xl` = major visual breaks
+
+For each gap, what spacing feels right?
+
+
+Store spacing_objects with IDs using the naming convention:
+
+`{page-slug}-v-space-{size}` for vertical spacing
+`{page-slug}-v-separator-{size}` for lines/dividers with spacing
+
+Example:
+```
+#### ↕ `hem-v-space-zero` — header and nav form one continuous unit
+#### ↕ `hem-v-space-xl` — standard gap between hero and content
+#### ↕ `hem-v-separator-2xl` — gray line, space-2xl above and below
+#### ↕ `hem-v-space-3xl` — major boundary before footer
+```
+
+Also capture grid gaps for any sections with repeated items (card grids, lists):
+```
+| Grid gap | h-space-lg / v-space-lg |
+```
+
+
+### 2. Define Typography Tokens
+
+
+
+**Typography for your page headings:**
+
+For each heading in your content (from step 04):
+
+| Heading | Semantic tag | Visual size (mobile / tablet / desktop) |
+|---------|-------------|----------------------------------------|
+| [Main page heading] | h1 | ? / ? / ? |
+| [Section heading 1] | h2 | ? / ? / ? |
+| [Section heading 2] | h2 | ? / ? / ? |
+| [Card heading] | h3 | ? / ? / ? |
+
+**Available heading tokens:** `heading-xxs` (14px), `heading-xs` (16px), `heading-sm` (18px), `heading-md` (20px), `heading-lg` (24px), `heading-xl` (30px), `heading-2xl` (36px), `heading-3xl` (44px), `heading-4xl` (56px)
+
+**Rule of thumb:** Step up one token size per breakpoint (mobile → tablet → desktop).
+
+What sizes feel right for each heading?
+
+Store typography_tokens for each heading:
+
+```markdown
+### [Heading name]
+
+**OBJECT ID:** `{page-slug}-{section}-heading`
+
+| Property | Value |
+|----------|-------|
+| Tag | h2 |
+| Visual size | heading-lg / heading-xl / heading-2xl |
+| Font weight | 900 |
+```
+
+
+### 3. Review
+
+
+
+### 4. Present MENU OPTIONS
+
+Display: "**Select an Option:** [C] Continue to Generate Specification | [M] Return to Activity Menu"
+
+#### Menu Handling Logic:
+
+- IF C: Load, read entire file, then execute {nextStepFile}
+- IF M: Return to {workflowFile} or {activityWorkflowFile}
+- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#4-present-menu-options)
+
+#### EXECUTION RULES:
+
+- ALWAYS halt and wait for user input after presenting menu
+- User can chat or ask questions — always respond and then redisplay menu options
+
+## CRITICAL STEP COMPLETION NOTE
+
+ONLY WHEN the user selects an option from the menu and all spacing objects and typography tokens have been defined will you proceed to the next step or return as directed.
+
+---
+
+## 🚨 SYSTEM SUCCESS/FAILURE METRICS
+
+### ✅ SUCCESS:
+
+- Every section boundary has a spacing object with an ID
+- Zero-spacing decisions documented with rationale
+- Grid gaps defined for sections with repeated items
+- All headings have semantic tags and visual tokens
+- Responsive scaling defined (mobile / tablet / desktop)
+- No pixel values used — only token names
+
+### ❌ SYSTEM FAILURE:
+
+- Missing spacing between any section pair
+- Using pixel values instead of tokens
+- Skipping zero-spacing documentation
+- Not defining responsive typography scaling
+- Generating spacing/typography without user input
+
+**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
diff --git a/src/workflows/4-ux-design/steps-p/step-08-generate-spec.md b/src/workflows/4-ux-design/steps-p/step-09-generate-spec.md
similarity index 91%
rename from src/workflows/4-ux-design/steps-p/step-08-generate-spec.md
rename to src/workflows/4-ux-design/steps-p/step-09-generate-spec.md
index ec26a9e26..320f50707 100644
--- a/src/workflows/4-ux-design/steps-p/step-08-generate-spec.md
+++ b/src/workflows/4-ux-design/steps-p/step-09-generate-spec.md
@@ -1,5 +1,5 @@
---
-name: 'step-08-generate-spec'
+name: 'step-09-generate-spec'
description: 'Compile all gathered information into the complete page specification document'
# File References
@@ -7,11 +7,11 @@ workflowFile: '../workflow.md'
activityWorkflowFile: '../workflow-specify.md'
---
-# Step 8: Generate Specification Document
+# Step 9: Generate Specification Document
## STEP GOAL:
-Compile all gathered information from steps 1-7 into the complete page specification document using the specification template.
+Compile all gathered information from steps 1-8 into the complete page specification document using the specification template.
## MANDATORY EXECUTION RULES (READ FIRST):
@@ -42,12 +42,12 @@ Compile all gathered information from steps 1-7 into the complete page specifica
- 🎯 Generate complete specification using the page-specification template
- 💾 Save specification to the correct output location
-- 📖 Reference all data from steps 1-7
+- 📖 Reference all data from steps 1-8
- 🚫 FORBIDDEN to generate with missing data sections
## CONTEXT BOUNDARIES:
-- Available context: All data from steps 1-7
+- Available context: All data from steps 1-8
- Focus: Compilation and document generation
- Limits: Use the template — do not invent new formats
- Dependencies: All previous steps must be complete
@@ -71,6 +71,7 @@ Fill in all sections with data collected:
- interaction_behaviors (from step 05)
- page_states and component_states (from step 06)
- validation_rules and error_messages (from step 07)
+- spacing_objects and typography_tokens (from step 08)
Save complete specification to:
@@ -91,6 +92,8 @@ Fill in all sections with data collected:
- {{state_count}} total states (page + component)
- {{validation_count}} validation rules
- {{error_count}} error messages
+- {{spacing_count}} spacing objects
+- {{typography_count}} typography tokens
**Your specification is development-ready!**
@@ -119,7 +122,7 @@ The specification must be generated, saved, AND the design log updated before th
### ✅ SUCCESS:
- Specification generated using the template
-- All data sections from steps 1-7 included
+- All data sections from steps 1-8 included
- Document saved to correct output location
- Summary presented to user with metrics
- Specification is development-ready
diff --git a/src/workflows/4-ux-design/steps-s/step-07-create-scenario-folder.md b/src/workflows/4-ux-design/steps-s/step-07-create-scenario-folder.md
index 2119a77c4..c7bb62986 100644
--- a/src/workflows/4-ux-design/steps-s/step-07-create-scenario-folder.md
+++ b/src/workflows/4-ux-design/steps-s/step-07-create-scenario-folder.md
@@ -59,7 +59,7 @@ Create the physical folder structure and overview documents for the scenario bas
**Determine scenario number:**
-- Count existing scenario folders in `4-scenarios/`
+- Count existing scenario folders in `C-UX-Scenarios/`
- If none exist, scenario_num = 1
- Otherwise, scenario_num = (highest number + 1)
- Store scenario_num
@@ -68,11 +68,11 @@ Create the physical folder structure and overview documents for the scenario bas
**Create physical folder structure:**
-1. Create `4-scenarios/{{scenario_num}}-{{scenario-slug}}/` directory
+1. Create `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/` directory
**Generate 00-scenario-overview.md:**
-File: `4-scenarios/{{scenario_num}}-{{scenario-slug}}/00-scenario-overview.md`
+File: `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/00-scenario-overview.md`
Content:
```markdown
@@ -145,7 +145,7 @@ When users arrive, they are feeling:
**Generate scenario-tracking.yaml:**
-File: `4-scenarios/{{scenario_num}}-{{scenario-slug}}/scenario-tracking.yaml`
+File: `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/scenario-tracking.yaml`
Content:
```yaml
@@ -176,7 +176,7 @@ total_pages: {{pages_list.length}}
**Scenario {{scenario_num}}:** {{scenario_name}}
**Folder:**
-- `4-scenarios/{{scenario_num}}-{{scenario-slug}}/`
+- `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/`
**Documents:**
- `00-scenario-overview.md` (detailed scenario metadata)
diff --git a/src/workflows/4-ux-design/steps-s/step-15-create-page-structure.md b/src/workflows/4-ux-design/steps-s/step-15-create-page-structure.md
index 73bcda238..0e860d395 100644
--- a/src/workflows/4-ux-design/steps-s/step-15-create-page-structure.md
+++ b/src/workflows/4-ux-design/steps-s/step-15-create-page-structure.md
@@ -60,13 +60,13 @@ Create the physical page folder structure, generate the initial specification do
**Determine page folder path:**
**For single page projects (no scenarios):**
-- Page path: `4-scenarios/{{page_slug}}/`
+- Page path: `C-UX-Scenarios/{{page_slug}}/`
**For scenario-based projects:**
- Read scenario_number from context
- Read current_page_index from `scenario-tracking.yaml`
- Calculate page_number: `{{scenario_number}}.{{current_page_index + 1}}`
-- Page path: `4-scenarios/{{scenario_number}}-{{scenario-slug}}/{{page_number}}-{{page_slug}}/`
+- Page path: `C-UX-Scenarios/{{scenario_number}}-{{scenario-slug}}/{{page_number}}-{{page_slug}}/`
Store page_path and page_number
@@ -178,26 +178,44 @@ If this is a scenario-based project:
- Add sketches to the sketches folder
- Continue with page design
-### 2. Present MENU OPTIONS
+### 2. Two-Option Transition
-Display: "**Select an Option:** [A] Add Another Page | [S] Add Another Scenario | [M] Return to Activity Menu"
+After page structure is created, present exactly two options:
-#### Menu Handling Logic:
+**If more pages exist in the scenario (from Q8 shortest path):**
-- IF A: Load, read entire file, then execute ./step-08-page-context.md
-- IF S: Load, read entire file, then execute ./step-01-core-feature.md
-- IF M: Return to {workflowFile} or {activityWorkflowFile}
-- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#2-present-menu-options)
+
+
+**If this is the last page in the scenario:**
+
+
+
+#### Transition Handling:
+
+- **Option 1 (specify):** Load and execute `../steps-p/step-01-page-basics.md`
+- **Option 2 (next page):** Load and execute `./step-08-page-context.md` for the next page
+- **Option 2 (all done):** Return to {workflowFile} adaptive dashboard
+- **Dream mode:** Auto-proceed to option 1. Skip menu display.
#### EXECUTION RULES:
-- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
-- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
-- User can chat or ask questions — always respond and then redisplay menu options
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting transition options
+- User can chat or ask questions — always respond and then redisplay the transition
+- The user can always say "stop" to pause and return later — log current status
## CRITICAL STEP COMPLETION NOTE
-ONLY WHEN the user selects an option from the menu and the page structure has been created will you proceed as directed. This is the last step in the Suggest activity chain.
+ONLY WHEN the user selects an option and the page structure has been created will you proceed as directed. This is the last step in the Suggest page creation chain.
---
diff --git a/src/workflows/4-ux-design/steps-w/step-03-review-integrate.md b/src/workflows/4-ux-design/steps-w/step-03-review-integrate.md
index 5057976e5..ebc442992 100644
--- a/src/workflows/4-ux-design/steps-w/step-03-review-integrate.md
+++ b/src/workflows/4-ux-design/steps-w/step-03-review-integrate.md
@@ -85,7 +85,7 @@ Store visual artifact in the appropriate location:
- **UI mockups (page/section):** `{output_folder}/D-Design-System/01-Visual-Design/design-concepts/`
- **Image assets (photos/illustrations):** `{output_folder}/D-Design-System/01-Visual-Design/design-concepts/` (move to `02-Assets/images/` when finalized)
-- **Legacy path:** `{output_folder}/D-UX-Design/[scenario]/visuals/` (if project uses older folder structure)
+- **Legacy path:** `{output_folder}/C-UX-Scenarios/[scenario]/visuals/` (if project uses older folder structure)
**Update the agent dialog** with the accepted result and save path.
diff --git a/src/workflows/4-ux-design/workflow-design-system.md b/src/workflows/4-ux-design/workflow-design-system.md
index 4a7eb700a..03a938d42 100644
--- a/src/workflows/4-ux-design/workflow-design-system.md
+++ b/src/workflows/4-ux-design/workflow-design-system.md
@@ -20,9 +20,26 @@ description: 'Define, update, and review design system components used across pa
3. Load dialog context
+## Extraction Rules
+
+Not everything extracts at the same time:
+
+### Objects: Extract on Second Use
+The first time a button, card, or widget appears, it stays inline in the page spec — it's a one-off. The **second** time the same pattern appears (same states, same behavior), it's a real pattern. Extract it to the design system.
+
+**First use = one-off. Second use = pattern. Extract.**
+
+### Spacing: Extract Immediately on First Use
+Spacing extracts on **first use** — no waiting for a second occurrence. Spacing is relational: when you decide that a heading needs `space-xl` above a card grid, that's a universal design principle, not a page-specific detail.
+
+### Component Extraction Check
+Before designing the 2nd+ page, scan completed specs for shared elements. If found, suggest extraction. Don't block the flow — the user can defer.
+
+---
+
## Entry
-Load design system from `{output_folder}/D-UX-Design/design-system/` (if exists).
+Load design system from `{output_folder}/D-Design-System/` (if exists).
## Steps
diff --git a/src/workflows/4-ux-design/workflow-specify.md b/src/workflows/4-ux-design/workflow-specify.md
index 5e8512eec..59f3d484d 100644
--- a/src/workflows/4-ux-design/workflow-specify.md
+++ b/src/workflows/4-ux-design/workflow-specify.md
@@ -37,7 +37,8 @@ Execute steps in `./steps-p/`:
| 05 | step-05-interactions.md | User interactions and behaviors |
| 06 | step-06-states.md | Loading, error, empty states |
| 07 | step-07-validation.md | Form validation and constraints |
-| 08 | step-08-generate-spec.md | Generate final specification document |
+| 08 | step-08-spacing-typography.md | Spacing objects and typography tokens |
+| 09 | step-09-generate-spec.md | Generate final specification document |
**Reference data:**
- `./data/object-types/` — component types and templates
diff --git a/src/workflows/4-ux-design/workflow-validate.md b/src/workflows/4-ux-design/workflow-validate.md
index 848dde4ff..fd4497e30 100644
--- a/src/workflows/4-ux-design/workflow-validate.md
+++ b/src/workflows/4-ux-design/workflow-validate.md
@@ -22,7 +22,7 @@ description: 'Systematically audit page specifications for completeness, consist
### Configuration Loading
1. Load project config
-2. Locate page specifications at `{output_folder}/D-UX-Design/`
+2. Locate page specifications at `{output_folder}/C-UX-Scenarios/`
3. Begin: Load and execute `./steps-v/step-01-page-metadata.md`
**Reference data:**
@@ -53,7 +53,7 @@ Execute each step in order. Each step produces a section of the validation repor
## Final Output
-Save validation report to `{output_folder}/D-UX-Design/validation-report.md`
+Save validation report to `{output_folder}/_progress/validation-report.md`
---
diff --git a/src/workflows/4-ux-design/workflow-visual.md b/src/workflows/4-ux-design/workflow-visual.md
index c1ce63905..4e4d10687 100644
--- a/src/workflows/4-ux-design/workflow-visual.md
+++ b/src/workflows/4-ux-design/workflow-visual.md
@@ -22,7 +22,7 @@ description: 'Create visual representations of page designs using external tools
## Entry
-Load page specification from `{output_folder}/D-UX-Design/`.
+Load page specification from `{output_folder}/C-UX-Scenarios/`.
## Steps
diff --git a/src/workflows/4-ux-design/workflow.md b/src/workflows/4-ux-design/workflow.md
index 828d5493a..39d3d065e 100644
--- a/src/workflows/4-ux-design/workflow.md
+++ b/src/workflows/4-ux-design/workflow.md
@@ -166,7 +166,7 @@ The primary navigation is the adaptive dashboard above — Freya suggests the ne
[D] Dream Up Design — I'll create it all, you review
── Specify ─────────────────────────────────────
-[P] Write Specifications — Content, interaction and functionality specs
+[P] Write Specifications — Content, interactions, spacing, typography specs
[V] Validate Specs — Audit spec completeness and quality
── Produce ─────────────────────────────────────