| layout_id |
kind |
summary |
canvas_format |
page_count |
page_types |
| psychology_attachment |
layout |
Psychotherapy training, academic lectures, counseling case analysis, professional sharing. |
ppt169 |
5 |
| cover |
| toc |
| chapter |
| content |
| ending |
|
Psychology Healing Template (Psychology Attachment Style) - Design Specification
Suitable for psychology, psychotherapy, counseling training, and academic sharing in professional settings.
I. Template Overview
| Property |
Description |
| Template Name |
psychology_attachment (Psychology Healing Template) |
| Use Cases |
Psychotherapy training, academic lectures, counseling case analysis, professional sharing |
| Design Tone |
Professional, warm, healing, trustworthy |
| Theme Mode |
Light theme (cloud white background + blue-green gradient accent + multi-color semantic colors) |
Core Visual Metaphor
The design adopts "Secure Base" as the core visual metaphor:
- Structural Stability: Page layout resembles a secure attachment relationship with clear boundaries and predictable patterns
- Clear Hierarchy: Information levels mirror the organization of the attachment system — from biological instinct to higher-order reflection
- Warm Professionalism: Colors convey both professional authority and healing warmth
II. Canvas Specification
| Property |
Value |
| Format |
Standard 16:9 |
| Dimensions |
1280 × 720 px |
| viewBox |
0 0 1280 720 |
| Page Margins |
Left/right 40px, top 60px, bottom 40px |
| Content Safe Area |
x: 40-1240, y: 60-680 |
Page Zones
| Zone |
Y-Range |
Height |
Usage |
| Top Title Area |
60-120 |
60px |
Page title, chapter labels |
| Main Content |
130-640 |
510px |
Core content display |
| Bottom Info Area |
650-680 |
30px |
Page number, chapter nav |
III. Page Structure
General Layout
| Area |
Position/Height |
Description |
| Left Accent |
x=0, w=8px |
Dominant color vertical bar (content pages) |
| Top |
y=60-120 |
Page title + English subtitle |
| Divider |
y=125-130 |
Decorative divider line |
| Content Area |
y=130-640 |
Main content area (510px height) |
| Footer |
y=650-700 |
Page number, chapter info |
Decorative Design
- Left Accent Bar: Dominant color (
#2E5C8E), width 8px, spanning the full page height
- Divider Line: Light gray (
#E5E7EB), width 1-2px
- Circle Decorations: Low-opacity circles for chapter page/cover backgrounds
IV. Page Types
1. Cover Page (01_cover.svg)
- Background: Blue-green gradient (
#1E3A5F → #2E5C8E → #3D8B7A)
- Decoration: Optional background image (opacity=0.25)
- Title Area: Centered, main title 52px + subtitle 28px
- English Title: Light gray, 24px
- Decorative Line: Warm orange thin line, 200px wide
- Bottom: Quote card (semi-transparent background + healing green left border)
- Tags: Keyword tags (semi-transparent capsules)
- Page Number: Bottom-right, 14px
2. Table of Contents (02_toc.svg)
- Background: Cloud white (
#F8FAFC)
- Left Accent: Dominant color 8px vertical bar
- Title: "Contents Overview"
- Left Side: Five-chapter list (colored number blocks + title + description)
- Chapter 1: Dominant blue
#2E5C8E
- Chapter 2: Healing green
#3D8B7A
- Chapter 3: Warm orange
#E07843
- Chapter 4: Cool gray-blue
#64748B
- Chapter 5: Trauma red
#B54545
- Right Side: Learning objectives card
- Center: Dashed divider
3. Chapter Page (02_chapter.svg)
- Background: Blue-green gradient
- Decoration: Multiple low-opacity concentric circles, diagonal line accents
- Large Number: 120px, semi-transparent white, centered
- Chapter Label: Capsule shape "CHAPTER X"
- Title: 48px white bold
- Subtitle: 24px light gray English
- Decorative Line: Warm orange thin line, 200px
- Quote: Semi-transparent quote card
- Keywords: Bottom tag group
- Page Number: Bottom-right
4. Content Page (03_content.svg)
- Background: Cloud white
- Left Accent: Dominant blue 8px vertical bar
- Title Area: Main title 28px + English subtitle 16px
- Divider: Decorative line below title
- Content Area: Flexible layout (three-column / left-right split / single column)
- Card Styles:
- White background + light gray border
- Border radius 12-16px
- Colored top bar / colored left border
- Bottom Tip: Light gray background tip bar (optional)
- Page Number: Bottom-right
5. Ending Page (04_ending.svg)
- Background: Blue-green gradient
- Decoration: Network connection graph (dots + lines)
- Title: Main title 56px + subtitle 28px
- English: Light gray English title
- Decorative Line: Warm orange thin line, 300px
- Info Area: Semi-transparent info card
- Bottom: Copyright information
V. SVG Page Roster
| File |
Role |
Description |
01_cover.svg |
cover |
Title slide; project name, presenter, date |
02_chapter.svg |
chapter |
Chapter divider page (large number + chapter title) |
02_toc.svg |
toc |
Table of contents listing major sections |
03_content.svg |
content |
Main content page; body of the deck |
04_ending.svg |
ending |
Closing/thank-you page |
VI. Layout Patterns
7.1 Three-Column Side-by-Side (Comparison/Findings)
[Card 1: 360px] [Gap: 40px] [Card 2: 360px] [Gap: 40px] [Card 3: 360px]
- Each card: Colored top bar + icon + number + title + content + bottom tag
- Suitable for: Three findings, three-type comparisons
7.2 Left-Right Split
[Left Column: 560px] [Gap: 60px] [Right Column: 580px]
- Left side: Concepts/theory
- Right side: Application/practice
- Suitable for: Concept explanations, therapeutic relationships
7.3 Vertical Stack (Hierarchical Structure)
┌─────────────────────────────────┐
│ Top Layer: Metacognition │
├─────────────────────────────────┤
│ Representation Layer │
├─────────────────────────────────┤
│ Affective Layer │
├─────────────────────────────────┤
│ Somatic Layer │
└─────────────────────────────────┘
- Suitable for: Self-development hierarchy, theoretical frameworks
7.4 Attachment Type Quadrant
| Secure (Green) | Avoidant (Gray-Blue) |
| Anxious-Ambivalent (Orange) | Disorganized (Red) |
- Each card uses the corresponding attachment type color scheme
VII. Visual Element Specifications
8.1 Card Styles
<!-- Standard info card -->
<rect rx="12" fill="#FFFFFF" stroke="#E5E7EB" stroke-width="1"/>
<!-- Emphasis card (with left border) -->
<rect rx="12" fill="#FFFFFF"/>
<rect x="0" width="4" fill="#2E5C8E" rx="2"/>
<!-- Colored top card -->
<rect rx="16" fill="#FFFFFF" stroke="#E5E7EB" stroke-width="1"/>
<rect rx="16" width="100%" height="80" fill="#2E5C8E"/> <!-- Top color block -->
8.2 Number Blocks
<path fill="#2E5C8E" d="M8,0 H42 A8,8 0 0 1 50,8 V42 A8,8 0 0 1 42,50 H8 A8,8 0 0 1 0,42 V8 A8,8 0 0 1 8,0 Z"/>
<text x="25" y="33" font-size="20" font-weight="bold" fill="#FFFFFF" text-anchor="middle">1</text>
8.3 Tag Styles
<!-- Capsule tag -->
<path fill="#E0F2FE" d="M33,0 H107 A13,13 0 0 1 120,13 V13 A13,13 0 0 1 107,26 H33 A13,13 0 0 1 20,13 V13 A13,13 0 0 1 33,0 Z"/>
<text x="70" y="18" font-size="13" fill="#2E5C8E" text-anchor="middle">Tag Text</text>
8.4 Quote Cards
<!-- Semi-transparent quote card -->
<path fill="#FFFFFF" fill-opacity="0.1" d="..."/>
<path fill="#3D8B7A" d="..." rx="2"/> <!-- Left accent bar -->
<text font-style="italic" fill="#E5E7EB">Quote content</text>
8.5 Divider Lines
<line x1="60" y1="Y" x2="1240" y2="Y" stroke="#E5E7EB" stroke-width="2"/>
VIII. Icon Usage
Use tabler-outline as the stylistic icon library for this template. It matches the professional, warm, low-noise psychology tone and avoids heavy filled symbols.
Placeholder Format
<use data-icon="tabler-outline/icon-name" x="X" y="Y" width="32" height="32" fill="COLOR"/>
Common Icon Mappings
| Concept |
Icons |
| Attachment/Bonding |
tabler-outline/heart, tabler-outline/link |
| Secure Base |
tabler-outline/home, tabler-outline/shield-check |
| Mentalization |
tabler-outline/brain, tabler-outline/bulb |
| Affect Regulation |
tabler-outline/activity, tabler-outline/adjustments-horizontal |
| Awareness |
tabler-outline/eye, tabler-outline/compass |
| Trauma |
tabler-outline/alert-triangle, tabler-outline/bolt |
| Repair |
tabler-outline/refresh, tabler-outline/tool |
| Development |
tabler-outline/trending-up, tabler-outline/layers-linked |
IX. SVG Technical Constraints
viewBox Specification
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
Prohibited Features (Blocklist)
| Category |
Prohibited Items |
| Clipping/Masking |
mask is forbidden; clipPath is allowed only on <image> under shared-standards.md §1.2 |
| Style System |
<style>, class (id inside <defs> is allowed) |
| Structure/Nesting |
<foreignObject> |
| Text/Font |
textPath, @font-face |
| Animation/Interaction |
<animate*>, <set>, on* |
marker-start / marker-end are conditionally allowed — see shared-standards.md §1.1 (marker must be in <defs>, orient="auto", shape = triangle / diamond / oval).
PPT Compatibility Rules
| Prohibited |
Correct Alternative |
fill="rgba(255,255,255,0.1)" |
fill="#FFFFFF" fill-opacity="0.1" |
stroke="rgba(0,0,0,0.5)" |
stroke="#000000" stroke-opacity="0.5" |
<g opacity="0.2">...</g> |
Set opacity / fill-opacity on each child element individually |
X. Placeholder Specification
| Placeholder |
Usage |
{{TITLE}} |
Main title |
{{SUBTITLE}} |
Subtitle |
{{TITLE_EN}} |
English title |
{{PAGE_TITLE}} |
Content page title |
{{CONTENT_AREA}} |
Flexible content area |
{{CHAPTER_NUM}} |
Chapter number |
{{CHAPTER_TITLE}} |
Chapter title |
{{CHAPTER_EN}} |
Chapter English title |
{{QUOTE}} |
Quote content |
{{QUOTE_AUTHOR}} |
Quote author |
{{PAGE_NUM}} |
Page number |
{{COVER_BG_IMAGE}} |
Cover background image path |
{{TOC_ITEM_N_TITLE}} |
TOC item title |
{{TOC_ITEM_N_DESC}} |
TOC item description |
{{THANK_YOU}} |
Thank-you message |
{{CONTACT_INFO}} |
Primary contact info |
XI. Usage Notes
Template Usage Steps
- Copy Template: Copy template files to the project
templates/ directory
- Replace Placeholders: Replace
{{}} placeholders with actual content
- Adjust Colors: Fine-tune the color scheme based on the theme
- Generate Content: Use the Executor role to generate specific pages
- Post-process: Run
finalize_svg.py to complete image embedding
Applicable Topics
- Psychotherapy and counseling
- Attachment theory research
- Developmental psychology
- Clinical case analysis
- Academic training lectures
- Psychology course instruction