@polymorphism-tech/morph-spec 4.11.0 → 4.12.0

package/framework/skills/level-1-workflows/morph-phase-plan/SKILL.md

@@ -4,7 +4,7 @@ description: MORPH-SPEC Phase 4 (Plan). Generates a detailed implementation plan
 argument-hint: "[feature-name]"
 user-invocable: false
 allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
-cliVersion: "4.11.0"
+cliVersion: "4.12.0"
 ---
 
 # MORPH Plan — Phase 4
@@ -54,6 +54,14 @@ Check the `"phase"` field:
 
 > **Rule:** Never write to `3-plan/` until the phase is `plan`.
 
+## MANDATORY: Session Tasks
+
+> **BEFORE reading any files**, analyze the planning workflow and create session tasks.
+>
+> **Rules:** Minimum 2 tasks, typically 3-5. Mark `in_progress` before starting, `completed` after.
+>
+> **Typical tasks:** feature analysis, execution strategy, plan.md generation, plan approval
+
 ### 1. Read all prerequisites in PARALLEL
 
 ```
@@ -65,17 +73,6 @@ Read: .morph/features/{feature}/1-design/spec.md
     + Read: .morph/config/config.json
 ```
 
-### 1.5 Create session tasks for visibility
-
-```
-TaskCreate: "Analyze feature for execution strategy"  → activeForm: "Analyzing feature"
-TaskCreate: "Determine execution strategy"            → activeForm: "Planning strategy"
-TaskCreate: "Generate plan.md"                        → activeForm: "Writing plan"
-TaskCreate: "Plan approval"                           → activeForm: "Awaiting plan approval"
-```
-
-Update each to `in_progress` before starting and `completed` after finishing.
-
 ---
 
 ## Workflow

package/framework/skills/level-1-workflows/morph-phase-setup/SKILL.md

@@ -4,7 +4,7 @@ description: MORPH-SPEC Phase 1 (Setup). Reads project context, detects tech sta
 argument-hint: "[feature-name]"
 user-invocable: false
 allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
-cliVersion: "4.11.0"
+cliVersion: "4.12.0"
 ---
 
 # MORPH Setup — Phase 1
@@ -58,16 +58,13 @@ If any checkbox is NOT checked → go back to Phase 0 (Proposal).
 
 ---
 
-### Create session tasks for visibility
+## MANDATORY: Session Tasks
 
-```
-TaskCreate: "Detect agents and load standards"  → activeForm: "Detecting agents"
-TaskCreate: "Validate MCP connections"          → activeForm: "Validating MCPs"
-TaskCreate: "Confirm stack with user"           → activeForm: "Confirming stack"
-TaskCreate: "Configure feature state"           → activeForm: "Configuring state"
-```
-
-Update each task to `in_progress` before its step and `completed` after.
+> **BEFORE starting any setup work**, analyze the steps below and create session tasks.
+>
+> **Rules:** Minimum 2 tasks, typically 3-5. Mark `in_progress` before starting, `completed` after.
+>
+> **Typical tasks:** agent detection, MCP validation, stack confirmation, state configuration
 
 ---
 

package/framework/skills/level-1-workflows/morph-phase-tasks/SKILL.md

@@ -4,7 +4,7 @@ description: MORPH-SPEC Phase 4 (Tasks). Breaks approved spec into bottom-up ord
 argument-hint: "[feature-name]"
 user-invocable: false
 allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
-cliVersion: "4.11.0"
+cliVersion: "4.12.0"
 ---
 
 # MORPH Tasks — Phase 4
@@ -71,6 +71,14 @@ Check the `"phase"` field:
 
 ---
 
+## MANDATORY: Session Tasks
+
+> **BEFORE reading any files**, analyze the task breakdown workflow and create session tasks.
+>
+> **Rules:** Minimum 2 tasks, typically 3-4. Mark `in_progress` before starting, `completed` after.
+>
+> **Typical tasks:** spec analysis and task definition, tasks.md generation, state update and approval
+
 ### 1. Read all prerequisites in PARALLEL
 
 ```
@@ -82,25 +90,9 @@ Read: .morph/features/{feature}/1-design/spec.md
     + Read: .morph/config/config.json                               (→ architecture.style)
 ```
 
