chore: 1.1.0 release

skills/open-kimi-ppt/reference/design_system/01_strategy/03/en/pine-green-strategy.md

@@ -0,0 +1,151 @@
+# Organization Name · 2023.05 Report Name CEOs Roadmap on Generative AI STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+For consulting-firm presentations to CEOs, executives, and business leaders covering trend insights, strategic roadmaps, risk identification, and organizational action recommendations. It uses high-density business argumentation: each page gives its conclusion first, then supports it with charts, tables, comparison boxes, case excerpts, or action lists.
+
+Core design: a dark tech-photo banner carries the title; a white/extremely-light-gray body keeps reading easy; mint green and brand green organize hierarchy; a high-density grid with tiny footnotes maintains the report feel. The reading path is "argument first + evidence unfolded + sources as backstop".
+
+Underlying principles:
+- **Argument takes precedence over decoration**: the top of every page must be a judgment or action-oriented title that stands on its own; charts, tables, and components serve only that judgment.
+- **Green only for structure and emphasis**: light green for background zoning and callout blocks, deep green for key numbers, labels, paths, bars, and positive states; green must not be expanded into an arbitrary full-page decorative color.
+- **High density must be tamed by the grid**: multiple evidence points must sit in columns, rows, cards, matrices, flows, or tables; avoid free-floating scatter, unaligned collages, and arbitrarily enlarged local elements.
+
+## 2. Page Skeleton
+
+- **Canvas ratio**: horizontal 16:9 widescreen, designed for report reading rather than large-type stage presentations.
+- **Default background**: content pages use white or extremely light gray; light gray is used for table bases, module bases, or a bottom summary band. Covers, back covers, and a few section/transition pages use darkened tech photography.
+- **Title area**: content pages have a fixed dark narrow banner across the top, embedding a darkened photo or near-black base color; the title is left-aligned, white, bold, a complete judgment sentence. Small section numbers or progress labels such as "1a / 1b / 2b" may appear at the lower edge of the title or the upper left of the body.
+- **Body area**: located below the banner. Common arrangements include left-right column splits, three-column cards, quadrants/matrices, chart + annotations, table + side notes, and central model + surrounding explanations; margins are compact and strictly aligned, separated by thin lines, light gray bases, or whitespace.
+- **Footer**: a tiny gray footnote/source/copyright area at the bottom, left-aligned; a small page number at lower right or along the bottom edge. Footnotes are separated from the body by whitespace or a thin line and never mixed into the body.
+- **Logo and branding**: on the cover's upper left, a plain-small-text combination of Organization Name and report name (writing the new topic name) or left blank; on the back cover, the brand wordmark over a darkened photo; neither draws a graphic logo. Content pages do not repeat the logo at large scale — the black banner, green system, and footnote style carry brand recognition.
+- **Cover skeleton**: full-bleed darkened photo; a light green brand block at upper left; a horizontal light green semi-transparent title block mid-page toward the left/center; title in black bold; the date at a small serif/italic level. The lower edge of the green block may carry thin vertical striping.
+- **Section/transition pages**: a light green block or a darkened photo block on the left carries the section topic, with a bullet list on the right; increase whitespace and keep left alignment.
+- **Closing/disclaimer pages**: the disclaimer page uses a white base, light green subheadings, and gray body blocks; the back cover returns to darkened photography and the white brand wordmark.
+- **Default reading path**: top banner conclusion → upper-left number/module title → main chart or central model → right-side/below explanation → footnote sources.
+
+## 3. Content Organization
+
+- **Title style**: use conclusion sentences, judgment sentences, or action sentences — not mere nouns; express meanings like "what is happening", "why it matters", "how the CEO should act", "where the risks are". Titles may be longer but must stay readable within one to two lines inside the banner.
+- **Key message sentences**: below the title or at the upper left of the body, a "number + phrase" stage label may appear; numbers use green or black small labels.
+- **Body organization**: micro-points organized as short paragraphs and bullets. Avoid continuous full-bleed long paragraphs; break long explanations into cards, left-right columns, or table rows.
+- **Grouping logic**: prefer time/stage progression, left-right contrasts, matrix comparisons, and "three parallel columns", "two-category contrast", "core/non-core", "traditional/new-type", "opportunity/risk/action".
+- **Number of points per page**: one main judgment per page, with 3–6 evidence points, bullets, or comparison dimensions inside. If more than 6 parallel points are needed, convert to a table or split into two pages.
+- **Keyword emphasis**: use bold, green text, green labels, light green base blocks, rings, or borders; risks or warnings may use small-area magenta/rose marks. Do not use fluorescent multi-color, high-saturation red-blue mixing, or large rainbow emphasis.
+- **Numbers and units**: numbers sit directly beside bars, labels, table cells, or key conclusions; units and time frames go in chart titles, axis titles, or footnotes. Growth rates, years, market sizes, and share-type data should be more prominent than explanatory text.
+- **Quotes and cases**: external quotes use quotation marks, light green quote blocks, or news-excerpt boxes; quotes serve the evidence and must not replace the page's main conclusion.
+- **Source footnotes**: charts, market sizes, case screenshots, and quotes all keep their sources; use extremely small gray text, preferably left-aligned, staying out of the main reading flow.
+
+## 4. Content Page Layout System
+
+### A. Top banner + three/multi-column opinion cards
+
+For concept differences, capability traits, risk categories, and organizational requirements. The body divides into three or four columns, each with a small icon/subheading/short caption/a few bullets; column titles in green, columns separated by light gray vertical lines or whitespace. A key column may add a light green base or a deep green label; each column holds one small point and 2–4 supporting notes. Do not use this layout when continuous data or complex causal chains must be shown.
+
+### B. Main chart + right-side evidence/explanation card
+
+For growth trends, market size, adoption rates, and budget changes. The chart takes about half to two-thirds; an explanation box, news excerpt, or key takeaway goes to the right or above. The chart uses a green primary series and gray secondary series with key data directly annotated; cards use a light gray or white base with thin borders and a few green titles. Only one main chart conclusion per page — avoid stacking multiple unrelated charts.
+
+### C. Large opinion block on the left + action explanation on the right
+
+For CEO action recommendations, roadmap hints, and core problem definitions. A large light green base block on the left carries the core judgment, question, or classification model; the right side explains action implications with bullets, short paragraphs, or cases. Rings, double circles, arrows, or partition lines may connect them. If the page's focus is data proof, reduce the large opinion block's area to avoid squeezing the chart.
+
+### D. Comparison matrix/table page
+
+For comparing technology stages, business use cases, risk dimensions, organizational capabilities, and departmental responsibilities. Use column titles + row dimensions; headers in light green or deep green, cells holding short phrases or bullets. Key columns/rows use a green base, bold, or graphic marks. If there are fewer dimensions than 2×2, use cards instead of a table.
+
+### E. Central model + surrounding explanation
+
+For frameworks, capability systems, governance models, or value chains. A circle, ring, or matrix core sits at the center, with 4–8 explanatory nodes around it connected by thin lines, arrows, or spatial relations. The center is usually green, the periphery light gray/light green. This layout emphasizes structural relationships and is not suited for long text passages or precise values.
+
+### F. Process/roadmap layout
+
+For action steps such as "discover—select—build—govern—scale". Use a horizontal or vertical step bar, green marking the current/key stage and gray marking auxiliary stages; a short caption sits below each step. Flow arrows should be lightweight and flat — no complex dimensional arrows. If the steps are not sequential, convert to a matrix or parallel cards.
+
+### G. News/case collage page
+
+For external events, public sentiment, risk instances, or real-world evidence. News cards, screenshots, or excerpts must obey the grid boundaries and the unified title banner; screenshots should not fill the whole page and should carry explanatory labels. This layout is an evidence page and must not become a regular content template.
+
+### H. Contact/appendix list page
+
+For teams, authors, contacts, and disclaimers. Use a headshot or text-card grid; names/titles in bold, with roles, emails, and links at a small level. Reduce charts and strong emphasis.
+
+## 5. Color System
+
+- **Near-black / deep charcoal #0B0C0D, #0D0F0F, #191E1F**: for title banners, darkened photo overlays, back-cover backgrounds, and primary body text. Cannot be replaced by a bright brand color — that would destroy the consulting report's authority.
+- **White / extremely light gray #F1F1F1, #F2F2F0, #ECEDED**: for main page backgrounds, content bases, table blank areas, and card bases. May switch between white and light gray, but must not become a high-saturation colored background.
+- **Mint light green, approximately #9CDDAA, #92C9A0, #8FC49B, #BFEFD0**: for cover title blocks, section blocks, callout boxes, the large left opinion base, and weak table emphasis. Text must stay black/dark; replacement colors must also be low-saturation, light backgrounds.
+- **Brand primary green #23B871, #35BA7A, #408A5A**: for key bars, labels, key numbers, icons, current process steps, and core rings. Do not introduce several similar greens at once and create hierarchy confusion.
+- **Deep green #26633B, #2E6F47, #5F877B**: for small title labels, dark chart series, emphasis borders, and structural lines; not suitable as the base color for long body text.
+- **Mid grays #748687, #A6AB9E, #B7B7B7, #D2D2D2**: for dividers, table lines, axes, auxiliary text, non-key series, and disabled/baseline states; must not replace the primary text color.
+- **Magenta/rose, approximately #C2185B, #B0185A**: only for small-area marks of risks, counterexamples, warnings, and negative categories — rings, labels, keywords. Must not be used at large area as a second brand color.
+- **Chart series boundary**: the primary hue is green; only gray, light green, and a little magenta serve as auxiliaries. If data series exceed 3–4, prefer distinguishing with green depth steps and grays — do not introduce rainbow colors.
+
+## 6. Fonts and Text Hierarchy
+
+- **Font character**: the body uses the QuattrocentoSans family, bold for titles and subheadings, italic for quotes or notes; the cover "Report Name" may use Unna (built-in serif).
+- **Page title**: 1.8–2.5x body size, bold, white, placed in the dark banner; long titles may wrap, staying left-aligned with tight line spacing.
+- **Cover main title**: 2.5–4x body size, black bold, placed on the light green semi-transparent block; date/series name smaller, may use italic or serif.
+- **Key message sentences/lead-ins**: 1.2–1.6x body size, may be bold or green, placed at the upper left of the body or on a light green block.
+- **Body text**: defined as 1x, regular QuattrocentoSans, tight line spacing, left-aligned; avoid centered long paragraphs.
+- **Subheadings/card titles**: 1.1–1.4x body size, bold, green, or dark; text short and explicit.
+- **Table and chart labels**: 0.75–1x body size; numbers may be bold or enlarged to 1.1–1.4x; axis labels and legends smaller, kept gray.
+- **Notes/footnotes/sources/page numbers**: 0.45–0.7x body size, gray. Footnotes must not grab attention with green.
+
+## 7. Chart Language
+
+- **Types actually present**: mainly bar charts, stacked bars, line/trend charts, donut/bubble-style relation charts, and simplified coordinate charts.
+- **Axes and gridlines**: axis lines and gridlines extremely thin, light gray; background grids may be weakened or omitted, but necessary coordinate information is kept.
+- **Series colors**: the primary series uses brand green or a combination of green depths; auxiliary series use gray, light yellow-green, or light gray; forecasts, targets, or key years use deeper green with direct number annotations.
+- **Data labels**: key bars, endpoints, peaks, or growth rates are directly annotated; numbers in dark or green. Avoid making readers rely on the legend alone for the key points.
+- **Legends**: small size, placed above or below the chart. With only 1–2 series, label directly beside the graphics.
+- **Annotations and explanations**: use thin lines, arrows, light green boxes, or small text to explain key turning points; news excerpts may serve as supporting-evidence cards. Annotations must not cover the data body.
+- **Boundaries**: no 3D bars, gradient fills, heavy shadows, rainbow heat palettes, or complex animated chart effects; chart beauty must submit to data clarity.
+
+## 8. Tables and High-Density Information
+
+- **Table role**: for multi-dimensional comparisons, risk lists, action responsibilities, capability assessments, and use-case screening; usually the page's main evidence structure, not decorative layout.
+- **Headers**: deep green, light green, or dark text, with backgrounds mainly light green/white/light gray; text short, emphasizing dimension names rather than long sentences.
+- **Row/column structure**: many columns are allowed, but strict alignment is required; use thin gray lines or light gray bases to separate rows — do not rely on thick black borders.
+- **Base colors and zebra striping**: weak light gray or light green base zones; zebra contrast should not be too strong.
+- **Key rows/columns**: emphasize with light green bases, green text, bold, dot ratings, or borders; risk/negative items use small magenta marks. No full-row bright red or high-saturation warning colors.
+- **Number and text alignment**: numbers right-aligned or centered, text left-aligned; short ratings, symbols, and dots may be centered; units uniformly stated in the column header or a footnote.
+- **Row height and density**: compact row heights; each cell limited to a phrase, short sentence, or 1–2 bullets. If a cell needs a long explanation, convert to a card page.
+- **Symbol marks**: minimal symbols such as dots, checks, short dashes, and level-color blocks may be used; a legend is required or semantics must stay consistent.
+
+## 9. Components and Graphic Elements
+
+- **Dark title banner**: the core identifying component, spanning the top, containing a darkened tech photo or near-black base, carrying the white conclusion title; the preferred choice for all content pages.
+- **Light green title/opinion block**: for cover main titles, section hints, key questions, and action principles; rectangles or large color blocks, no complex effects.
+- **Number labels**: such as "1a / 1b / 2b", expressing roadmap progress; green/dark, placed at the upper left of the body.
+- **Cards**: white or light gray base, thin border or borderless, containing a subheading, short caption, icon/number; distinguished by alignment and whitespace, no heavy shadows.
+- **Dividers**: thin gray lines, light green lines, or whitespace gaps for between columns, between table rows, and isolating the footnote area; lines should be light and not create a caged-grid feel.
+- **Ring/double-circle/matrix marks**: for core/non-core, positive/negative, key/non-key; green means core or positive, magenta means non-core/risk/warning. Text inside rings must be short.
+- **Icons**: a small number of single-color green/gray linear icons or simplified symbols, only to aid module recognition. Colorful skeuomorphic icons are prohibited.
+- **Arrows and flow lines**: express processes, causality, or conversion relationships; flat thin lines, green or gray. Avoid thick dimensional arrows.
+- **Screenshot/news cards**: only on case-evidence pages, placed on white cards or light gray areas with short captions; must have boundaries and alignment — never freely tilted or stacked.
+
+## 10. Texture and Prohibited Items
+
+A flat, restrained, consulting-report-style tech feel; the brand feel comes from brand green, dark photo banners, the QuattrocentoSans font system, and a rigorous grid — not complex decoration.
+
+- **Prohibited**: 3D charts, glow effects, heavy drop shadows, complex gradients, rainbow palettes, emoji, cartoon illustrations, colorful skeuomorphic icons, meaningless decorative lines, large blocks of centered copy, full-page grid-free free-form layout, low-contrast light text, and cover-style photo backgrounds abused across content pages.
+- **Use with caution**: photos, screenshots, magenta warning color, ring models, flow arrows, large light green base blocks. They must carry an evidence, classification, action, or emphasis function; if they only fill blank space, delete them.
+- **Usable on special pages**: covers, back covers, and section transition pages may use large darkened photos and light green blocks; case-evidence pages may use news-screenshot collages; contact pages may use headshot grids. Regular content pages should stay with white bases, the banner, and charts/tables/cards.
+- **Rounded corners and shadows**: cards should have only slight corner rounding or be nearly square; shadows are basically unused. Modules are separated by base color, lines, and whitespace.
+- **Image dependency**: content pages do not rely on large images to create mood; images appear only in the title banner or evidence cards. Every image needs darkening, cropping, and alignment, and must not break text readability.
+
+## 11. Generation Checklist
+
+- Skeleton: is it 16:9; do content pages have the dark top banner; does the body fall into a clear grid; are footer source/copyright/page number at the small bottom level?
+- Copy: is the title a conclusion or action sentence; does each page have only one main judgment; are paragraphs broken into short sentences, bullets, cards, or tables?
+- Hierarchy: do title, key message, body, subheadings, chart labels, and footnotes form a relative size difference; are specific-point-size dependence and hierarchy-free stacking avoided?
+- Color: is the base white/light gray, text black, green the accent; is magenta used only for small risk areas; does each page stay within green + gray + a small amount of warning color?
+- Layout: do charts, tables, cards, and flows each do their own job; is competition between multiple unrelated main visuals avoided; are left-right/multi-column arrangements aligned?
+- Charts: is the flat green-gray family used; are axes and gridlines light; is key data directly annotated; are 3D, gradients, and excessive series colors forbidden?
+- Tables: are headers, rows/columns, separators, key rows/columns, and number/text alignment consistent; do cells avoid long-paragraph overflow?
+- Components: do the title banner, number labels, light green opinion blocks, cards, dividers, and ring/flow lines have explicit semantics; are icons single-color and simple?
+- Prohibited items: are there no emoji, cartoon illustrations, colorful skeuomorphic icons, glow, heavy shadows, complex decoration, large centered body blocks, or abused photo backgrounds?
+- Quality: check for text overflow, truncation, garbled characters, overlap, low contrast, occlusion, empty content, wrong proportions, footnotes pressing on the body, and template repetition that mismatches the information structure.
+- No cards by default: unless the user explicitly requests it, it is strictly forbidden to use rounded rectangles or rectangular cards to build hierarchy or alignment: line segments, whitespace, and font-size differences are the superior solution
+- No evenly-divided composition: unless there is no other usable layout, do not default to three-way splits, four-way splits, or 2×2 matrices. This includes three-part conclusions such as three-column + title + conclusion