first commit

sn-infographic/references/analysis-framework.md

@@ -0,0 +1,220 @@
+# Infographic Content Analysis Framework
+
+Deep analysis framework applying instructional design principles to infographic creation.
+
+## Purpose
+
+Before creating an infographic, thoroughly analyze the source material to:
+
+- Understand the content at a deep level
+- Identify clear learning objectives for the viewer
+- Structure information for maximum clarity and retention
+- Match content to optimal layout×style combinations
+- Preserve all source data verbatim
+
+## Instructional Design Mindset
+
+Approach content analysis as a **world-class instructional designer**:
+
+| Principle | Application |
+|-----------|-------------|
+| **Deep Understanding** | Read the entire document before analyzing any part |
+| **Learner-Centered** | Focus on what the viewer needs to understand |
+| **Visual Storytelling** | Use visuals to communicate, not just decorate |
+| **Cognitive Load** | Simplify complex ideas without losing accuracy |
+| **Data Integrity** | Never alter, summarize, or paraphrase source facts |
+
+## Analysis Dimensions
+
+### 1. Content Type Classification
+
+| Type | Characteristics | Best Layout | Best Style |
+|------|-----------------|-------------|------------|
+| **Timeline/History** | Sequential events, dates, progression | linear-progression | aged-academia, craft-handmade |
+| **Process/Tutorial** | Step-by-step instructions, how-to | linear-progression, winding-roadmap | ikea-manual, technical-schematic |
+| **Comparison** | A vs B, pros/cons, before-after | binary-comparison, comparison-matrix | corporate-memphis, swiss-style |
+| **Hierarchy** | Levels, priorities, pyramids | hierarchical-layers, tree-branching | corporate-memphis, technical-schematic |
+| **Relationships** | Connections, overlaps, influences | venn-diagram, hub-spoke | corporate-memphis, data-visualization |
+| **Data/Metrics** | Statistics, KPIs, measurements | dashboard, periodic-table | data-visualization, technical-schematic |
+| **Cycle/Loop** | Recurring processes, feedback loops | circular-flow, s-curve | technical-schematic, corporate-memphis |
+| **System/Structure** | Components, architecture, anatomy | structural-breakdown, isometric-tech-stack | technical-schematic, ikea-manual |
+| **Journey/Narrative** | Stories, user flows, milestones | winding-roadmap, story-mountain | storybook-watercolor, comic-strip |
+| **Overview/Summary** | Multiple topics, feature highlights | bento-grid, periodic-table | chalkboard, corporate-memphis |
+| **Problem/Solution** | Root cause, fix, before-after resolution | bridge, iceberg | corporate-memphis, swiss-style |
+| **Categories/Collection** | Grouped items, taxonomy, catalog entries | periodic-table, tile-layout | corporate-memphis, flat-design |
+| **Spatial/Geographic** | Maps, regions, location-based data | isometric-map, isometric-tech-stack | technical-schematic, data-visualization |
+| **Cross-functional/Workflow** | Multi-team processes, handoffs, lanes | swimlane, linear-progression | corporate-memphis, technical-schematic |
+| **Feature List/Catalog** | Product features, spec sheets, repeated units | modular-repetition, bento-grid | tech-brand, material-design |
+| **Single Concept Spotlight** | One idea, deep dive, hero message | single-focal-point, big-typography | minimalism, luxury-minimal |
+| **Dialogue/Q&A** | FAQ, interview, conversation format | speech-bubbles, character-guide | paper-collage, cartoon-flat |
+| **Discovery/Exploration** | Hidden layers, reveal, non-linear browsing | hidden-details, nonlinear-path | impressionism, pen-sketch |
+| **Network/Multi-center** | Distributed nodes, peer relationships | multi-focal, hub-spoke | data-visualization, technical-schematic |
+| **Report/Long-form** | Structured document, sections, executive summary | chapter-layout, f-pattern | swiss-style, corporate-memphis |
+| **Marketing/CTA** | Persuasion, call-to-action, brand message | z-pattern, tile-layout | tech-brand, corporate-memphis |
+
+### 2. Learning Objective Identification
+
+Every infographic should have 1-3 clear learning objectives.
+
+**Good Learning Objectives**:
+
+- Specific and measurable
+- Focus on what the viewer will understand, not just see
+- Written from the viewer's perspective
+
+**Format**: "After viewing this infographic, the viewer will understand..."
+
+| Content Aspect | Objective Type |
+|----------------|----------------|
+| Core concept | "...what [topic] is and why it matters" |
+| Process | "...how to [accomplish something]" |
+| Comparison | "...the key differences between [A] and [B]" |
+| Relationships | "...how [elements] connect to each other" |
+| Data | "...the significance of [key statistics]" |
+
+### 3. Audience Analysis
+
+| Factor | Questions | Impact |
+|--------|-----------|--------|
+| **Knowledge Level** | What do they already know? | Determines complexity depth |
+| **Context** | Why are they viewing this? | Determines emphasis points |
+| **Expectations** | What do they hope to learn? | Determines success criteria |
+| **Visual Preferences** | Professional, playful, technical? | Influences style choice |
+
+### 4. Complexity Assessment
+
+| Level | Indicators | Layout Recommendation |
+|-------|------------|----------------------|
+| **Simple** (3-5 points) | Few main concepts, clear relationships | sparse layouts, single focus |
+| **Moderate** (6-8 points) | Multiple concepts, some relationships | balanced layouts, clear sections |
+| **Complex** (9+ points) | Many concepts, intricate relationships | dense layouts, multiple sections |
+
+### 5. Visual Opportunity Mapping
+
+Identify what can be shown rather than told:
+
+| Content Element | Visual Treatment |
+|-----------------|------------------|
+| Numbers/Statistics | Large, highlighted numerals |
+| Comparisons | Side-by-side, split screen |
+| Processes | Arrows, numbered steps, flow |
+| Hierarchies | Pyramids, layers, size differences |
+| Relationships | Lines, connections, overlapping shapes |
+| Categories | Color coding, grouping, sections |
+| Timelines | Horizontal/vertical progression |
+| Quotes | Callout boxes, quotation marks |
+
+### 6. Data Verbatim Extraction
+
+**Critical**: All factual information must be preserved exactly as written in the source.
+
+| Data Type | Handling Rule |
+|-----------|---------------|
+| **Statistics** | Copy exactly: "73%" not "about 70%" |
+| **Quotes** | Copy word-for-word with attribution |
+| **Names** | Preserve exact spelling |
+| **Dates** | Keep original format |
+| **Technical Terms** | Do not simplify or substitute |
+| **Lists** | Preserve order and wording |
+
+**Never**:
+
+- Round numbers
+- Paraphrase quotes
+- Substitute simpler words
+- Add implied information
+- Remove context that affects meaning
+
+## Output Format
+
+Analysis results (`analysis.json`) must be in the following format:
+
+```json
+{
+  "title": "[Main topic title]",
+  "topic": "[educational/technical/business/creative/etc.]",
+  "data_type": "[timeline/hierarchy/comparison/process/etc.]",
+  "complexity": "[simple/moderate/complex]",
+  "point_count": "[number of main points]",
+  "source_language": "[detected language]",
+  "user_language": "[user's language]",
+  "main_topic": "[1-2 sentence summary of what this content is about]",
+  "learning_objectives": [
+    "[Primary objective]",
+    "[Secondary objective]",
+    "[Tertiary objective if applicable]"
+  ],
+  "target_audience": {
+    "knowledge_level": "[Beginner/Intermediate/Expert]",
+    "context": "[Why they're viewing this]",
+    "expectations": "[What they hope to learn]"
+  },
+  "content_type_analysis": {
+    "data_structure": "[How information relates to itself]",
+    "key_relationships": "[What connects to what]",
+    "visual_opportunities": "[What can be shown rather than told]"
+  },
+  "key_data_points_verbatim": [
+    "[Exact data point 1]",
+    "[Exact data point 2]",
+    "[Exact quote with attribution]"
+  ],
+  "layout_style_signals": [
+    {
+      "signal": "content_type",
+      "input": "[type]",
+      "suggests": "[layout]"
+    },
+    {
+      "signal": "tone",
+      "input": "[tone]",
+      "suggests": "[style]"
+    },
+    {
+      "signal": "audience",
+      "input": "[audience]",
+      "suggests": "[style]"
+    },
+    {
+      "signal": "complexity",
+      "input": "[level]",
+      "suggests": "[layout density]"
+    }
+  ],
+  "design_instructions": "[Any style, color, layout, or visual preferences extracted from user's steering prompt]",
+  "recommended_combinations": [
+    {
+      "layout": "[Layout]",
+      "style": "[Style]",
+      "recommended": true,
+      "rationale": "[Brief rationale]"
+    },
+    {
+      "layout": "[Layout]",
+      "style": "[Style]",
+      "recommended": false,
+      "rationale": "[Brief rationale]"
+    },
+    {
+      "layout": "[Layout]",
+      "style": "[Style]",
+      "recommended": false,
+      "rationale": "[Brief rationale]"
+    }
+  ]
+}
+```
+
+## Analysis Checklist
+
+Before proceeding to structured content generation:
+
+- [ ] Have I read the entire source document?
+- [ ] Can I summarize the main topic in 1-2 sentences?
+- [ ] Have I identified 1-3 clear learning objectives?
+- [ ] Do I understand the target audience?
+- [ ] Have I classified the content type correctly?
+- [ ] Have I extracted all data points verbatim?
+- [ ] Have I identified visual opportunities?
+- [ ] Have I extracted design instructions from user input?
+- [ ] Have I recommended 3 layout×style combinations?

sn-infographic/references/base-prompt.md

@@ -0,0 +1,60 @@
+Create a professional infographic following these specifications:
+
+## Image Specifications
+
+- **Type**: Infographic
+- **Layout**: {{LAYOUT}}
+- **Style**: {{STYLE}}
+- **Aspect Ratio**: {{ASPECT_RATIO}}
+- **Language**: {{LANGUAGE}}
+
+## Core Principles
+
+- Follow the layout structure precisely for information architecture
+- Apply style aesthetics consistently throughout
+- If content involves sensitive or copyrighted figures, create stylistically similar alternatives
+- Keep information concise, highlight keywords and core concepts
+- Use ample whitespace for visual clarity
+- Maintain clear visual hierarchy with distinct priority levels (primary, secondary, supporting)
+
+## Visual Elements
+
+The infographic must include concrete, semantically relevant visual elements:
+
+- At least one primary illustration or icon set that corresponds to the topic
+- Distinct visual markers for each section or module (shapes, borders, color blocks, or badges)
+- Background texture: {{BACKGROUND_TEXTURE}}
+- Font style: {{FONT_STYLE}}
+
+## Text Requirements
+
+- Main titles should be prominent and readable
+- Key concepts should be visually emphasized (bold, larger size, or color contrast)
+- Labels should be clear and appropriately sized
+- Use the specified language for all text content
+- Hard data (numbers, dates, proper nouns) must be presented in visually distinct formats: bold, callout boxes, or data badges
+
+## Layout Guidelines
+
+{{LAYOUT_GUIDELINES}}
+
+## Style Guidelines
+
+{{STYLE_GUIDELINES}}
+
+## Color Palette
+
+Use descriptive color names only (e.g., coral red, sage green, deep navy blue, warm yellow). Never use hex codes.
+
+{{COLOR_PALETTE}}
+
+---
+
+Generate the infographic based on the content below:
+
+```markdown
+{{CONTENT}}
+
+Text labels (in {{LANGUAGE}}):
+{{TEXT_LABELS}}
+```

sn-infographic/references/evaluation-standard.md

@@ -0,0 +1,41 @@
+You are an expert in prompt quality evaluation. Carefully read the image-generation prompt below and judge whether each statement is true.
+
+Required questions (answer each with "yes" or "no"):
+  [R01] Is the prompt non-empty and does it contain actionable image description information (rather than only a title or short phrase)?
+  [R02] Does the prompt clearly specify a "subject object" or "main visual subject" (such as an infographic, chart, illustration, poster, etc.)?
+  [R03] Does the prompt include at least one type of "structured information" (for example: sections/regions/modules/steps/order/comparison/list, in any form)?
+  [R04] Does the prompt include at least one type of visual description (such as style, color scheme, background, composition, visual mood, etc.)?
+  [R05] Does the prompt include at least one concrete visual element (such as icons, people, shapes, arrows, borders, etc.)?
+  [R06] Does the prompt include content details that can be directly drawn or typeset (such as text labels, explanatory text, module content, etc.)?
+  [R07] Does the prompt reflect organizational relationships among elements (such as positional, sequential, connection, or hierarchical relationships)?
+  [R08] Does the prompt provide sufficient length and detail density to support stable full-scene generation by the LLM?
+
+Optional questions (answer each with yes or no):
+  [O01] Does the prompt include descriptions of causal relationships or logical reasoning?
+  [O02] Does the prompt mention data encoding or visualization methods?
+  [O03] Does the prompt distinguish information with different importance or priorities?
+  [O04] Does the prompt describe background context or scene settings?
+  [O05] Does the prompt mention dynamic effects or interactive elements (such as arrows and connector lines)?
+  [O06] Does the prompt provide specific material/texture descriptions (metal/wood/transparent, etc.)?
+  [O07] Does the prompt incorporate cultural meaning or symbolic significance?
+  [O08] Does the prompt evoke an emotional atmosphere (solemn/lively/mysterious, etc.)?
+  [O09] Does the prompt appropriately use domain-relevant English terminology?
+  [O10] Does the prompt distinguish how Chinese and English text labels are used?
+  [O11] Does the prompt include summary or conclusion-oriented content descriptions?
+  [O12] Does the prompt specify the target audience or application scenario?
+
+Output format (strict JSON, no additional content):
+{
+  "required_results": [
+    {"id": "R01", "answer": "yes"},
+    {"id": "R02", "answer": "no"},
+    ...
+  ],
+  "optional_results": [
+    {"id": "O01", "answer": "yes"},
+    {"id": "O02", "answer": "no"},
+    ...
+  ]
+}
+
+Prompt content below:

sn-infographic/references/layout-style-selection.md