-### 2. Create session tasks for visibility
-
-After detecting `activeAgents` from state, create tasks with agent context:
-
-```
-TaskCreate: "Analyze spec and define tasks"
-  → description: "Active agents: {activeAgents.join(', ')}"
-  → activeForm: "Analyzing spec"
-TaskCreate: "Generate tasks.md"
-  → description: "Architecture: {config.architecture.style}"
-  → activeForm: "Generating tasks.md"
-TaskCreate: "Phase advance"  → activeForm: "Awaiting tasks approval + advancing phase"
-```
-
-> **Note:** Individual T001-T00N tasks are created as native tasks during the implementation phase (`phase-implement`). Here we only keep the 3 high-level tasks for this planning session.
-
 ---
 
-### 3. Entry checkpoint — verify prerequisites
+### 2. Entry checkpoint — verify prerequisites
 
 Before starting the breakdown:
 

package/framework/skills/level-1-workflows/morph-phase-uiux/SKILL.md

@@ -4,7 +4,7 @@ description: MORPH-SPEC Phase 1.5 (UI/UX). Creates design-system.md, mockups.md,
 argument-hint: "[feature-name]"
 user-invocable: false
 allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
-cliVersion: "4.11.0"
+cliVersion: "4.12.0"
 ---
 
 # MORPH UI/UX Design - Phase 1.5
@@ -39,6 +39,11 @@ Conditional phase for features with front-end. Collects UI/UX requirements, gene
 | Render UI templates | **Bash** `morph-spec template render docs/ui-mockups ...` | — |
 | Generate design system from existing CSS | **Bash** `morph-spec generate design-system --scan` | — |
 | Update state | **Bash** `morph-spec state mark-output ...` | — |
+| Auto-detect dev server | **Glob** `next.config.*`, `vite.config.*`, `*.csproj` | **Read** `package.json` scripts |
+| Capture existing app | **Playwright MCP** `browser_navigate()` + `browser_take_screenshot()` | — |
+| Read Tailwind config | **Read** `tailwind.config.{js,ts}` | **Grep** `colors:` |
+| Read MudBlazor theme | **Glob** `**/MudTheme*.cs` → **Read** | **Grep** `PaletteLight` |
+| Trend research | **Read** `design-trends.md` standard | **Context7 MCP** / **WebSearch** |
 
 **MCPs for this phase:** Playwright (preview, inspection, responsiveness), Context7 (component docs).
 
@@ -70,15 +75,123 @@ Check the `"phase"` field in the output:
 
 ---
 
