# How to Use the Hallmark Redesign Command to Rebuild Existing Pages > Learn how to use the Hallmark redesign command to rebuild existing pages. Preserve copy and IA while updating visuals and interactions with this powerful tool. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: how-to-guide - Published: 2026-07-31 --- **The `hallmark redesign` command replaces the visual and interaction layer of pages while preserving existing copy, information architecture, and brand values, operating in either single-page or multi-page flows.** The `hallmark redesign` command in the Nutlope/hallmark repository provides a structured approach to regenerating UI components without rewriting content. This tool analyzes your source files and applies new macro-structures from [`structure.md`](https://github.com/Nutlope/hallmark/blob/main/structure.md) while maintaining your original messaging and brand identity. ## How the Hallmark Redesign Command Works The command operates through two distinct execution paths defined in [`skills/hallmark/references/verbs/redesign.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md). **Single-page redesign** triggers when targeting an individual file. Hallmark reads the page, selects a different macro-structure from [`structure.md`](https://github.com/Nutlope/hallmark/blob/main/structure.md), applies new component voice and reveal patterns, and returns updated source code while preserving copy, information architecture, route trees, and brand values. **Multi-page redesign** activates when targeting directories or glob patterns. This flow first creates a project-wide [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) file that serves as the single source of truth, then regenerates each page according to that locked design system to ensure consistency across the entire application. ## Single-Page Redesign Process According to lines 32-58 of [`skills/hallmark/references/verbs/redesign.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md), the single-page flow follows these core steps: 1. **Detect scope** – Hallmark analyzes the target path to determine whether to execute single-page or multi-page mode. 2. **Preserve** – The verb explicitly retains **copy intent**, **information architecture**, **brand colors/fonts**, and **primary CTAs**. 3. **Replace** – It swaps the **structural fingerprint** using alternative macro-structures from [`structure.md`](https://github.com/Nutlope/hallmark/blob/main/structure.md), updates **component voice**, **reveal patterns**, and **visual rhythm**. 4. **Apply mood (optional)** – The `--mood ` parameter maps to entries in [`typography.md`](https://github.com/Nutlope/hallmark/blob/main/typography.md) and [`structure.md`](https://github.com/Nutlope/hallmark/blob/main/structure.md) to drive the redesign toward specific tones like `luxury`. 5. **Confirmation** – Hallmark pauses for explicit confirmation if the redesign requires deleting multiple components or collapsing the route tree. ## Multi-Page Redesign Process For site-wide changes, lines 31-70 of the redesign reference specify this workflow: 1. **Project scan** – Hallmark lists every page-level file, collects existing design assets, and checks previous entries in [`.hallmark/log.json`](https://github.com/Nutlope/hallmark/blob/main/.hallmark/log.json). 2. **Create design.md** – Generates a locked design system at the project root recording genre, macro-structure families, theme tokens, typography, spacing, motion, and micro-interactions. 3. **Redesign each page** – Every page reads [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) first, then regenerates code with a stamp comment like `/* Hallmark · genre: modern‑minimal · macrostructure: marquee‑hero · design-system: design.md */`. 4. **Enforce inverted diversification** – Pages must share theme, color palette, and typography, with only macro-structures varying as allowed by the design system. ## Practical Code Examples ### Redesign a Single Component ```bash # Rebuild the visual structure of ./hero.tsx hallmark redesign ./hero.tsx ``` This returns a new [`hero.tsx`](https://github.com/Nutlope/hallmark/blob/main/hero.tsx) where the macro-structure (for example, "centered-hero") swaps for a different fingerprint (for example, "marquee-hero") while the headline text remains identical. ### Apply a Specific Mood ```bash # Target luxury tone from typography.md hallmark redesign ./pricing.tsx --mood luxury ``` Hallmark maps **luxury** to a high-contrast color palette and refined typography entries, then builds a new structure accordingly. ### Redesign an Entire Site ```bash # Apply new design system to every page under ./app/ hallmark redesign ./app/ --multi-page ``` This process first creates [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) at the repo root, prompts you with the generated design before writing, then regenerates each page under `./app/` to match the new system. A single combined log entry writes to [`.hallmark/log.json`](https://github.com/Nutlope/hallmark/blob/main/.hallmark/log.json) with `"scope": "app"`. ### Update an Existing Design System If a page needs a theme that [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) does not allow, amend the design file first: ```bash # Edit the design system manually code design.md # add a new variant or adjust the theme # Then run the redesign again hallmark redesign ./new-landing.tsx ``` Hallmark respects the updated [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) and applies the new allowances. ## Key Configuration Files - **[`skills/hallmark/references/verbs/redesign.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md)** – Complete specification of scope detection, single versus multi-page flows, mood handling, and confirmation rules. - **[`skills/hallmark/references/structure.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/structure.md)** – Catalog of macro-structures (fingerprints) that Hallmark selects from when redesigning. - **[`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md)** – Tone definitions used for the optional `--mood` argument. - **[`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md)** (generated) – The locked design system for multi-page projects; defines genre, theme tokens, macro-structure families, and motion guidelines. Created automatically at the project root during multi-page redesign. - **`site/_tests/verbs/redesign/`** – Example outputs showing before/after diffs of redesign operations. ## Summary - The `hallmark redesign` command operates in **single-page** or **multi-page** modes depending on target scope detection. - Single-page redesigns preserve copy and information architecture while replacing macro-structures from [`structure.md`](https://github.com/Nutlope/hallmark/blob/main/structure.md). - Multi-page redesigns create a [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) design system first, then apply it consistently across all pages with inverted diversification rules. - Use `--mood` to target specific tonal directions mapped in [`typography.md`](https://github.com/Nutlope/hallmark/blob/main/typography.md). - The implementation in [`skills/hallmark/references/verbs/redesign.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md) enforces confirmation prompts for destructive changes that affect route trees or delete multiple components. ## Frequently Asked Questions ### What is the difference between single-page and multi-page redesign? Single-page redesign targets individual files, swapping macro-structures while keeping existing copy and routes intact. Multi-page redesign processes entire directories by first creating a [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) file that locks the design system, ensuring visual consistency across all regenerated pages according to the rules in [`skills/hallmark/references/verbs/redesign.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md). ### How does the `--mood` parameter work? The `--mood` flag maps user-specified tones like `luxury` to specific entries in [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md) and [`skills/hallmark/references/structure.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/structure.md). This influences the visual rhythm, typography choices, and structural patterns selected during the redesign process. ### Will Hallmark delete my existing content? No. According to the source code in [`skills/hallmark/references/verbs/redesign.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md), the redesign verb explicitly preserves copy intent, information architecture, brand colors, fonts, and primary CTAs. It only replaces the structural fingerprint, component voice, and visual presentation layers. ### Where is the design system stored in multi-page mode? When running multi-page redesign, Hallmark creates [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) at the project root. This file contains locked specifications for genre, theme tokens, typography, spacing, motion, and macro-structure families that all pages reference during regeneration, as documented in lines 31-70 of the redesign specification.