@@ -0,0 +1,79 @@
+# Layout & Style Selection Rules
+
+Resolved by the Worker Agent's own reasoning — no additional LLM call required.
+
+## Step 1 — Layout Candidates (by data_type)
+
+Analyze the information structure of `user_prompt`, determine the `data_type`, and map to layout candidates.
+Each data_type has a primary (match_score=1.0) and alternatives (match_score=0.7).
+
+| data_type | Primary Layout | Alternative Layouts |
+|-----------|----------------|---------------------|
+| timeline / history | `linear-progression` | `winding-roadmap`, `step-staircase`, `one-way-flow`, `flashback` |
+| process / tutorial | `linear-progression` | `winding-roadmap`, `step-staircase`, `swimlane`, `modular-repetition`, `funnel`, `one-way-flow` |
+| comparison | `binary-comparison` | `four-quadrant-grid`, `conflict-contrast` |
+| hierarchy | `hierarchical-layers` | `axial-expansion`, `deconstruction` |
+| relationships | `hub-spoke` | `jigsaw`, `multi-focal`, `venn-diagram` |
+| data / metrics | `dashboard` | `periodic-table`, `data-landscape`, `hard-alignment`, `swiss-grid` |
+| cycle / loop | `circular-flow` | `s-curve`, `wave-path`, `spiral-vortex` |
+| system / structure | `structural-breakdown` | `multi-scale`, `containerization`, `deconstruction` |
+| journey / narrative | `winding-roadmap` | `story-mountain`, `comic-strip`, `emotional-gradient`, `storyboard`, `flashback`, `full-illustration`, `one-way-flow`, `left-image-right-text`, `diagonal-composition`, `overlapping` |
+| overview / summary | `bento-grid` | `periodic-table`, `containerization`, `top-image-bottom-text`, `panorama`, `golden-ratio-split` |
+| problem / solution | `iceberg` | `conflict-contrast`, `visual-tension`, `funnel`, `bridge` |
+| categories / collection | `periodic-table` | `bento-grid`, `tile-layout`, `gallery-style`, `skewed-grid` |
+| spatial / geographic | `multi-scale` | `strong-perspective`, `panorama`, `isometric-map` |
+| cross-functional / workflow | `swimlane` | `linear-progression`, `modular-repetition` |
+| feature list / catalog | `modular-repetition` | `bento-grid`, `containerization`, `left-text-right-image` |
+| single concept spotlight | `single-focal-point` | `big-typography`, `ultra-minimalist`, `header-body`, `center-focus`, `frame-composition`, `full-bleed-image`, `visual-first`, `single-object-art`, `macro-closeup`, `golden-ratio-split`, `deconstruction`, `heading-subheading`, `top-image-bottom-text`, `generous-margins`, `asymmetry`, `edge-tension`, `breaking-the-grid`, `strong-perspective` |
+| dialogue / Q&A | `speech-bubbles` | `character-guide`, `comic-strip` |
+| discovery / exploration | `nonlinear-path` | `scene-unfolding`, `random-scatter`, `disrupted-flow`, `collage-glitch`, `hidden-details` |
+| network / multi-center | `multi-focal` | `hub-spoke`, `multi-directional` |
+| report / long-form | `header-body` | `swiss-grid`, `hard-alignment`, `heading-subheading`, `editorial-vogue`, `chapter-layout` |
+| marketing / CTA | `z-pattern` | `tile-layout`, `luxury-layout`, `editorial-vogue`, `generous-margins`, `full-bleed-image`, `visual-first`, `center-focus`, `frame-composition`, `overlapping`, `asymmetry`, `edge-tension`, `breaking-the-grid`, `skewed-grid`, `diagonal-composition`, `visual-tension`, `collage-glitch` |
+
+## Step 2 — Style Candidates (by tone / domain, independent of layout)
+
+Analyze the tone and domain of `user_prompt`, and map to style candidates.
+Each context has a primary (match_score=1.0) and alternatives (match_score=0.7).
+
+| Context | Primary Style | Alternative Styles |
+|---------|---------------|-------------------|
+| Technical / Engineering | `technical-schematic` | `ikea-manual`, `ui-wireframe`, `technical-diagram`, `parametric-design`, `subway-map` |
+| Software / Product / Tech brand | `tech-brand` | `material-design`, `corporate-memphis`, `ui-wireframe`, `parametric-design` |
+| Sci-fi / Futuristic | `neon-futurism` | `cyberpunk`, `sci-fi-ui`, `synthwave`, `holographic`, `liquid-metal`, `vaporwave` |
+| Professional / Business | `corporate-memphis` | `swiss-style`, `minimalism`, `flat-design`, `bauhaus`, `high-contrast-ad` |
+| Data / Analytics | `data-visualization` | `technical-diagram`, `swiss-style`, `minimalism`, `subway-map`, `parametric-design` |
+| Educational / Instructional | `chalkboard` | `instructional-visual`, `ikea-manual`, `paper-collage`, `bauhaus` |
+| Playful / Casual / Kids | `paper-collage` | `crayon-hand-drawn`, `cartoon-flat`, `kawaii`, `lego-brick`, `screen-print` |
+| Luxury / Premium / Fashion | `luxury-minimal` | `art-deco`, `fashion-editorial`, `art-nouveau`, `liquid-metal` |
+| Chinese domain | `chinese-guochao` | `modern-ink-wash` |
+| Japanese domain | `ukiyo-e` | `kawaii` |
+| Vintage / Retro | `aged-academia` | `vintage-poster`, `newspaper-collage`, `woodcut`, `art-nouveau`, `screen-print`, `vaporwave` |
+| Artistic / Fine art | `impressionism` | `expressionism`, `cubism`, `baroque`, `surrealism`, `art-nouveau` |
+| Handmade / Craft | `paper-collage` | `crayon-hand-drawn`, `storybook-watercolor`, `claymation`, `origami`, `screen-print` |
+| Illustration / Drawing | `pen-sketch` | `line-drawing`, `marker-style`, `thick-paint`, `monochrome-illustration` |
+| Experimental / Avant-garde | `deconstructivism` | `glitch-art`, `op-art`, `geometric-burst`, `fractal-art`, `surreal-collage`, `parametric-design`, `vaporwave` |
+| Scandinavian / Minimal | `scandinavian` | `minimalism`, `swiss-style`, `luxury-minimal`, `bauhaus` |
+| Playful / Geometric | `origami` | `pixel-art`, `knolling`, `lego-brick`, `bauhaus` |
+| Photography / Mixed | `mixed-media` | `film-photography`, `double-exposure`, `newspaper-collage` |
+| Marketing / Advertising | `high-contrast-ad` | `screen-print`, `flat-design`, `corporate-memphis` |
+| Futuristic / Luxury Tech | `liquid-metal` | `neon-futurism`, `holographic`, `parametric-design` |
+| Internet / Youth Culture | `vaporwave` | `glitch-art`, `cyberpunk`, `pixel-art` |
+
+## Step 3 — Random Sampling
+
+Layout and style are sampled independently using the same process:
+
+1. Build a weighted candidate pool: repeat the primary item **10 times**, each alternative item **9 times**, then randomly pick **3 items** from all available options outside the current data_type / context and repeat each **1 time**, then merge into the candidate pool
+2. Shuffle the pool with bash `shuf` and take the first item as the result:
+
+```bash
+LAYOUT=$(printf '%s\n' "${LAYOUT_POOL[@]}" | shuf | head -1)
+STYLE=$(printf '%s\n' "${STYLE_POOL[@]}" | shuf | head -1)
+```
+
+The weighting gives primary and alternatives roughly equal win probability (~10:9), with non-matching items having a combined win probability of ~10%.
+
+## Fallback
+
+If `data_type` or `context` cannot be determined, use `hub-spoke` + `corporate-memphis`.

sn-infographic/references/layouts/asymmetry.md

@@ -0,0 +1,36 @@
+# asymmetry
+
+Extreme left/right imbalance balanced by visual weight.
+
+## Structure
+
+- Deliberately unequal distribution of elements
+- One side heavy (large image, dense content), other side light (text, space)
+- Visual balance achieved through weight, not symmetry
+- Creates dynamic tension and visual interest
+
+## Best For
+
+- Editorial and magazine-style layouts
+- Content where one element dominates
+- Designs that need visual energy
+- Modern, sophisticated compositions
+
+## Visual Elements
+
+- Large dominant element on one side
+- Generous negative space on the other
+- Visual weight balanced through size, color, or density
+- Optional diagonal or curved element bridging the imbalance
+
+## Text Placement
+
+- Text in the lighter, more open zone
+- Dominant element on the heavier side
+- Title in the most visually stable position
+
+## Recommended Pairings
+
+- `cartoon-flat`: Dynamic asymmetric compositions
+- `aged-academia`: Editorial asymmetric layouts
+- `corporate-memphis`: Modern asymmetric designs

sn-infographic/references/layouts/axial-expansion.md

@@ -0,0 +1,36 @@
+# axial-expansion
+
+Content expands from a central axis to both sides.
+
+## Structure
+
+- Central vertical or horizontal axis as the spine
+- Content branches symmetrically or asymmetrically to both sides
+- Axis may be a timeline, process line, or dividing element
+- Creates a balanced, mirrored or complementary layout
+
+## Best For
+
+- Comparison with a shared baseline
+- Timeline with events on both sides
+- Cause-and-effect diagrams
+- Pros/cons with a central divider
+
+## Visual Elements
+
+- Prominent central axis line
+- Content blocks extending to both sides
+- Arrows or connectors from axis to content
+- Optional color coding for each side
+
+## Text Placement
+
+- Axis labels along the center line
+- Content labels beside each branch
+- Title at the top of the axis
+
+## Recommended Pairings
+
+- `corporate-memphis`: Balanced business diagrams
+- `technical-schematic`: Engineering axis diagrams
+- `paper-collage`: Organic branching layouts

sn-infographic/references/layouts/bento-grid.md

@@ -0,0 +1,41 @@
+# bento-grid
+
+Modular grid layout with varied cell sizes, like a bento box.
+
+## Structure
+
+- Grid of rectangular cells
+- Mixed cell sizes (1x1, 2x1, 1x2, 2x2)
+- No strict symmetry required
+- Hero cell for main point
+- Supporting cells around it
+
+## Best For
+
+- Multiple topic overview
+- Feature highlights
+- Dashboard summaries
+- Portfolio displays
+- Mixed content types
+
+## Visual Elements
+
+- Clear cell boundaries
+- Varied cell backgrounds
+- Icons or illustrations per cell
+- Consistent padding/margins
+- Visual hierarchy through size
+
+## Text Placement
+
+- Main title at top
+- Cell titles within each cell
+- Brief content per cell
+- Minimal text, maximum visual
+- CTA or summary in prominent cell
+
+## Recommended Pairings
+
+- `paper-collage`: Friendly overviews (default)
+- `corporate-memphis`: Business summaries
+- `pixel-art`: Retro feature grids

sn-infographic/references/layouts/big-typography.md

@@ -0,0 +1,36 @@
+# big-typography
+
+Typography enlarged to the extreme, overlapping part of the main image.
+
+## Structure
+
+- Oversized headline dominates the composition
+- Text may extend beyond its container or overlap imagery
+- Image or illustration partially visible behind or around the text
+- Dramatic scale contrast between headline and supporting text
+
+## Best For
+
+- Bold editorial statements
+- Campaign posters and announcements
+- Quote-driven infographics
+- Brand-forward content
+
+## Visual Elements
+
+- Massive headline (often 30-50% of canvas height)
+- Image peeking through or behind letterforms
+- Minimal supporting elements to avoid competition
+- Strong color contrast
+
+## Text Placement
+
+- Headline as the primary visual element
+- Supporting text small and subordinate
+- Attribution or caption at bottom
+
+## Recommended Pairings
+
+- `high-contrast-ad`: Comic-style typographic impact
+- `neon-futurism`: Neon oversized type
+- `aged-academia`: Vintage editorial typography

sn-infographic/references/layouts/binary-comparison.md

@@ -0,0 +1,48 @@
+# binary-comparison
+
+Side-by-side comparison of two items, states, or concepts.
+
+## Structure
+
+- Vertical divider splitting image in half
+- Left side: Item A / Before / Pro
+- Right side: Item B / After / Con
+- Mirrored layout for easy comparison
+- Clear visual distinction between sides
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Before-After** | Transformation over time | Temporal change, improvement |
+| **A vs B** | Feature comparison | Direct contrast, differences |
+| **Pro-Con** | Advantages/disadvantages | Balanced evaluation |
+
+## Best For
+
+- Before/after transformations
+- Product or option comparisons
+- Pros and cons analysis
+- Old vs new comparisons
+- Two perspectives on a topic
+
+## Visual Elements
+
+- Strong vertical dividing line or gradient
+- Contrasting colors per side
+- Matching element positions for comparison
+- VS symbol or divider decoration
+- Transformation arrow for before-after
+
+## Text Placement
+
+- Main title centered at top
+- Side labels (A/B, Before/After)
+- Corresponding points aligned horizontally
+- Summary at bottom if needed
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business comparisons
+- `high-contrast-ad`: High-contrast dramatic comparisons
+- `paper-collage`: Friendly explainers

sn-infographic/references/layouts/breaking-the-grid.md

@@ -0,0 +1,36 @@
+# breaking-the-grid
+
+Main elements extend beyond the frame or background area.
+
+## Structure
+
+- Primary subject or element bleeds past its container boundary
+- Creates a sense of depth and dynamism
+- Background or card boundary is visible but violated
+- Other elements remain within bounds for contrast
+
+## Best For
+
+- Dynamic product showcases
+- Character or mascot introductions
+- Energetic or action-oriented content
+- Layouts that need visual excitement
+
+## Visual Elements
+
+- Subject element extending beyond its card or frame
+- Drop shadow or layering to reinforce depth
+- Contained background elements for contrast
+- Optional motion lines or energy effects
+
+## Text Placement
+
+- Title within the contained area
+- Subject label near the breaking element
+- Supporting text inside the frame
+
+## Recommended Pairings
+
+- `high-contrast-ad`: Comic-style breakout characters
+- `claymation`: 3D clay figures popping out
+- `kawaii`: Cute characters breaking frames

sn-infographic/references/layouts/bridge.md

@@ -0,0 +1,41 @@
+# bridge
+
+Gap-crossing structure connecting problem to solution or current to future state.
+
+## Structure
+
+- Left side: current state/problem
+- Right side: desired state/solution
+- Bridge element spanning the gap
+- Gap representing challenge/obstacle
+- Bridge elements as steps/methods
+
+## Best For
+
+- Problem to solution journeys
+- Current vs future state
+- Gap analysis
+- Transformation bridges
+- Strategic initiatives
+
+## Visual Elements
+
+- Two distinct platforms/sides
+- Visible gap or chasm
+- Bridge structure with supports
+- Icons representing each side
+- Stepping stones or bridge planks
+
+## Text Placement
+
+- Title at top
+- Left label (From/Problem/Current)
+- Right label (To/Solution/Future)
+- Bridge elements labeled
+- Gap description below
+
+## Recommended Pairings
+
+- `crayon-hand-drawn`: Friendly journeys
+- `corporate-memphis`: Business transformations
+- `origami`: Technical transitions

sn-infographic/references/layouts/center-focus.md

@@ -0,0 +1,36 @@
+# center-focus
+
+All visual guide lines point to the central subject.
+
+## Structure
+
+- Central subject at the geometric or visual center
+- Surrounding elements arranged to direct attention inward
+- Radial or converging lines, shapes, or gradients
+- Strong contrast between center and periphery
+
+## Best For
+
+- Single concept spotlights
+- Product reveals
+- Key statistic callouts
+- Mandala-style diagrams
+
+## Visual Elements
+
+- High-contrast central element
+- Converging lines, arrows, or shapes pointing inward
+- Radial gradient or vignette reinforcing center
+- Peripheral elements smaller and lower contrast
+
+## Text Placement
+
+- Primary label at or near the center
+- Supporting text radiating outward
+- Title at top outside the focal zone
+
+## Recommended Pairings
+
+- `knolling`: Centered product flat-lay
+- `technical-schematic`: Engineering focal diagrams
+- `origami`: Geometric radial patterns

sn-infographic/references/layouts/chapter-layout.md

@@ -0,0 +1,36 @@
+# chapter-layout
+
+Book-like chapters with clear visual separations between sections.
+
+## Structure
+
+- Content divided into distinct chapters or sections
+- Each chapter has a clear header and visual separator
+- Consistent chapter structure throughout
+- Reading flows top-to-bottom through chapters
+
+## Best For
+
+- Long-form educational infographics
+- Multi-topic reports or guides
+- Structured reference materials
+- "Complete guide" style content
+
+## Visual Elements
+
+- Chapter header bars with number and title
+- Visual dividers between chapters (rules, color bands)
+- Consistent layout within each chapter
+- Optional chapter icons or thumbnails
+
+## Text Placement
+
+- Chapter number and title in header
+- Content within each chapter body
+- Overall title at the very top
+
+## Recommended Pairings
+
+- `aged-academia`: Academic textbook chapters
+- `corporate-memphis`: Business guide sections
+- `chalkboard`: Educational lesson chapters

sn-infographic/references/layouts/character-guide.md

@@ -0,0 +1,36 @@
+# character-guide
+
+A small recurring character appears in corners or margins to guide attention.
+
+## Structure
+
+- Main content occupies the primary canvas area
+- A small character (mascot, guide, or avatar) appears at key points
+- Character uses gestures, speech bubbles, or arrows to direct attention
+- Consistent character placement creates a guided reading experience
+
+## Best For
+
+- Educational or tutorial infographics
+- Onboarding guides
+- Content for younger or general audiences
+- Brand mascot-driven communications
+
+## Visual Elements
+
+- Recurring character in a consistent style
+- Character gestures pointing to key content
+- Speech or thought bubbles from the character
+- Character positioned at margins or corners
+
+## Text Placement
+
+- Main content in the primary area
+- Character commentary in bubbles
+- Title at top independent of character
+
+## Recommended Pairings
+
+- `kawaii`: Cute mascot guides
+- `crayon-hand-drawn`: Hand-drawn character companions
+- `storybook-watercolor`: Illustrated story guides

sn-infographic/references/layouts/circular-flow.md

@@ -0,0 +1,41 @@
+# circular-flow
+
+Cyclic process showing continuous or recurring steps.
+
+## Structure
+
+- Circular arrangement
+- Steps around the circle
+- Arrows showing direction
+- No clear start/end (continuous)
+- Center can hold main concept
+
+## Best For
+
+- Recurring processes
+- Feedback loops
+- Lifecycle stages
+- Continuous improvement
+- Natural cycles
+
+## Visual Elements
+
+- Circle or ring shape
+- Directional arrows
+- Step nodes evenly spaced
+- Icons per step
+- Optional center element
+
+## Text Placement
+
+- Title at top
+- Step labels at each node
+- Brief descriptions near nodes
+- Center concept if applicable
+- Cycle name
+
+## Recommended Pairings
+
+- `crayon-hand-drawn`: Friendly cycles
+- `corporate-memphis`: Business processes
+- `subway-map`: Transit-style cycles

sn-infographic/references/layouts/collage-glitch.md

@@ -0,0 +1,36 @@
+# collage-glitch
+
+Torn fragments collaged together, sometimes with glitch or distortion effects.
+
+## Structure
+
+- Multiple image or texture fragments assembled into a composition
+- Torn, cut, or distorted edges between fragments
+- Optional digital glitch effects (color shift, pixel displacement)
+- Layered, textured, and visually complex
+
+## Best For
+
+- Creative or artistic concept presentations
+- Tech, digital, or disruption themes
+- Edgy or unconventional brand content
+- Abstract or experimental infographics
+
+## Visual Elements
+
+- Torn paper or cut-out texture edges
+- Color aberration or glitch displacement
+- Mixed media textures (paper, digital, photo)
+- Optional scan lines or noise overlay
+
+## Text Placement
+
+- Text integrated as a collage element
+- Distorted or styled text for effect
+- Key information in the most legible fragment
+
+## Recommended Pairings
+
+- `neon-futurism`: Neon glitch collage
+- `high-contrast-ad`: High-contrast torn compositions
+- `paper-collage`: Paper collage aesthetic

sn-infographic/references/layouts/comic-strip.md