+### Step 0.2: Capture Existing App (Playwright)
+
+> **Purpose:** Before analyzing tokens, capture visual screenshots of the existing app to understand current design patterns.
+> **Skip if:** Greenfield project (no existing UI pages).
+
+#### 0.2.1 — Auto-detect dev server
+
+Check in priority order:
+
+1. **`config.json`**: Read `.morph/config/config.json` → check for `project.devServerUrl` field → use if present
+2. **`package.json` port flags**: Read `package.json` scripts → scan for `--port`, `-p` flags → extract port
+3. **Next.js**: Glob `next.config.*` → try `http://localhost:3000`
+4. **Vite**: Glob `vite.config.*` → try `http://localhost:5173`
+5. **.NET launchSettings**: Glob `**/Properties/launchSettings.json` → Read → extract `applicationUrl`
+6. **.NET fallback**: Glob `*.csproj` → try `https://localhost:5001`
+
+Track: `detectedUrl` (string or null).
+
+#### 0.2.2 — Attempt connection
+
+If `detectedUrl` is not null:
+
+```
+mcp__plugin_playwright_playwright__browser_navigate({ url: detectedUrl })
+```
+
+- **Timeout:** 5 seconds
+- **If connects:** proceed to 0.2.3
+- **If fails (timeout/error):**
+
+```json
+{
+  "questions": [{
+    "header": "Dev Server",
+    "question": "Could not connect to dev server at {detectedUrl}. How to proceed?",
+    "multiSelect": false,
+    "options": [
+      { "label": "Start server first", "description": "I'll start the dev server — wait for me" },
+      { "label": "Use different URL", "description": "I'll provide the correct URL (Other)" },
+      { "label": "Skip screenshots", "description": "Continue without existing app screenshots" }
+    ]
+  }]
+}
+```
+
+If `detectedUrl` is null (no indicators found):
+
+```json
+{
+  "questions": [{
+    "header": "Existing UI?",
+    "question": "Does this project have existing UI pages I should capture?",
+    "multiSelect": false,
+    "options": [
+      { "label": "Yes, provide URL", "description": "I'll provide the URL in the field below (Other)" },
+      { "label": "No, greenfield", "description": "Skip — this is a new project" }
+    ]
+  }]
+}
+```
+
+#### 0.2.3 — Screenshot main pages
+
+Once connected, take screenshots of up to 5 pages:
+
+1. **Current page** (usually home/root)
+2. Navigate to common routes: `/dashboard`, `/admin`, `/settings`, or detect from sidebar links via `browser_snapshot()`
+3. For each page:
+   ```
+   mcp__plugin_playwright_playwright__browser_resize({ width: 1440, height: 900 })
+   mcp__plugin_playwright_playwright__browser_take_screenshot({})
+   ```
+4. Save screenshots to `.morph/features/$ARGUMENTS/2-ui/existing-*.png`
+
+#### 0.2.4 — Visual analysis
+
+Analyze the captured screenshots and write `.morph/features/$ARGUMENTS/2-ui/existing-ui-analysis.md`:
+
+> **Note:** This is an intermediate artifact — NOT a tracked output in `output-schema.js`. It will not appear in `state mark-output`. Advisory warnings from `task-tracking-guard.js` are expected.
+
+```markdown
+# Existing UI Analysis — {Feature}
+
+## Visual Summary
+- **Color palette:** [dominant colors observed]
+- **Typography:** [serif/sans/mono, approximate weights, scale]
+- **Layout:** [sidebar/topbar/fullwidth, grid system, card patterns]
+- **Sophistication level:** [basic/intermediate/advanced]
+- **Dark/Light mode:** [which mode detected, or both]
+
+## Design Tokens Detected Visually
+- Primary color: [approx hex from screenshots]
+- Background: [surface colors observed]
+- Border style: [rounded/sharp, thickness]
+- Shadow style: [flat/elevated/colored]
+
+## Patterns Worth Preserving
+- [List patterns that work well and should be maintained]
+
+## Opportunities for Improvement
+- [List areas where modern techniques could improve the UI]
+```
+
+This analysis feeds into Step 0.5 (cross-check with extracted tokens) and Step 1.5 (domain-adaptive direction).
+
+---
+
 ### Step 0.5: Check Design System
 
 **This step is MANDATORY and must always run before Step 1.**
 
-#### Step 0.5.1 — Scan frontend for CSS tokens (ALWAYS)
+#### Step 0.5.1 — Scan frontend for design tokens (ALWAYS)
 
-Search for existing CSS custom properties in the project's frontend directories.
+Search for existing design tokens across ALL supported stacks. Run these scans in parallel:
 
-Glob these patterns (exclude `node_modules/`, `.next/`, `dist/`, `build/`):
+**A. CSS Custom Properties (all stacks):**
+Glob these patterns (exclude `node_modules/`, `.next/`, `dist/`, `build/`, `obj/`, `bin/`):
 ```
 wwwroot/**/*.css
 wwwroot/**/*.scss
@@ -88,16 +201,43 @@ src/**/*.css
 src/**/*.scss
 src/**/*.module.css
 public/**/*.css
+app/**/*.css
 ```
