| 1 | # Kimsoong Customer Loyalty Programme - Design Spec |
| 2 | |
| 3 | > This document is the human-readable design narrative — rationale, audience, style, color choices, content outline. It is read once by downstream roles for context. |
| 4 | > |
| 5 | > The machine-readable execution contract lives in `spec_lock.md` (short form of color / typography / icon / image decisions). Executor re-reads `spec_lock.md` before every SVG page to resist context-compression drift. Keep the two files in sync; if they diverge, `spec_lock.md` wins. |
| 6 | |
| 7 | ## I. Project Information |
| 8 | |
| 9 | | Item | Value | |
| 10 | | ---- | ----- | |
| 11 | | **Project Name** | Kimsoong Customer Loyalty Programme | |
| 12 | | **Canvas Format** | PPT 16:9 (1280×720) | |
| 13 | | **Page Count** | 10 | |
| 14 | | **Design Style** | Top Consulting (MBB-level) | |
| 15 | | **Target Audience** | Senior management / board at Kimsoong European HQ | |
| 16 | | **Use Case** | Strategic proposal for customer loyalty programme investment decision | |
| 17 | | **Created Date** | 2026-04-24 | |
| 18 | |
| 19 | --- |
| 20 | |
| 21 | ## II. Canvas Specification |
| 22 | |
| 23 | | Property | Value | |
| 24 | | -------- | ----- | |
| 25 | | **Format** | PPT 16:9 | |
| 26 | | **Dimensions** | 1280×720 | |
| 27 | | **viewBox** | `0 0 1280 720` | |
| 28 | | **Margins** | Left/Right 60px, Top 50px, Bottom 40px | |
| 29 | | **Content Area** | 1160×630 (x=60, y=50, w=1160, h=630) | |
| 30 | |
| 31 | --- |
| 32 | |
| 33 | ## III. Visual Theme |
| 34 | |
| 35 | ### Theme Style |
| 36 | |
| 37 | - **Style**: Top Consulting (MBB-level strategic presentation) |
| 38 | - **Theme**: Light theme |
| 39 | - **Tone**: Authoritative, data-driven, professionally restrained, eco-conscious automotive |
| 40 | |
| 41 | ### Color Scheme |
| 42 | |
| 43 | | Role | HEX | Purpose | |
| 44 | | ---- | --- | ------- | |
| 45 | | **Background** | `#FFFFFF` | Page background | |
| 46 | | **Secondary bg** | `#F4F6F8` | Card backgrounds, section backgrounds | |
| 47 | | **Primary** | `#1A3A5C` | Titles, key sections, header bars, strategic elements | |
| 48 | | **Accent** | `#E8A838` | Data highlights, key numbers, critical insights | |
| 49 | | **Secondary accent** | `#2D8A4E` | Eco-brand elements, positive indicators, growth metrics | |
| 50 | | **Body text** | `#2C3E50` | Main body text | |
| 51 | | **Secondary text** | `#5D6D7E` | Captions, annotations, supporting text | |
| 52 | | **Tertiary text** | `#95A5A6` | Page numbers, footnotes | |
| 53 | | **Border/divider** | `#D5DDE5` | Card borders, divider lines | |
| 54 | | **Success** | `#27AE60` | Positive indicators, improvement metrics | |
| 55 | | **Warning** | `#E74C3C` | Critical issues, problem areas, negative data | |
| 56 | |
| 57 | ### Gradient Scheme |
| 58 | |
| 59 | ```xml |
| 60 | <!-- Header gradient bar (Top Consulting signature) --> |
| 61 | <linearGradient id="headerGradient" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 62 | <stop offset="0%" stop-color="#1A3A5C"/> |
| 63 | <stop offset="100%" stop-color="#2D8A4E"/> |
| 64 | </linearGradient> |
| 65 | |
| 66 | <!-- Subtle background accent --> |
| 67 | <radialGradient id="bgDecor" cx="85%" cy="15%" r="40%"> |
| 68 | <stop offset="0%" stop-color="#1A3A5C" stop-opacity="0.05"/> |
| 69 | <stop offset="100%" stop-color="#1A3A5C" stop-opacity="0"/> |
| 70 | </radialGradient> |
| 71 | ``` |
| 72 | |
| 73 | --- |
| 74 | |
| 75 | ## IV. Typography System |
| 76 | |
| 77 | ### Font Plan |
| 78 | |
| 79 | **Typography direction**: International English — clean, authoritative sans-serif for a European audience. |
| 80 | |
| 81 | | Role | Chinese | English | Fallback tail | |
| 82 | | ---- | ------- | ------- | ------------- | |
| 83 | | **Title** | — | `"Helvetica Neue"`, `Arial` | `sans-serif` | |
| 84 | | **Body** | — | `"Helvetica Neue"`, `Arial` | `sans-serif` | |
| 85 | | **Emphasis** | — | `Georgia`, `"Times New Roman"` | `serif` | |
| 86 | | **Code** | — | `Consolas`, `"Courier New"` | `monospace` | |
| 87 | |
| 88 | **Per-role font stacks**: |
| 89 | |
| 90 | - Title: `"Helvetica Neue", Arial, sans-serif` |
| 91 | - Body: `"Helvetica Neue", Arial, sans-serif` |
| 92 | - Emphasis: `Georgia, "Times New Roman", serif` |
| 93 | - Code: `Consolas, "Courier New", monospace` |
| 94 | |
| 95 | ### Font Size Hierarchy |
| 96 | |
| 97 | **Baseline**: Body font size = 18px (dense — consulting analysis with 6+ data points per page) |
| 98 | |
| 99 | | Purpose | Ratio | Size @ body=18 | Weight | |
| 100 | | ------- | ----- | -------------- | ------ | |
| 101 | | Cover title | 3x | 54px | Bold | |
| 102 | | Page title | 1.7x | 30px | Bold | |
| 103 | | Hero number | 2x | 36px | Bold | |
| 104 | | Subtitle | 1.3x | 24px | SemiBold | |
| 105 | | **Body** | **1x** | **18px** | Regular | |
| 106 | | Annotation | 0.78x | 14px | Regular | |
| 107 | | Page number | 0.61x | 11px | Regular | |
| 108 | |
| 109 | --- |
| 110 | |
| 111 | ## V. Layout Principles |
| 112 | |
| 113 | ### Page Structure |
| 114 | |
| 115 | - **Header area**: y=0 to y=90 — Primary gradient bar (8px) + page title zone |
| 116 | - **Content area**: y=90 to y=680 — Main content (590px height) |
| 117 | - **Footer area**: y=680 to y=720 — Page number, confidential marking |
| 118 | |
| 119 | ### Top Consulting Signature Elements |
| 120 | |
| 121 | - **Gradient top bar**: 8px height, full width, primary-to-secondary-accent gradient |
| 122 | - **Dark takeaway box**: Bottom-left insight box with dark background (#1A3A5C) and white text |
| 123 | - **Conclusion-first titles**: Page titles carry the core insight, not topic labels |
| 124 | |
| 125 | ### Layout Pattern Library |
| 126 | |
| 127 | | Pattern | Used On | |
| 128 | | ------- | ------- | |
| 129 | | Single column centered | P01 Cover, P10 Conclusion | |
| 130 | | Asymmetric split (4:6) | P03 Company Profile (image + text) | |
| 131 | | Four-quadrant dashboard | P04 Customer Demographics | |
| 132 | | Matrix 2×2 | P05 Priorities Gap Analysis | |
| 133 | | Horizontal bar ranking | P06 Root Cause | |
| 134 | | Center-radiating | P07 Strategic Pillars | |
| 135 | | Five-card evaluation | P08 Initiatives | |
| 136 | | Timeline horizontal | P09 Roadmap | |
| 137 | |
| 138 | ### Spacing Specification |
| 139 | |
| 140 | **Universal**: |
| 141 | |
| 142 | | Element | Value | |
| 143 | | ------- | ----- | |
| 144 | | Safe margin | 60px | |
| 145 | | Content block gap | 30px | |
| 146 | | Icon-text gap | 10px | |
| 147 | |
| 148 | **Card-based layouts**: |
| 149 | |
| 150 | | Element | Value | |
| 151 | | ------- | ----- | |
| 152 | | Card gap | 24px | |
| 153 | | Card padding | 24px | |
| 154 | | Card border radius | 10px | |
| 155 | |
| 156 | --- |
| 157 | |
| 158 | ## VI. Icon Usage Specification |
| 159 | |
| 160 | ### Source |
| 161 | |
| 162 | - **Built-in icon library**: `tabler-filled` (smooth bezier curves — warm, professional, suitable for automotive consulting) |
| 163 | - **Usage method**: `{{icon:tabler-filled/icon-name}}` |
| 164 | |
| 165 | ### Recommended Icon List |
| 166 | |
| 167 | | Purpose | Icon Path | Page | |
| 168 | | ------- | --------- | ---- | |
| 169 | | Automotive | `{{icon:tabler-filled/car}}` | P01, P03 | |
| 170 | | Strategic target | `{{icon:tabler-filled/target}}` | P02, P07 | |
| 171 | | Data analysis | `{{icon:tabler-filled/chart-pie}}` | P04 | |
| 172 | | Customer base | `{{icon:tabler-filled/users}}` | P04 | |
| 173 | | After-sales / warranty | `{{icon:tabler-filled/shield-check}}` | P05, P08 | |
| 174 | | Loyalty discount | `{{icon:tabler-filled/discount}}` | P08 | |
| 175 | | Achievement | `{{icon:tabler-filled/trophy}}` | P09 | |
| 176 | | Timeline | `{{icon:tabler-filled/clock}}` | P09 | |
| 177 | | Customer loyalty | `{{icon:tabler-filled/heart}}` | P07, P10 | |
| 178 | | Data insights | `{{icon:tabler-filled/report-analytics}}` | P06 | |
| 179 | | Revenue / cost | `{{icon:tabler-filled/coin}}` | P08 | |
| 180 | | Incentive | `{{icon:tabler-filled/gift}}` | P08 | |
| 181 | | Alert / warning | `{{icon:tabler-filled/alert-triangle}}` | P02, P06 | |
| 182 | | Checkmark | `{{icon:tabler-filled/circle-check}}` | P10 | |
| 183 | | Stars / satisfaction | `{{icon:tabler-filled/star}}` | P05 | |
| 184 | | Sparkle / highlight | `{{icon:tabler-filled/sparkles}}` | P03 | |
| 185 | |
| 186 | --- |
| 187 | |
| 188 | ## VII. Visualization Reference List |
| 189 | |
| 190 | | Visualization Type | Reference Template | Used In | Purpose | |
| 191 | | ------------------ | ------------------ | ------- | ------- | |
| 192 | | kpi_cards | `templates/charts/kpi_cards.svg` | P02 | Executive summary KPI dashboard | |
| 193 | | donut_chart | `templates/charts/donut_chart.svg` | P04 | Age distribution, income distribution | |
| 194 | | horizontal_bar_chart | `templates/charts/horizontal_bar_chart.svg` | P04 | Occupation distribution | |
| 195 | | matrix_2x2 | `templates/charts/matrix_2x2.svg` | P05 | Priority vs. Performance gap | |
| 196 | | pareto_chart | `templates/charts/pareto_chart.svg` | P06 | Root cause analysis with cumulative line | |
| 197 | | hub_spoke | `templates/charts/hub_spoke.svg` | P07 | Four strategic pillars radiating from core | |
| 198 | | comparison_columns | `templates/charts/comparison_columns.svg` | P08 | Initiative evaluation (impact vs cost) | |
| 199 | | timeline | `templates/charts/timeline.svg` | P09 | Implementation roadmap Q1-Q4 | |
| 200 | |
| 201 | --- |
| 202 | |
| 203 | ## VIII. Image Resource List |
| 204 | |
| 205 | | Filename | Dimensions | Ratio | Purpose | Type | Status | Generation Description | |
| 206 | | -------- | --------- | ----- | ------- | ---- | ------ | --------------------- | |
| 207 | | cover_bg.jpg | 1920x1080 | 1.78 | P01 Cover background | Background | Pending | Abstract automotive engineering background with flowing aerodynamic curves in deep navy (#1A3A5C) to midnight blue gradient, subtle light particle effects suggesting motion and innovation, clean center-right area for text overlay, premium corporate feel | |
| 208 | | company_profile.jpg | 1920x1080 | 1.78 | P03 Company profile context | Photography | Pending | Modern automotive showroom interior with sleek cars on display, clean minimalist design, natural lighting through large glass windows, European city visible outside, professional corporate atmosphere | |
| 209 | | customer_insight.jpg | 1920x1080 | 1.78 | P04 Customer data page accent | Illustration | Pending | Abstract data visualization illustration showing interconnected human silhouettes forming a network pattern, flat design style in deep blue and amber tones, representing customer demographics and buyer profiling analytics | |
| 210 | | roadmap_bg.jpg | 1920x1080 | 1.78 | P09 Roadmap section accent | Background | Pending | Subtle abstract road pathway stretching into the distance with soft gradient from deep blue (#1A3A5C) to eco green (#2D8A4E), geometric grid overlay suggesting structured planning, clean negative space for content overlay | |
| 211 | |
| 212 | --- |
| 213 | |
| 214 | ## IX. Content Outline |
| 215 | |
| 216 | ### Part 1: Setting the Stage |
| 217 | |
| 218 | #### Slide 01 - Cover (anchor) |
| 219 | |
| 220 | - **Layout**: Full-bleed background image + centered title with overlay |
| 221 | - **Title**: "Kimsoong Customer Loyalty Programme" |
| 222 | - **Subtitle**: "Strategic Framework for Customer Retention & Growth" |
| 223 | - **Info**: European Headquarters | Strategic Proposal | April 2026 |
| 224 | - **Image**: `cover_bg.jpg` — hero / full-bleed intent |
| 225 | |
| 226 | #### Slide 02 - The Challenge: A Critical Retention Gap (breathing) |
| 227 | |
| 228 | - **Layout**: Single column — three hero KPI cards + takeaway box |
| 229 | - **Title**: "Only 15% of customers return — 78% rate after-sales as Fair or Poor" |
| 230 | - **Visualization**: kpi_cards |
| 231 | - **Content**: |
| 232 | - KPI 1: 15% repeat buyer rate (vs. industry benchmark ~40%) |
| 233 | - KPI 2: 78% Fair/Poor after-sales rating |
| 234 | - KPI 3: 52% lost to competitors |
| 235 | - Dark takeaway box: "The cost of acquiring a new customer is 5-7x retaining an existing one. With only 15% repeat purchases, Kimsoong is leaving significant lifetime value on the table." |
| 236 | |
| 237 | ### Part 2: Understanding the Customer |
| 238 | |
| 239 | #### Slide 03 - Kimsoong: Market Position & Brand Assets (dense) |
| 240 | |
| 241 | - **Layout**: Asymmetric split (4:6) — image left, structured text right |
| 242 | - **Title**: "Strong brand assets provide foundation for loyalty strategy" |
| 243 | - **Image**: `company_profile.jpg` — side-by-side intent |
| 244 | - **Content**: |
| 245 | - Brand strengths: Reliability reputation, value pricing, eco-conscious image |
| 246 | - Market position: Lower-end with "extras included" differentiation |
| 247 | - European footprint: Franchises across most countries (sales + service + used cars) |
| 248 | - R&D pipeline: Eco-car with alternative power source |
| 249 | - Takeaway: "Brand equity is high — the gap is in post-purchase experience, not product appeal" |
| 250 | |
| 251 | #### Slide 04 - Customer Profile: Who Buys Kimsoong? (dense) |
| 252 | |
| 253 | - **Layout**: Four-quadrant dashboard |
| 254 | - **Title**: "Young, employed, middle-income — a segment with high lifetime value potential" |
| 255 | - **Visualization**: donut_chart (age), horizontal_bar_chart (occupation) |
| 256 | - **Image**: `customer_insight.jpg` — accent intent (small, decorative) |
| 257 | - **Content**: |
| 258 | - Q1: Age — 48% under 30, 27% age 31-40 (75% under 40) |
| 259 | - Q2: Income — 82% middle income (price-sensitive but stable) |
| 260 | - Q3: Occupation — 75% employed, 15% self-employed |
| 261 | - Q4: Interests — Top 3: Eating/drinking, Sport, Travel; #4 Environment (brand-aligned) |
| 262 | - Gender split: 52M / 48F (near-even) |
| 263 | |
| 264 | #### Slide 05 - The Gap: What Customers Want vs. What They Get (dense) |
| 265 | |
| 266 | - **Layout**: Matrix 2×2 — importance vs. satisfaction |
| 267 | - **Title**: "After-sales service: high importance, critically low satisfaction" |
| 268 | - **Visualization**: matrix_2x2 |
| 269 | - **Content**: |
| 270 | - X-axis: Customer Priority Ranking (1-7) |
| 271 | - Y-axis: Satisfaction Level |
| 272 | - Key insight: After-sales ranks #4 in priorities but only 33% rate it Good or above |
| 273 | - Economy (#1) and Price (#2) — well-served by Kimsoong's value proposition |
| 274 | - Reliability (#3) — strong brand perception |
| 275 | - After-sales (#4) — **critical gap** (red zone) |
| 276 | - Questionnaire return rate: only 40% — data quality issue |
| 277 | |
| 278 | ### Part 3: Diagnosis |
| 279 | |
| 280 | #### Slide 06 - Why Customers Leave: Root Cause Decomposition (dense) |
| 281 | |
| 282 | - **Layout**: Horizontal bar chart (descending) + cumulative percentage line |
| 283 | - **Title**: "78% of customer loss is addressable — competitors and service dominate" |
| 284 | - **Visualization**: pareto_chart |
| 285 | - **Content**: |
| 286 | - Bought competitor: 52% (largest bar, red) |
| 287 | - Disappointed with service: 26% (orange) |
| 288 | - Relocated: 8% (gray — uncontrollable) |
| 289 | - No longer drive: 5% (gray — uncontrollable) |
| 290 | - Don't know: 9% (gray — data gap) |
| 291 | - Cumulative line showing 78% addressable |
| 292 | - Takeaway box: "78% of churn is within Kimsoong's control. Service improvement and competitive positioning are the two levers." |
| 293 | |
| 294 | ### Part 4: Strategy & Solutions |
| 295 | |
| 296 | #### Slide 07 - Four Pillars of Customer Loyalty Strategy (breathing) |
| 297 | |
| 298 | - **Layout**: Center-radiating — core objective surrounded by 4 pillars |
| 299 | - **Title**: "A four-pillar framework to transform customer relationships" |
| 300 | - **Visualization**: hub_spoke |
| 301 | - **Content**: |
| 302 | - Core: Customer Loyalty Programme |
| 303 | - Pillar 1: Build long-term relationships → Increase profits |
| 304 | - Pillar 2: Increase customer loyalty → Boost repeat rate (15% → 30%+) |
| 305 | - Pillar 3: Accurate buyer profiling → Data-driven decisions |
| 306 | - Pillar 4: Staff engagement → Service excellence |
| 307 | - Cost model: 50/50 shared with head office |
| 308 | |
| 309 | #### Slide 08 - Five Recommended Initiatives: Impact vs. Cost (dense) |
| 310 | |
| 311 | - **Layout**: Five evaluation cards in priority order |
| 312 | - **Title**: "Prioritize service and data — financial incentives follow" |
| 313 | - **Visualization**: comparison_columns |
| 314 | - **Content**: |
| 315 | - Initiative 1 ⭐: 3-Year Free After-sales Service — Impact: HIGH (directly addresses #1 pain point) / Cost: Medium-High |
| 316 | - Initiative 2: 20% Loyalty Discount — Impact: HIGH (financial incentive) / Cost: Medium |
| 317 | - Initiative 3: Enhanced Trade-in Programme — Impact: MEDIUM (reduces switching barrier) / Cost: Low-Medium |
| 318 | - Initiative 4: Customer Magazine — Impact: LOW-MEDIUM (emotional connection, brand) / Cost: Low |
| 319 | - Initiative 5: Questionnaire Incentive (Branded Pen) — Impact: MEDIUM (data quality improvement, 40% → 70%) / Cost: Very Low |
| 320 | - Takeaway: "Lead with service; follow with incentives. The branded pen initiative has the highest ROI for data collection." |
| 321 | |
| 322 | ### Part 5: Execution |
| 323 | |
| 324 | #### Slide 09 - Implementation Roadmap: Phased Rollout (dense) |
| 325 | |
| 326 | - **Layout**: Horizontal timeline (Q1-Q4) + KPI tracker cards at bottom |
| 327 | - **Title**: "Quick wins first, then systematic service transformation" |
| 328 | - **Visualization**: timeline |
| 329 | - **Image**: `roadmap_bg.jpg` — atmosphere intent (low opacity background) |
| 330 | - **Content**: |
| 331 | - Phase 1 (Q1): Quick Wins — Launch Magazine, Deploy Questionnaire Incentive |
| 332 | - Phase 2 (Q2): Service Uplift — Roll out 3-Year Free After-sales across franchises |
| 333 | - Phase 3 (Q3): Financial Incentives — Activate 20% Loyalty Discount, Trade-in Programme |
| 334 | - Phase 4 (Q4): Evaluate & Optimize — Measure KPIs, adjust programme |
| 335 | - KPI targets: Repeat rate 15% → 30% | Satisfaction (Good+) 33% → 60% | Questionnaire return 40% → 70% |
| 336 | |
| 337 | #### Slide 10 - Conclusion: The Loyalty Imperative (anchor) |
| 338 | |
| 339 | - **Layout**: Single column centered — key message + three takeaway bullets |
| 340 | - **Title**: "Customer retention is the highest-ROI growth lever for Kimsoong Europe" |
| 341 | - **Content**: |
| 342 | - Core message: "Transforming 15% repeat buyers into 30%+ is achievable within 12 months with a phased, data-driven loyalty programme" |
| 343 | - Three imperatives: |
| 344 | 1. Fix after-sales service first — it's the #1 reason customers leave |
| 345 | 2. Build data capability — 40% questionnaire return is a strategic blind spot |
| 346 | 3. Phase financial incentives after service foundation is in place |
| 347 | - Call to action: "Approve Q1 launch of Phase 1 quick wins" |
| 348 | |
| 349 | --- |
| 350 | |
| 351 | ## X. Speaker Notes Requirements |
| 352 | |
| 353 | - **File naming**: Match SVG names (e.g., `slide_01_cover.md`) |
| 354 | - **Style**: Formal, conclusion-first, data-referenced |
| 355 | - **Purpose**: Persuade — strategic proposal for investment decision |
| 356 | - **Total duration**: ~20 minutes (2 minutes per slide average) |
| 357 | - **Content**: Script key points, data citations, transition phrases |
| 358 | |
| 359 | --- |
| 360 | |
| 361 | ## XI. Technical Constraints Reminder |
| 362 | |
| 363 | ### SVG Generation Must Follow: |
| 364 | |
| 365 | 1. viewBox: `0 0 1280 720` |
| 366 | 2. Background uses `<rect>` elements |
| 367 | 3. Text wrapping uses `<tspan>` (`<foreignObject>` FORBIDDEN) |
| 368 | 4. Transparency defaults to `fill-opacity` / `stroke-opacity`; `rgba()` remains converter-compatible |
| 369 | 5. FORBIDDEN: `mask`, `<style>`, `class`, `foreignObject` |
| 370 | 6. FORBIDDEN: `textPath`, `animate*`, `script` |
| 371 | 7. `marker-start` / `marker-end` conditionally allowed per shared-standards.md §1.1 |
| 372 | 8. `clipPath` conditionally allowed only on `<image>` elements per shared-standards.md §1.2 |
| 373 | |
| 374 | ### PPT Compatibility Rules: |
| 375 | |
| 376 | - Prefer opacity on each child element; `<g opacity="...">` remains converter-compatible with an approximate-fidelity warning |
| 377 | - Image transparency uses overlay mask layer |
| 378 | - Inline styles only; external CSS and `@font-face` FORBIDDEN |
| 379 |