Promotion Document Designer

Design professional presentation documents for enterprise scenarios such as promotion reviews and team reports. Adhere to corporate design specifications to create concise, clear, and persuasive visual presentations.

Design Principles

1. Layout Standards (16:9 Presentations)

Aspect Ratio: 16:9 standard presentation ratio (4000 x 2250 pixels or equivalent ratio)
Page Margins: Maintain sufficient white space on the left and right sides (approximately 5% of the page width)
Top Title Bar: Set a title area at the top of each page (approximately 6-8% of the page height, keep it concise)
Content Area: 80-85% of the middle section is used for main content display

2. Color System

Primary Colors

Brand Orange:
```
#fc5a1f
```
- Used for key titles, emphasis, and CTA elements
Dark Orange:
```
#fc4807
```
- Used for dark variants and hover states
Light Orange:
```
#fca787
```
,
```
#fcb59a
```
- Used for backgrounds, gradients, and decorations

Secondary Colors

Corporate Blue:
```
#3669cd
```
,
```
#2960ca
```
- Used for data visualization and charts
Neutral Gray:
```
#707070
```
,
```
#585858
```
- Used for body text and explanatory notes
Dark Text:
```
#434343
```
,
```
#414141
```
- Used for titles and important text

Background Colors

Pure White:
```
#ffffff
```
- Main background color (60-70% coverage)
Light Gray:
```
#f8f8f8
```
,
```
#f0f0f0
```
- Used for card backgrounds and section backgrounds
Ultra-light Gray:
```
#fbfbfb
```
,
```
#fcfcfc
```
- Used for subtle separations and visual hierarchy

3. Visual Hierarchy

Information Architecture

Level 1 Title: Brand orange
```
#fc5a1f
```
, large font size, concise and impactful
Level 2 Title: Dark gray
```
#434343
```
, medium font size, explanatory text
Body Content: Neutral gray
```
#707070
```
, standard font size, clear and readable
Supplementary Notes: Light gray, small font size, additional information

White Space Strategy

Breathing Room: Maintain sufficient spacing between elements (at least 3-5% of the page)
Visual Focus: Guide the viewer's eye through white space to highlight core content
Grouping Relationships: Keep related elements close, separate unrelated elements

4. Content Organization

Page Type Templates

Cover Page