@@ -0,0 +1,41 @@
+# comic-strip
+
+Sequential narrative panels telling a story or explaining a concept.
+
+## Structure
+
+- Multiple panels in sequence
+- Left-to-right, top-to-bottom reading
+- Characters or subjects in scenes
+- Speech/thought bubbles
+- Panel borders clearly defined
+
+## Best For
+
+- Storytelling explanations
+- User journey narratives
+- Scenario illustrations
+- Step sequences with context
+- Before/during/after stories
+
+## Visual Elements
+
+- Panel frames
+- Speech and thought bubbles
+- Sound effects (optional)
+- Characters with expressions
+- Scene backgrounds
+
+## Text Placement
+
+- Title at top
+- Dialogue in speech bubbles
+- Narration in caption boxes
+- Sound effects integrated
+- Panel numbers if needed
+
+## Recommended Pairings
+
+- `cartoon-flat`: Dramatic narratives
+- `kawaii`: Cute character stories
+- `crayon-hand-drawn`: Friendly explanations

sn-infographic/references/layouts/comparison-matrix.md

@@ -0,0 +1,41 @@
+# comparison-matrix
+
+Grid-based multi-factor comparison across multiple items.
+
+## Structure
+
+- Table/grid layout
+- Rows: items being compared
+- Columns: comparison criteria
+- Cells: scores, checks, or values
+- Header row and column clearly marked
+
+## Best For
+
+- Product feature comparisons
+- Tool/software evaluations
+- Multi-criteria decisions
+- Specification sheets
+- Rating comparisons
+
+## Visual Elements
+
+- Clear grid lines or cell boundaries
+- Checkmarks, X marks, or scores in cells
+- Color coding for quick scanning
+- Icons for criteria categories
+- Highlight for recommended option
+
+## Text Placement
+
+- Title at top
+- Item names in first column
+- Criteria in header row
+- Brief values in cells
+- Legend if using symbols
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business tool comparisons
+- `ui-wireframe`: Technical feature matrices
+- `technical-schematic`: Specification comparisons

sn-infographic/references/layouts/conflict-contrast.md

@@ -0,0 +1,36 @@
+# conflict-contrast
+
+Juxtaposition of two contrasting states, ideas, or forces.
+
+## Structure
+
+- Canvas divided into two zones representing opposing states
+- Strong visual contrast between the two sides (color, texture, style)
+- Tension at the boundary between the two zones
+- Unlike binary-comparison, focuses on conflict rather than neutral comparison
+
+## Best For
+
+- Problem vs. solution narratives
+- Old vs. new paradigms
+- Negative vs. positive outcomes
+- Ideological or philosophical contrasts
+
+## Visual Elements
+
+- Dramatic color contrast between zones (e.g., dark vs. light)
+- Jagged or dynamic boundary between zones
+- Opposing visual styles or textures per side
+- Optional central conflict element at the boundary
+
+## Text Placement
+
+- Labels within each zone
+- Conflict or tension label at the boundary
+- Title above the composition
+
+## Recommended Pairings
+
+- `high-contrast-ad`: High-contrast conflict compositions
+- `neon-futurism`: Neon vs. dark contrast
+- `chalkboard`: Light vs. dark educational contrasts

sn-infographic/references/layouts/containerization.md

@@ -0,0 +1,36 @@
+# containerization
+
+All content is placed inside visible borders or background blocks.
+
+## Structure
+
+- Every content group enclosed in a distinct container (card, box, or panel)
+- Containers clearly separate different topics or sections
+- Consistent container style (border, shadow, or background)
+- Containers may be nested for sub-grouping
+
+## Best For
+
+- Multi-topic infographics needing clear separation
+- Reference cards and cheat sheets
+- Structured data with distinct categories
+- Dashboard-style layouts
+
+## Visual Elements
+
+- Visible borders or background fills per container
+- Consistent padding inside containers
+- Optional header bar per container
+- Drop shadows or rounded corners for depth
+
+## Text Placement
+
+- Section title in container header
+- Content within the container body
+- Overall title above all containers
+
+## Recommended Pairings
+
+- `ui-wireframe`: Clean boxed interface layouts
+- `corporate-memphis`: Colorful card-based designs
+- `technical-schematic`: Structured system diagrams

sn-infographic/references/layouts/dashboard.md

@@ -0,0 +1,41 @@
+# dashboard
+
+Multi-metric display with charts, numbers, and KPI indicators.
+
+## Structure
+
+- Multiple data widgets
+- Charts, graphs, numbers
+- Grid or modular layout
+- Key metrics prominent
+- Status indicators
+
+## Best For
+
+- KPI summaries
+- Performance metrics
+- Analytics overviews
+- Status reports
+- Data snapshots
+
+## Visual Elements
+
+- Chart types (bar, line, pie, gauge)
+- Big numbers for KPIs
+- Trend arrows (up/down)
+- Color-coded status (green/red)
+- Clean data visualization
+
+## Text Placement
+
+- Title at top
+- Widget titles above each section
+- Metric labels and values
+- Units clearly shown
+- Time period indicated
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business dashboards
+- `ui-wireframe`: Technical dashboards
+- `neon-futurism`: Futuristic displays

sn-infographic/references/layouts/data-landscape.md

@@ -0,0 +1,37 @@
+# data-landscape
+
+High-dimensional data visualized as 3D terrain or point clouds.
+
+## Structure
+
+- Data values mapped to a 3D surface or point distribution
+- Peaks represent high values, valleys represent low values
+- Color gradient encodes additional data dimensions
+- Axes labeled with data variables
+
+## Best For
+
+- Complex multi-dimensional data visualization
+- Geographic or spatial data
+- Density or distribution analysis
+- Scientific or research data presentations
+
+## Visual Elements
+
+- 3D terrain mesh or point cloud
+- Color gradient encoding data values
+- Axis labels and scale indicators
+- Optional contour lines or grid overlay
+
+## Text Placement
+
+- Axis labels at the edges
+- Peak or notable point labels
+- Title above the visualization
+- Legend for color encoding
+
+## Recommended Pairings
+
+- `technical-schematic`: Scientific data landscapes
+- `neon-futurism`: Futuristic data terrain
+- `ui-wireframe`: Clean data visualization wireframes

sn-infographic/references/layouts/deconstruction.md

@@ -0,0 +1,36 @@
+# deconstruction
+
+Disassemble, break, and recombine elements into a fragmented composition.
+
+## Structure
+
+- Elements appear broken apart, scattered, or reassembled
+- Fragments of a whole distributed across the canvas
+- Implied reconstruction or analysis of the subject
+- Can show both the parts and the whole simultaneously
+
+## Best For
+
+- "Breaking down" complex concepts
+- Anatomy or component analysis
+- Creative or artistic concept presentations
+- Abstract or philosophical topics
+
+## Visual Elements
+
+- Fragmented or exploded elements
+- Connecting lines or arrows showing reassembly
+- Varied element orientations and positions
+- Optional ghost outline of the original whole
+
+## Text Placement
+
+- Labels on individual fragments
+- Assembly instructions or connections labeled
+- Title in a stable zone outside the fragments
+
+## Recommended Pairings
+
+- `cartoon-flat`: Graphic deconstruction art
+- `neon-futurism`: Glitch-style fragmentation
+- `origami`: Geometric unfolding deconstruction

sn-infographic/references/layouts/diagonal-composition.md

@@ -0,0 +1,36 @@
+# diagonal-composition
+
+Elements aligned along a diagonal or the whole composition is tilted.
+
+## Structure
+
+- Primary visual axis runs diagonally (typically top-left to bottom-right)
+- Elements arranged along or perpendicular to the diagonal
+- Creates movement and energy compared to horizontal/vertical layouts
+- Can be subtle (slight tilt) or dramatic (45° angle)
+
+## Best For
+
+- Dynamic or energetic content
+- Sports, tech, or action themes
+- Breaking monotony in grid-heavy designs
+- Directional flow narratives
+
+## Visual Elements
+
+- Diagonal bands or stripes as background
+- Elements rotated or aligned to the diagonal axis
+- Arrows or lines reinforcing the diagonal direction
+- Strong contrast along the diagonal
+
+## Text Placement
+
+- Title along or perpendicular to the diagonal
+- Supporting text in stable horizontal zones
+- Avoid rotating body text for readability
+
+## Recommended Pairings
+
+- `neon-futurism`: Futuristic diagonal energy
+- `high-contrast-ad`: Dynamic comic-style layouts
+- `corporate-memphis`: Modern diagonal accents

sn-infographic/references/layouts/disrupted-flow.md

@@ -0,0 +1,36 @@
+# disrupted-flow
+
+Inverted or vertical text mixes to disrupt the normal reading order.
+
+## Structure
+
+- Text and elements arranged in unexpected orientations
+- Some text rotated, inverted, or placed vertically
+- Reading order requires active engagement
+- Disruption is intentional and purposeful
+
+## Best For
+
+- Challenging conventional thinking content
+- Creative or artistic presentations
+- Content about disruption, change, or innovation
+- Experimental editorial designs
+
+## Visual Elements
+
+- Mixed text orientations (horizontal, vertical, inverted)
+- Unexpected element placements
+- Visual cues guiding the non-linear reading path
+- Strong contrast to make disruption intentional
+
+## Text Placement
+
+- Key message in the most disruptive position
+- Supporting text in varied orientations
+- Reading path indicated by numbering or color
+
+## Recommended Pairings
+
+- `high-contrast-ad`: Graphic disruption compositions
+- `neon-futurism`: Glitch-style text disruption
+- `pixel-art`: Retro disrupted pixel text

sn-infographic/references/layouts/edge-tension.md

@@ -0,0 +1,36 @@
+# edge-tension
+
+Subject is partially cropped and pressed to the edges of the canvas.
+
+## Structure
+
+- Main subject extends to or beyond one or more canvas edges
+- Cropping creates tension and implied continuation
+- Remaining canvas space used for text or supporting elements
+- Asymmetric composition with strong edge anchoring
+
+## Best For
+
+- Dynamic product or character presentations
+- Magazine-style editorial layouts
+- Content where the subject is larger than life
+- Attention-grabbing social media formats
+
+## Visual Elements
+
+- Subject cropped at canvas edge (head, limb, or object partially cut off)
+- Strong directional energy toward the cropped edge
+- Text placed in the open space opposite the subject
+- Optional color or texture fill in the open area
+
+## Text Placement
+
+- Title and body in the open space away from the subject
+- Subject label near the visible portion
+- Avoid placing text over the cropped area
+
+## Recommended Pairings
+
+- `high-contrast-ad`: Comic-style edge-cropped characters
+- `claymation`: 3D figures pressing against the frame
+- `corporate-memphis`: Modern editorial crops

sn-infographic/references/layouts/editorial-vogue.md

@@ -0,0 +1,36 @@
+# editorial-vogue
+
+Serif headlines, refined image-text overlaps, and elegant whitespace.
+
+## Structure
+
+- Large serif headline as the dominant typographic element
+- High-quality image with refined text overlay
+- Elegant whitespace balancing the composition
+- Sophisticated, fashion-magazine aesthetic
+
+## Best For
+
+- Luxury or premium brand content
+- Fashion, lifestyle, or culture topics
+- High-end editorial presentations
+- Content targeting sophisticated audiences
+
+## Visual Elements
+
+- Large serif or display typeface headline
+- High-quality photography or illustration
+- Refined text-image overlap with careful legibility
+- Elegant color palette (neutrals, black, white)
+
+## Text Placement
+
+- Headline as a primary visual element
+- Body text in a clean, readable zone
+- Captions in small, refined typography
+
+## Recommended Pairings
+
+- `aged-academia`: Vintage editorial sophistication
+- `storybook-watercolor`: Artistic editorial overlaps
+- `high-contrast-ad`: High-contrast editorial impact

sn-infographic/references/layouts/emotional-gradient.md

@@ -0,0 +1,36 @@
+# emotional-gradient
+
+Color or composition shifts show emotions or intensity from light to intense.
+
+## Structure
+
+- Content arranged along a gradient from one emotional state to another
+- Color palette transitions across the canvas (e.g., cool to warm)
+- Composition density or complexity increases with intensity
+- Clear start and end emotional states
+
+## Best For
+
+- Emotional journey narratives
+- Mood or sentiment progressions
+- Before/after emotional transformations
+- Brand tone or voice spectrums
+
+## Visual Elements
+
+- Smooth color gradient across the canvas
+- Illustrations or icons reflecting the emotional state
+- Increasing visual complexity toward the intense end
+- Optional emotion labels or icons
+
+## Text Placement
+
+- Emotion labels at key gradient points
+- Title at the neutral or start end
+- Conclusion at the intense or end state
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Soft emotional color washes
+- `crayon-hand-drawn`: Hand-drawn emotional expressions
+- `kawaii`: Cute emotion spectrum illustrations

sn-infographic/references/layouts/f-pattern.md

@@ -0,0 +1,36 @@
+# f-pattern
+
+Eye scans the top and left side, forming an F shape.
+
+## Structure
+
+- Most important content in the top horizontal band
+- Second most important in a secondary horizontal band
+- Left-aligned content for the vertical scan
+- Right side less prominent, used for supporting details
+
+## Best For
+
+- Text-heavy infographics
+- Report or article-style layouts
+- Content where hierarchy matters most
+- Designs optimized for quick scanning
+
+## Visual Elements
+
+- Strong top banner with headline and key visual
+- Left-aligned content column
+- Secondary horizontal accent below the top band
+- Right column for supplementary info
+
+## Text Placement
+
+- Primary headline in top band
+- Key points left-aligned in the vertical column
+- Supporting details in the right column
+
+## Recommended Pairings
+
+- `aged-academia`: Editorial report layouts
+- `ui-wireframe`: Content-heavy wireframes
+- `corporate-memphis`: Structured business reports

sn-infographic/references/layouts/flashback.md

@@ -0,0 +1,36 @@
+# flashback
+
+Main scene embedded with small windows showing past or future moments.
+
+## Structure
+
+- Primary scene or timeline as the main canvas
+- Small inset panels or windows showing flashback or flash-forward moments
+- Inset panels visually distinct (different border, color, or style)
+- Connecting elements (arrows, dotted lines) link main scene to insets
+
+## Best For
+
+- Historical context within a current narrative
+- "How we got here" explanations
+- Future scenario previews
+- Cause-and-effect with temporal distance
+
+## Visual Elements
+
+- Main scene occupying most of the canvas
+- Inset panels with distinct visual treatment (sepia, dashed border)
+- Connecting arrows or lines from main to inset
+- Time labels on inset panels
+
+## Text Placement
+
+- Main scene labels in the primary area
+- Inset panel titles and dates within each inset
+- Overall title at the top
+
+## Recommended Pairings
+
+- `aged-academia`: Historical flashback panels
+- `cartoon-flat`: Comic-style memory panels
+- `storybook-watercolor`: Illustrated memory windows

sn-infographic/references/layouts/four-quadrant-grid.md

@@ -0,0 +1,43 @@
+# four-quadrant-grid
+
+Canvas evenly split into four rectangular modules.
+
+## Structure
+
+- 2×2 grid dividing the canvas into four equal cells
+- Each cell is independent and self-contained
+- Central intersection point may carry a label or icon
+- Axes can be labeled (e.g., high/low, now/future)
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Matrix** | Categorization by two axes | Axis labels, quadrant titles |
+| **Equal Panels** | Four parallel topics | Consistent cell design |
+
+## Best For
+
+- 2×2 strategic matrices (e.g., Eisenhower, BCG)
+- Four-part frameworks or models
+- Comparing four options simultaneously
+- SWOT analysis
+
+## Visual Elements
+
+- Bold grid lines or color-coded quadrant backgrounds
+- Axis labels at edges
+- Icons or illustrations per quadrant
+- Central label at intersection
+
+## Text Placement
+
+- Quadrant title at top of each cell
+- Content within each cell
+- Axis labels along edges
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business strategy matrices
+- `high-contrast-ad`: High-contrast four-part models
+- `ui-wireframe`: Framework diagrams

sn-infographic/references/layouts/frame-composition.md

@@ -0,0 +1,36 @@
+# frame-composition
+
+Foreground elements, decorative borders, or negative space frame the subject.
+
+## Structure
+
+- Subject placed in the center or focal zone
+- Surrounding frame created by foreground elements, borders, or negative space
+- Frame draws attention inward to the subject
+- Frame may be natural (trees, archways) or decorative (borders, shapes)
+
+## Best For
+
+- Subject spotlights with environmental context
+- Formal or ceremonial presentations
+- Content where context frames the message
+- Portrait or profile-style infographics
+
+## Visual Elements
+
+- Framing elements surrounding the subject
+- Clear visual separation between frame and subject
+- Optional decorative border treatment
+- Subject given maximum contrast within the frame
+
+## Text Placement
+
+- Subject label within the frame
+- Context or caption in the frame area
+- Title above or outside the frame
+
+## Recommended Pairings
+
+- `aged-academia`: Classical framed compositions
+- `crayon-hand-drawn`: Hand-drawn decorative frames
+- `storybook-watercolor`: Illustrated natural frames

sn-infographic/references/layouts/full-bleed-image.md

