chore: 1.1.0 release

skills/open-kimi-ppt/reference/design_system/01_strategy/05/en/moss-green-transformation.md

@@ -0,0 +1,163 @@
+# Organization Name · 2025.08 The GenAI Transformation of the Communications Function STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+For consulting-firm data packs, functional transformation assessments, AI/technology impact quantification, methodology explanations, and executive-level reporting. Aimed at business owners, communications/function leaders, and consulting project teams; each page must deliver its conclusion fast, while chart definitions and measurement bases, methodological assumptions, and sources remain traceable.
+
+Summary in one line: **a dark consulting data-pack style, where deep gray canvas and deep green tech atmosphere carry dense analysis, and teal-green data encoding highlights GenAI transformation opportunities and methodology levels.**
+
+Stable features: deep gray/deep green full base colors, the QuattrocentoSans font system, conclusion-style titles at upper left, large body charts/matrices, short-paragraph interpretation on the right, a tiny source/copyright line at the bottom, thin-line frames, fluorescent-green/teal-green accents, and the AI-portrait visuals on the cover/closing pages.
+
+- **Conclusion first, evidence as the body**: the title states the judgment directly; charts, tables, matrices, or flows do the persuading; decoration must not replace evidence.
+- **Dark and unified, green layered**: deep gray and deep green define the whole deck; bright green only marks key data, labels, chart series, and states — no meaningless color filling.
+- **High density but scannable**: use columns, dividers, headers, labels, footnotes, and alignment to build the reading path; avoid hierarchy-free text stacking.
+
+## 2. Page Skeleton
+
+- **Canvas ratio**: widescreen landscape 16:9. All pages reserve bottom space for footnotes, copyright, and the page number.
+- **Default background**: content pages sit on deep gray #2C2C2C, overlaid with deep green #0A3021–#0D4430 zones or a green glow at upper right/right side; section divider and disclaimer pages may use near-pure deep gray.
+- **Margins**: narrow safe margins; labels and titles at top, sources and page number at bottom, the body filling the middle.
+- **Title area**: a small tab/hierarchy label at upper left, followed by the main title and one line of subtitle or key message. Left-aligned, spanning about half to full width at the top of the page; never centered.
+- **Body area**: content pages are mainly chart/table on the left or center + interpretation on the right; methodology pages use horizontal flows or matrices; concept pages use multi-column/node relationships. Tight spacing between title area and body.
+- **Header/navigation**: a small green label at upper left, such as Function Level, Task Level, Methodology; it only signals the section and analysis level — no large navigation bar.
+- **Footer**: fixed at the bottom with sources, assumption notes, and copyright in a size clearly smaller than body text; the page number at lower right. Footnotes may run horizontally across pages or gather below charts.
+- **Logo**: the brand mark mainly appears on the cover and closing page; content pages do not enlarge the Logo.
+- **Dividers**: thin lines, table lines, axis lines, rectangular outlines; colors in deep gray, gray-green, or low-saturation green — organizational function only.
+- **Background graphics**: covers and end pages may use AI portraits/generative visuals; content pages use only abstract green glows or gradients — no large people images.
+- **Page-type skeletons**:
+  - Cover: deep gray brand and title blocks on the left, AI portrait with deep green light effects on the right; the title sits inside a thin-line frame or half-frame area.
+  - Content data page: title at upper left, large central chart, interpretation on the right, sources at the bottom.
+  - Methodology section divider: near-pure deep gray, large title at lower left/center-left, a few small squares as visual anchors.
+  - Methodology content page: label + title at top, flow, matrix, or step cards below, supplementary measurement-basis notes at the bottom.
+  - Disclaimer page: large title on the left, dense legal text on the right, deep gray background.
+  - Closing page: brand mark combined with the AI portrait/green light effects, minimal information.
+- **Default reading path**: upper-left label → main title/subtitle → main chart or matrix core data → right-side interpretation → bottom sources/measurement-basis notes → page number.
+
+## 3. Content Organization
+
+- **Title style**: use consulting-style conclusion sentences that directly state rankings, impact, opportunity, method scope, or comparative judgments; avoid vague titles like "Overview" or "Background". May include percentages, rankings, subjects, and results.
+- **Subtitle/key message**: below the main title, a smaller line states the quantification scope, stage, metric definition or basis, or "why it matters"; color in light green or light gray.
+- **Body structure**: short paragraphs, short sentences, and bullets; right-side interpretation is generally 2–4 paragraphs, each supporting one finding. Do not use large blocks of centered narrative.
+- **Grouping logic**: group by function, task category, impact type, AI type, automation stage, method step, cost pool, or workflow; titles prefer short noun phrases.
+- **Number of points per page**: 1 main point per page, paired with 2–4 sub-findings; high-density table pages may add more entries, but one title conclusion must lead them all.
+- **Body density**: more labels, footnotes, and data are allowed, layered by column widths, headers, row groups, and color blocks. When text exceeds 4–5 short paragraphs, split the page or switch to a table/matrix.
+- **Bullet style**: use short bullets, short dashes, semicolons, or line breaks; start with verbs or noun phrases; avoid complete long paragraphs.
+- **Keyword emphasis**: use bright green, teal-green, bold, or local highlights on dark bases for percentages, rankings, target objects, and stage names; no underlines, glowing outlines, or multi-color emphasis.
+- **Numbers/units/time frames**: highlight percentages, ranges, approximations, rankings, and stage differences. Numbers and units stay adjacent; annotate directly inside charts wherever possible rather than relying on legends.
+- **Source footnotes**: the bottom must keep sources, estimation assumptions, sample scope, copyright, etc.; multiple sources are compressed horizontally with semicolons or short phrases.
+
+## 4. Content Page Layout System
+
+### A. Left chart + right interpretation
+
+For quantitative conclusions such as rankings, cross-sectional comparisons, cost impact, productivity gains, and function benchmarking. The left or center 60–70% holds horizontal bar charts, stacked bars, or range bars; the right 20–30% holds explanatory text; the top carries the conclusion title and measurement basis, the bottom the sources. Target objects use bright green/teal-green, other objects gray-white or deep green; thin vertical lines may mark averages, targets, or stage boundaries. Not suited for scenes with too many dimensions whose labels cannot stay readable, nor for narrative pages needing long explanations.
+
+### B. Full-width high-density table/matrix
+
+For task lists, workflows, AI-type comparisons, automation potential, cost pools, and method inputs/outputs. The body nearly fills the width; column headers on a deep green or teal-green base, row groups on a deep gray sidebar or color band. Text columns left-aligned, number columns right-aligned or centered, status columns with dots/checks-crosses/color blocks; emphasis via teal-green bases, bright green numbers, red/green status dots, or bold rows. Do not use this with less data than 3×3 — it would look empty; if the comparison is complex but numeric-light, switch to cards or a flow.
+
+### C. Stacked-bar / waterfall-style decomposition
+
+For decomposing the total opportunity. Categories listed on the left, horizontal stacked bars on the right showing stages, types, or potential ranges, with a small swatch legend at the bottom explaining the series. Key row labels or bars use highlight green; non-key parts stay low-saturation. Do not use too many series colors — avoid turning the dark page into colored noise.
+
+### D. Methodology flow
+
+For diagnostic models, assessment steps, quantification logic, and input-to-output paths. Use 4–5 horizontal step cards or nodes connected by arrows/lines; each step contains a short title, an icon-like circle or small card, and 2–3 explanatory points. Use green titles, circular nodes, thin-line arrows, and stage labels to express hierarchy. Not suited for carrying large amounts of precise numbers.
+
+### E. Multi-column concept/comparison
+
+For impact types, Traditional AI/GenAI/Agentic AI differences, evaluation dimensions, or capability classifications. Use 3–4 columns, one concept per column, with short sentences, status marks, or small matrices inside; column titles use green bars, white cards, or circular color blocks. Suited for medium information density, not for complex financial modeling.
+
+### F. Section divider / separator page
+
+For structural transitions such as Methodology and Disclaimer. Use an empty deep gray field, the large title left-aligned or positioned lower-left, keeping only minimal decorative squares/lines. Do not add charts, card groups, or explanatory paragraphs — that would break the section divider's rhythm.
+
+## 5. Color System
+
+- **Primary background deep gray #2C2C2C**: the base color of content pages, section dividers, and disclaimer pages; cannot be replaced by a light background — the style would be falsified.
+- **Deep green background #0A3021 / #0B3928 / #0D4430**: for gradient zones on content pages, chart base plates, and the right-side atmosphere of cover/closing pages. May be used at large area with low saturation; may be fine-tuned within the same family — do not switch to blue-purple or orange-red.
+- **Mid green #125E42 / #176F4E / #197352**: for primary chart series, title labels, module bases, and grouping bars. Replaceable with a similar brand green, but sufficient contrast with the deep green background must hold.
+- **Bright teal-green #1A835B / #35AA7E / #74D1A9**: for key data, target objects, emphasized bars, status dots, legend highlights, and a few accent texts. Small-to-medium area — avoid filling entire pages; not for ordinary body text.
+- **White/near-white #F2F4F2**: for main titles, body text, table text, and chart labels. Do not replace all body text with plain gray — readability would drop.
+- **Light gray #B8B9B9 / #D7D7D7**: for secondary labels, non-key bars, axis labels, and footnotes.
+- **Dark gray-green #35594C / #5B7067 / #61746C**: for gridlines, table separation, weakened modules, and boundary lines — structural color only.
+- **Status red/pink, around #C83A5A**: only in matrices marking low capability, limitations, risks, or negative states, at very small area. Prohibited as a primary decorative color.
+- **Chart series boundary**: a single page stays in the green family with gray/white as reference; status red only as an exception. Do not introduce multiple blue/yellow/purple data series at once; if more series are unavoidable, prefer a brightness ladder of the same green.
+
+## 6. Fonts and Text Hierarchy
+
+- **Font character**: the whole deck uses QuattrocentoSans, with QuattrocentoSans-Bold and Italic building hierarchy. Do not mix in serif or handwriting fonts.
+- **Hierarchy ratios**: body = 1x; main title about 1.7–2.4x; cover title about 2.5–3.2x; section divider large title about 3–4x; subtitle/key message about 1.2–1.5x; chart axis labels and table body about 0.8–1x; footnotes, copyright, page numbers about 0.45–0.65x.
+- **Titles**: left-aligned, tight line spacing, may be partially bolded or wrapped; no more than three lines.
+- **Key message/subtitle**: below the title, stating the measurement basis in light green or light gray — do not repeat the title.
+- **Body text**: mainly regular weight; key phrases may be bolded or bright-greened; short paragraphs, moderate line width, right-side interpretation left-aligned.
+- **Subheadings/labels**: smaller size, on green bases or in green text; keep the text short.
+- **Table text**: column headers may be bold, body regular; text columns left-aligned, number/percentage columns centered or right-aligned. No frequent italics inside tables.
+- **Chart labels**: axis labels and data labels smaller than body text but must stay clear; key data may enlarge close to body size with bright green emphasis.
+- **Notes/footnotes/page numbers**: extremely small level, at the bottom or in the right-edge vertical page-number area; must be legible and never mixed into the body.
+
+## 7. Chart Language
+
+Charts are mainly horizontal bar charts, stacked bars, matrix comparisons, and a few flow/node diagrams — no complex multi-chart system.
+
+- **Bar charts**: dark base, horizontal layout; category labels on the left, bars and values on the right. Use a green ladder or light gray references, key bars in bright teal-green; axis lines and gridlines thin and low-contrast.
+- **Range/stage expression**: within the same row, parallel bars or range bars may express current vs. future stages, deploy vs. reinvent. Distinguish with different green brightness steps or gray-green bases, and annotate directly in the legend or on the bars.
+- **Stacked bars**: for task composition or workflow decomposition. Segments come from the same green sequence; labels are embedded or kept close to the bars, with a simple legend at the bottom.
+- **Matrix charts**: clear row/column headings, column headers may use green bars; cells use dots, checks/crosses, or short text phrases for states. Positive in green, negative/limited in red, ordinary reference in gray-white.
+- **Flow/node diagrams**: circular nodes, white cards, and thin-line arrows; nodes may hold simplified icons or initial-letter visuals, but they must serve the step's meaning.
+- **Legends**: above, below, or at the bottom of the chart, never at the visual center; swatches small and tidy, text short.
+- **Annotations**: use the right-side interpretation text instead of complex bubble callouts; inside the chart keep only necessary numbers, baselines, and stage notes. Floods of floating notes covering bars are prohibited.
+- **Chart boundaries**: no 3D charts, pie charts, donut charts, perspective charts, or decorative curve charts; there is no evidence supporting complex animated charts or illustrated charts.
+
+## 8. Tables and High-Density Information
+
+- **Table role**: carrying methods, tasks, types, ratings, and multi-dimensional comparisons — the core evidence carrier.
+- **Headers**: deep green or mid-green base, white/near-white text, short column names; multi-level headers may use different green steps or thin-line zoning.
+- **Row/column structure**: row labels left-aligned, metric/status columns centered, value columns right-aligned or centered. Complex task descriptions get wider columns; ratings/potential get narrow columns.
+- **Row height and density**: compact row heights but keep separation; compress long text into short phrases — no full paragraphs in cells.
+- **Separators**: thin gray lines, gray-green lines, or dark boundaries to separate row groups, column groups, and headers — no heavy outer frames.
+- **Base colors**: deep gray as the base; group rows or key columns may use deep green/teal-green bases; large light bases are generally avoided to protect the dark system.
+- **Key rows/columns**: target rows, summary columns, and key percentages may use bright green, bold, base-color blocks, or borders; pick only 1–2 focal points — never highlight the whole table.
+- **Zebra striping**: extremely subtle deep gray/deep green alternation is allowed, never obviously showy; omit it when thin-line separation already exists.
+- **Symbol marks**: dots, checks/crosses, red-green status dots, and rating color blocks may express capability/risk/automation level; a legend is required or the meaning must be inferable from context.
+- **Summary/footnotes**: notes, sources, and assumptions may sit at the bottom of the table; summary rows or result columns must stand out from ordinary rows.
+
+## 9. Components and Graphic Elements
+
+- **Upper-left tab**: a small green rectangle or text label showing Function Level, Task Level, Methodology, etc. Width follows the text — no long banner.
+- **Title frame / cover thin-line frame**: cover titles sit inside a green/gray-green thin-line frame or half-frame; content pages rarely use large title frames.
+- **Right-side interpretation column**: beside the chart, containing short paragraphs, keyword highlights, and a few numbers; it explains "so what" and does not repeat all the data.
+- **Cards/step blocks**: methodology pages use dark cards, small white cards, or green title bars holding step names and bullets; boundaries clear, rounding very restrained if any.
+- **Circular nodes**: for impact types or method steps, colored green, yellow-green, blue-green, or small red nodes. Few in number — not a flood of decorative bubbles.
+- **Separators and outlines**: for chart axes, table boundaries, and module zoning; thin, low-contrast, function-first.
+- **Legend swatches**: small rectangles/dots + short labels explaining stages, states, series; kept close to the chart's bottom or top.
+- **Page number/copyright vertical sidebar**: page number at lower right or along the right edge, copyright/sources along the bottom.
+- **Image frames**: carry the AI portrait only on the cover and closing pages; if an image appears on content pages, it must keep a deep green overlay — no screenshot collages.
+- **Icons**: methodology pages may use a few linear/simplified icons or circular icons. Colorful skeuomorphic icon libraries are prohibited; icons must relate directly to steps/states.
+
+## 10. Texture and Prohibited Items
+
+The overall texture is **dark, flat, restrained, data-dense, tech-consulting**; visual focus comes from the green glow, data highlights, and structured information.
+
+- **Prohibited**: large light backgrounds, rainbow palettes, 3D charts, glowing outlined text, complex textures, emoji, cartoon illustrations, social-media-style stickers, meaningless large icons, long centered copy, decorative wave lines, over-rounded cards, strong-shadow floating layers.
+- **Use with caution**: gradients, shadows, circular nodes, icons, red states. Gradients only for deep green background atmosphere; shadows, if any, extremely weak; red only for negative/limitation states; icons only for methodology steps.
+- **Usable on special pages**: AI portraits/generative images only on the cover and closing page, as the theme visual; section dividers may use minimal geometric squares; the disclaimer page may use dense legal text.
+- **Image dependency boundary**: content pages do not rely on photos, screenshots, or illustrations to tell the story unless the image itself is data evidence; otherwise convert to charts, tables, or flows.
+- **Brand feel boundary**: the brand mark should not be enlarged and repeated on every page; the brand feel comes from the dark base, the green system, typography, and the footnote structure.
+- **Density control**: never sacrifice alignment, contrast, and footnote readability. If text overlaps, tables squeeze, or chart labels become illegible, cut content first rather than shrinking it into unreadability.
+
+## 11. Generation Checklist
+
+- Is it a 16:9 dark consulting report page, not a poster, infographic, or social card?
+- Is there a clear label/title area at upper left, and is the title a conclusion sentence rather than a vague topic word?
+- Does the single page hold only 1 main point, proven by a chart, table, matrix, or flow?
+- Is the background mainly deep gray and deep green, with bright green used only for key data/labels?
+- Is the body organized as one of: left chart + right interpretation, full-width matrix, flow steps, or multi-column comparison?
+- Is the right-side interpretation short paragraphs with keyword highlights, not long-form body text?
+- Do charts use horizontal bars, stacked bars, matrices, or flow nodes; are 3D, pie charts, and showy series colors avoided?
+- Do tables have clear headers, grouping, alignment, thin separators, and key rows/columns?
+- Does the footer keep sources, assumptions, copyright, and page number without overlapping the body?
+- Does the type keep the QuattrocentoSans character, with hierarchy expressed through relative size, weight, and color?
+- Is photo/screenshot/illustration abuse avoided, with the AI portrait only on the cover or closing page?
+- Are there any occurrences of overflow, truncation, garbled characters, overlap, low contrast, occlusion, empty content, wrong proportions, or mechanical template repetition?
+- If the brand color is replaced, do the dark base, high-contrast white text, and single-primary-hue principles still hold?