-
-For each CSS/SCSS file found, Grep for `:root {` blocks containing `--` custom properties.
-
-Classify found tokens:
-- **Colors**: lines with `--color-*`, or any `--*` containing `#hex` / `rgb(...)`
-- **Fonts**: `--font-*` or `font-family:` declarations
-- **Spacing**: `--space-*`, `--gap-*`, `--size-*` with rem/px values
-
-Track: `cssTokensFound` (bool), token counts by category, source file list.
+For each file found, Grep for `:root {` blocks containing `--` custom properties.
+
+**B. Tailwind Config (Next.js / Vite):**
+Glob: `tailwind.config.{js,ts,mjs,cjs}`
+If found, Read the file and extract:
+- `theme.colors` / `theme.extend.colors` → map to color tokens
+- `theme.fontFamily` → map to font tokens
+- `theme.spacing` → map to spacing tokens
+- `theme.borderRadius` → map to radius tokens
+
+**C. shadcn/ui Config:**
+Glob: `components.json`
+If found and contains `"style"` field, also scan `src/lib/utils.ts` or `lib/utils.ts` for CSS var references.
+
+**D. MudBlazor Theme (.NET):**
+Glob: `**/MudTheme*.cs`, `**/*Theme*.cs`, `**/CustomTheme*.cs`
+If found, Grep for `PaletteLight`, `PaletteDark`, `Typography` property assignments.
+Extract: Primary, Secondary, Tertiary, Background, Surface colors + font families.
+
+**E. Fluent UI Theme (.NET):**
+Glob: `**/FluentDesignTheme*.cs`, `**/DesignTheme*.cs`
+If found, Grep for `DesignThemePalette` properties.
+
+**F. Global theme files:**
+Glob: `**/theme.{ts,js}`, `**/tokens.{ts,js}`, `**/design-tokens.{ts,js}`
+If found, Read and extract exported color/spacing/font objects.
+
+Classify ALL found tokens into:
+- **Colors**: `--color-*`, hex values, rgb(), Palette assignments
+- **Fonts**: `--font-*`, `font-family:`, fontFamily config
+- **Spacing**: `--space-*`, `--gap-*`, spacing config
+- **Radius**: `--radius-*`, borderRadius config
+- **Shadows**: `--shadow-*`, boxShadow config
+
+Track: `tokensFound` (object by category), `tokenSources` (array of {file, stack, tokenCount}).
 
 #### Step 0.5.2 — Check if design-system.md exists
 
@@ -113,7 +253,7 @@ Track: `dsExists` (bool).
 |------|-----------|--------|
 | **A** | `dsExists` AND `cssTokensFound` | Cross-check DS vs scanned tokens. If >2 colors diverge, flag misalignment and ask user if they want to update DS with `AskUserQuestion`. Proceed to Step 1. |
 | **B** | `dsExists` AND NOT `cssTokensFound` | Print: `✓ Design system found (no CSS tokens to cross-check)`. Proceed to Step 1. |
-| **C** | NOT `dsExists` AND `cssTokensFound` | Auto-generate `.morph/context/design-system.md` from scanned tokens (see Case C detail below). Proceed to Step 1. |
+| **C** | NOT `dsExists` AND tokens found | Auto-generate `.morph/context/design-system.md` from ALL scanned token sources (CSS vars, Tailwind config, MudBlazor theme, etc.). Merge tokens from multiple sources, preferring Tailwind/Theme config over raw CSS. If Step 0.2 produced `existing-ui-analysis.md`, cross-reference visual analysis with extracted tokens. Proceed to Step 1. |
 | **D** | NOT `dsExists` AND NOT `cssTokensFound` | Greenfield project. Ask user for aesthetic direction + brand color using `AskUserQuestion` (same options as morph-init). Scaffold from template. Proceed to Step 1. |
 
 **Case C — auto-generate from scanned tokens:**