@@ -0,0 +1,36 @@
+# full-bleed-image
+
+Image fills the entire canvas with no border, text overlays on top.
+
+## Structure
+
+- Image or illustration covers 100% of the canvas
+- No white margins or borders
+- Text overlaid directly on the image
+- Text areas use contrast treatment (dark overlay, light box, or drop shadow)
+
+## Best For
+
+- Atmospheric or emotional infographics
+- Travel, nature, or lifestyle content
+- Dramatic announcements
+- Background-driven storytelling
+
+## Visual Elements
+
+- Full-bleed photograph or illustration
+- Semi-transparent overlay for text legibility
+- Minimal text to avoid cluttering the image
+- Optional vignette at edges
+
+## Text Placement
+
+- Title centered or at top with high contrast
+- Supporting text in a legible zone
+- Avoid placing text over busy image areas
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Painterly full-bleed scenes
+- `neon-futurism`: Neon text over dark imagery
+- `high-contrast-ad`: High-contrast graphic overlays

sn-infographic/references/layouts/full-illustration.md

@@ -0,0 +1,36 @@
+# full-illustration
+
+An illustration dominates the canvas; text is integrated into the scene.
+
+## Structure
+
+- Large narrative illustration fills most of the canvas
+- Text labels, callouts, or captions embedded within the scene
+- Story told primarily through the image
+- Text serves as annotation, not the primary carrier
+
+## Best For
+
+- Storytelling infographics
+- Scene-based explanations (e.g., how a city works)
+- Ecosystem or environment diagrams
+- Narrative-driven educational content
+
+## Visual Elements
+
+- Rich, detailed illustration as the primary element
+- Callout lines or speech bubbles for labels
+- Characters or objects acting out the content
+- Minimal separate text blocks
+
+## Text Placement
+
+- Labels integrated into the illustration
+- Title at top or bottom outside the scene
+- Callout lines pointing to specific scene elements
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Painterly narrative scenes
+- `cartoon-flat`: Character-driven story illustrations
+- `crayon-hand-drawn`: Hand-drawn world illustrations

sn-infographic/references/layouts/funnel.md

@@ -0,0 +1,41 @@
+# funnel
+
+Narrowing stages showing conversion, filtering, or refinement process.
+
+## Structure
+
+- Wide top (input/start)
+- Narrow bottom (output/result)
+- Horizontal layers for stages
+- Progressive narrowing
+- 3-6 stages typically
+
+## Best For
+
+- Sales/marketing funnels
+- Conversion processes
+- Filtering/selection
+- Recruitment pipelines
+- Decision processes
+
+## Visual Elements
+
+- Funnel shape clearly defined
+- Distinct colors per stage
+- Width indicates volume/quantity
+- Stage icons or symbols
+- Numbers/percentages per stage
+
+## Text Placement
+
+- Title at top
+- Stage names inside or beside
+- Metrics/numbers per stage
+- Input label at top
+- Output label at bottom
+
+## Recommended Pairings
+
+- `corporate-memphis`: Marketing funnels
+- `origami`: Technical pipelines
+- `crayon-hand-drawn`: Educational funnels

sn-infographic/references/layouts/gallery-style.md

@@ -0,0 +1,36 @@
+# gallery-style
+
+Wide white margins like a gallery, images shown independently.
+
+## Structure
+
+- Large white or neutral margins surrounding content
+- Each element displayed with generous space, like a gallery exhibit
+- Content items treated as individual artworks
+- Clean, uncluttered presentation
+
+## Best For
+
+- Portfolio or showcase presentations
+- Art or photography collections
+- Premium product catalogs
+- Content where each item deserves individual attention
+
+## Visual Elements
+
+- Wide white margins (gallery-wall feel)
+- Each item centered in its own space
+- Minimal borders or frames
+- Optional small caption below each item
+
+## Text Placement
+
+- Small caption below each item
+- Title at the top with generous spacing
+- Minimal text to preserve gallery feel
+
+## Recommended Pairings
+
+- `aged-academia`: Museum-style presentations
+- `knolling`: Organized gallery flat-lays
+- `luxury-minimal`: Premium gallery aesthetics

sn-infographic/references/layouts/generous-margins.md

@@ -0,0 +1,36 @@
+# generous-margins
+
+Content is heavily inset, leaving huge margins around it.
+
+## Structure
+
+- Content occupies only the central 40-60% of the canvas
+- Large, intentional white or colored margins surround the content
+- Creates a sense of luxury, calm, and focus
+- Margins may contain minimal decorative elements
+
+## Best For
+
+- Premium or luxury brand content
+- Minimalist editorial designs
+- Content that benefits from breathing room
+- High-end product presentations
+
+## Visual Elements
+
+- Large empty margins (white, colored, or textured)
+- Centered or slightly off-center content block
+- Optional subtle border or frame at the margin edge
+- Minimal decorative elements in margins
+
+## Text Placement
+
+- All text within the central content zone
+- Optional small caption or attribution in the margin
+- Title prominently within the content area
+
+## Recommended Pairings
+
+- `aged-academia`: Classic editorial with wide margins
+- `luxury-minimal`: Gallery-like presentation margins
+- `luxury-minimal`: Premium brand generous spacing

sn-infographic/references/layouts/golden-ratio-split.md

@@ -0,0 +1,36 @@
+# golden-ratio-split
+
+Unequal splits using the golden ratio (1:1.618) or similar proportions.
+
+## Structure
+
+- Canvas divided using golden ratio proportions (approximately 38%/62%)
+- Major content in the larger zone, supporting content in the smaller
+- Proportions feel naturally balanced and aesthetically pleasing
+- Can be applied horizontally, vertically, or as a spiral
+
+## Best For
+
+- Aesthetically refined compositions
+- Content where natural balance matters
+- Photography or art-adjacent infographics
+- Premium or design-conscious content
+
+## Visual Elements
+
+- Golden ratio grid as the structural guide
+- Major element in the larger zone
+- Supporting elements in the smaller zone
+- Optional golden spiral overlay
+
+## Text Placement
+
+- Primary text in the larger zone
+- Supporting text in the smaller zone
+- Title at the golden ratio intersection point
+
+## Recommended Pairings
+
+- `aged-academia`: Classical proportional layouts
+- `luxury-minimal`: Aesthetically balanced presentations
+- `storybook-watercolor`: Naturally proportioned compositions

sn-infographic/references/layouts/hard-alignment.md

@@ -0,0 +1,36 @@
+# hard-alignment
+
+All element edges are perfectly aligned, creating razor-sharp order.
+
+## Structure
+
+- Every element edge aligns to a shared grid line
+- No floating or loosely placed elements
+- Alignment is the primary design principle
+- Creates a sense of precision and control
+
+## Best For
+
+- Technical or engineering documentation
+- Data-heavy reference materials
+- Corporate or institutional content
+- Designs where precision signals credibility
+
+## Visual Elements
+
+- Strict edge alignment across all elements
+- Consistent spacing multiples (e.g., 8px grid)
+- Minimal decoration; alignment is the aesthetic
+- Optional subtle grid lines as background
+
+## Text Placement
+
+- All text aligned to the same grid
+- Consistent left or center alignment
+- No orphaned or misaligned text elements
+
+## Recommended Pairings
+
+- `technical-schematic`: Engineering precision
+- `ui-wireframe`: Interface alignment grids
+- `corporate-memphis`: Swiss-style strict alignment

sn-infographic/references/layouts/header-body.md

@@ -0,0 +1,36 @@
+# header-body
+
+Prominent header area on top, large content area below.
+
+## Structure
+
+- Header zone (15-25%): title, subtitle, and key visual
+- Body zone (75-85%): main content area
+- Strong visual contrast between header and body
+- Header may use a distinct background color or image
+
+## Best For
+
+- Long-form infographics with a clear title section
+- Report covers and chapter openers
+- Presentation slides
+- Newsletter headers
+
+## Visual Elements
+
+- Bold header with large typography
+- Decorative or illustrative header background
+- Clean body area with structured content
+- Optional header icon or logo
+
+## Text Placement
+
+- Main title in header zone
+- Subtitle or date below title
+- All body content in the lower zone
+
+## Recommended Pairings
+
+- `corporate-memphis`: Professional reports
+- `high-contrast-ad`: High-impact announcements
+- `chalkboard`: Educational lesson headers

sn-infographic/references/layouts/heading-subheading.md

@@ -0,0 +1,37 @@
+# heading-subheading
+
+Type size and weight contrast forms a title-subtitle-body vertical hierarchy.
+
+## Structure
+
+- Large main heading at top
+- Smaller subheading below
+- Body text or content beneath
+- Hierarchy communicated purely through typography
+- No hard grid divisions required
+
+## Best For
+
+- Text-heavy infographics
+- Quote or statement posters
+- Typography-led editorial designs
+- Key message callouts
+
+## Visual Elements
+
+- Dramatic size contrast between heading levels
+- Weight variation (bold heading, regular body)
+- Optional decorative rule or accent between levels
+- Minimal imagery to keep focus on text
+
+## Text Placement
+
+- H1: largest, most prominent
+- H2: secondary, supporting context
+- Body: smallest, detailed information
+
+## Recommended Pairings
+
+- `aged-academia`: Editorial or academic typography
+- `high-contrast-ad`: High-contrast typographic posters
+- `ikea-manual`: Clean instructional hierarchy

sn-infographic/references/layouts/hidden-details.md

@@ -0,0 +1,36 @@
+# hidden-details
+
+Small elements are hidden within a complex scene for discovery.
+
+## Structure
+
+- Rich, detailed illustration as the primary canvas
+- Hidden objects, icons, or data points embedded in the scene
+- Viewer is invited to explore and discover
+- Optional legend listing what to find
+
+## Best For
+
+- Engagement-driven infographics
+- "Spot the difference" or "find the hidden" formats
+- Complex system overviews with embedded details
+- Interactive-style static infographics
+
+## Visual Elements
+
+- Dense, detailed illustration
+- Hidden elements blended into the scene
+- Optional numbered or lettered markers
+- Legend or answer key at the bottom
+
+## Text Placement
+
+- Title and instructions at top
+- Legend or key at bottom
+- Minimal in-scene text to preserve discovery
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Rich illustrated scenes
+- `crayon-hand-drawn`: Hand-drawn detail-rich worlds
+- `pixel-art`: Retro pixel scenes with hidden items

sn-infographic/references/layouts/hierarchical-layers.md

@@ -0,0 +1,48 @@
+# hierarchical-layers
+
+Nested layers showing levels of importance, influence, or proximity.
+
+## Structure
+
+- Multiple layers from core to periphery
+- Core/top: most important/central
+- Outer/bottom: decreasing importance
+- 3-7 levels typically
+- Clear boundaries between levels
+
+## Variants
+
+| Variant | Shape | Visual Emphasis |
+|---------|-------|-----------------|
+| **Pyramid** | Triangle, vertical | Top-down hierarchy, quantity |
+| **Concentric** | Rings, radial | Center-out influence, proximity |
+
+## Best For
+
+- Maslow's hierarchy style concepts
+- Priority and importance levels
+- Spheres of influence
+- Organizational structures
+- Stakeholder analysis
+
+## Visual Elements
+
+- Distinct color per level
+- Icons or illustrations per tier
+- Size indicates importance/quantity
+- Labels inside or beside layers
+- Decorative apex/center element
+
+## Text Placement
+
+- Title at top or side
+- Level names inside each tier
+- Brief descriptions outside
+- Quantities or percentages if relevant
+- Legend for color meanings
+
+## Recommended Pairings
+
+- `paper-collage`: Playful layered concepts
+- `corporate-memphis`: Business hierarchies
+- `technical-schematic`: Technical 3D pyramids

sn-infographic/references/layouts/hub-spoke.md

@@ -0,0 +1,41 @@
+# hub-spoke
+
+Central concept with radiating connections to related items.
+
+## Structure
+
+- Central hub (main concept)
+- Spokes radiating outward
+- Nodes at spoke ends (related concepts)
+- Even or weighted distribution
+- Optional secondary connections
+
+## Best For
+
+- Central theme with components
+- Product features around core
+- Team roles around project
+- Ecosystem mapping
+- Mind maps
+
+## Visual Elements
+
+- Prominent central hub
+- Clear spoke lines
+- Consistent node styling
+- Icons representing each spoke item
+- Optional grouping colors
+
+## Text Placement
+
+- Title at top
+- Core concept in center hub
+- Spoke item labels at nodes
+- Brief descriptions near nodes
+- Connection labels on spokes if needed
+
+## Recommended Pairings
+
+- `crayon-hand-drawn`: Friendly concept maps
+- `corporate-memphis`: Business ecosystems
+- `subway-map`: Network-style connections

sn-infographic/references/layouts/iceberg.md

@@ -0,0 +1,41 @@
+# iceberg
+
+Surface vs hidden depths, visible vs underlying factors.
+
+## Structure
+
+- Waterline dividing visible/hidden
+- Tip above water (obvious/surface)
+- Larger mass below (hidden/deep)
+- Proportional to emphasize hidden depth
+- Optional layers within underwater section
+
+## Best For
+
+- Surface vs root causes
+- Visible vs invisible work
+- Symptoms vs underlying issues
+- Public vs private aspects
+- Known vs unknown factors
+
+## Visual Elements
+
+- Clear water/surface line
+- Above: smaller, brighter
+- Below: larger, darker/deeper
+- Wave or water texture
+- Gradient showing depth
+
+## Text Placement
+
+- Title at top
+- Surface items above waterline
+- Hidden items below, larger
+- Waterline label optional
+- Depth indicators for layers
+
+## Recommended Pairings
+
+- `crayon-hand-drawn`: Friendly metaphor
+- `storybook-watercolor`: Artistic depth
+- `cartoon-flat`: Dramatic revelation

sn-infographic/references/layouts/isometric-map.md

@@ -0,0 +1,41 @@
+# isometric-map
+
+3D-style spatial layout showing locations, relationships, or journey through space.
+
+## Structure
+
+- Isometric 3D perspective
+- Locations as buildings/landmarks
+- Paths connecting locations
+- Spatial relationships visible
+- Bird's eye view angle
+
+## Best For
+
+- Office/campus layouts
+- City/ecosystem maps
+- User journey maps
+- System architecture
+- Process landscapes
+
+## Visual Elements
+
+- Consistent isometric angle (30°)
+- 3D buildings or objects
+- Pathways and roads
+- Labels floating above
+- Mini scenes at locations
+
+## Text Placement
+
+- Title at top corner
+- Location labels above objects
+- Path labels along routes
+- Legend for symbols
+- Scale indicator if relevant
+
+## Recommended Pairings
+
+- `origami`: Clean technical maps
+- `pixel-art`: Retro game-style maps
+- `lego-brick`: Playful location maps

sn-infographic/references/layouts/isometric-tech-stack.md

@@ -0,0 +1,43 @@
+# isometric-tech-stack
+
+2.5D isometric view stacking system layers vertically.
+
+## Structure
+
+- Multiple horizontal layers stacked in isometric 3D perspective
+- Each layer represents a system tier or component level
+- Layers connected by vertical lines or arrows
+- Top-down reading order through the stack
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Tech Stack** | Software/hardware layers | Code, servers, databases |
+| **Organization Stack** | Hierarchical levels | Teams, departments, roles |
+
+## Best For
+
+- Software architecture diagrams
+- Technology stack overviews
+- Organizational layer diagrams
+- System component hierarchies
+
+## Visual Elements
+
+- Isometric 3D perspective (30° angle)
+- Distinct layer platforms with labels
+- Vertical connectors between layers
+- Icons representing each layer's content
+
+## Text Placement
+
+- Layer title on each platform
+- Component labels within each layer
+- Stack title at the top
+
+## Recommended Pairings
+
+- `technical-schematic`: Engineering stack diagrams
+- `neon-futurism`: Futuristic tech stack visuals
+- `pixel-art`: Retro isometric tech stacks

sn-infographic/references/layouts/jigsaw.md

@@ -0,0 +1,41 @@
+# jigsaw
+
+Interlocking puzzle pieces showing how parts fit together.
+
+## Structure
+
+- Puzzle pieces that interlock
+- Each piece represents a component
+- Connections show relationships
+- Can be assembled or exploded view
+- Missing piece highlights gaps
+
+## Best For
+
+- Component relationships
+- Team/skill fit
+- Strategy pieces
+- Integration concepts
+- Completeness assessments
+
+## Visual Elements
+
+- Classic puzzle piece shapes
+- Distinct colors per piece
+- Interlocking edges visible
+- Icons or labels per piece
+- Optional missing piece
+
+## Text Placement
+
+- Title at top
+- Piece labels inside or beside
+- Connection descriptions
+- Missing piece explanation
+- Assembly context
+
+## Recommended Pairings
+
+- `crayon-hand-drawn`: Friendly integration concepts
+- `paper-collage`: Tactile puzzle feel
+- `corporate-memphis`: Business strategy pieces

sn-infographic/references/layouts/left-image-right-text.md

