iofficeai--officecli/skills/morph-ppt/reference/styles/mixed--duotone-split/style.md

12 Duotone Split — Duotone Split

Style Overview

Charcoal and terracotta dual-color panels split the canvas in different proportions, morph produces "shifting canvas" effect.

• Scene: Brand launches, architectural design, high-end presentations
• Mood: Bold, architectural feel, high-end, minimalist
• Tone: Dual-color contrast (deep dark + warm color), white dividers

Color Palette

Name	Hex	Usage
Pure White	#FFFFFF	Page background, divider lines
Charcoal Gray	#2D3436	Dark panel
Terracotta	#E17055	Warm panel

Typography

Element	Font	Size
Main Title	Segoe UI Black	40-64pt
Data Numbers	Segoe UI Black	48-64pt
Column Title	Segoe UI Black	28pt
Body/Subtitle	Segoe UI Light	16-24pt

Design Techniques

• Dual-panel split: Two large rect (!!panel-dark + !!panel-warm) cover entire canvas, split in different proportions
• White divider line: 0.3cm wide white rect as precise divider between two panels
• Split proportion changes: S1 left-right 50/50 → S2 top-bottom 70/30 → S3 left-right 30/70 → S4 diagonal rotation → S5 top-bottom 80/20
• Morph choreography: Massive changes in panel size and position produce "shifting canvas" effect, divider line follows movement
• Rotation variation: S4 panels rotated -8 degrees, breaking orthogonal layout for added dynamism
• Restrained decoration: Only 2 semi-transparent dots + 1 ultra-thin line, maintaining minimalism

Scene Elements

Name	Type	Description
!!panel-dark	rect	Charcoal main panel
!!panel-warm	rect	Terracotta warm panel
!!divider	rect (0.3cm)	White panel divider line
!!accent-dot-1	ellipse	White semi-transparent decorative dot
!!accent-dot-2	ellipse	Terracotta semi-transparent decorative dot
!!accent-line	rect (ultra-thin)	White semi-transparent decorative line

Page Structure (5 pages)

Slide	Type	Elements	Description
S1	hero	Cover — left-right 50/50 split, title on dark panel
S2	statement	Statement — top-bottom 70/30 split (dark occupies top 70%), centered large title
S3	pillars	Three-column — left-right 30/70 (narrow dark left column + wide warm right column), three pillars on warm panel
S4	evidence	Data — panels rotated -8 degrees forming diagonal split, data scattered across both panels
S5	cta	Closing — top-bottom 80/20 (dark occupies top 80%), call to action centered

Reference Script

Complete build script available in build.sh.

Recommended slides to read for understanding core design techniques:

• Slide 1 (hero) — Initial layout of 6 scene actors, understanding panel + divider line structure
• Slide 4 (evidence) — Panel rotation + diagonal split implementation

No need to read all — skim 2-3 representative slides.