@@ -129,6 +269,14 @@ Print: `✓ Design system generated from [N] tokens — .morph/context/design-sy
 
 > **Design system is mandatory** for UI features. The implementation gate (Phase 5) will block if no design system exists.
 
+## MANDATORY: Session Tasks
+
+> **BEFORE starting UI/UX work**, analyze the workflow below and create session tasks.
+>
+> **Rules:** Minimum 3 tasks, typically 5-7. Mark `in_progress` before starting, `completed` after.
+>
+> **Typical tasks:** design system check, user input collection, UI library selection, visual mockup, deliverable generation, accessibility validation, approval
+
 ### Step 1: Detect If Phase Is Needed
 
 Check if active agents include `ui-designer`:
@@ -139,6 +287,60 @@ morph-spec state get $ARGUMENTS
 
 If `ui-designer` is NOT in `activeAgents`, skip this phase and continue to Phase 2 (Design).
 
+### Step 1.3: Trend Research
+
+> **Purpose:** Before defining aesthetic direction, research current design trends relevant to this project's domain.
+> **Ref:** `framework/standards/frontend/design-system/design-trends.md`
+
+#### 1.3.1 — Consult curated catalog
+
+Read `framework/standards/frontend/design-system/design-trends.md` and identify techniques relevant to the project.
+
+#### 1.3.2 — Detect project domain
+
+Scan `.morph/features/$ARGUMENTS/0-proposal/proposal.md` for domain keywords:
+
+| Domain | Keywords |
+|--------|----------|
+| SaaS Dashboard | dashboard, analytics, metrics, monitoring, kpi, chart |
+| E-commerce | e-commerce, store, product, cart, checkout, catalog |
+| Landing Page | landing, marketing, site, hero, launch, waitlist |
+| Internal Tool | admin, backoffice, internal, settings, management |
+| Social/Community | social, feed, community, chat, post, notification |
+
+Count keyword hits per domain. Use the domain with most hits. If zero hits across all domains, skip domain-specific filtering.
+
+#### 1.3.3 — Research current trends (optional enhancement)
+
+If Context7 MCP or WebSearch is available:
+- Search: "{currentYear} UI design trends {detectedDomain}"
+- Extract 2-3 additional techniques not in the curated catalog
+- Evaluate if they are production-ready (browser support, performance)
+
+#### 1.3.4 — Present recommendations
+
+Use `AskUserQuestion` to present 3-4 recommended modern techniques:
+
+```json
+{
+  "questions": [{
+    "header": "Trends",
+    "question": "Based on your project domain ({detectedDomain}), these modern techniques are recommended. Which ones do you want to incorporate?",
+    "multiSelect": true,
+    "options": [
+      { "label": "{Technique 1}", "description": "{Brief description + when to use}" },
+      { "label": "{Technique 2}", "description": "{Brief description + when to use}" },
+      { "label": "{Technique 3}", "description": "{Brief description + when to use}" },
+      { "label": "None / custom", "description": "Skip trends or describe your own preference (Other)" }
+    ]
+  }]
+}
+```
+
+Selected trends feed into Step 1.5 (Aesthetic Direction) and Step 4 (Deliverables).
+
+---
+
 ### Step 1.5: Design Thinking — Aesthetic Direction
 
 > **Ref:** `framework/standards/frontend/design-system/aesthetic-direction.md`
@@ -153,6 +355,46 @@ If `ui-designer` is NOT in `activeAgents`, skip this phase and continue to Phase
 **CRITICAL:** Commit to direction BEFORE technical specs. Document in `ui-design-system.md`
 in section `## Aesthetic Direction` (template available in the standard above).
 