@@ -0,0 +1,35 @@
+# left-image-right-text
+
+Image on the left, text on the right.
+
+## Structure
+
+- Left column (50-60%): image or illustration
+- Right column (40-50%): text content
+- Mirror of left-text-right-image
+- Both columns vertically centered
+
+## Best For
+
+- Narrative-driven content where image leads
+- Profile or persona cards
+- Case study highlights
+- Landscape-format infographic panels
+
+## Visual Elements
+
+- Dominant image on the left setting the scene
+- Text hierarchy on the right providing context
+- Optional vertical accent line between columns
+
+## Text Placement
+
+- Headline at top-right
+- Body text below headline
+- Key points or stats in right column
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Character or scene introductions
+- `corporate-memphis`: Business case studies
+- `high-contrast-ad`: High-impact feature callouts

sn-infographic/references/layouts/left-text-right-image.md

@@ -0,0 +1,35 @@
+# left-text-right-image
+
+Text on the left, image on the right.
+
+## Structure
+
+- Left column (40-50%): text content
+- Right column (50-60%): image or illustration
+- Vertical divider optional
+- Both columns vertically centered
+
+## Best For
+
+- Feature explanations with supporting visuals
+- Product descriptions
+- Slide-style infographic panels
+- Landscape-format content
+
+## Visual Elements
+
+- Strong image on the right anchoring the layout
+- Well-structured text hierarchy on the left
+- Optional background color split between columns
+
+## Text Placement
+
+- Headline at top-left
+- Body text below headline
+- Supporting labels or bullets in left column
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business feature slides
+- `technical-schematic`: Technical documentation
+- `ikea-manual`: Step-by-step instructions

sn-infographic/references/layouts/linear-progression.md

@@ -0,0 +1,48 @@
+# linear-progression
+
+Sequential progression showing steps, timeline, or chronological events.
+
+## Structure
+
+- Linear arrangement (horizontal or vertical)
+- Nodes/markers at key points
+- Connecting line or path between nodes
+- Clear start and end points
+- Directional flow indicators
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Timeline** | Chronological events, dates | Time markers, period labels |
+| **Process** | Action steps, numbered sequence | Step numbers, action icons |
+
+## Best For
+
+- Step-by-step tutorials and how-tos
+- Historical timelines and evolution
+- Project milestones and roadmaps
+- Workflow documentation
+- Onboarding processes
+
+## Visual Elements
+
+- Numbered steps or date markers
+- Arrows or connectors showing direction
+- Icons representing each step/event
+- Consistent node spacing
+- Progress indicators optional
+
+## Text Placement
+
+- Title at top
+- Step/event titles at each node
+- Brief descriptions below nodes
+- Dates or numbers clearly visible
+
+## Recommended Pairings
+
+- `paper-collage`: Friendly tutorials and timelines
+- `ikea-manual`: Clean assembly instructions
+- `corporate-memphis`: Business process flows
+- `aged-academia`: Historical discoveries

sn-infographic/references/layouts/luxury-layout.md

@@ -0,0 +1,36 @@
+# luxury-layout
+
+Gold/black/white palette, centered or symmetric, with classic typography.
+
+## Structure
+
+- Symmetric or centered composition
+- Premium color palette: gold, black, white, or deep jewel tones
+- Classic or refined typography
+- Generous spacing and restrained decoration
+
+## Best For
+
+- Luxury brand communications
+- Premium product launches
+- High-end event invitations
+- Exclusive or VIP content
+
+## Visual Elements
+
+- Gold accents or metallic textures
+- Classic serif or elegant sans-serif typography
+- Symmetric layout with centered elements
+- Minimal but refined decorative elements
+
+## Text Placement
+
+- Centered headline with generous spacing
+- Supporting text in smaller, refined type
+- All text within the symmetric composition
+
+## Recommended Pairings
+
+- `aged-academia`: Classic luxury aesthetics
+- `origami`: Refined geometric luxury
+- `knolling`: Premium product flat-lay

sn-infographic/references/layouts/macro-closeup.md

@@ -0,0 +1,36 @@
+# macro-closeup
+
+A tiny detail is enlarged to fill the whole canvas.
+
+## Structure
+
+- Extreme close-up of a small detail or texture
+- Subject fills most or all of the canvas
+- Background context minimal or absent
+- Reveals hidden complexity or beauty
+
+## Best For
+
+- Material or texture showcases
+- Scientific or technical detail explanations
+- "Did you know?" style reveals
+- Product quality highlights
+
+## Visual Elements
+
+- Highly detailed central subject at macro scale
+- Optional scale indicator (ruler, coin, or size label)
+- Shallow depth of field effect (blurred edges)
+- Callout lines pointing to specific details
+
+## Text Placement
+
+- Labels with callout lines pointing to details
+- Title at top or bottom with minimal footprint
+- Scale reference near the subject
+
+## Recommended Pairings
+
+- `technical-schematic`: Engineering detail views
+- `aged-academia`: Scientific specimen illustrations
+- `knolling`: Flat-lay detail shots

sn-infographic/references/layouts/maximalism.md

@@ -0,0 +1,36 @@
+# maximalism
+
+All space is filled, creating information-rich, dense compositions.
+
+## Structure
+
+- Every area of the canvas contains content or decoration
+- High information density with minimal negative space
+- Multiple visual layers and elements coexist
+- Controlled chaos: busy but not unreadable
+
+## Best For
+
+- "Everything you need to know" reference sheets
+- Celebration or festival-themed content
+- Retro or vintage-style dense compositions
+- Comprehensive cheat sheets
+
+## Visual Elements
+
+- Dense pattern or texture backgrounds
+- Multiple overlapping decorative elements
+- Rich color palette with many hues
+- Varied typography sizes and styles
+
+## Text Placement
+
+- Text integrated throughout the composition
+- Clear hierarchy despite density
+- Key information given highest contrast
+
+## Recommended Pairings
+
+- `high-contrast-ad`: Dense comic-style maximalism
+- `kawaii`: Cute dense pattern compositions
+- `pixel-art`: Retro dense pixel scenes

sn-infographic/references/layouts/modular-repetition.md

@@ -0,0 +1,36 @@
+# modular-repetition
+
+The same layout structure repeats with only content changes.
+
+## Structure
+
+- Identical layout modules repeated across the canvas
+- Each module contains the same structural elements (icon, title, text)
+- Consistent spacing and alignment between modules
+- Content varies; structure is fixed
+
+## Best For
+
+- Feature lists with equal weight
+- Team member profiles
+- Step-by-step instructions with uniform steps
+- Product comparison rows
+
+## Visual Elements
+
+- Uniform module containers (cards, rows, or cells)
+- Consistent icon placement per module
+- Alternating or consistent background colors
+- Clear visual rhythm through repetition
+
+## Text Placement
+
+- Same text hierarchy in every module
+- Title, subtitle, and body in fixed positions
+- Overall title above the module array
+
+## Recommended Pairings
+
+- `ikea-manual`: Clean repeated instruction steps
+- `corporate-memphis`: Business feature lists
+- `ui-wireframe`: Wireframe component grids

sn-infographic/references/layouts/multi-directional.md

@@ -0,0 +1,36 @@
+# multi-directional
+
+Text and elements arranged in multiple directions simultaneously.
+
+## Structure
+
+- Elements oriented in 3 or more different directions
+- Creates a radial, explosive, or chaotic composition
+- Each direction may represent a different category or perspective
+- Visual cohesion through consistent style
+
+## Best For
+
+- "Exploding" concept visualizations
+- Multi-perspective or multi-voice content
+- Creative brainstorming maps
+- Abstract concept presentations
+
+## Visual Elements
+
+- Elements radiating in multiple directions
+- Varied text orientations
+- Color coding per direction
+- Central anchor element
+
+## Text Placement
+
+- Labels aligned to their respective direction
+- Central label at the anchor point
+- Title in a stable horizontal zone
+
+## Recommended Pairings
+
+- `cartoon-flat`: Explosive multi-directional compositions
+- `crayon-hand-drawn`: Hand-drawn radial layouts
+- `kawaii`: Cute multi-directional bursts

sn-infographic/references/layouts/multi-focal.md

@@ -0,0 +1,36 @@
+# multi-focal
+
+Multiple focal points with jumps guided by color or connecting lines.
+
+## Structure
+
+- Several equally prominent focal points distributed across the canvas
+- Visual connectors (lines, arrows, or color coding) guide the reading order
+- No single dominant element; multiple centers of attention
+- Numbered or color-coded to indicate sequence
+
+## Best For
+
+- Multi-topic overviews with equal weight
+- Network or relationship diagrams
+- "Multiple things happening simultaneously" narratives
+- Complex system overviews
+
+## Visual Elements
+
+- Multiple high-contrast focal elements
+- Connecting lines or color coding between foci
+- Numbered badges or color keys
+- Supporting elements subordinate to each focal point
+
+## Text Placement
+
+- Label near each focal point
+- Connecting line labels if needed
+- Title in a neutral zone above or below
+
+## Recommended Pairings
+
+- `subway-map`: Network-style multi-focal layouts
+- `corporate-memphis`: Multi-topic business overviews
+- `technical-schematic`: System architecture diagrams

sn-infographic/references/layouts/multi-scale.md

@@ -0,0 +1,36 @@
+# multi-scale
+
+Nested multi-scale structure linked with magnifiers or dotted lines.
+
+## Structure
+
+- Multiple zoom levels shown simultaneously
+- Macro view and micro view connected by visual links
+- Magnifier circles or inset panels show detail
+- Dotted lines or arrows connect scale levels
+
+## Best For
+
+- Scientific or technical detail explanations
+- System architecture with component details
+- "Zoom in" educational content
+- Micro-to-macro relationship diagrams
+
+## Visual Elements
+
+- Overview diagram at one scale
+- Magnified inset panels for details
+- Dotted lines or arrows connecting scales
+- Scale indicators or labels
+
+## Text Placement
+
+- Overview labels in the main diagram
+- Detail labels within inset panels
+- Scale ratio labels near magnifiers
+
+## Recommended Pairings
+
+- `technical-schematic`: Engineering multi-scale diagrams
+- `aged-academia`: Scientific specimen zoom views
+- `ui-wireframe`: Interface component zoom-ins

sn-infographic/references/layouts/nine-grid.md

@@ -0,0 +1,36 @@
+# nine-grid
+
+Canvas evenly split into nine modules in a 3×3 grid.
+
+## Structure
+
+- 3×3 grid of equal-sized cells
+- Each cell contains one item or concept
+- Center cell often used as focal point or title
+- Consistent cell size and padding
+
+## Best For
+
+- Nine-item collections or catalogs
+- 3×3 frameworks or models
+- Feature grids with equal weight
+- Photo or icon galleries
+
+## Visual Elements
+
+- Uniform cell borders or backgrounds
+- Icons or illustrations per cell
+- Color coding by row or column
+- Optional center cell highlight
+
+## Text Placement
+
+- Item title within each cell
+- Brief description below title
+- Overall title above the grid
+
+## Recommended Pairings
+
+- `pixel-art`: Retro icon grids
+- `corporate-memphis`: Feature catalogs
+- `cartoon-flat`: Element-style collections

sn-infographic/references/layouts/nonlinear-path.md

@@ -0,0 +1,36 @@
+# nonlinear-path
+
+Text layout jumps with shapes rather than following a straight line.
+
+## Structure
+
+- Content arranged in a playful, non-linear path
+- Elements scattered or connected by a winding, irregular route
+- Reading order implied by numbering, arrows, or visual cues
+- Organic and energetic feel
+
+## Best For
+
+- Creative or playful educational content
+- Brainstorming or mind-map style layouts
+- Content for younger audiences
+- Unconventional topic presentations
+
+## Visual Elements
+
+- Irregular path connecting content nodes
+- Varied element sizes and orientations
+- Playful connectors (dashed lines, arrows, footprints)
+- Colorful, varied backgrounds per node
+
+## Text Placement
+
+- Labels within or beside each node
+- Reading order numbers if needed
+- Title in a prominent anchor position
+
+## Recommended Pairings
+
+- `kawaii`: Cute playful paths
+- `crayon-hand-drawn`: Hand-drawn wandering routes
+- `storybook-watercolor`: Whimsical story paths

sn-infographic/references/layouts/one-way-flow.md

@@ -0,0 +1,36 @@
+# one-way-flow
+
+All elements flow or point in a single direction.
+
+## Structure
+
+- All visual elements oriented toward one direction (left, right, up, or down)
+- Arrows, shapes, and text all reinforce the directional movement
+- Creates strong momentum and intentionality
+- No counter-directional elements
+
+## Best For
+
+- Progress or momentum narratives
+- Conversion or pipeline flows
+- "Moving forward" messaging
+- Directional process diagrams
+
+## Visual Elements
+
+- Consistent directional arrows or chevrons
+- Elements sized to suggest movement (larger at front)
+- Color gradient reinforcing direction
+- Optional motion lines or speed effects
+
+## Text Placement
+
+- Labels along the flow direction
+- Title at the start of the flow
+- Outcome or destination at the end
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business pipeline flows
+- `cartoon-flat`: High-energy directional designs
+- `ikea-manual`: Clear directional instructions

sn-infographic/references/layouts/overlapping.md

@@ -0,0 +1,36 @@
+# overlapping
+
+Text and images overlap, blurring foreground and background relationships.
+
+## Structure
+
+- Elements layered on top of each other with intentional overlap
+- Depth created through z-order, opacity, and shadow
+- Overlapping creates visual richness and complexity
+- Key elements remain legible despite overlap
+
+## Best For
+
+- Rich, layered editorial designs
+- Collage-style compositions
+- Content showing interconnection or integration
+- Visually complex artistic presentations
+
+## Visual Elements
+
+- Multiple overlapping layers
+- Drop shadows and opacity variations
+- Clear z-order hierarchy
+- Clipping masks or blend modes for integration
+
+## Text Placement
+
+- Text in the most legible layer
+- Avoid placing critical text under opaque elements
+- Title in a clear, non-overlapping zone
+
+## Recommended Pairings
+
+- `glitch-art`: Torn paper overlapping layers
+- `storybook-watercolor`: Painterly overlapping elements
+- `high-contrast-ad`: High-contrast overlapping shapes

sn-infographic/references/layouts/panorama.md

@@ -0,0 +1,36 @@
+# panorama
+
+An ultra-wide panoramic canvas showing a grand, expansive scene.
+
+## Structure
+
+- Extremely wide aspect ratio (3:1 or wider)
+- Single continuous scene spanning the full width
+- Content distributed across the panoramic width
+- Encourages left-to-right exploration
+
+## Best For
+
+- Landscape or environment overviews
+- Historical or timeline panoramas
+- "Big picture" concept illustrations
+- Comparative landscapes (before/after environments)
+
+## Visual Elements
+
+- Continuous wide illustration or scene
+- Depth layers (foreground, midground, background)
+- Content distributed at natural scene locations
+- Optional grid overlay for navigation
+
+## Text Placement
+
+- Labels at relevant scene locations
+- Title at the left edge or top
+- Legend or key at the bottom
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Painterly panoramic scenes
+- `origami`: Wide isometric environments
+- `crayon-hand-drawn`: Hand-drawn panoramic worlds

sn-infographic/references/layouts/periodic-table.md

@@ -0,0 +1,41 @@
+# periodic-table
+
+Grid of categorized elements with consistent cell formatting.
+
+## Structure
+
+- Rectangular grid
+- Each cell is one element
+- Color-coded categories
+- Consistent cell format
+- Optional grouping gaps
+
+## Best For
+
+- Categorized collections
+- Tool/resource catalogs
+- Skill matrices
+- Element collections
+- Reference guides
+
+## Visual Elements
+
+- Uniform cell sizes
+- Category colors
+- Symbol/abbreviation prominent
+- Small icon per cell
+- Category legend
+
+## Text Placement
+
+- Title at top
+- Cell: symbol, name, brief info
+- Category names in legend
+- Optional row/column headers
+- Footnotes for special cases
+
+## Recommended Pairings
+
+- `high-contrast-ad`: Vibrant element grids
+- `pixel-art`: Retro collection displays
+- `corporate-memphis`: Business tool catalogs

sn-infographic/references/layouts/random-scatter.md

@@ -0,0 +1,36 @@
+# random-scatter
+
+Seemingly random scattered placement of elements across the canvas.
+
+## Structure
+
+- Elements distributed without an obvious grid or alignment
+- Controlled randomness: varied positions, sizes, and orientations
+- Visual cohesion through consistent style, not structure
+- Optional subtle connections between elements
+
+## Best For
+
+- Brainstorming or ideation visualizations
+- "Many things" overviews without hierarchy
+- Creative or playful topic presentations
+- Mood boards or inspiration collections
+
+## Visual Elements
+
+- Elements at varied positions and rotations
+- Size variation to create visual interest
+- Consistent style tying elements together
+- Optional subtle background texture
+
+## Text Placement
+
+- Labels beside or below each element
+- Title in a clear zone (top or center)
+- Avoid overlapping text with elements
+
+## Recommended Pairings
+
+- `paper-collage`: Hand-scattered illustrated elements
+- `kawaii`: Cute scattered icons
+- `knolling`: Organized-looking scatter (controlled chaos)

sn-infographic/references/layouts/s-curve.md