┌─────────────────────────────────────┐
│  [Top Decoration - Light Orange Gradient]              │
├─────────────────────────────────────┤
│                                     │
│      Main Title (#fc5a1f, Large Font)        │
│      Subtitle/Author Info (#707070)       │
│                                     │
│      [Optional: Decorative Graphics/Icons]           │
│                                     │
└─────────────────────────────────────┘

Table of Contents/Navigation Page

┌─────────────────────────────────────┐
│  Title (#fc5a1f)                     │
├─────────────────────────────────────┤
│  1  [Module Name]    2  [Module Name]      │
│     Descriptive Text          Descriptive Text       │
│                                     │
│  3  [Module Name]    4  [Module Name]      │
│     Descriptive Text          Descriptive Text       │
└─────────────────────────────────────┘

Content Page (Single Column)

┌─────────────────────────────────────┐
│  Page Title (#fc5a1f)                 │
├─────────────────────────────────────┤
│                                     │
│  ┌───────────────────────────────┐  │
│  │  Content Area (White/Light Gray Background)      │  │
│  │  - Text Content                   │  │
│  │  - Charts                       │  │
│  │  - Data Visualization                 │  │
│  └───────────────────────────────┘  │
│                                     │
└─────────────────────────────────────┘

Content Page (Multi-column)

┌─────────────────────────────────────┐
│  Page Title (#fc5a1f)                 │
├─────────────────────────────────────┤
│  ┌───────────┐  ┌───────────┐       │
│  │  Left Content │  │  Right Content │       │
│  │  (Card 1)  │  │  (Card 2)  │       │
│  └───────────┘  └───────────┘       │
│                                     │
│  ┌─────────────────────────────┐    │
│  │  Bottom Summary/Key Points             │    │
│  └─────────────────────────────┘    │
└─────────────────────────────────────┘

Data Page

┌─────────────────────────────────────┐
│  Page Title (#fc5a1f)                 │
├─────────────────────────────────────┤
│  Metric Card Group:                         │
│  ┌──────┐ ┌──────┐ ┌──────┐         │
│  │ 1.14M │ │ 25%  │ │ 400x│         │
│  │ Lines of Code │ │ Streamlined │ │ Volume │         │
│  └──────┘ └──────┘ └──────┘         │
│                                     │
│  [Chart/Visualization Area]                   │
└─────────────────────────────────────┘

Implementation Guide

Create PDF with reportlab

python

from reportlab.lib.pagesizes import A4
from reportlab.lib.units import inch
from reportlab.pdfgen import canvas
from reportlab.lib.colors import HexColor

# 16:9 page size (in points, 1 point = 1/72 inch)
SLIDE_WIDTH = 10 * inch  # approx 25.4 cm
SLIDE_HEIGHT = 5.625 * inch  # approx 14.3 cm

# Color definitions
BRAND_ORANGE = HexColor('#fc5a1f')
DARK_ORANGE = HexColor('#fc4807')
LIGHT_ORANGE = HexColor('#fca787')
BLUE = HexColor('#3669cd')
DARK_GRAY = HexColor('#434343')
MEDIUM_GRAY = HexColor('#707070')
LIGHT_GRAY = HexColor('#f8f8f8')

def create_slide(c, title, content_func):
    """Create standard page template"""
    # Background
    c.setFillColor(HexColor('#ffffff'))
    c.rect(0, 0, SLIDE_WIDTH, SLIDE_HEIGHT, fill=1)
    
    # Top title bar
    c.setFillColor(BRAND_ORANGE)
    c.setFont("Helvetica-Bold", 24)
    c.drawString(0.5 * inch, SLIDE_HEIGHT - 0.6 * inch, title)
    
    # Content area
    content_func(c)
    
    # Next page
    c.showPage()

# Example: Create document
c = canvas.Canvas("promotion_doc.pdf", pagesize=(SLIDE_WIDTH, SLIDE_HEIGHT))

def cover_page(c):
    c.setFillColor(BRAND_ORANGE)
    c.setFont("Helvetica-Bold", 36)
    c.drawCentredString(SLIDE_WIDTH/2, SLIDE_HEIGHT*0.6, "Autumn Promotion Review Report")
    c.setFillColor(MEDIUM_GRAY)
    c.setFont("Helvetica", 16)
    c.drawCentredString(SLIDE_WIDTH/2, SLIDE_HEIGHT*0.45, "Zhang San / Technology Department")

create_slide(c, "", cover_page)
c.save()

Generate Charts with Mermaid

For architecture diagrams, flowcharts, etc., use Mermaid syntax to generate SVG, then embed into PDF:

markdown

%%{init: {'theme':'base', 'themeVariables': { 'primaryColor':'#fc5a1f','primaryTextColor':'#fff','primaryBorderColor':'#fc4807','lineColor':'#3669cd','secondaryColor':'#f8f8f8','tertiaryColor':'#fca787'}}}%%
graph LR
    A[Requirements Analysis] --> B[Technical Design]
    B --> C[Development & Implementation]
    C --> D[Testing & Verification]
    D --> E[Launch & Deployment]

Create PPT with Python-PPTX

python

from pptx import Presentation
from pptx.util import Inches, Pt
from pptx.enum.text import PP_ALIGN
from pptx.dml.color import RGBColor

# 16:9 presentation
prs = Presentation()
prs.slide_width = Inches(10)
prs.slide_height = Inches(5.625)

# Color definitions
BRAND_ORANGE = RGBColor(252, 90, 31)
DARK_GRAY = RGBColor(67, 67, 67)
LIGHT_GRAY = RGBColor(248, 248, 248)

# Add cover slide
slide_layout = prs.slide_layouts[6]  # Blank layout
slide = prs.slides.add_slide(slide_layout)

# Title
title_box = slide.shapes.add_textbox(
    Inches(1), Inches(2), 
    Inches(8), Inches(1)
)
title_frame = title_box.text_frame
title_frame.text = "Autumn Promotion Review Report"
title_para = title_frame.paragraphs[0]
title_para.font.size = Pt(36)
title_para.font.color.rgb = BRAND_ORANGE
title_para.alignment = PP_ALIGN.CENTER

prs.save('promotion_deck.pptx')

Content Strategy

Title Design

Concise & Impactful: 5-8 words, directly hitting the key points
Clear Hierarchy: Use numbers and icons to distinguish levels
Visual Guidance: Highlight key points through color and size differences

Data Presentation

Key Metrics: Display core numbers in large font (e.g., "1.14M lines of code")
Comparative Display: Highlight achievements through before-after comparisons and month-over-month growth
Visualization: Use bar charts, line charts, pie charts, etc.
Unit Explanation: Clearly label units and calculation methods

Text Specifications

Font Hierarchy: Three-level font size system for titles/body/notes
Line Spacing: 1.5x line spacing to maintain breathing room
Alignment: Left-aligned for body text, centered for titles
Avoid Clutter: No more than 3-4 main information points per page

Icons & Decorations

Functional Icons: Use simple linear icons to represent functional modules
Decorative Elements: Subtle gradients, rounded rectangles, dashed separators
Brand Consistency: All decorative elements use the brand color palette

Common Scene Templates

Personal Profile Page

python

def create_profile_page(c):
    # Left: Timeline
    x_timeline = 1 * inch
    y_start = SLIDE_HEIGHT - 1.5 * inch
    
    events = [
        ("Mar 2020", "An Internet Company", "Frontend Specialist"),
        ("2015-2020", "A SaaS Company", "Head of Frontend Team"),
        ("2013-2015", "A Startup", "Co-founder | CTO"),
    ]
    
    for i, (time, company, role) in enumerate(events):
        y = y_start - i * 0.8 * inch
        c.setFillColor(BRAND_ORANGE)
        c.circle(x_timeline, y, 5, fill=1)
        c.setFillColor(DARK_GRAY)
        c.setFont("Helvetica", 10)
        c.drawString(x_timeline + 0.2 * inch, y, f"{time} {company}")
        c.setFillColor(MEDIUM_GRAY)
        c.setFont("Helvetica", 9)
        c.drawString(x_timeline + 0.2 * inch, y - 0.15 * inch, role)

Work Achievement Page

python

def create_achievement_page(c):
    # Metric cards
    metrics = [
        ("1.14M Lines", "Engineering Code", (1*inch, SLIDE_HEIGHT-2*inch)),
        ("863K Lines", "25% Streamlined", (3*inch, SLIDE_HEIGHT-2*inch)),
        ("400x", "Volume Compression", (5*inch, SLIDE_HEIGHT-2*inch)),
    ]
    
    for value, desc, (x, y) in metrics:
        # Card background
        c.setFillColor(LIGHT_GRAY)
        c.roundRect(x, y, 1.5*inch, 1*inch, 10, fill=1)
        
        # Value
        c.setFillColor(BRAND_ORANGE)
        c.setFont("Helvetica-Bold", 24)
        c.drawCentredString(x + 0.75*inch, y + 0.6*inch, value)
        
        # Description
        c.setFillColor(MEDIUM_GRAY)
        c.setFont("Helvetica", 10)
        c.drawCentredString(x + 0.75*inch, y + 0.3*inch, desc)

Architecture Diagram Page

python

def create_architecture_page(c):
    # Use rectangles and arrows to display system architecture
    # Keep it simple, avoid overcomplicating
    
    # Example: Three-tier architecture
    layers = [
        ("Business Layer", SLIDE_HEIGHT - 2*inch),
        ("Application Layer", SLIDE_HEIGHT - 3*inch),
        ("Data Layer", SLIDE_HEIGHT - 4*inch),
    ]
    
    for name, y in layers:
        c.setFillColor(LIGHT_GRAY)
        c.rect(2*inch, y, 6*inch, 0.6*inch, fill=1)
        c.setFillColor(DARK_GRAY)
        c.setFont("Helvetica", 12)
        c.drawCentredString(5*inch, y + 0.25*inch, name)

Best Practices

Maintain Consistency: Use the same color, font, and spacing system across all pages
Highlight Key Points: Only 1-2 core viewpoints per page
Let Data Speak: Support conclusions with specific numbers and visualizations
Visual Guidance: Guide reading order through color, size, and position
White Space for Breathing: Don't fill all space, give content room to breathe
Mobile-friendly: Ensure readability on projectors and small screens

Quality Check List

All pages use 16:9 ratio
Brand color
```
#fc5a1f
```
is used for key elements
White
```
#ffffff
```
is the main background color (60%+ coverage)
Sufficient white space on each page (margins ≥5%)
Clear font hierarchy (large, medium, small three levels)
Concise and clear data visualization
All text is readable
No spelling or typographical errors
Logical order is reasonable
Total pages are controlled between 30-50

Export & Sharing

PDF Export Settings

Resolution: 300 DPI or higher
Color Mode: RGB (for screen display) or CMYK (for printing)
Font Embedding: Embed all fonts to ensure cross-platform consistency

PPT Export Settings

Format: .pptx (best compatibility)
Embed Fonts: Yes
Compress Images: No (maintain high quality)
Notes: Add speaker notes for easy presentation

Reference Resources

The original analyzed document has the following characteristics:

46-page promotion review report
Standard 16:9 presentation ratio (4000 x 2250 pixels)
Minimalist white background (60-70% pure white)
Brand orange
```
#fc5a1f
```
as primary color
Corporate blue
```
#3669cd
```
as secondary color
Sufficient white space and visual breathing room
Clear information hierarchy and data visualization

promotion-doc-designer

NPX Install

Tags

SKILL.md Content (Chinese)

Promotion Document Designer

Design Principles

1. Layout Standards (16:9 Presentations)

2. Color System

Primary Colors

Secondary Colors

Background Colors

3. Visual Hierarchy

Information Architecture

White Space Strategy

4. Content Organization

Page Type Templates

Implementation Guide

Create PDF with reportlab

Generate Charts with Mermaid

Create PPT with Python-PPTX

Content Strategy

Title Design

Data Presentation

Text Specifications

Icons & Decorations

Common Scene Templates

Personal Profile Page

Work Achievement Page

Architecture Diagram Page

Best Practices

Quality Check List

Export & Sharing

PDF Export Settings

PPT Export Settings

Reference Resources