+#### Domain-Adaptive Patterns
+
+After defining aesthetic direction, apply domain-specific pattern suggestions:
+
+> **Ref:** `framework/standards/frontend/design-system/aesthetic-direction.md` → `## Domain Adaptation`
+
+Based on the domain detected in Step 1.3.2, suggest patterns from the Domain Adaptation guide:
+
+| Domain | Preferred Directions | Key Patterns to Suggest |
+|--------|---------------------|------------------------|
+| SaaS Dashboard | Industrial, Minimal Refined | Dense bento grid KPIs, skeleton loaders, sidebar glassmorphism, dark mode default |
+| E-commerce | Modern Luxury, Soft Professional | Product card hover lift, CTA colored shadows, image-first layouts, scroll galleries |
+| Landing Page | Editorial, Modern Luxury | Hero aurora gradient, scroll-driven narrative, fluid typography, overlapping layers |
+| Internal Tool | Industrial, Minimal Refined | Compact forms, dense tables, status chips, monospace data displays |
+| Social/Community | Soft Professional, Editorial | Card feed, notification badges, avatar systems, drawer navigation |
+
+If the user's chosen direction conflicts with domain recommendations (e.g., Industrial for E-commerce), present an `AskUserQuestion` advisory:
+
+```json
+{
+  "questions": [{
+    "header": "Direction",
+    "question": "You chose {direction} for a {domain} project. The recommended directions are {recommended}. Keep your choice or adapt?",
+    "multiSelect": false,
+    "options": [
+      { "label": "Keep {direction}", "description": "I have specific reasons for this choice" },
+      { "label": "Switch to {recommended[0]}", "description": "{Brief rationale}" }
+    ]
+  }]
+}
+```
+
+#### Integration with Selected Trends
+
+Incorporate the trends selected in Step 1.3.4 into the aesthetic direction documentation:
+
+- Add selected trends to `## Aesthetic Direction` in `ui-design-system.md`
+- Reference the specific implementation from `design-trends.md`
+- Document how each trend maps to the chosen direction
+
 **Anti-patterns to avoid:**
 - Purple gradient on white background (AI cliche)
 - Inter/Roboto as display font

package/framework/skills/level-1-workflows/morph-scope-escalation/SKILL.md

@@ -4,7 +4,7 @@ description: Guided workflow for mid-implementation scope escalation — analyze
 user-invocable: true
 argument-hint: "[feature-name]"
 allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
-cliVersion: "4.11.0"
+cliVersion: "4.12.0"
 ---
 
 # Scope Escalation Workflow

package/framework/standards/STANDARDS.json

@@ -1359,6 +1359,37 @@
         "*"
       ]
     },