@@ -0,0 +1,36 @@
+# s-curve
+
+Graphics guide the eye in an S-shaped curve through the content.
+
+## Structure
+
+- Content nodes arranged along an S-shaped path
+- Path flows from top to bottom in a gentle double curve
+- Alternating left-right placement of content along the curve
+- Smooth, flowing visual rhythm
+
+## Best For
+
+- Multi-step processes with a flowing feel
+- Journey or narrative content
+- Content that benefits from visual rhythm
+- Alternatives to straight timelines
+
+## Visual Elements
+
+- Curved path or ribbon connecting nodes
+- Alternating left/right content placement
+- Smooth bezier curves rather than sharp angles
+- Optional decorative elements along the curve
+
+## Text Placement
+
+- Labels beside each node along the curve
+- Title at the top of the S
+- Conclusion at the bottom of the S
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Flowing narrative paths
+- `crayon-hand-drawn`: Hand-drawn winding routes
+- `corporate-memphis`: Smooth process flows

sn-infographic/references/layouts/scene-unfolding.md

@@ -0,0 +1,36 @@
+# scene-unfolding
+
+A panoramic scene that unfolds with rich environmental details.
+
+## Structure
+
+- Wide or tall canvas showing a complete environment
+- Multiple elements and details distributed across the scene
+- Narrative or information embedded in the environment
+- Encourages exploration rather than linear reading
+
+## Best For
+
+- Ecosystem or environment explanations
+- "A day in the life" narratives
+- City, nature, or system overviews
+- Rich world-building infographics
+
+## Visual Elements
+
+- Detailed panoramic illustration
+- Multiple characters, objects, and locations
+- Callout labels for key scene elements
+- Depth layers (foreground, midground, background)
+
+## Text Placement
+
+- Labels embedded in the scene with callout lines
+- Title at top or in a sky/header area
+- Legend or key at the bottom if needed
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Painterly world scenes
+- `origami`: 3D isometric environments
+- `crayon-hand-drawn`: Hand-drawn world illustrations

sn-infographic/references/layouts/single-focal-point.md

@@ -0,0 +1,36 @@
+# single-focal-point
+
+Single absolute visual focus, usually centered or at the visual center of gravity.
+
+## Structure
+
+- One dominant element occupies the primary visual position
+- All other elements are subordinate or absent
+- Strong contrast between subject and background
+- Generous negative space around the focal point
+
+## Best For
+
+- Product spotlights and hero shots
+- Key statistics or single powerful quotes
+- Brand announcements with one central message
+- Minimalist concept illustrations
+
+## Visual Elements
+
+- Large, high-contrast central subject
+- Clean or blurred background
+- Subtle vignette or radial gradient to draw focus
+- Optional supporting micro-elements at periphery
+
+## Text Placement
+
+- Title above or below the focal element
+- Minimal supporting text only
+- Avoid competing with the central subject
+
+## Recommended Pairings
+
+- `knolling`: Product flat-lay with single hero item
+- `high-contrast-ad`: High-impact single concept
+- `ui-wireframe`: Clean single-element mockup

sn-infographic/references/layouts/single-object-art.md

@@ -0,0 +1,36 @@
+# single-object-art
+
+A single ordinary object lit and displayed like sculpture or fine art.
+
+## Structure
+
+- One object as the sole subject, treated with artistic reverence
+- Professional lighting, shadow, and presentation
+- Minimal or no background elements
+- Object elevated to art status through treatment
+
+## Best For
+
+- Product hero shots
+- "Object of the day" or spotlight content
+- Material or craft showcases
+- Minimalist product infographics
+
+## Visual Elements
+
+- Single object with dramatic lighting
+- Clean or gradient background
+- Optional shadow or reflection
+- No competing elements
+
+## Text Placement
+
+- Object name or title below the subject
+- Brief description or specs in minimal text
+- No text overlapping the object
+
+## Recommended Pairings
+
+- `knolling`: Flat-lay single object art
+- `technical-schematic`: Engineering object showcase
+- `aged-academia`: Scientific specimen presentation

sn-infographic/references/layouts/skewed-grid.md

@@ -0,0 +1,36 @@
+# skewed-grid
+
+The overall grid is rotated by an angle, creating dynamic energy.
+
+## Structure
+
+- Standard grid rotated 5-30 degrees
+- Content blocks aligned to the skewed grid
+- Creates diagonal energy while maintaining internal order
+- Background may remain horizontal for contrast
+
+## Best For
+
+- Dynamic or energetic content
+- Tech, sports, or action themes
+- Designs that need visual movement
+- Modern editorial layouts
+
+## Visual Elements
+
+- Rotated grid lines as the structural backbone
+- Content blocks aligned to the skewed angle
+- Horizontal background for contrast
+- Optional motion or speed lines
+
+## Text Placement
+
+- Text aligned to the skewed grid angle
+- Title may remain horizontal for readability
+- Labels follow the grid rotation
+
+## Recommended Pairings
+
+- `neon-futurism`: Futuristic skewed grids
+- `high-contrast-ad`: Dynamic skewed compositions
+- `corporate-memphis`: Modern angled layouts

sn-infographic/references/layouts/speech-bubbles.md

@@ -0,0 +1,44 @@
+# speech-bubbles
+
+Text wrapped inside speech bubbles pointing to characters or subjects.
+
+## Structure
+
+- Characters or subjects positioned around the canvas
+- Speech or thought bubbles containing text point to each character
+- Conversational or dialogue-driven layout
+- Can show multiple perspectives simultaneously
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Dialogue** | Conversation between characters | Alternating bubbles |
+| **Thought** | Internal monologue or ideas | Cloud-shaped bubbles |
+| **Annotation** | Labels pointing to objects | Pointer bubbles |
+
+## Best For
+
+- FAQ or Q&A formats
+- Multiple stakeholder perspectives
+- Character-driven explanations
+- Testimonial or quote collections
+
+## Visual Elements
+
+- Characters or avatars as anchors
+- Varied bubble shapes (speech, thought, shout)
+- Bubble tails pointing to speakers
+- Color-coded bubbles per character
+
+## Text Placement
+
+- Content inside bubbles
+- Character names below avatars
+- Title outside the bubble cluster
+
+## Recommended Pairings
+
+- `cartoon-flat`: Classic comic dialogue
+- `kawaii`: Cute character conversations
+- `crayon-hand-drawn`: Hand-drawn bubble annotations

sn-infographic/references/layouts/spiral-vortex.md

@@ -0,0 +1,36 @@
+# spiral-vortex
+
+Elements spiral inward toward the center.
+
+## Structure
+
+- Content arranged along a spiral path converging to the center
+- Outer elements represent the start or broader context
+- Inner elements represent the core or conclusion
+- Creates a sense of focus and convergence
+
+## Best For
+
+- Narrowing or focusing narratives
+- "Drilling down" from broad to specific
+- Cyclical processes with increasing depth
+- Abstract concept visualizations
+
+## Visual Elements
+
+- Spiral path with content nodes along it
+- Decreasing element size toward the center
+- Color gradient from outer to inner
+- Central focal element at the vortex
+
+## Text Placement
+
+- Labels along the spiral path
+- Central label at the vortex
+- Title at the outer edge or top
+
+## Recommended Pairings
+
+- `neon-futurism`: Futuristic vortex effects
+- `origami`: Geometric spiral patterns
+- `high-contrast-ad`: High-contrast spiral compositions

sn-infographic/references/layouts/step-staircase.md

@@ -0,0 +1,36 @@
+# step-staircase
+
+A stair-step arrangement rising or descending to show progression.
+
+## Structure
+
+- Steps arranged diagonally, each higher (or lower) than the previous
+- Each step represents a stage, level, or milestone
+- Directional arrows or connectors between steps
+- Clear start at bottom-left and end at top-right (or reverse)
+
+## Best For
+
+- Growth or escalation narratives
+- Skill or maturity level progressions
+- Pricing tiers
+- Achievement or unlock sequences
+
+## Visual Elements
+
+- Staircase shape with distinct step blocks
+- Icons or numbers on each step
+- Upward arrow or trajectory line
+- Color gradient from start to end
+
+## Text Placement
+
+- Step label on or beside each step
+- Brief description below each step
+- Title at top or along the staircase
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business growth stages
+- `paper-collage`: Friendly skill progressions
+- `high-contrast-ad`: High-contrast achievement steps

sn-infographic/references/layouts/story-mountain.md

@@ -0,0 +1,41 @@
+# story-mountain
+
+Plot structure visualization showing rising action, climax, and resolution.
+
+## Structure
+
+- Mountain/arc shape
+- Rising slope (build-up)
+- Peak (climax)
+- Falling slope (resolution)
+- Start and end at base level
+
+## Best For
+
+- Narrative structures
+- Project lifecycles
+- Tension/release patterns
+- Emotional journeys
+- Campaign arcs
+
+## Visual Elements
+
+- Mountain or arc curve
+- Points along the path
+- Climax visually emphasized
+- Slope steepness meaningful
+- Base camps or milestones
+
+## Text Placement
+
+- Title at top
+- Stage labels along path
+- Climax prominently labeled
+- Brief descriptions at points
+- Start/end clearly marked
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Narrative journeys
+- `crayon-hand-drawn`: Educational plot diagrams
+- `cartoon-flat`: Dramatic story arcs

sn-infographic/references/layouts/storyboard.md

@@ -0,0 +1,43 @@
+# storyboard
+
+Panel layout resembling film storyboards, showing sequential scenes.
+
+## Structure
+
+- Multiple rectangular panels arranged in rows
+- Each panel shows a distinct scene or moment
+- Panels have a cinematic aspect ratio (wider than tall)
+- Scene transitions implied between panels
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Film Storyboard** | Scene-by-scene narrative | Cinematic framing, camera angles |
+| **Process Storyboard** | Step-by-step actions | Action focus, minimal background |
+
+## Best For
+
+- Narrative or scenario explanations
+- User journey or experience maps
+- Process walkthroughs with context
+- "How it works" storytelling
+
+## Visual Elements
+
+- Rectangular panels with consistent borders
+- Scene illustrations within each panel
+- Panel numbers or timestamps
+- Optional director's notes below panels
+
+## Text Placement
+
+- Scene description below each panel
+- Panel number at top corner
+- Overall title above the panel grid
+
+## Recommended Pairings
+
+- `cartoon-flat`: Classic storyboard panels
+- `crayon-hand-drawn`: Hand-drawn scene sketches
+- `high-contrast-ad`: High-contrast cinematic panels

sn-infographic/references/layouts/strong-perspective.md

@@ -0,0 +1,36 @@
+# strong-perspective
+
+Perspective lines converge toward the subject, creating depth.
+
+## Structure
+
+- Vanishing point(s) draw the eye toward the subject
+- Foreground elements larger, background elements smaller
+- Strong sense of 3D depth on a 2D canvas
+- Subject placed at or near the vanishing point
+
+## Best For
+
+- Architectural or spatial content
+- Journey or path metaphors
+- Depth-driven product showcases
+- Immersive scene illustrations
+
+## Visual Elements
+
+- Converging perspective lines (roads, corridors, shelves)
+- Size gradient from foreground to background
+- Subject highlighted at the convergence point
+- Optional atmospheric haze for depth
+
+## Text Placement
+
+- Title at top or foreground
+- Subject label near the vanishing point
+- Supporting text in foreground zones
+
+## Recommended Pairings
+
+- `origami`: 3D spatial layouts
+- `neon-futurism`: Futuristic corridor perspectives
+- `storybook-watercolor`: Painterly depth scenes

sn-infographic/references/layouts/structural-breakdown.md

@@ -0,0 +1,48 @@
+# structural-breakdown
+
+Internal structure visualization with labeled parts or layers.
+
+## Structure
+
+- Central subject (object, system, body)
+- Parts or layers clearly shown
+- Labels with callout lines
+- Exploded or cutaway view
+- Optional zoomed detail sections
+
+## Variants
+
+| Variant | View Type | Visual Emphasis |
+|---------|-----------|-----------------|
+| **Exploded** | Parts separated outward | Component relationships |
+| **Cross-section** | Sliced/cutaway view | Internal layers, composition |
+
+## Best For
+
+- Product part breakdowns
+- Anatomy explanations
+- System components
+- Device teardowns
+- Material composition
+
+## Visual Elements
+
+- Main subject clearly rendered
+- Callout lines with dots/arrows
+- Label boxes at endpoints
+- Numbered parts optionally
+- Layer boundaries or separation
+
+## Text Placement
+
+- Title at top
+- Part/layer labels at callouts
+- Brief descriptions in boxes
+- Legend for numbered systems
+- Depth/thickness if relevant
+
+## Recommended Pairings
+
+- `technical-schematic`: Technical schematics
+- `aged-academia`: Classic anatomical style
+- `paper-collage`: Friendly breakdowns

sn-infographic/references/layouts/swimlane.md

@@ -0,0 +1,37 @@
+# swimlane
+
+Parallel lanes representing different roles or departments, with a shared timeline.
+
+## Structure
+
+- Canvas divided into horizontal or vertical parallel lanes
+- Each lane represents a role, department, or actor
+- Timeline or process flow runs across all lanes
+- Handoffs between lanes shown with crossing arrows
+
+## Best For
+
+- Cross-functional process flows
+- Multi-stakeholder workflows
+- Service blueprints
+- Responsibility assignment diagrams
+
+## Visual Elements
+
+- Clearly labeled parallel lanes
+- Process steps within each lane
+- Crossing arrows for handoffs between lanes
+- Timeline or sequence indicator
+
+## Text Placement
+
+- Lane labels at the left edge or top
+- Step labels within each lane
+- Handoff labels on crossing arrows
+- Title above the swimlane diagram
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business process swimlanes
+- `technical-schematic`: Engineering workflow diagrams
+- `ui-wireframe`: Service blueprint wireframes

sn-infographic/references/layouts/swiss-grid.md

@@ -0,0 +1,36 @@
+# swiss-grid
+
+Strict Swiss International Style grid system, rational and objective.
+
+## Structure
+
+- Precise mathematical grid with defined columns and rows
+- All elements aligned to the grid with no exceptions
+- Generous but consistent margins
+- Typography-driven hierarchy
+
+## Best For
+
+- Corporate or institutional communications
+- Annual reports and formal documents
+- Technical reference materials
+- Content requiring maximum clarity and order
+
+## Visual Elements
+
+- Strict column grid (typically 3-6 columns)
+- Consistent baseline grid for typography
+- Minimal decoration; structure is the aesthetic
+- Black, white, and one accent color
+
+## Text Placement
+
+- All text aligned to grid columns
+- Consistent leading and type sizes
+- Captions and labels follow grid rules
+
+## Recommended Pairings
+
+- `technical-schematic`: Engineering precision layouts
+- `ui-wireframe`: Interface grid systems
+- `corporate-memphis`: Modern grid-based designs

sn-infographic/references/layouts/text-wrap.md

@@ -0,0 +1,36 @@
+# text-wrap
+
+Text tightly wraps around the contours of shapes or images.
+
+## Structure
+
+- Image or shape placed within a text block
+- Text flows around the shape's outline
+- Creates organic integration of text and image
+- Shape acts as an anchor within the text flow
+
+## Best For
+
+- Magazine-style editorial layouts
+- Illustrated articles or reports
+- Content where image and text are equally important
+- Flowing narrative with visual support
+
+## Visual Elements
+
+- Irregular or shaped image with clear contour
+- Text flowing around the shape boundary
+- Optional drop cap or pull quote
+- Consistent text column width
+
+## Text Placement
+
+- Text wraps around the image contour
+- Image positioned left, right, or center within text
+- Caption below or beside the image
+
+## Recommended Pairings
+
+- `aged-academia`: Classic editorial text wraps
+- `storybook-watercolor`: Illustrated story pages
+- `crayon-hand-drawn`: Hand-drawn image with flowing text

sn-infographic/references/layouts/three-tier.md

@@ -0,0 +1,42 @@
+# three-tier
+
+Layout divided horizontally into top, middle, and bottom sections.
+
+## Structure
+
+- Three horizontal bands stacked vertically
+- Each band has a distinct role: header / body / footer
+- Bands may have different heights (e.g., 20% / 60% / 20%)
+- Clear visual separation between bands
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Header-Body-Footer** | Standard page structure | Title top, content middle, CTA bottom |
+| **Intro-Detail-Summary** | Educational flow | Hook top, depth middle, takeaway bottom |
+
+## Best For
+
+- Structured educational infographics
+- Report-style layouts
+- Before/during/after narratives
+- Multi-phase process overviews
+
+## Visual Elements
+
+- Distinct background colors or textures per band
+- Horizontal rules or decorative dividers
+- Icons or illustrations anchoring each band
+
+## Text Placement
+
+- Top band: title and hook
+- Middle band: main content, data, or steps
+- Bottom band: summary, CTA, or source
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business reports
+- `chalkboard`: Educational breakdowns
+- `aged-academia`: Historical or academic content

sn-infographic/references/layouts/tile-layout.md

@@ -0,0 +1,36 @@
+# tile-layout
+
+Metro-style tiles with blocky color entrances.
+
+## Structure
+
+- Grid of rectangular tiles in varied sizes
+- Each tile is a solid color block with icon and label
+- Inspired by Windows Metro / Material Design tile systems
+- Tiles may be 1×1, 2×1, or 2×2 units
+
+## Best For
+
+- App or feature navigation overviews
+- Category or topic indexes
+- Dashboard entry points
+- Color-coded classification systems
+
+## Visual Elements
+
+- Bold solid-color tile backgrounds
+- Large icon centered in each tile
+- Short label below or over the icon
+- Consistent tile border radius
+
+## Text Placement
+
+- Label within each tile
+- Optional subtitle below the label
+- Section title above tile groups
+
+## Recommended Pairings
+
+- `corporate-memphis`: Vibrant flat tile grids
+- `high-contrast-ad`: High-contrast color blocks
+- `pixel-art`: Retro tile-based interfaces

sn-infographic/references/layouts/top-image-bottom-text.md

@@ -0,0 +1,35 @@
+# top-image-bottom-text
+
+Image at the top, text content below.
+
+## Structure
+
+- Upper half (50-70%): full-width image or illustration
+- Lower half (30-50%): text content area
+- Clear horizontal dividing line or natural transition
+- Text area may include title, body, and CTA
+
+## Best For
+
+- Article or blog post covers
+- Product announcements with visual lead
+- Educational cards with concept illustration
+- Social media posts
+
+## Visual Elements
+
+- Dominant image filling the top zone
+- Clean text area below with good typography
+- Optional color band or shape as transition element
+
+## Text Placement
+
+- Title immediately below the image
+- Body text beneath the title
+- CTA or caption at the bottom
+
+## Recommended Pairings
+
+- `corporate-memphis`: Clean editorial cards
+- `storybook-watercolor`: Illustrated story cards
+- `paper-collage`: Friendly educational posts

sn-infographic/references/layouts/tree-branching.md

@@ -0,0 +1,41 @@
+# tree-branching
+
+Hierarchical structure branching from root to leaves, showing categories and subcategories.
+
+## Structure
+
+- Root/trunk at top or left
+- Branches splitting into sub-branches
+- Leaves as terminal nodes
+- Clear parent-child relationships
+- Balanced or organic branching
+
+## Best For
+
+- Taxonomies and classifications
+- Decision trees
+- Organizational charts
+- File/folder structures
+- Family trees
+
+## Visual Elements
+
+- Connecting lines showing relationships
+- Nodes at branch points
+- Icons or labels at each node
+- Color coding by branch
+- Visual weight decreasing toward leaves
+
+## Text Placement
+
+- Title at top
+- Root concept prominently labeled
+- Branch and leaf labels
+- Optional descriptions at key nodes
+- Legend for categories
+
+## Recommended Pairings
+
+- `crayon-hand-drawn`: Friendly taxonomies
+- `aged-academia`: Scientific classifications
+- `origami`: Geometric tree structures

sn-infographic/references/layouts/ultra-minimalist.md

@@ -0,0 +1,36 @@
+# ultra-minimalist
+
+Minimal background with only a logo or very short word centered.
+
+## Structure
+
+- Near-empty canvas with a single central element
+- Extreme negative space surrounding the element
+- No supporting text, decoration, or secondary elements
+- Pure focus on one element
+
+## Best For
+
+- Brand identity presentations
+- Single-word or single-concept statements
+- Teaser or reveal content
+- Luxury or premium brand communications
+
+## Visual Elements
+
+- Single centered element (logo, word, or icon)
+- Clean, uncluttered background
+- Optional subtle texture or gradient
+- No borders or frames
+
+## Text Placement
+
+- Single word or very short phrase only
+- Centered, with maximum surrounding space
+- No supporting text
+
+## Recommended Pairings
+
+- `luxury-minimal`: Premium brand minimalism
+- `luxury-minimal`: Gallery-like single element display
+- `knolling`: Clean single-object presentation

sn-infographic/references/layouts/venn-diagram.md

@@ -0,0 +1,41 @@
+# venn-diagram
+
+Overlapping circles showing relationships, commonalities, and differences.
+
+## Structure
+
+- 2-3 overlapping circles
+- Each circle is a category/concept
+- Overlaps show shared elements
+- Center shows common to all
+- Unique areas for exclusives
+
+## Best For
+
+- Concept relationships
+- Skill overlaps
+- Market segments
+- Comparative analysis
+- Finding common ground
+
+## Visual Elements
+
+- Translucent circle fills
+- Clear overlap regions
+- Distinct colors per circle
+- Icons in regions
+- Boundary labels
+
+## Text Placement
+
+- Title at top
+- Circle labels outside or on edge
+- Items in appropriate regions
+- Overlap region labels
+- Legend if needed
+
+## Recommended Pairings
+
+- `crayon-hand-drawn`: Friendly concept overlaps
+- `corporate-memphis`: Business segment analysis
+- `high-contrast-ad`: High-contrast comparisons

sn-infographic/references/layouts/visual-first.md

@@ -0,0 +1,36 @@
+# visual-first
+
+A large main image with very short explanatory text.
+
+## Structure
+
+- Image or illustration occupies 70-85% of the canvas
+- Text is minimal: a headline and 1-3 short labels
+- Visual carries the primary message
+- Text provides only essential context
+
+## Best For
+
+- Emotional or atmospheric content
+- Single-concept visual metaphors
+- Social media posts where image stops the scroll
+- Minimalist infographic posters
+
+## Visual Elements
+
+- Dominant, high-quality central image
+- Minimal text overlay or caption
+- Strong visual metaphor that communicates without words
+- Clean negative space for any text
+
+## Text Placement
+
+- Short headline at top or bottom
+- 1-3 brief labels if needed
+- No body text or long descriptions
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Evocative painted scenes
+- `cartoon-flat`: Powerful single-image statements
+- `knolling`: Clean product-first layouts

sn-infographic/references/layouts/visual-tension.md

@@ -0,0 +1,36 @@
+# visual-tension
+
+Stretching, deformation, or contrast creates a pulled visual tension.
+
+## Structure
+
+- Elements appear stretched, compressed, or in conflict
+- Opposing forces implied through shape distortion or contrast
+- Visual instability that draws the eye
+- Tension resolved or unresolved depending on message
+
+## Best For
+
+- Conflict or challenge narratives
+- Before/during transformation content
+- Emotional or psychological concepts
+- Abstract concept visualization
+
+## Visual Elements
+
+- Distorted or stretched shapes
+- Opposing color or size contrasts
+- Implied force vectors (arrows, lines pulling in opposite directions)
+- Optional motion blur or deformation effects
+
+## Text Placement
+
+- Title in a stable zone outside the tension area
+- Labels near the tension points
+- Resolution text at the bottom
+
+## Recommended Pairings
+
+- `high-contrast-ad`: High-contrast tension compositions
+- `neon-futurism`: Glitch-style distortion
+- `glitch-art`: Torn and fragmented tension

sn-infographic/references/layouts/wave-path.md

@@ -0,0 +1,36 @@
+# wave-path
+
+A gentle wave path, horizontal or vertical, connects content nodes.
+
+## Structure
+
+- Content nodes arranged along a sinusoidal wave
+- Gentler and more rhythmic than an S-curve
+- Can be horizontal (left-to-right) or vertical (top-to-bottom)
+- Nodes alternate above and below the wave centerline
+
+## Best For
+
+- Rhythmic or cyclical processes
+- Content with a natural ebb and flow
+- Timeline alternatives with visual interest
+- Processes with recurring patterns
+
+## Visual Elements
+
+- Smooth wave line connecting nodes
+- Nodes at wave peaks and troughs
+- Optional fill between wave and baseline
+- Consistent node styling
+
+## Text Placement
+
+- Labels at each node
+- Title at the start of the wave
+- Conclusion at the end
+
+## Recommended Pairings
+
+- `crayon-hand-drawn`: Organic hand-drawn waves
+- `storybook-watercolor`: Flowing illustrated paths
+- `corporate-memphis`: Smooth business process waves

sn-infographic/references/layouts/winding-roadmap.md

@@ -0,0 +1,41 @@
+# winding-roadmap
+
+Curved path showing journey with milestones and checkpoints.
+
+## Structure
+
+- S-curve or winding path
+- Milestones along the path
+- Start and destination points
+- Side elements (obstacles, helpers)
+- Progress indicators
+
+## Best For
+
+- Project roadmaps
+- Career paths
+- Customer journeys
+- Learning paths
+- Strategy timelines
+
+## Visual Elements
+
+- Curving road or river
+- Milestone markers/flags
+- Scene elements along path
+- Vehicle/character on journey
+- Destination landmark
+
+## Text Placement
+
+- Title at top
+- Milestone labels at each point
+- Path section names
+- Destination description
+- Optional timeline indicators
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Whimsical journeys
+- `crayon-hand-drawn`: Friendly roadmaps
+- `origami`: Technical project paths

sn-infographic/references/layouts/z-pattern.md

@@ -0,0 +1,38 @@
+# z-pattern
+
+Eye movement follows a Z path: top-left → top-right → bottom-left → bottom-right.
+
+## Structure
+
+- Key elements placed at the four corners of the Z path
+- Top horizontal: title and primary hook
+- Diagonal: supporting visual or transition element
+- Bottom horizontal: CTA or conclusion
+- Leverages natural Western reading eye movement
+
+## Best For
+
+- Landing page style infographics
+- Marketing and promotional content
+- Content with a clear call to action
+- Two-column layouts with diagonal flow
+
+## Visual Elements
+
+- Strong anchor elements at Z corners
+- Diagonal visual element (image, arrow, or line) connecting mid-points
+- Clear visual hierarchy along the Z path
+- Negative space guiding the eye
+
+## Text Placement
+
+- Headline at top-left
+- Supporting info at top-right
+- Key visual or transition at center diagonal
+- CTA or summary at bottom-right
+
+## Recommended Pairings
+
+- `corporate-memphis`: Marketing layouts
+- `high-contrast-ad`: High-impact promotional designs
+- `ui-wireframe`: Landing page wireframes

sn-infographic/references/prompt-writing-rules.md

@@ -0,0 +1,71 @@
+# Prompt Writing Rules
+
+Rules for generating high-quality image generation prompts. Apply these when writing the final prompt in Step 5.
+
+## 1. Visual Precision
+
+Always describe:
+
+- **Background texture** (e.g., off-white aged paper, black halftone shadows, light gray grid texture)
+- **Font style** (e.g., handwritten, serif print, colorful block-lettering, monospace technical)
+
+Omitting these causes the image model to make arbitrary choices that undermine the intended aesthetic.
+
+## 2. Color Avoidance
+
+Never use hexadecimal color codes (`#RRGGBB` format). Use specific color names instead.
+
+| Instead of | Use |
+|------------|-----|
+| `#FF6B6B` | coral red |
+| `#2D3748` | deep slate gray |
+| `#F6E05E` | warm yellow |
+| `#68D391` | sage green |
+
+## 3. Text Citation
+
+All copy intended to appear as text in the image must be enclosed in `"double quotes"`.
+
+- Correct: a bold label reading `"Step 1: Define the Problem"`
+- Incorrect: a bold label reading Step 1: Define the Problem
+
+This lets the image model distinguish between descriptive instructions and literal text to render.
+
+## 4. Arrow Minimalism
+
+Minimize the use of arrows. Prefer spatial proximity to imply flow and connection.
+
+When arrows are necessary:
+
+- Specify exact **start point** and **end point** (e.g., "an arrow from the 'Input' box pointing to the 'Process' box")
+- Never use vague orientations like "a horizontal arrow" or "a vertical arrow"
+
+## 5. Semantic Correspondence
+
+Every icon, illustration, or decorative element must correspond semantically to the adjacent text content. Avoid generic decorative elements that could apply to any topic.
+
+## 6. Punctuation Hygiene
+
+Never use quotation marks when describing:
+
+- Style (e.g., write: flat design aesthetic — not: "flat design" aesthetic)
+- Layout structure (e.g., write: three-column grid — not: "three-column grid")
+- Colors or textures
+- Moods or feelings
+
+Quotation marks are reserved exclusively for **Rule 3: Text Citation**.
+
+## 7. Step Granularity
+
+If the content contains stages, steps, or a sequence:
+
+- Detail **every single step** individually
+- Never merge or compress multiple steps into one
+- Each step gets its own visual element and label
+
+## 8. Data & Encoding
+
+All hard data from the source must be:
+
+- Preserved **verbatim** — no paraphrasing of numbers, dates, or proper nouns
+- Presented in a visually distinct format: bold text, labeled callout boxes, sticky notes, or data badges

sn-infographic/references/prompts-critic-system.md

@@ -0,0 +1,85 @@
+# Role
+
+You are an expert judge in infographic and data visualization design. Your task is to evaluate whether a **Model-generated Diagram** passes a strict visual quality check across structural completeness, layout, text quality, element placement, connector design, and color/rendering fidelity.
+
+# Input
+
+1. **Model-generated Diagram (Model)**: [image]
+
+# Veto Rules (The "Red Lines")
+
+A diagram fails the quality check immediately if it commits **any** of the following errors. Each rule targets a distinct failure mode — they do not overlap.
+
+---
+
+## A. Structural Completeness
+
+**Rule 1 — Missing Required Structural Graphics**
+Fails if diagram types requiring containers (e.g., bubbles for word clouds, boxes for nodes) only present floating text without scaffolding.
+
+## B. Layout & Spatial Distribution
+
+**Rule 2 — Imbalanced Element Distribution**
+Fails if visual weight is heavily skewed (e.g., all labels on one side), causing directional imbalance.
+
+**Rule 3 — Inefficient Whitespace Usage**
+Fails if content is cramped with disproportionately large margins, or if elements are too sparsely scattered, wasting canvas area.
+
+## C. Text & Label Quality
+
+**Rule 4 — Visual Noise & Extraneous Non-Content Elements**
+Fails if image includes embedded figure titles, full captions, meaningless duplicate labels, or watermarks. (Section headers/subfigure labels are okay).
+
+**Rule 5 — Illegible Text**
+Fails if characters cannot be read reliably. Includes:
+
+- Text requiring extreme zooming.
+- Blurred, smeared, or low-definition characters.
+- Missing, broken, or fused strokes making characters ambiguous.
+- Malformed glyphs, wrong characters, or pseudo-text (OCR-like corruption).
+- *Requirement*: `detail` must include the text's position (as % of image width/height).
+
+## D. Element Placement & Identity
+
+**Rule 6 — Reused Identical Graphics for Distinct Entities**
+Fails if the exact same icon/illustration represents semantically different entities, reducing distinctiveness.
+
+## E. Connector & Line Design
+
+**Rule 7 — Chaotic Connector Routing**
+Fails if lines have excessive unnecessary bends, inconsistent angles, or untraceable crossings.
+
+**Rule 8 — Ambiguous Leader Line Branching**
+Fails if it is genuinely unclear which line connects to which label due to proximity or fanning.
+
+## F. Color & Visual Fidelity
+
+**Rule 9 — Poor Data Visualization Structure** *(chart-specific)*
+Fails data charts (bar/pie/line) if axes are missing/obscured or data series/markers are indistinguishable. Skip for conceptual diagrams.
+
+# revised_description Standards (for violations)
+
+Each violation's `revised_description` is a suggested fix for the image editor. It must follow the same standards as editing instructions:
+
+- **Language**: Write in **English** only.
+- **Imperative verb**: Start with a strong imperative (e.g., "Change", "Replace", "Remove", "Add", "Create", "Redesign", "Increase", "Move").
+- **Clarity**: Avoid ambiguous pronouns; refer to elements explicitly (e.g., "the title at top", "the bar labeled X").
+- **Text edits**: Wrap exact target or replacement text in quotes (e.g., Replace "Old Label" with "New Label").
+- **Final state**: For layout or multi-step fixes, describe the desired end result, not the process (e.g., "Redesign the right column so that A, B, C fit vertically with equal spacing" rather than "First move A up, then add space, then place B").
+- **Canvas**: Do not suggest changing canvas size (crop, expand, or resize); the editor cannot do that.
+
+# Output Format (Strict JSON)
+
+{
+    "reasoning": "...",
+    "result": "PASS" | "FAIL",
+    "violations": [
+        {
+            "rule_id": "<number>",
+            "rule_name": "<name>",
+            "detail": "<offending element description>",
+            "revised_description": "<suggested fix per the standards above, or 'No changes needed.'>"
+        }
+    ]
+}
+*If PASS, violations must be []. If FAIL, list all violated rules separately.*

sn-infographic/references/prompts-expand-system.md