+    {
+      "id": "frontend-design-system-design-trends",
+      "name": "design trends",
+      "path": "frontend/design-system/design-trends.md",
+      "category": "frontend",
+      "subcategory": "design-system",
+      "tags": [
+        "frontend",
+        "design-system",
+        "trends",
+        "modern"
+      ],
+      "aliases": [
+        "design trends",
+        "modern design",
+        "ui trends",
+        "visual trends",
+        "design patterns"
+      ],
+      "anchors": {
+        "layout": "#layout-patterns",
+        "effects": "#visual-effects",
+        "typography": "#typography-techniques",
+        "animation": "#animation-patterns",
+        "dark-mode": "#dark-mode-patterns-dark-first"
+      },
+      "digest": "Curated catalog of modern design techniques (2025-2026). Agents consult during UI/UX phase Step 1.3 before choosing aesthetic direction. Covers: Bento Grid, Glassmorphism, Aurora Gradients, Variable Fonts, Scroll-driven Animations, Dark-first design, domain-specific patterns.",
+      "stacks": [
+        "*"
+      ]
+    },
     {
       "id": "frontend-nextjs-app-router",
       "name": "app router",

package/framework/standards/frontend/design-system/aesthetic-direction.md

@@ -43,13 +43,13 @@ na seção `## Aesthetic Direction` usando o template no final deste standard.
 
 ### Font Pairs por Direção
 
-| Direction | Display | Body | Fonte |
-|-----------|---------|------|-------|
-| Minimal Refined | Cormorant Garamond | DM Sans | Google Fonts |
-| Editorial | Playfair Display | Source Sans 3 | Google Fonts |
-| Soft Professional | Nunito | Inter | Google Fonts |
-| Industrial | JetBrains Mono | IBM Plex Sans | Google Fonts |
-| Modern Luxury | Bodoni Moda | Sora | Google Fonts |
+| Direction | Display | Body | Variable Alternative |
+|-----------|---------|------|---------------------|
+| Minimal Refined | Cormorant Garamond | DM Sans | Cormorant Variable + DM Sans Variable |
+| Editorial | Playfair Display | Source Sans 3 | Playfair Display Variable + Source Sans 3 Variable |
+| Soft Professional | Nunito | Inter | Nunito Variable + Inter Variable |
+| Industrial | JetBrains Mono | IBM Plex Sans | JetBrains Mono Variable + IBM Plex Sans Variable |
+| Modern Luxury | Bodoni Moda | Sora | Bodoni Moda Variable + Sora Variable |
 
 ### Anti-padrões
 
@@ -192,6 +192,59 @@ Técnicas por direção para criar profundidade e caráter:
 
 ---
 
+## Modern Techniques by Direction
+
+Cross-reference with `design-trends.md` catalog. For each aesthetic direction, these are the most effective modern techniques:
+
+| Direction | Layout | Effects | Animation | Typography |
+|-----------|--------|---------|-----------|------------|
+| **Minimal Refined** | Asymmetric split, generous whitespace | Noise texture, subtle colored shadows | Entry stagger (slow), hover lift | Variable fonts (weight transitions on hover) |
+| **Editorial** | Asymmetric layouts, overlapping layers | Dramatic type shadows, kinetic backgrounds | Scroll-driven reveals, word-by-word entry | Kinetic typography, fluid clamp() sizing |
+| **Soft Professional** | Container query cards, balanced grid | Glassmorphism cards, aurora gradient backgrounds | Spring animations, gentle micro-interactions | Rounded sans variable, generous line-height |
+| **Industrial** | Dense bento grid, hard grid lines | Minimal — border-only cards, no shadows | No animation or minimal loading states | Monospace variable, condensed headings |
+| **Modern Luxury** | Overlapping layers, asymmetric hero | Gradient mesh backgrounds, perspective cards, colored shadows + lift | Parallax + hover lift, shine effect, gold/copper accents | Display italic variable, premium tracking |
+
+### Technique Pairing Rules
+
+1. **Max 3 visual effects per project** — more creates visual noise
+2. **Aurora gradients + glassmorphism** = strong pairing (both use translucency)
+3. **Noise texture + glassmorphism** = conflicting (noise reduces glass clarity)
+4. **Bento grid + container queries** = ideal pairing (responsive cells)
+5. **Scroll-driven + spring physics** = pair for dynamic feel, avoid for Industrial
+
+---
+
+## Domain Adaptation
+
+Adaptar a direção estética ao domínio do projeto. A direção define o *feel*, o domínio define os *patterns*.
+
+### SaaS Dashboard
+- **Preferred directions:** Industrial, Minimal Refined
+- **Key patterns:** Dense bento grid KPIs, skeleton loaders para data fetch, sidebar glassmorphism
+- **Avoid:** Aurora gradients (distrai de dados), kinetic typography (conflita com data density)
+
+### E-commerce / Product
+- **Preferred directions:** Modern Luxury, Soft Professional
+- **Key patterns:** Product card hover lift, CTA colored shadows, image-first asymmetric layouts
+- **Avoid:** Industrial (cold for buying), monospace fonts (breaks trust)
+
+### Landing / Marketing
+- **Preferred directions:** Editorial, Modern Luxury
+- **Key patterns:** Hero aurora gradient, scroll-driven narrative, fluid typography, overlapping layers
+- **Avoid:** Dense layouts (landing needs breathing room), Industrial (too technical)
+
+### Internal Tool / Admin
+- **Preferred directions:** Industrial, Minimal Refined
+- **Key patterns:** Compact forms, dense data tables, status chips, monospace data
+- **Avoid:** Aurora gradients, parallax, any non-functional animation
+
+### Social / Community
+- **Preferred directions:** Soft Professional, Editorial
+- **Key patterns:** Card feed layout, notification badges, avatar systems, drawer navigation
+- **Avoid:** Modern Luxury (too formal), Industrial (too cold)
+
+---
+
 ## Template de Documentação
 
 Usar no `ui-design-system.md` de cada feature (seção `## Aesthetic Direction`):