@@ -0,0 +1,42 @@
+# Role
+
+You are a world-renowned "Senior Visual Information Architect" and "AI Image Prompt Engineering Expert." You specialize in transforming fragmented or chaotic [Raw Information] into highly structured, professional Infographic Generation Prompts. Your work is defined by rigorous visual logic, precise spatial organization, and an density of useful information.
+
+# Task
+
+Reconstruct the user’s [Raw Information] into a comprehensive visual synthesis prompt (approx. 400-600 words). Your objective is to guide large image models (e.g., Gemini, Midjourney, DALL-E 3) to render an information-dense infographic featuring advanced typography, a vivid visual style, and perfect structural clarity based solely on your textual description.
+
+# Step-by-Step Methodology
+
+1. **Content Expansion & Textualization**: Analyze the [Raw Information] to extract its core intent.
+    - Detailing: Extract every entity, number, color, and phrase from the [Raw Information]. Do not summarize.
+    - Categorization: Define sub-categories with distinct visual markers.
+    - Density Enrichment: If the input is brief, supplement it with professional annotations, sub-headings, body text and "Pro-tips" or "Key Insights" related to the topic to maximize the "information load".
+2. **Adaptive Structural Analysis**:
+    - User-Defined Priority: First, check if the user has provided specific layout instructions (e.g., "three-column grid," "horizontal timeline"). If present, strictly follow these instructions.
+    - Logic-Driven Inference: If no layout is specified, analyze the [Raw Information] for its underlying logic (chronological, hierarchical, process-oriented, or comparative) and design a spatial architecture that best serves that logic.
+3. **Style Tonal Setting**: If no specific style is provided, assign a unique aesthetic that complements the content (e.g., French hand-drawn collage, modern minimalist matrix, or industrial technical blueprint).
+4. **Data Preservation & Encoding**: Ensure all numbers, dates, and proper nouns are 100% preserved. Convert these into explicit visual labels, charts, or callouts within the prompt.
+
+# Strict Constraints
+
+1. **Strict Language Parity**: Maintain absolute language consistency. If the [Raw Information] is in Chinese, the entire output must be in Chinese; if in English, the output must be in English. No code-switching.
+2. **Fidelity to [Raw Information]**: You are prohibited from omitting any proper nouns, dates, colors, or specific values provided in the input.
+3. **The "Zero Nonsense" Rule**: STRICTLY FORBIDDEN to include introductory, summary, or meta-commentary text (e.g., "Here is the refined prompt..."). Do not explain design choices or justify element omissions (e.g., do not mention "implied flow"). Start the response immediately with the visual description.
+4. **Visual Precision:
+    - Textures: Mandatorily describe background textures (e.g., off-white aged paper, light gray grid, or black halftone shadows).
+    - Typography: Explicitly specify font styles for different hierarchies (e.g., bold serif for titles, condensed mono-space for technical data).
+5. **Text Rendering Protocol**:
+    - Quotes for Content: Every piece of text intended to appear in the image MUST be enclosed in quotes.
+    - No Quotes for Style: NEVER use quotation marks for descriptions of [Style Description], [Layout Structure], colors or any non-textual elements.
+6. **Relational Arrow Logic**: Minimize the use of arrows. Rely on spatial proximity or alignment to imply connectivity. If arrows are requested, avoid generic orientations like "horizontal." Instead, specify their precise starting point and target destination.
+7. **Semantic Icon Correspondence (CRITICAL)**: You must specifically describe the visual content of every icon to ensure it matches the quoted text. (e.g., "Next to the text 'Apple' is a detailed illustration of a red delicious apple with a green leaf.") Do not use generic terms like "an icon" or "a graphic" without specifying what it is.
+8. **No Hexadecimal Codes**: Never use codes like #xxxx. Use descriptive color names (e.g., sage green, deep navy blue, terracotta).
+
+# Output Format (Reference Structure)
+
+The title of this infographic is "[Subject Name]". and adopts a [Style Description]. The overall layout is [Layout Structure], with a background of [Background Details].
+Describe the professional Infographic Generation Prompts using natural language, including [Description of elements or icons in the image], [Position], and embed the text information within it, enclosed in quotes.
+
+---
+Please receive the user's [Raw Information] and directly output the restructured professional image generation prompt:

sn-infographic/references/runtime-parameters.md

@@ -0,0 +1,75 @@
+# Runtime Parameter Mapping
+
+This file defines how `sn-infographic` infers runtime arguments for `sn-image-base` tools.
+
+## Inputs
+
+Read from:
+
+- the original user request
+- any explicit follow-up confirmation from the user about size or ratio
+
+## Output Arguments
+
+Map into:
+
+- `--image-size`
+- `--aspect-ratio`
+
+## Image Size
+
+**Default: `2k`** — always used unless the user explicitly says otherwise. Never ask the user about this.
+
+Rules:
+
+- **Never ask the user about `image_size`.** Default silently to `2k`.
+- If the user explicitly asks for lower cost, faster draft, quick concept, or small output, use `--image-size 1k`.
+- If the user explicitly asks for higher detail, print-quality, poster-quality, fine text, or large output, use `--image-size 2k`.
+- Otherwise use `--image-size 2k` (default).
+
+## Aspect Ratio
+
+Supported values:
+
+- `2:3`
+- `3:2`
+- `3:4`
+- `4:3`
+- `4:5`
+- `5:4`
+- `1:1`
+- `16:9`
+- `9:16`
+- `21:9`
+- `9:21`
+
+Use the first matching rule:
+
+1. If the user explicitly gives a supported ratio, use it directly.
+2. If the user confirms a ratio preference in a follow-up turn, use that confirmed value.
+3. If the user gives only orientation:
+   - `Portrait` or `竖屏` -> prefer `9:16`; use `4:5`, `3:4`, or `2:3` when the prompt implies a print poster, editorial layout, or card-style portrait composition
+   - `Landscape` or `横屏` -> prefer `16:9`; use `4:3`, `3:2`, `5:4`, or `21:9` when the prompt implies classic slides, photography framing, near-square cards, or cinematic banners
+   - `Square` or `方形` -> `--aspect-ratio 1:1`
+4. If neither ratio nor orientation is explicit, infer from the scene:
+   - phone wallpaper, story card, vertical reel cover, ultra-tall mobile infographic -> `9:16` or `9:21`
+   - print poster, book cover, one-page portrait infographic -> `2:3`
+   - editorial illustration, portrait card, magazine-style page -> `3:4`
+   - social feed poster, product card, portrait marketing creative -> `4:5`
+   - avatar, icon, logo mark, square cover -> `1:1`
+   - presentation slide, dashboard, classroom chart, classic screen layout -> `4:3`
+   - landscape photo, postcard, brochure hero, medium-width banner -> `3:2`
+   - near-square desktop card, comparison board, compact infographic panel -> `5:4`
+   - banner, keynote cover, widescreen infographic, landing hero -> `16:9`
+   - cinematic hero, panoramic banner, ultra-wide header -> `21:9`
+   - otherwise -> `16:9`
+
+## Notes
+
+- The skill should pass `expanded_prompt` (from `prompts-expand`) as `--prompt`, not the raw user request.
+- `image_size` defaults to `2k` — the Worker Agent must NOT ask the user about it.
+- `aspect_ratio` is inferred from the **original `user_prompt`** (before expansion), not from `expanded_prompt`.
+- Prefer inference over interruption when there is one clearly reasonable choice.
+- Ask the user only when multiple aspect ratios are genuinely plausible and the choice would materially change composition or layout.
+- When asking the user, ask for `aspect_ratio` directly instead of a vague "horizontal or vertical" question whenever possible.
+- Use `--save-path` to write the output directly to the task's temp directory (`/tmp/openclaw/sn-infographic/<task_id>/round_<N>.png`), avoiding a separate move step.

sn-infographic/references/structured-content-template.md

@@ -0,0 +1,245 @@
+# Structured Content Template
+
+Template for generating structured infographic content that informs the visual designer.
+
+## Purpose
+
+This document bridges content analysis and visual design:
+- Transforms source material into designer-ready format
+- Organizes learning objectives into visual sections
+- Preserves all source data verbatim
+- Separates content from design instructions
+
+## Instructional Design Process
+
+### Phase 1: High-Level Outline
+
+1. **Title**: Capture the essence in a compelling headline
+2. **Overview**: Brief description (1-2 sentences)
+3. **Learning Objectives**: List what the viewer will understand
+
+### Phase 2: Section Development
+
+For each learning objective:
+
+1. **Key Concept**: One-sentence summary of the section
+2. **Content**: Points extracted verbatim from source
+3. **Visual Element**: What should be shown visually
+4. **Text Labels**: Exact text for headlines, subheads, labels
+
+### Phase 3: Data Integrity Check
+
+Verify all source data is:
+- Copied exactly (no paraphrasing)
+- Attributed correctly (for quotes)
+- Formatted consistently
+
+## Critical Rules
+
+| Rule | Requirement | Example |
+|------|-------------|---------|
+| **Output format** | Markdown only | Use proper headers, lists, code blocks |
+| **Tone** | Expert trainer | Knowledgeable, clear, encouraging |
+| **No new information** | Only source content | Don't add examples not in source |
+| **Verbatim data** | Exact copies | "73% increase" not "significant increase" |
+| **Text as labels** | All copy intended to appear as text in the image must be structured as explicit text labels under each section's **Text Labels** field | Headlines, subheads, data callouts — all must be listed verbatim, not embedded in prose |
+
+## Structured Content Format
+
+```markdown
+# [Infographic Title]
+
+## Overview
+[Brief description of what this infographic conveys - 1-2 sentences]
+
+## Learning Objectives
+The viewer will understand:
+1. [Primary objective]
+2. [Secondary objective]
+3. [Tertiary objective if applicable]
+
+---
+
+## Section 1: [Section Title]
+
+**Key Concept**: [One-sentence summary of this section]
+
+**Content**:
+- [Point 1 - verbatim from source]
+- [Point 2 - verbatim from source]
+- [Point 3 - verbatim from source]
+
+**Visual Element**: [Description of what to show visually]
+- Type: [icon/chart/illustration/diagram/photo]
+- Subject: [what it depicts]
+- Treatment: [how it should be presented]
+
+**Text Labels**:
+- Headline: "[Exact text for headline]"
+- Subhead: "[Exact text for subhead]"
+- Labels: "[Label 1]", "[Label 2]", "[Label 3]"
+
+---
+
+## Section 2: [Section Title]
+
+**Key Concept**: [One-sentence summary]
+
+**Content**:
+- [Point 1]
+- [Point 2]
+
+**Visual Element**: [Description]
+
+**Text Labels**:
+- Headline: "[text]"
+- Labels: "[Label 1]", "[Label 2]"
+
+---
+
+[Continue for each section...]
+
+---
+
+## Data Points (Verbatim)
+
+All statistics, numbers, and quotes exactly as they appear in source:
+
+### Statistics
+- "[Exact statistic 1]"
+- "[Exact statistic 2]"
+- "[Exact statistic 3]"
+
+### Quotes
+- "[Exact quote]" — [Attribution]
+
+### Key Terms
+- **[Term 1]**: [Definition from source]
+- **[Term 2]**: [Definition from source]
+
+---
+
+## Design Instructions
+
+Extracted from user's steering prompt:
+
+### Style Preferences
+- [Any color preferences]
+- [Any mood/aesthetic preferences]
+- [Any artistic style preferences]
+
+### Layout Preferences
+- [Any structure preferences]
+- [Any organization preferences]
+
+### Other Requirements
+- [Any other visual requirements from user]
+- [Target platform if specified]
+- [Brand guidelines if any]
+```
+
+## Section Types by Content
+
+### For Process/Steps
+
+```markdown
+## Section N: Step N - [Step Title]
+
+**Key Concept**: [What this step accomplishes]
+
+**Content**:
+- Action: [What to do]
+- Details: [How to do it]
+- Note: [Important consideration]
+
+**Visual Element**:
+- Type: numbered step icon
+- Subject: [visual representing the action]
+- Arrow: leads to next step
+
+**Text Labels**:
+- Headline: "Step N: [Title]"
+- Action: "[Imperative verb + object]"
+```
+
+### For Comparison
+
+```markdown
+## Section N: [Item A] vs [Item B]
+
+**Key Concept**: [What distinguishes them]
+
+**Content**:
+| Aspect | [Item A] | [Item B] |
+|--------|----------|----------|
+| [Factor 1] | [Value] | [Value] |
+| [Factor 2] | [Value] | [Value] |
+
+**Visual Element**:
+- Type: split comparison
+- Left: [Item A representation]
+- Right: [Item B representation]
+
+**Text Labels**:
+- Headline: "[Item A] vs [Item B]"
+- Left label: "[Item A name]"
+- Right label: "[Item B name]"
+```
+
+### For Hierarchy
+
+```markdown
+## Section N: [Level Name]
+
+**Key Concept**: [What this level represents]
+
+**Content**:
+- Position: [Top/Middle/Bottom]
+- Priority: [Importance level]
+- Contains: [Elements at this level]
+
+**Visual Element**:
+- Type: layer/tier
+- Size: [relative to other levels]
+- Position: [where in hierarchy]
+
+**Text Labels**:
+- Level title: "[Name]"
+- Description: "[Brief description]"
+```
+
+### For Data/Statistics
+
+```markdown
+## Section N: [Metric Name]
+
+**Key Concept**: [What this data shows]
+
+**Content**:
+- Value: [Exact number/percentage]
+- Context: [What it means]
+- Comparison: [Benchmark if any]
+
+**Visual Element**:
+- Type: [chart/number highlight/gauge]
+- Emphasis: [how to draw attention]
+
+**Text Labels**:
+- Main number: "[Exact value]"
+- Label: "[Metric name]"
+- Context: "[Brief context]"
+```
+
+## Quality Checklist
+
+Before finalizing structured content:
+
+- [ ] Title captures the main message
+- [ ] Learning objectives are clear and measurable
+- [ ] Each section maps to an objective
+- [ ] All content is verbatim from source
+- [ ] Visual elements are clearly described
+- [ ] Text labels are specified exactly
+- [ ] Data points are collected and verified
+- [ ] Design instructions are separated
+- [ ] No new information has been added

sn-infographic/references/styles/aged-academia.md

@@ -0,0 +1,36 @@
+# aged-academia
+
+Historical scientific illustration with aged paper aesthetic.
+
+## Color Palette
+
+- Primary: Sepia brown (#704214), aged ink, muted earth tones
+- Background: Parchment (#F4E4BC), yellowed paper texture
+- Accents: Faded red annotations, iron gall ink spots
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Notebook** | Personal sketches, inventions | Cursive notes, margin annotations |
+| **Specimen** | Scientific classification | Numbered diagrams, Latin labels |
+
+## Visual Elements
+
+- Aged paper texture overlay
+- Detailed cross-hatching and line work
+- Scientific illustration precision
+- Study notes and annotations
+- Specimen plate or sketch aesthetic
+- Numbered diagram elements
+
+## Typography
+
+- Handwritten cursive or serif fonts
+- Scientific annotations
+- Small caps for labels
+- Italics for scientific names
+
+## Best For
+
+Scientific education, biology topics, historical explanations, inventions, nature documentation

sn-infographic/references/styles/art-deco.md

@@ -0,0 +1,30 @@
+# art-deco
+
+1920s geometric decorative style with luxurious, glamorous feel.
+
+## Color Palette
+
+- Primary: Gold (#D4AF37), black, rich jewel tones
+- Background: Black, deep navy, cream
+- Accents: Metallic gold, silver, chrome
+
+## Visual Elements
+
+- Geometric sunburst patterns
+- Fan and chevron shapes
+- Symmetrical compositions
+- Stepped ziggurat forms
+- Elegant decorative borders
+- Stylized floral motifs
+- Luxurious metallic accents
+
+## Typography
+
+- Bold geometric sans-serif
+- Elegant serif headlines
+- All-caps with wide letter spacing
+- Art deco display fonts (Broadway, Peignoir)
+
+## Best For
+
+Luxury brands, vintage glamour, 1920s themes, premium products, elegant events, Gatsby-style presentations

sn-infographic/references/styles/art-nouveau.md

@@ -0,0 +1,30 @@
+# art-nouveau
+
+Natural curves and organic forms. Late 19th-century decorative style inspired by plants, flowers, and flowing lines.
+
+## Color Palette
+
+- Primary: Sage green, gold, deep teal, burgundy
+- Background: Warm ivory (#F5EDD6) or deep jewel tone
+- Accents: Gilded gold (#C9A84C), soft lavender, rose
+
+## Visual Elements
+
+- Sinuous, flowing curves inspired by plant forms
+- Stylized flowers, vines, and botanical motifs
+- Decorative borders that integrate with content
+- Whiplash curves and asymmetric compositions
+- Stained-glass color blocking
+- Female figures with flowing hair and robes (optional)
+- Ornate frames and cartouches
+
+## Typography
+
+- Flowing, organic letterforms
+- Decorative initials and drop caps
+- Curved text following organic paths
+- Art Nouveau display fonts (Alfie, Jugendstil)
+
+## Best For
+
+Nature and botanical content, beauty and wellness brands, cultural heritage topics, luxury lifestyle, floral and garden themes

sn-infographic/references/styles/baroque.md

@@ -0,0 +1,28 @@
+# baroque
+
+17th-century Baroque grandeur: dramatic chiaroscuro, ornate decoration, and theatrical dynamism.
+
+## Color Palette
+
+- Primary: Deep golds, rich burgundy, royal blue
+- Background: Dark brown, near-black, or deep shadow
+- Accents: Bright gold highlights, warm candlelight tones
+
+## Visual Elements
+
+- Dramatic light-dark contrast (chiaroscuro)
+- Ornate decorative borders and flourishes
+- Diagonal dynamic compositions
+- Drapery, columns, and architectural elements
+- Cherubs, laurels, and classical motifs
+- Rich texture and material detail
+
+## Typography
+
+- Ornate serif with swash alternates
+- Engraved or embossed letterforms
+- Decorative drop caps and flourishes
+
+## Best For
+
+Classical music and arts content, historical topics, luxury and heritage brands, ceremonial or award content, cultural institution materials, opulent event promotions